/* Landing offline — happy path.
   Medidas y estilos de texto: Figma FDV-Design-Simulador, 3264:47067 (mobile 375) y 3245:45642 (desktop 1280).
   Colores: tokens Neo de tokens.css. Excepciones: ilustración (CROSS), coral del título
   y --cta-bg, que sigue a Figma (#cf464e de Aqua) hasta que se defina el botón Neo. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@800&family=Overpass&family=Roboto&display=swap');

:root {
  --cta-bg: #cf464e;
  --cta-text: var(--text-base-contrast);
  --disabled-bg: #dfe4f0;
  --disabled-text: #acb0c4;
  /* Formulario y consentimientos: en el handoff van con color_tokens de Aqua, no con Neo */
  --f-strong: #1a1b29;      /* neutral/foreground/strong2: títulos, etiquetas y valores */
  --f-medium: #585b6f;      /* neutral/foreground/medium2: descripciones, cláusulas e íconos de selección */
  --f-active: #717489;      /* neutral/border/medium2-active: borde con valor y «Opcional» */
  --f-border: #9b9fb5;      /* borde del campo vacío */
  --f-hint: #84879d;        /* neutral/foreground/medium: marcador de posición y etiqueta «Requerido» */
  --f-icon: #45475b;        /* neutral/icon/default */
  --f-line: #e5e9f6;        /* neutral/border/medium */
  --f-error: #9e0000;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2345475B' d='M11.9994 12.9489L16.9491 7.99914L18.3633 9.41334L11.9994 15.7773L5.63537 9.41334L7.04957 7.99914L11.9994 12.9489Z'/%3E%3C/svg%3E");
  --chev-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ACB0C4' d='M11.9994 12.9489L16.9491 7.99914L18.3633 9.41334L11.9994 15.7773L5.63537 9.41334L7.04957 7.99914L11.9994 12.9489Z'/%3E%3C/svg%3E");
}

body { letter-spacing: .012em; }
img, video, svg { display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Barra con logo ─────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 64px; padding: 16px;
  background: var(--surface-base-default);
  box-shadow: 0 1px 4px rgba(69, 71, 91, .25);
}
.topbar img { width: 150px; height: 32px; }

/* ── Video sticky bajo la hoja ──────────────────── */
.hero { position: sticky; top: 64px; z-index: 0; height: 211px; overflow: hidden; background: var(--fill-base-medium); }
/* Figma (Rectangle 1990, relleno de video en modo Crop): ancho completo y recorte anclado arriba */
.hero video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ── Hoja ───────────────────────────────────────── */
.sheet {
  position: relative; z-index: 1;
  /* Handoff 2171:3662: 59,7 entre el formulario y el footer */
  margin-top: -48px; padding: 0 16px 60px;
  background: var(--surface-base-default);
  border-radius: 24px 24px 0 0;
}
.wrap { max-width: 1020px; margin: 0 auto; }
#vista-form { display: flex; flex-direction: column; gap: 8px; }

.intro { display: flex; flex-direction: column; gap: 16px; padding: 32px 0; }
.intro h1 { margin: 0; font: 700 22px/32.8px var(--font); color: var(--f-strong); }
.intro h1 .brand { color: var(--text-base-brand); }
.intro p { margin: 0; font: 400 16px/24px var(--font); color: var(--text-base-default); }
/* En Figma el separador es un vector de alto 0 con trazo de 1: no ocupa alto en el layout */
.divider { height: 1px; margin: -.5px 0; border: 0; background: var(--border-base-secondary); }
.divider-intro { background: var(--border-base-disabled); }

/* ── Tarjeta del formulario ─────────────────────── */
/* Figma usa trazo interior: el borde no suma, por eso padding = padding de Figma − 1 */
.card {
  display: flex; flex-direction: column; gap: 24px;
  padding: 15px; border: 1px solid var(--border-base-secondary); border-radius: 16px;
}
.card-head { display: flex; flex-direction: column; gap: 4px; }
.card-head h2 { margin: 0; font: 700 18px/27px var(--font); color: var(--f-strong); }
.card-head p { margin: 0; font: 400 14px/21px var(--font); color: var(--f-medium); }

.fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0; font: 700 16px/24px var(--font); color: var(--f-strong); }
.field-label .opt { font: 500 12px/18px var(--font); color: var(--f-active); }

.input {
  width: 100%; height: 44px; padding: 10px 16px;
  font: 400 16px/24px var(--font); letter-spacing: .012em; color: var(--f-strong);
  background: var(--surface-base-default);
  border: 1px solid var(--f-border); border-radius: 8px;
  outline: none; -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--f-hint); opacity: 1; }
input.input:not(:placeholder-shown), button.dd-btn.filled { border-color: var(--f-active); }
fieldset.field > legend { margin-bottom: 16px; } /* Figma: Género 24 + 16 + 24 + 8 = 72 */
.input:focus { border-color: var(--fill-primary-default); box-shadow: 0 0 0 1px var(--fill-primary-default); }
/* Autocompletar del navegador: Chrome pinta el campo celeste (:-webkit-autofill) y no deja
   cambiar background-color; se tapa con una sombra interior del color de la superficie. */
.input:-webkit-autofill, .input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-base-default) inset;
  -webkit-text-fill-color: var(--f-strong);
  caret-color: var(--f-strong);
  border-color: var(--f-active);
}
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-base-default) inset, 0 0 0 1px var(--fill-primary-default);
  border-color: var(--fill-primary-default);
}
.input:autofill { background-color: var(--surface-base-default); }

/* Fecha: ícono de calendario y separador como el Date input de AquaDS (mismas medidas que el select) */
.input-icon { position: relative; }
.input-icon .input {
  padding-right: 60px;
  background: linear-gradient(var(--f-line), var(--f-line)) no-repeat right 51.5px center / 1px 24px, var(--surface-base-default);
}
.cal-btn { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.cal-btn svg { width: 24px; height: 24px; fill: var(--f-icon); }
.cal-btn:hover { background: var(--fill-base-light); }
.cal-btn:focus-visible { outline: 2px solid var(--fill-primary-default); }
/* Select: chevron de 24 a 16 del borde y separador vertical de 24 a 12 del chevron (Figma «icon + divider»).
   Es un botón: la lista es el Dropdown de AquaDS (ver «Lista de los desplegables») y el select nativo va oculto */
.dd-btn {
  display: block; padding-right: 60px; cursor: pointer; color: var(--f-hint); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--chev) no-repeat right 16px center / 24px 24px,
    linear-gradient(var(--f-line), var(--f-line)) no-repeat right 51.5px center / 1px 24px,
    var(--surface-base-default);
}
.dd-btn.filled { color: var(--f-strong); }
.dd-btn:disabled { cursor: not-allowed; border-color: var(--disabled-bg); color: var(--disabled-text); background-image: var(--chev-off), linear-gradient(var(--disabled-bg), var(--disabled-bg)); }
.field.is-disabled .field-label { color: var(--disabled-text); }

/* Error de formato (Figma): borde de 2 px y mensaje 14/21 con ícono de 22 px a 4 px; campo de 102 de alto.
   El segundo px va como sombra interior para que el texto no se mueva */
.field.is-invalid .input, .field.is-invalid .input:focus { border-color: var(--f-error); box-shadow: inset 0 0 0 1px var(--f-error); }
.err { display: none; align-items: center; gap: 4px; margin: 0; font: 400 14px/21px var(--font); letter-spacing: .012em; color: var(--f-error); }
.err svg { flex: none; width: 22px; height: 22px; fill: var(--f-error); }
.field.is-invalid .err { display: flex; }

/* Radio y checkbox: ícono de 24 px, input nativo oculto pero accesible */
.radios { display: flex; gap: 16px; padding-bottom: 8px; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 400 16px/24px var(--font); color: var(--f-icon); }
.choice input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.choice svg { width: 24px; height: 24px; flex: none; fill: var(--f-medium); border-radius: 4px; }
.choice .on { display: none; }
.choice input:checked + svg { fill: var(--f-medium); }
.choice input:checked + svg .on { display: inline; }
.choice input:checked + svg .off { display: none; }
.choice input:focus-visible + svg { outline: 2px solid var(--fill-primary-default); outline-offset: 2px; }

