/* =====================================================================
   CONTACTO, PIE, WHATSAPP Y MODAL — el cierre
   ---------------------------------------------------------------------
   Vuelve a --ground-deep, el mismo suelo del hero: la página termina
   donde empezó. Es el único cierre posible si el hero fue el momento
   grande — cerrar en un suelo más claro dejaría la sensación de que
   falta algo abajo.

   TODO ACÁ DEGRADA SOLO. js/form.js lee config.js y, si un campo está
   vacío, esa pieza se apaga en vez de romperse:
     · sin CALENDAR_URL → los CTA bajan al formulario en vez de abrir el
       modal
     · sin WEBHOOK_URL  → el formulario arma un mailto: con todo cargado
     · sin WHATSAPP     → el botón flotante no se renderiza
   Nada de esto muestra un error al visitante. Un formulario que falla
   en silencio es peor que uno que no existe, así que el respaldo por
   mail está siempre.
   ===================================================================== */

/* La cabecera es .sec__head (css/v2.css). El formulario ya no vive al
   costado de la copia: cabecera centrada, promesas en fila y formulario
   sobre el mismo eje. Con el formulario a la derecha toda la sección
   colgaba a la izquierda mientras el resto de la página está centrado. */
.contacto{overflow:clip}
.contacto__grid{
  display:grid;
  /* El ancho del formulario, no una columna. 720px es donde .form__row
     todavía entra en dos columnas sin que los campos queden anchísimos. */
  max-width:720px;margin-inline:auto;
}

/* Los tres datos duros del cierre, en fila arriba del formulario. Sin
   hairline: separar con aire alcanza y un borde de ancho completo
   partiría en dos una sección que ahora es una sola columna. */
.contacto__facts{
  list-style:none;margin:0 auto clamp(32px, 4vw, 56px);padding:0;
  max-width:1000px;
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 32px);
}
.contacto__fact{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-3);align-items:start;
  font-size:var(--text-sm);line-height:var(--lh-body);
  color:var(--text-muted);
}
.contacto__fact b{color:var(--paper);font-weight:var(--fw-semibold)}
.contacto__fact .ico{--ico-size:17px;color:var(--cyan-400);margin-top:3px}

/* =====================================================================
   EL FORMULARIO — dos pasos
   ---------------------------------------------------------------------
   Rediseño: antes eran siete campos apilados de una. Ahora se pregunta
   primero QUÉ TE PASA con tarjetas grandes —que se eligen de un toque y
   no obligan a leer un desplegable— y recién después quién sos. Se ve
   menos de una sin haber sacado ningún campo.

   Opaco, no vidrio: acá se escribe, y el texto sobre una superficie
   translúcida encima de un fondo oscuro pierde legibilidad justo donde
   más se necesita.
   ===================================================================== */
.form{
  padding:clamp(20px, 2.6vw, 34px);
  border-radius:var(--radius-lg);
  background:#0A2050;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 28px 70px rgba(0,6,20,.55);
}

/* Trampa para bots. Fuera de pantalla, no display:none: algunos bots
   saltean lo que está oculto con display y completan el resto. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Progreso. Sólo con JS: sin él los dos pasos están a la vista y
       un "1 de 2" sería mentira. --- */
.form__prog{display:none;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.form.is-js .form__prog{display:flex}
.form__prog-bar{
  flex:1;height:4px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10);overflow:hidden;
}
.form__prog-bar i{
  display:block;height:100%;width:100%;
  border-radius:inherit;background:var(--grad-cyan);
  transform:scaleX(.5);transform-origin:left center;
  transition:transform var(--dur-slow) var(--ease-out-soft);
}
.form__prog-txt{
  font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--paper-mute);flex:0 0 auto;
}
.form__prog-txt b{color:var(--cyan-300)}

/* --- El escenario. Con JS los pasos se apilan en la misma celda y el
       alto lo maneja el resorte de js/v2.js. --- */
