/* Forum Evolucion Residence · registro de huéspedes
   Sistema de diseño: colores sacados de las fotos del piso (crema, arena, topo, madera)
   con un azul petróleo de acento. Contrastes comprobados (AA). Claude, 27-sep-2026. */

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;
  --bg: #F6F1EA;
  --bg-2: #EFE7DC;
  --surface: #FFFFFF;
  --surface-2: #FBF8F3;
  --sand-100: #F1E9DD;
  --sand-200: #E4D6C3;
  --sand-400: #C9B49A;
  --taupe: #96826E;
  --text: #2B2521;
  --text-muted: #6B5F55;
  --border: #D8CBBA;          /* decorativo */
  --border-strong: #8F7D6B;   /* bordes de campos: 3.9:1 */
  --primary: #1F5F6B;
  --primary-hover: #184E58;
  --primary-tint: #E2EEF0;
  --on-primary: #FFFFFF;
  --accent: #8C6450;
  --success: #3B6B43;
  --success-tint: #E6F0E6;
  --warning: #8A5A0B;
  --warning-tint: #FBF0DC;
  --danger: #B3261E;
  --danger-tint: #FBE9E7;
  --focus: #1F5F6B;
  --overlay: rgba(28, 22, 18, .55);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia,
                "Apple SD Gothic Neo", "Noto Serif KR", serif;
  --fs-xs: .8125rem;  /* 13 */
  --fs-sm: .9375rem;  /* 15 */
  --fs-md: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;   /* 20 */
  --fs-xl: 1.625rem;  /* 26 */
  --fs-2xl: 2.125rem; /* 34 */
  --lh: 1.5;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(59, 49, 42, .06), 0 1px 1px rgba(59, 49, 42, .04);
  --shadow-2: 0 2px 6px rgba(59, 49, 42, .06), 0 10px 28px rgba(59, 49, 42, .10);
  --shadow-3: 0 12px 40px rgba(28, 22, 18, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --tap: 48px;
  --maxw: 600px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171412; --bg-2: #1D1916; --surface: #221E1B; --surface-2: #2A2521;
    --sand-100: #2C2622; --sand-200: #3A322C; --sand-400: #6E6154; --taupe: #A8937F;
    --text: #F3EDE4; --text-muted: #BFB3A7; --border: #3F3731; --border-strong: #7D7064;
    --primary: #7BBAC5; --primary-hover: #93C9D2; --primary-tint: #1E3337; --on-primary: #0E262B;
    --accent: #D9B39E; --success: #8CC596; --success-tint: #1E2C21; --warning: #E3B266; --warning-tint: #33291A;
    --danger: #F2958D; --danger-tint: #3A1F1C; --focus: #93C9D2; --overlay: rgba(0, 0, 0, .6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 28px rgba(0, 0, 0, .35); --shadow-3: 0 12px 40px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #171412; --bg-2: #1D1916; --surface: #221E1B; --surface-2: #2A2521;
  --sand-100: #2C2622; --sand-200: #3A322C; --sand-400: #6E6154; --taupe: #A8937F;
  --text: #F3EDE4; --text-muted: #BFB3A7; --border: #3F3731; --border-strong: #7D7064;
  --primary: #7BBAC5; --primary-hover: #93C9D2; --primary-tint: #1E3337; --on-primary: #0E262B;
  --accent: #D9B39E; --success: #8CC596; --success-tint: #1E2C21; --warning: #E3B266; --warning-tint: #33291A;
  --danger: #F2958D; --danger-tint: #3A1F1C; --focus: #93C9D2; --overlay: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 28px rgba(0, 0, 0, .35); --shadow-3: 0 12px 40px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
:lang(ko) body, body:lang(ko) { word-break: keep-all; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; margin: 0 0 var(--s3); letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s4); }
a { color: var(--primary); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- layout */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s3);
  padding: calc(var(--s2) + env(safe-area-inset-top)) var(--s4) var(--s2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.topbar .marca { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-sm); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .atras { width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.topbar .atras:hover { background: var(--sand-100); }
.contenido { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--s5) var(--s4) calc(var(--s16) + 72px + env(safe-area-inset-bottom)); }
.pie-accion {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent));
}
.pie-accion .dentro { max-width: var(--maxw); margin: 0 auto; display: flex; gap: var(--s3); }

