/* Mind EduSoft — hoja base del sitio. Direccion A+C del lienzo de diseno.
   Tipografia: Bricolage Grotesque (titulares) + Work Sans (texto), servidas
   desde el propio dominio. Colores: los del sistema de diseno. */

/* ---------- Tipografias propias (variables: un archivo por familia) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("fuentes/bricolage-grotesque-latin.woff2") format("woff2");font-weight:200 800;font-display:swap;
  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:"Bricolage Grotesque";src:url("fuentes/bricolage-grotesque-latin-ext.woff2") format("woff2");font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Work Sans";src:url("fuentes/work-sans-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;
  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:"Work Sans";src:url("fuentes/work-sans-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --fondo:#f4f8ff; --tinta:#0a1733; --tinta-suave:#475569;
  --azul:#0c6dff; --azul-texto:#0b66f0; --azul-claro:#2b7fff; --teal:#06e0bd; --amarillo:#f2c230;
  --hondo:#0a1733; --sobre-hondo:#eaf1ff; --sobre-hondo-suave:#a2abbe;
  --linea:#dbe4f3; --blanco:#fff;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --texto:"Work Sans",system-ui,sans-serif;
  --ancho:1480px; --margen:clamp(20px,4.4vw,64px);

  /* Escala fluida. El minimo de cada token es el tamano que el sitio ya tenia,
     asi que en el movil nada se encoge; lo que cambia es que ahora CRECE hasta
     1920px. Antes el texto se quedaba en 15 y 16px en cualquier pantalla y en un
     monitor grande el sitio se veia pequeno. */
  --fs-label:clamp(13px,12.75px + .065vw,14px);
  --fs-small:clamp(15px,14.75px + .065vw,16px);
  --fs-body:clamp(16px,15.49px + .131vw,18px);
  --fs-body-lg:clamp(17px,16.24px + .196vw,20px);

  /* Radios. El sitio venia con esquinas rectas en todo; una curvatura corta y
     consistente quita dureza sin volverlo blando. Se cambia aqui y cambia en
     todo el sitio. */
  --radio-s:8px; --radio-m:12px; --radio-l:20px;

  /* Espaciado. LA ESCALA MANDA: estos diez pasos y ningun otro.
     Son los mismos, y con el mismo nombre, que los del sistema de diseno en
     Claude Design (project/tokens.json): space-N donde N es el valor / 4.
     Se midio el 27-sep y el 39% de los huecos del sitio caia fuera de escala,
     con 33 valores distintos; convivian 12px y 14px haciendo el mismo trabajo.
     Por eso ya no se escriben pixeles a pelo: se escribe el token.
     La comprobacion es `python3 herramientas/auditar_espacios.py`. */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-12:48px;
  --space-16:64px; --space-24:96px;

  /* Profundidad: la jerarquia la dan la superficie, el borde y el espacio.
     La sombra se reserva para lo que de verdad flota sobre la pagina. */
  --sombra-0:none;
  --sombra-1:0 1px 2px rgba(10,23,51,.04);
  --sombra-2:0 10px 30px rgba(10,23,51,.08);
  --sombra-3:0 24px 60px rgba(10,23,51,.16);
  --anillo:0 0 0 3px rgba(12,109,255,.22);

  /* Color por tipo de producto: impreso, digital, los dos juntos, institucional.
     Es una clave de lectura, no adorno: el mismo color identifica al producto en
     el panel del menu, en el catalogo y en su pagina. */
  --tipo-impreso:var(--azul);
  --tipo-digital:var(--teal);
  --tipo-kit:var(--amarillo);
  --tipo-institucional:var(--tinta);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Fondo PLANO a proposito. Se probo el degradado vertical que proponia la
   direccion Editorial Activa y salio mal: con el centro de la pagina en blanco,
   las secciones blancas dejaban de recortarse y la portada se leia como una sola
   sabana sin bloques. El contraste entre secciones lo tiene que dar la seccion,
   no el cuerpo. */
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--texto);
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.9;margin:0}
p{margin:0}
a{color:var(--azul)}
a:hover{color:var(--tinta)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.saltar{position:absolute;left:-9999px;color:var(--tinta);text-decoration:none}
.saltar:focus{left:var(--margen);top:12px;z-index:50;background:var(--tinta);color:var(--fondo);padding:var(--space-3) var(--space-4)}
.env{width:100%;max-width:var(--ancho);margin:0 auto;padding-inline:var(--margen)}
/* Oculto a la vista pero legible por un lector de pantalla. `clip` esta
   obsoleto pero se deja por los navegadores viejos; el que manda es
   clip-path, que es el sustituto estandar. */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Piezas ---------- */
.kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-texto);margin:0 0 var(--space-5)}
.marca{background:var(--amarillo);color:var(--tinta);padding:0 .14em;display:inline-block}
.marca-teal{background:var(--teal);color:var(--tinta);padding:0 .14em;display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;
  padding:var(--space-4) var(--space-8);font-family:var(--texto);font-size:var(--fs-body);font-weight:600;
  text-decoration:none;border:2px solid transparent;border-radius:var(--radio-s);cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,opacity .2s ease}
.btn:hover{opacity:.88}
.btn-1{background:var(--azul);color:#fff}
.btn-1:hover{color:#fff}
.btn-2{background:none;border-color:var(--tinta);color:var(--tinta)}
.btn-3{background:var(--tinta);color:var(--fondo)}
.btn-3:hover{color:var(--fondo)}
.enlace{position:relative;text-decoration:none;color:inherit}
.enlace::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--azul);opacity:0;transition:opacity .2s ease}
.enlace:hover::after{opacity:1}
/* Dónde estoy: bloque amarillo bajo la entrada, el mismo recurso que la marca usa
   en los titulares. Un subrayado fino se confundía con el de pasar el ratón. */
.menu a[aria-current="page"]{position:relative;color:var(--tinta)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-6px;
  height:6px;background:var(--amarillo);opacity:1;z-index:-1;transition:none}
.menu.abierto a[aria-current="page"]::after{left:-8px;right:auto;width:6px;top:12px;bottom:12px;height:auto}

/* ---------- Cabecera ---------- */
/* Fija arriba: el botón de Comprar vive aquí y no puede irse con el scroll.
   La línea inferior solo aparece cuando la página se ha movido, para no dibujar
   un borde sobre la portada. */