.form__stage{position:relative}
.form.is-js .form__stage{overflow:hidden}
.paso{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--space-5)}
.form.is-js .paso{
  position:absolute;inset:0 0 auto 0;
  opacity:0;transform:translate3d(0, 10px, 0);
  transition:opacity var(--dur-base) var(--ease-out-soft),
             transform var(--dur-base) var(--ease-out-soft);
}
.form.is-js .paso.is-on{position:relative;opacity:1;transform:none}
/* Sin JS los dos pasos van uno abajo del otro, separados, y "Seguir" y
   "Volver" no tienen nada que hacer: se ocultan. */
.form:not(.is-js) .paso + .paso{margin-top:var(--space-8)}
.form:not(.is-js) :is([data-next], [data-back]){display:none}

.paso__legend{
  float:left;width:100%;padding:0;margin:0;
  font-family:var(--font-subhead);
  font-size:var(--type-h4-size);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-title);color:var(--text-strong);
}
.paso__hint{
  margin:calc(var(--space-5) * -1 + var(--space-2)) 0 0;
  font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-mute);
}

/* =====================================================================
   TARJETAS DE OPCIÓN — reemplazan al <select>
   Un desplegable esconde las opciones justo cuando la persona todavía
   no sabe cuál es la suya. Acá se ven las seis, cada una con una línea
   que la explica, y se elige de un toque.
   ===================================================================== */
.opts{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--space-3)}
.opt{display:grid;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt input{position:absolute;opacity:0;width:1px;height:1px}

.opt__box{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3);align-items:start;
  height:100%;padding:var(--space-4);
  border-radius:var(--radius-md);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-out-soft);
}
.opt:hover .opt__box{background:rgba(0,0,0,.30);border-color:rgba(255,255,255,.24)}
.opt:active .opt__box{transform:scale(.985)}
.opt input:checked + .opt__box{
  background:rgba(12,192,223,.13);
  border-color:rgba(12,192,223,.55);
}
.opt input:focus-visible + .opt__box{outline:2px solid var(--focus-ring);outline-offset:2px}

.opt__ico{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:var(--radius-xs);
  background:rgba(255,255,255,.07);
  color:var(--paper-dim);
  transition:background-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.opt__ico .ico{--ico-size:18px}
.opt input:checked + .opt__box .opt__ico{background:rgba(12,192,223,.24);color:var(--cyan-200)}

.opt__txt{display:grid;gap:3px;min-width:0}
.opt__tit{
  font-family:var(--font-subhead);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-ui);color:var(--paper);
  text-wrap:pretty;
}
.opt__sub{font-size:var(--text-2xs);line-height:1.45;color:var(--paper-mute);text-wrap:pretty}

/* La marca de elegido aparece con un golpe corto: es la confirmación de
   que se registró el toque. Se pueden marcar varias (son checkbox). */
.opt__tick{
  display:grid;place-items:center;
  width:22px;height:22px;border-radius:var(--radius-pill);
  background:var(--grad-cyan);color:var(--white);
  opacity:0;transform:scale(.5);
  transition:opacity var(--dur-fast) var(--ease-out-soft),
             transform var(--dur-base) var(--ease-organic);
}
.opt__tick .ico{--ico-size:13px}
.opt input:checked + .opt__box .opt__tick{opacity:1;transform:scale(1)}

/* =====================================================================
   CAMPOS
   ===================================================================== */
.form__row{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--space-4)}
.field{display:grid;gap:var(--space-2);min-width:0}
.field__label{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-ui);color:var(--paper-dim);
}
.field__opt{
  padding:1px 7px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07);
  font-size:var(--text-3xs);font-weight:var(--fw-medium);
  letter-spacing:0;text-transform:none;color:var(--paper-mute);
}
.field :is(input, textarea){
  width:100%;min-height:50px;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-body);font-size:var(--text-base);
  color:var(--paper);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.field :is(input, textarea)::placeholder{color:var(--paper-mute)}
