/* ===========================================================================
   Alicia Cartagena · estilos. Un solo archivo: cambiar un color es cambiar
   una línea. Estructura del sistema de Juan (patrones/sistema-hm.md), piel
   clara con la paleta de su prediseño de julio (branding.json).

   Contrastes calculados con la fórmula WCAG (el motor los vuelve a medir en
   cada comprobación):
     --rojo     #9B2226  7,9 sobre blanco · 7,5 sobre --fondo · 6,9 sobre --fondo-alt
     --tinta    #231F1E  16 sobre --fondo
     --tinta-2  #5E5550  6,3 sobre --fondo-alt (el #6B625D suyo se oscureció: nuestro)
     --oro      #B5852A  ~3,2 sobre crema: SOLO decoración, nunca texto
     blanco sobre --rojo 7,9 · blanco sobre --rojo-hondo #7A171B 10,6
   =========================================================================== */
:root {
  --rojo: #9B2226;
  --rojo-hondo: #7A171B;
  --rojo-velo: #F6E7E4;
  --oro: #B5852A;
  --fondo: #FAF8F5;
  --fondo-alt: #F3EEE6;
  --blanco: #FFFFFF;
  --tinta: #231F1E;
  --tinta-2: #5E5550;
  --linea: #E2DAD0;

  --t-s: 1rem; --t: 1.125rem; --t-l: 1.3rem; --t-xl: 1.6rem;
  --h1: clamp(2rem, 5.2vw, 3.3rem);
  --h2: clamp(1.6rem, 3.6vw, 2.3rem);
  --h3: 1.3rem;
  --e1: .4rem; --e2: .8rem; --e3: 1.2rem; --e4: 2rem; --e5: 3.2rem; --e6: 5rem;

  --barra: 64px;
  --radio: 16px;
  --sombra: 0 1px 2px rgb(35 31 30 / .06), 0 12px 30px -16px rgb(35 31 30 / .28);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* Sin scroll suave: al entrar por un ancla desde otra página se llega al momento. */
html { scroll-padding-top: calc(var(--barra) + 1.4rem); }
body { margin: 0; font: var(--t)/1.65 var(--sans); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }
blockquote { margin: 0 0 var(--e3); }
.tabla { overflow-x: auto; margin: 0 0 var(--e3); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
.tabla table { margin: 0; box-shadow: none; }
.tabla tbody td:first-child { font-weight: 700; color: var(--tinta); }
table { width: 100%; border-collapse: collapse; margin: 0 0 var(--e3); background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
caption { caption-side: bottom; text-align: left; padding-top: var(--e2); }
th, td { padding: .65rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
th { font-size: var(--t-s); color: var(--tinta-2); background: var(--fondo-alt); }
tbody tr:last-child td { border-bottom: 0; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
a { color: var(--rojo); text-underline-offset: .15em; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--rojo-hondo); outline-offset: 2px; }
:where(p, li, td) a:where([href^="https://wa.me"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; text-wrap: balance; color: var(--tinta); letter-spacing: -.005em; }
h1 { font-size: var(--h1); margin: 0 0 var(--e3); font-weight: 700; }
h2 { font-size: var(--h2); margin: 0 0 var(--e3); font-weight: 700; }
h3 { font-size: var(--h3); margin: var(--e4) 0 var(--e1); }
p { margin: 0 0 var(--e3); }

.contenedor { width: min(100% - 2.2rem, 70rem); margin-inline: auto; }
.estrecho { max-width: 44rem; }
/* El texto estrecho arranca en el mismo borde que el resto (sin zigzag de ejes). */
.contenedor.estrecho { margin-inline: max(1.1rem, calc((100% - 70rem) / 2)) auto; }
/* Un titular después de un bloque de texto necesita aire encima. */
:where(p, ul, ol, table, .precios, .datos-lista) + h2 { margin-top: var(--e5); }
.seccion { padding: var(--e5) 0; }
.seccion--alt { background: var(--fondo-alt); }
.seccion--rojo { background: var(--rojo); color: #fff; border-bottom: 5px solid var(--oro); }
.seccion--rojo h2, .seccion--rojo a:not(.boton) { color: #fff; }
.antetitulo { margin: 0 0 var(--e2); color: var(--rojo); font-weight: 700; font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; }
.entradilla { font-size: var(--t-l); color: var(--tinta-2); max-width: 38rem; }
.hero__ruta { margin: var(--e1) 0 0; font-weight: 600; }
.hero__ruta a { color: var(--rojo); display: inline-flex; align-items: center; min-height: 44px; }
td a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.micro { margin: var(--e2) 0 0; color: var(--tinta-2); font-size: var(--t-s); }
.nota { color: var(--tinta-2); font-size: var(--t-s); }

/* --- barra fija --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--blanco); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-top: 4px solid var(--rojo); border-bottom: 1px solid var(--linea); }
.barra__in { display: flex; align-items: center; gap: var(--e3); min-height: var(--barra); }
.barra__marca { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-right: auto; color: var(--tinta); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.barra__marca small { display: block; font: 400 .85rem/1.2 var(--sans); color: var(--tinta-2); }
.barra__a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--rojo); color: #fff; font-family: var(--serif); font-size: 1.45rem; }
.barra .solo-escritorio { display: none; }
.nav-escritorio { display: none; gap: .1rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; white-space: nowrap; color: var(--tinta); text-decoration: none; border-radius: 8px; }
.nav-escritorio a:hover { background: var(--fondo-alt); }
.nav-escritorio a[aria-current="page"] { color: var(--rojo); text-decoration: underline 2px; text-underline-offset: .4em; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil nav { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 4px); max-height: calc(100vh - var(--barra) - 66px); max-height: calc(100dvh - var(--barra) - 66px); /* cabecera y barra fija de abajo */ overflow-y: auto; overscroll-behavior: contain; display: grid; background: var(--blanco); border-bottom: 1px solid var(--linea); padding: var(--e1) 1.1rem var(--e3); box-shadow: var(--sombra); }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); }
.nav-movil nav a[aria-current="page"] { color: var(--rojo); font-weight: 700; }

/* --- botones: píldora --- */
.boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: .6rem 1.4rem; border-radius: 999px; background: var(--rojo); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--rojo); box-shadow: 0 8px 18px -10px rgb(155 34 38 / .7); }
.boton:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); }
.boton--sec { background: var(--blanco); color: var(--rojo); box-shadow: none; }
.boton--sec:hover { background: var(--rojo-velo); color: var(--rojo-hondo); }
.seccion--rojo .boton { background: #fff; color: var(--rojo); border-color: #fff; }
.seccion--rojo .boton:hover { background: var(--rojo-velo); color: var(--rojo-hondo); }
.boton, .micro { text-wrap: balance; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }

/* --- portada --- */
.hero { padding: var(--e5) 0 var(--e6); background: linear-gradient(180deg, var(--rojo-velo), var(--fondo) 85%); }
.hero__rej { display: grid; gap: var(--e4); align-items: center; }
.hero__foto { position: relative; max-width: 22rem; margin-inline: auto; }
.hero__foto img { display: block; width: 100%; border-radius: 28px 28px 120px 28px; box-shadow: var(--sombra); aspect-ratio: 4 / 5; object-fit: cover; }
.hero__foto figcaption { position: absolute; left: -.6rem; bottom: 1.2rem; background: var(--blanco); border-radius: 12px; padding: .55rem .9rem; box-shadow: var(--sombra); font-size: var(--t-s); line-height: 1.3; }
.hero__foto figcaption b { display: block; font-family: var(--serif); color: var(--rojo); font-size: 1.1rem; }
.hero-int { padding: var(--e5) 0 var(--e4); background: linear-gradient(180deg, var(--rojo-velo), var(--fondo)); }
.migas { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e2); }
.migas a { color: var(--tinta-2); }