.cab{position:sticky;top:0;z-index:40;background:var(--fondo);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.cab.fija{border-bottom-color:var(--linea)}
.cab .env{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding-block:var(--space-6);transition:padding-block .2s ease}
.cab.fija .env{padding-block:var(--space-3)}
/* Que un enlace con ancla no deje el destino debajo de la cabecera */
:target,[id]{scroll-margin-top:var(--space-24)}
@media (prefers-reduced-motion:reduce){.cab,.cab .env{transition:none}}
/* min-height 44px: el logo es el enlace a la portada y en el movil se pulsa.
   Medido: 34px sin esto. Con padding harian falta 5px, que no es un paso
   de la escala; min-height llega igual y no rompe el ritmo. */
.logo{display:flex;align-items:center;gap:var(--space-3);min-height:44px;
  font-family:var(--display);font-size:21px;font-weight:800;
  letter-spacing:-.02em;color:var(--tinta);text-decoration:none}
.logo img{width:34px;height:34px}
.menu{display:flex;align-items:center;gap:var(--space-6)}
.menu a{font-size:14px;font-weight:600}
.menu .btn{min-height:44px;padding:var(--space-3) var(--space-6);font-size:14px}
.abrir-menu{display:none}

/* ═══ Productos: una entrada en el menú y un panel con los cuatro ═══════
   Antes cada producto tenía su propia entrada y el menú llegaba a siete. Es el
   patrón de Ediciones Norma («Sistemas Educativos»), Santillana y Nacho Lee:
   una entrada agrupa y cada producto conserva su página.
   El panel se abre con el ratón, con el tabulador (:focus-within) y con el
   botón. Los dos primeros no necesitan JS a propósito. */
.despl{display:flex;align-items:center;gap:var(--space-1)}
/* 44px de area tactil aunque el icono siga siendo de 14: el boton es
   transparente, asi que se ve igual y se puede pulsar con el dedo. */
.despl-flecha{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;background:none;color:var(--tinta);cursor:pointer;border-radius:var(--radio-s)}
.despl-flecha svg{transition:transform .18s ease}
.despl:hover .despl-flecha svg,
.despl:not(.con-js):focus-within .despl-flecha svg,
.despl-flecha[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Anclado al .env de la cabecera, no a la entrada: centrado en el ancho del
   contenido y sin salirse por la derecha (con 980px se salía 35px).
   1220px es lo que piden CINCO tarjetas conservando los 223px de ancho útil
   que ya tenían cuando eran cuatro: 5x223 + 4 huecos de 16 + 40 de relleno. */
.panel{position:absolute;top:calc(100% + 10px);right:0;left:auto;
  width:min(1220px,100%);
  background:var(--blanco);border:1px solid var(--linea);
  box-shadow:0 24px 60px rgba(10,23,51,.16);padding:var(--space-5);z-index:50;
  display:none}
/* El hueco entre la entrada y el panel se cubre para que el ratón no lo pierda */
.panel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.despl:hover .panel,
.despl:not(.con-js):focus-within .panel,
.panel.abierto{display:block}
/* Cerrado a mano (Escape o clic fuera) manda sobre el hover: si no, el panel
   se queda abierto mientras el puntero siga encima de la entrada. */
.despl.cerrado:hover .panel,.despl.cerrado .panel{display:none}

/* ── Clave de color por tipo de producto ──────────────────────────────────
   Cada producto lleva su color en el panel del menu, en el catalogo y en su
   pagina: azul lo impreso, turquesa lo digital, amarillo el kit y tinta lo
   institucional. Es para orientar, no para decorar: quien ya vio la tarjeta
   turquesa reconoce el videojuego sin leer el nombre. */
.t-impreso{--acento:var(--tipo-impreso)}
.t-digital{--acento:var(--tipo-digital)}
.t-kit{--acento:var(--tipo-kit)}
.t-institucional{--acento:var(--tipo-institucional)}

.panel-rejilla{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
/* Subgrid para que las cinco tarjetas alineen foto, nombre, descripción y
   precio en la misma línea aunque los textos tengan distinto largo. */
@supports (grid-template-rows:subgrid){
  .panel-rejilla{grid-template-rows:auto auto 1fr auto}
  .prod{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:var(--space-1)}
}
.prod{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2);text-decoration:none;
  color:var(--tinta);border:1px solid transparent;transition:border-color .15s,background .15s}
.prod:hover,.prod:focus-visible{background:var(--fondo);border-color:var(--linea);color:var(--tinta)}
.prod img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--fondo);
  border-radius:var(--radio-s);border-top:3px solid var(--acento,transparent)}
.prod b{font-family:var(--display);font-size:16px;line-height:1.15;letter-spacing:-.02em;margin-top:var(--space-1)}
.prod span{font-size:var(--fs-label);line-height:1.4;color:var(--tinta-suave)}
.prod em{font-style:normal;font-weight:700;font-size:15px;color:var(--azul-texto);margin-top:auto;padding-top:var(--space-1)}
.prod .prod-medida{color:var(--tinta-suave)}

/* Por debajo de 1280px las cinco columnas dejan tarjetas de ~170px: van a dos,
   y cinco tarjetas en dos columnas ocupan TRES filas. */
@media (max-width:1280px){
  .panel{width:min(620px,100%)}
  .panel-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  @supports (grid-template-rows:subgrid){
    .panel-rejilla{grid-template-rows:repeat(3,auto auto 1fr auto)}
  }
}
.panel-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-top:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--fondo);border:1px solid var(--linea);
  font-size:14px;color:var(--tinta);text-decoration:none}
.panel-pie b{font-family:var(--display);letter-spacing:-.02em}
.panel-pie:hover,.panel-pie:focus-visible{background:var(--hondo);border-color:var(--hondo);color:var(--sobre-hondo)}
@media (prefers-reduced-motion:reduce){.despl-flecha svg,.prod{transition:none}}

