/* =========================================================================
   41Studio · dos tintas sobre pliego
   Orden: tokens · reinicio · tipografia · maquetacion · componentes ·
          utilidades · movimiento · media queries
   ========================================================================= */

/* ---------- tipografias autoalojadas, subset latino ---------- */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fuentes/archivo-800.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Familjen";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fuentes/familjen-grotesk-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Familjen";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fuentes/familjen-grotesk-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  /* las dos tintas y el papel. Contrastes calculados en scripts/contraste.mjs */
  --papel:#EFEDE9;
  --pliego:#E4E0DA;
  --tinta:#17161A;
  --panel-tinta:#221F27;
  --rojo:#D91C1E;
  --rojo-texto:#B31217;
  --rojo-claro:#F0655F;
  --rojo-activo:#A50F14;
  --texto:#17161A;
  --texto-suave:#57545C;
  --texto-t:#EFEDE9;
  --texto-t-suave:#A9A5B0;
  --borde:#D6D0C6;
  --borde-t:#2E2B36;
  --borde-fuerte:#8A7F71;
  --borde-fuerte-t:#706980;
  --sobre-rojo:#FFFFFF;

  /* en cara tinta, estos tres se invierten y todo lo demas hereda */
  --fondo:var(--papel);
  --fondo-alt:var(--pliego);
  --tono:var(--texto);
  --tono-suave:var(--texto-suave);
  --filete:var(--borde);
  --filete-fuerte:var(--borde-fuerte);
  --acento-texto:var(--rojo-texto);

  /* tipografia */
  --display:"Archivo",system-ui,sans-serif;
  --cuerpo:"Familjen","Familjen Grotesk",system-ui,sans-serif;
  --t-mega:clamp(3.1rem,1.6rem + 6.4vw,7.5rem);
  --t-h1:clamp(2.5rem,1.5rem + 4.2vw,4.9rem);
  --t-h2:clamp(1.95rem,1.3rem + 2.6vw,3.3rem);
  --t-h3:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --t-cifra:clamp(2.6rem,1.6rem + 4vw,5rem);
  --t-guia:clamp(1.06rem,1rem + .36vw,1.28rem);
  --t-base:1.0625rem;
  --t-menu:.95rem;
  --t-nota:.86rem;

  /* ritmo */
  --ancho:76rem;
  --ancho-lectura:34rem;
  --aire:clamp(1.25rem,.7rem + 2.4vw,3rem);
  --alto-seccion:clamp(3.75rem,2rem + 6vw,7.5rem);

  /* movimiento */
  --suave:cubic-bezier(.22,.61,.36,1);
  --firme:cubic-bezier(.65,0,.35,1);
  --t-rapido:180ms;
  --t-medio:320ms;
  --t-lento:640ms;
}

/* transiciones entre paginas. Firefox no lo implementa y su fallo es limpio */
@view-transition{navigation:auto}

/* ---------- reinicio ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden;      /* respaldo primero */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:rgb(217 28 30 / .16);
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:target{scroll-margin-top:6.5rem}
h2,h3,[id]{scroll-margin-top:6.5rem}

