/* Design DNA medido sobre hipobuy.com (ver _planning/04-design-dna.md) */
:root{
  /* Contraste medido con la fórmula de WCAG contra los tres fondos que usa el sitio
     (#fff, --panel, --soft). Los tres colores de abajo salieron de la paleta de
     hipobuy.com tal cual y ninguno llegaba a 4.5:1 en texto pequeño: --mute daba 4.06,
     --link 3.43 y el blanco sobre --blue 3.68. Se han oscurecido lo justo para pasar
     sin cambiar el tono: --mute 5.17, --link 5.08, blanco sobre --blue-d 5.17.
     --blue se queda como estaba porque sólo se usa en adornos (viñetas, el "+" del
     FAQ, bordes), donde el mínimo es 3:1 y lo cumple. */
  --blue:#3b82f6; --blue-d:#2563eb; --link:#1a6ecb;
  --ink:#303133; --ink2:#626366; --mute:#666d80; --dark:#111827;
  --panel:#eef6fd; --line:#dde6f2; --soft:#f0f6fe;
  --r:18px; --rs:12px; --maxw:1120px; --medida:34em;
  --ff:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif;
}
*{box-sizing:border-box}
/* color-scheme declarado: el sitio sólo tiene tema claro, y sin esta línea los navegadores
   en modo oscuro pintan la barra de scroll y los controles nativos (el <select> de la
   calculadora, las flechas de los <input type=number>) con su paleta oscura sobre nuestros
   fondos blancos. */
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;font-family:var(--ff);font-size:17px;line-height:1.72;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:hover{color:var(--blue-d)}
/* touch-action en todo lo pulsable: quita el retardo de ~300 ms que algunos navegadores
   móviles reservan para detectar el doble toque de zoom. No desactiva el zoom, sólo deja
   de esperarlo sobre botones y enlaces. */
a,button,summary,label,input,select{touch-action:manipulation}
/* El destino del enlace "Saltar al contenido" queda debajo de la cabecera fija si no se
   reserva sitio: al pulsarlo el foco iba a parar bajo el menú. */
#main,[id]{scroll-margin-top:76px}
h1,h2,h3{color:var(--dark);line-height:1.25;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,45px);font-weight:800}
h2{font-size:clamp(24px,3vw,32px);font-weight:800;margin-top:0}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1.05em}
/* Medida de lectura. Sin tope, los párrafos que ocupan todo el ancho del contenedor
   llegaban a 103-154 caracteres por línea en 1440 px (medido en las ocho páginas); el
   óptimo está en 65-75. La página con más texto seguido, /help/, tenía 15 de 19 bloques
   por encima de 100. 34em da ~68 caracteres con esta pila de fuentes, y como es relativa
   al tamaño de letra vale igual para un pie de 14px que para un lead de 19px. No afecta
   al texto dentro de .split ni de las tarjetas: esas columnas ya son más estrechas. */
main p,main li,.faq .a{max-width:var(--medida)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;min-width:44px;min-height:44px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:0 18px;border-radius:var(--rs);
  display:inline-flex;align-items:center;min-height:46px}
/* Foco visible al navegar con teclado. El navegador pinta uno por defecto, pero el campo del
   buscador lo anulaba con outline:0 y dejaba sólo un cambio de fondo muy tenue: sobre el hero
   azul marino no se ve dónde está el cursor. Con dos reglas queda cubierto todo el sitio,
   anillo azul sobre fondos claros y anillo blanco dentro del hero. El formulario del buscador
   necesita la tercera porque, aun estando en el hero, su fondo propio es blanco. No se toca
   aquí el border-radius: el anillo ya sigue el del elemento. */
:focus-visible{outline:3px solid var(--blue-d);outline-offset:2px}
.hero :focus-visible{outline-color:#fff}
.sbox form :focus-visible{outline-color:var(--blue-d)}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:9px;min-height:44px;font-weight:800;color:var(--dark);
  text-decoration:none;font-size:17px;white-space:nowrap}