/* escritorio: fotos a la izquierda, formulario a la derecha */
@media (min-width: 960px) {
  .app.con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 600px); }
  .lateral { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
  .lateral .carrusel { height: 100%; border-radius: 0; }
  .columna { display: flex; flex-direction: column; min-height: 100dvh; }
  .pie-accion { position: sticky; }
  .contenido { padding-bottom: var(--s8); }
  .solo-movil { display: none !important; }
}
@media (max-width: 959.98px) { .lateral { display: none; } }

/* -------------------------------------------------------------- progreso */
.progreso { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: var(--s3) var(--s4) 0; }
.progreso .barra { height: 6px; border-radius: var(--r-pill); background: var(--sand-200); overflow: hidden; }
.progreso .barra > i { display: block; height: 100%; width: var(--pct, 0%); background: var(--primary); border-radius: inherit; transition: width var(--t-med) var(--ease); }
.progreso .texto { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: var(--fs-xs); color: var(--text-muted); }

/* --------------------------------------------------------------- botones */
.btn {
  --h: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--h); padding: 0 var(--s5); border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-md); cursor: pointer; text-decoration: none; user-select: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
.btn-primario:hover { background: var(--primary-hover); }
.btn-secundario { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secundario:hover { background: var(--surface-2); }
.btn-fantasma { background: transparent; color: var(--primary); }
.btn-fantasma:hover { background: var(--primary-tint); }
.btn-ancho { flex: 1; width: 100%; }
.btn .girando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.enlace-boton { background: none; border: 0; padding: var(--s2) 0; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }

/* ---------------------------------------------------------------- campos */
.campo { margin-bottom: var(--s5); }
.campo > label, .campo > .etiqueta { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s2); }
.campo .opcional { font-weight: 400; color: var(--text-muted); }
.entrada, .campo select, .campo textarea {
  width: 100%; min-height: var(--tap); padding: var(--s3) var(--s4);
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: var(--fs-md); line-height: 1.3;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.entrada::placeholder { color: color-mix(in srgb, var(--text-muted) 80%, transparent); }
.entrada:focus, .campo select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.entrada.mayus { text-transform: uppercase; letter-spacing: .04em; }
.entrada[type="date"] { min-height: var(--tap); }
.campo .ayuda { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s2); }
.campo .error { display: none; align-items: flex-start; gap: var(--s2); font-size: var(--fs-sm); color: var(--danger); margin-top: var(--s2); font-weight: 500; }
.campo.con-error .entrada, .campo.con-error select { border-color: var(--danger); background: var(--danger-tint); }
.campo.con-error .error { display: flex; }
.campo.ok .entrada { border-color: var(--success); }
.fila { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.fila > .campo { min-width: 0; }
@media (max-width: 380px) { .fila { grid-template-columns: 1fr; } }
.con-icono { position: relative; }
.con-icono .entrada { padding-right: 44px; }
.con-icono .icono-dentro { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--success); pointer-events: none; }

/* control segmentado (sexo, tipo de documento) */
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); padding: var(--s1); background: var(--sand-100); border-radius: var(--r-md); border: 1px solid var(--border); }
.segmentos label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--s2); border-radius: calc(var(--r-md) - 4px); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); text-align: center; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos input:checked + span { color: var(--text); }
.segmentos label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.segmentos label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.campo.con-error .segmentos { border-color: var(--danger); }

/* tarjetas de opción (tipo de documento) */
.opciones { display: grid; gap: var(--s3); }
.opcion { position: relative; display: flex; gap: var(--s3); align-items: center; padding: var(--s4); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); min-height: 64px; }
.opcion:hover { border-color: var(--border-strong); }
.opcion input { position: absolute; opacity: 0; }
.opcion:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opcion .ico { width: 44px; height: 32px; flex: none; color: var(--primary); }
.opcion .tit { font-weight: 600; }
.opcion .sub { font-size: var(--fs-xs); color: var(--text-muted); }
.opcion .marca-ok { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.opcion:has(input:checked) .marca-ok { border-color: var(--primary); background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; }

/* contador (número de viajeros) */
.contador { display: inline-flex; align-items: center; gap: var(--s4); padding: var(--s1); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); }
.contador button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sand-100); font-size: 22px; font-weight: 600; cursor: pointer; display: grid; place-items: center; color: var(--text); }
.contador button:hover { background: var(--sand-200); }
.contador button[disabled] { opacity: .35; cursor: not-allowed; }
.contador output { min-width: 2ch; text-align: center; font-size: var(--fs-lg); font-weight: 700; }