/* ---------- foco: la marca de registro hecha anillo ---------- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--rojo);
  outline-offset:3px;
  border-radius:2px;
}
.cara-tinta :focus-visible{outline-color:var(--rojo-claro)}

.saltar{
  position:absolute;left:.75rem;top:-4rem;z-index:100;
  background:var(--rojo);color:var(--sobre-rojo);
  padding:.7rem 1.1rem;font-weight:600;text-decoration:none;
  transition:top var(--t-rapido) var(--firme);
}
.saltar:focus-visible{top:.75rem}

/* ---------- tipografia ---------- */
h1,h2,.cifra,.mega{
  font-family:var(--display);font-weight:800;
  letter-spacing:-.025em;line-height:.95;
  text-wrap:balance;
}
h3{font-family:var(--cuerpo);font-weight:600;font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}
.mega{font-size:var(--t-mega);line-height:.92;letter-spacing:-.032em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
.cifra{font-size:var(--t-cifra);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cifra .u{color:var(--rojo)}
.guia{font-size:var(--t-guia);line-height:1.5;color:var(--tono-suave);max-width:38rem}
.nota{font-size:var(--t-nota);color:var(--tono-suave)}
p{max-width:var(--ancho-lectura)}
p.ancho{max-width:44rem}
strong,b{font-weight:600;color:var(--tono)}
.num{font-variant-numeric:tabular-nums}

/* ---------- maquetacion ---------- */
.limite{width:min(100% - var(--aire) * 2,var(--ancho));margin-inline:auto}
.limite-ancho{width:min(100% - var(--aire) * 2,92rem);margin-inline:auto}
section{position:relative}
.seccion{padding-block:var(--alto-seccion)}
.seccion-corta{padding-block:calc(var(--alto-seccion) * .62)}

/* las dos caras del pliego */
.cara-papel{background:var(--papel);color:var(--texto)}
.cara-pliego{background:var(--pliego);color:var(--texto);--fondo:var(--pliego)}
.cara-tinta{
  background:var(--tinta);color:var(--texto-t);
  --fondo:var(--tinta);--fondo-alt:var(--panel-tinta);
  --tono:var(--texto-t);--tono-suave:var(--texto-t-suave);
  --filete:var(--borde-t);--filete-fuerte:var(--borde-fuerte-t);
  --acento-texto:var(--rojo-claro);
}
.cara-rojo{
  background:var(--rojo);color:var(--sobre-rojo);
  --tono:var(--sobre-rojo);--tono-suave:var(--sobre-rojo);
  --filete:rgb(255 255 255 / .34);--filete-fuerte:rgb(255 255 255 / .6);
  --acento-texto:var(--sobre-rojo);
}
.cara-tinta h2,.cara-rojo h2,.cara-tinta h1,.cara-rojo h1{color:inherit}

/* ---------- el elemento firma: la marca de registro ---------- */
.registro{
  position:absolute;top:1.1rem;right:1.1rem;
  width:1.55rem;height:1.55rem;color:var(--rojo);
  pointer-events:none;
}
.cara-tinta > .registro{color:var(--rojo-claro)}
.cara-rojo > .registro{color:rgb(255 255 255 / .7)}
.registro svg{width:100%;height:100%;display:block}

/* viñeta de lista, la marca en version solida */
.lista-registro{display:grid;gap:1.15rem}
.lista-registro > li{
  display:grid;grid-template-columns:1.15rem 1fr;gap:.85rem;
  align-items:start;
}
.lista-registro .marca{
  width:1.15rem;height:1.15rem;color:var(--rojo);margin-top:.32em;
}
.cara-tinta .lista-registro .marca{color:var(--rojo-claro)}
.lista-registro .marca.tachada{opacity:.85}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;padding:.85rem 1.5rem;
  font-weight:600;font-size:1rem;line-height:1.2;
  text-decoration:none;border:2px solid transparent;
  transition:background-color var(--t-rapido) var(--firme),
             border-color var(--t-rapido) var(--firme),
             color var(--t-rapido) var(--firme),
             transform var(--t-rapido) var(--firme);
}
.btn-solido{background:var(--rojo);color:var(--sobre-rojo);border-color:var(--rojo)}
.btn-solido:hover{background:var(--rojo-activo);border-color:var(--rojo-activo)}
.btn-solido:active{transform:translateY(1px)}
.btn-linea{border-color:var(--filete-fuerte);color:var(--tono)}
.btn-linea:hover{border-color:var(--tono);background:color-mix(in srgb,var(--tono) 7%,transparent)}
.cara-rojo .btn-solido{background:var(--sobre-rojo);color:var(--rojo);border-color:var(--sobre-rojo)}
.cara-rojo .btn-solido:hover{background:var(--papel);border-color:var(--papel)}
.botonera{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* enlace de texto con subrayado que crece */
.enlace{
  color:var(--acento-texto);font-weight:600;text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--acento-texto) 38%,transparent);
  transition:border-color var(--t-rapido) var(--firme),color var(--t-rapido) var(--firme);
}
.enlace:hover{border-bottom-color:currentColor}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:var(--papel);
  border-bottom:1px solid var(--borde);
  padding-top:env(safe-area-inset-top);
}
.cabecera-fila{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:4.25rem;
}
.marca-enlace{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.marca-enlace img{width:auto;height:1.45rem}
.menu{display:flex;align-items:center;gap:1.7rem}
.menu a:not(.btn){
  font-size:var(--t-menu);font-weight:500;text-decoration:none;
  color:var(--texto);position:relative;padding-block:.35rem;
}
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--rojo);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-rapido) var(--firme);
}
.menu a:not(.btn):hover::after,.menu a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.menu a:not(.btn)[aria-current="page"]{font-weight:600}
.cabecera .btn{padding:.62rem 1.15rem;font-size:var(--t-menu)}

.abrir-menu{display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;color:var(--texto)}
.abrir-menu svg{width:1.5rem;height:1.5rem}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:var(--texto-t-suave);padding-block:3.5rem 2rem;padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
.pie a{color:var(--texto-t);text-decoration:none}
.pie a:hover{color:var(--rojo-claro)}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;align-items:start}
.pie h2,.pie .tit{font-family:var(--cuerpo);font-size:var(--t-nota);font-weight:600;letter-spacing:.06em;color:var(--texto-t);margin-bottom:1rem}
.pie ul{display:grid;gap:.6rem;font-size:.94rem}
.pie img{height:1.35rem;width:auto;margin-bottom:1rem;color:var(--texto-t)}
.pie-legal{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--borde-t);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:var(--t-nota);
}
.pie-legal ul{display:flex;flex-wrap:wrap;gap:1.25rem}

