/* REFINE — Asesoría 1:1 y Gracias (spec consultations-thanks, D7 y D8).
 * From prototipo/public/css/asesorias.css: background photo with the treatment of "Descubrí los
 * programas" (filter + grey veil), title and form on the left, cream text. Uses tokens.css,
 * base.css (header, logo) and sections.css (btn-pill, btn-pill--xl, reveals).
 *
 * Block theme adjustments:
 * - D8: no `height: 100%; overflow: hidden` on html/body and no fixed height on .as-screen:
 *   `min-height: 100svh` instead. At 1440 × 900 and 390 × 844 it looks the same (everything
 *   fits), but with zoom, a short window or the phone keyboard open the content stays reachable.
 * - The `prefijo` select is gone: the phone uses intl-tel-input (`.iti`), styled as the pill.
 * - New: the server notice (`.as-notice`) and the consent checkbox (`.as-consent`) of step 4.
 * The only hex values are the prototype's local colours, in the `.page-asesorias` block.
 */

/* ═════════════ Pantalla ═════════════ */
.page-asesorias {
  --as-ink: var(--refine-cream);
  --as-ink-soft: rgb(255 254 234 / 0.86);
  --as-line: rgb(255 254 234 / 0.42);
  --as-fill: rgb(255 254 234 / 0.06);
  --as-fill-focus: rgb(255 254 234 / 0.11);
  --as-focus-ring: rgb(173 188 195 / 0.45);
  --as-autofill: #8E8C89;       /* gris de la pared con el velo: el autocompletado no pinta celeste */
  --as-error: #F5B8AE;          /* coral claro: se lee sobre la foto oscurecida */
  background: #9A9895;          /* gris de la foto mientras carga */
  color: var(--as-ink);
}

/* The section draws its own top padding under the fixed header (base.css adds one to every
   <main> without a hero). */
.page-asesorias .wp-site-blocks > main { padding-block-start: 0; }

/* The prototype has no floating "Mi cuenta" label here: it covered fields on tall forms (G3, 2026-10-06) */
.page-asesorias .account-label { display: none; }

/* Una pantalla: mide al menos la ventana y crece si el contenido no entra (D8) */
.as-screen {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--header-top) + var(--header-h) + clamp(16px, 3vh, 40px)) var(--gutter) clamp(16px, 3vh, 40px);
}

/* La foto queda fija detrás; mismo filtro y velo gris que "Descubrí los programas" del home */
.as-screen__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.as-screen__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 40%; /* Julie a la derecha en cualquier proporción; 40% deja aire entre su cabeza y el header */
  filter: brightness(0.78) saturate(0.9);
}
.as-screen__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--text-veil-strong) 0%, var(--text-veil-soft) 42%, transparent 72%),
    var(--text-veil-base);
}

.as-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(14px, 2.4vh, 28px);
  width: min(760px, 100%);
}

/* El cuerpo sigue al ancho y al alto de la ventana: así entra en una pantalla sin scroll */
.as-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, min(3.1vw, 6.4vh), 58px);
  line-height: 1.05;
  letter-spacing: var(--track-heading);
  color: var(--as-ink);
  text-wrap: balance;
}
.as-title strong { font-style: italic; font-weight: 600; }
.as-lead {
  display: grid;
  gap: 0.6em;
  max-width: 52ch;
  font-size: clamp(14px, min(1.05vw, 2.1vh), 17px);
  line-height: 1.55;
  color: var(--as-ink-soft);
}