/* ── ConsentBox (réplica del widget de Soyio) ───── */
.consents { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.cbox { display: flex; flex-direction: column; gap: 12px; padding: 15px; border: 1px solid var(--f-line); border-radius: 12px; }
.cbox-top { display: flex; align-items: center; gap: 8px; }
.cbox-top > svg { width: 24px; height: 24px; flex: none; fill: var(--icon-base-default); }
.cbox-top h3 { flex: 1; margin: 0; font: 700 14px/21px var(--font); color: var(--f-strong); }
.chip { flex: none; padding: 1.82px 7.27px; border: .91px solid var(--f-line); border-radius: 3.64px; font: 400 10.9px/16.36px var(--font); color: var(--f-hint); white-space: nowrap; }
.cbox-body { display: flex; gap: 10px; align-items: flex-start; }
.cbox-body .choice { align-self: flex-start; }
.cbox-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.clause { margin: 0; font: 400 12px/18px var(--font); color: var(--f-medium); cursor: pointer; }
.clause > span { display: block; }
.clause > span + span { margin-top: 4px; } /* paragraphSpacing 4 de Figma */
.more { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font: 700 12px/18px var(--font); letter-spacing: .012em; color: var(--f-medium); }
.more svg { width: 16px; height: 16px; fill: currentColor; transition: transform .2s; }
.more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Variante MoreInfo=True: bloque a todo el ancho de la tarjeta, bajo el checkbox */
.more-panel { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; font: 400 12px/18px var(--font); color: var(--text-base-secondary); }
.more-panel .item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.more-panel h4 { margin: 0; font: 700 12px/18px var(--font); color: var(--text-base-default); }
.more-panel p { margin: 0; color: var(--icon-base-secondary); }
.more-panel .lh140 { line-height: 1.4; letter-spacing: 0; }
.more-panel .rights { display: flex; flex-wrap: wrap; gap: 4px; }
.more-panel .k { color: var(--text-base-secondary); }
/* Lista con viñeta de Figma (UNORDERED, sangría 1): texto a 17 px, viñeta centrada en ~8 */
.more-panel ul { align-self: stretch; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--icon-base-secondary); }
.more-panel li { position: relative; padding-left: 17px; }
.more-panel li::before { content: '•'; position: absolute; left: 6px; color: var(--text-base-secondary); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { padding: 3px 9px; border-radius: 1000px; background: var(--fill-base-light); font: 400 11.5px/1.4 var(--font); letter-spacing: 0; color: var(--icon-base-secondary); }
.uso { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; background: var(--fill-base-light); font-weight: 700; color: var(--text-base-default); }
.uso svg { width: 20px; height: 20px; flex: none; fill: var(--icon-base-default); }
.more-panel a { color: var(--text-base-default); text-decoration: underline; }

/* ── Captcha y envío ────────────────────────────── */
.submit-row { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.captcha {
  position: relative; width: 244.86px; height: 61.62px; flex: none;
  background: #f9f9f9; border: .81px solid #d3d3d3; border-radius: 2.43px;
  box-shadow: 0 0 3.24px .81px rgba(0, 0, 0, .08);
  font-family: Roboto, Arial, sans-serif; letter-spacing: 0;
}
.captcha button { position: absolute; left: 9.73px; top: 17.84px; width: 24px; height: 24px; padding: 0; background: #fff; border: 2px solid #c1c1c1; border-radius: 2px; cursor: pointer; }
.captcha button:focus-visible { outline: 2px solid var(--fill-primary-default); outline-offset: 2px; }
.captcha button.loading { border-color: transparent; border-radius: 50%; border-top-color: #4a90e2; border-right-color: #4a90e2; animation: spin .8s linear infinite; background: transparent; }
.captcha button.ok { border-color: transparent; background: transparent; }
.captcha button.ok::after { content: ""; position: absolute; left: 6px; top: -2px; width: 8px; height: 18px; border: solid #009e55; border-width: 0 4px 4px 0; transform: rotate(40deg); }
.captcha .lbl { position: absolute; left: 44.3px; top: 23px; font-size: 11.35px; line-height: 13.78px; color: #000; }
.captcha img { position: absolute; left: 199.5px; top: 8.9px; width: 25.95px; height: 25.95px; }
.captcha .brand { position: absolute; left: 212.5px; top: 39px; transform: translateX(-50%); font-size: 8.1px; line-height: 10px; color: #555; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 43px; padding: 16px 24px;
  border: 0; border-radius: 8px; cursor: pointer;
  font: 700 16px/1 var(--font); letter-spacing: .012em;
  background: var(--cta-bg); color: var(--cta-text);
}
.btn:disabled { cursor: not-allowed; background: var(--disabled-bg); color: var(--disabled-text); }
.btn:focus-visible { outline: 2px solid var(--fill-primary-default); outline-offset: 2px; }
.btn.sending { height: 49px; cursor: progress; background: var(--cta-bg); }
.btn.sending .txt { display: none; }
.btn .spin { display: none; width: 17px; height: 17px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn.sending .spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Calendario de fecha de nacimiento ──────────────
   DatePicker de MUI X (fecha/) con el Date picker de AquaDS tal cual, colores incluidos
   (Components - AquaDS / master, «Date picker - Calendar» 5696:4886). La misma tarjeta de 349 con
   «Cancelar» y «Guardar»: en escritorio, popover bajo el campo; en móvil, centrada (diálogo de MUI). */
.fp {
  --aq-fg-strong2: #1a1b29;      /* neutral/foreground/strong2: títulos y acciones */
  --aq-fg-medium2: #585b6f;      /* neutral/foreground/medium2 y medium-active: semana y días */
  --aq-fg-medium: #84879d;       /* neutral/foreground/medium: etiqueta */
  --aq-fg-medium-hover: #717489; /* neutral/foreground/medium-hover: meses y años */
  --aq-fg-disabled: #b8bdd1;     /* color/foreground/disabled: días y acciones deshabilitados */
  --aq-fg-disabled2: #acb0c4;    /* neutral/foreground/disabled: meses y años deshabilitados */
  --aq-icon: #45475b;            /* neutral/icon/default */
  --aq-border: #e5e9f6;          /* neutral/border/medium */
  --aq-border-disabled: #dfe4f0; /* neutral/border/disabled */
  --aq-bg-hover: #f3f5fc;        /* neutral/background/light-hover */
  --aq-bg-press: #e5e9f6;        /* neutral/background/light2-hover */
  --aq-primary: #cf464e;         /* primary/background/medium */
  display: flex; flex-direction: column; gap: 20px; width: 349px; max-width: 100%; padding: 24px;
  font-family: var(--font); color: var(--aq-fg-strong2);
}
.fp.fp-v-month, .fp.fp-v-year { gap: 24px; }
.fp-paper { border-radius: 8px; background: #fff; box-shadow: 0 2px 5px rgba(201, 207, 227, .75); }
/* Móvil: la misma tarjeta, centrada, con 12 de margen */
.fp-paper.MuiDialog-paper { min-width: 0; max-width: calc(100% - 24px); margin: 12px; }
/* Velo del móvil: el componente «blur» del handoff (CROSS-Handoff 2171:13472), #1a1b29 al 35% y desenfoque
   de fondo 6 (en CSS, la mitad). En escritorio no hay velo: el popover no tapa la página. */
.fp-capa .MuiBackdrop-root { background: rgba(26, 27, 41, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Vista de MUI sin sus medidas fijas (320 × 336) */
.fp .MuiDateCalendar-root { width: auto; height: auto; max-height: none; margin: 0; overflow: visible; }
.fp .MuiPickersFadeTransitionGroup-root, .fp .MuiDateCalendar-viewTransitionContainer { overflow: visible; }

/* Cabecera: mes y año a los extremos (Body/large-bold 18/27, caret de 12) y etiqueta Body/xsmall 12/18 */
.fp-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 8px; }
.fp-v-month .fp-head, .fp-v-year .fp-head { gap: 16px; }
.fp-toggles { display: flex; justify-content: space-between; align-items: center; }
.fp-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; font: 700 18px/27px var(--font); color: var(--aq-fg-strong2); }
.fp-v-month .fp-toggle, .fp-v-year .fp-toggle { gap: 16px; }
.fp-toggle svg { width: 12px; height: 12px; fill: var(--aq-icon); }
.fp-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fp-label { margin: 0; font: 400 12px/18px var(--font); color: var(--aq-fg-medium); }
.fp :focus-visible { outline: 2px solid var(--aq-fg-strong2); outline-offset: 2px; }

/* Días: 7 columnas de 29 (Body/small 14/21) con 16 entre columnas y 12 entre filas; siempre 6 filas de alto */
.fp .MuiDayCalendar-header { justify-content: space-between; margin-bottom: 12px; }
.fp .MuiDayCalendar-weekDayLabel { width: 29px; height: 18px; margin: 0; font: 700 12px/18px var(--font); color: var(--aq-fg-medium2); }
.fp .MuiDayCalendar-slideTransition { min-height: 234px; overflow: visible; }
.fp .MuiDayCalendar-monthContainer { display: flex; flex-direction: column; gap: 12px; }
.fp .MuiDayCalendar-weekContainer { justify-content: space-between; margin: 0; }
.fp .MuiPickersDay-root, .fp .MuiPickersDay-hiddenDaySpacingFiller { width: 29px; height: 29px; margin: 0; }
.fp .MuiPickersDay-root { position: relative; padding: 0; border-radius: 50%; background: none; font: 400 14px/21px var(--font); color: var(--aq-fg-medium2); }
/* Hover solo con puntero: en pantallas táctiles queda pegado tras el toque */
@media (hover: hover) { .fp .MuiPickersDay-root:hover { background: var(--aq-bg-hover); } }
.fp .MuiPickersDay-root.Mui-focusVisible { background: var(--aq-bg-press); }
.fp .MuiPickersDay-root.MuiPickersDay-today:not(.Mui-selected) { border: 0; }
/* Hoy: punto de 6 bajo el número */
.fp .MuiPickersDay-root.MuiPickersDay-today::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--aq-primary); }
.fp .MuiPickersDay-root.Mui-selected, .fp .MuiPickersDay-root.Mui-selected:hover, .fp .MuiPickersDay-root.Mui-selected:focus { background: var(--aq-primary); color: #fff; font-weight: 400; }
.fp .MuiPickersDay-root.Mui-selected::after { background: #fff; }
.fp .MuiPickersDay-root.Mui-disabled:not(.Mui-selected) { color: var(--aq-fg-disabled); }

/* Mes y año: grilla de 3 con botones de 29 de alto (Body/small), 8 entre columnas y 12 entre filas.
   Los años muestran 4 filas y se desplazan de a una fila, sin cortes */
.fp .MuiMonthCalendar-root, .fp .MuiYearCalendar-root { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; width: auto; margin: 0; padding: 0; }
.fp .MuiYearCalendar-root { max-height: 152px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: thin; }
.fp .MuiMonthCalendar-button, .fp .MuiYearCalendar-button {
  width: auto; height: 29px; margin: 0; padding: 0 4px; scroll-snap-align: start;
  border: 1px solid var(--aq-border); border-radius: 4px; background: #fff;
  font: 400 14px/21px var(--font); color: var(--aq-fg-medium-hover); text-transform: capitalize;
}
@media (hover: hover) { .fp .MuiMonthCalendar-button:not(:disabled):hover, .fp .MuiYearCalendar-button:not(:disabled):hover { background: var(--aq-bg-hover); } }
.fp .MuiMonthCalendar-button.Mui-focusVisible, .fp .MuiYearCalendar-button.Mui-focusVisible { background: var(--aq-bg-press); }
.fp .MuiMonthCalendar-button.Mui-selected, .fp .MuiYearCalendar-button.Mui-selected,
.fp .MuiMonthCalendar-button.Mui-selected:hover, .fp .MuiYearCalendar-button.Mui-selected:hover,
.fp .MuiMonthCalendar-button.Mui-selected:focus, .fp .MuiYearCalendar-button.Mui-selected:focus { border-color: var(--aq-primary); background: var(--aq-primary); color: #fff; font-weight: 700; }
/* Mes que MUI trae de la fecha de referencia y la persona aún no eligió: se ve como uno más */
.fp.fp-sin-mes .MuiMonthCalendar-button.Mui-selected { border-color: var(--aq-border); background: #fff; color: var(--aq-fg-medium-hover); font-weight: 400; }
@media (hover: hover) { .fp.fp-sin-mes .MuiMonthCalendar-button.Mui-selected:hover { background: var(--aq-bg-hover); } }
.fp .MuiMonthCalendar-button.Mui-disabled, .fp .MuiYearCalendar-button.Mui-disabled { border-color: var(--aq-border-disabled); color: var(--aq-fg-disabled2); }

/* Acciones: «Cancelar» y «Guardar», 98 × 32, Link/medium-bold 16/24 subrayado */
.fp-actions { display: flex; justify-content: space-between; }
.fp-act { width: 98px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; font: 700 16px/24px var(--font); color: var(--aq-fg-strong2); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .fp-act:not(:disabled):hover { background: var(--aq-bg-hover); } }
.fp-act:not(:disabled):active { background: var(--aq-bg-press); }
.fp-act:disabled { background: none; color: var(--aq-fg-disabled); cursor: not-allowed; }

/* ── Lista de los desplegables (Región y Ciudad) ──────
   Menu de MUI (fecha/desplegable.jsx) con el «Dropdown simple» de AquaDS tal cual, colores incluidos
   (Components - AquaDS / master, 4698:410): opciones de 56 con trazo inferior interior, panel de radio 8
   del ancho del campo y a 2 px de él (instancia de Modales 5961:16331). Aqua no fija alto máximo: se muestran
   5 opciones y media (pedido del usuario: 5 a 6 visibles) para que se note que la lista sigue con scroll
   (desplegable.jsx usa el mismo alto para bajar la página si la lista no cabe bajo el campo).
   Aqua no tiene estado «elegida»: la opción actual usa el de presionado. */
.dd-paper.MuiPaper-root {
  --aq-fg: #585b6f;           /* neutral/foreground/medium2 */
  --aq-fg-hover: #45475b;     /* neutral/foreground/medium2-hover */
  --aq-fg-press: #303244;     /* neutral/foreground/medium2-active */
  --aq-bg-hover: #f3f5fc;     /* neutral/background/light-hover */
  --aq-bg-press: #e5e9f6;     /* neutral/background/light-active */
  --aq-border: #e5e9f6;       /* neutral/border/medium */
  margin-top: 2px; max-height: 308px; border-radius: 8px; background: #fff; box-shadow: 0 5px 16px rgba(69, 71, 91, .32);
}
.dd.MuiList-root { padding: 0; }
.dd .MuiMenuItem-root {
  min-height: 56px; padding: 16px; white-space: normal; background: #fff;
  font: 400 16px/24px var(--font); letter-spacing: .012em; color: var(--aq-fg);
  box-shadow: inset 0 -1px var(--aq-border);
}
@media (hover: hover) { .dd .MuiMenuItem-root:hover { background: var(--aq-bg-hover); color: var(--aq-fg-hover); } }
.dd .MuiMenuItem-root.Mui-focusVisible { background: var(--aq-bg-hover); color: var(--aq-fg-hover); }
.dd .MuiMenuItem-root:active, .dd .MuiMenuItem-root.Mui-selected,
.dd .MuiMenuItem-root.Mui-selected:hover, .dd .MuiMenuItem-root.Mui-selected.Mui-focusVisible { background: var(--aq-bg-press); color: var(--aq-fg-press); }

/* ── Estados finales: éxito, error de envío y enlace caducado (estilos Neo; letter-spacing 0 en mobile) ── */
/* Sin video: la franja de color parte bajo la barra del logo */
body.is-state .hero { display: none; }
/* En Figma (3255:30467 y 3255:30454) los estados no llevan footer: terminan en blanco */
body.is-state .footer { display: none; }
body.is-state .sheet { margin-top: 0; padding: 0; border-radius: 0; }
.state { letter-spacing: 0; }
.state:focus { outline: none; }
.state-head { position: relative; height: 280px; padding: 48px 16px 0; background: var(--fill-semantic-success-soft); overflow: hidden; }
.state-head .curve { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; }
.state-head .curve path { fill: var(--surface-base-default); }
.state-head .curve-d { display: none; }
.state-head img { position: absolute; left: 50%; bottom: 0; width: 160px; height: 160px; transform: translateX(-50%); }
.state-body { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px 48px; text-align: center; }
.state-msg { display: flex; flex-direction: column; gap: 8px; }
.state-msg h1 { margin: 0; font: 700 18px/26px var(--font); color: #005836; }
.state-msg p { margin: 0; font: 400 14px/20px var(--font); color: #1a1b29; }
.state-msg strong { font-weight: 700; }
/* Salto de línea forzado (U+2028 en Figma), solo en desktop */
.state-msg .br-d { display: none; }
.state .btn { width: 244px; height: 44px; }
/* Error y caducado: misma pantalla con la franja y el título en rojo Neo */
.state.is-error .state-head { background: var(--fill-semantic-error-soft); }
.state.is-error .state-msg h1 { color: #9e0000; }
/* Colores de estado: tokens Aqua success/error foreground medium y neutral strong2 (iguales en mobile y desktop) */

/* ── Footer ─────────────────────────────────────── */
.footer {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; background: var(--footer-bg); color: var(--text-base-contrast);
}
/* Handoff 2171:4828: logo, línea y lema en fila también en móvil; la línea no ocupa ancho (Line 11) */
.footer .brandline { display: flex; flex-direction: row; align-items: center; gap: 20px; min-height: 44px; }
.footer img { width: 141px; height: 30px; }
.footer .vline { display: block; width: 1px; height: 39px; margin: 0 -.5px; background: var(--text-base-contrast); }
/* Caja de 132×40 en Figma con el texto centrado en vertical: (40 − 33) / 2 */
.footer .tagline { margin: 0; padding: 3.5px 0; font: 400 15px/110% Overpass, var(--font); letter-spacing: 0; }
.footer .more-info { margin: 0; font: 400 14px/21px var(--font); }
.footer .more-info a { text-decoration: underline; }

/* ── Desktop ────────────────────────────────────── */
@media (min-width: 900px) {
  .topbar { padding: 16px 24px 16px 40px; }
  .hero { height: 440px; }
  .state-head .curve-m { display: none; }
  .state-head .curve-d { display: block; }

  .sheet { z-index: 2; margin-top: -120px; padding: 0 40px 64px; border-radius: 40px 40px 0 0; }
  /* En Figma la hoja blanca tapa los 8 px superiores del footer */
  body:not(.is-state) .footer { margin-top: -8px; }
  #vista-form { gap: 4px; }
  .intro { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; padding: 40px 0 48px; }
  .intro h1 { max-width: 573px; font: 800 38px/49.39px var(--font); }
  .intro p { max-width: 407px; font: 400 18px/27px var(--font); }
  /* Separador vertical (Vector 2140): 136 de alto, icon/base/disabled; sin ancho propio en la fila */
  .intro .divider { flex: none; align-self: center; width: 1px; height: 136px; margin: 0 -.5px; background: var(--icon-base-disabled); }

  .card { padding: 31px; border-radius: 25px; }
  .card-head h2 { font: 700 22px/32.8px var(--font); }
  .card-head p { font: 400 16px/24px var(--font); }
  .fields { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 16px; }

  .submit-row { flex-direction: row; align-items: center; gap: 32px; }
  .submit-row .btn { width: 244px; height: 44px; }
  .submit-row .btn.sending { height: 44px; }

  body.is-state .sheet { padding: 0; }
  .state-head { height: 380px; padding: 80px 32px 0; }
  .state-head .curve { height: 34px; }
  .state-head img { width: 200px; height: 200px; }
  /* En desktop los textos de estado llevan letter-spacing 1,2 % (mobile 0) */
  .state-msg h1, .state-msg p { letter-spacing: .012em; }
  .state-body { gap: 32px; padding: 32px 32px 48px; }
  .state-msg { max-width: 600px; gap: 16px; }
  .state-msg h1 { font: 700 24px/36px var(--font); }
  .state-msg p { font: 400 16px/24px var(--font); }
  .state-msg .br-d { display: inline; }

  .footer { flex-direction: row; justify-content: space-between; align-items: center; height: 101px; padding: 13px 40px; }
  .footer img { width: 216px; height: 46px; }
  /* Caja de 157×57 en Figma con el texto centrado en vertical: (57 − 39,6) / 2 */
  .footer .tagline { padding: 8.7px 0; font-size: 18px; }
  /* Handoff 2171:5788: caja de 280 con el texto en Regular 14/24, que parte solo en dos líneas */
  .footer .more-info { width: 280px; font: 400 14px/24px var(--font); }
}