/* ---------- piezas de contenido ---------- */

/* portada tipografica */
.portada{padding-block:clamp(3.5rem,2rem + 7vw,8rem) var(--alto-seccion)}
.portada .mega{max-width:15ch}
.portada .guia{margin-top:1.6rem;font-size:clamp(1.1rem,1rem + .6vw,1.45rem);max-width:44rem}
.tira-datos{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;
  margin-top:2.6rem;padding-top:1.4rem;border-top:2px solid var(--texto);
  font-size:1rem;
}
.tira-datos b{font-family:var(--display);font-weight:800;font-size:1.35em;letter-spacing:-.02em}
.tira-datos li{display:inline-flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}

/* apuntes en fila */
.apuntes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;border-top:1px solid var(--filete)}
.apuntes > li{padding:1.6rem 1.75rem 0;border-right:1px solid var(--filete)}
.apuntes > li:first-child{padding-left:0}
.apuntes > li:last-child{border-right:0}
.apuntes p{font-size:.99rem;color:var(--tono-suave);max-width:26rem}
.apuntes .rot{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--tono);display:block;margin-bottom:.5rem}

/* dos ofertas asimetricas */
.ofertas{display:grid;grid-template-columns:1.22fr 1fr;gap:0;margin-top:3.25rem;border-top:2px solid var(--texto)}
.oferta{padding:2rem 2.25rem 2.25rem;border-right:1px solid var(--filete)}
.oferta:first-child{padding-left:0}
.oferta:last-child{border-right:0;padding-right:0}
.oferta .cifra{display:block;margin-bottom:.15rem}
.oferta .periodo{font-size:.95rem;color:var(--tono-suave);display:block;margin-bottom:1.1rem}
.oferta h3{margin-bottom:.6rem}
.oferta p{color:var(--tono-suave);margin-bottom:1.35rem}

/* linea de tiempo del proceso */
.proceso{position:relative;margin-top:3rem}
.proceso-filete{position:absolute;left:0;right:0;top:1.15rem;height:2px;background:var(--filete);overflow:hidden}
.proceso-filete::after{
  content:"";position:absolute;inset:0;background:var(--rojo);
  transform:scaleX(0);transform-origin:left;
}
.proceso-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
.paso{padding-right:1.5rem}
.paso .punto{
  width:2.3rem;height:2.3rem;color:var(--rojo);background:var(--fondo);
  display:block;margin-bottom:1.1rem;position:relative;z-index:1;
}
.cara-tinta .paso .punto{color:var(--rojo-claro)}
.paso .dia{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.01em;display:block;margin-bottom:.4rem}
.paso p{font-size:.99rem;color:var(--tono-suave)}

/* cifras de prueba */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.75rem;border-top:1px solid var(--filete)}
.cifras > div{padding:1.75rem 1.75rem 0;border-right:1px solid var(--filete)}
.cifras > div:first-child{padding-left:0}
.cifras > div:last-child{border-right:0}
.cifras .cifra{display:block;line-height:.9}
.cifras p{font-size:.96rem;color:var(--tono-suave);margin-top:.7rem}

/* dos listas enfrentadas */
.enfrentadas{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:2.5rem;border-top:2px solid var(--tono)}
.enfrentadas > div{padding:1.75rem 2rem 0;border-right:1px solid var(--filete)}
.enfrentadas > div:first-child{padding-left:0}
.enfrentadas > div:last-child{border-right:0;padding-right:0}
.enfrentadas h3{margin-bottom:1.1rem}

/* planes */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;border-top:2px solid var(--tono)}
.plan{padding:1.9rem 1.9rem 2rem;border-right:1px solid var(--filete);position:relative}
.plan:first-child{padding-left:0}
.plan:last-child{border-right:0;padding-right:0}
.plan.elegido::before{content:"";position:absolute;left:0;right:0;top:-2px;height:4px;background:var(--rojo)}
.plan .cifra{display:block;font-size:clamp(2.1rem,1.4rem + 2.4vw,3.1rem)}
.plan .periodo{font-size:.94rem;color:var(--tono-suave);display:block;margin-bottom:1.15rem}
.plan h3{margin-bottom:.45rem}
.plan > p{color:var(--tono-suave);margin-bottom:1.3rem;min-height:3em}
.plan .rot-elegido{
  font-size:var(--t-nota);font-weight:600;letter-spacing:.05em;color:var(--acento-texto);
  display:block;margin-bottom:.55rem;
}
.cara-tinta .plan .rot-elegido{color:var(--rojo-claro)}