/* ═════════════ Formulario (directo sobre la foto) ═════════════ */
.as-form {
  display: grid;
  gap: clamp(14px, 2.4vh, 24px);
  max-width: 700px;
  margin-top: clamp(0px, 1vh, 12px);
}
.as-step {
  display: grid;
  gap: clamp(10px, 1.8vh, 16px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* display:grid le gana al atributo hidden: sin esta regla se veían los 4 pasos a la vez */
.as-step[hidden] { display: none; }
.as-step:not([hidden]) { animation: as-step-in var(--dur-base) var(--ease-out); }

/* Paso 1 en una grilla de 2×2, como el formulario actual del sitio */
.as-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@keyframes as-step-in { from { opacity: 0; transform: translateY(10px); } }

.as-field {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
.as-field > label,
.as-label {
  padding: 0;
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--as-ink-soft);
}
.as-label { margin-bottom: 6px; }
/* Las preguntas largas van en caja normal: en mayúscula se leen mal (como en el formulario actual) */
.as-field > label.as-q,
.as-label.as-q {
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 19px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--as-ink);
}

/* Pastillas transparentes con borde fino, como los botones */
.as-field input {
  width: 100%;
  min-height: clamp(44px, 6vh, 52px);
  padding: 0 20px;
  border: 1px solid var(--as-line);
  border-radius: 999px;
  background: var(--as-fill);
  font: inherit;
  font-size: 16px;
  color: var(--as-ink);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.as-field input::placeholder { color: rgb(255 254 234 / 0.5); }
.as-field input:focus {
  outline: none;
  border-color: var(--as-ink);
  background: var(--as-fill-focus);
  box-shadow: 0 0 0 3px var(--as-focus-ring);
}
.as-field [aria-invalid="true"] { border-color: var(--as-error); }
.as-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--as-ink);
  box-shadow: inset 0 0 0 100px var(--as-autofill);
  caret-color: var(--as-ink);
}
/* la edad no necesita las flechitas del número */
.as-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.as-field input[type="number"]::-webkit-inner-spin-button,
.as-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ═════════════ Teléfono: intl-tel-input dentro de la pastilla ═════════════
   The library wraps the input in .iti, puts the flag + dial code button on its left edge and
   sets the input's left padding inline to make room for it. */
.as-field .iti {
  --iti-border-color: var(--as-line);
  --iti-icon-color: var(--as-ink);
  --iti-hover-color: var(--as-fill-focus);
  --iti-spacer-horizontal: 18px;
  --iti-arrow-padding: 8px;
  display: block;
  width: 100%;
}
.as-field .iti__selected-country { border-radius: 999px 0 0 999px; }
.as-field .iti__selected-country-primary { border-radius: 999px 0 0 999px; }
.as-field .iti__selected-country:focus-visible {
  outline: 1px solid var(--as-ink);
  outline-offset: -4px;
}
.as-field .iti__selected-dial-code { font-size: 16px; color: var(--as-ink); }
.as-field .iti__flag { box-shadow: 0 0 0 1px var(--as-line); }

/* Lista de países: panel claro con tinta, como el desplegable nativo del prototipo.
   In dropdown mode it lives inside .iti; on small screens the library mounts it fullscreen in
   <body>, hence the `.page-asesorias` scope instead of `.as-field`. */
.page-asesorias .iti__country-selector {
  --iti-border-color: var(--summer-line);
  --iti-icon-color: var(--refine-ink);
  --iti-hover-color: var(--summer-line);
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-primary);
  color: var(--refine-ink);
  font-size: 15px;
}
.page-asesorias .iti--inline-country-selector .iti__country-selector {
  margin-top: 6px;
  border: 0;
  box-shadow: 0 18px 40px -12px var(--glass-shadow);
}
.page-asesorias .iti--inline-country-selector .iti__country-list { max-height: min(260px, 40vh); }
.page-asesorias .iti__country { min-height: 40px; }
.page-asesorias .iti__dial-code { color: var(--summer-ink-soft); }
/* The search field sits inside .as-field in dropdown mode: it must not look like a pill. */
.page-asesorias .iti input.iti__search-input,
.page-asesorias .iti input.iti__search-input:focus {
  min-height: 46px;
  /* .as-field input would reset the library's room for the search and clear icons */
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  color: var(--refine-ink);
}
.page-asesorias .iti input.iti__search-input::placeholder { color: var(--summer-ink-soft); }
/* One line only (G3, 2026-10-06): the global focus outline drew a second line 4px below the
   wrapper's border. The 2px ink underline on the wrapper is the search field's focus indicator. */
.page-asesorias .iti input.iti__search-input:focus-visible { outline: none; }
.page-asesorias .iti__search-input-wrapper:focus-within { box-shadow: inset 0 -2px 0 var(--refine-ink); }