/* --- cifras --- */
.cifras { display: grid; gap: var(--e2); grid-template-columns: repeat(2, 1fr); list-style: none; margin: calc(-1 * var(--e5)) 0 0; padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); position: relative; }
.cifras li { display: grid; gap: .1rem; padding: var(--e2); }
.cifras b { font-family: var(--serif); font-size: var(--t-xl); color: var(--rojo); line-height: 1.1; }
.cifras li > span { font-size: var(--t-s); color: var(--tinta-2); line-height: 1.35; }
.cifras__fuente { margin: var(--e2) 0 0; font-size: var(--t-s); color: var(--tinta-2); }

/* --- tarjetas y triaje --- */
.rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tarjeta { position: relative; display: flex; flex-direction: column; padding: var(--e4) var(--e3) var(--e3); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); color: var(--tinta); }
.tarjeta::before { content: ""; position: absolute; left: var(--e3); top: 0; width: 3rem; height: 4px; background: var(--oro); border-radius: 0 0 4px 4px; }
.tarjeta h3 { margin: 0 0 var(--e1); }
.tarjeta h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rojo); text-decoration: none; }
.tarjeta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radio); }
.tarjeta h3 a:focus-visible { outline: none; }
.tarjeta:has(a:focus-visible) { outline: 3px solid var(--rojo-hondo); outline-offset: 2px; }
.tarjeta p { margin: 0; color: var(--tinta-2); }
.tarjeta .mas { display: inline-block; margin-top: auto; padding-top: var(--e2); color: var(--rojo); font-weight: 700; }
.tarjeta--destacada { border: 2px solid var(--oro); }

/* --- pasos --- */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .8rem; align-items: start; padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.pasos li::before { content: counter(paso); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rojo); color: #fff; font: 700 1.2rem/1 var(--serif); }
.pasos h3 { margin: .35rem 0 var(--e1); }
.pasos p { grid-column: 2; margin: 0; color: var(--tinta-2); }