/* tabla comparativa */
.tabla-envoltura{margin-top:2.5rem;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:38rem;font-size:.98rem}
th,td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--filete);vertical-align:top}
thead th{
  font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;
  border-bottom:2px solid var(--tono);
}
tbody th{font-weight:400;color:var(--tono-suave)}
td .si{color:var(--acento-texto);font-weight:600}
td .no{color:var(--tono-suave)}
table .num{font-variant-numeric:tabular-nums}

/* acordeon de preguntas */
.faq{margin-top:2.5rem;border-top:1px solid var(--filete)}
.faq details{border-bottom:1px solid var(--filete)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;
  font-family:var(--cuerpo);font-weight:600;font-size:1.09rem;line-height:1.35;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.65rem;
  width:.75rem;height:.75rem;border-right:2px solid var(--acento-texto);
  border-bottom:2px solid var(--acento-texto);
  transform:rotate(45deg);transform-origin:center;
  transition:transform var(--t-medio) var(--suave);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--acento-texto)}
.faq .respuesta{padding:0 2.5rem 1.5rem 0}
.faq .respuesta p + p{margin-top:.9rem}

/* bloque de correo grande */
.correo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,.9rem + 3.6vw,3.6rem);
  letter-spacing:-.03em;line-height:1.05;
  text-decoration:none;display:inline-block;
  border-bottom:.09em solid currentColor;word-break:break-word;
}
.correo:hover{color:var(--rojo)}
.cara-rojo .correo:hover,.cara-tinta .correo:hover{color:var(--papel)}
.cara-tinta .correo:hover{color:var(--rojo-claro)}

/* imagen de banda */
.banda{position:relative;overflow:hidden}
.banda img{width:100%;height:clamp(11rem,26vw,20rem);object-fit:cover;object-position:center 45%}

/* textos legales */
.legal{padding-block:var(--alto-seccion)}
.legal .cuerpo-legal{max-width:44rem}
.legal h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);margin-top:2.75rem;margin-bottom:.9rem}
.legal h2:first-of-type{margin-top:2rem}
.legal p{max-width:44rem;margin-bottom:1rem}
.legal ul:not(.lista-registro){margin:1rem 0 1.25rem;display:grid;gap:.55rem}
.legal ul:not(.lista-registro) li{padding-left:1.35rem;position:relative;max-width:44rem}
.legal ul:not(.lista-registro) li::before{
  content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  background:var(--rojo);
}
.legal .fecha{font-size:var(--t-nota);color:var(--texto-suave);margin-top:.75rem}
.legal .tabla-envoltura{margin-top:1.5rem}

/* 404 */
.pagina-404{min-height:62vh;display:flex;align-items:center}

/* ---------- utilidades ---------- */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.filete-sup{border-top:2px solid var(--tono);padding-top:1.5rem}
.medida{max-width:var(--ancho-lectura)}
.centro-no{margin-left:0}
[hidden]{display:none !important}

/* ---------- movimiento: capa 1, coreografia de entradas ---------- */
/* Los estados inicial y final van prefijados por el contenedor para que ninguna
   regla posterior gane la cascada y mate la animacion en silencio. */
[data-entra] > .parte{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--t-lento) var(--suave),transform var(--t-lento) var(--suave);
}
[data-entra].dentro > .parte{opacity:1;transform:none}
[data-entra].dentro > .parte:nth-child(2){transition-delay:80ms}
[data-entra].dentro > .parte:nth-child(3){transition-delay:160ms}
[data-entra].dentro > .parte:nth-child(4){transition-delay:240ms}
[data-entra].dentro > .parte:nth-child(5){transition-delay:320ms}
/* La limpieza del escalonado necesita igualar la especificidad de :nth-child,
   o los estados de raton del segundo y tercer elemento responden tarde para siempre. */
[data-entra].listo > .parte:nth-child(n){transition-delay:0s}

/* el filete del proceso se traza y las paradas encienden detras de el */
.proceso.dentro .proceso-filete::after{
  transform:scaleX(1);
  transition:transform 1.1s var(--suave);
}
.proceso .paso{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--t-medio) var(--suave),transform var(--t-medio) var(--suave);
}
.proceso.dentro .paso{opacity:1;transform:none}
.proceso.dentro .paso:nth-child(1){transition-delay:120ms}
.proceso.dentro .paso:nth-child(2){transition-delay:380ms}
.proceso.dentro .paso:nth-child(3){transition-delay:640ms}
.proceso.dentro .paso:nth-child(4){transition-delay:900ms}
/* misma especificidad que las reglas :nth-child que retira, o no se aplica nunca */
.proceso.listo .paso:nth-child(n){transition-delay:0s}

