/* Variante B del A/B test: pensada para celular. Hero mínimo y el formulario
   arriba de todo, sin panel informativo ni botón de "Agendar llamada".
   Todo lo demás se hereda de /styles.css. */

/* Un solo degradé continuo detrás del header y del hero: empieza en el borde
   de arriba y va aclarando sin ningún tramo plano, así no hay línea donde
   "arranca". Vive en el body, no en el header, para que no se superpongan dos
   capas verdes. Las paradas siguen una curva suave: cortes bruscos entre dos
   stops es lo que se lee como banda. */
.v-b{position:relative}
.v-b::before{content:"";position:absolute;inset:0 0 auto;height:300px;z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(closest-side, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg,
      #0b4227 0%,
      #0c4528 7%,
      #0d4a2c 14%,
      #0f5232 21%,
      #145f3d 26%,
      #1c7350 32%,
      #2b8a63 38%,
      #45a07b 44%,
      #66b596 50%,
      #8ac9b0 57%,
      #aadac6 64%,
      #c6e5d7 71%,
      #dcefe6 79%,
      #eef7f2 87%,
      #f9fcfb 94%,
      #ffffff 100%);
  background-size:22px 22px, 100% 100%}

/* Header y hero transparentes: el color lo pone el degradé de atrás. */
.v-b .nav{justify-content:center;position:relative;z-index:1;border-bottom:0;
  backdrop-filter:none;background:transparent;color:var(--blanco);
  padding:calc(16px + env(safe-area-inset-top)) 20px 10px}
.v-b .nav__marca{font-size:clamp(14px,4vw,17px);font-weight:700;letter-spacing:-.01em}
.v-b .nav__marca i{font-style:normal;color:rgba(255,255,255,.45);margin-inline:5px}
.v-b .hero,.v-b .agenda,.v-b .vsl{position:relative;z-index:1}
.v-b .hero__fondo{display:none}

/* Sin líneas duras entre secciones: el hero se disuelve en la agenda con un
   halo verde muy tenue, y la tarjeta hace de corte real. */
.v-b section{border-bottom:0}
.v-b .hero--corto{padding-block:30px 18px}
.v-b .hero--corto .destacado{margin-top:2px}
/* Los datos de la llamada viven abajo del calendario, no en el hero. */
.v-b .cal .hero__datos{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);font-size:13px}

/* La agenda arranca alta: es lo único que importa en esta variante. */
.v-b .agenda{padding-top:10px}
.v-b .agenda h2{font-size:clamp(19px,5vw,24px)}

/* Una sola columna en cualquier pantalla: el formulario y abajo el calendario. */
.v-b .tarjeta{max-width:560px;margin-inline:auto}
/* minmax(0,1fr): sin esto, el contenido mínimo de la tira de 7 días estira la
   tarjeta más allá del ancho del celular y se corta todo a la derecha. */
.v-b .tarjeta__cuerpo{grid-template-columns:minmax(0,1fr)}
.v-b .panel,.v-b .cal,.v-b .cal__zona,.v-b .cal__bloqueable{min-width:0}
.v-b .cal__tz{overflow-wrap:anywhere}
.v-b .panel{padding:18px 16px 4px}
.v-b .cal{border-top:1px solid var(--linea);border-left:0;padding:18px 16px}

/* Campos cómodos con el pulgar y sin zoom automático en iOS (16px mínimo). */
.v-b .campo input,.v-b .campo select,.v-b .campo textarea{font-size:16px;padding:13px 14px}
.v-b .horarios__lista{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.v-b .btn--bloque{padding:15px;font-size:16px}


/* Calendario velado hasta completar el formulario. El velo no explica nada:
   al tocarlo marca en rojo lo que falta (ver marcarFaltantes en app.js). */
.v-b .cal__zona{position:relative}
.v-b .cal__bloqueable{display:grid;gap:14px;filter:blur(1.6px);opacity:.72;
  transition:filter .25s ease,opacity .25s ease;pointer-events:none;user-select:none}
.v-b .cal--abierto .cal__bloqueable{filter:none;opacity:1;pointer-events:auto;user-select:auto}
.v-b .cal__velo{position:absolute;inset:-6px;z-index:5;background:transparent;
  backdrop-filter:none;cursor:pointer;display:block;padding:0}
.v-b .cal--abierto .cal__velo{display:none}
@media (prefers-reduced-motion:reduce){.v-b .cal__bloqueable{transition:none}}


/* Calendario compacto: tira de 7 días en vez de la grilla del mes. */
.v-b .cal__cabecera,.v-b .cal__semana{display:none}
.v-b .cal__grilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.v-b .dia{display:grid;justify-items:center;gap:2px;padding:9px 2px 10px;border-radius:12px;min-width:0;
  border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);
  font:inherit;cursor:pointer;min-height:56px;align-content:center}
.v-b .dia__nombre{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:0;
  color:var(--gris-suave)}
.v-b .dia__num{font-size:16px;font-weight:700;line-height:1}
.v-b .dia[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.v-b .dia[aria-pressed="true"] .dia__nombre{color:rgba(255,255,255,.7)}
.v-b .dia--off{border-color:transparent;background:transparent;color:var(--gris-suave);
  cursor:default;opacity:.55}