/* ---------- Portada ---------- */
.portada{position:relative;overflow:hidden;padding-bottom:var(--space-16)}
.rejilla{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:40px 40px;opacity:.9}
.portada .env{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:0 var(--space-12);align-items:start;padding-top:var(--space-12)}
.texto{grid-column:1;grid-row:1}
.composicion{grid-column:2;grid-row:1/span 2}
.sello{grid-column:1;grid-row:2}
.solo-ancho{display:inline}
.portada h1{font-size:clamp(52px,7.5vw,96px);line-height:.86;letter-spacing:-.045em}
.entradilla{margin-top:var(--space-8);font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--tinta-suave);max-width:46ch}
.acciones{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.composicion{position:relative}
.bloque-azul{position:absolute;right:calc(var(--margen)*-1);top:-50px;width:470px;height:470px;background:var(--azul)}
.cuadro-teal{position:absolute;left:-116px;top:380px;width:116px;height:116px;background:var(--teal)}
.lamina{position:absolute;left:-170px;top:10px;width:150px;height:150px}
.composicion img{position:relative;width:520px;height:436px;object-fit:cover}
.banda{position:relative;width:520px;background:var(--teal);color:var(--tinta);
  padding:var(--space-4) var(--space-5);font-size:15px;font-weight:600}
.sello{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-12)}
.sello b{font-family:var(--display);font-size:52px;line-height:1;font-weight:800;letter-spacing:-.04em}
.sello span{width:40px;height:3px;background:var(--teal);display:block;flex:none}
.sello p{font-size:var(--fs-small);line-height:1.4;color:var(--tinta-suave);max-width:300px}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(var(--space-16),6vw,var(--space-24));position:relative} /* 56 suelto -> 64: el sistema llama space-16 al padding vertical de una seccion */
/* Superficies de seccion. El ritmo de la pagina se construye alternandolas:
   claro, blanco, hondo. Nunca dos iguales seguidas sin una linea que las separe. */
.seccion-clara{background:var(--fondo)}
.seccion-blanca{background:var(--blanco)}
/* Cuando dos secciones comparten superficie, una linea marca donde acaba una */
.seccion-clara + .seccion-clara,.seccion-blanca + .seccion-blanca{
  border-top:1px solid var(--linea)}
.seccion-hondo{background:var(--hondo);color:var(--sobre-hondo)}
.seccion-hondo .kicker{color:var(--teal)}
.seccion-hondo p{color:var(--sobre-hondo-suave)}
.enca{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-12);
  align-items:start;margin-bottom:var(--space-8)}
.enca h2{margin:0}
.enca p{margin-top:var(--space-2)}
.enca h2{font-size:clamp(38px,5.4vw,68px);max-width:16ch}
.enca > :only-child{grid-column:1/-1}
/* Antetitulo + titulo van en la misma celda: si se cuentan como dos piezas, el
   titular se va a la columna del texto y la cabecera se descuadra. */
.enca > div > .kicker{margin-bottom:var(--space-3)}
.enca p{font-size:var(--fs-body);line-height:1.6;color:var(--tinta-suave);max-width:38ch}
.seccion-hondo .enca p,.cierre .enca p{color:var(--sobre-hondo-suave)}

/* La cabecera de seccion seguia en DOS columnas en el movil. Medido a 390px: al
   titular le quedaban 168px de caja y «COGNITIVAS» ocupa 219 — en /blog/ y en
   /ciencias-cognitivas/ el titular ya se salia de su columna, y en una cabecera
   de tres piezas el texto se iba fuera de la pantalla (469px de documento). */
@media (max-width:880px){
  .enca{grid-template-columns:1fr;gap:var(--space-4)}
  .enca h2{max-width:none}
}

/* Retícula de productos 7/5 */
.piezas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6)}
.pieza-a{grid-column:span 7;background:var(--amarillo);border-radius:var(--radio-l);padding:var(--space-8);display:flex;flex-direction:column;position:relative;overflow:hidden}
.col-b{grid-column:span 5;display:flex;flex-direction:column;gap:var(--space-6)}
.pieza-b{flex-grow:1;background:var(--hondo);color:var(--sobre-hondo);padding:var(--space-8);display:flex;flex-direction:column}
.pieza-b .kicker{color:var(--teal)}
.pieza-b p{color:var(--sobre-hondo-suave)}
.pieza-c{background:var(--teal);color:var(--tinta);padding:var(--space-6) var(--space-8);display:flex;flex-direction:column;gap:var(--space-1)}
.pieza-a h3{font-size:clamp(38px,4vw,50px);line-height:.92;letter-spacing:-.035em;max-width:9ch;margin-bottom:var(--space-3)}
.pieza-b h3{font-size:40px;line-height:.95;letter-spacing:-.035em;margin-bottom:var(--space-3)}
.lista{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:auto;font-size:var(--fs-small);line-height:1.5}
.lista li{list-style:none}
.lista ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
/* El precio bajo de 54 a 44: en la portada la tarjeta amarilla se leia como
   un cartel de precio antes que como un producto. */
.precio{font-family:var(--display);font-size:clamp(34px,3.4vw,44px);line-height:1;font-weight:800;letter-spacing:-.04em}
/* Los dos precios de la columna derecha llevaban el tamano en un style= del
   HTML (42px y 48px), asi que se saltaron esa bajada: el combo quedo en 48,
   el numero mas grande del sitio, y encima fijo en el movil. Ahora van por
   clase y por jerarquia: manda el producto (44), el combo es venta cruzada. */
/* REGLA DE LAS TRES TARJETAS: en cada una manda el NOMBRE del producto y el
   precio va debajo, dentro del MISMO bloque y siempre MAS PEQUENO que el
   nombre. Es el orden del panel del menu (foto, nombre, descripcion, precio).
   Medido antes: Pegassus tenia el precio en 42 y el nombre en 40, y la tarjeta
   teal era un precio SIN producto: ningun nombre en toda la pieza. */
.pieza-a .precio{font-size:clamp(28px,3.4vw,44px)}   /* nombre 33-50 */
.pieza-b .precio{font-size:clamp(26px,2.6vw,36px)}   /* nombre 40 */
/* Sobre el teal, el antetitulo azul da 2,97:1. Es la regla del sistema:
   sobre un acento se escribe en tinta, nunca en azul ni en blanco. */