/* ---------- movimiento: capa 2, registro del titular dirigido por scroll ---------- */
/* El estado base ES el estado final. La regla animation vive SOLO dentro del
   @supports, para que Firefox vea el titular quieto y colocado en vez de un
   destello en el primer pintado. */
.registrar{text-shadow:none}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .registrar{
      animation:registrar linear both;
      animation-duration:1ms;
      animation-timeline:view();
      animation-range:entry 18% cover 42%;
    }
  }
}
@keyframes registrar{
  from{text-shadow:-.055em .04em 0 var(--rojo)}
  60%{text-shadow:-.014em .01em 0 var(--rojo)}
  to{text-shadow:0 0 0 rgb(217 28 30 / 0)}
}

/* ---------- media queries ---------- */
@media (max-width:60rem){
  .ofertas,.enfrentadas{grid-template-columns:1fr}
  .oferta,.enfrentadas > div{
    border-right:0;border-bottom:1px solid var(--filete);
    padding:1.75rem 0;
  }
  .oferta:last-child,.enfrentadas > div:last-child{border-bottom:0;padding-bottom:0}
  .apuntes,.cifras,.planes{grid-template-columns:1fr}
  .apuntes > li,.cifras > div,.plan{
    border-right:0;border-bottom:1px solid var(--filete);
    padding:1.5rem 0;
  }
  .apuntes > li:last-child,.cifras > div:last-child,.plan:last-child{border-bottom:0}
  .plan.elegido::before{top:0}
  .proceso-pasos{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:2rem}
}

@media (max-width:48rem){
  .menu,.cabecera .btn-solido{display:none}
  .abrir-menu{display:inline-flex}
  .cabecera.abierto .menu{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--papel);border-bottom:1px solid var(--borde);
    padding:.5rem var(--aire) 1.5rem;
  }
  .cabecera.abierto .menu a{
    width:100%;padding:.95rem 0;border-bottom:1px solid var(--borde);
    font-size:1.1rem;
  }
  .cabecera.abierto .menu .btn{
    margin-top:1.1rem;width:100%;display:inline-flex;
    align-items:center;justify-content:center;
  }
  .proceso-pasos{grid-template-columns:1fr;gap:1.75rem}
  .proceso-filete{display:none}
  .paso{padding-right:0}
  .pie-rejilla{grid-template-columns:1fr;gap:2rem}
  .tira-datos{gap:.35rem 1.1rem}
}

@media (max-width:26rem){
  :root{--aire:1.15rem}
}

/* objetivos tactiles. Ojo: al cambiar display hay que redeclarar la alineacion,
   o las filas de ancho completo encogen al ancho de su texto. */