/* buscador de país / municipio */
.buscador { position: relative; }
.buscador .entrada { padding-right: 44px; }
.buscador .flecha { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.lista-opciones { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 280px; overflow: auto; margin: 0; padding: var(--s1); list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); overscroll-behavior: contain; }
.lista-opciones.arriba { top: auto; bottom: calc(100% + 6px); }
.lista-opciones li { padding: var(--s3); border-radius: var(--r-sm); cursor: pointer; display: flex; gap: var(--s2); align-items: center; min-height: 44px; }
.lista-opciones li[aria-selected="true"], .lista-opciones li:hover { background: var(--primary-tint); }
.lista-opciones li .band { font-size: 20px; line-height: 1; }
.lista-opciones .separador { height: 1px; background: var(--border); margin: var(--s1) var(--s2); padding: 0; min-height: 0; pointer-events: none; }
.lista-opciones .vacio { color: var(--text-muted); cursor: default; }

/* ---------------------------------------------------------------- tarjetas */
.tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); margin-bottom: var(--s4); }
.tarjeta h3 { margin-bottom: var(--s2); }
.encabezado-paso { margin-bottom: var(--s6); }
.encabezado-paso .antetitulo { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); margin-bottom: var(--s2); }
.encabezado-paso p { color: var(--text-muted); margin: 0; }
.seccion { margin: var(--s8) 0 var(--s4); padding-top: var(--s5); border-top: 1px solid var(--border); }
.seccion:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.seccion > h3 { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 700; }

/* resumen de viajero en la revisión */
.viajero-resumen { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sand-200); display: grid; place-items: center; font-weight: 700; color: var(--accent); }
.datos-lista { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; font-size: var(--fs-sm); }
.datos-lista dt { color: var(--text-muted); }
.datos-lista dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- avisos */
.aviso { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: var(--sand-100); border: 1px solid var(--border); font-size: var(--fs-sm); margin-bottom: var(--s4); }
.aviso svg { flex: none; margin-top: 2px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso-info { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.aviso-ok { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.aviso-atencion { background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.aviso-error { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.sellos { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; padding: 0; list-style: none; }
.sellos li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.sellos svg { color: var(--success); }

/* desplegables (hoja de información, privacidad, ayuda del soporte) */
details.plegable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s3); }
details.plegable > summary { list-style: none; cursor: pointer; padding: var(--s4); font-weight: 600; display: flex; align-items: center; gap: var(--s3); min-height: 52px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--t-fast); }
details.plegable[open] > summary::after { transform: rotate(-135deg); }
details.plegable .dentro { padding: 0 var(--s4) var(--s4); font-size: var(--fs-sm); color: var(--text-muted); }
details.plegable .dentro ul { padding-left: 1.2em; margin: var(--s2) 0; }

/* casillas */
.casilla { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; cursor: pointer; font-size: var(--fs-sm); }
.casilla input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.campo.con-error .casilla { color: var(--danger); }

/* ----------------------------------------------------------------- firma */
.firma { position: relative; background: var(--surface); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); overflow: hidden; touch-action: none; }
.firma canvas { display: block; width: 100%; height: 180px; cursor: crosshair; }
.firma .linea { position: absolute; left: 20px; right: 20px; bottom: 44px; border-bottom: 1px solid var(--border); pointer-events: none; }
.firma .pista { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); pointer-events: none; }
.firma.firmada { border-style: solid; border-color: var(--success); }
.firma.firmada .pista { display: none; }
.firma-acciones { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s2); }
.campo.con-error .firma { border-color: var(--danger); }

/* ------------------------------------------------------------ código email */
.codigo { display: flex; gap: var(--s2); justify-content: center; margin: var(--s6) 0; }
.codigo input { width: 48px; height: 58px; text-align: center; font-size: 26px; font-weight: 700; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); }
.codigo input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.campo.con-error .codigo input { border-color: var(--danger); }