.pieza-c .kicker{color:var(--tinta);margin-bottom:var(--space-3)}
.pieza-c h3{font-size:clamp(26px,2.6vw,32px);line-height:.95;letter-spacing:-.035em}
.pieza-c .precio{font-size:clamp(22px,2.1vw,26px)}   /* nombre 26-32 */
.pieza-c-desc{font-size:var(--fs-small);margin-bottom:auto}
/* El pie de la teal: sobre fondo claro la linea de 30% se perdia. */
.pieza-c .pie-pieza{margin-top:var(--space-4);padding-top:var(--space-4);border-top-color:rgba(20,18,16,.22)}
.pieza-c .btn-3{color:var(--teal)}
.pie-pieza .enlace{display:inline-flex;align-items:center;min-height:44px}
.pie-pieza{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:2px solid rgba(20,18,16,.30);flex-wrap:wrap}
.pieza-b .pie-pieza{border-top-color:rgba(162,171,190,.35)}
.antes{font-size:14px;font-weight:600;text-decoration:line-through;color:#07564a}
.dibujo{position:absolute;right:26px;top:26px}

/* Método: tres pasos */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.paso{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-m);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.paso b{font-family:var(--display);font-size:52px;line-height:1;font-weight:800;color:var(--azul);letter-spacing:-.04em}
.paso h3{font-size:24px;line-height:1.1;letter-spacing:-.02em}
.paso p{font-size:var(--fs-small);color:var(--tinta-suave)}

/* Cierre — en claro: medido, las páginas terminaban en un bloque oscuro corrido de
   hasta el 46% de su altura (cierre + banda + pie). Ahora la zona oscura se limita
   a la banda de marca y el pie. */
.cierre{background:var(--blanco);color:var(--tinta);border-top:1px solid var(--linea)}
.cierre h2{font-size:clamp(38px,5.4vw,68px);max-width:14ch;margin-bottom:var(--space-6)}
.cierre p{color:var(--tinta-suave);max-width:52ch;margin-bottom:var(--space-8)}

/* Banda de marca — el Cover del sistema de diseno */
.marca-banda{position:relative;background:var(--hondo);overflow:hidden;min-height:320px;display:flex;align-items:center}
.marca-banda .env{position:relative;z-index:2}
.marca-texto{max-width:52%}
.marca-nombre{font-family:var(--display);font-size:clamp(52px,6.9vw,88px);line-height:.92;font-weight:800;
  letter-spacing:-.04em;color:var(--sobre-hondo);margin:0}
.marca-lema{margin-top:var(--space-3);font-size:14px;font-weight:500;color:var(--sobre-hondo-suave)}
.marca-formas{position:absolute;right:0;top:0;height:100%;width:auto;z-index:1}

/* Pie */
.pie{background:var(--hondo);color:var(--sobre-hondo);padding-block:var(--space-12);font-size:14px}
.pie a{color:var(--sobre-hondo);text-decoration:none}
.pie a:hover{color:var(--teal)}
.pie-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8)}
.pie h4{font-family:var(--texto);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:var(--space-3)}
.pie ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.pie-legal{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid rgba(162,171,190,.25);
  display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;color:var(--sobre-hondo-suave);font-size:13px}
.redes{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.redes a{width:44px;height:44px;border:1px solid rgba(162,171,190,.45);display:flex;align-items:center;justify-content:center}
.redes svg{width:20px;height:20px}

/* ---------- Movimiento: un solo gesto, todo quieto antes de 1 s ---------- */
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes velo{from{opacity:0}to{opacity:1}}
.an{animation:entrar .45s ease-out both}
.an-1{animation-delay:.06s}.an-2{animation-delay:.12s}.an-3{animation-delay:.20s}
.an-4{animation-delay:.26s}.an-5{animation-delay:.32s}.an-6{animation-delay:.40s}.an-7{animation-delay:.46s}
.velo{animation:velo .6s ease-out both}

@media (prefers-reduced-motion:reduce){
  .an,.velo{animation:none!important}
  .btn,.enlace::after{transition:none}
}

/* ---------- Adaptacion ---------- */
@media (max-width:1100px){
  .portada .env{grid-template-columns:1fr;gap:var(--space-8)}
  .texto,.composicion,.sello{grid-column:1;grid-row:auto}
  .composicion{max-width:520px}
  .composicion img,.banda{width:100%}
  .bloque-azul{right:-20px;top:-28px;width:70%;height:78%}
  .cuadro-teal{left:-20px;top:auto;bottom:-28px;width:72px;height:72px}
  .lamina{display:none}
  .piezas{grid-template-columns:1fr}
  .pieza-a,.col-b{grid-column:auto}
  .pasos{grid-template-columns:1fr}
  .pie-cols{grid-template-columns:1fr 1fr}
  .marca-texto{max-width:60%}
}
/* El menú se pliega ANTES que el resto del sitio. Medido de nuevo tras agrupar
   los productos en una sola entrada: con SIETE entradas a 920px quedaban 24px
   entre el logotipo y el menú; con CINCO, a 941px sobran 204px. El pliegue baja
   de 940 a 800, donde aún quedan unos 60px de holgura. */
@media (max-width:800px){
  .menu{display:none}
  .menu.abierto{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--fondo);border-top:1px solid var(--linea);
    border-bottom:1px solid var(--linea);box-shadow:0 12px 24px rgba(10,23,51,.10);
    padding:8px var(--margen) 20px;z-index:20}
  .menu.abierto a{padding:var(--space-4) 0;border-bottom:1px solid var(--linea);font-size:16px}
  .menu.abierto .btn{margin-top:var(--space-4);border-bottom:0}
  .abrir-menu{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    background:none;border:2px solid var(--tinta);cursor:pointer}
  .cab .env{position:relative}

  /* Con el menú plegado, los productos van a la vista dentro de él: un
     desplegable dentro de un desplegable son dos toques para llegar a lo mismo. */
  .despl{display:block}
  .despl > .enlace{display:block;padding:var(--space-4) 0;border-bottom:1px solid var(--linea);font-size:16px}
  .despl-flecha{display:none}
  .panel{display:block;position:static;translate:none;width:auto;padding:var(--space-3) 0 var(--space-1);
    border:0;box-shadow:none;background:none}
  .panel::before{display:none}
  .panel-rejilla{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .prod{padding:var(--space-2);border-color:var(--linea);background:var(--blanco)}
  .prod b{font-size:15px}
  .prod img{aspect-ratio:16/10}
  .panel-pie{margin-top:var(--space-3)}
}
@media (max-width:680px){
  .sello b{font-size:38px}
  .solo-ancho{display:none}
  .pieza-a,.pieza-b{padding:var(--space-6)}
  /* «MATEMÁTICAS» a 38px pide 254px y el max-width:9ch dejaba la caja en 222:
     el titular se salía de la tarjeta amarilla. */
  .pieza-a h3{max-width:none;font-size:clamp(30px,8.4vw,38px)}
  .pie-cols{grid-template-columns:1fr}
  .marca-banda{min-height:0;padding-block:var(--space-8)}
  .marca-texto{max-width:none}
  .marca-formas{position:static;height:120px;width:100%;margin-top:var(--space-6)}
}

/* ═══ Páginas de venta ═══════════════════════════════════════════════════ */
.venta{position:relative;overflow:hidden;padding-bottom:clamp(40px,6vw,72px)}
/* El color del tipo llega tambien a la pagina del producto: quien entro pulsando
   la tarjeta turquesa aterriza en una pagina que se lo confirma. */
.t-impreso .venta::after,.t-digital .venta::after,
.t-kit .venta::after,.t-institucional .venta::after{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--acento);z-index:1}
[class*="t-"] .venta .kicker{color:var(--tinta-suave)}
.t-impreso .venta .kicker{color:var(--azul-texto)}
/* El ancho de la ficha se ajusta por página con --ficha. Antes iba en un
   style= dentro del HTML y, al ser inline, GANABA a la media query del móvil:
   la columna del texto se quedaba en 0px y el titular se salía de su caja. */