/* --- quién es --- */
.quien { display: grid; gap: var(--e4); align-items: center; }
.quien img { display: block; width: 100%; max-width: 20rem; border-radius: var(--radio); box-shadow: var(--sombra); }
.datos-lista { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e2); }
.datos-lista li { padding-left: 1.6rem; position: relative; }
.datos-lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--rojo); }

/* --- opiniones --- */
.opis { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.opi { display: flex; flex-direction: column; margin: 0; padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.opi blockquote { margin: 0 0 var(--e2); font-family: var(--serif); font-size: 1.15rem; }
.opi blockquote p { margin: 0; }
.opi .trad { font-size: var(--t-s); color: var(--tinta-2); margin: 0 0 var(--e2); }
.opi figcaption { margin-top: auto; font-size: var(--t-s); color: var(--tinta-2); }
.opi figcaption b { color: var(--tinta); }

/* --- precios --- */
.precios { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.precio { padding: var(--e4) var(--e3) var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); display: grid; gap: var(--e1); align-content: start; }
.precio h3 { margin: 0; }
.precio .cifra { font: 700 var(--t-xl)/1.1 var(--serif); color: var(--rojo); }
.precio p { margin: 0; color: var(--tinta-2); }
.precio--destacado { border: 2px solid var(--oro); }
.cinta { justify-self: start; font-size: .9rem; font-weight: 700; color: var(--tinta); background: #F5E9CF; border-radius: 999px; padding: .15rem .7rem; }

/* --- preguntas --- */
.respuesta { font-size: var(--t-l); }
.faq details { border-bottom: 1px solid var(--linea); padding: var(--e1) 0; }
.faq summary { min-height: 48px; display: flex; align-items: center; gap: var(--e2); cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font: 700 1.4rem/1 var(--serif); color: var(--rojo); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--tinta-2); }

/* --- banda de botón a mitad de página --- */
.banda { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); border-left: 6px solid var(--rojo); }
.banda__titulo { font: 700 var(--t-xl)/1.2 var(--serif); margin: 0; }
.banda .acciones { margin-top: 0; }

/* --- vídeo --- */
.video { max-width: 26rem; }
.video video { display: block; width: 100%; border-radius: var(--radio); background: var(--tinta); box-shadow: var(--sombra); }

/* --- avisos de marca y fuentes --- */
.fuentes { font-size: var(--t-s); color: var(--tinta-2); border-top: 1px solid var(--linea); padding-top: var(--e3); margin-top: var(--e4); }
.fuentes ul { padding-left: 1.2rem; }

/* --- pestillo (solo en la maqueta) --- */
.pestillo { outline: 2px dashed var(--oro); outline-offset: 8px; border-radius: 6px; margin: var(--e3) 0; }
.pestillo__nota { display: inline-block; margin: 0 0 var(--e2); padding: .2rem .7rem; border-radius: 999px; background: #F5E9CF; color: var(--tinta); font-size: .9rem; font-weight: 700; }

/* --- test de nivel --- */
.test { min-height: 30rem; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4) var(--e3); }
.test__progreso { display: flex; justify-content: space-between; gap: var(--e2); font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e2); }
.test__barra { height: 8px; background: var(--fondo-alt); border-radius: 999px; overflow: hidden; margin-bottom: var(--e4); }
.test__barra span { display: block; height: 100%; width: 0; background: var(--rojo); transition: width .25s; }
.test__pregunta { font: 700 var(--t-xl)/1.3 var(--serif); margin: 0 0 var(--e3); }
.test__pregunta:focus { outline: none; }
.test__opciones { display: grid; gap: var(--e2); }
.test__opcion { display: flex; align-items: center; min-height: 54px; width: 100%; padding: .6rem 1.1rem; border: 2px solid var(--linea); border-radius: 14px; background: var(--fondo); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.test__opcion:hover { border-color: var(--rojo); background: var(--rojo-velo); }
.test__opcion small { display: block; color: var(--tinta-2); font-size: var(--t-s); }
.test__resultado h2 { color: var(--rojo); }
.test__nivel { font: 700 clamp(2.4rem, 8vw, 3.6rem)/1 var(--serif); color: var(--rojo); margin: 0 0 var(--e2); }
.test__objetivo { border-left: 4px solid var(--rojo); padding: var(--e2) var(--e3); background: var(--blanco, #fff); font-weight: 600; margin: var(--e3) 0; }
.test__compartir { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--e2); color: var(--rojo); font-weight: 600; }
.test__volver { margin-top: var(--e3); background: none; border: 0; color: var(--rojo); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* --- legal --- */
.legal h2 { font-size: var(--t-xl); margin-top: var(--e4); }

/* --- pie --- */
.pie { padding: var(--e5) 0 calc(var(--e4) + 64px); background: var(--rojo-hondo); color: #F6E7E4; font-size: var(--t-s); }
.pie p { margin: 0 0 var(--e1); }
.pie a { color: #fff; }
.pie__rej { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie__marca { margin-top: var(--e4) !important; padding-top: var(--e3); border-top: 1px solid rgb(255 255 255 / .25); }
.pie__demo { color: #F6E7E4; }

/* --- barra fija del móvil --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--rojo); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); padding-bottom: env(safe-area-inset-bottom, 0); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 .6rem; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; font-size: 1rem; }
.barra-movil a:first-child { flex: 1.5; }
.barra-movil a + a { border-left: 1px solid rgb(255 255 255 / .35); }
.cookies-abierto .barra-movil { display: none; }


/* --- firma de Alicia (páginas interiores) y su cara en el móvil --- */
.test__resultado .firma { margin: 0 0 var(--e2); }
.firma { display: flex; align-items: center; gap: .7rem; margin: var(--e3) 0 0; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.35; }
.firma img, .hero__cara img { display: block; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 3px var(--blanco), var(--sombra); }
.firma b { color: var(--tinta); }
.hero__quien { display: flex; align-items: center; gap: .8rem; margin: 0 0 var(--e2); }
.hero__quien .antetitulo { margin: 0; }
.hero__cara, .firma picture { flex: none; }
.hero__cara img { width: 60px; height: 60px; }
.hero-int + .seccion { padding-top: var(--e4); }
/* En el test, la pregunta y sus respuestas, cuanto antes. */
.hero-int--corto { padding: var(--e4) 0 var(--e2); }
.hero-int--corto .entradilla { margin-bottom: 0; }
@media (max-width: 599px) {
  /* Las tres respuestas de la primera pregunta tienen que asomar sobre la barra. */
  .hero-int--corto { padding-top: var(--e3); }
  .hero-int--corto h1 { font-size: 1.65rem; margin-bottom: var(--e2); }
  .hero-int--corto .entradilla { font-size: var(--t); }
  .hero-int--corto .migas { margin-bottom: var(--e1); }
}
@media (max-width: 599px) and (max-height: 700px) {
  /* Móvil pequeño: lo de «10 preguntas» ya lo dice la tarjeta del test. */
  .hero-int--corto .migas, .hero-int--corto .entradilla { display: none; }
  .hero-int--corto + .seccion .test { padding: var(--e3) var(--e3); }
  .test__opcion { min-height: 48px; padding-block: .45rem; }
  .test__progreso { margin-bottom: var(--e1); }
  .test__barra { margin-bottom: var(--e3); }
  .test__pregunta { font-size: 1.3rem; margin-bottom: var(--e2); }
}
.hero-int--corto + .seccion { padding-top: var(--e2); }
.hero-int--corto + .seccion .test { padding-top: var(--e3); }
.hero-int blockquote { margin: var(--e3) 0 var(--e1); padding-left: var(--e3); border-left: 4px solid var(--oro); font: italic 400 1.35rem/1.4 var(--serif); color: var(--tinta); }
.hero-int blockquote p { margin: 0; }

/* --- cita grande en lugar de repetir la foto --- */
.cita-grande { align-self: stretch; display: grid; align-content: center; padding: var(--e4); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra), inset 0 4px 0 var(--oro); }
.cita-grande blockquote { margin: 0 0 var(--e2); font: italic 400 clamp(1.4rem, 3vw, 1.8rem)/1.35 var(--serif); color: var(--tinta); }
.cita-grande blockquote p { margin: 0; }
.cita-grande figcaption { font-size: var(--t-s); color: var(--tinta-2); }

.quien__foto-movil img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; border-radius: var(--radio); box-shadow: var(--sombra); }

/* --- el test, en banda encima de las tarjetas --- */
.banda--test { margin-bottom: var(--e3); border-left-color: var(--oro); }
.banda--test p { margin: 0; }
.banda--test .banda__titulo { margin-bottom: var(--e1); }

/* --- el simulacro: una sola tarjeta, sin estirarse --- */
#simulacro .precios { grid-template-columns: minmax(0, 22rem); margin-bottom: var(--e3); }

/* --- legales: el WhatsApp en una línea de texto no rompe el renglón --- */
.legal li a[href^="https://wa.me"], .entradilla a[href^="https://wa.me"] { display: inline; padding-block: .7rem; }

@media (max-width: 400px) {
  th, td { padding: .5rem .55rem; font-size: .95rem; }
  td { overflow-wrap: anywhere; }
  .tabla { box-shadow: var(--sombra), inset -14px 0 10px -12px rgb(35 31 30 / .18); }
}
@media (max-width: 599px) {
  /* Portada en el móvil: sin repetir lo que ya se lee y con su cara arriba. */
  .hero__foto { display: none; }
  .hero { padding-top: var(--e3); }
  .hero__quien .antetitulo { font-size: .85rem; letter-spacing: .03em; }
  .hero .entradilla { font-size: 1.15rem; }
  .rejilla--4 .tarjeta::before { display: none; }
  .rejilla--4 .tarjeta { border-left: 4px solid var(--oro); }
  .rejilla--4 .tarjeta h3 { margin: 0; }
  .rejilla--4 .tarjeta { padding: var(--e2) var(--e3); }
  .rejilla--4 .tarjeta p, .rejilla--4 .tarjeta .mas { display: none; }
  .rejilla--4 .tarjeta h3 a { align-items: flex-start; }
  .rejilla--4 .tarjeta h3 a::before { content: "→"; flex: none; margin-right: .6rem; }
  .rejilla--4 { gap: var(--e2); }
  .seccion--valoracion .pasos p { display: none; }
  .seccion--valoracion .pasos li { padding: var(--e3); }
  .acciones .boton { width: 100%; }
  .hero-int .entradilla { font-size: 1.15rem; }
  .hero-int .micro { margin-top: var(--e1); }
  .hero-int .firma { margin-top: var(--e2); }
  /* La cinta va encima del borde (DIS-13, fuera de la rejilla): el precio, en su línea. */
  .hero-int .precio { padding: var(--e4) var(--e3) var(--e3); }
  .saltos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .cita-grande { padding: var(--e3); }
}
@media (min-width: 600px) {
  .hero__cara, .quien__foto-movil { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero__rej { grid-template-columns: 1fr 14rem; }
}
@media (min-width: 700px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .banda--test { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1100px) {
  /* Los dos botones de la portada, en fila: valoración y test se leen juntos. */
  .hero .hero__rej { grid-template-columns: 1.75fr 1fr; }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px) {
  /* «Sobre mí» en el móvil: primero quién es y el botón; la foto, debajo. */
  .hero-int .quien picture { order: 2; }
  .hero-int .quien img { width: 100%; max-width: 30rem; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 48%; }
}
@media (min-width: 600px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
  /* Preguntas frecuentes: el titular a la izquierda y las preguntas a la derecha. */
  .contenedor.estrecho.faq { max-width: none; margin-inline: auto; display: grid; grid-template-columns: 15rem 1fr; column-gap: var(--e5); align-items: start; }
  .faq > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--barra) + 2rem); }
  .faq > details { grid-column: 2; }
  .hero__rej { grid-template-columns: 1.5fr 1fr; }
  .hero__foto { justify-self: end; margin-inline: 0; max-width: 23rem; }
  /* El cierre rojo a todo el ancho: texto a la izquierda, botón a la derecha. */
  .seccion--rojo .contenedor.estrecho { max-width: none; margin-inline: auto; display: grid; grid-template-columns: 1fr auto; column-gap: var(--e5); align-items: center; }
  .seccion--rojo .contenedor > :not(.acciones) { grid-column: 1; }
  .seccion--rojo .acciones { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .seccion--rojo p { margin: 0; }
  .quien { grid-template-columns: 20rem 1fr; }
  .seccion { padding: var(--e6) 0; }
}
@media (min-width: 1280px) { /* un solo punto de ruptura para la cabecera de escritorio: con 7 enlaces no cabe antes (y en Mac la letra es más ancha) */
  .nav-escritorio { display: flex; }
  .nav-movil, .barra-movil { display: none; }
  .barra .solo-escritorio { display: inline-flex; flex: none; white-space: nowrap; min-height: 44px; padding: .3rem 1rem; }
  .pie { padding-bottom: var(--e5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto { display: none !important; }
}

/* Optimización 1-oct-2026: ruta de la nacionalidad, saltos y precio en cabecera */
.saltos { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e3); font-size: var(--t-s); }
.saltos a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--rojo); text-decoration: none; font-weight: 600; }
.saltos a:hover { border-color: var(--rojo); }
.ruta { margin: var(--e4) 0 0; padding: var(--e3) var(--e4) var(--e4); background: var(--blanco); border-left: 6px solid var(--rojo); border-radius: var(--radio); box-shadow: var(--sombra); }
.ruta__titulo { margin: 0 0 var(--e3); font: 700 var(--h3)/1.25 var(--serif); }
.ruta ol { counter-reset: ruta; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.ruta li { counter-increment: ruta; position: relative; padding-left: 2.7rem; min-height: 1.9rem; }
.ruta li a { padding-block: .55rem; }
.ruta li::before { content: counter(ruta); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rojo); color: #fff; font: 700 1rem/1 var(--serif); }
.hero-int .precios { grid-template-columns: minmax(0, 22rem); margin: var(--e3) 0; }
.precio .precio__nombre { font: 700 1.2rem/1.2 var(--serif); color: var(--tinta); }
@media (min-width: 600px) and (max-width: 1099px) {
  .hero .acciones { flex-direction: column; align-items: stretch; max-width: 26rem; }
}
@media (max-width: 359px) {
  th, td { padding: .45rem .4rem; font-size: .88rem; }
}
/* Migas: un <nav> con área táctil de 44 px */
.migas a { display: inline-block; padding: .75rem .35rem; margin: -.75rem -.35rem; }
.prueba { margin: var(--e3) 0; padding-left: var(--e3); border-left: 3px solid var(--oro); color: var(--tinta-2); }

/* Calculadora de convocatorias */
.calculadora { margin: var(--e4) 0; padding: var(--e3) var(--e4); background: var(--blanco); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra); border-left: 6px solid var(--rojo); }
.calculadora__titulo { margin: 0 0 var(--e2); font: 700 var(--h3)/1.25 var(--serif); }
.calculadora__campos { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.calculadora label { display: grid; gap: .3rem; font-weight: 600; font-size: var(--t-s); }
.calculadora select { min-height: 44px; padding: 0 .7rem; border: 2px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--tinta); font: inherit; }
.calculadora__salida { margin: var(--e3) 0 var(--e2); display: grid; gap: var(--e1); color: var(--tinta); min-height: 6em; }
.calculadora__salida b { color: var(--rojo); }

/* Hoja «Tu ruta» (se imprime en un A4) */
.hoja h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-top: var(--e2); }
.hoja h2 { font-size: 1.4rem; margin: var(--e4) 0 var(--e1); }
.hoja__sub { color: var(--tinta-2); }
.hoja__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.hoja__dos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.hoja__dos > div { padding: var(--e2) var(--e3); background: var(--blanco); border-radius: 0 var(--radio) var(--radio) 0; border-left: 4px solid var(--rojo); }
.hoja__dos p { margin: 0; }
.hoja__t { font: 700 1.1rem/1.3 var(--serif); color: var(--tinta); margin: 0 0 .2rem; }
.hoja__alicia { display: flex; gap: var(--e3); align-items: center; margin: var(--e4) 0 var(--e2); padding: var(--e3); border: 2px solid var(--rojo); border-radius: var(--radio); background: var(--blanco); }
.hoja__alicia img { flex: none; width: 112px; height: 112px; }
.hoja__alicia p { margin: 0 0 .3rem; }
@media print {
  .no-imprimir, .pie, .salto, .hoja .migas, .pie__demo { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hoja { padding: 0; }
  .hoja .contenedor { max-width: none; padding: 0; }
  .hoja h1 { font-size: 20pt; margin: 0 0 4pt; }
  .hoja h2 { font-size: 13pt; margin: 9pt 0 3pt; }
  .hoja p { margin: 0 0 4pt; }
  .hoja__dos > div, .hoja__alicia { box-shadow: none; }
  @page { size: A4; margin: 14mm; }
}
.ruta__hoja { font: 400 var(--t-s)/1.4 var(--sans); }

/* Test de práctica de la CCSE */
.aviso-test { padding: var(--e2) var(--e3); font-size: var(--t-s); line-height: 1.5; background: var(--fondo-alt); border-left: 4px solid var(--oro); border-radius: 0 var(--radio) var(--radio) 0; }
.tccse { display: grid; gap: var(--e3); margin-top: var(--e3); }
.tccse__p { min-width: 0; margin: 0; padding: var(--e3); border: 0; border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); display: grid; gap: var(--e1); }
.tccse__p legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--e2); font: 700 1.1rem/1.35 var(--serif); }
.tccse__p legend + .tccse__op { clear: both; }
.tccse__op { display: flex; align-items: center; gap: .7rem; min-height: 50px; padding: .5rem 1rem; border: 2px solid var(--linea); border-radius: 14px; background: var(--fondo); cursor: pointer; }
.tccse__op input { width: 1.25rem; height: 1.25rem; accent-color: var(--rojo); flex: none; }
.tccse__op--ok { border-color: #2E6B3A; background: #E8F2EA; font-weight: 700; }
.tccse__op--ok::after { content: "✓ correcta"; margin-left: auto; font-size: var(--t-s); color: #1F4D29; }
.tccse__op--ko { border-color: var(--rojo-hondo); background: var(--rojo-velo); }
.tccse__op--ko::after { content: "✗ tu respuesta"; margin-left: auto; font-size: var(--t-s); color: var(--rojo-hondo); }
.tccse__x { margin: var(--e2) 0 0; padding-top: var(--e2); border-top: 1px solid var(--linea); color: var(--tinta); }
.tccse__aviso { margin: 0; font-weight: 700; color: var(--rojo); }
.tccse__resultado { padding: var(--e3) var(--e4); background: var(--fondo-alt); border-radius: var(--radio); }
.tccse__nota { font: 700 clamp(1.8rem, 6vw, 2.4rem)/1.1 var(--serif); color: var(--rojo); margin: 0 0 var(--e2); }
/* DIS-13: precio pendiente con aspecto de pendiente; la cinta fuera del flujo */
.precio { position: relative; }
.precio .cinta { position: absolute; top: -.85rem; left: var(--e3); }
.precio .cifra--pendiente { font: 700 1rem/1.3 var(--sans); color: var(--tinta); background: #F5E9CF; border-radius: 999px; padding: .2rem .7rem; justify-self: start; }
/* DIS-14: la hoja con la cabecera de color de las páginas interiores, en pantalla */
@media screen { .hoja { background: linear-gradient(180deg, var(--rojo-velo), var(--fondo) 14rem); } }
@media (max-width: 599px) { .hoja__acciones .boton { width: 100%; } }
/* Acentos laterales: rojo = datos y pasos (4-6 px); oro = avisos (4 px). */
.hoja__lista { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.tccse__p--falta { outline: 3px solid var(--rojo-hondo); outline-offset: 2px; }
.reenviar { margin: var(--e4) 0 var(--e3); padding: var(--e3) var(--e4); background: var(--blanco); border-left: 4px solid var(--rojo); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra); }
.reenviar__titulo { margin: 0 0 var(--e2); font: 700 1.1rem/1.3 var(--serif); }
.reenviar__texto { padding: var(--e2) var(--e3); background: var(--fondo-alt); border-radius: 10px; font-size: var(--t-s); overflow-wrap: anywhere; }
.calculadora .boton { margin-top: var(--e2); }
.precio { border: 2px solid transparent; }
.precio--destacado { border-color: var(--oro); }
.precios + .nota { margin-top: var(--e3); }
.tccse__falta { margin: 0; font-weight: 700; color: var(--rojo-hondo); }
.tccse__op:has(input:disabled) { cursor: default; }
/* Práctica de la oral del A2 */
.practica { display: grid; gap: var(--e3); }
.practica__tarea { padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.practica__tarea p { margin: 0 0 var(--e1); }
.practica__num { font: 700 1.1rem/1.3 var(--serif); color: var(--rojo); }
.practica__tema { margin-top: var(--e2); padding: var(--e2) var(--e3); background: var(--fondo); border-left: 4px solid var(--rojo); border-radius: 0 10px 10px 0; }
.practica__t { font-weight: 700; }
.practica__tema ul { margin: 0; padding-left: 1.2rem; }
.practica__crono { padding: var(--e3) var(--e4); background: var(--blanco); border-left: 6px solid var(--rojo); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra); }
.practica__fase { margin: 0; font-weight: 700; }
.practica__tiempo { margin: var(--e1) 0 var(--e2); font: 700 clamp(2.6rem, 10vw, 3.6rem)/1 var(--serif); color: var(--rojo); font-variant-numeric: tabular-nums; }
.practica__wa { margin-top: var(--e2); }

/* --- el toque: la web responde al que la usa (patrones/movimiento.md, kit 1.10.0) ---
   Adaptado de fabrica/sitio-base: rojo de Alicia, sus tarjetas (el enlace va en
   el título) y su .faq. Sin JavaScript, con «reducir movimiento» o en un robot,
   todo se ve entero y quieto: lo único que esconde algo es .toque. */
.toque [data-aparece]:not([data-aparece="escalonado"]):not(.visto),
.toque [data-aparece="escalonado"]:not(.visto) > * { opacity: 0; transform: translateY(18px); }
[data-aparece]:not([data-aparece="escalonado"]), [data-aparece="escalonado"] > * {
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.sin-animar, .sin-animar > * { transition: none !important; }
[data-cuenta] { display: inline-block; font-variant-numeric: tabular-nums; }

/* La cabecera se despega del contenido al bajar */
.barra { transition: box-shadow .25s; }
.barra.bajada { box-shadow: 0 6px 20px rgb(35 31 30 / .08); }

/* Botones: responden al ratón y al dedo */
.boton { transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; }
.boton:active { transform: translateY(1px); box-shadow: none; }

/* Tarjetas que se pulsan: se levantan, el filete dorado se alarga y la
   flecha de «Ver…» avanza. Con el teclado, lo mismo que con el ratón. */
.tarjeta:has(h3 a) { transition: transform .25s, box-shadow .25s; }
.tarjeta:has(h3 a)::before { transition: width .35s cubic-bezier(.22,1,.36,1); }
.tarjeta .mas { transition: transform .25s; }
.tarjeta:has(a:focus-visible)::before { width: calc(100% - 2 * var(--e3)); }
@media (hover: hover) {
  .tarjeta:has(h3 a):hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(35 31 30 / .06), 0 18px 36px -16px rgb(35 31 30 / .35); }
  .tarjeta:has(h3 a):hover::before { width: calc(100% - 2 * var(--e3)); }
  .tarjeta:has(h3 a):hover .mas { transform: translateX(5px); }
}

/* Preguntas: el «+» gira al abrir (y se abre suave donde el navegador sabe) */
.faq summary::after { transition: transform .25s; }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s, content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Volver arriba con el anillo de lo leído (lo crea toque.js en páginas largas).
   Solo en escritorio: en el móvil abajo está la barra de WhatsApp y manda ella. */
.arriba { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 55; display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--blanco); box-shadow: 0 4px 14px rgb(35 31 30 / .16); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s; }
.arriba--ver { opacity: 1; transform: none; pointer-events: auto; }
.arriba svg { width: 100%; height: 100%; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.arriba__pista { stroke: var(--linea); }
.arriba__anillo { stroke: var(--rojo); transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .1s linear; }
.arriba path { stroke: var(--rojo); }
@media (min-width: 900px) { .arriba { display: block; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .arriba { display: none !important; }
  * { opacity: 1 !important; transform: none !important; }
}

/* Centros de examen por comunidad (centros-examen-nacionalidad.html) */
.centros details.comunidad { margin: 0 0 var(--e2); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.centros details.comunidad > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem var(--e2); min-height: 52px; padding: var(--e2) var(--e3); cursor: pointer; list-style: none; font: 700 1.15rem/1.3 var(--serif); }
.centros details.comunidad > summary::-webkit-details-marker { display: none; }
.centros details.comunidad > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; color: var(--rojo); font-size: 1.4rem; transition: transform .25s; }
.centros details.comunidad[open] > summary::after { transform: rotate(45deg); }
.centros details.comunidad > summary span { grid-column: 1; font: 400 var(--t-s)/1.4 var(--sans); color: var(--tinta-2); }
.centros details.comunidad[open] { padding-bottom: var(--e3); }
.centros details.comunidad h3, .centros details.comunidad .tabla, .centros details.comunidad .nota { margin-left: var(--e3); margin-right: var(--e3); }
.centros details.comunidad h3 { font-size: 1.05rem; margin-top: var(--e3); }

/* Ejemplos de texto (expresión escrita) */
.ejemplo { margin: var(--e3) 0; padding: var(--e3); background: var(--blanco); border-left: 4px solid var(--oro); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra); }
.ejemplo--respuesta { border-left-color: var(--rojo); }
.ejemplo__titulo { margin: 0 0 var(--e1); font-size: var(--t-s); font-weight: 700; color: var(--tinta-2); }
.ejemplo p:last-child { margin-bottom: 0; }

/* Guías del tema «examen de nacionalidad» (centro del tema) */
.guias { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--e3); }
.guias__grupo { padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); border-top: 4px solid var(--oro); }
.guias__grupo h3 { margin: 0 0 var(--e2); font-size: 1.15rem; }
.guias__grupo ul { margin: 0; padding: 0; list-style: none; display: grid; }
.guias__grupo li a { display: flex; align-items: center; min-height: 44px; padding: .3rem 0; border-bottom: 1px solid var(--linea); color: var(--rojo); font-weight: 600; text-decoration: none; }
.guias__grupo li:last-child a { border-bottom: 0; }
.guias__grupo li a::after { content: "→"; margin-left: auto; padding-left: .6rem; transition: transform .2s; }
@media (hover: hover) { .guias__grupo li a:hover { text-decoration: underline; } .guias__grupo li a:hover::after { transform: translateX(4px); } }

/* Enlaces dentro del texto de una tarjeta: por encima del enlace que cubre la tarjeta */
.tarjeta p a { position: relative; z-index: 2; }

/* Vuelta 5 (6-oct-2026): elegir provincia, países exentos y frases útiles */
.elige-provincia { margin-top: var(--e3); }
.elige-provincia label { display: block; font-weight: 600; margin-bottom: .3rem; }
.elige-provincia__fila { display: flex; flex-wrap: wrap; gap: var(--e1); }
.elige-provincia select { flex: 1 1 12rem; min-height: 48px; padding: 0 .7rem; border: 2px solid var(--linea); border-radius: 10px; background: var(--blanco); color: var(--tinta); font: inherit; }
.elige-provincia .boton { flex: 0 0 auto; }
.centros h3[tabindex="-1"]:focus { outline: none; }
.paises { columns: 2; column-gap: var(--e3); padding-left: 1.2rem; margin: 0 0 var(--e2); }
.paises li { break-inside: avoid; margin: 0 0 .2rem; }
.puente { margin: var(--e4) 0 var(--e3); padding: var(--e3) var(--e4); background: var(--blanco); border-left: 4px solid var(--rojo); border-radius: 0 var(--radio) var(--radio) 0; box-shadow: var(--sombra); }
.puente > p:first-child { margin-top: 0; }
.puente .acciones { margin-top: var(--e2); }
.frases td:first-child { font-weight: 600; white-space: nowrap; }
.actualizado { margin: var(--e1) 0 0; font-size: var(--t-s); color: var(--tinta-2); }

/* Revisión final de calidad (6-oct-2026) */
/* Con la barra fija de abajo a la vista, lo que recibe el foco no se queda debajo (QA-02). */
@media (max-width: 1279.98px) { html { scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem); } }
.carga { margin: 0; padding: var(--e3); color: var(--tinta-2); font-size: var(--t-s); }
.elige-provincia__aviso { margin: .4rem 0 0; color: var(--rojo); font-weight: 600; font-size: var(--t-s); }
.elige-provincia__aviso:empty { display: none; }