/* Hoja común de las guías (`/guia/*`).
 *
 * ⚠️ **Nace a la cuarta página, y con motivo.** Las tres primeras guías llevaban
 * este bloque incrustado y copiado letra por letra —igual que la landing, que es
 * autocontenida a propósito—. Con dos copias eso es barato; con cuatro **empieza
 * a derivar**, que es cómo este proyecto acabó con `--berry-deep` valiendo dos
 * colores distintos según el fichero (punto 29, bloque B1-B3).
 *
 * Es una petición más, y se paga a sabiendas: estas son páginas de contenido, no
 * la web del salón, que es la que mide el LCP (M1.8c). Aquí la hoja se cachea
 * entre guías y a partir de la segunda página sale gratis.
 *
 * ⚠️ Va en NUESTRO origen y con ruta relativa. `test/helpers/terceros.mjs`
 * ignora las relativas, así que esto no cuenta como tercero — y no debe
 * convertirse nunca en una URL absoluta a un CDN.
 *
 * ⛔ **Y NO puede vivir en `/guia/`, aunque sea donde parece que le toca.** La
 * rewrite `/guia/:slug → /guia/:slug.html` se la traga: `guia.css` casa como
 * slug, se reescribe a `guia.css.html` y da 404 — con las guías sirviéndose
 * **sin estilos**. Pasó en producción el 3-sep-2026 y lo destapó comprobar la
 * página después de desplegar, no un test.
 *
 * Se movió aquí en vez de acotar el `:slug` con un regex porque esa vía tenía un
 * coste escondido: con `:slug([a-z0-9-]+)`, `/guia/loquesea.html` dejaría de dar
 * 404 y cada guía volvería a tener DOS URLs que responden.
 *
 * La paleta es la de la landing (`public/landing/index.html`): sombras teñidas
 * de ciruela y nunca grises, degradado en vez de color plano, línea de luz
 * arriba. No se inventa una nueva.
 */

:root{
  color-scheme:light;
  --paper:#FDFBF7; --paper-2:#F7F1EC; --ink:#1A1618;
  --berry:#8E2358; --berry-deep:#5E1338; --berry-soft:#F6E7EE;
  --gold:#B8863B; --alarm:#C4331D; --alarm-soft:#FBEAE6;
  --ok:#2E6B4F; --ok-soft:#E7F0EA;
  --mist:#6B6266; --line:#EBE3E5;
  --sh:0 1px 2px rgba(59,20,40,.05), 0 8px 22px rgba(59,20,40,.07);
  --lit:inset 0 1px 0 rgba(255,255,255,.9);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}

/* La medida de lectura sale del contenedor, no de un ancho por elemento. */
.env{padding-inline:max(1.35rem,calc(50% - 21rem))}
header{padding-block:2.6rem 1.4rem}

.marca{display:inline-block;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
       color:var(--berry);text-decoration:none}
.kicker{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
        color:var(--mist);margin:1.6rem 0 .6rem}

h1{font-size:clamp(1.85rem,5.4vw,2.6rem);line-height:1.12;font-weight:800;
   letter-spacing:-.022em;margin:0 0 .8rem;text-wrap:balance}
h2{font-size:clamp(1.28rem,3.2vw,1.55rem);line-height:1.2;font-weight:700;
   letter-spacing:-.014em;margin:2.6rem 0 .8rem;text-wrap:balance}
h3{font-size:1.06rem;font-weight:700;margin:1.7rem 0 .35rem}
p,li{max-width:34rem;text-wrap:pretty}
p{margin:0 0 1rem}
ul,ol{padding-left:1.2rem;margin:0 0 1rem}
li{margin-bottom:.45rem}
a{color:var(--berry)}

/* La respuesta, arriba del todo: quien busca esto quiere el sí o el no. */
.respuesta{
  background:linear-gradient(160deg,var(--berry) 0%,var(--berry-deep) 100%);
  color:#fff;border-radius:16px;padding:1.35rem 1.45rem;box-shadow:var(--sh);
  max-width:36rem;margin:1.4rem 0 0
}
.respuesta .si{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;
               margin-bottom:.3rem;line-height:1.15}