@media (pointer:coarse){
  .btn,.faq summary{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
  /* min-height no hace nada en un enlace en linea: hay que cambiar el display,
     y al cambiarlo hay que redeclarar la alineacion o las filas encogen */
  .menu a,.pie ul a,.pie-legal ul a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .pie ul li,.pie-legal ul li{display:flex;align-items:center}
  .cuenta-rango input[type="range"]{height:44px}
  .cuenta-planes button{min-height:56px}
  .marca-enlace{min-height:44px;display:inline-flex;align-items:center}
  .correo{padding-block:.5rem}
  a,button,summary{touch-action:manipulation}
}

/* decoraciones fuera en pantallas cortas, para que no choquen con el contenido */
@media (max-height:34rem){
  .registro{display:none}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  /* cada elemento coreografiado, en su estado final terminado */
  [data-entra] > .parte{opacity:1;transform:none}
  .proceso .paso{opacity:1;transform:none}
  .proceso .proceso-filete::after{transform:scaleX(1)}
  .registrar{text-shadow:none}
}

/* lo mismo, activado en vivo desde el script cuando la preferencia cambia
   con la pagina ya abierta */
body.sin-movimiento *,
body.sin-movimiento *::before,
body.sin-movimiento *::after{
  animation-play-state:paused !important;
  animation-duration:.001ms !important;
  transition-duration:.001ms !important;
  transition-delay:0s !important;
}
body.sin-movimiento [data-entra] > .parte{opacity:1;transform:none}
body.sin-movimiento .proceso .paso{opacity:1;transform:none}
body.sin-movimiento .proceso .proceso-filete::after{transform:scaleX(1)}

/* pausa de motores cuando la pestaña se oculta.
   animation-play-state NO se hereda, asi que hay que alcanzar a los hijos y
   a los pseudoelementos uno a uno. */
body.pausado *,
body.pausado *::before,
body.pausado *::after{animation-play-state:paused !important}

/* ---------- impresion ---------- */
@media print{
  .cabecera,.saltar,.registro{display:none}
  body{background:#fff;color:#000}
  .cara-tinta,.cara-rojo{background:#fff;color:#000}
}

/* ---------- piezas añadidas por pagina ---------- */

/* entrada con la cifra en columna estrecha al lado del titular */
.entrada-cifra{display:grid;grid-template-columns:1.55fr .8fr;gap:3rem;align-items:start}
.precio-suelto{
  border-top:2px solid var(--texto);padding-top:1.25rem;
  position:sticky;top:6.5rem;
}
.precio-suelto .cifra{display:block;line-height:.9}
.precio-suelto .periodo{display:block;font-size:.95rem;color:var(--tono-suave);margin-top:.35rem}
.precio-suelto .nota{margin-top:1.1rem;max-width:none}

/* lista de comprobaciones a dos columnas */
.lista-dos{grid-template-columns:repeat(2,1fr);gap:1.35rem 3rem;margin-top:2.5rem}

/* dos parrafos anchos enfrentados, sin listas */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.75rem}
.dos-columnas p{max-width:none;font-size:1.09rem;line-height:1.6}

@media (max-width:60rem){
  .entrada-cifra{grid-template-columns:1fr;gap:2rem}
  .precio-suelto{position:static}
  .lista-dos,.dos-columnas{grid-template-columns:1fr;gap:1.35rem}
}

/* ---------- el momento interactivo: la cuenta entera ---------- */
.cuenta{
  margin-top:2.75rem;border-top:2px solid var(--tono);
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3rem;
  padding-top:2rem;align-items:start;
}
.cuenta-mandos{display:grid;gap:2rem}

.cuenta-planes{border:0;padding:0;margin:0}
.cuenta-planes legend{
  padding:0;font-size:.86rem;font-weight:600;color:var(--tono-suave);
  margin-bottom:.7rem;letter-spacing:.02em;
}
.cuenta-botones{display:flex;gap:0}
.cuenta-planes button{
  flex:1;padding:.85rem .75rem;border:2px solid var(--filete-fuerte);
  border-right-width:0;font-weight:600;font-size:.98rem;line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  color:var(--tono-suave);
  transition:background-color var(--t-rapido) var(--firme),
             color var(--t-rapido) var(--firme),
             border-color var(--t-rapido) var(--firme);
}
.cuenta-planes button:last-child{border-right-width:2px}
.cuenta-planes button span{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.cuenta-planes button:hover{color:var(--tono);border-color:var(--tono)}
.cuenta-planes button[aria-pressed="true"]{
  background:var(--rojo);border-color:var(--rojo);color:var(--sobre-rojo);
}
.cuenta-planes button[aria-pressed="true"] + button{border-left-color:var(--rojo)}
.cuenta-mandos{gap:1.6rem}

.cuenta-rango label{display:block;font-size:.99rem;margin-bottom:.9rem;color:var(--tono-suave)}
.cuenta-rango label strong{color:var(--tono);font-family:var(--display);font-weight:800;font-size:1.2em;letter-spacing:-.02em}
.cuenta-rango input[type="range"]{
  width:100%;appearance:none;background:transparent;margin:0;cursor:pointer;
}
.cuenta-rango input[type="range"]::-webkit-slider-runnable-track{
  height:4px;background:var(--filete-fuerte);
}
.cuenta-rango input[type="range"]::-moz-range-track{height:4px;background:var(--filete-fuerte)}
.cuenta-rango input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:1.6rem;height:1.6rem;margin-top:-.7rem;
  background:var(--rojo);border:3px solid var(--fondo);border-radius:50%;
}
.cuenta-rango input[type="range"]::-moz-range-thumb{
  width:1.6rem;height:1.6rem;background:var(--rojo);
  border:3px solid var(--fondo);border-radius:50%;
}
.cuenta-marcas{
  display:flex;justify-content:space-between;margin-top:.6rem;
  font-size:.8rem;color:var(--tono-suave);font-variant-numeric:tabular-nums;
}

/* las dos tintas de la salida se registran conforme avanza el control */
.cuenta-salida{
  position:relative;padding:1.5rem 1.75rem;background:var(--fondo-alt);
  --avance:.4;
}
.cuenta-salida::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rojo);
  transform:scaleY(calc(.28 + var(--avance) * .72));transform-origin:top;
  transition:transform var(--t-medio) var(--suave);
}
.cuenta-total .cifra{display:block;line-height:.9}
.cuenta-total .periodo,.cuenta-media .periodo{
  display:block;font-size:.94rem;color:var(--tono-suave);margin-top:.4rem;
}
.cuenta-media{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--filete)}
.cuenta-media [data-total-iva]{
  font-family:var(--display);font-weight:800;font-size:1.9rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cuenta-media [data-media]{
  font-family:var(--display);font-weight:800;font-size:1.9rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.cuenta [data-desglose]{grid-column:1 / -1;max-width:46rem;margin:0}

@media (max-width:60rem){
  .cuenta{grid-template-columns:1fr;gap:2rem}
}

/* el "+ IVA" pegado a cada cifra, sin robarle protagonismo */
.iva{
  font-family:var(--cuerpo);font-weight:400;font-size:.68em;
  color:var(--tono-suave);letter-spacing:0;white-space:nowrap;
}
.tira-datos li{display:inline-flex;align-items:baseline;gap:.45rem}

/* ---------- ajustes de ritmo vertical, vistos en pantalla ---------- */
h1 + .guia,h2 + .guia,h1 + p,h2 + p,h3 + p{margin-top:1.15rem}
.portada h1 + .guia,.portada .mega + .guia{margin-top:1.6rem}
.legal h1 + .fecha{margin-top:.9rem}

/* las dos ofertas son hermanas: los botones se alinean aunque el texto sea desigual */
.oferta{display:flex;flex-direction:column}
.oferta p{flex:1}
.oferta .btn{align-self:flex-start}

/* lo mismo con los tres planes */
.plan{display:flex;flex-direction:column}
.plan > p{flex:0 0 auto}
.plan .lista-registro{margin-top:auto;padding-top:.5rem}

/* ---------- portada: la trama de imprenta como fondo, cero peso ---------- */
.portada-trama{overflow:hidden}
.portada-trama::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background-image:radial-gradient(circle,var(--rojo) 1.15px,transparent 1.15px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgb(0 0 0 / .5) 45%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgb(0 0 0 / .5) 45%,transparent 100%);
  opacity:.22;pointer-events:none;
}
.portada-trama > .limite{position:relative;z-index:1}

/* antefirma: categoria real, no antetitulo decorativo */
.antefirma{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.9rem;font-weight:600;letter-spacing:.02em;
  color:var(--acento-texto);margin-bottom:1.35rem;max-width:none;
}
.antefirma svg{width:1.05rem;height:1.05rem;flex:none;color:var(--rojo)}
.antefirma-clara{color:var(--rojo-claro)}
.antefirma-clara svg{color:var(--rojo-claro)}

/* la tira de datos, con mas peso: cuatro columnas con filete */
.tira-datos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:3rem;padding-top:0;border-top:2px solid var(--texto);
}
.tira-datos li{
  display:block;padding:1.15rem 1.5rem 0;
  border-right:1px solid var(--borde);
}
.tira-datos li:first-child{padding-left:0}
.tira-datos li:last-child{border-right:0}
.tira-datos b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,1.1rem + 1.5vw,2.4rem);
  letter-spacing:-.03em;line-height:1;display:inline-block;
}
.tira-datos .pie-dato{
  display:block;font-size:.94rem;color:var(--tono-suave);margin-top:.5rem;
  max-width:16rem;
}