.field :is(input, textarea):hover{border-color:rgba(255,255,255,.24)}
.field :is(input, textarea):focus-visible{
  outline:none;
  border-color:var(--cyan-400);
  background:rgba(0,0,0,.36);
  box-shadow:0 0 0 3px rgba(12,192,223,.22);
}

/* El error aparece SÓLO cuando hay error: reservar el renglón siempre
   deja huecos raros entre campos. */
.field__error{display:none;font-size:var(--text-2xs);color:#FF9B96}
.field.is-error input{border-color:#D93B36;background:rgba(217,59,54,.10)}
.field.is-error .field__error{display:block}

/* El campo libre del paso 2: mismo material que los demás, alto para
   que invite a escribir más de una línea, y se estira hacia abajo. */
.field textarea{
  min-height:120px;resize:vertical;
  line-height:var(--lh-body);
}

/* Paso 2: hace falta marcar algo O escribir. Si no, este aviso; aparece
   sólo cuando corresponde, igual que los errores de campo. */
.paso__error{display:none;margin:0;font-size:var(--text-2xs);color:#FF9B96}
.paso__error.is-on{display:block}

/* --- Checkbox --- */
.check{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-3);align-items:start;
  font-size:var(--text-sm);line-height:var(--lh-body);
  color:var(--text-muted);cursor:pointer;
}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{
  display:grid;place-items:center;
  width:22px;height:22px;margin-top:1px;
  border-radius:var(--radius-xs);
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.20);
  color:transparent;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.check__box .ico{--ico-size:14px}
.check input:checked + .check__box{background:var(--grad-cyan);border-color:transparent;color:var(--white)}
.check input:focus-visible + .check__box{outline:2px solid var(--focus-ring);outline-offset:2px}

/* --- Acciones --- */
.paso__acciones{display:flex;gap:var(--space-3);align-items:center;justify-content:center}
.btn--block{width:100%}

/* Techo para los botones del formulario. Con el formulario a 720px, un
   btn--block medía 650px: a ese ancho un pill deja de leerse como botón
   y pasa a leerse como una barra. 380px es donde todavía es el elemento
   más grande del bloque sin dejar de ser un objeto. */
.paso__next{max-width:380px;margin-inline:auto}
.paso__acciones .btn[type="submit"]{flex:1 1 auto;max-width:380px}
/* La flecha de volver apunta al revés y viaja hacia atrás en el hover:
   el movimiento intermedio tiene que apuntar al destino. */
.btn__icon--back{transform:scaleX(-1)}
.btn:hover .btn__icon--back{transform:scaleX(-1) translateX(4px)}
.paso__next{margin-top:var(--space-2)}

.spinner{
  width:17px;height:17px;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--white);
  border-radius:var(--radius-pill);
  animation:hei-spin 700ms linear infinite;
}
@keyframes hei-spin{to{transform:rotate(360deg)}}

/* --- Estados del envío --- */
.form__status{
  display:none;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4);border-radius:var(--radius-sm);
  font-size:var(--text-sm);line-height:var(--lh-body);
}
.form__status.is-on{display:flex}
.form__status--ok{background:rgba(54,221,55,.12);border:1px solid rgba(54,221,55,.35);color:var(--green-200)}
.form__status--err{background:rgba(217,59,54,.12);border:1px solid rgba(217,59,54,.4);color:#FFB4B0}
.form__status .ico{margin-top:1px}

/* =====================================================================
   PIE
   ===================================================================== */
/* =====================================================================
   CIERRE — lo que quedó del pie

   El pie de tres columnas se borró: era un índice de la misma página
   que el visitante acaba de scrollear, y en una landing cada link es
   una salida del embudo. Queda una línea: el mail y el año.

   Va DENTRO de #contacto y no en un <footer> propio porque no es una
   sección: es el remate de la última. Un suelo nuevo para dos datos
   agrega una costura que no dice nada.
   ===================================================================== */
.cierre{
  display:flex;justify-content:center;align-items:center;
  gap:var(--space-3) var(--space-6);flex-wrap:wrap;
  max-width:720px;margin:clamp(40px, 5vw, 64px) auto 0;
  padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--text-xs);color:var(--paper-mute);
}
/* inline-flex + min-height: el link del mail medía 18px de alto, un
   blanco imposible con el dedo. Crece la zona tocable, no el texto. */