/* Cuando la respuesta cabe en dos palabras, se puede permitir más cuerpo. */
.respuesta .si.corta{font-size:1.75rem;margin-bottom:.25rem}
.respuesta p{margin:0;color:#fff;max-width:none;opacity:.94}

/* Procedencia del dato: es la mitad del valor de estas páginas. */
.dato{border-left:3px solid var(--gold);padding:.15rem 0 .15rem 1rem;margin:1.4rem 0;
      color:var(--mist);font-size:.95rem;max-width:34rem}
.dato strong{color:var(--ink)}

blockquote{margin:1.3rem 0;padding:1rem 1.15rem;background:var(--paper-2);
           border-radius:12px;border:1px solid var(--line);box-shadow:var(--lit);
           font-size:.97rem;max-width:36rem}
blockquote p{margin:0;max-width:none}
blockquote cite{display:block;margin-top:.55rem;font-style:normal;font-size:.85rem;
                color:var(--mist)}

/* Tarjeta genérica: un caso, una vía, una guía del índice. */
.caso,.via,.tarjeta{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.2rem;margin:1rem 0;box-shadow:var(--sh),var(--lit);max-width:36rem
}
.caso h3,.via h3,.tarjeta h3{margin:0 0 .15rem}
.caso p,.caso li,.via p,.via li,.tarjeta p,.tarjeta li{max-width:none;font-size:.97rem}
.caso ul,.via ul{margin-bottom:0}

/* La etiqueta de coste o de quién hace el trámite. */
.coste,.quien{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;margin-bottom:.6rem
}
.rapido{background:var(--ok-soft);color:var(--ok)}
.lento{background:var(--alarm-soft);color:var(--alarm)}
.quien{background:var(--berry-soft);color:var(--berry-deep)}

.ojo{background:var(--alarm-soft);border:1px solid rgba(196,51,29,.28);border-radius:12px;
     padding:1rem 1.15rem;margin:1.4rem 0;max-width:36rem;box-shadow:var(--lit)}
.ojo p{margin:0;max-width:none}
.ojo p + p{margin-top:.55rem}
.ojo b{color:var(--alarm)}

.bien{background:var(--ok-soft);border:1px solid rgba(46,107,79,.3);border-radius:12px;
      padding:1rem 1.15rem;margin:1.4rem 0;max-width:36rem;box-shadow:var(--lit)}
.bien p{margin:0;max-width:none}
.bien p + p{margin-top:.55rem}

/* Preguntas numeradas: la numeración es información —se hacen en orden— y no
   adorno. Si algún día la lista deja de ser una secuencia, se quita. */
ol.preguntas{list-style:none;counter-reset:q;padding:0;margin:1.3rem 0 0;max-width:36rem}
ol.preguntas li{counter-increment:q;display:grid;grid-template-columns:2rem 1fr;gap:.85rem;
                margin-bottom:1.1rem;align-items:start}
ol.preguntas li::before{
  content:counter(q);font-weight:800;font-size:.95rem;color:var(--berry);
  background:var(--berry-soft);border-radius:999px;width:2rem;height:2rem;
  display:grid;place-items:center;margin-top:.1rem
}
ol.preguntas p{margin:0;max-width:none}
ol.preguntas .p{font-weight:700}
ol.preguntas .r{color:var(--mist);font-size:.95rem;margin-top:.2rem}

table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.96rem;
      font-variant-numeric:tabular-nums;max-width:36rem}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line)}
th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);font-weight:700}
td:first-child{font-weight:600}
.scroll{overflow-x:auto}

.cierre{background:var(--berry-soft);border-radius:16px;padding:1.5rem;margin:3rem 0 0;
        max-width:36rem;box-shadow:var(--lit)}
.cierre h2{margin-top:0}
.cta{display:inline-block;margin-top:.5rem;padding:.85rem 1.4rem;border-radius:12px;
     background:linear-gradient(160deg,var(--berry) 0%,var(--berry-deep) 100%);
     color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;
     box-shadow:var(--sh),var(--lit);transition:transform .25s var(--ease)}
.cta:hover{transform:translateY(-1px)}

.otras{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.2rem}
.otras a{font-weight:600}
.otras li{font-size:.97rem}
/* La vuelta al índice, al final del bloque de «otras guías». */
.otras .todas{margin-top:.9rem}

footer{margin-top:2rem;border-top:1px solid var(--line);padding-block:1.6rem 3rem;
       color:var(--mist);font-size:.88rem}
footer p{max-width:36rem}

:focus-visible{outline:2px solid var(--berry);outline-offset:3px;border-radius:6px}
/* Acordarse no es un mecanismo: va el último para que nada lo pise. */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}