/* rejilla de oficios */
.oficios{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:3rem;border-top:1px solid var(--filete);
}
.oficios > li{
  padding:1.6rem 1.75rem 1.6rem 0;
  border-right:1px solid var(--filete);border-bottom:1px solid var(--filete);
}
.oficios > li:nth-child(3n){border-right:0}
.oficios > li:nth-child(n+4){border-bottom:0}
.oficios > li:nth-child(3n+1){padding-left:0}
.oficios > li:not(:nth-child(3n+1)){padding-left:1.75rem}
.oficios .rot{
  font-family:var(--display);font-weight:800;font-size:1.15rem;
  letter-spacing:-.02em;color:var(--tono);display:block;margin-bottom:.5rem;
}
.oficios p{font-size:.99rem;color:var(--tono-suave);max-width:24rem}

@media (max-width:60rem){
  .tira-datos{grid-template-columns:1fr 1fr}
  .tira-datos li{border-bottom:1px solid var(--borde);padding:1.15rem 1.25rem 1.15rem 0}
  .tira-datos li:nth-child(2n){border-right:0;padding-right:0}
  .tira-datos li:nth-child(n+3){border-bottom:0}
  .oficios{grid-template-columns:1fr 1fr}
  .oficios > li{padding:1.4rem 1.4rem 1.4rem 0 !important;border-bottom:1px solid var(--filete)}
  .oficios > li:nth-child(2n){border-right:0}
  .oficios > li:nth-child(n+5){border-bottom:0}
}
@media (max-width:40rem){
  .tira-datos{grid-template-columns:1fr}
  .tira-datos li{border-right:0;border-bottom:1px solid var(--borde);padding:1rem 0}
  .tira-datos li:last-child{border-bottom:0}
  .oficios{grid-template-columns:1fr}
  .oficios > li{border-right:0;padding:1.25rem 0 !important}
  .oficios > li:nth-child(n+5){border-bottom:1px solid var(--filete)}
  .oficios > li:last-child{border-bottom:0}
}