.venta .env{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--ficha,440px);
  gap:var(--space-8) var(--space-12);align-items:start;padding-top:var(--space-12)}
.venta .texto{grid-column:1;grid-row:1}
.venta .ficha{grid-column:2;grid-row:1/span 2}
.venta .incluye{grid-column:1;grid-row:2}
.venta h1{font-size:clamp(44px,6.4vw,80px);line-height:.88;letter-spacing:-.045em}
.venta .entradilla{margin-top:var(--space-6)}

/* Ficha de compra */
.ficha{background:var(--hondo);color:var(--sobre-hondo);padding:var(--space-8);overflow:hidden;
  border-radius:var(--radio-l)}
.ficha h2{font-family:var(--texto);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--space-4)}
.ficha .precio{color:var(--sobre-hondo)}
.ficha .sufijo{font-size:14px;font-weight:600;color:var(--sobre-hondo-suave);margin-left:var(--space-2)}
.ficha .nota{font-size:14px;color:var(--sobre-hondo-suave);margin-top:var(--space-1)}
.ficha hr{border:0;border-top:1px solid rgba(162,171,190,.35);margin:var(--space-6) 0}
/* Campos de formulario: un solo aspecto en todo el sitio */
.ficha label{display:block;font-size:var(--fs-label);font-weight:600;margin-bottom:var(--space-2)}
.ficha input[type="email"]{width:100%;min-height:52px;padding:var(--space-3) var(--space-4);font-family:var(--texto);
  font-size:16px;color:var(--tinta);background:var(--blanco);border:2px solid transparent}
.ficha input[type="email"]:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.ficha .ayuda{font-size:13px;line-height:1.5;color:var(--sobre-hondo-suave);margin-top:var(--space-2)}
.ficha .ayuda a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ficha .ayuda a:hover{color:var(--sobre-hondo)}
.ficha .btn{width:100%;margin-top:var(--space-4)}
.ficha .btn-2{border-color:var(--sobre-hondo-suave);color:var(--sobre-hondo)}
.pago-boton{margin-top:var(--space-4)}
.pago-boton:empty{margin:0}
.pago-aviso{margin-top:var(--space-3);font-size:14px;color:var(--sobre-hondo-suave)}
.pago-aviso:empty{display:none}
.pago-error{color:#ffb4a2}

/* ---------- Páginas de producto: el producto manda, el precio va debajo ----------
   Medido el 27-sep en /cartilla/: la tarjeta de compra empezaba en y=143 y la foto
   de la cartilla en y=507, o sea el precio flotaba POR ENCIMA del producto y hasta
   del titular; y su caja (440x542) era más grande que la propia cartilla (300x424).
   Es lo que él señaló: «no está en el mismo bloque del producto, es más grande que
   el producto y está más arriba que el producto».
   Se arregla en tres movimientos, y solo en las páginas que venden un producto
   (por eso la clase .venta-producto; servicios, empresas, nosotros y contacto usan
   .venta sin producto y no se tocan):
     1. la tarjeta baja a la MISMA fila que el producto (grid-row:2),
     2. adelgaza de 440 a 340 y el precio de 44 a 34,
     3. la imagen del producto crece hasta mandar en la escena. */
.venta-producto .env{grid-template-columns:minmax(0,1fr) var(--ficha,340px)}
.venta-producto .compra{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:var(--space-4)}
.venta-producto .ficha{padding:var(--space-6)}
.venta-producto .ficha .precio{font-size:clamp(26px,2.6vw,34px)}
.venta-producto .ficha h2{margin-bottom:var(--space-3);line-height:1.45}
.venta-producto .ficha hr{margin:var(--space-4) 0}
.venta-producto .con-figura{grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:var(--space-8);margin-top:0}
/* La cartilla es vertical y cabe al lado de la lista. La portada del videojuego y
   la foto del kit son APAISADAS: al mismo ancho quedaban más pequeñas que la
   tarjeta, así que en esas dos la imagen ocupa la columna entera y la lista baja. */
.venta-producto .con-figura-ancha{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-top:0;
  /* el cuadro de color de la figura asoma 16px a la derecha: sin este hueco
     se salía del contenedor y aparecía barra horizontal en /juego/ */
  padding-right:var(--space-4)}
/* .incluye.con-figura fija margin-top:var(--space-2) más abajo en la hoja y ganaba por orden;
   esos 8px dejaban la tarjeta 8px POR ENCIMA de la foto. */
.venta-producto .incluye.con-figura{margin-top:0}

/* El pie de la tarjeta (combo y WhatsApp) sale de la caja: es lo que la estiraba.
   Fuera sigue diciendo lo mismo, pero ya no engorda el precio. */
.bajo-ficha{font-size:14px;line-height:1.55;color:var(--tinta-suave)}
/* Al salir de la tarjeta oscura, estos enlaces pasaron a fondo claro y el azul
   normal se quedo en 4,24:1. Sobre claro se usa --azul-texto = 4,73:1. */
.bajo-ficha a{color:var(--azul-texto)}
.bajo-ficha a:hover{color:var(--tinta)}
.bajo-ficha p{margin:0}
.bajo-ficha p + p{margin-top:var(--space-2)}
.bajo-ficha b{color:var(--tinta)}

@media (max-width:1100px){
  /* En una columna el orden es: titular, FOTO DEL PRODUCTO, precio, lista y el pie
     del precio. La foto va delante del precio —que es lo que él pedía— pero el
     precio sigue estando arriba, antes de la lista larga: así no hay que bajar
     media pantalla para saber cuánto cuesta, que fue la razón del orden anterior.
     `display:contents` suelta la foto y la lista como piezas sueltas de la rejilla
     para poder meter la tarjeta entre las dos. La especificidad sube a .venta.venta-producto
     porque más abajo hay otro bloque a 1100px que coloca .venta .ficha en la fila 2. */
  .venta.venta-producto .incluye{display:contents}
  .venta.venta-producto .texto{grid-column:1;grid-row:1}
  .venta.venta-producto .incluye > .figura{grid-column:1;grid-row:2;max-width:none;justify-self:stretch}
  .venta.venta-producto .compra{grid-column:1;grid-row:3}
  .venta.venta-producto .incluye > ul{grid-column:1;grid-row:4}
}

/* Datos sueltos bajo la portada de venta */
.datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-12)}
.dato b{display:block;font-family:var(--display);font-size:40px;line-height:1;font-weight:800;
  letter-spacing:-.04em;color:var(--azul)}