/* ------------------------------------------------------------ carrusel fotos */
.carrusel { position: relative; overflow: hidden; background: var(--sand-200); }
.carrusel .pista-fotos { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel .pista-fotos::-webkit-scrollbar { display: none; }
.carrusel figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.carrusel img { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.carrusel .puntos { position: absolute; left: 0; right: 0; bottom: var(--s4); display: flex; justify-content: center; gap: 6px; z-index: 2; }
.carrusel .puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .55); cursor: pointer; transition: width var(--t-med) var(--ease), background var(--t-med); }
.carrusel .puntos button[aria-current="true"] { width: 22px; background: #fff; }
.carrusel .credito { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 2; font-size: 11px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.carrusel .flechas button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); color: #2B2521; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); }
.carrusel .flechas .ant { left: var(--s3); }
.carrusel .flechas .sig { right: var(--s3); }

/* portada (paso 0) */
.portada { position: relative; }
.portada .carrusel { height: min(62dvh, 520px); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.portada .carrusel .credito { display: none; }
.portada .carrusel .puntos { bottom: calc(var(--s6) + var(--s4)); }
.portada .velo { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(20, 16, 13, .72), rgba(20, 16, 13, 0)); border-radius: 0 0 var(--r-xl) var(--r-xl); pointer-events: none; z-index: 1; }
.portada .titulo-portada { position: absolute; left: var(--s5); right: var(--s5); bottom: 70px; z-index: 2; color: #fff; pointer-events: none; }
.portada .titulo-portada h1 { color: #fff; margin: 0 0 var(--s1); font-size: clamp(1.9rem, 7vw, 2.6rem); text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.portada .titulo-portada p { margin: 0; opacity: .92; font-weight: 500; }
.portada .idioma-flotante { position: absolute; top: calc(var(--s3) + env(safe-area-inset-top)); right: var(--s3); z-index: 3; }
.bienvenida { max-width: var(--maxw); margin: calc(-1 * var(--s6)) auto 0; padding: 0 var(--s4); position: relative; z-index: 4; }
.bienvenida .tarjeta { padding: var(--s6); box-shadow: var(--shadow-2); }
@media (min-width: 960px) {
  .portada .carrusel, .portada .velo, .portada .titulo-portada { display: none; }
  .bienvenida { margin: auto; width: 100%; padding: var(--s8) var(--s6); }
}

.fila-escritorio { display: none; }
.antetitulo-portada { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
@media (min-width: 960px) { .fila-escritorio { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } }

/* botón de idioma y hoja de idiomas */
.btn-idioma { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; box-shadow: var(--shadow-1); color: var(--text); }
.hoja-fondo { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; animation: aparecer var(--t-med) var(--ease); }
.hoja { width: 100%; max-width: 520px; max-height: 88dvh; overflow: auto; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-3); animation: subir var(--t-med) var(--ease); }
.hoja .asa { width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--sand-400); margin: 0 auto var(--s4); }
@media (min-width: 640px) { .hoja-fondo { align-items: center; } .hoja { border-radius: var(--r-xl); } }
.lista-idiomas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.lista-idiomas button { width: 100%; display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s4); border: 0; border-radius: var(--r-md); background: transparent; font-size: var(--fs-md); cursor: pointer; text-align: left; color: var(--text); }
.lista-idiomas button:hover { background: var(--sand-100); }
.lista-idiomas button[aria-current="true"] { background: var(--primary-tint); font-weight: 700; }
.lista-idiomas .band { font-size: 22px; }

/* ilustración de dónde está el soporte */
.ilustracion-doc { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s3); }
.ilustracion-doc svg { width: 100%; height: auto; display: block; }
.ilustracion-doc .pie { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--s3) 0 0; }

/* pantalla final */
.final { text-align: center; padding-top: var(--s8); }
.final .check { width: 88px; height: 88px; margin: 0 auto var(--s5); border-radius: 50%; background: var(--success-tint); display: grid; place-items: center; color: var(--success); animation: latido 900ms var(--ease) both; }
.final .check svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazar 700ms 250ms var(--ease) forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes latido { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

/* cinta de versión de prueba */
.cinta-demo { position: fixed; right: 12px; top: calc(64px + env(safe-area-inset-top)); z-index: 60; padding: 3px 10px; border-radius: var(--r-pill); background: var(--warning-tint); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); font-size: 11px; font-weight: 700; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 150px); overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .cinta-demo { top: auto; right: auto; bottom: var(--s4); left: var(--s4); } }

/* transiciones entre pasos */
.paso { animation: entrar var(--t-med) var(--ease) backwards; }
.paso.volviendo { animation-name: entrar-atras; }
@keyframes entrar { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes entrar-atras { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}