/* ---------- fichas de lo que esta en camino ---------- */
.camino{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:3rem;border-top:2px solid var(--tono);
}
.camino > li{
  padding:1.75rem 1.9rem 0 0;border-right:1px solid var(--filete);
}
.camino > li:not(:first-child){padding-left:1.9rem}
.camino > li:last-child{border-right:0;padding-right:0}
.camino .estado{
  display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--sobre-rojo);background:var(--rojo);
  padding:.28rem .6rem;margin-bottom:1rem;
}
.camino > li:last-child .estado{
  background:transparent;color:var(--tono-suave);
  border:1px solid var(--filete-fuerte);padding:.2rem .55rem;
}
.camino .rot{
  font-family:var(--display);font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;color:var(--tono);display:block;margin-bottom:.6rem;
}
.camino p{font-size:1rem;color:var(--tono-suave);max-width:26rem}

@media (max-width:60rem){
  .camino{grid-template-columns:1fr}
  .camino > li{
    border-right:0;border-bottom:1px solid var(--filete);
    padding:1.5rem 0 1.5rem 0 !important;
  }
  .camino > li:last-child{border-bottom:0}
}

/* ---------- las secciones de tinta componen a dos columnas ----------
   El titular ocupaba media pantalla y la otra media quedaba en blanco.
   Titular a la izquierda, entradilla a la derecha, y todo lo demas a lo ancho. */
@media (min-width:64rem){
  .cara-tinta.seccion > .limite[data-entra]{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,4vw,4.5rem);
    align-items:start;
  }
  .cara-tinta.seccion > .limite[data-entra] > h2{grid-column:1;margin:0}
  .cara-tinta.seccion > .limite[data-entra] > .guia{
    grid-column:2;margin-top:.45rem;max-width:34rem;
  }
  .cara-tinta.seccion > .limite[data-entra] > .antefirma{grid-column:1 / -1}
  .cara-tinta.seccion > .limite[data-entra] > *:not(h2):not(.guia):not(.antefirma){
    grid-column:1 / -1;
  }
}

/* ---------- el isotipo en filigrana, cerrando el bloque rojo ---------- */
.cara-rojo{overflow:hidden}
.cara-rojo .filigrana{
  position:absolute;right:-3.5%;bottom:-38%;
  width:clamp(16rem,30vw,26rem);height:auto;
  opacity:.11;pointer-events:none;
  filter:brightness(0) invert(1);
}
.cara-rojo > .limite{position:relative;z-index:1}
@media (max-width:48rem){
  .cara-rojo .filigrana{right:-14%;bottom:-30%;width:14rem;opacity:.13}
}

/* la segunda banda es mas baja, para que no compita con la primera */
.banda-corta img{height:clamp(8rem,17vw,13rem)}

/* ===== marca del hero =====================================================
   El isotipo a gran escala, cortado a sangre por el borde derecho, impreso a
   dos tintas: la plancha oscura entra desplazada y se registra bajo la roja.
   Es la traduccion del hero de la web anterior, que tenia el isotipo en 3D,
   al lenguaje de tinta plana sobre papel.
   PARA REVERTIR: borrar este bloque y el <div class="marca-hero"> de p-inicio.html
   ========================================================================= */
.marca-hero{display:none}

@media (min-width:72rem){
  .marca-hero{
    display:block;position:absolute;
    right:clamp(-5rem,-2.9vw,-1rem);
    top:44%;translate:0 -50%;
    width:clamp(17.5rem,25vw,24.5rem);
    aspect-ratio:866 / 1000;
    pointer-events:none;
  }
  .marca-hero .capa{
    position:absolute;inset:0;width:100%;height:auto;
  }
  /* la plancha oscura, debajo */
  .marca-hero .capa-tinta{filter:brightness(0) saturate(0);opacity:.92}
  /* la roja, encima y en su sitio */
  .marca-hero .capa-rojo{opacity:.97}
}

/* el registro al cargar: solo si nadie ha pedido menos movimiento */
@media (min-width:72rem) and (prefers-reduced-motion:no-preference){
  .marca-hero .capa-tinta{
    animation:registrar-marca 1.15s var(--suave) .3s both;
  }
  .marca-hero .capa-rojo{
    animation:entrar-marca .9s var(--suave) .1s both;
  }
}
@keyframes registrar-marca{
  from{transform:translate(-4.2%,3.2%)}
  to{transform:translate(0,0)}
}
@keyframes entrar-marca{
  from{opacity:0}
  to{opacity:.97}
}

/* con el titular a tres lineas, se le deja sitio para que no se pisen */
@media (min-width:72rem){
  .portada-marca .mega{max-width:min(13ch,66%)}
  .portada-marca .guia{max-width:34rem}
  .portada-marca .tira-datos{position:relative;z-index:1}
}