.dato span{display:block;font-size:14px;color:var(--tinta-suave);margin-top:var(--space-1)}

/* Qué incluye */
.incluye{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6)}
.incluye.con-figura{margin-top:var(--space-2)}
.con-figura ul{min-width:0}
.incluye li{list-style:none;display:flex;gap:var(--space-3);font-size:var(--fs-body);line-height:1.5}
.incluye ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.incluye svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--teal)}

/* Preguntas */
.preguntas{max-width:760px}
.preguntas details{border-top:1px solid var(--linea);padding:var(--space-5) 0}
.preguntas details:last-child{border-bottom:1px solid var(--linea)}
/* 8px arriba y abajo: el summary medía 29px y hay que pulsarlo en el móvil. */
.preguntas summary{cursor:pointer;padding-block:var(--space-2);font-size:18px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:var(--space-5);align-items:center}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";font-family:var(--display);font-size:28px;line-height:1;color:var(--azul)}
.preguntas details[open] summary::after{content:"–"}
.preguntas p{margin-top:var(--space-3);color:var(--tinta-suave);max-width:62ch}
/* Mismo caso que .bajo-ficha: --azul se queda en 4,24:1 sobre el fondo claro. */
.preguntas p a{color:var(--azul-texto)}

@media (max-width:1100px){
  .venta .env{grid-template-columns:1fr;gap:var(--space-8)}
  /* En el móvil el precio va ANTES de la lista: si no, hay que bajar media
     pantalla para saber cuánto cuesta. */
  .venta .texto{grid-column:1;grid-row:1}
  .venta .ficha{grid-column:1;grid-row:2}
  .venta .incluye{grid-column:1;grid-row:3}
  .datos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Segundo bloque del mismo pliegue (páginas de venta): mismo umbral que arriba. */
@media (max-width:800px){
  .menu{display:none}
  .menu.abierto{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--fondo);border-top:1px solid var(--linea);
    border-bottom:1px solid var(--linea);box-shadow:0 12px 24px rgba(10,23,51,.10);
    padding:8px var(--margen) 20px;z-index:20}
  .menu.abierto a{padding:var(--space-4) 0;border-bottom:1px solid var(--linea);font-size:16px}
  .menu.abierto .btn{margin-top:var(--space-4);border-bottom:0}
  .abrir-menu{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    background:none;border:2px solid var(--tinta);cursor:pointer}
  .cab .env{position:relative}
}
@media (max-width:680px){
  .ficha{padding:var(--space-6)}
    .datos{grid-template-columns:1fr;gap:var(--space-4)}
  .dato b{font-size:32px}
}

/* ═══ Tarjetas genéricas, sectores y canales ════════════════════════════ */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-m);padding:var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-3)}
.tarjeta h3{font-size:22px;line-height:1.1;letter-spacing:-.02em}
.tarjeta p{font-size:var(--fs-small);color:var(--tinta-suave)}
/* Todo lo que cae dentro de una seccion honda se aclara por sistema. Antes esto
   iba en 24 atributos style= repartidos por seis paginas, asi que cualquiera que
   anadiera una tarjeta nueva tenia que acordarse de copiarlos. */
.seccion-hondo :is(h2,h3,h4){color:var(--sobre-hondo)}
.seccion-hondo .tarjeta,.seccion-hondo .paso{background:rgba(255,255,255,.10);
  border-color:rgba(162,171,190,.35);color:var(--sobre-hondo)}
.seccion-hondo .paso p,.seccion-hondo .tarjeta p{color:var(--sobre-hondo-suave)}
.seccion-hondo .paso b{color:var(--teal)}
.seccion-hondo .sectores li{border-color:rgba(162,171,190,.45)}
.seccion-hondo .enlace{color:var(--teal)}
.seccion-hondo .tarjeta h3{color:var(--sobre-hondo)}
.seccion-hondo .tarjeta p{color:var(--sobre-hondo-suave)}

.sectores{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0;padding:0;list-style:none}
.sectores li{border:2px solid var(--tinta);padding:var(--space-3) var(--space-5);font-size:15px;font-weight:600}

.canales{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}
.canal{display:flex;gap:var(--space-4);align-items:flex-start}
.canal svg{flex:none;width:26px;height:26px;color:var(--teal);margin-top:2px}
.canal b{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:var(--space-1)}
.canal a,.canal span{font-size:var(--fs-body-lg);color:var(--sobre-hondo);text-decoration:none}
.canal a:hover{color:var(--teal)}

.cita{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);line-height:1.12;font-weight:800;
  letter-spacing:-.03em;max-width:20ch;margin:0}
.doscol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
@media (max-width:1100px){.doscol{grid-template-columns:1fr}}

/* ═══ Imágenes con tratamiento de marca ═════════════════════════════════ */
.figura{position:relative;margin:0;display:block}
.figura::before{content:"";position:absolute;right:-22px;top:-22px;width:58%;height:58%;
  background:var(--azul);z-index:0}
.figura.teal::before{background:var(--teal)}
.figura img{position:relative;z-index:1;width:100%;height:auto;display:block}
.figura figcaption{position:relative;z-index:1;background:var(--teal);color:var(--tinta);
  padding:var(--space-3) var(--space-5);font-size:15px;font-weight:600}
.figura.sin-bloque::before{display:none}

.con-figura{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--space-8);align-items:start}
.con-figura .figura::before{right:-16px;top:-16px}

.banda-figura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.banda-figura h3{font-size:clamp(26px,3vw,36px);line-height:1.05;margin-bottom:var(--space-4)}
.banda-figura p{color:var(--tinta-suave);font-size:var(--fs-body)}
.seccion-hondo .banda-figura p{color:var(--sobre-hondo-suave)}

@media (max-width:880px){
  /* El bloque que asoma se pasaba 2px del ancho de la pantalla en el móvil,
     y eso basta para que aparezca scroll horizontal. Medido, no supuesto. */
  .figura::before{right:-8px;top:-8px}
  .con-figura{grid-template-columns:1fr;gap:var(--space-6)}
  .con-figura .figura{max-width:260px}
  .banda-figura{grid-template-columns:1fr;gap:var(--space-6)}
}