.brand img{width:28px;height:28px;border-radius:8px}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:nowrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--rs);
  color:var(--ink2);text-decoration:none;font-size:15.5px;white-space:nowrap}
.nav a:hover{background:var(--soft);color:var(--blue-d)}
.nav a[aria-current]{color:var(--blue-d);font-weight:700;background:var(--soft)}
.burger{display:none;margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--line);
  background:#fff;border-radius:var(--rs);font-size:19px;cursor:pointer;color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;background:#0d1f38;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:url(/img/hero.jpg) center/cover no-repeat}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,24,45,.93) 0%,rgba(8,24,45,.80) 40%,rgba(8,24,45,.34) 78%,rgba(8,24,45,.12) 100%)}
.hero .wrap{position:relative;padding-top:74px;padding-bottom:78px}
.hero .eyebrow{color:#a9cbff}
.hero h1{color:#fff;max-width:15.5em}
.hero p.lead{color:#d7e5f7;font-size:19px;max-width:34em}
.eyebrow{display:inline-block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--blue-d);margin-bottom:14px}
/* Las cuatro comprobaciones de la página de novedades llevan un ordinal, no un rótulo
   decorativo: dice cuántas quedan. Se distingue del eyebrow a propósito (contador, no
   adorno) para que no se lea como el mismo elemento repetido cuatro veces. */
.orden{display:inline-block;margin-bottom:13px;padding:3px 11px;border:1px solid var(--line);
  border-radius:37.5px;background:#fff;font-size:12.5px;font-weight:700;color:var(--ink2)}

/* ---------- buscador ---------- */
.sbox{margin-top:26px;max-width:660px}
.sbox form{display:flex;gap:9px;background:#fff;border-radius:var(--r);padding:9px;
  box-shadow:0 14px 40px rgba(4,17,35,.34)}
/* Sin outline:0 aquí. Lo llevaba para quitar el recuadro del navegador, pero pesa más que la
   regla global de :focus-visible y dejaba el campo sin anillo justo donde más falta hace. */
.sbox input{flex:1;min-width:0;border:0;font:inherit;font-size:17px;
  padding:12px 14px;border-radius:var(--rs);color:var(--ink)}
.sbox input:focus{background:var(--soft)}
.sbox button{min-height:44px;padding:0 24px;border:0;border-radius:37.5px;background:var(--blue-d);
  color:#fff;font:inherit;font-weight:700;cursor:pointer}
.sbox button:hover{background:#1d4ed8}
.shint{min-height:26px;margin:11px 2px 0;font-size:14px;color:#cfe1f8}
.shint b{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:37.5px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  color:#eaf2fd;text-decoration:none;font-size:14px}
.chips a:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---------- secciones ---------- */
.sec{padding:62px 0;border-top:1px solid var(--line)}
.sec--tint{background:linear-gradient(var(--soft) 0%,#fff 100%);border-top:0}
.sec--first{border-top:0}
.split{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center}
.split--rev .fig{order:-1}
.split--top{align-items:start}
.fig{margin:0}
.fig img{border-radius:var(--r);border:1px solid var(--line);background:#fff}
.fig figcaption{margin-top:11px;font-size:13.5px;line-height:1.55;color:var(--mute)}
.fig--pad img{padding:14px}
/* Capturas verticales de móvil (alto > 1,3 × ancho). Ver el tope más abajo, en la
   consulta de ancho: sólo se aplica cuando el texto y la imagen van en dos columnas. */
.lead{font-size:19px;color:var(--ink2)}

/* tres modos de arancel: nunca tres tarjetas iguales en fila (硬门 17) */
.uneven{display:grid;grid-template-columns:1.38fr 1fr;gap:20px}
/* La tercera tarjeta ocupa las dos columnas a propósito (rompe la retícula), pero su texto
   está limitado a la medida de lectura: si la caja se quedara a 1076px el párrafo flotaría
   con medio recuadro vacío a la derecha. Se le da el ancho de la medida más el relleno para
   que la caja acompañe al texto en vez de al revés. */
.uneven .card:nth-child(3){grid-column:1/-1;max-width:calc(var(--medida) + 48px)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 20px}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.card .tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue-d);background:var(--panel);
  border-radius:37.5px;padding:4px 12px;margin-bottom:10px}

/* línea de tiempo de rutas */
.tl{list-style:none;margin:0;padding:0 0 0 30px;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 26px 8px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-39px;top:9px;width:14px;height:14px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff}
.tl b{display:block;color:var(--dark);font-size:17px}
.tl span{color:var(--mute);font-size:14px}

/* categorías */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.cat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.cat:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(19,50,90,.11);border-color:#bcd6f5}
.cat img{aspect-ratio:1/1;object-fit:contain;padding:12px;background:#fff}
.cat__b{padding:12px 15px 15px;border-top:1px solid var(--line)}
.cat__b strong{display:block;color:var(--dark);font-size:16px}
.cat__b span{font-size:13.5px;color:var(--mute)}
.cat__b em{display:block;margin-top:7px;font-style:normal;font-size:14px;color:var(--ink2);line-height:1.55}
.cat-grid--rich .cat img{aspect-ratio:auto;height:190px}

/* calculadora */
.calc{background:var(--panel);border:1px solid #cfe2f8;border-radius:var(--r);padding:26px}
.calc__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.calc label{display:block;font-size:14px;font-weight:700;color:var(--ink2);margin-bottom:5px}
.calc input,.calc select{width:100%;min-height:44px;padding:8px 12px;border:1px solid #c3d8f2;
  border-radius:var(--rs);font:inherit;background:#fff;color:var(--ink)}
.calc__out{margin-top:18px;background:#fff;border:1px solid #cfe2f8;border-radius:var(--rs);padding:16px 18px}
/* Cifras de ancho fijo: los dos resultados cambian mientras se teclea y con ancho
   proporcional el número entero baila de sitio en cada pulsación. */
.calc__out b{color:var(--blue-d);font-size:19px;font-variant-numeric:tabular-nums}
.calc__note{margin:12px 0 0;font-size:14px;color:var(--mute)}

/* tablas */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th,.tbl td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:var(--soft);color:var(--dark);font-size:14px;letter-spacing:.02em}
.tbl tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}

/* faq */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:17px 22px;font-weight:700;color:var(--dark);
  min-height:44px;display:flex;align-items:center;gap:10px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--blue);font-weight:800;font-size:20px;flex:0 0 auto}
.faq details[open] summary::before{content:"\2212"}
.faq .a{padding:0 22px 18px 52px}
.faq .a p:last-child{margin-bottom:0}
.faq__g{margin:34px 0 12px;font-size:17px;letter-spacing:.02em;color:var(--ink2)}
.faq__g:first-of-type{margin-top:4px}

/* rótulo de fase en la guía: corta la fila texto-imagen sin ocupar una fila entera */
.fase{border-top:2px solid var(--blue);padding-top:16px;max-width:44em}
.fase h3{margin:0 0 .35em;font-size:18px;color:var(--blue-d);letter-spacing:.01em}
.fase p{margin:0;color:var(--ink2);font-size:15.5px}

.note{background:var(--panel);border-left:4px solid var(--blue);border-radius:0 var(--rs) var(--rs) 0;
  padding:16px 20px;font-size:15.5px;color:var(--ink2);max-width:calc(var(--medida) + 44px)}
.note p:last-child{margin-bottom:0}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 26px;border-radius:37.5px;
  background:var(--blue-d);color:#fff;text-decoration:none;font-weight:700}
.btn:hover{background:#1d4ed8;color:#fff}
.btn--ghost{background:transparent;color:var(--blue-d);border:1.5px solid #b9d4f6}
.btn--ghost:hover{background:var(--soft);color:var(--blue-d)}
.bc{font-size:14px;color:var(--mute);padding:16px 0 0}
.bc a{color:var(--mute)}
.list{padding-left:1.15em;margin:0 0 1.05em}
.list li{margin-bottom:.5em}
/* Las dos listas de fuentes oficiales son lo que sostiene lo que se afirma encima, pero
   sueltas en mitad del texto parecían una viñeta más. Enmarcadas se distinguen de la prosa
   sin quitarle protagonismo, y la línea de «comprobados el …» queda justo debajo del marco,
   pegada a lo que fecha. */
.list--src{list-style:none;padding:18px 20px 6px;margin:0 0 .55em;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r)}
.list--src li{position:relative;margin-bottom:.62em;padding-left:19px;font-size:15.5px}
.list--src li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--blue)}
.list--src+.src{margin-top:0}
.src{font-size:14px;color:var(--mute)}

/* pie */
.foot{background:#0f1e33;color:#c2d2e6;margin-top:0;padding:52px 0 30px;font-size:15.5px}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.foot h3{color:#fff;font-size:15.5px;margin:0 0 12px;letter-spacing:.02em}
.foot a{color:#c2d2e6;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot .legal{grid-column:1/-1;border-top:1px solid #22364f;padding-top:20px;font-size:13.5px;color:#8ea3bd}
.foot .legal p{margin:0 0 8px}

/* Sólo mientras texto e imagen comparten fila. Una captura vertical de 1.200 px de alto
   junto a un párrafo de cuatro líneas dejaba media columna vacía; con el tope la fila baja
   a un tamaño legible. En una sola columna no sobra nada al lado, así que ahí no se toca:
   encoger la imagen sólo la haría más difícil de leer. La proporción sigue saliendo de los
   atributos width/height, así que el hueco se reserva igual y no hay salto de layout. */
@media(min-width:1001px){
  .fig--tall img{max-height:520px;width:auto;margin:0 auto}
  .fig--tall figcaption{max-width:34em;margin-inline:auto}
}
@media(max-width:1000px){
  .split,.uneven{grid-template-columns:1fr;gap:30px}
  .split--rev .fig{order:0}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .calc__row{grid-template-columns:repeat(2,1fr)}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .burger{display:block}
  .nav{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 16px 14px;display:none;box-shadow:0 12px 26px rgba(10,30,60,.1)}
  .nav.open{display:flex}
  .nav a{width:100%}
  /* Táctil: los enlaces que ocupan ellos solos una línea son botones de hecho,
     así que en pantallas de dedo se les da los 44px. Los enlaces dentro de un
     párrafo se quedan como están: WCAG exceptúa el texto en línea y estirarlos
     rompería el interlineado del propio párrafo. */
  .bc a,
  .chips a,
  .foot li>a:only-child,
  .foot a[href^="mailto:"],
  .list li>a:only-child{display:inline-flex;align-items:center;min-height:44px}
  .bc a{min-width:44px;justify-content:center}
  .foot li{margin-bottom:0}
  .list li{margin-bottom:0}
  /* al estirar el enlace a 44px el texto se centra en la línea, así que la viñeta
     tiene que bajar con él o queda flotando arriba */
  .list--src li::before{top:50%;transform:translateY(-50%)}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .hero .wrap{padding-top:52px;padding-bottom:56px}
  .sec{padding:46px 0}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .calc__row{grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:1fr}
  .sbox form{flex-direction:column;padding:12px}
  .sbox button{width:100%}
  /* build_assets.py genera hero-1000.jpg (27 KB) además del de 2000 px (78 KB).
     En móvil se sirve el pequeño: es el candidato a LCP y no tiene sentido bajar
     una imagen de 2000 px para una pantalla de 375. */
  .hero__bg{background-image:url(/img/hero-1000.jpg)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .cat:hover{transform:none}
}