/* Objetivo: radios propios en crema */
.as-options { display: grid; gap: 4px; }
.as-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  font-size: 16px;
  color: var(--as-ink);
  cursor: pointer;
}
.as-radio input,
.as-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--as-ink);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.as-radio input:checked { background: radial-gradient(circle, var(--as-ink) 0 42%, transparent 46%); }
.as-radio input:focus-visible,
.as-consent input:focus-visible { outline: 1px solid var(--as-ink); outline-offset: 3px; }

/* Consentimiento (paso 4): casilla cuadrada con el mismo trazo que los radios */
.as-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  margin-top: 4px;
}
.as-consent input {
  display: grid;
  place-content: center;
  margin-top: 2px;
  border-radius: 4px;
}
.as-consent input::before {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid var(--refine-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.as-consent input:checked { background: var(--as-ink); }
.as-consent input:checked::before { transform: rotate(45deg) scale(1); }
.as-consent input[aria-invalid="true"] { border-color: var(--as-error); }
.as-consent__text {
  display: grid;
  justify-items: start;
  gap: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--as-ink-soft);
}
.as-consent__text label { cursor: pointer; }
.as-consent__text a {
  color: var(--as-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.as-consent .as-error { grid-column: 2; }

.as-error { font-size: 13px; color: var(--as-error); }
.as-error:empty { display: none; }
/* Aviso del servidor (?consulta=…) arriba del formulario: el mismo color, un poco más grande */
.as-notice { max-width: 52ch; font-size: 15px; line-height: 1.5; }

/* Honeypot: fuera de la pantalla (no display:none, que algunos bots detectan) */
.as-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Atrás y Siguiente del mismo ancho; en el paso 1, Siguiente ocupa toda la fila */
.as-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.as-back[hidden] + .as-next { grid-column: 1 / -1; }
.as-next { grid-column: 2; width: 100%; }
.as-next[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.as-back {
  min-height: 51px;
  border: 1px solid rgb(255 254 234 / 0.7);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-btn);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--as-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.as-back:hover { background: rgb(255 254 234 / 0.1); }
.as-back:focus-visible { outline: 1px solid var(--as-ink); outline-offset: 4px; }
@media (min-width: 1024px) {
  .as-back { min-height: 56.1px; } /* mismo alto que .btn-pill--xl en desktop */
}

/* Gracias: el botón se separa del texto un poco más que los párrafos entre sí */
.as-cta { justify-self: start; margin-top: clamp(8px, 1.6vh, 16px); }

/* ═════════════ Pantallas muy bajas: la bajada del formulario se acorta para que todo entre ═════════════ */
@media (max-height: 640px) {
  .as-lead:has(+ .as-form) p + p,
  .as-lead:has(+ .as-notice) p + p { display: none; }
}

/* ═════════════ Mobile ═════════════ */
@media (max-width: 1023px) {
  /* mismo velo que "Descubrí los programas" en responsive, pero el refuerzo va arriba:
     acá el texto y el formulario arrancan desde el header */
  .as-screen__bg img { object-position: 74% 50%; }
  .as-screen__bg::after {
    background:
      linear-gradient(180deg, var(--text-veil-strong) 0%, var(--text-veil-soft) 55%, transparent 85%),
      var(--text-veil-base);
  }
}
@media (max-width: 767px) {
  .as-screen { align-items: flex-start; }
  .as-title { font-size: clamp(24px, min(7vw, 4.4vh), 34px); }
  .as-lead { font-size: 14px; }
  .as-nav { gap: 10px; }
  .as-row { grid-template-columns: 1fr; gap: 10px; }
  .as-row--name { grid-template-columns: 2fr 1fr; }
  .as-field .iti { --iti-spacer-horizontal: 16px; --iti-arrow-padding: 6px; }
}

/* celulares: el paso 1 tiene 4 campos apilados; con un solo párrafo de bajada entra sin scroll */
@media (max-width: 767px) and (max-height: 780px) {
  .as-lead:has(+ .as-form) p + p,
  .as-lead:has(+ .as-notice) p + p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .as-step:not([hidden]) { animation: none; }
  .as-consent input::before { transition: none; }
}