/* ═══ Galería del videojuego ════════════════════════════════════════════
   Tira desplazable, SIN JavaScript: scroll-snap del navegador. Un carrusel con
   botones y temporizador obliga a esperar para ver la segunda imagen y casi
   nadie llega; aquí se ven dos de golpe, se arrastra con el dedo y se recorre
   con el teclado. Cada captura lleva debajo qué contenido matemático enseña. */
/* Sin minmax(0,…): con el 0 como minimo, las seis columnas se encogian hasta
   caber y la tira dejaba de desplazarse. */
.galeria{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,42vw,520px);
  gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--space-4);margin-top:var(--space-8);
  scrollbar-color:var(--linea) transparent}
.galeria::-webkit-scrollbar{height:8px}
.galeria::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px}
.galeria figure{scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.galeria img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radio-m);border:1px solid var(--linea);background:var(--hondo)}
.galeria figcaption{font-size:var(--fs-small);color:var(--tinta-suave);line-height:1.45}
.galeria figcaption b{display:block;color:var(--tinta);font-size:var(--fs-body);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:2px}
.seccion-hondo .galeria figcaption{color:var(--sobre-hondo-suave)}
.seccion-hondo .galeria figcaption b{color:var(--sobre-hondo)}
.seccion-hondo .galeria img{border-color:rgba(162,171,190,.35)}
/* Aviso de que la tira sigue: solo donde hace falta decirlo */
.galeria-pista{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);
  font-size:var(--fs-label);color:var(--tinta-suave)}
.seccion-hondo .galeria-pista{color:var(--sobre-hondo-suave)}
@media (prefers-reduced-motion:no-preference){.galeria{scroll-behavior:smooth}}

/* ═══ Ficha técnica del producto ════════════════════════════════════════
   Lo que un padre comprueba antes de comprar, junto y de un vistazo: icono,
   dato y la aclaración debajo. Patrón tomado de las fichas de espacios de la
   Fundación MAEX, que lo usa para capacidad y equipamiento. */
.ficha-tecnica{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-8) var(--space-12);margin-top:var(--space-8)}
.ft{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start}
/* El color del tipo va de FONDO del icono, no de trazo: en trazo fino, el
   turquesa sobre fondo claro se queda en 1,6:1 y el amarillo en 1,8, cuando el
   minimo para un elemento de interfaz es 3:1. Como superficie, con el trazo
   oscuro encima, el mismo color mide 10,5:1. */
/* `.ft .ft-icono` y no `.ft-icono` a secas: la regla de al lado, `.ft span`,
   tiene mas especificidad y le estaba imponiendo el gris del texto al trazo. */
.ft .ft-icono{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--radio-s);background:var(--acento,var(--azul));color:var(--tinta);
  margin-top:0}
/* Sobre el azul y sobre la tinta, el trazo va en claro */
.t-impreso .ft .ft-icono,.t-institucional .ft .ft-icono{color:var(--blanco)}
.ft svg{width:22px;height:22px}
.ft b{display:block;font-size:var(--fs-body);line-height:1.3;letter-spacing:-.01em}
.ft span{display:block;font-size:var(--fs-small);line-height:1.45;color:var(--tinta-suave);
  margin-top:2px}
/* Sobre fondo hondo el icono no puede ir en azul: ahi manda el turquesa */
.seccion-hondo .ft .ft-icono{background:var(--teal);color:var(--tinta)}
.seccion-hondo .ft span{color:var(--sobre-hondo-suave)}
@media (max-width:880px){
  .ficha-tecnica{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8)}
}
@media (max-width:520px){ .ficha-tecnica{grid-template-columns:1fr} }

/* ═══ Secuencia: el recorrido del papel a la pantalla ═══════════════════
   El componente que conecta los dos productos. Módulos unidos por una línea:
   la modularidad no es adorno, dice que hay un orden y que una cosa lleva a la
   siguiente. Se reutiliza en cualquier página donde haya que contar un proceso. */
.secuencia{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
/* Sin caja: un punto, la linea que lleva al siguiente y el texto debajo. La
   seccion anterior ya son tres tarjetas numeradas; repetir la misma forma dos
   veces seguidas hacia que la pagina se leyera como una sola lista larga. */
.secuencia-paso{position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  padding-top:var(--space-8)}
.secuencia-paso::before{content:"";position:absolute;top:13px;left:0;right:0;
  height:2px;background:var(--linea)}
.secuencia-paso::after{content:"";position:absolute;top:7px;left:0;width:14px;height:14px;
  border-radius:50%;background:var(--acento,var(--tinta-suave));
  box-shadow:0 0 0 4px var(--fondo)}
.secuencia-paso:last-child::before{background:linear-gradient(90deg,var(--linea) 0 40%,transparent 40%)}
.secuencia-paso h3{font-size:21px;line-height:1.1;letter-spacing:-.02em}
.secuencia-paso p{font-size:var(--fs-small);color:var(--tinta-suave);max-width:38ch}
.secuencia-num{display:none}
@media (max-width:880px){
  .secuencia{grid-template-columns:1fr;gap:var(--space-6)}
  .secuencia-paso{padding-top:0;padding-left:var(--space-8)}
  /* En una columna el recorrido baja: la linea se pone vertical */
  .secuencia-paso::before{top:0;bottom:calc(var(--space-6) * -1);left:6px;right:auto;width:2px;height:auto}
  .secuencia-paso:last-child::before{background:linear-gradient(180deg,var(--linea) 0 30%,transparent 30%)}
  .secuencia-paso::after{top:2px;left:0}
}

/* ═══ Catálogo de /productos/ ══════════════════════════════════════════
   Ficha ancha: la foto a la izquierda y el texto a la derecha, alternando el
   lado en las pares para que la página no sea una columna de lo mismo. */
/* La imagen va SIEMPRE primero y manda: es lo que vende. Antes alternaba de
   lado y en dos fichas de cuatro el texto se leía antes que el producto. */
.catalogo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.item{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radio-m);overflow:hidden}
.item::before{content:"";display:block;height:4px;background:var(--acento,var(--linea))}
.item-foto{display:block;background:var(--fondo)}
/* 3:2 en vez de 5:4: la imagen sigue mandando sobre el precio, pero la ficha
   entera medía 966px de alto y una tarjeta de producto no puede ocupar una
   pantalla completa. */
.item-foto img{width:100%;height:auto;object-fit:cover;aspect-ratio:3/2}
.item-texto{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8)}
/* El antetitulo hereda el color del tipo, salvo el amarillo y el turquesa, que
   sobre blanco no llegan a 4,5:1: esos dos se quedan en tinta suave. */
