/* YachAI · página de preventa · estilos
   Paleta de la marca: hueso, azul noche, gris piedra, verde andino. Sora (títulos) + Inter (texto). */

:root {
  --hueso: #F7F5F0;
  --blanco: #FFFFFF;
  --noche: #1B2A4A;
  --noche-2: #24365C;
  --piedra: #6B7280;
  --verde: #2BB39A;
  --verde-prof: #17806E;
  --borde: #E3DFD5;
  --pendiente: #FFE08A;
  --f-titulo: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1120px;
  --lateral: clamp(1.25rem, 5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--noche);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--verde-prof); text-underline-offset: 3px; }
a:hover { color: var(--noche); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 2px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--f-titulo); color: var(--noche); margin: 0; }
h1 { font-weight: 800; font-size: clamp(2.7rem, 7.2vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.12; letter-spacing: -0.025em; max-width: 22ch; }
h3 { font-weight: 600; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
.texto { max-width: 62ch; }
.suave { color: var(--piedra); }

.contenedor { width: min(100% - 2 * var(--lateral), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--blanca { background: var(--blanco); }
.seccion--noche { background: var(--noche); color: #E8ECF4; }
.seccion--noche h2, .seccion--noche h3 { color: #fff; }
.cabecera-seccion { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }

/* Marcas de campos pendientes (solo mientras no estén confirmados) */
.pendiente { background: var(--pendiente); color: #4a3b00; padding: 0 .25em; border-radius: 3px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75rem 1.5rem; border: 2px solid transparent; border-radius: 4px;
  font: 600 1rem/1.2 var(--f-texto); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.boton--principal { background: var(--verde); color: var(--noche); }
.boton--principal:hover { background: #3CC6AC; color: var(--noche); }
.boton--secundario { border-color: var(--noche); color: var(--noche); background: transparent; }
.boton--secundario:hover { background: var(--noche); color: #fff; }
.seccion--noche .boton--secundario { border-color: #fff; color: #fff; }
.seccion--noche .boton--secundario:hover { background: #fff; color: var(--noche); }
.boton[disabled] { opacity: .65; cursor: progress; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(247, 245, 240, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.cabecera__logo img { height: 2.35rem; width: auto; }
.menu { display: none; gap: 1.75rem; }
.menu a { color: var(--noche); text-decoration: none; font-weight: 500; font-size: .98rem; }
.menu a:hover { color: var(--verde-prof); text-decoration: underline; text-underline-offset: 6px; }
.cabecera .boton { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .95rem; }
@media (min-width: 900px) { .menu { display: flex; } }

/* ---------- Héroe ---------- */
.heroe { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(5.5rem, 12vw, 9rem); overflow: hidden; }
.heroe__rejilla { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.heroe__texto { display: grid; gap: 1.5rem; justify-items: start; }
.heroe__bajada { font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.5; max-width: 34ch; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.heroe__nota { font-size: .95rem; color: var(--piedra); max-width: 44ch; }
.heroe__nota strong { color: var(--noche); font-weight: 600; }
@media (min-width: 960px) { .heroe__rejilla { grid-template-columns: 1.08fr .92fr; } }

.heroe { position: relative; }
.heroe__escena { position: relative; }
.escalera { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(3rem, 7vw, 5.5rem); pointer-events: none; }
.escalera path { fill: none; stroke: var(--verde); stroke-width: 3; stroke-linejoin: miter; vector-effect: non-scaling-stroke; stroke-dasharray: 2000; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .escalera path { animation: dibujar 1.8s cubic-bezier(.3, .6, .2, 1) .25s both; }
  @keyframes dibujar { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
}
.consulta {
  position: relative; z-index: 1; background: var(--noche); color: #E8ECF4;
  border-radius: 14px; padding: 1.25rem; display: grid; gap: 1rem;
  box-shadow: 0 18px 40px -22px rgba(27, 42, 74, .6);
}
.consulta__cabecera { display: flex; align-items: center; gap: .65rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.consulta__icono { width: 2rem; height: 2rem; border-radius: 6px; background: var(--hueso); padding: .25rem; object-fit: contain; }
.consulta__cabecera strong { font: 600 .98rem/1.2 var(--f-titulo); color: #fff; display: block; }
.consulta__cabecera span { font-size: .82rem; color: #AAB4C8; }
.mensaje { display: grid; gap: .3rem; max-width: 92%; }
.mensaje__quien { font-size: .8rem; color: #AAB4C8; }
.mensaje__texto { padding: .7rem .95rem; border-radius: 12px; font-size: .98rem; line-height: 1.5; }
.mensaje--alumno .mensaje__texto { background: var(--noche-2); border-top-left-radius: 3px; }
.mensaje--agente { justify-self: end; }
.mensaje--agente .mensaje__texto { background: var(--hueso); color: var(--noche); border-top-right-radius: 3px; }
.mensaje--agente .mensaje__quien { justify-self: end; }
.consulta__pie { font-size: .8rem; color: #AAB4C8; }

/* ---------- Para quién ---------- */
.perfiles { display: grid; gap: 0; border-top: 1px solid var(--borde); }
.perfiles > div { padding: 1.4rem 0; border-bottom: 1px solid var(--borde); display: grid; gap: .35rem; }
@media (min-width: 820px) {
  .perfiles > div { grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 2rem; align-items: baseline; }
}
.perfiles dt { font: 600 1.15rem/1.3 var(--f-titulo); letter-spacing: -0.01em; }
.perfiles dd { margin: 0; color: #3A4660; max-width: 56ch; }
.sin-programar { margin-top: 1.75rem; font-weight: 600; }

/* ---------- Programa: los andenes ---------- */
.andenes { list-style: none; margin: 0; padding: 0; counter-reset: sesion; }
.andenes li {
  --paso: 0; --alto: auto;
  counter-increment: sesion; position: relative; background: var(--blanco);
  border-top: 6px solid var(--verde); border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  padding: 1.15rem 1.15rem 1.3rem; margin-bottom: .75rem; margin-left: calc(var(--paso) * 1rem);
}
.andenes li::before {
  content: counter(sesion); display: block; font: 800 2.2rem/1 var(--f-titulo); color: var(--verde-prof); margin-bottom: .6rem; letter-spacing: -0.03em;
}
.andenes li:nth-child(1) { --paso: 0; --alto: 13.5rem; }
.andenes li:nth-child(2) { --paso: 1; --alto: 15.5rem; }
.andenes li:nth-child(3) { --paso: 2; --alto: 17.5rem; }
.andenes li:nth-child(4) { --paso: 3; --alto: 19.5rem; }
.andenes li:nth-child(5) { --paso: 4; --alto: 21.5rem; }
.andenes li:nth-child(6) { --paso: 5; --alto: 23.5rem; background: var(--noche); border-color: var(--noche); border-top-color: var(--verde); color: #E8ECF4; }
.andenes li:nth-child(6) h3 { color: #fff; }
.andenes li:nth-child(6)::before { color: var(--verde); }
.andenes h3 { margin-bottom: .45rem; }
.andenes p { font-size: .96rem; line-height: 1.5; color: #3A4660; }
.andenes li:nth-child(6) p { color: #C9D2E3; }
@media (max-width: 599px) { .andenes li { margin-left: calc(var(--paso) * .55rem); } }
@media (min-width: 820px) {
  .andenes { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 0; border-bottom: 1px solid var(--noche); }
  .andenes li { margin: 0; min-height: var(--alto); border-bottom: none; padding: 1rem .95rem 1.2rem; }
  .andenes li + li { border-left: none; }
  .andenes h3 { font-size: 1rem; }
  .andenes p { font-size: .9rem; }
}
.programa__cierre { margin-top: 2rem; max-width: 62ch; color: #3A4660; }

/* ---------- Cómo funciona ---------- */
.momentos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
.momentos li { position: relative; padding: 0 0 2.25rem 2.25rem; border-left: 3px solid var(--verde); margin-left: .5rem; }
.momentos li:last-child { padding-bottom: 0; border-left-color: transparent; }
.momentos li::before {
  content: ""; position: absolute; left: -.62rem; top: .35rem; width: 1.05rem; height: 1.05rem; background: var(--hueso); border: 3px solid var(--verde);
}
.seccion--blanca .momentos li::before { background: var(--blanco); }
.momentos h3 { margin-bottom: .4rem; }
.momentos p { max-width: 58ch; color: #3A4660; }
.caso { margin-top: clamp(2rem, 5vw, 3rem); padding: 1.4rem 1.5rem; border-left: 6px solid var(--noche); background: var(--hueso); max-width: 62ch; }
.caso p { font: 600 1.2rem/1.4 var(--f-titulo); letter-spacing: -0.01em; }

/* ---------- Fechas ---------- */
.grupos { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .grupos { grid-template-columns: 1fr 1fr; } }
.grupo { background: var(--blanco); border: 1px solid var(--borde); padding: 1.5rem; display: grid; gap: 1rem; align-content: start; }
.grupo dl { display: grid; gap: .8rem; margin: 0; }
.grupo dl div { display: grid; gap: .1rem; }
.grupo dt { font-size: .88rem; color: var(--piedra); }
.grupo dd { margin: 0; font-weight: 600; }
.zonas { margin-top: 1.75rem; max-width: 64ch; }
.zonas h3 { font-size: 1rem; margin-bottom: .5rem; }
.zonas ul { margin: 0; padding-left: 1.2rem; color: #3A4660; }
.zonas li + li { margin-top: .2rem; }

/* ---------- Inversión ---------- */
.inversion { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .inversion { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.precio { display: grid; gap: .75rem; justify-items: start; }
.precio__monto { font: 800 clamp(3.6rem, 9vw, 5.5rem)/1 var(--f-titulo); letter-spacing: -0.04em; color: #fff; }
.precio__monto small { font-size: .4em; font-weight: 700; letter-spacing: 0; margin-right: .15em; color: var(--verde); }
.precio__linea { color: #C9D2E3; max-width: 36ch; }
.precio__linea strong { color: #fff; }
.incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.incluye li { position: relative; padding-left: 1.6rem; color: #E8ECF4; }
.incluye li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; background: var(--verde); }
.pagos { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; gap: .6rem; color: #C9D2E3; max-width: 52ch; }
.pagos h3 { font-size: 1rem; }
.pagos strong { color: #fff; }

/* ---------- Instructor ---------- */
.instructor { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .instructor { grid-template-columns: minmax(15rem, 22rem) 1fr; } }
.instructor__foto { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--borde); position: relative; }
.instructor__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.instructor__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--verde); }
.instructor__texto { display: grid; gap: 1rem; }
.instructor__texto p { max-width: 54ch; color: #3A4660; }
.credenciales { margin: .25rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.credenciales li { padding-left: 1.4rem; position: relative; }
.credenciales li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; background: var(--verde); }

/* ---------- Preguntas ---------- */
.preguntas { border-top: 1px solid var(--borde); max-width: 52rem; }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font: 600 1.08rem/1.35 var(--f-titulo); letter-spacing: -0.01em;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font: 400 1.7rem/1 var(--f-texto); color: var(--verde-prof); transition: transform .2s;
}
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding: 0 2.5rem 1.35rem 0; max-width: 60ch; color: #3A4660; }

/* ---------- Formulario ---------- */
.reserva { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 960px) { .reserva { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.reserva__intro { display: grid; gap: 1rem; }
.reserva__intro p { max-width: 42ch; color: #3A4660; }
.formulario { background: var(--blanco); border: 1px solid var(--borde); border-top: 6px solid var(--verde); padding: clamp(1.25rem, 4vw, 2rem); display: grid; gap: 1.1rem; }
.campos { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .campos--dos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: .35rem; }
.campo label, .campo .etiqueta { font-weight: 600; font-size: .95rem; }
.campo .ayuda { font-size: .85rem; color: var(--piedra); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 1rem/1.4 var(--f-texto); color: var(--noche); background: #fff;
  border: 1.5px solid #B9B4A6; border-radius: 4px; padding: .7rem .8rem; min-height: 3rem;
}
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--noche); }
.campo [aria-invalid="true"] { border-color: #B3261E; }
.error { color: #B3261E; font-size: .88rem; min-height: 0; }
.error:empty { display: none; }
.consentimiento { display: grid; gap: .8rem; padding-top: .4rem; }
.marca { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .92rem; line-height: 1.45; }
.marca input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--noche); }
.pista-pago { font-size: .92rem; background: var(--hueso); border-left: 4px solid var(--verde); padding: .7rem .9rem; color: #3A4660; }
.trampa { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.resultado { padding: 1rem 1.1rem; border-left: 6px solid var(--verde); background: #EAF7F4; font-weight: 500; }
.resultado--error { border-left-color: #B3261E; background: #FCEDEC; }
.resultado[hidden] { display: none; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: #C9D2E3; padding-block: 3rem 5.5rem; }
.pie__fila { display: grid; gap: 2rem; }
@media (min-width: 820px) { .pie__fila { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie img { height: 2.2rem; width: auto; background: var(--hueso); padding: .35rem .6rem; border-radius: 4px; }
.pie h3 { font-size: .98rem; color: #fff; margin-bottom: .6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pie a { color: #C9D2E3; }
.pie a:hover { color: #fff; }
.pie small { display: block; margin-top: 2rem; color: #94A0B8; font-size: .85rem; max-width: 70ch; }
.greca { height: 12px; background: var(--noche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 12V6h6V0h12v6h6v6' fill='none' stroke='%232BB39A' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom; }

/* ---------- Botón fijo en celular ---------- */
.fijo {
  position: fixed; inset: auto 0 env(safe-area-inset-bottom, 0px) 0; z-index: 30; padding: .7rem var(--lateral); background: rgba(247, 245, 240, .96);
  border-top: 1px solid var(--borde); transform: translateY(110%); transition: transform .25s;
}
.fijo.visible { transform: none; }
.fijo .boton { width: 100%; }
@media (min-width: 900px) { .fijo { display: none; } }
@media (prefers-reduced-motion: reduce) { .fijo { transition: none; } html { scroll-behavior: auto; } }

/* ---------- Páginas legales ---------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; letter-spacing: -0.03em; }
.legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; max-width: none; letter-spacing: -0.015em; }
.legal p, .legal li { max-width: 68ch; color: #2C3852; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .35rem; }
.legal p + p { margin-top: .8rem; }
.aviso-borrador { background: var(--pendiente); color: #4a3b00; padding: 1rem 1.2rem; border-radius: 4px; margin: 1.25rem 0 2rem; max-width: 68ch; font-weight: 500; }

figure.consulta { margin: 0; }
.pie__fila p { margin-top: 1rem; }
.legal .boton { margin-top: 1.5rem; }

@media (max-width: 599px) {
  .heroe__acciones { width: 100%; }
  .heroe__acciones .boton { flex: 1 1 100%; }
}

/* ---------- Novedades: niveles, precio de lista, aviso de inicio, destacado ---------- */
:root { --ambar: #F2A93B; --purpura: #7B5CFA; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.niveles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .niveles { grid-template-columns: 1.15fr 1fr 1fr; align-items: start; } }
.nivel { background: var(--hueso); border-top: 6px solid var(--verde); padding: 1.25rem 1.3rem 1.4rem; display: grid; gap: .6rem; align-content: start; }
.nivel--intermedio { border-top-color: var(--ambar); }
.nivel--avanzado { border-top-color: var(--purpura); }
.nivel h3 { font-size: 1.4rem; }
.nivel__estado { font-weight: 600; font-size: .95rem; }
.nivel--basico .nivel__estado { color: var(--verde-prof); }
.nivel--intermedio .nivel__estado, .nivel--avanzado .nivel__estado { color: var(--piedra); }
.nivel p { color: #3A4660; }
.nivel__nota { font-size: .92rem; color: var(--piedra); }
.ubicacion { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.2rem 1.4rem; border-left: 6px solid var(--noche); background: var(--hueso); }
.ubicacion p { font: 600 1.1rem/1.35 var(--f-titulo); letter-spacing: -0.01em; max-width: 30ch; }

.aviso-inicio { margin-top: 1.5rem; max-width: 64ch; padding: .9rem 1.1rem; border-left: 4px solid var(--verde); background: var(--hueso); color: #3A4660; }

.precio__regular { font: 600 clamp(1.4rem, 3vw, 1.9rem)/1 var(--f-titulo); color: #C9D2E3; }
.precio__regular s { text-decoration-thickness: 2px; }
.precio__linea { max-width: 40ch; }
.letra-chica { margin-top: 1rem; font-size: .8rem; color: #94A0B8; }

.destacado { border-left: 6px solid var(--verde); background: var(--blanco); padding: .9rem 1.1rem; max-width: 54ch; }
.destacado p { color: var(--noche); font-weight: 500; }

.interes { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.interes legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .3rem; }

/* ---------- Prueba rápida de nivel ---------- */
.prueba-pagina { padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
.prueba-caja { max-width: 46rem; }
.prueba-caja h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; margin-bottom: 1rem; }
.prueba-bajada { font-size: 1.15rem; line-height: 1.5; max-width: 52ch; color: #2C3852; }
.prueba-notas { margin: 1.5rem 0 2rem; padding-left: 1.2rem; display: grid; gap: .5rem; color: #3A4660; max-width: 56ch; }

.progreso { margin-bottom: 1.5rem; }
.progreso__texto { font-size: .95rem; color: var(--piedra); margin-bottom: .45rem; }
.progreso__caja { height: 8px; background: var(--borde); }
.progreso__barra { height: 100%; width: 0; background: var(--verde); transition: width .25s; }
@media (prefers-reduced-motion: reduce) { .progreso__barra { transition: none; } }
.parte { font-weight: 600; color: var(--verde-prof); margin-bottom: .6rem; }
.pregunta { border: 0; padding: 0; margin: 0; min-width: 0; }
.pregunta legend { font: 700 clamp(1.25rem, 3.4vw, 1.6rem)/1.3 var(--f-titulo); letter-spacing: -0.02em; padding: 0; margin-bottom: .6rem; max-width: 34ch; }
.pregunta legend:focus { outline: none; }
.opciones { display: grid; gap: .65rem; margin-top: .9rem; }
.opcion { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .9rem 1rem; background: var(--blanco); border: 1.5px solid #B9B4A6; border-radius: 4px; cursor: pointer; line-height: 1.45; }
.opcion:hover { border-color: var(--noche); }
.opcion input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--noche); }
.opcion:has(input:checked) { border-color: var(--noche); background: #EAF7F4; box-shadow: inset 5px 0 0 var(--verde); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--verde); outline-offset: 2px; }
.navegacion { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.navegacion .boton[disabled] { opacity: .45; cursor: not-allowed; }

.res-total { margin-top: 1.25rem; font: 700 1.2rem/1.3 var(--f-titulo); }
.medidores { display: grid; gap: .9rem; margin: 1.25rem 0 0; }
.medidor p { margin-bottom: .3rem; }
.medidor__caja { height: 10px; background: var(--borde); }
.medidor__barra { height: 100%; background: var(--piedra); }
.medidor__barra--ok { background: var(--verde); }
.res-subtitulo { font-size: 1.35rem; margin: 2.25rem 0 .75rem; max-width: none; letter-spacing: -0.015em; }
.afinar { margin: 0; padding-left: 1.2rem; display: grid; gap: .7rem; max-width: 62ch; color: #2C3852; }
.todas-respuestas { margin-top: 1.5rem; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.todas-respuestas summary { cursor: pointer; padding: 1rem 0; font-weight: 600; }
.revision { padding: 0 0 1.1rem; display: grid; gap: .25rem; max-width: 64ch; }
.revision__q { font-weight: 600; }
.revision__r { color: var(--verde-prof); font-weight: 500; }
.revision__e { color: #3A4660; font-size: .95rem; }
.cta { margin-top: 2rem; padding: 1.3rem 1.4rem; border-left: 6px solid var(--verde); background: var(--blanco); display: grid; gap: .9rem; justify-items: start; }
.cta p { font-weight: 500; max-width: 48ch; }
#lista-espera { margin-top: 2rem; }
#lista-espera .res-subtitulo { margin-top: 0; }
.rehacer { margin-top: 2rem; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--verde-prof); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace:hover { color: var(--noche); }

#resultado-prueba, #prueba { scroll-margin-top: 5.5rem; }

/* ---------- Botón de la prueba de nivel (más notorio) ---------- */
.boton--noche { background: var(--noche); color: #fff; }
.boton--noche:hover { background: var(--noche-2); color: #fff; }
.heroe__prueba {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.25rem; margin-top: .5rem;
  padding: 1rem 1.2rem; background: var(--blanco); border: 1px solid var(--borde); border-left: 6px solid var(--verde); max-width: 36rem;
}
.heroe__prueba p { font: 600 1.05rem/1.35 var(--f-titulo); letter-spacing: -0.01em; flex: 1 1 14rem; }
@media (max-width: 599px) { .heroe__prueba .boton { width: 100%; } }

.nivel__nota a { color: var(--verde-prof); }
.nivel__sesiones { margin-top: .25rem; border-top: 1px solid var(--borde); }
.nivel__sesiones summary { cursor: pointer; padding: .75rem 0; font-weight: 600; color: var(--noche); list-style: none; position: relative; padding-right: 1.5rem; }
.nivel__sesiones summary::-webkit-details-marker { display: none; }
.nivel__sesiones summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--f-texto); color: var(--verde-prof); }
.nivel__sesiones[open] summary::after { content: "−"; }
.nivel__sesiones ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; padding-bottom: .5rem; }
.nivel__sesiones li { font-size: .94rem; line-height: 1.45; color: #3A4660; padding-left: .2rem; }
.nivel__sesiones li strong { color: var(--noche); }

/* ---------- Informe de nivel (pantalla e impresión) ---------- */
.informe { background: var(--blanco); border: 1px solid var(--borde); border-top: 6px solid var(--verde); padding: clamp(1.25rem, 4vw, 2rem); }
.informe__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.informe__cab img { height: 2.1rem; width: auto; }
.informe__cab p { font: 600 .95rem/1 var(--f-titulo); color: var(--piedra); }
.informe__quien { font-size: .95rem; color: var(--piedra); margin-bottom: .5rem; }
.informe h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: .8rem; }
.informe .res-subtitulo { margin-top: 1.5rem; font-size: 1.15rem; }
.informe__pie { margin-top: 1.5rem; padding-top: .9rem; border-top: 1px solid var(--borde); font-size: .85rem; color: var(--piedra); }
.acciones-informe { margin-top: 1rem; }

@media print {
  @page { size: A4; margin: 16mm; }
  body { background: #fff; }
  .cabecera, .pie, .greca, .fijo, #intro, #prueba, .acciones-informe, .cta, .todas-respuestas, .rehacer { display: none !important; }
  .prueba-pagina { padding: 0; }
  .prueba-caja { max-width: none; width: 100%; }
  #resultado-prueba { display: block !important; }
  .informe { border: 0; border-top: 6px solid var(--verde); padding: 0; padding-top: 1rem; }
  .medidor__barra, .informe { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Escalera compacta: columnas desde 820 px (letra algo menor hasta 1099 px) y tarjetas bajas por debajo */
@media (min-width: 820px) and (max-width: 1099px) {
  .andenes li { padding: .9rem .7rem 1.1rem; }
  .andenes li::before { font-size: 1.8rem; margin-bottom: .45rem; }
  .andenes h3 { font-size: .93rem; }
  .andenes p { font-size: .84rem; }
}
@media (max-width: 819px) {
  .andenes li {
    display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center;
    padding: .75rem 1rem .85rem; margin-bottom: .5rem;
  }
  .andenes li::before { grid-row: 1 / span 2; margin: 0; font-size: 1.9rem; align-self: center; }
  .andenes h3 { margin: 0 0 .15rem; font-size: 1rem; }
  .andenes p { font-size: .9rem; }
}

.pago-tarjeta { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 6px solid var(--noche); background: var(--hueso); display: grid; gap: .8rem; justify-items: start; }
.pago-tarjeta p { font-weight: 500; }

/* Teléfono con código de país */
.tel { display: grid; grid-template-columns: minmax(6.8rem, 8rem) 1fr; gap: .5rem; }
.tel select, .tel input { min-width: 0; }