.cierre a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--paper-dim);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard);
}
.cierre a:hover{color:var(--cyan-300)}

/* =====================================================================
   WHATSAPP FLOTANTE
   Sin número en config.js no se renderiza: js/form.js le pone .is-on
   sólo cuando hay a dónde mandar. Un botón que no lleva a ningún lado
   es peor que no tener botón.
   ===================================================================== */
.fab{
  position:fixed;right:clamp(16px, 2.4vw, 28px);bottom:clamp(16px, 2.4vw, 28px);
  z-index:70;display:none;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);min-height:52px;
  border-radius:var(--radius-pill);
  background:var(--green-500);color:var(--white);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,8,24,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform var(--dur-instant) var(--ease-out-soft),
             box-shadow var(--dur-base) var(--ease-out-soft);
}
.fab.is-on{display:inline-flex}
.fab:hover{box-shadow:0 14px 38px rgba(0,8,24,.6), inset 0 1px 0 rgba(255,255,255,.3)}
.fab:active{transform:scale(.97)}

/* =====================================================================
   MODAL DEL CALENDARIO
   Se atenúa el fondo y se empuja hacia atrás: es una tarea que bloquea,
   así que el resto tiene que retroceder de verdad (§12).
   ===================================================================== */
.modal{
  position:fixed;inset:0;z-index:90;
  display:none;place-items:center;
  padding:clamp(16px, 3vw, 40px);
  background:rgba(0,6,20,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.modal.is-on{display:grid}
.modal__box{
  width:min(100%, 920px);height:min(86vh, 780px);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--radius-lg);
  background:#0A2050;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px rgba(0,4,16,.7);
}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal__title{
  font-family:var(--font-subhead);
  font-size:var(--text-md);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-title);color:var(--text-strong);
}
.modal__close{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:var(--paper);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard);
}
.modal__close:hover{background:rgba(255,255,255,.16)}
.modal__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.modal__close .ico{--ico-size:18px}
.modal iframe{flex:1;width:100%;border:0;background:var(--white)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:860px){
  /* Las tres promesas se apilan antes que las tarjetas de opción: con
     tres columnas a este ancho quedaban en cuatro renglones cada una. */
  .contacto__facts{grid-template-columns:1fr;max-width:52ch;gap:var(--space-4)}
}
@media (max-width:640px){
  .form__row{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .paso__acciones{flex-direction:column-reverse;align-items:stretch}
  /* El texto del flotante se va: en un pulgar el ícono alcanza y el
     botón deja de tapar media pantalla. */
  .fab span{display:none}
  .fab{padding:0;width:54px;height:54px;justify-content:center}
}

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .spinner{animation-duration:1600ms}
  /* Los pasos se relevan con fundido, sin desplazamiento. El alto lo
     aplica js/v2.js de una, sin resorte. */
  .form.is-js .paso{transform:none;transition:opacity var(--dur-fast) linear}
  .opt__tick{transition:opacity var(--dur-fast) linear}
  .opt:active .opt__box{transform:none}
  .form__prog-bar i{transition:none}
  .fab:active{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  .modal{background:var(--ground-deep);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more){
  .form,.modal__box{border-color:rgba(255,255,255,.4)}
  .field :is(input, textarea),.opt__box{border-color:rgba(255,255,255,.4)}
  .opt__sub{color:var(--paper-dim)}
  .contacto__fact{color:var(--paper-dim)}
  .cierre,.cierre a{color:var(--paper-dim)}
}