.t-impreso .item-texto .kicker{color:var(--azul-texto)}
.t-institucional .item-texto .kicker{color:var(--tinta)}
.item-texto h3{font-size:clamp(26px,2.6vw,34px);line-height:1.02}
.item-texto h3 a{color:var(--tinta);text-decoration:none}
.item-texto h3 a:hover{color:var(--azul-texto)}
.item-texto > p{font-size:var(--fs-body);color:var(--tinta-suave);max-width:52ch}
.item-lista{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.item-lista li{list-style:none;position:relative;padding-left:var(--space-6);font-size:var(--fs-small)}
.item-lista li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
  background:var(--teal)}
.item-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--linea)}
/* Jerarquía del catálogo: manda la imagen, después el nombre, y el precio al
   final. Medido: el precio heredaba los 54px de la página de producto y salía
   más grande que el nombre (34px), así que el número pesaba más que lo que se
   vende. Aquí baja a 30. En la página de cada producto sigue en grande, que es
   donde toca decidir la compra. */
.item .precio{font-size:30px}
.item-sufijo{font-size:13px;font-weight:600;color:var(--tinta-suave)}
.item-medida{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.item-destacado{border-color:var(--azul);box-shadow:0 18px 44px rgba(12,109,255,.10)}

/* La demostración gratuita, separada de lo que se vende */
.banda-libre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-6) var(--space-8);background:var(--hondo);
  color:var(--sobre-hondo);text-decoration:none}
.banda-libre b{display:block;font-family:var(--display);font-size:24px;letter-spacing:-.03em}
.banda-libre-texto{display:block;max-width:64ch;margin-top:var(--space-1);font-size:var(--fs-small);
  color:var(--sobre-hondo-suave)}
.banda-libre-ir{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:700;
  color:var(--teal);white-space:nowrap}
.banda-libre:hover,.banda-libre:focus-visible{color:var(--sobre-hondo)}
.banda-libre:hover .banda-libre-ir{text-decoration:underline;text-underline-offset:4px}
@media (max-width:880px){
  .catalogo{grid-template-columns:1fr}
  .item-texto{padding:var(--space-6)}
}

/* El ahorro del combo, visible de un vistazo */
.ahorro{display:inline-block;background:var(--amarillo);color:var(--tinta);
  font-size:14px;font-weight:600;padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3)}
.cuentas{font-size:14px;line-height:1.6;color:var(--sobre-hondo-suave);margin-top:var(--space-2)}
.cuentas s{opacity:.85}


/* ---------- Blog ---------- */
/* El sistema no tenia tipografia de texto largo: todas las paginas eran de
   venta, con parrafos cortos dentro de .enca o .tarjeta. Un articulo necesita
   una columna estrecha y un ritmo vertical propio, asi que va aparte.
   La medida es ~34em (unos 68 caracteres): mas ancha y el ojo pierde el
   renglon al volver. El texto va en --tinta, no en --tinta-suave: el gris esta
   pensado para pies y notas, y a 17px durante ocho parrafos cansa. */
.articulo{max-width:34em;margin-inline:auto;font-size:var(--fs-body-lg);line-height:1.7}
.articulo > * + *{margin-top:var(--space-5)}
.articulo h2{font-size:clamp(27px,3.1vw,36px);line-height:1.06;margin-top:var(--space-12)}
.articulo h3{font-size:21px;line-height:1.15;letter-spacing:-.02em;margin-top:var(--space-8)}
.articulo h2 + p,.articulo h3 + p{margin-top:var(--space-3)}
.articulo ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.articulo li{list-style:none;position:relative;padding-left:var(--space-6)}
/* Vinyeta cuadrada teal: el mismo recurso grafico que .incluye, sin el SVG */
.articulo li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--teal)}
.articulo a{color:var(--azul-texto);text-underline-offset:3px}
.articulo .figura{margin-block:var(--space-8)}

/* Antetitulo del articulo: categoria y fecha en una sola linea */
.meta-entrada{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-texto);margin:0 0 var(--space-5)}
.meta-entrada a{color:inherit}
.meta-entrada time{color:var(--tinta-suave);letter-spacing:.1em}
/* El separador iba en --linea: 1,28:1 sobre blanco, invisible. A 3,48:1 se ve
   y sigue leyendose como secundario. Va aria-hidden en el marcado. */
.meta-entrada span{color:#7c8aa6}

/* Cabecera del articulo: misma columna que el cuerpo, para que el titular no
   arranque mas a la izquierda que el primer parrafo */
.enca-entrada{max-width:34em;margin-inline:auto}
.enca-entrada h1{font-size:clamp(34px,4.6vw,56px);line-height:.96}
.enca-entrada .entradilla{max-width:none}

/* Listado de entradas. La tarjeta entera es el enlace: en el movil un titular
   de dos lineas es un blanco tactil mucho mejor que el "leer mas". */
.entradas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}
.entrada{display:flex;flex-direction:column;gap:var(--space-3);border-radius:var(--radio-m);background:var(--blanco);
  border:1px solid var(--linea);padding:var(--space-8);text-decoration:none;color:var(--tinta);
  transition:border-color .2s ease,transform .2s ease}
.entrada:hover{border-color:var(--azul);color:var(--tinta);transform:translateY(-3px)}
.entrada .meta-entrada{margin:0}
/* La miniatura se sale del relleno de la tarjeta para tocar sus bordes. */
.entrada figure{margin:calc(-1*var(--space-8)) calc(-1*var(--space-8)) 0;overflow:hidden;
  border-radius:var(--radio-m) var(--radio-m) 0 0}
.entrada figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.entrada h3{font-size:24px;line-height:1.08;letter-spacing:-.02em}
.entrada p{font-size:var(--fs-small);color:var(--tinta-suave);margin-bottom:auto}
.entrada .seguir{font-size:var(--fs-small);font-weight:600;color:var(--azul-texto)}
@media (prefers-reduced-motion:reduce){.entrada,.entrada:hover{transition:none;transform:none}}

/* Volver al listado, al pie del articulo */
/* --azul-texto, no --azul: el azul de marca sobre --fondo da 4,24:1 */
.volver{max-width:34em;margin:var(--space-12) auto 0;padding-top:var(--space-6);border-top:1px solid var(--linea);
  font-size:15px;font-weight:600}
.volver a{color:var(--azul-texto)}

@media (max-width:680px){
  .articulo h2{margin-top:var(--space-8)}
}