/* Geointeractiva · web comercial
   Tipografía geométrica (Jost, de la familia de Futura) en mayúsculas espaciadas para navegación, rótulos y títulos,
   como jilsander.com; fondo crema muy sutil; texto siempre negro (#13232C); jerarquía con tamaño y peso.
   Imágenes como en danaparicio.com: todas a la misma altura, sin recortar, con un texto mínimo al lado.
   5 tamaños de letra (11/12/13/15/18), espaciado de 4 en 4. El petróleo #0B6A6E solo en la interacción. */
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url("../fonts/jost-latin-ext.woff2") format("woff2");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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;src:url("../fonts/jost-latin.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}
:root{
  --bg:#FFFFFF; --soft:#F0EFEA; --line:#E2E1DA;
  --teal:#0B6A6E; --teal-soft:#E6F0F0; --ink:#13232C; --gris:#5E6B74; --err:#A3322B;
  --ui:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --fs-xs:13px; --fs-s:14px; --fs-m:15px; --fs-l:17px; --fs-xl:22px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --w:1320px;
  --alto-img:clamp(220px,26vw,380px);
  --caps:.08em;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html{background:var(--bg)}
body{background:transparent;counter-reset:sec fig}
body{color:var(--ink);font-family:var(--ui);font-size:var(--fs-m);line-height:1.7;letter-spacing:.02em;margin:0}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.35;text-transform:uppercase;letter-spacing:var(--caps);text-wrap:balance}
p{margin:0}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--teal)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* Rótulos: mayúsculas espaciadas */
.cap,.lbl{font-size:var(--fs-s);letter-spacing:var(--caps);text-transform:uppercase;line-height:1.4;font-weight:500}
.lbl{display:block}

/* Botones: mayúsculas con borde fino, como el SIGN UP de jilsander.com; color solo en la interacción */
.btn{border:1px solid var(--ink);border-radius:0;padding:8px var(--s4);font-size:var(--fs-s);font-weight:500;line-height:1.4;background:transparent;color:var(--ink);
  text-transform:uppercase;letter-spacing:var(--caps);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.sm{padding:4px var(--s3);font-size:var(--fs-xs)}
.btn:hover{color:var(--teal);border-color:var(--teal)}
.btn:active,.btn[aria-pressed="true"],a.btn[aria-current="page"]{background:var(--teal-soft);color:var(--teal);border-color:var(--teal)}
.btn svg{width:14px;height:14px;flex:none}
.link{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--caps);text-decoration:underline;font-weight:500;background:none;border:0;padding:0;color:var(--ink)}
.link:hover{color:var(--teal)}
.acts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}

/* Aviso de borrador y notas de revisión (solo en castellano) */
.proto{background:var(--teal-soft);font-size:var(--fs-s);text-align:center;padding-block:6px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));display:flex;gap:var(--s3);justify-content:center;align-items:center;flex-wrap:wrap}
.nota{background:#FFF8DC;border:1px solid #EADB9A;padding:var(--s2) var(--s3);font-size:var(--fs-s);line-height:1.5;max-width:80ch;letter-spacing:0}
.nota::before{content:"Nota de borrador · ";font-weight:600}
body.sin-notas .nota{display:none}

/* Cabecera: páginas a la izquierda, logo en el centro, app e idiomas a la derecha */
header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s4);
  padding-block:var(--s4);padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
.nav,.side-r,.langs{display:flex;align-items:center;flex-wrap:wrap}
.nav{gap:var(--s5)}
.nav a,.langs a{font-size:var(--fs-m);text-transform:uppercase;letter-spacing:var(--caps);text-decoration:none;font-weight:400}
.nav a[aria-current="page"],.langs a[aria-current="true"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.brand{display:flex;align-items:center;justify-content:center;text-decoration:none}
.brand img{display:block;height:32px;width:auto}
.side-r{justify-content:flex-end;gap:var(--s5)}
.langs{gap:var(--s3)}
.langs a{color:var(--gris)}
.langs a[aria-current="true"]{color:var(--ink)}
/* Cabecera: mismo tamaño para páginas, botón de la app e idiomas; al pasar el cursor, petróleo.
   Solo «Entra en la app» dibuja además un recuadro fino. */
header .nav a,header .langs a,header .btn{font-size:var(--fs-s);font-weight:400;letter-spacing:var(--caps);line-height:1.4;transition:color .2s ease,border-color .2s ease}
header .btn{border-color:transparent;padding:8px var(--s4);background:none}
header .nav a:hover,header .langs a:hover,header .nav a:focus-visible,header .langs a:focus-visible{color:var(--teal)}
header .btn:hover,header .btn:focus-visible{color:var(--teal);border-color:var(--teal);background:none}
@media (prefers-reduced-motion:reduce){header .nav a,header .langs a,header .btn{transition:none}}

/* Secciones */
.sec{max-width:var(--w);margin:0 auto;padding-block:var(--s8);padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px));display:grid;gap:var(--s6);scroll-margin-top:96px}
.sec + .sec{border-top:1px solid var(--line)}
.sec > *{min-width:0}
h1,h2,h3,h4,.lead,p{overflow-wrap:break-word}
.head{display:grid;gap:var(--s3);max-width:68ch}
.head h1{font-size:var(--fs-xl)}
.head h2{font-size:var(--fs-l)}
.lead{font-size:var(--fs-l);line-height:1.65}
.intro{padding-block:var(--s8) var(--s7)}

/* Datos y pasos, con filete superior */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s5)}
.facts>div,.steps li{border-top:1px solid var(--ink);padding-top:var(--s3);display:grid;gap:var(--s2);align-content:start;min-width:0}
.facts b,.steps h3{font-size:var(--fs-m);font-weight:500;text-transform:uppercase;letter-spacing:var(--caps)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s5)}
.step-n,.tag{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.principles{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4)}
.fnlist{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.fnlist span{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--caps)}
.fnlist span + span::before{content:"·";margin-right:var(--s4);color:var(--gris)}

/* Herramientas: columnas con filete fino, sin cajas */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s5)}
.tools>div{border-top:1px solid var(--line);padding-top:var(--s3);display:grid;gap:var(--s1);align-content:start;min-width:0}
.tools h3{font-size:var(--fs-m)}

/* Imágenes como en danaparicio.com: misma altura, sin recortar, texto mínimo al lado */
.textimage{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:stretch}
.ti-pieza{display:flex;align-items:stretch;gap:14px;text-decoration:none;color:inherit;background:none;border:0;padding:0;text-align:left}
.ti-pieza img,.ti-pieza .ph{height:var(--alto-img);width:auto;max-width:78vw;object-fit:contain;display:block;transition:opacity .3s}
.ti-pieza .ph{aspect-ratio:16/10;background:var(--soft);display:grid;place-items:center;text-align:center;padding:var(--s5);font-size:var(--fs-s);color:var(--gris);line-height:1.5}
.ti-pieza:hover img{opacity:.88}
.ti-texto{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;width:150px;font-size:var(--fs-xs);line-height:1.35}
.ti-texto b{font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ti-texto i{font-style:normal;color:var(--gris);text-transform:lowercase}
.ti-texto .acts{gap:var(--s2) var(--s3);margin-top:var(--s2)}
a.ti-pieza:hover .ti-texto b{text-decoration:underline;text-underline-offset:2px}

/* Botones del menú de la app */
.menu-btns{display:grid;gap:var(--s3)}
.menu-btns>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--s3);align-items:center}
.menu-btns .btn{justify-content:center}

/* Edades */
.stagewrap{display:grid;gap:var(--s1)}
.ages,.stage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1);font-variant-numeric:tabular-nums}
.ages span{text-align:center}
.stage div{padding:var(--s2) var(--s3);background:var(--soft)}
.s1{grid-column:1/4}.s2{grid-column:4/6}.s3{grid-column:6/7}
/* Barra de etapas: cada etapa muestra los colores de sus edades, con transparencia */
/* Barra de etapas a pleno color, la misma paleta y tono que la regla de escala de la cabecera (libro de estilo) */
.stage{--a67:var(--e67);--a89:var(--e89);--a1011:var(--e1011);--a1213:var(--e1213);--a1415:var(--e1415);--a16:var(--e16)}
.stage .s1{background:linear-gradient(to right,var(--a67) 0 33.33%,var(--a89) 33.33% 66.66%,var(--a1011) 66.66% 100%)}
.stage .s2{background:linear-gradient(to right,var(--a1213) 0 50%,var(--a1415) 50% 100%)}
.stage .s3{background:var(--a16)}
/* En móvil «Bachillerato» no cabe en su casilla: se muestra la forma corta */
.stage .corto{display:none}
@media (max-width:640px){.stage .s3 .largo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.stage .s3 .corto{display:inline}}

/* Juegos */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s6)}
.games ul{list-style:none;margin:var(--s2) 0 0;padding:0}
.games li{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:var(--s3);align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.games li span,.games li em{font-size:var(--fs-s);font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--gris)}

/* Planes */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s5)}
.plans>div{border-top:1px solid var(--ink);padding-top:var(--s3);display:grid;gap:var(--s2);align-content:start}
.plans>div>.btn{justify-self:start;margin-top:var(--s2)}
.price{font-size:var(--fs-s);font-weight:400;text-transform:uppercase;letter-spacing:var(--caps);font-variant-numeric:tabular-nums}
.cost{font-weight:500;font-variant-numeric:tabular-nums}
.feats{list-style:none;margin:0;padding:var(--s2) 0 0;border-top:1px solid var(--line);display:grid;gap:var(--s1);font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--caps)}

/* ===== Recursos: filtro, catálogo, cajón y formulario ===== */
.filters{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;justify-content:space-between}
.seg{display:flex;flex-wrap:wrap;gap:var(--s4)}
.seg .link{text-decoration:none;color:var(--gris)}
.seg .link[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.search{width:min(320px,100%);border:0;border-bottom:1px solid var(--ink);padding:6px 0;background:transparent;font-size:var(--fs-m)}
.search::placeholder{color:var(--gris)}
.packs-row{display:grid;gap:var(--s3)}
.packs{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.packbtn{display:inline-grid;text-align:left;border:1px solid var(--ink);background:transparent;padding:6px var(--s3)}
.packbtn b{font-size:var(--fs-s);font-weight:500;text-transform:uppercase;letter-spacing:var(--caps)}
.packbtn span{font-size:var(--fs-xs);color:var(--gris);font-variant-numeric:tabular-nums}
.packbtn:hover{border-color:var(--teal)}
.packbtn:hover b{color:var(--teal)}
.packbtn:active{background:var(--teal-soft)}
.groups{display:grid;gap:var(--s5)}
.group{display:block}
.group h3{font-size:var(--fs-m);display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
.group summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--s3);padding-block:var(--s1);transition:color .2s ease}
.group summary::-webkit-details-marker{display:none}
.group summary::after{content:"+";font-size:var(--fs-l);font-weight:400;line-height:1}
.group[open] summary::after{content:"−"}
.group summary:hover,.group summary:focus-visible{color:var(--teal)}
.group[open] > summary{margin-bottom:var(--s4)}
.empty{padding:var(--s5);text-align:center;border:1px dashed var(--line)}
.scrim{position:fixed;inset:0;background:rgba(15,30,30,.35);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);z-index:21;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);padding-right:env(safe-area-inset-right, 0px);box-shadow:-10px 0 40px rgba(0,0,0,.15)}
.dh{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);display:grid;gap:var(--s2)}
.dh .top{display:flex;justify-content:space-between;gap:var(--s3);align-items:start}
.dh h2,.dialog h2{font-size:var(--fs-l)}
.meta{font-size:var(--fs-s);color:var(--gris);font-variant-numeric:tabular-nums}
.x{border:1px solid var(--ink);background:transparent;width:28px;height:28px;font-size:var(--fs-l);flex:none;line-height:1}
.x:hover{color:var(--teal);border-color:var(--teal)}
.pages{overflow:auto;padding:var(--s5);display:grid;gap:var(--s4);background:var(--soft);flex:1}
.pages img{width:100%;display:block}
.da{padding:var(--s3) var(--s5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.da a{margin-left:auto}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:var(--s4)}
.dialog{z-index:1;background:var(--bg);width:min(440px,100%);padding:var(--s6) var(--s5) var(--s5);display:grid;gap:var(--s3);box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
.dialog .x{position:absolute;right:var(--s4);top:var(--s4)}
.field{display:grid;gap:var(--s1)}
.field input{border:0;border-bottom:1px solid var(--ink);padding:6px 0;background:transparent}
.check{display:flex;gap:var(--s2);align-items:start;font-size:var(--fs-s);line-height:1.5}
.check input{margin:3px 0 0;accent-color:var(--teal)}
.err{color:var(--err);font-size:var(--fs-s)}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(96px + env(safe-area-inset-top, 0px));z-index:40;background:var(--bg);border:1px solid var(--ink);padding:var(--s2) var(--s4);font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--caps);box-shadow:0 6px 20px rgba(0,0,0,.12);max-width:calc(100% - 32px)}

/* Pie en columnas, como jilsander.com */
footer{border-top:1px solid var(--line)}
.foot-brand{max-width:var(--w);margin:0 auto;padding:var(--s6) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.foot-brand .brand img{height:24px}
.foot-brand .cap{font-size:var(--fs-xs)}
.foot-brand .brand{justify-content:flex-start}
footer .sec{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);padding-block:var(--s5) var(--s4)}
/* Escritorio: dos columnas junto al margen izquierdo y dos junto al derecho, separadas por el eje central */
@media (min-width:981px){
  footer .sec{grid-template-columns:auto auto minmax(var(--s7),1fr) auto auto;column-gap:var(--s7)}
  footer .sec > div:nth-child(3){grid-column:4}
  footer .sec > div:nth-child(4){grid-column:5}
}
footer h2{font-size:var(--fs-s);font-weight:500}
footer ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
footer li,footer li a{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);text-decoration:none;line-height:1.5}
footer li a:hover{text-decoration:underline}
.colofon{max-width:var(--w);margin:0 auto;padding:var(--s2) max(24px, env(safe-area-inset-right, 0px)) var(--s5) max(24px, env(safe-area-inset-left, 0px));display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.colofon a{color:var(--gris)}

@media (max-width:980px){
  header{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s3)}
  .brand{grid-column:1;grid-row:1;justify-content:flex-start}
  .side-r{grid-column:2;grid-row:1}
  .nav{grid-column:1/-1;grid-row:2}
  footer .sec{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .side-r{gap:var(--s3)}
  header .btn{padding:6px var(--s2)}
  /* Móvil: logo e idiomas arriba, páginas y app debajo */
  header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand langs" "nav app";row-gap:var(--s3);padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
  header .side-r{display:contents}
  header .brand{grid-area:brand;justify-content:flex-start}
  header .brand img{height:26px;width:auto;max-width:none}
  header .langs{grid-area:langs;justify-content:flex-end}
  header .nav{grid-area:nav;grid-column:auto;grid-row:auto}
  header .btn{grid-area:app;justify-self:end}
  header .nav{flex-wrap:wrap;gap:var(--s1) var(--s4);min-width:0}
  header .nav a,header .langs a,header .btn{font-size:var(--fs-xs);white-space:nowrap}
  header .btn{padding:4px 0}
  .nav{gap:var(--s4)}
  :root{--alto-img:56vw}
  .ti-pieza{width:100%}
  .ti-pieza img,.ti-pieza .ph{max-width:calc(100vw - 48px - 110px)}
  .ti-texto{width:96px}
  .menu-btns>div{grid-template-columns:minmax(0,1fr)}
  .menu-btns .btn{justify-self:start}
  .stage div{padding:var(--s2) var(--s1);font-size:12px}
  footer .sec{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ti-pieza img{transition:none}}

/* Capturas de la app: rejilla de dos columnas iguales, alineada con el resto de la página y centrada.
   Cada imagen ocupa el ancho de su columna, entera y sin recortar; una imagen sola se centra sobre el eje de la página.
   Las columnas no pasan de unos 640 px, menos de la mitad de los píxeles reales: se ven nítidas en pantallas de alta densidad. */
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5);max-width:var(--w);margin-inline:auto;width:100%}
.galeria.uno{grid-template-columns:minmax(0,1fr);justify-items:center}
.galeria.uno .foto{width:calc((100% - var(--s5)) / 2)}
.foto{margin:0;display:grid;gap:var(--s3);min-width:0;align-content:start}
.foto .marco{border:1px solid var(--line);background:var(--soft);display:flex;justify-content:center}
.foto img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block}
.foto .ph{width:100%;aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:var(--s5);font-size:var(--fs-s);color:var(--gris);line-height:1.5}
.foto figcaption{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;font-size:var(--fs-xs);line-height:1.4}
.foto figcaption b{font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.foto figcaption i{font-style:normal;color:var(--gris)}
@media (max-width:640px){.galeria{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.galeria.uno .foto{width:100%}}

/* Movimiento sutil: los bloques aparecen al entrar en pantalla (solo con JavaScript y sin «reducir movimiento») */
.mov .rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.mov .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mov .rv{opacity:1;transform:none;transition:none}}

/* Cuadros con imagen: un punto petróleo indica que hay captura; el clic la abre en el visor (js/visor.js).
   Sin previsualizaciones flotantes. Los instrumentos, además, muestran su captura en el marco del comparador (js/comparador.js). */
.con-vista{position:relative;cursor:pointer}
.con-vista .vista{display:none}
.con-vista h3::after,.con-vista > .cap::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-left:var(--s2);vertical-align:middle;opacity:.7}
.con-vista:hover h3,.con-vista:hover > .cap,.con-vista.activo h3{color:var(--teal)}
.con-vista:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.con-vista h3{transition:none}}

/* Proyecciones en tríptico apaisado, más pequeño que las demás galerías */
.galeria.triptico{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.galeria.triptico .marco{aspect-ratio:4/3;align-items:center}
.galeria.triptico img{max-height:100%}
@media (max-width:640px){.galeria.triptico{grid-template-columns:minmax(0,1fr)}}

/* Páginas de ficha, centros y legales */
.sec.migas{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;padding-top:var(--s5);padding-bottom:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.migas a{color:var(--gris);text-decoration:none}
.migas a:hover{color:var(--teal)}
.migas span{margin:0 var(--s1)}
.aviso{font-size:var(--fs-s);line-height:1.5;color:var(--gris);max-width:80ch}
.form-centro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6);max-width:760px}
.form-centro .ancho{grid-column:1 / -1}
.field textarea{font:inherit;color:inherit;letter-spacing:inherit;border:0;border-bottom:1px solid var(--ink);padding:6px 0;background:transparent;resize:vertical}
.texto-legal{max-width:72ch;display:grid;gap:var(--s3)}
.texto-legal h2{font-size:var(--fs-m);margin-top:var(--s4)}
.texto-legal ul{margin:0;padding-left:1.2em;display:grid;gap:var(--s2)}
.ti-texto b a{text-decoration:none}
.ti-texto b a:hover{text-decoration:underline}
@media (max-width:640px){.form-centro{grid-template-columns:minmax(0,1fr)}}

/* Dirección creativa: la web como un atlas */
/* Referencias de sección, como las coordenadas de un atlas */
.sec:not(.intro) .head > .cap{counter-increment:sec}
.sec:not(.intro) .head > .cap::before{content:counter(sec, decimal-leading-zero);color:var(--gris);margin-right:var(--s3);font-variant-numeric:tabular-nums}
/* En Elige tu plan, los planes de pago llevan su número (Demo no) y la sección de centros sigue la cuenta: 01, 02, 03 */
#planes .plans > div:not(:first-child) > .lbl{counter-increment:sec}
#planes .plans > div:not(:first-child) > .lbl::before{content:counter(sec, decimal-leading-zero);color:var(--gris);margin-right:var(--s3);font-variant-numeric:tabular-nums}
/* Cartela: el pie de cada imagen como la leyenda de un mapa */
.foto figcaption{counter-increment:fig;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s3);border-top:1px solid var(--ink);padding-top:var(--s2)}
.foto figcaption::before{content:counter(fig, decimal-leading-zero);grid-row:span 2;border:1px solid var(--ink);padding:1px 5px;font-size:var(--fs-xs);line-height:1.4;font-variant-numeric:tabular-nums;align-self:start}
/* Color de cada franja de edad (paleta de la web anterior), el mismo en la barra de etapas y en las fichas */
/* 12–13 es el turquesa Laguna de la Presentación y 14–15 el petróleo corporativo de la web */
:root{--e67:#FFCD00;--e89:#FF7500;--e1011:#F077B6;--e1213:#40CCD5;--e1415:var(--teal);--e16:#8D8BDA}
[data-edad="6-7"]{--edad:var(--e67)} [data-edad="8-9"]{--edad:var(--e89)} [data-edad="10-11"]{--edad:var(--e1011)}
[data-edad="12-13"]{--edad:var(--e1213)} [data-edad="14-15"]{--edad:var(--e1415)} [data-edad="16"]{--edad:var(--e16)}
.edad::before{content:"";display:inline-block;width:8px;height:8px;background:var(--edad,var(--gris));margin-right:6px;vertical-align:0}
.ficha[data-edad] .head > .cap{border-left:3px solid var(--edad);padding-left:var(--s2)}
/* Académica Plus: la tarjeta y sus cuatro funciones en una sola fila en escritorio */
@media (min-width:1100px){#centros .plans{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Elige tu plan: el mapamundi ocupa el cuarto hueco de la fila de planes; en pantallas estrechas no se muestra */
#planes .plans > .plan-img{border-top:0;padding-top:0}
@media (max-width:899px){#planes .plans > .plan-img{display:none}}
/* Logos de GeoKids y GeoMundi donde la web nombra los juegos */
.submarcas{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;margin-top:var(--s2)}
.submarcas img{height:28px;width:auto;display:block}
/* Vídeos tutoriales en Recursos: tres por fila (dos en tableta, uno en móvil), 16:9 en su marco fino */
/* Los originales de Vimeo son pequeños (unos 372×240): la cuadrícula se limita para no ampliarlos de más */
.galeria.videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5);max-width:1200px;margin-inline:0}
.foto.video .marco{aspect-ratio:16/9;background:#000;position:relative}
.foto.video iframe,.foto.video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:980px){.galeria.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.galeria.videos{grid-template-columns:minmax(0,1fr)}}
/* Portada de cada vídeo (captura de la app) con un botón de play propio, en el estilo de la web */
.vid-portada{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--soft);cursor:pointer;display:block}
.vid-portada img{width:100%;height:100%;object-fit:cover;display:block}
.vid-play{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--ink);transition:border-color .15s ease}
.vid-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ink);transition:border-color .15s ease}
.vid-portada:hover .vid-play,.vid-portada:focus-visible .vid-play{border-color:var(--teal)}
.vid-portada:hover .vid-play::after,.vid-portada:focus-visible .vid-play::after{border-left-color:var(--teal)}
/* La captura del panel de administración es muy apaisada: entera, sobre el gris del propio panel */
.vid-portada img[src*="herr-aula"]{object-fit:contain;background:#4E4E4E}
/* Pie a escala algo menor (Dan, 23-10-2026): títulos 11, enlaces y colofón 10, espaciado proporcional.
   Logo a 24 px, el mínimo del horizontal pequeño según docs/05-logos.md del design system (29-10-2026) */
footer{--fs-pie:12px}
.foot-brand{padding-top:var(--s5);gap:var(--s3)}
.foot-brand .brand img{height:24px;width:auto}
.foot-brand .cap{font-size:var(--fs-pie)}
footer .sec{padding-block:var(--s4) var(--s3)}
@media (min-width:981px){footer .sec{column-gap:var(--s6)}}
footer h2{font-size:var(--fs-xs)}
footer ul{margin-top:var(--s2);gap:6px}
footer li,footer li a{font-size:var(--fs-pie)}
.colofon{font-size:var(--fs-pie);padding-bottom:var(--s4)}
/* Regla de escala (concepto «web como leyenda», aprobada por Dan el 24-10-2026): fila a todo el ancho dentro de la
   cabecera fija; seis tramos con los colores por edad, al 35 % hasta que la lectura llega a cada sexto y plenos después */
header .escala{grid-column:1 / -1;grid-row:auto;display:flex;align-items:center;gap:var(--s3);margin:var(--s3) calc(-1 * max(24px, env(safe-area-inset-left, 0px))) calc(-1 * var(--s4));padding:var(--s2) max(24px, env(safe-area-inset-left, 0px));border-top:1px solid var(--line);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris);font-variant-numeric:tabular-nums}
/* Móvil: la cabecera baja su margen a 16 px; la regla la sigue para no salirse por los lados (scroll horizontal) */
@media (max-width:620px){header .escala{margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}}
.regla{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s1);height:6px}
.regla i{background:var(--c);opacity:.35;transition:opacity .2s}
.regla i.on{opacity:1}
#esc-txt{min-width:5.5ch;text-align:right}
@media (prefers-reduced-motion:reduce){.regla i{transition:none}}
/* Comparador de capas (home): el mismo gesto que el panel de capas de la app; el pie lleva el número de la capa */
.comparador{display:grid;grid-template-columns:180px minmax(0,6fr) minmax(0,5fr);gap:var(--s4) var(--s5);align-items:start}
.capas{border:1px solid var(--line);padding:var(--s4)}
.capas fieldset{border:0;margin:0;padding:0;display:grid;gap:var(--s1)}
.capas legend{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris);margin-bottom:var(--s1);padding:0}
.capa{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-s);cursor:pointer;user-select:none;padding:2px 0}
.capa input{appearance:none;width:12px;height:12px;border:1px solid var(--ink);margin:0;flex:none;display:grid;place-items:center;cursor:pointer}
.capa input:checked{background:var(--ink)}
.capa input:checked::after{content:"";width:4px;height:4px;background:#fff}
.capa input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.capa:hover{color:var(--teal)}
.comparador .foto img{max-height:none;aspect-ratio:1976/1350}
/* Imagen a lo ancho de su columna; en pantallas medianas, como mucho de 760 px y del 52 % de la altura de la pantalla */
.comparador .foto{width:100%}
.comparador figcaption::before{content:attr(data-n)}
/* Instrumentos a la derecha de la imagen, en dos columnas; en pantallas medianas pasan debajo, a todo el ancho */
.comparador .tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}
@media (max-width:1279px){.comparador{grid-template-columns:180px minmax(0,auto)}.comparador .foto{width:min(100%, 760px, 52vh * 2000 / 1370)}.comparador .tools{grid-column:1 / -1;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}}
@media (max-width:640px){.comparador{grid-template-columns:minmax(0,1fr);gap:var(--s3)}.capas fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.capas legend{grid-column:1 / -1}}
/* Herramientas en dos niveles: los usos encienden los instrumentos que sirven (los demás se atenúan) */
.usos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.usos .lbl{margin-right:var(--s2)}
.uso{border:1px solid var(--ink);background:var(--bg);color:var(--ink);padding:6px var(--s3);font:inherit;font-size:var(--fs-s);text-transform:uppercase;letter-spacing:var(--caps);font-weight:500;cursor:pointer}
.uso:hover,.uso[aria-pressed="true"]{border-color:var(--teal);color:var(--teal)}
.tools .fx{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.tools.filtrado>div,.tools.filtrado>div.rv{transition:opacity .25s}
/* Más específico que la entrada animada (.mov .rv.in) */
.tools.filtrado>div:not(.on){opacity:.25}
.tools.filtrado>div.on h3{color:var(--teal)}
@media (prefers-reduced-motion:reduce){.tools>div{transition:none}}
/* Recursos: filtros como capas a la izquierda, fichas a la derecha */
.rec{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);align-items:start}
.rec .capas{display:grid;gap:var(--s4);position:sticky;top:calc(var(--cab, 120px) + var(--s3))}
.rec-main{display:grid;gap:var(--s6);min-width:0}
.capa .sw{width:12px;height:12px;flex:none}
.estado{font-size:var(--fs-xs);color:var(--gris);text-transform:uppercase;letter-spacing:var(--caps);font-variant-numeric:tabular-nums}
@media (max-width:760px){.rec{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.rec .capas{position:static}}
.rec .capa{align-items:flex-start;line-height:1.4}
.rec .capa input,.rec .capa .sw{margin-top:calc((1.4em - 12px) / 2)}
@media (max-width:640px){#f-tema{grid-template-columns:minmax(0,1fr)}}
/* Visor: la imagen centrada en la página, a tamaño contenido, sobre el fondo velado */
.visor{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:var(--s5);background:rgba(255,255,255,.94);cursor:pointer}
.visor[hidden]{display:none}
.visor figure{margin:0;display:grid;gap:var(--s2);max-width:min(900px, 100%);cursor:default}
.visor img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;margin-inline:auto;border:1px solid var(--line);background:var(--bg);box-shadow:0 10px 40px rgba(19,35,44,.15)}
.visor figcaption{font-size:var(--fs-xs);line-height:1.4;color:var(--gris)}
.visor .x{position:absolute;top:var(--s4);right:var(--s4);background:var(--bg);cursor:pointer}
@media (prefers-reduced-motion:no-preference){.visor{animation:visor-in .15s ease}}
@keyframes visor-in{from{opacity:0}}
/* Mientras se ve un instrumento en el marco, el selector de capas se atenúa: la ventana muestra otra cosa */
.comparador .capas{transition:opacity .2s}
.comparador.viendo .capas{opacity:.35}
.comparador .foto img{transition:opacity .15s}
/* Ventanas (Datos, Materias): textos a la izquierda en una columna y, a la derecha, el marco que hace de visor */
.ventana{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5) var(--s6);align-items:start}
.ventana .steps{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.ventana .foto img{aspect-ratio:2000/1370;max-height:none;object-fit:contain}
.ventana figcaption::before{content:attr(data-n)}
@media (max-width:760px){.ventana{grid-template-columns:minmax(0,1fr)}.ventana > .foto{display:none}}
/* Datos y Materias comparten ventana: los seis cuadros a la izquierda y el visor fijo a la derecha mientras se leen */
.v-textos{display:grid;gap:var(--s5);min-width:0}
.v-sub{color:var(--gris)}
@media (min-width:761px){.ventana > .foto{position:sticky;top:calc(var(--cab, 170px) + var(--s4))}}
/* Cómo funciona: tras la ventana de proyecciones, la tabla de juegos con los mismos márgenes */
/* Juegos: textos y las dos listas (Político, Físico) a la izquierda, compactas; mini visor a la derecha, como el de la Presentación */
.juegos-tabla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:var(--s5) var(--s6);align-items:start}
.juegos-tabla > .nota{grid-column:1 / -1}
.jt-textos{display:grid;gap:var(--s4);min-width:0}
.jt-textos .games{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.jt-textos .games li{grid-template-columns:minmax(0,1fr) auto 32px;gap:var(--s2);padding:6px 0}
@media (max-width:900px){.juegos-tabla{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.jt-textos .games{grid-template-columns:minmax(0,1fr)}}
.jt-head{display:grid;gap:var(--s2);max-width:60ch}
.jt-head h3{font-size:var(--fs-m);font-weight:500;text-transform:uppercase;letter-spacing:var(--caps)}
/* Pie de los tres visores, sencillo como en danaparicio.com: una línea pequeña y gris, título a la izquierda y detalle a la derecha;
   sin número en caja, sin filete y sin mayúsculas */
.comparador figcaption,.ventana figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  border-top:0;padding-top:0;margin-top:var(--s2);font-size:14px;line-height:1.4;color:var(--gris)}
.comparador figcaption::before,.ventana figcaption::before{content:none}
.comparador figcaption b,.ventana figcaption b{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);flex:none}
.comparador figcaption i,.ventana figcaption i{font-style:italic;text-align:right;color:var(--gris)}
@media (max-width:640px){.comparador figcaption,.ventana figcaption{flex-direction:column;gap:2px}.comparador figcaption i,.ventana figcaption i{text-align:left}}
/* Edades: titular y subtítulo, cada uno en una línea */
#edades .head h2,#edades .head .lead{white-space:nowrap;max-width:none}
@media (max-width:760px){#edades .head h2,#edades .head .lead{white-space:normal}}
/* Presentación: título y subtítulo en una línea, separados por la barra */
.head h2.en-linea{display:flex;flex-wrap:wrap;max-width:none;align-items:baseline;gap:var(--s1) var(--s3)}
.head h2.en-linea .sep{font-weight:400;color:var(--gris)}
.head h2.en-linea .sub{font-size:var(--fs-l);font-weight:400;text-transform:none;letter-spacing:0}
.head.head-linea{max-width:none}
@media (min-width:761px){.head h2.en-linea{flex-wrap:nowrap;white-space:nowrap}}
/* Pie: columnas de enlaces sin títulos (serían redundantes); el nombre de cada grupo queda en aria-label */
/* Académica Net: cinco cuadros homogéneos (mismo título y texto), con la misma sangría y márgenes que los planes de arriba */
#centros .plans{gap:var(--s4)}
/* Home: sin el rótulo numerado de cada sección («01 Herramientas»…): el titular basta. Se oculta en lugar de borrarse
   porque la regla de escala de la cabecera cuenta las secciones por ese rótulo */
#capas .head > .cap,#datos .head > .cap,#edades .head > .cap,#como-funciona .head > .cap{display:none}
/* Filetes más sutiles: todas las líneas sobre los cuadros de texto en gris claro (como en Herramientas);
   solo el cuadro que se está viendo en un visor la marca en petróleo, como una capa encendida */
.facts>div,.steps li,.plans>div{border-top-color:var(--line)}
.con-vista{transition:border-color .2s}
.con-vista.activo,.con-vista:hover{border-top-color:var(--teal)}
@media (prefers-reduced-motion:reduce){.con-vista{transition:none}}
/* Presentación: toda la línea es el botón de descarga, con la flecha a la derecha */
/* Mismo tamaño que el botón «Entra en la app» de la cabecera: misma letra (12 px) y mismo relleno; solo cambia el texto */
.btn.btn-pres{display:inline-flex;flex-wrap:wrap;white-space:normal;max-width:100%;align-items:center;gap:var(--s1) var(--s2);justify-self:start}
.btn-pres b{font-weight:600}
.btn-pres .sep{color:var(--gris)}
.btn-pres svg{align-self:center;margin-left:var(--s1)}
/* Presentación: el botón a la izquierda y, a la derecha, un mini visor de tres diapositivas que pasan al hacer clic */
.pres{display:grid;grid-template-columns:auto minmax(0,560px);gap:var(--s5) var(--s6);align-items:start;justify-content:space-between}
.mini-visor{margin:0;width:100%}
.mini-visor .marco{display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--soft)}
.mini-visor button.marco{cursor:pointer}
.mini-visor img{width:100%;height:auto;display:block;max-height:none}
/* El marco se ajusta a cada imagen (sus width/height): sin bandas a los lados */
.mini-visor .marco{line-height:0}
.mini-visor figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);border-top:0;padding-top:0;margin-top:var(--s2);font-size:14px;line-height:1.4;color:var(--gris)}
.mini-visor figcaption::before{content:none}
.mini-visor figcaption b{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink)}
.mini-visor figcaption i{font-style:normal;font-variant-numeric:tabular-nums}
.mini-visor button.marco:hover{border-color:var(--teal)}
.mini-visor .marco:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:760px){.pres{grid-template-columns:minmax(0,1fr)}}
/* ===== Rejilla de la página (libro de estilo, regla clave de Dan): un eje central respecto a toda la página y dos columnas
   iguales a cada lado, con márgenes equidistantes. Cada bloque de dos partes (ventanas, juegos, presentación) reparte su
   información en esas dos columnas; nada se alinea a anchos propios. ===== */
:root{--col-gap:var(--s6)}
.comparador,.ventana,.juegos-tabla,.pres{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--col-gap);justify-content:stretch}
.c-izq{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s4);align-items:start;min-width:0}
.c-izq .foto{width:100%}
.comparador .tools{grid-column:auto}
.pres .btn-pres{justify-self:start}
.mini-visor{max-width:none}
@media (max-width:1279px){.comparador{grid-template-columns:repeat(2,minmax(0,1fr))}.comparador .tools{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.c-izq .foto{width:100%}}
@media (max-width:900px){.comparador,.ventana,.juegos-tabla,.pres{grid-template-columns:minmax(0,1fr)}.c-izq{grid-template-columns:minmax(0,1fr)}}
/* Cómo funciona: más aire entre el visor de proyecciones y el bloque de juegos */
#como-funciona .juegos-tabla{margin-top:calc(var(--s8) * 1.5)}
/* Presentación: el mini visor en la columna izquierda y el botón en la derecha, centrado en esa columna en ambos ejes */
.pres{align-items:center}
.pres .mini-visor{order:1}
.pres .btn-pres{order:2;justify-self:center;align-self:center}
@media (max-width:900px){.pres .btn-pres{order:0;justify-self:start;margin-bottom:0}}
/* Home: el titular de entrada en una sola línea, centrado en el eje de la página */
#inicio .head{max-width:none;justify-items:center;text-align:center}
#inicio .head h1{white-space:nowrap;text-wrap:nowrap}
@media (max-width:1100px){#inicio .head h1{white-space:normal;text-wrap:balance}}
/* Elige tu plan: lo que incluye cada plan, en letra más pequeña y gris (menos contraste que los precios y los botones) */
.feats{font-size:var(--fs-xs);color:var(--gris)}
/* Elige tu plan: el nombre del plan es el enlace a la pasarela de pago (sin botón «Elegir») */
a.plan-pago{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line)}
a.plan-pago:hover,a.plan-pago:focus-visible{color:var(--teal);text-decoration-color:var(--teal)}
/* Cómo funciona: el visor de juegos mide lo mismo que el de proyecciones (su columna menos el selector), en la otra columna */
.juegos-tabla .mini-visor{width:calc(100% - 150px - var(--s4));justify-self:start}
.juegos-tabla .mini-visor img{aspect-ratio:1976/1350;object-fit:contain;background:var(--soft)}
@media (max-width:900px){.juegos-tabla .mini-visor{width:100%}}
/* Presentación: el botón debajo del visor, en la columna izquierda; la derecha queda libre para que la home respire */
.pres{align-items:start}
.pres .mini-visor{grid-column:1}
.pres .btn-pres{grid-column:1;justify-self:start;align-self:start}
/* Cabecera: más presencia de la marca. Logo algo mayor (32 → 36 px) y enlaces de izquierda y derecha un punto menores (12 → 11 px).
   El botón de la Presentación sigue igual que «Entra en la app» */
header .brand img{height:36px}
header .nav a,header .langs a,header .btn{font-size:var(--fs-xs)}
.btn.btn-pres{font-size:var(--fs-xs)}
@media (max-width:760px){header .brand img{height:28px}}
/* Home: más aire antes del primer visor (Herramientas), tras los cuatro bloques de entrada */
#inicio{padding-bottom:calc(var(--s8) * 1.5)}
#capas{padding-top:calc(var(--s8) * 1.75)}
#capas > .head{margin-bottom:var(--s4)}
/* Rejilla: la información descansa en las sangrías izquierda y derecha y el centro queda libre.
   Más separación entre columnas, y lo que va en la columna derecha se apoya en el margen derecho */
:root{--col-gap:calc(var(--s8) * 1.5)}
.juegos-tabla .mini-visor{justify-self:end}
@media (max-width:1279px){:root{--col-gap:var(--s7)}}
@media (max-width:900px){.juegos-tabla .mini-visor{justify-self:stretch}}
/* Selectores de capas (Capa, Proyección, Recursos) con el estilo del nuevo menú de GeoKids y GeoMundi:
   cuadro ajustado al contenido, letra pequeña y casilla de contorno con un cuadradito dentro al marcarla */
.capas{padding:var(--s3) var(--s4);gap:var(--s3)}
.c-izq .capas{justify-self:start;width:auto;min-width:0}
.capas legend{font-size:var(--fs-xs);margin-bottom:var(--s1)}
.capa{font-size:var(--fs-xs);gap:var(--s2);padding:1px 0}
.capa input{width:11px;height:11px;border:1px solid var(--ink);background:var(--bg)}
.capa input:checked{background:var(--bg)}
.capa input:checked::after{width:5px;height:5px;background:var(--ink)}
.capa .sw{width:10px;height:10px}
/* Herramientas sin titular: la cabecera (solo el rótulo oculto que cuenta la regla de escala) no ocupa sitio */
#capas > .head{display:none}
/* Visores sin márgenes: la imagen llena siempre el marco (recorte centrado), sin bandas grises */
.comparador .foto img,.ventana .foto img,.juegos-tabla .mini-visor img{object-fit:cover;object-position:center;background:none}
.comparador .foto .marco,.ventana .foto .marco{overflow:hidden}
/* Titular de la home más ligero, con la misma tipografía (Jost 400 en lugar de 500) */
#inicio .head h1{font-weight:400}
/* Recursos: rótulo y titular de entrada como el titular de la home (centrados en el eje, una línea, peso 400) */
#propuesta .head{max-width:none;justify-items:center;text-align:center}
#propuesta .head h1{white-space:nowrap;text-wrap:nowrap;font-weight:400}
#propuesta .head .cap{font-weight:400}
#propuesta{padding-bottom:calc(var(--s8) * 1.5)}
@media (max-width:1100px){#propuesta .head h1{white-space:normal;text-wrap:balance}}
/* Visores interactivos sin pie (Herramientas, Datos, Cómo funciona): la imagen habla sola */
.comparador figcaption,.ventana figcaption{display:none}
/* Selectores de los visores sin título visible (sigue para lectores de pantalla) y con un recuadro más ajustado */
.c-izq .capas legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-izq .capas{padding:var(--s2) var(--s3);gap:0}
.c-izq .capas fieldset{gap:2px}
.c-izq .capas{width:max-content;max-width:100%}
/* Sin filetes de sección alrededor de los cuatro bloques (Datos → bloques → Edades): aligeran la página */
#claves,#edades,#como-funciona{border-top:0}

/* Filetes parciales (no de margen a margen): ocultos; aparecen en petróleo al pasar el cursor (Dan, 25-10-2026) */
.facts>div,.steps li,.plans>div,.tools>div,.feats{border-top-color:transparent;transition:border-top-color .2s}
.games li{border-bottom-color:transparent;transition:border-bottom-color .2s}
.facts>div:hover,.steps li:hover,.plans>div:hover,.tools>div:hover,.plans>div:hover .feats{border-top-color:var(--teal)}
.games li:hover{border-bottom-color:var(--teal)}

/* Sin filetes grises al inicio de la página: cabecera, regla de etapas y primeras secciones de Recursos (Dan, 25-10-2026) */
header{border-bottom:0}
header .escala{border-top:0}
#aprender,#videos{border-top:0}
/* Vídeos: el filete del pie solo aparece al pasar por el vídeo, como los filetes parciales */
#videos figcaption{border-top-color:transparent;transition:border-top-color .2s}
#videos figure:hover figcaption,#videos figure:focus-within figcaption{border-top-color:var(--teal)}
/* Botones de catálogo: más pequeños y apoyados en el margen derecho (Dan, 25-10-2026) */
.packs{justify-content:flex-end;gap:var(--s2)}
.packbtn{padding:4px var(--s2);gap:0}
.packbtn b{font-size:var(--fs-xs)}
.packbtn span{font-size:13px}

/* Margen derecho único: el contenido llega a las mismas sangrías que la cabecera (24 px), sin tope de 1320 px (Dan, 25-10-2026) */
:root{--w:none}
.galeria.videos{max-width:none}
#fichas{border-top:0}
#pasos{border-top:0}
/* Suscripción: Demo y los tres planes en una sola línea, sin imagen (Dan, 25-10-2026) */
#planes .plans{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:899px){#planes .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){#planes .plans{grid-template-columns:minmax(0,1fr)}}
#centros .head > .cap{counter-increment:none}
#centros .head > .cap::before{content:none}
/* Académica Net: sus cuatro prestaciones en las mismas cuatro columnas que los planes (Dan, 25-10-2026) */
#centros .plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
@media (max-width:899px){#centros .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){#centros .plans{grid-template-columns:minmax(0,1fr)}}
#centros .head .btn{justify-self:start;margin-top:var(--s2)}
/* Capas: sin filete superior; los instrumentos arrancan a la altura de la imagen (el filete al pasar queda por encima) (Dan, 25-10-2026) */
#capas{border-top:0}
#capas .tools{margin-top:calc(-1 * (var(--s3) + 1px))}
#capas .tools h3{margin-top:-.2em}
/* El contexto también se dibuja: sin filete, titular más arriba y más aire hasta el visor (Dan, 25-10-2026) */
#datos{border-top:0;padding-top:var(--s5);row-gap:var(--s8)}

/* Filetes al pasar el cursor: debajo del texto, no encima (Dan, 25-10-2026) */
.facts>div,.steps li,.plans>div,.tools>div,.con-vista{border-top-color:transparent!important;border-bottom:1px solid transparent;padding-bottom:var(--s3);transition:border-color .2s}
.facts>div:hover,.steps li:hover,.plans>div:hover,.tools>div:hover,.con-vista:hover,.con-vista.activo{border-bottom-color:var(--teal)}
#videos figcaption{border-top-color:transparent!important;border-bottom:1px solid transparent;padding-bottom:var(--s2);transition:border-color .2s}
#videos figure:hover figcaption,#videos figure:focus-within figcaption{border-bottom-color:var(--teal)}
.games li{border-bottom-color:transparent}
.games li:hover{border-bottom-color:var(--teal)}

/* Presentación como documento descargable: ficha editorial a la izquierda, visor reducido apoyado en el margen derecho (Dan, 25-10-2026) */
#descarga{border-top:0}
.pres.doc{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--col-gap);align-items:end}
.doc-ficha{display:grid;gap:var(--s4);align-content:end;justify-items:start}
.doc-ficha .lead{max-width:44ch}
.doc-datos{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:var(--s2) var(--s6);margin:var(--s2) 0 var(--s3)}
.doc-datos div{display:grid;gap:2px}
.doc-datos dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.doc-datos dd{margin:0;font-size:var(--fs-m);font-variant-numeric:tabular-nums}
.pres.doc .btn-pres{grid-column:auto;order:0;justify-self:start;align-self:start}
.doc-visor{display:grid;justify-items:end;gap:var(--s2)}
.doc-visor .mini-visor{order:0;grid-column:auto;width:min(100%,520px)}
.doc-cont{margin:0;font-size:12px;color:var(--gris);font-variant-numeric:tabular-nums;letter-spacing:var(--caps)}
.doc-cont .doc-n{color:var(--ink)}
@media (max-width:900px){.pres.doc{grid-template-columns:minmax(0,1fr)}.doc-visor{justify-items:start}.doc-datos{grid-template-columns:repeat(2,auto)}}
/* Presentación, versión compacta: todo en el margen izquierdo; miniatura de la portada en lugar de visor; titular al tamaño de los demás (Dan, 25-10-2026) */
.pres.doc{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--s4)}
.pres.doc .head{gap:var(--s3)}
.doc-mini{display:block;width:120px;line-height:0;border:1px solid var(--line);transition:border-color .2s}
.doc-mini img{width:100%;height:auto;display:block}
.doc-mini:hover,.doc-mini:focus-visible{border-color:var(--teal)}
.pres.doc .doc-datos{margin:0}

/* Visores de la home: los cuatro con el mismo tamaño fijo (560 px, proporción de las capturas) para que escalen con el zoom como el texto (Dan, 25-10-2026) */
#capas .c-izq .foto,#como-funciona .c-izq .foto,#datos .ventana .foto,.juegos-tabla .mini-visor{width:min(100%,560px);max-width:560px}
#capas .c-izq .foto,#como-funciona .c-izq .foto{justify-self:start}
#datos .ventana .foto,.juegos-tabla .mini-visor{justify-self:end}
#capas .foto img,#como-funciona .c-izq .foto img,#datos .ventana .foto img,.juegos-tabla .mini-visor img{aspect-ratio:1976/1350;object-fit:cover;width:100%;height:auto}
/* En pantallas medianas, los de la columna derecha se reducen igual que los que comparten columna con el selector */
#datos .ventana .foto,.juegos-tabla .mini-visor{width:min(560px, calc(100% - 150px - var(--s4)))}
@media (max-width:900px){#capas .c-izq .foto,#como-funciona .c-izq .foto,#datos .ventana .foto,.juegos-tabla .mini-visor{width:min(100%,560px)}}

/* Suscripción: escala monocromática de petróleo, de Demo a Académica Net, como la regla de etapas (Dan, 25-10-2026) */
#planes .plans>div{--tono:var(--teal);position:relative;padding-top:calc(6px + var(--s4))}
#planes .plans>div::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--tono)}
#planes .plans>div:nth-child(1){--tono:#C2DADB}
#planes .plans>div:nth-child(2){--tono:#85B5B7}
#planes .plans>div:nth-child(3){--tono:#488F92}
#planes .plans>div:nth-child(4){--tono:#0B6A6E}
#planes .plans .cost{color:var(--teal);font-size:var(--fs-l)}
#planes .plans>div:last-child .cost{font-size:var(--fs-m)}
/* Entradillas en una sola línea, sin palabras sueltas en la línea siguiente (Dan, 25-10-2026) */
#planes .head{max-width:none}
#planes .head .lead{white-space:nowrap}
@media (max-width:900px){#planes .head .lead{white-space:normal}}
.lead,p{text-wrap:pretty}
/* Botón de compra al final de cada plan, alineados en la misma línea */
#planes .plans{align-items:stretch}
#planes .plans>div{display:flex;flex-direction:column;gap:var(--s2)}
#planes .plans>div>.btn{margin-top:auto;align-self:flex-start}
#planes .plans>div>.feats{margin-bottom:var(--s4)}
#centros > .btn{justify-self:start}
/* Suscripción: rótulo, titular y entradilla en el eje central, como Recursos y la home (Dan, 25-10-2026) */
#planes .head{max-width:none;justify-items:center;text-align:center;margin-bottom:var(--s7)}
#planes .head h1{font-weight:400}
#planes .head .cap{font-weight:400}

/* Recursos: vídeos tutoriales al final, antes del pie, con aire arriba y abajo (Dan, 25-10-2026) */
#videos{border-top:0;padding-block:calc(var(--s8) * 2)}

/* Todo escala con el zoom: un ancho máximo común (1440 px) para cabecera, regla, secciones y pie;
   la cabecera y la regla se alinean con el contenido, así que el margen derecho sigue siendo uno solo */
:root{--w:1440px}
@media (min-width:621px){
  header{padding-left:max(24px, calc((100% - var(--w)) / 2 + 24px));padding-right:max(24px, calc((100% - var(--w)) / 2 + 24px))}
  header .escala{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}
/* Bloque de la presentación: todo en peso normal, sin negritas (Dan, 25-10-2026) */
#descarga .head h2,#descarga .btn-pres,#descarga .btn-pres b,#descarga .btn-pres .sub{font-weight:400}
/* Suscripción, en espejo (aprobado por Dan): Demo e Individual apoyados en la sangría izquierda; Académica y Net, en la derecha (Dan, 25-10-2026) */
@media (min-width:900px){
  #planes .plans{column-gap:var(--s5)}
  #planes .plans>div:nth-child(2){margin-right:calc(var(--col-gap) / 2)}
  #planes .plans>div:nth-child(3){margin-left:calc(var(--col-gap) / 2)}
  #planes .plans>div:nth-child(n+3){text-align:right;align-items:flex-end}
  #planes .plans>div:nth-child(n+3)>.btn{align-self:flex-end}
  #planes .plans>div:nth-child(n+3) .feats{justify-items:end}
}

/* Cabecera: tipografía un punto mayor (Dan, 26-10-2026) */
header .nav a,header .langs a,header .btn{font-size:var(--fs-m)}
header .brand img{height:38px}
#esc-txt{font-size:var(--fs-s);font-variant-numeric:tabular-nums;transition:color .3s}
@media (max-width:760px){header .nav a,header .langs a,header .btn{font-size:var(--fs-xs)}header .brand img{height:28px}}

/* Home: recorrido por secciones. Cada sección tiene su color (el de su tramo en la regla); la regla marca dónde está el lector */
.escala.por-secciones .regla{align-items:end;height:10px}
.escala.por-secciones .regla i{height:4px;cursor:pointer;transition:height .25s,opacity .25s}
.escala.por-secciones .regla i.on{opacity:1}
.escala.por-secciones .regla i.actual{height:10px}
.escala.por-secciones .regla i:hover{opacity:1;height:8px}
main > .sec[data-n]::before{content:attr(data-n);justify-self:start;font-size:var(--fs-s);letter-spacing:var(--caps);font-variant-numeric:tabular-nums;color:var(--ink);
  padding-left:30px;line-height:1;background:linear-gradient(var(--sc),var(--sc)) left center / 22px 4px no-repeat}
/* Aparición suave */
html.aparece main > .sec:not(.intro) > *{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
html.aparece main > .sec:not(.intro) > *.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.aparece main > .sec:not(.intro) > *{opacity:1;transform:none;transition:none}}

/* Cabecera: más aire arriba y tipografía mayor (Dan, 26-10-2026, segunda vuelta) */
header{padding-top:var(--s6)}
header .nav a,header .langs a,header .btn{font-size:var(--fs-l)}
header .brand img{height:52px}
#esc-txt{font-size:var(--fs-m)}
@media (max-width:760px){header{padding-top:var(--s4)}header .nav a,header .langs a,header .btn{font-size:var(--fs-xs)}header .brand img{height:32px}}

/* Home: titular y entradilla sobre una banda de color a sangre (petróleo suave), para que no floten como en un PDF */
#inicio{position:relative;margin-top:var(--s5);padding-block:calc(var(--s8) * 1.25);
  background:var(--teal-soft);box-shadow:0 0 0 100vmax var(--teal-soft);clip-path:inset(0 -100vmax)}
#inicio .head h1{color:var(--teal)}
#inicio .head .lead{color:var(--ink)}
main > #inicio + .sec{padding-top:calc(var(--s8) * 1.25)}

/* Home: cada sección con un fondo transparente de su color (el de su tramo en la regla), a sangre (Dan, 26-10-2026) */
main > .sec[data-n]{--fondo:color-mix(in srgb, var(--sc) 12%, #fff);background:var(--fondo);box-shadow:0 0 0 100vmax var(--fondo);clip-path:inset(0 -100vmax)}

/* Sin contador de secciones junto a la regla (Dan, 26-10-2026): la regla llega sola al margen derecho */
#esc-txt{display:none}

/* Titular de la home sobre blanco (la primera sección ya va en amarillo); el título sigue en petróleo (Dan, 26-10-2026) */
#inicio{background:none;box-shadow:none;clip-path:none}

/* Sección 04 (etapas): fondo blanco, la barra de edades ya lleva los colores (Dan, 26-10-2026) */
main > #edades[data-n]{--fondo:#fff}

/* Leyenda de edades dentro de «Cómo funciona», antes de los juegos; la sección 04 propia desaparece (Dan, 26-10-2026) */
.edades-leyenda{display:grid;gap:var(--s4)}
.edades-leyenda .lead{margin:0}

/* Sin número visible en cada sección (Dan, 26-10-2026): data-n queda solo como dato interno para la regla */
main > .sec[data-n]::before{content:none;display:none}

/* Suscripción: precio al mes, línea de facturación y preguntas frecuentes (Dan, 26-10-2026) */
#planes .plans .mes{margin:-4px 0 0;font-size:var(--fs-s);color:var(--gris);font-variant-numeric:tabular-nums}
.pl-fact{margin:var(--s5) 0 0;text-align:center;font-size:var(--fs-s);color:var(--gris);letter-spacing:.02em}
#centros,#preguntas{border-top:0}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--col-gap)}
.faq h3{font-size:var(--fs-m);font-weight:500;text-transform:uppercase;letter-spacing:var(--caps);margin:0 0 var(--s2)}
.faq p{margin:0;max-width:60ch}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* Home, 26-10-2026: la presentación sobre blanco, separada de los juegos por una línea continua oscura a lo ancho del contenido (Dan) */
main > #descarga[data-n]{--fondo:#fff;background:linear-gradient(var(--ink),var(--ink)) top center / calc(100% - 48px) 1px no-repeat,#fff}

/* Home, primera pantalla de producto (Dan, 26-10-2026): dos botones y un mapa grande cuyas capas (política, física, muda) se funden despacio */
#inicio .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s3)}
.hero-mapa{position:relative;margin:var(--s6) auto 0;width:min(100%,1100px);aspect-ratio:1992/1362;border:1px solid var(--line);overflow:hidden;background:var(--soft)}
.hero-mapa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;animation:capa 18s infinite}
.hero-mapa img:nth-child(1){animation-delay:-1.2s}
.hero-mapa img:nth-child(2){animation-delay:6s}
.hero-mapa img:nth-child(3){animation-delay:12s}
@keyframes capa{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}
.hero-mapa img:nth-child(1){opacity:1}
@media (prefers-reduced-motion:reduce){.hero-mapa img{animation:none;opacity:0}.hero-mapa img:nth-child(1){opacity:1}}
#inicio{padding-bottom:var(--s8)}

/* Home: estante de la colección — seis portadas grandes, una por edad, que llevan a Recursos filtrado (Dan, 26-10-2026) */
.estante{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s5)}
.libro{display:grid;gap:var(--s2);align-content:start;text-decoration:none;color:var(--ink)}
.libro img{width:100%;height:auto;display:block;border:1px solid var(--line);box-shadow:0 1px 0 rgba(19,35,44,.04);transition:transform .25s ease,border-color .25s ease}
.libro:hover img,.libro:focus-visible img{transform:translateY(-4px);border-color:var(--teal)}
.libro .edad{font-size:var(--fs-xs);color:var(--gris);font-variant-numeric:tabular-nums}
.libro b{font-size:var(--fs-s);font-weight:500;line-height:1.35}
.libro:hover b{color:var(--teal)}
#coleccion > .btn{justify-self:start}
@media (max-width:1100px){.estante{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.estante{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}}
@media (prefers-reduced-motion:reduce){.libro img{transition:none}.libro:hover img{transform:none}}

/* Ficha como página de producto: portada grande a la izquierda, ficha técnica a la derecha (propuesta E, 26-10-2026) */
.ficha.producto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);align-items:start}
.producto .portada .marco{background:var(--soft)}
.producto .portada img{max-height:none}
.datos-ficha{display:grid;gap:var(--s6);align-content:start;min-width:0}
.tecnica{width:100%;border-collapse:collapse;font-size:var(--fs-m)}
.tecnica caption{text-align:left;padding-bottom:var(--s3)}
.tecnica th,.tecnica td{padding:var(--s3) 0;border-bottom:1px solid transparent;text-align:left;vertical-align:baseline;transition:border-color .2s}
.tecnica th{width:38%;padding-right:var(--s4);font-size:var(--fs-xs);font-weight:500;text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.tecnica tr:hover th,.tecnica tr:hover td{border-bottom-color:var(--teal)}
.tira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
#paginas{display:grid;gap:var(--s5)}
.estante.tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:calc((100% - var(--col-gap)) / 2)}
@media (max-width:900px){.ficha.producto{grid-template-columns:minmax(0,1fr);gap:var(--s6)}.producto .portada{max-width:520px}.tira{grid-template-columns:repeat(2,minmax(0,1fr))}.estante.tres{max-width:none}}
@media (min-width:901px){.datos-ficha{position:sticky;top:calc(var(--cab, 120px) + var(--s5))}}
/* GeoKids y GeoMundi: apps propias en desarrollo, apartadas de la herramienta Juegos (Dan, 27-10-2026) */
.submarcas-aparte{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s7)}
.submarcas-aparte .submarcas{margin-top:0}
.submarcas-aparte .meta{margin:0}
.jue-nota{margin-top:var(--s5)}
/* Suscripción: las fichas para el docente, en todos los planes (Dan, 27-10-2026) */
.plans .incl{font-size:var(--fs-s);color:var(--gris);max-width:32ch}
/* Estante de fichas en el eje central: tres portadas en cada columna y el centro libre (INTERN CREATIVO, 27-10-2026) */
@media (min-width:1101px){
  .estante:not(.tres){grid-template-columns:repeat(3,minmax(0,1fr)) calc(var(--col-gap) - 2 * var(--s5)) repeat(3,minmax(0,1fr));column-gap:var(--s5)}
  .estante:not(.tres) > :nth-child(4){grid-column:5}
}
/* Recursos: «Aprender» y «Pasos» en dos columnas en espejo, cada una apoyada en su margen (libro de estilo, 09 Composición; Dan, 27-10-2026) */
@media (min-width:900px){
  #aprender .steps,#pasos .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s7)}
  #aprender .steps>li:nth-child(even),#pasos .steps>li:nth-child(even){text-align:right;justify-items:end}
}
/* Recorrido de la home en seis tramos (Dan, 27-10-2026): 03 «El mapa, en el trabajo de clase» usa la misma ventana que Datos */
#claves{border-top:0;row-gap:var(--s6)}
#claves .ventana .foto{width:min(560px, calc(100% - 150px - var(--s4)));max-width:560px;justify-self:end}
#claves .ventana .foto img{aspect-ratio:1976/1350;object-fit:cover;width:100%;height:auto}
@media (max-width:900px){#claves .ventana .foto{width:min(100%,560px)}}
#descarga .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s6);justify-self:stretch;width:100%}
/* Recursos: dos párrafos en espejo de tres líneas (Dan, 27-10-2026) */
#aprender .steps p{max-width:520px}

/* Tramo 02 · Así se construye un mapa (Dan, 28-10-2026): textos a la izquierda, pila de capas a la derecha, en espejo.
   Sin colores de edad en el dibujo: tinta, gris y líneas; el petróleo solo marca la capa que se señala. */
.pila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--col-gap);align-items:center}
.pila .steps{grid-template-columns:minmax(0,1fr);gap:var(--s5);max-width:520px}
.pila .steps li.on{border-bottom-color:var(--teal)}
.pila .steps li.on h3{color:var(--teal)}
.pila-fig{margin:0;justify-self:end;width:min(100%,560px)}
.pila-fig svg{display:block;width:100%;height:auto;overflow:visible}
.pila .capa{transform:translateY(calc(var(--j) * 56px));transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .3s}
.pila.abierta .capa{transform:none}
.pila.abierta .capa.on{transform:translateY(-10px)}
.pila.marcada .capa:not(.on){opacity:.4}
.pila .plano{fill:#FFFFFF;fill-opacity:.82;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .2s}
.pila .capa.on .plano{stroke:var(--teal);stroke-width:1.6}
.pila .relieve{fill:var(--ink);fill-opacity:var(--o);stroke:var(--gris);stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke}
.pila .trazo{fill:none;stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke}
.pila .fino{fill:none;stroke:var(--gris);stroke-width:1;vector-effect:non-scaling-stroke}
.pila .lago{fill:var(--gris);fill-opacity:.35}
.pila .fantasma{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.pila .rejilla{fill:none;stroke:var(--gris);stroke-opacity:.45;stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.pila .placa{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:7 5;vector-effect:non-scaling-stroke}
.pila .punto{fill:var(--ink)}
.pila .capa.on .punto,.pila .capa.on .trazo{stroke:var(--teal)}
.pila .capa.on .punto{fill:var(--teal)}
.pila text{font-family:var(--ui);font-size:22px;font-weight:500;fill:var(--ink);letter-spacing:.04em}
.pila text.cordillera{fill:var(--gris);font-size:18px;letter-spacing:.3em}
@media (max-width:900px){.pila{grid-template-columns:minmax(0,1fr)}.pila-fig{order:-1;justify-self:center;width:min(100%,420px)}.pila .steps{max-width:none}}
@media (prefers-reduced-motion:reduce){.pila .capa{transition:none;transform:none}}

/* Tramo 03: nota «En desarrollo» al pie del visor */
.ses-nota{margin-top:var(--s6)}
/* Pila del tramo 02: el mapa real de cada capa, en transparencia bajo el dibujo (Dan, 28-10-2026) */
.pila .foto-capa{opacity:.38;transition:opacity .3s}
.pila .capa.on .foto-capa{opacity:.7}
.brand picture{display:block}

/* Sobre nosotros (Dan, 30-10-2026): dos columnas iguales sobre el eje central; texto e imagen se alternan */
#sobre .head{max-width:none;justify-items:center;text-align:center}
#sobre .head p{max-width:68ch}
.sn-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--col-gap, var(--s7));align-items:center}
.sn-txt{display:grid;gap:var(--s3);max-width:520px}
.sn-txt h2{font-size:var(--fs-l)}
.sn-txt h3{font-size:var(--fs-m);margin-top:var(--s4)}
.sn-par.espejo .sn-txt{justify-self:end}
.sn-par .foto .marco{aspect-ratio:2000/1370;align-items:center}
.sn-par .foto img{height:100%;object-fit:contain}
.sn-cierre{text-align:center;font-size:var(--fs-l);line-height:1.65;max-width:68ch;margin:var(--s6) auto 0}
#en-el-aula .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
@media (max-width:900px){.sn-par{grid-template-columns:minmax(0,1fr)}.sn-par .foto{order:-1}.sn-par.espejo .sn-txt{justify-self:start}.sn-txt{max-width:none}}

/* Cabecera (opción A, Dan, 30-10-2026): arriba, idiomas y «Entra en la app»; el logo solo en el eje; debajo, las pestañas.
   La cabecera se desplaza con la página y solo las pestañas quedan fijas arriba (js/cabecera.js) */
header.cab{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:none;justify-items:center;row-gap:0;padding-top:var(--s3)}
header.cab .brand,header.cab .escala{grid-area:auto;justify-content:center}
header.cab .escala{justify-self:stretch}
header.cab .util{justify-self:stretch;display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--s3)}
header.cab .util .langs a{font-size:var(--fs-s)}
header.cab .util .btn{border-color:var(--ink);font-size:var(--fs-s)}
header.cab .util .btn:hover{border-color:var(--teal)}
header.cab .brand{padding-block:var(--s4) var(--s5)}
header.cab .brand img{height:60px}
header.cab .tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s2) var(--s7);padding-block:var(--s3) var(--s2);justify-self:stretch;border-top:1px solid var(--line)}
header.cab .tabs a{font-size:var(--fs-m);text-transform:uppercase;letter-spacing:var(--caps);text-decoration:none;padding-bottom:4px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
header.cab .tabs a:hover,header.cab .tabs a:focus-visible{color:var(--teal)}
header.cab .tabs a[aria-current="page"]{border-bottom-color:var(--ink)}
@media (max-width:760px){
  header.cab .brand img{height:34px}
  header.cab .tabs{gap:var(--s1) var(--s4)} header.cab .tabs a{font-size:var(--fs-xs)}
  header.cab .util .btn{padding:4px var(--s2);font-size:var(--fs-xs)}
}
@media (prefers-reduced-motion:reduce){header.cab .tabs a{transition:none}}

/* Contacto (Dan, 30-10-2026): sencillez de danaparicio.com. Mucho aire y sangrías en espejo:
   el resumen arriba a la izquierda, el contacto abajo a la derecha */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec.contacto{grid-template-columns:repeat(2,minmax(0,1fr));min-height:62vh;padding-block:var(--s8);align-content:stretch;--sangria:clamp(0px,8vw,128px)}
.ct-izq{display:grid;gap:var(--s5);align-content:start;justify-items:start;max-width:420px;margin-left:var(--sangria)}
.ct-logo{display:block;height:24px;width:auto}
.ct-izq p{margin:0}
.ct-der{display:grid;gap:var(--s3);align-self:end;justify-self:end;justify-items:end;text-align:right;margin-right:var(--sangria)}
.ct-der address{font-style:normal;margin-top:var(--s3);font-size:var(--fs-s);color:var(--gris);line-height:1.6}
@media (max-width:760px){.sec.contacto{grid-template-columns:minmax(0,1fr);min-height:0;gap:var(--s7)}.ct-izq,.ct-der{margin:0}}
.ct-der .btn.correo{text-transform:none;letter-spacing:.02em}
/* Estante de la home sin enlaces (Dan, 30-10-2026): las portadas no reaccionan al cursor */
div.libro:hover img{transform:none;border-color:var(--line)} div.libro:hover b{color:inherit}

/* Visor de los juegos (Dan, 30-10-2026): índice numerado como leyenda a la izquierda, escena a la derecha, en espejo.
   La barra lleva un tramo por pantalla con el color de su edad; cada pantalla entra con un círculo que se abre */
.jv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--col-gap);align-items:start}
.jv-txt{display:grid;gap:var(--s5);min-width:0;max-width:520px}
.jv-indice{list-style:none;margin:0;padding:0;display:grid;counter-reset:jv}
.jv-indice button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s3);align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s);line-height:1.4;transition:color .2s,border-color .2s}
.jv-indice .n{font-size:var(--fs-xs);color:var(--gris);font-variant-numeric:tabular-nums}
.jv-indice b{font-weight:500}
.jv-indice .e{font-size:var(--fs-xs);color:var(--gris);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.jv-indice .e::before{content:"";width:8px;height:8px;background:var(--c)}
.jv-indice button:hover,.jv-indice button:focus-visible{color:var(--teal);border-bottom-color:var(--teal)}
.jv-indice button[aria-current="true"]{border-bottom-color:var(--ink)}
.jv-indice button[aria-current="true"] .n{color:var(--ink)}
.jv-escena{margin:0;display:grid;gap:var(--s3);min-width:0;width:100%;justify-self:end;position:sticky;top:96px}
.jv-barra{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:4px}
.jv-barra i{position:relative;background:var(--line);overflow:hidden}
.jv-barra i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left}
.jv-barra i.hecho::after{transform:scaleX(1);opacity:.45}
.jv-barra i.va::after{animation:jv-llena var(--dura,5200ms) linear forwards}
.jv-barra i.frena::after{animation-play-state:paused}
@keyframes jv-llena{to{transform:scaleX(1)}}
.jv-marco{position:relative;aspect-ratio:1400/860;border:1px solid var(--line);background:var(--soft);overflow:hidden;touch-action:pan-y}
.jv-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0}
.jv-marco img.on{opacity:1;z-index:2;animation:jv-entra .85s cubic-bezier(.2,.7,.2,1) both, jv-deriva 9s ease-out .2s both}
.jv-marco img.sale{opacity:1;z-index:1}
@keyframes jv-entra{from{clip-path:circle(0% at var(--x,100%) 50%)}to{clip-path:circle(150% at var(--x,100%) 50%)}}
@keyframes jv-deriva{from{transform:scale(1)}to{transform:scale(1.035)}}
.jv-escena figcaption{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;font-size:var(--fs-s);line-height:1.4;border-top:1px solid var(--ink);padding-top:var(--s2)}
.jv-n{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--gris)}
.jv-t{font-weight:500;min-width:0}
.jv-e{color:var(--gris);font-size:var(--fs-xs);margin-left:var(--s2)}
.jv-ctrl{display:flex;gap:var(--s1)}
.jv-ctrl button{border:1px solid var(--ink);background:#fff;color:var(--ink);font:inherit;font-size:var(--fs-xs);letter-spacing:var(--caps);text-transform:uppercase;padding:4px 10px;line-height:1.4;cursor:pointer;transition:color .2s,border-color .2s}
.jv-ctrl button:hover,.jv-ctrl button:focus-visible{color:var(--teal);border-color:var(--teal)}
.jv .games{grid-column:1 / -1;margin-top:var(--s5)}
@media (max-width:900px){
  .jv{grid-template-columns:minmax(0,1fr)}
  .jv-txt{display:contents} .jv .jt-head{order:0} .jv-indice{order:2} .jv .games{order:3}
  .jv-escena{order:1;justify-self:stretch;width:100%;position:static}
  .jv-escena figcaption{grid-template-columns:auto minmax(0,1fr)} .jv-ctrl{grid-column:1 / -1;justify-content:flex-end}
  .jv-txt{max-width:none}
  .jv-indice{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s2);padding-bottom:var(--s2)}
  .jv-indice li{scroll-snap-align:start}
  .jv-indice button{grid-template-columns:auto auto;border:1px solid var(--line);padding:6px 10px;gap:var(--s2)}
  .jv-indice .e{display:none}
  .jv-indice button[aria-current="true"]{border-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.jv-marco img.on{animation:none}.jv-barra i.va::after{animation:none;transform:scaleX(1)}.jv-indice button,.jv-ctrl button{transition:none}}
/* Presentación (Dan, 30-10-2026): la entradilla arriba, la miniatura y, debajo, el título como botón con el icono de PDF */
#descarga .btn-pres{gap:var(--s2);font-size:var(--fs-m);letter-spacing:var(--caps);text-transform:uppercase}
#descarga .btn-pres .ico-pdf{width:18px;height:21px;margin-left:var(--s2)}
/* Tarjeta de la presentación (Dan, 30-10-2026): la estética de la portada del PDF. Fondo Laguna, título abajo a la izquierda,
   símbolo arriba a la derecha y el icono de PDF en la esquina, como el número de página */
.pres-tarjeta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;width:min(100%,420px);aspect-ratio:16/9;padding:var(--s5);background:#40CCD5;color:var(--ink);text-decoration:none;border:1px solid transparent;transition:border-color .2s,transform .25s ease}
.pt-simbolo{grid-column:2;grid-row:1 / span 2;width:72px;height:72px;justify-self:end}
.pt-tit{grid-column:1;grid-row:3;align-self:end;font-size:var(--fs-s);font-weight:600;text-transform:uppercase;letter-spacing:var(--caps);line-height:1.35}
.pt-tit .sep{font-weight:400;margin:0 var(--s2)}
.pres-tarjeta .ico-pdf{grid-column:2;grid-row:3;align-self:end;justify-self:end;width:16px;height:19px}
.pres-tarjeta:hover,.pres-tarjeta:focus-visible{border-color:var(--teal);transform:translateY(-3px)}
.pres-tarjeta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pres-tarjeta{transition:none}.pres-tarjeta:hover{transform:none}}
/* Tarjeta de la presentación en proporción áurea y a menor escala (Dan, 30-10-2026) */
.pres-tarjeta{width:min(100%,288px);aspect-ratio:1.618/1;padding:var(--s4)}
.pt-simbolo{width:46px;height:46px}
.pt-tit{font-size:var(--fs-xs)}
.pt-tit .sep{margin:0 6px}
.pres-tarjeta .ico-pdf{width:13px;height:15px}
/* El icono de PDF, fuera de la tarjeta, al pie de su esquina derecha (Dan, 30-10-2026) */
.pt-fila{display:flex;align-items:flex-end;gap:var(--s2)}
.pt-fila > .ico-pdf{width:16px;height:19px;flex:none;color:var(--ink)}
.pt-tit{grid-column:1 / -1}
.pt-fila > .pres-tarjeta{flex:0 1 288px}
/* Escala de Fibonacci (Dan, 30-10-2026): tarjeta de 233 × 144 (proporción áurea); márgenes 13, símbolo 34, icono 21 × 13 */
.pt-fila > .pres-tarjeta{flex:none;width:233px;height:144px;aspect-ratio:auto;padding:13px}
.pt-simbolo{width:34px;height:34px}
.pt-tit{font-size:13px;line-height:1.3}
.pt-fila{gap:8px}
.pt-fila > .ico-pdf{width:13px;height:21px}
/* Tarjeta de la presentación con la portada del PDF (Dan, 30-10-2026): 233 × 144 en proporción áurea; marco amarillo
   (paleta de 6–7 años) de 8 px a los lados y 11 arriba y abajo, para que la portada entre entera a 16:9.
   El icono de PDF rojo va arriba a la derecha, a la altura del logo de la portada y con su mismo margen, en espejo */
.pres-tarjeta{display:block;width:233px;height:144px;aspect-ratio:auto;padding:11px 8px;background:#FFCD00;border:0;transition:background-color .2s,transform .25s ease}
.pres-tarjeta:hover,.pres-tarjeta:focus-visible{background:#F2B705;transform:translateY(-3px)}
.pt-img{position:relative;display:block;width:100%;height:100%;line-height:0}
.pt-img img{width:100%;height:100%;object-fit:cover;display:block}
.pt-img .pdf-rojo{position:absolute;right:6.7%;top:calc(11% - 10.5px);width:17px;height:21px;filter:drop-shadow(0 1px 1px rgba(19,35,44,.18))}
/* Pie con sangrías en espejo (Dan, 30-10-2026): sobre los dos ejes, el bloque de la izquierda arranca en el margen izquierdo
   y el de la derecha termina en el margen derecho, con el texto alineado a ese margen */
@media (min-width:981px){
  footer .sec{grid-template-columns:auto auto minmax(var(--s7),1fr) auto auto}
  footer .sec > div:nth-child(3),footer .sec > div:nth-child(4){text-align:right}
}
/* Contacto sobrio (Dan, 30-10-2026): enlaces de texto, sin botones; petróleo al pasar */
.ct-der{gap:2px}
.ct-der a{color:var(--ink);text-decoration:none;font-size:var(--fs-s);line-height:1.6;transition:color .2s}
.ct-der a:hover,.ct-der a:focus-visible{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.ct-der address{margin-top:0;color:var(--ink)}
/* Pie a menor escala (Dan, 30-10-2026): letra 11, interlíneas y separaciones más cortas; el logo se queda en 24, su mínimo */
footer{--fs-pie:11px}
footer ul{gap:3px;margin-top:var(--s2)}
footer .sec{padding-block:var(--s3) var(--s2)}
.foot-brand{padding-top:var(--s4)}
.colofon{padding-bottom:var(--s3)}
@media (min-width:981px){footer .sec{column-gap:var(--s5)}}
.sn-txt .lead{margin-bottom:var(--s2)}
/* Pies de foto sobrios (Dan, 30-10-2026): sin número ni caja, sin filete, en una línea: título y detalle seguidos */
.foto figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);border-top:0;padding-top:0;font-size:var(--fs-xs);line-height:1.5;counter-increment:none}
.foto figcaption::before{content:none}
.foto figcaption b{font-weight:500;text-transform:none;letter-spacing:.02em}
.foto figcaption i{font-style:normal;color:var(--gris)}
.foto figcaption i::before{content:"· ";color:var(--gris)}
/* Sobre nosotros: entradilla más ligera y un punto menor (Dan, 30-10-2026). Jost es variable: el 300 sale del mismo archivo */
#sobre .head .lead{font-weight:300;font-size:var(--fs-m);line-height:1.7}
/* Sobre nosotros (Dan, 30-10-2026): la imagen nunca supera la altura del texto que la acompaña y va con transparencia.
   contain:size hace que la figura no cuente para la altura de la fila; se estira a la del texto y la imagen se encaja dentro */
@media (min-width:901px){
  .sn-par{align-items:stretch}
  .sn-par > .foto{contain:size;display:flex;flex-direction:column;gap:var(--s2);min-height:0}
  .sn-par > .foto .marco{flex:1;min-height:0;aspect-ratio:auto;border:0;background:none;display:flex;align-items:center;justify-content:center}
  .sn-par > .foto img{width:100%;height:100%;max-height:none;object-fit:contain}
}
.sn-par .foto img{opacity:.72}

/* Pantalla de entrada de la home (Dan, 30-10-2026): el mapa político a toda pantalla al 16 % y el logo vertical en el eje,
   a 144 px (escala de Fibonacci); debajo, «Entra», y abajo, los idiomas. Solo se ve con html.con-entrada (ver SPLASH_HEAD) */
.entrada{display:none}
html.con-entrada{overflow:hidden}
html.con-entrada .entrada{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);cursor:pointer;transition:opacity .5s ease}
html.entrada-sale .entrada{opacity:0}
.en-mapa{position:absolute;inset:0;background:url("/img/app/entrada-pacifico.jpg") center/cover no-repeat;opacity:.16;animation:en-deriva 40s ease-in-out infinite alternate}
@keyframes en-deriva{from{transform:scale(1.06) translate(-1%,0)}to{transform:scale(1.06) translate(1%,-1%)}}
.entrada::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));background-size:min(90vw,610px) min(70vh,377px);background-position:center;background-repeat:no-repeat;pointer-events:none}
.en-centro{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:34px;color:var(--ink);text-decoration:none}
.en-centro img{width:144px;height:auto;display:block}
.en-entra{font-size:var(--fs-s);font-weight:500;letter-spacing:var(--caps);text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.en-centro:hover .en-entra,.en-centro:focus-visible .en-entra{color:var(--teal);border-color:var(--teal)}
.en-centro:focus-visible{outline:none}
.en-langs{position:absolute;z-index:1;left:0;right:0;bottom:max(34px,env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:21px;font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--caps)}
.en-langs a{color:var(--gris);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.en-langs a:hover{color:var(--teal);border-color:var(--teal)}
.en-langs a.on{color:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.en-mapa{animation:none}.entrada{transition:none}}
/* Entrada sin eurocentrismo (Dan, 30-10-2026): mapamundi de la app con el Pacífico en el centro, América a la derecha y Asia y Oceanía a la izquierda */
.en-mapa{background-image:url("/img/app/entrada-pacifico.jpg")}
/* Fondo de entrada (Dan, 8-11-2026): el Pacífico en relieve, sin rótulos ni fronteras, a 2560 px; más presencia que el anterior */
.en-mapa{background-image:url("/img/app/entrada-relieve.jpg");opacity:.32}
@media (max-width:1280px){.en-mapa{background-image:url("/img/app/entrada-relieve-1280.jpg")}}

/* Títulos y entradillas homogéneos en toda la web (Dan, 30-10-2026): título en mayúsculas a 15 px y en 600; entradilla
   también a 15 px, en 500 para distinguirla del texto (400); 13 px entre título y entradilla, y la misma distancia
   desde el filete de color de cada tramo hasta su título */
main > .sec:not(.intro) .head > h2,.jt-head h3,.sn-txt h2,.legal .head h1{font-size:var(--fs-m);font-weight:600;letter-spacing:var(--caps);line-height:1.4}
main > .sec:not(.intro) .head,.jt-head,.sn-txt{gap:13px}
main > .sec:not(.intro) .head > .lead,.jt-head > p,.sn-txt > .lead,#descarga .lead{font-size:var(--fs-m);font-weight:500;line-height:1.65}
main > .sec:not(.intro){padding-top:var(--s8)}
#datos{padding-top:var(--s8)}
/* La cabecera entera baja con el scroll (Dan, 30-10-2026): idiomas, «Entra en la app», logo y pestañas, siempre a la vista */
header.cab{top:env(safe-area-inset-top, 0px)}
/* Con la cabecera entera fija (unos 252 px en escritorio), el visor de juegos y los saltos a cada tramo quedan por debajo */
.sec{scroll-margin-top:270px}
@media (min-width:901px){.jv-escena{top:270px}}
@media (max-width:760px){.sec{scroll-margin-top:200px}}
/* Presentación sobre los dos ejes (Dan, 30-10-2026): la entradilla en la columna izquierda, centrada en altura con la tarjeta,
   y la tarjeta en la derecha, alineada al margen derecho; en móvil, una debajo de la otra */
@media (min-width:761px){
  #descarga .pres.doc{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-items:stretch;column-gap:var(--col-gap)}
  #descarga .pres.doc > .lead{grid-column:1;grid-row:1;max-width:420px;margin:0}
  #descarga .pres-tarjeta{grid-column:2;grid-row:1;justify-self:end}
}

/* Selector de moneda (Dan, 30-10-2026): sin botón ni marco; «$» a la izquierda y «€» a la derecha, con una barra fina negra.
   La moneda activa en tinta, la otra en gris; petróleo al pasar el cursor */
.moneda{display:inline-flex;align-items:center;gap:5px;margin-left:var(--s3);vertical-align:middle;font-size:var(--fs-xs);font-weight:500;line-height:1;color:var(--gris)}
.moneda button{all:unset;cursor:pointer;padding:2px 1px;color:var(--gris);transition:color .2s}
.moneda button[aria-pressed="true"]{color:var(--ink)}
.moneda button:hover,.moneda button:focus-visible{color:var(--teal)}
.moneda button:focus-visible{outline:1px solid var(--teal);outline-offset:2px}
.moneda i{display:block;width:1px;height:11px;background:var(--ink)}
@media (prefers-reduced-motion:reduce){.moneda button{transition:none}}

/* Visor de juegos sin botones (Dan, 30-10-2026): se pasa tocando la imagen; el tramo actual de la barra, lleno */
.jv-barra i.va::after{animation:none;transform:scaleX(1)}
.jv-marco{cursor:e-resize}
.jv-marco[data-lado="atras"]{cursor:w-resize}
.jv-marco:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.jv-escena figcaption{grid-template-columns:auto minmax(0,1fr)}

/* Móvil (Dan, 30-10-2026, probado a la medida del iPhone 13 mini, 375 px): todo un punto más pequeño, pestañas en una
   sola línea, selector de capas en una línea, pies de foto en una línea y columnas en espejo */
@media (max-width:760px){
  :root{--fs-xs:11px;--fs-s:12px;--fs-m:14px;--fs-l:15px;--fs-xl:18px}
  header.cab .tabs{flex-wrap:nowrap;justify-content:space-between;gap:0 8px;overflow-x:auto;scrollbar-width:none}
  header.cab .tabs::-webkit-scrollbar{display:none}
  header.cab .tabs a{font-size:10px;letter-spacing:.03em;white-space:nowrap;flex:none}
  header.cab .util .langs a,header.cab .util .btn{font-size:11px}
  .intro .head h1,#inicio h1{font-size:var(--fs-xl)}
  main > .sec:not(.intro) .head > h2,.jt-head h3,.sn-txt h2{font-size:13px}
  /* Selector de capas del comparador: una sola línea, sangría a la izquierda y más pequeño */
  .comparador .capas{padding:var(--s2) var(--s3);justify-self:start;max-width:100%}
  .comparador .capas fieldset{display:flex;flex-wrap:nowrap;gap:var(--s3);overflow-x:auto}
  .comparador .capas legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .comparador .capas label{font-size:var(--fs-xs);white-space:nowrap;gap:5px}
  .comparador .capas input{width:12px;height:12px}
  /* Pies de foto: siempre una línea */
  .foto figcaption,.comparador figcaption,.ventana figcaption,.jv-escena figcaption{display:flex;flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap;overflow:hidden;gap:0 6px;font-size:var(--fs-xs);flex-direction:row}
  .foto figcaption b{flex:none}
  .foto figcaption i,.comparador figcaption i,.ventana figcaption i{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
  /* Dos columnas en espejo: la izquierda alineada a la izquierda y la derecha, a la derecha */
  .tools{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
  .tools > :nth-child(even){text-align:right}
  .tools > :nth-child(even) .fx{justify-content:flex-end}
}

/* Pantallas grandes (criterio, 30-10-2026). Portátiles de 13 y 14 pulgadas: unos 1280–1512 px de ancho útil (MacBook Air 13:
   1440; MacBook Pro 14: 1512; Windows de 13–14: 1280–1536): el diseño de siempre. Monitores de 24–27 pulgadas a 1920 px o más:
   la caja crece un poco para no dejar los márgenes vacíos. Pizarra digital (65–86 pulgadas, 1920 px a escala, táctil y vista
   desde 2–6 m): se reconoce por la pantalla grande con puntero táctil y sube todo el texto y los toques */
@media (min-width:1800px){:root{--w:1440px}}
@media (min-width:1200px) and (pointer:coarse){
  :root{--fs-xs:15px;--fs-s:16px;--fs-m:18px;--fs-l:20px;--fs-xl:28px}
  header.cab .tabs a,header.cab .util .btn,header.cab .langs a{font-size:var(--fs-m);padding-block:8px}
  .jv-indice button{padding-block:12px}
}
.jv-marco{aspect-ratio:2800/1604}

/* Pies de foto: siempre sin número, en una línea y sin negrita, en toda la web (Dan, 31-10-2026) */
figcaption b,figcaption strong,.foto figcaption b,.comparador figcaption b,.ventana figcaption b,.mini-visor figcaption b,.jv-escena .jv-t{font-weight:inherit}
.jv-n{display:none}

/* Pies de foto (Dan, 31-10-2026): siempre debajo de la imagen, empezando en su borde inferior izquierdo, y en una sola línea.
   No cambia qué pies se ven (los visores sin pie siguen sin él); solo cómo se colocan los que se ven. */
figure.foto,figure.jv-escena{justify-items:start}
.foto figcaption,.mini-visor figcaption,.jv-escena figcaption{flex-wrap:nowrap;justify-content:flex-start;align-items:baseline;flex-direction:row;white-space:nowrap;overflow:hidden;text-align:left;gap:0 6px;width:100%;justify-self:start}
.foto figcaption b,.mini-visor figcaption b{flex:none}
.foto figcaption i,.mini-visor figcaption i{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* Sobre nosotros: las tres imágenes, del mismo tamaño que las de la home (560 px de ancho como máximo, proporción 1976/1350),
   recortadas para llenar su marco; el pie, debajo y a la izquierda (Dan, 31-10-2026) */
.sn-par{align-items:center}
.sn-par > .foto{contain:none;display:grid;gap:var(--s2);width:min(560px, calc(100% - 150px - var(--s4)));justify-self:start}
@media (max-width:900px){.sn-par > .foto{width:min(100%,560px)}}
.sn-par.espejo > .foto{justify-self:start}
.sn-par > .foto .marco{flex:none;aspect-ratio:1976/1350;width:100%;height:auto;display:block}
.sn-par > .foto img{width:100%;height:100%;object-fit:cover;max-height:none}

/* Visor de juegos: el pie, título y edad, también en una sola línea */
.jv-escena figcaption > span:not(.jv-n){display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Planes (Dan, 31-10-2026): los cuatro planes, algo más pequeños en escala y con aire alrededor (89 % del ancho, centrados);
   la nota de facturación, al final de la página y separada del pie */
@media (min-width:900px){#planes .plans{width:89%;margin:var(--s6) auto var(--s7)}}
#facturacion{border-top:0;padding-top:var(--s7);padding-bottom:var(--s8)}
#facturacion .pl-fact{margin:0 auto;max-width:89%}
@media (max-width:899px){#facturacion .pl-fact{max-width:none}}
/* Características de los planes: si «Compartir y exportar en JPG y PDF» no cabe, parte solo entre «exportar» y «en» (espacios duros en el texto) */

/* Relieve (Dan, 2-11-2026): fondo blanco roto, textos en tarjetas blancas, esquinas redondeadas,
   botones en píldora y elevación con sombra suave. Inspirado en wearecollins.com, sin copiarlo:
   radios y sombras con la serie de Fibonacci (8·13·21·34); petróleo solo en la interacción. */
:root{
  --bg:#F7F6F2; --card:#FFFFFF;
  --r-img:13px; --r-card:21px;
  --elev-1:0 1px 2px rgba(19,35,44,.04),0 8px 21px rgba(19,35,44,.06);
  --elev-2:0 2px 5px rgba(19,35,44,.05),0 13px 34px rgba(19,35,44,.11);
  --suave:cubic-bezier(.19,1,.22,1);
}
main > .sec[data-n]{--fondo:color-mix(in srgb, var(--sc) 12%, var(--bg))}
main > #edades[data-n],main > #descarga[data-n]{--fondo:var(--bg)}
main > #descarga[data-n]{background:var(--bg)}

/* Botones en píldora: blancos, texto negro; petróleo y elevación al pasar */
.btn,.uso{border-radius:999px;min-height:44px;padding:0 var(--s5);background:var(--card);border:1px solid var(--ink);justify-content:center;
  transition:color .3s var(--suave),border-color .3s var(--suave),box-shadow .6s var(--suave),transform .6s var(--suave)}
.btn.sm{min-height:34px;padding:0 var(--s4)}
.btn:hover,.uso:hover{color:var(--teal);border-color:var(--teal);box-shadow:var(--elev-1);transform:translateY(-1px)}
.btn:active,.btn[aria-pressed="true"],a.btn[aria-current="page"],.uso[aria-pressed="true"]{background:var(--card);color:var(--teal);border-color:var(--teal);box-shadow:none;transform:none}
header .btn{min-height:38px;padding:0 var(--s5);border-color:var(--ink);background:var(--card)}
header .btn:hover,header .btn:focus-visible{background:var(--card)}
.btn.btn-pres{min-height:44px;padding-block:var(--s2)}
@media (max-width:560px){
  .hero-cta{width:100%}
  .hero-cta .btn,#planes .plans .btn{width:100%;max-width:340px}
  header .btn{min-height:32px;padding:0 var(--s3)}
}

/* Textos en tarjeta blanca */
.steps li,.plans>div,.tools>div,.facts>div,.capas,.sn-txt{background:var(--card);border:0!important;border-radius:var(--r-card);
  padding:var(--s5) var(--s5) var(--s5);box-shadow:var(--elev-1);transition:box-shadow .6s var(--suave),transform .6s var(--suave)}
.steps li:hover,.plans>div:hover,.tools>div:hover,.facts>div:hover,.con-vista.activo{box-shadow:var(--elev-2);transform:translateY(-2px)}
#planes .plans>div{padding-top:calc(6px + var(--s5))}
@media (max-width:560px){.steps li,.plans>div,.tools>div,.facts>div,.capas,.sn-txt{padding:var(--s4)}}

/* Imágenes: esquinas redondeadas y relieve, sin filete */
.hero-mapa,.foto .marco,.mini-visor .marco,.pres-tarjeta,.libro img,.visor img{border:0!important;border-radius:var(--r-img);box-shadow:var(--elev-2)}
.hero-mapa{border-radius:var(--r-card)}
.foto .marco,.mini-visor .marco{overflow:hidden;transition:box-shadow .6s var(--suave),transform .6s var(--suave)}
.mini-visor button.marco:hover,.con-vista:hover .foto .marco{box-shadow:0 3px 8px rgba(19,35,44,.06),0 21px 55px rgba(19,35,44,.14);transform:translateY(-2px)}
.dialog,.toast{border-radius:var(--r-card)}
@media (prefers-reduced-motion:reduce){.btn,.uso,.steps li,.plans>div,.tools>div,.facts>div,.foto .marco,.mini-visor .marco{transition:none;transform:none!important}}
.libro img{border-radius:8px}
#planes .plans>div{overflow:hidden}

/* Tarjeta del PDF como botón con relieve: sin amarillo, blanca, la portada dentro con su propio radio (Dan, 2-11-2026) */
.pres-tarjeta{background:var(--card);padding:8px;border-radius:var(--r-card);box-shadow:var(--elev-1);
  transition:box-shadow .6s var(--suave),transform .6s var(--suave)}
.pres-tarjeta:hover,.pres-tarjeta:focus-visible{background:var(--card);box-shadow:var(--elev-2);transform:translateY(-2px)}
.pres-tarjeta:active{box-shadow:var(--elev-1);transform:none}
.pt-img img{border-radius:var(--r-img)}
/* Visor de juegos: mismas esquinas y relieve que el resto */
.jv-marco{border:0!important;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--elev-2)}
@media (prefers-reduced-motion:reduce){.pres-tarjeta{transition:none;transform:none!important}}

/* Cabecera en una sola fila (Dan, 2-11-2026; referencia: la cabecera de ogilvy.com, sin copiarla):
   páginas a la izquierda, logo en el centro con aire alrededor, idiomas y «Entra en la app» a la derecha.
   Escala más pequeña para que la cabecera pese menos. La regla de escala sigue debajo, a todo el ancho. */
header.cab{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"tabs brand util" "escala escala escala";
  justify-items:stretch;align-items:center;column-gap:var(--s7);row-gap:0;padding-top:var(--s4);
  box-shadow:0 8px 21px rgba(19,35,44,.05)}
header.cab .tabs{grid-area:tabs;justify-self:start;justify-content:flex-start;flex-wrap:nowrap;gap:var(--s5);border-top:0;padding:0}
header.cab .tabs a{font-size:var(--fs-xs);white-space:nowrap}
header.cab .brand{grid-area:brand;justify-self:center;padding-block:var(--s4)}
header.cab .brand img{height:42px}
header.cab .util{grid-area:util;justify-self:end;justify-content:flex-end;gap:var(--s5);padding:0}
header.cab .util .langs a{font-size:var(--fs-xs)}
header.cab .util .btn{font-size:var(--fs-xs);min-height:34px;padding:0 var(--s4)}
header.cab .escala{grid-area:escala;margin-top:var(--s3)}
/* Pantallas medianas: logo arriba en el centro, idiomas y app a su derecha; las páginas debajo, centradas */
@media (max-width:1180px){
  header.cab{grid-template-areas:". brand util" "tabs tabs tabs" "escala escala escala";column-gap:var(--s4)}
  header.cab .tabs{justify-self:center;justify-content:center;padding-bottom:var(--s2)}
  header.cab .brand{padding-block:var(--s3)}
}
/* Móvil: logo a la izquierda, idiomas y app a la derecha; las páginas en una fila que se desplaza */
@media (max-width:760px){
  header.cab{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand util" "tabs tabs" "escala escala";padding-top:var(--s3)}
  header.cab .brand{justify-self:start;padding-block:var(--s2)}
  header.cab .brand img{height:28px}
  header.cab .util{gap:var(--s3)}
  header.cab .util .btn{min-height:30px;padding:0 var(--s3);font-size:11px}
  header.cab .tabs{justify-self:stretch;justify-content:space-between;gap:0 var(--s3);overflow-x:auto;scrollbar-width:none}
  header.cab .tabs a{font-size:11px}
}
@media (max-width:420px){header.cab .util .langs{gap:var(--s2)} header.cab .util .langs a{font-size:11px}}
.jv-escena > .jv-marco,.jv-escena > .jv-barra{justify-self:stretch;width:100%}
@media (max-width:760px){header.cab .util,header.cab .util .langs{flex-wrap:nowrap} header.cab .util .langs{gap:var(--s2)} header.cab .util .btn{white-space:nowrap}}
@media (max-width:400px){header.cab .brand img{height:24px} header.cab .util{gap:var(--s2)} header.cab .util .btn{padding:0 var(--s2)}}
@media (max-width:400px){header.cab{grid-template-areas:"brand brand" "util util" "tabs tabs" "escala escala"} header.cab .brand{justify-self:center} header.cab .brand img{height:26px} header.cab .util{justify-self:stretch;justify-content:space-between;padding-bottom:var(--s2)}}

/* Cabecera que respira (Dan, 2-11-2026): logo más grande con más aire arriba y abajo; páginas, idiomas y app
   un poco más bajos (alineados con la base del logo) y las páginas algo más pequeñas */
@media (min-width:761px){
  header.cab{padding-top:var(--s5)}
  header.cab .brand{padding-block:var(--s5) var(--s6)}
  header.cab .brand img{height:52px}
  header.cab .tabs,header.cab .util{align-self:center;transform:translateY(var(--s2))}
  header.cab .tabs a{font-size:12px;letter-spacing:.1em}
  header.cab .tabs{gap:var(--s5)}
  header.cab .escala{margin-top:0}
}
@media (min-width:761px) and (max-width:1180px){
  header.cab .brand{padding-block:var(--s4) var(--s3)}
  header.cab .brand img{height:46px}
  header.cab .tabs,header.cab .util{transform:none}
}

/* Idiomas arriba a la derecha, en pequeño, sobre «Entra en la app»; se ocultan al hacer scroll (Dan, 2-11-2026) */
header.cab .util{position:static}
header.cab .util .langs{position:absolute;top:var(--s3);right:max(24px, env(safe-area-inset-right, 0px));gap:var(--s3);
  transition:opacity .4s var(--suave),transform .4s var(--suave)}
header.cab .util .langs a{font-size:10px;letter-spacing:.12em}
header.cab .util .langs a[aria-current="true"]{text-underline-offset:4px;text-decoration-thickness:1px}
header.cab.bajado .util .langs{opacity:0;transform:translateY(-6px);pointer-events:none}
header.cab .util .langs:focus-within{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1441px){header.cab .util .langs{right:max(24px, calc((100% - var(--w)) / 2 + 24px))}}
@media (max-width:760px){header.cab .util .langs{top:var(--s1);right:max(16px, env(safe-area-inset-right, 0px))}}
@media (max-width:400px){header.cab .util .langs{position:static;opacity:1;transform:none;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){header.cab .util .langs{transition:none}}
@media (min-width:1181px){header.cab .util{transform:none} header.cab .util .btn{transform:translateY(var(--s2))} header.cab .util .btn:hover{transform:translateY(calc(var(--s2) - 1px))}}

/* Presentación en el eje central (Dan, 2-11-2026): la tarjeta-botón del PDF y, a su derecha, la entradilla,
   centradas en altura; el conjunto, centrado en la página, en el mismo eje que el botón de la portada */
@media (min-width:761px){
  #descarga .pres.doc{grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:var(--s6)}
  #descarga .pres-tarjeta{grid-column:1;grid-row:1;justify-self:center}
  #descarga .pres.doc > .lead{grid-column:2;grid-row:1;max-width:340px;text-align:left}
}
@media (max-width:760px){
  #descarga .pres.doc{justify-items:center;text-align:center}
  #descarga .pres-tarjeta{order:-1}
}

/* Pie sin logo ni columna de la app (Dan, 2-11-2026): páginas a la izquierda; contacto y legales a la derecha */
@media (min-width:761px){
  footer .sec{grid-template-columns:auto minmax(var(--s7),1fr) auto auto}
  footer .sec > div:nth-child(2){grid-column:3;text-align:right}
  footer .sec > div:nth-child(3){grid-column:4;text-align:right}
  footer .sec > div:nth-child(4){grid-column:auto}
}

/* Petróleo con contorno sutil al pasar (Dan, 2-11-2026): se mantiene el #0B6A6E del libro de estilo; un halo
   de 0,6 px del mismo color engrosa apenas el trazo y un filo claro debajo lo separa del fondo blanco roto */
:root{--realce:0 0 .6px var(--teal),0 1px 0 rgba(255,255,255,.9)}
a:hover,header.cab .tabs a:hover,header.cab .tabs a:focus-visible,header .langs a:hover,
.btn:hover,.uso:hover,.link:hover,footer a:hover,.con-vista:hover h3,.con-vista.activo h3,.jv-indice button:hover{text-shadow:var(--realce)}
header.cab .tabs a{transition:color .3s var(--suave),text-shadow .3s var(--suave),border-color .3s var(--suave)}
header.cab .tabs a:hover:not([aria-current]){border-bottom-color:transparent}
@media (prefers-reduced-motion:reduce){header.cab .tabs a{transition:none}}

/* Pie a juego con la cabecera (Dan, 2-11-2026): misma letra (12 px, mayúsculas espaciadas), más aire arriba y abajo
   (55 y 34 px, Fibonacci), líneas más separadas y el colofón aparte, en gris y pequeño como los idiomas */
footer{border-top:1px solid var(--line)}
footer .sec{padding-block:55px var(--s6);row-gap:var(--s5)}
footer li,footer li a{font-size:12px;letter-spacing:.1em;line-height:2}
footer ul{gap:0}
footer a{transition:color .3s var(--suave),text-shadow .3s var(--suave)}
.colofon{max-width:var(--w);margin:0 auto;padding:0 max(24px, env(safe-area-inset-right, 0px)) var(--s6) max(24px, env(safe-area-inset-left, 0px));
  font-size:10px;letter-spacing:.12em;color:var(--gris)}
@media (max-width:760px){footer .sec{padding-block:var(--s6) var(--s5)} .colofon{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}}
@media (max-width:760px){footer .sec{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}}
/* El hueco entre la tarjeta y la entradilla cae justo en el eje central de la página (el corte entre el tramo rosa
   y el azul de la regla, bajo el logo, y el centro de «Ver los planes») (Dan, 2-11-2026) */
@media (min-width:761px){
  #descarga .pres.doc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:stretch;column-gap:var(--s6)}
  #descarga .pres-tarjeta{justify-self:end}
  #descarga .pres.doc > .lead{justify-self:start}
}

/* Legal en una sola página y un enlace discreto en el colofón (Dan, 2-11-2026) */
.colofon a{color:var(--gris);text-decoration:none}
.colofon a:hover{color:var(--teal)}
.indice-legal{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.indice-legal a{text-decoration:none;color:var(--gris)}
.indice-legal a:hover{color:var(--teal)}
.texto-legal .apartado{display:grid;gap:var(--s3);scroll-margin-top:200px}
.texto-legal .apartado + .apartado{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.texto-legal .apartado > h2{font-size:var(--fs-l);margin-top:0}
.texto-legal h3{font-size:var(--fs-m);font-weight:500;text-transform:none;letter-spacing:0;margin-top:var(--s3)}

/* Blanco hueso (Dan, 2-11-2026): el blanco roto tira hacia el amarillo, no hacia el gris; filetes y sombras
   pasan a un tono cálido para que no ensucien el fondo */
:root{--bg:#FAF7EF;--line:#E9E3D3;--soft:#F3EEE1;
  --elev-1:0 1px 2px rgba(74,58,28,.05),0 8px 21px rgba(74,58,28,.06);
  --elev-2:0 2px 5px rgba(74,58,28,.06),0 13px 34px rgba(74,58,28,.10)}
header.cab{box-shadow:0 8px 21px rgba(74,58,28,.06)}

/* Fondo de wearecollins.com (Dan, 2-11-2026): #F8F8F7, casi blanco y neutro; filetes y sombras neutros a juego */
:root{--bg:#F8F8F7;--line:#E4E4E1;--soft:#F0F0EE;
  --elev-1:0 1px 2px rgba(19,35,44,.04),0 8px 21px rgba(19,35,44,.06);
  --elev-2:0 2px 5px rgba(19,35,44,.05),0 13px 34px rgba(19,35,44,.10)}
header.cab{box-shadow:0 8px 21px rgba(19,35,44,.05)}
/* La sombra de la cabecera solo al hacer scroll: arriba del todo, cabecera y página son un mismo fondo (Dan, 2-11-2026) */
header.cab{box-shadow:none;transition:box-shadow .4s var(--suave)}
header.cab.bajado{box-shadow:0 8px 21px rgba(19,35,44,.05)}

/* Entradillas de sección también en tarjeta blanca (Dan, 2-11-2026), como el resto de textos: título y entradilla
   dentro de la tarjeta, ancho ajustado al texto. La portada y las cabeceras centradas de página se quedan sin marco */
main > .sec:not(.intro) > .head,.jt-head{background:var(--card);border-radius:var(--r-card);box-shadow:var(--elev-1);
  padding:var(--s5);width:fit-content;max-width:min(100%,720px);gap:var(--s3)}
@media (max-width:560px){main > .sec:not(.intro) > .head,.jt-head{padding:var(--s4);width:auto}}

/* Estilo invertido (Dan, 2-11-2026): la página, toda del mismo blanco que la cabecera (#F8F8F7), sin franjas de color;
   el color de cada tramo pasa a las tarjetas de texto y a los marcos de los visores, para que la página respire */
main > .sec[data-n]{--fondo:var(--bg);background:transparent;box-shadow:none;clip-path:none}
main > .sec + .sec{border-top:0}
main > .sec{--tinte:color-mix(in srgb, var(--sc, #fff) 16%, #fff)}
main .steps li,main .plans>div,main .tools>div,main .facts>div,main .capas,main .sn-txt,
main > .sec:not(.intro) > .head,main .jt-head{background:var(--tinte)}
/* Visores: marco de color de 8 px alrededor de la imagen, con las esquinas a juego */
main .foto .marco,main .mini-visor .marco,main .jv-marco{border:8px solid var(--tinte)!important;background:var(--tinte)}
main .foto .marco img,main .mini-visor .marco img{border-radius:6px}
main .jv-marco img{border-radius:6px}

/* Comparador (Dan, 2-11-2026): el visor ocupa lo mismo que los textos (dos columnas iguales) y el selector de capas
   va pegado al visor, en una fila encima de la imagen y dentro del mismo marco de color */
@media (min-width:901px){
  #capas .comparador{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6);align-items:stretch}
  #capas .c-izq{grid-template-columns:minmax(0,1fr);gap:0;align-content:start;background:var(--tinte);border-radius:var(--r-card);
    box-shadow:var(--elev-2);padding:var(--s2) var(--s2) 0;align-self:start}
  #capas .c-izq .capas{background:transparent;box-shadow:none;border:0;padding:var(--s2) var(--s3) var(--s3);width:auto;justify-self:stretch}
  #capas .c-izq .capas fieldset{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
  #capas .c-izq .foto{width:100%;max-width:none;justify-self:stretch}
  #capas .c-izq .foto .marco{border:0!important;box-shadow:none;border-radius:13px}
  #capas .c-izq .foto figcaption{padding:var(--s3) var(--s2) var(--s3)}
  #capas .tools{grid-template-columns:repeat(2,minmax(0,1fr));align-content:stretch;grid-auto-rows:1fr}
  #capas .tools{margin-top:0}
}
/* Sin pie bajo el visor del comparador (Dan, 2-11-2026); «pantalla del prototipo» sigue en el texto alternativo */
#capas .comparador .foto figcaption{display:none}
@media (min-width:901px){#capas .c-izq{padding-bottom:var(--s2)}}
@media (max-width:900px){
  #capas .c-izq{grid-template-columns:minmax(0,1fr);gap:0;background:var(--tinte);border-radius:var(--r-card);box-shadow:var(--elev-2);padding:var(--s2)}
  #capas .c-izq .capas{background:transparent;box-shadow:none;border:0;padding:var(--s1) var(--s2) var(--s3);width:auto;justify-self:stretch}
  #capas .c-izq .capas fieldset{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
  #capas .c-izq .foto{width:100%;max-width:none}
  #capas .c-izq .foto .marco{border:0!important;box-shadow:none;border-radius:13px}
  #capas .tools > div{text-align:left;justify-items:start}
}

/* Dos niveles de texto (Dan, 2-11-2026): menos cajas.
   · Claims (título y entradilla de cada sección): sin caja, sobre el blanco; la entradilla, más grande y ligera.
   · Textos explicativos: una sola tarjeta de color por grupo; dentro, cada punto separado por un filete fino. */
main > .sec:not(.intro) > .head,main .jt-head{background:none;box-shadow:none;border-radius:0;padding:0;width:auto;max-width:640px}
main > .sec:not(.intro) > .head > .lead,main .jt-head > p{font-size:20px;font-weight:400;line-height:1.5;letter-spacing:.01em}
@media (max-width:560px){main > .sec:not(.intro) > .head > .lead,main .jt-head > p{font-size:17px}}

main .steps,main #capas .tools{background:var(--tinte);border-radius:var(--r-card);box-shadow:var(--elev-1);padding:var(--s2) var(--s5);gap:0!important}
main .steps li,main #capas .tools > div{background:none!important;box-shadow:none!important;border-radius:0;padding:var(--s4) 0!important;transform:none!important}
main .steps li + li,main #capas .tools > div + div{border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent)!important}
main #capas .tools{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;align-content:center}
@media (max-width:560px){main .steps,main #capas .tools{padding:var(--s1) var(--s4)}}

/* Prepara (Dan, 2-11-2026): como el comparador, visor y textos en dos columnas iguales y sin pie bajo la imagen */
@media (min-width:901px){
  #claves .ventana{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6);align-items:stretch}
  #claves .ventana > .foto{width:100%;max-width:none;justify-self:stretch;align-self:stretch;display:flex;position:static}
  #claves .ventana > .foto .marco{flex:1;display:block;height:100%}
  #claves .ventana > .foto .marco img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:left center}
}
#claves .ventana figcaption{display:none}
@media (min-width:901px){
  #claves .ventana > .foto{display:block;align-self:start}
  #claves .ventana > .foto .marco{height:auto}
  #claves .ventana > .foto .marco img{height:auto;aspect-ratio:2384/1886;object-fit:cover;object-position:center}
  #claves .ventana .steps{height:100%;align-content:space-between}
  #claves .ventana .v-textos{align-self:stretch;display:grid}
}
/* Orden de la home (Dan, 2-11-2026): «Així es construeix un mapa», luego el comparador y después la sesión de clase */
main > #capas{padding-top:var(--s8)}
/* El título de juegos pasa a h2 (2-11-2026): mismo aspecto que el resto de títulos de sección */
.jt-head h2{font-size:var(--fs-m);font-weight:600;text-transform:uppercase;letter-spacing:var(--caps);line-height:1.4}
@media (max-width:560px){.jt-head h2{font-size:13px}}

/* Visor de juegos (Dan, 2-11-2026): el visor limpio, sin marco de color; el índice 01–12 en la tarjeta de color;
   sin barra de progreso, sin filete negro ni pie; y el visor a la altura del índice, en dos columnas iguales */
main .jv-marco{border:0!important;background:var(--card);box-shadow:var(--elev-2);border-radius:var(--r-card)}
main .jv-marco img{border-radius:0;object-fit:contain}
.jv-barra,.jv-escena figcaption{display:none}
main .jv-indice{background:var(--tinte);border-radius:var(--r-card);box-shadow:var(--elev-1);padding:var(--s2) var(--s5)}
main .jv-indice li:last-child button{border-bottom:0}
@media (min-width:901px){
  .jv{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head ." "indice escena";column-gap:var(--s6);row-gap:var(--s6);align-items:stretch}
  .jv-txt{display:contents}
  .jv .jt-head{grid-area:head}
  .jv .jv-indice{grid-area:indice;align-self:stretch;align-content:space-between}
  .jv .jv-escena{grid-area:escena;position:static;top:auto;align-self:stretch;display:flex;flex-direction:column}
  .jv .jv-escena > .jv-marco{flex:1;aspect-ratio:auto;min-height:320px}
  .jv .games{grid-column:1 / -1}
}
@media (max-width:900px){main .jv-indice{background:none;box-shadow:none;border-radius:0;padding:0 0 var(--s2)} main .jv-indice button{background:var(--tinte);border-color:transparent;border-radius:999px} main .jv-indice button[aria-current="true"]{border-color:var(--ink)}}

/* Portada que se construye al bajar (Dan, 2-11-2026): ver js/hero-capas.js */
.hero-mapa img{animation:none!important;opacity:0;transition:opacity .7s var(--suave)}
.hero-mapa img.on{opacity:1}
.hero-mapa img.pre{display:none}
.hero-escena{position:relative}
.hero-pin{display:grid;justify-items:center;gap:var(--s4)}
.hero-mapa{transform:scale(var(--abre,1));transform-origin:top center;transition:box-shadow .6s var(--suave)}
.hero-capas{display:grid;justify-items:center;gap:var(--s1);text-align:center}
.hc-nombres{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s4)}
.hc-nombres button{all:unset;cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding:var(--s1) 0;
  border-bottom:1px solid transparent;transition:color .3s var(--suave),border-color .3s var(--suave)}
.hc-nombres button:hover{color:var(--teal);text-shadow:var(--realce)}
.hc-nombres button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.hc-nombres button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.hc-que{font-size:var(--fs-s);color:var(--gris);min-height:1.7em}
.hero-escena.scrolly{height:320vh}
.hero-escena.scrolly .hero-pin{position:sticky;top:calc(var(--cab, 170px) + var(--s4))}
.hero-escena.scrolly .hero-mapa{margin-top:0;width:min(100%,1100px,calc((100svh - var(--cab, 170px) - 150px) * 1992 / 1362))}
@media (prefers-reduced-motion:reduce){.hero-mapa img{transition:none}}
/* Portada sin recorrido por scroll (2-11-2026): las siete pantallas se cambian pulsando; las que no tienen la proporción
   del visor se ven enteras sobre blanco */
.hero-mapa{cursor:e-resize;background:var(--card)}
.hero-mapa img{object-fit:contain}
.hero-mapa:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
/* «Veure els plans» bajo el visor (Dan, 2-11-2026): la primera imagen queda limpia, justo bajo el claim */
#inicio > .hero-cta{display:flex;justify-content:center;margin-top:var(--s5)}
.hero-mapa img{background:var(--card)}
.hero-mapa img.on{z-index:1}
/* Portada: apertura más marcada (Dan, 2-11-2026). --p va de 0 (arriba del todo) a 1 (abierto) */
.hero-mapa{--p:1;transform:scale(calc(.74 + .26 * var(--p)));transform-origin:top center;
  clip-path:inset(0 calc((1 - var(--p)) * 9%) calc((1 - var(--p)) * 14%) round calc(13px + (1 - var(--p)) * 21px));
  box-shadow:0 calc(4px + 12px * var(--p)) calc(21px + 34px * var(--p)) rgba(19,35,44,calc(.06 + .06 * var(--p)))}
.hero-mapa[data-lado="atras"]{cursor:w-resize}
.hero-capas{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--s1) var(--s2);font-size:var(--fs-s);text-align:center}
.hc-n{font-size:12px;letter-spacing:.1em;color:var(--gris);font-variant-numeric:tabular-nums}
.hc-nombre{font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.hc-que{color:var(--gris)}
.hc-nombre::before,.hc-que::before{content:"· ";color:var(--gris);font-weight:400}
.hero-pin{gap:var(--s3)}
/* El recorte (clip-path) se comía la sombra: la apertura va con escala, esquinas y sombra */
.hero-mapa{clip-path:none;border-radius:calc(21px + (1 - var(--p)) * 21px)}
/* Portada en pantallas bajas (Dan, 2-11-2026; MacBook Air 13"): claim más arriba y visor a la medida de la altura de la
   pantalla, para que al llegar se vea entero, recogido, bajo el claim. En pantallas altas se queda en 1100 px */
@media (min-width:761px){
  main > #inicio{margin-top:0;padding-top:var(--s6)}
  #inicio .hero-mapa{margin-top:21px;width:min(100%,1100px,calc((100svh - 330px) * 1992 / 1362 / .74))}
}
/* Pie en dos bloques (2-11-2026): izquierda y derecha pegadas a márgenes iguales, últimas líneas a la misma altura */
@media (min-width:761px){footer .sec{grid-template-columns:auto minmax(0,1fr) auto;align-items:end} footer .sec > div:nth-child(2){grid-column:3;justify-self:end;text-align:right}}
/* Idiomas sin recuadro de foco (Dan, 2-11-2026): solo letras; la lengua de la página, en tinta y subrayada */
header .langs a:focus,header .langs a:focus-visible{outline:none}
header .langs a:focus-visible{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
/* Contacto al final de Sobre nosotros */
#contacto{scroll-margin-top:200px}
/* Dentro de Sobre nosotros ya no ocupa media pantalla: texto e información, en la misma altura */
.sec.contacto{min-height:0;align-items:end;padding-block:var(--s7) var(--s8)}
/* Sobre nosotros (Dan, 2-11-2026): el logo pequeño encabeza la primera tarjeta; el bloque de contacto queda solo con
   correo, Instagram y dirección, a la derecha */
.sn-txt .sn-logo{height:32px;width:auto;justify-self:start;margin-bottom:var(--s2)}
.sec.contacto{grid-template-columns:minmax(0,1fr)}
.sec.contacto .ct-der{justify-self:end}
@media (max-width:760px){.sec.contacto .ct-der{justify-self:start}}
.sec.contacto .ct-der{margin-right:0;margin-left:0}
/* Tramos de la regla como enlaces a la home también desde las otras páginas (2-11-2026) */
.regla i.ir{cursor:pointer}
.escala:not(.por-secciones) .regla i.ir:hover{opacity:1}
@media (min-width:761px){footer .sec > div{align-self:end}}
footer .sec > div{align-self:end}
/* Sin pies de foto bajo las imágenes de los visores (Dan, 2-11-2026); el texto sigue en el alternativo de cada imagen */
main figure figcaption{display:none!important}
/* Legal: cada frase en su caja; si no cabe en lo que queda de línea, baja entera (Dan, 2-11-2026) */
.texto-legal .frase{display:inline-block;max-width:100%}
/* Colofón a la derecha, bajo Contacto (Dan, 2-11-2026): pequeño y gris, como antes */
footer li.colofon{font-size:10px;letter-spacing:.12em;color:var(--gris);padding:0;max-width:none;margin:var(--s2) 0 0}
footer li.colofon a{font-size:10px;color:var(--gris);text-decoration:none}
footer li.colofon a:hover{color:var(--teal)}
footer .sec{padding-bottom:var(--s6)}
footer li.colofon{display:block;white-space:nowrap}

/* Legal (Dan, 2-11-2026), fusión de dos referencias sin copiarlas:
   · de ogilvy.com, el título de página centrado y los párrafos juntos, con cada subtítulo pegado a su texto;
   · de danaparicio.com, el efecto espejo (un apartado a la izquierda, el siguiente a la derecha y alineado a la derecha)
     y la página sin filetes, con mucho aire entre bloques. */
#legal{max-width:var(--w);gap:var(--s8)}
#legal .head{max-width:none;justify-items:center;text-align:center;gap:var(--s3)}
#legal .head h1{font-size:var(--fs-xl);font-weight:400;letter-spacing:var(--caps)}
#legal .indice-legal{justify-content:center}
.texto-legal{max-width:none;display:grid;gap:var(--s8)}
.texto-legal .apartado{width:min(100%,520px);gap:0;justify-self:start;text-align:left}
.texto-legal .apartado + .apartado{margin-top:0;padding-top:0;border-top:0}
.texto-legal .apartado:nth-child(even){justify-self:end;text-align:right}
.texto-legal .apartado:nth-child(even) ul{list-style:none;padding-left:0}
.texto-legal .apartado > h2{font-size:var(--fs-m);font-weight:600;margin:0 0 var(--s4)}
.texto-legal .apartado h3{font-size:var(--fs-s);font-weight:600;margin:var(--s5) 0 2px}
.texto-legal .apartado > h2 + h3{margin-top:0}
.texto-legal .apartado p,.texto-legal .apartado ul{margin:0;font-size:var(--fs-s);line-height:1.65}
.texto-legal .apartado p + p{margin-top:var(--s2)}
@media (max-width:760px){.texto-legal .apartado:nth-child(even){justify-self:start;text-align:left}.texto-legal{gap:var(--s7)}}

/* Jerarquía de tamaños (Dan, 2-11-2026; de momento solo en Legal): la cabecera, más grande que el pie; el texto,
   igual o más grande que la cabecera; el pie, siempre lo más pequeño */
@media (min-width:761px){
  body[data-pagina="legal"] header.cab .tabs a{font-size:14px}
  body[data-pagina="legal"] header.cab .util .btn{font-size:14px}
  body[data-pagina="legal"] .texto-legal .apartado p,body[data-pagina="legal"] .texto-legal .apartado ul,
  body[data-pagina="legal"] .texto-legal .apartado h3{font-size:var(--fs-m)}
  body[data-pagina="legal"] .texto-legal .apartado > h2{font-size:var(--fs-l)}
  body[data-pagina="legal"] footer li,body[data-pagina="legal"] footer li a{font-size:11px}
  body[data-pagina="legal"] footer li.colofon,body[data-pagina="legal"] footer li.colofon a{font-size:10px}
}
/* Jerarquía de tamaños en toda la web (Dan, 2-11-2026): cabecera 14 px; texto 15 px o más; pie 11 px y colofón 10 px */
@media (min-width:761px){
  header.cab .tabs a,header.cab .util .btn{font-size:14px}
  footer li,footer li a{font-size:11px}
  footer li.colofon,footer li.colofon a{font-size:10px}
  .sec.contacto .ct-der,.sec.contacto .ct-der a,.sec.contacto address{font-size:var(--fs-m)}
}
/* Letra pequeña legal (Dan, 2-11-2026): por debajo del pie (10 px) y en cursiva; es la excepción a la jerarquía
   y la regla para los textos legales de este tipo (condiciones de precio, IVA, facturación…) */
.letra-pequena{font-size:10px!important;font-style:italic;line-height:1.7;letter-spacing:.02em;color:var(--gris)}
/* Preguntas frecuentes en espejo (Dan, 2-11-2026), como Legal: columna izquierda alineada a la izquierda y columna
   derecha alineada a la derecha, cada una contra su margen */
@media (min-width:761px){
  .faq > div:nth-child(even){text-align:right;justify-self:end}
  .faq > div:nth-child(even) p{margin-left:auto}
}
/* Legal, excepción (Dan, 2-11-2026): el texto, del tamaño del pie (11 px), salvo el título de la página y su índice */
body[data-pagina="legal"] .texto-legal .apartado p,body[data-pagina="legal"] .texto-legal .apartado ul,
body[data-pagina="legal"] .texto-legal .apartado li,body[data-pagina="legal"] .texto-legal .apartado h3{font-size:11px!important;line-height:1.7}
body[data-pagina="legal"] .texto-legal .apartado > h2{font-size:12px!important;margin-bottom:var(--s3)}
body[data-pagina="legal"] .texto-legal .apartado h3{margin-top:var(--s4)}
body[data-pagina="legal"] .texto-legal .apartado code{font-size:11px}

/* Zonas táctiles (revisión 2-11-2026): en pantallas táctiles, idiomas, menú y pie amplían su área de pulsación
   con un borde invisible, sin mover nada de lo que se ve (mínimo práctico 32–44 px) */
@media (pointer:coarse){
  header.cab .langs a,header.cab .tabs a,footer li a{position:relative}
  header.cab .langs a::after{content:"";position:absolute;inset:-10px -5px}
  header.cab .tabs a::after{content:"";position:absolute;inset:-10px -6px}
  footer li a::after{content:"";position:absolute;inset:-5px -8px}
  header.cab .util .btn{min-height:40px}
}
/* Tableta (revisión 2-11-2026): el visor del comparador llena su tarjeta */
#capas .c-izq .foto .marco{width:100%}
#capas .c-izq .foto .marco img{width:100%;height:auto;max-height:none}
/* Ir al contenido (revisión 2-11-2026): invisible hasta que se llega con el teclado */
.salta{position:absolute;left:var(--s4);top:-60px;z-index:50;background:var(--card);color:var(--ink);padding:var(--s2) var(--s4);
  border-radius:999px;box-shadow:var(--elev-1);font-size:var(--fs-s);text-decoration:none}
.salta:focus{top:var(--s3)}
main:focus{outline:none}

/* Móvil (Dan, 2-11-2026): logo centrado arriba; idiomas arriba a la derecha; debajo, las páginas a la izquierda
   y solo «Entra en la app» a la derecha. Pie en dos columnas: páginas a la izquierda; Instagram, Contacto y Legal
   a la derecha, alineados por abajo con la última línea de la izquierda */
@media (max-width:760px){
  header.cab{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand brand" "tabs util" "escala escala";
    align-items:center;row-gap:var(--s2);padding-top:var(--s5)}
  header.cab .brand{justify-self:center;padding-block:var(--s2) var(--s3)}
  header.cab .brand img{height:30px}
  header.cab .util{justify-self:end;padding:0;gap:0}
  header.cab .util .langs{position:absolute;top:var(--s3);right:max(16px, env(safe-area-inset-right, 0px));opacity:1;transform:none;pointer-events:auto;gap:var(--s3)}
  header.cab.bajado .util .langs{opacity:0;transform:translateY(-6px);pointer-events:none}
  header.cab .tabs{justify-self:start;justify-content:flex-start;gap:var(--s5);overflow:visible;padding:0}
  header.cab .tabs a{font-size:12px}
  header.cab .util .btn{min-height:36px;padding:0 var(--s4);font-size:12px}
  footer .sec{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s4)}
  footer .sec > div:nth-child(2){grid-column:2;text-align:right;justify-self:end}
  footer li,footer li a{font-size:11px}
}
@media (max-width:360px){header.cab .tabs{gap:var(--s3)} header.cab .tabs a{font-size:11px;letter-spacing:.06em} header.cab .util .btn{padding:0 var(--s3);font-size:11px;letter-spacing:.06em}}
/* Pie (Dan, 2-11-2026): «Contacto» a la altura de «Entra en la app» en todas las anchuras; el colofón, una línea por debajo */
footer .sec{padding-bottom:calc(var(--s6) + 24px)}
footer .sec > div:nth-child(2){position:relative;align-self:end}
footer .sec > div:nth-child(2) li.colofon{position:absolute;right:0;top:100%;margin-top:var(--s2);white-space:nowrap}
/* Cabecera (Dan, 3-11-2026): «Entra en la app» con la misma letra que las pestañas: mismo cuerpo y mismo espaciado, en escritorio y en móvil */
header.cab .btn{letter-spacing:.1em}
@media (max-width:760px){header.cab .btn{letter-spacing:.03em}}
/* Planes (Dan, 3-11-2026): tarjetas blancas, sin la franja de petróleo arriba; mismo aire en los cuatro lados */
#planes .plans>div::before{content:none}
#planes .plans>div{padding-top:var(--s5)}
/* Lámina de Sobre nosotros (Dan, 3-11-2026): se abre desde las sangrías hasta el ancho máximo de la web (al alejar el zoom baja en proporción, 4-11-2026) y, fija bajo la cabecera,
   el mural impreso se funde en el mapa digital (js/escala.js). Sin JS o con «reducir movimiento», el mapa digital, abierto y quieto */
.lamina{--ancho:min(100vw,1440px);--abre:1;--funde:1;--sangria:24px;margin:0 calc(50% - var(--ancho) / 2);width:var(--ancho)}
.lamina-fija{position:relative;overflow:hidden;clip-path:inset(0 calc((1 - var(--abre)) * var(--sangria)) round calc((1 - var(--abre)) * 21px))}
.lamina picture{display:block}
.lamina picture.digital{position:absolute;inset:0;opacity:var(--funde)}
.lamina img{display:block;width:100%;height:auto;aspect-ratio:100/43;object-fit:cover;transform:scale(calc(1.1 - .1 * var(--abre)))}
/* Sobre nosotros (Dan, 5-11-2026): la lámina no se fija; los textos quedan casi tocando su principio y su final */
main > .sec:has(+ .lamina){padding-bottom:21px}
main > .lamina + .sec.sec{padding-top:34px}
@media (max-width:760px){.lamina{--sangria:16px}.lamina img{aspect-ratio:4/3}}
/* Visor de juegos (Dan, 3-11-2026): misma proporción que las capturas de la app, sin márgenes */
.jv-marco{aspect-ratio:2000/1236}
.jv-marco img{object-fit:cover;object-position:left top}
/* Pie del visor de portada (Dan, 3-11-2026): a la derecha, con un cuadrante que gira un cuarto de vuelta con cada pantalla */
.hero-capas{justify-content:flex-end;align-items:center;text-align:right}
.hc-cuad{flex:none;width:13px;height:13px;overflow:visible}
.hc-cuad path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.hc-cuad rect{fill:var(--teal);transform-origin:6.5px 6.5px;transition:transform .6s cubic-bezier(.19,1,.22,1)}
@media (prefers-reduced-motion:reduce){.hc-cuad rect{transition:none}}
/* Pila de capas (Dan, 3-11-2026): el título sigue al número, en la misma línea */
.pila .steps li{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s2);align-items:baseline}
.pila .steps li > p{grid-column:1 / -1}
/* Las imágenes siempre llenan su marco (Dan, 3-11-2026): sin borde de color alrededor y a plena intensidad */
main .foto .marco,main .mini-visor .marco,main .jv-marco{border:0!important;background:none!important}
main .foto .marco img,main .mini-visor .marco img{width:100%;height:100%;object-fit:cover}
.sn-par .foto img{opacity:1}
/* Visor de la portada más grande (Dan, 3-11-2026): más ancho y menos reserva de alto en escritorio; casi a sangre en móvil */
.hero-escena,.hero-escena.scrolly{--hv:min(100%,1320px,calc((100svh - 120px) * 2000 / 1236))}
.hero-mapa,.hero-escena.scrolly .hero-mapa,#inicio .hero-mapa{width:var(--hv);aspect-ratio:2000/1236;transform:scale(calc(.86 + .14 * var(--p)))}
.hero-pin{gap:var(--s2)}
.hero-capas{box-sizing:border-box;width:var(--hv);margin:0 auto;padding:0 var(--lado,0px) 0 0;transform:translateY(calc(var(--hueco,0px) * -1))}
@media (max-width:760px){.hero-mapa,.hero-escena.scrolly .hero-mapa,#inicio .hero-mapa{transform:none}.hero-escena,.hero-escena.scrolly{--hv:calc(100vw - 16px)}.hero-pin{justify-items:stretch}.hero-mapa,.hero-escena.scrolly .hero-mapa,#inicio .hero-mapa,.hero-capas{justify-self:start;margin-left:calc((100% - 100vw + 16px) / 2);margin-right:0}}
.hero-mapa img{object-fit:cover;object-position:left top}
/* Pie del visor sin contador de imágenes (Dan, 4-11-2026) */
.hc-n{display:none}
.hc-nombre::before{content:none}
/* Nunca márgenes blancos (Dan, 4-11-2026): toda imagen rellena su visor por completo */
main .jv-marco img,main .vista,main .foto img,main .mini-visor img,.hero-mapa img{object-fit:cover!important;object-position:left top}
/* Visor de juegos: fundido entre pantallas, sin barrido circular que deje ver el fondo blanco (Dan, 4-11-2026) */
.jv-marco{background:var(--ink)!important}
.jv-marco img,.jv-marco img.on{animation:none!important;transition:opacity .6s cubic-bezier(.19,1,.22,1)}
/* Regla de la cabecera fuera de la home (Dan, 4-11-2026): en petróleo corporativo y sin enlaces; los colores y los saltos a cada tramo son solo de la home */
body:not([data-pagina="index"]) .regla i{--c:#0B6A6E!important;cursor:default;pointer-events:none}
/* Planes (Dan, 4-11-2026): cuatro tarjetas iguales; la Demo en la sangría izquierda, separada, y los tres planes juntos a la derecha; sin espejo */
#planes .plans>div:nth-child(n){margin-inline:0;text-align:left;align-items:flex-start}
#planes .plans>div:nth-child(n)>.btn{align-self:flex-start}
#planes .plans>div:nth-child(n) .feats{justify-items:start}
@media (min-width:1200px){
  #planes .plans{width:100%;max-width:none;margin-inline:0;grid-template-columns:minmax(0,1fr) var(--s6) repeat(3,minmax(0,1fr));column-gap:var(--s3)}
  #planes .plans>div{grid-column:auto}
  #planes .plans>div:nth-child(2){grid-column:3}
}
/* Planes (Dan, 4-11-2026): lámina de puntos arriba de cada tarjeta, a sangre dentro de la tarjeta */
#planes .plans>div{overflow:hidden}
.plan-puntos{display:block;flex:none;width:calc(100% + 2 * var(--s5));margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s3);background:var(--teal)}
.plan-puntos circle{fill:rgba(255,255,255,.28)}
.plan-puntos circle.on{fill:#fff;transform-box:fill-box;transform-origin:center;animation:plan-punto .5s cubic-bezier(.19,1,.22,1) backwards}
@keyframes plan-punto{from{opacity:.2;transform:scale(.3)}}
@media (prefers-reduced-motion:reduce){.plan-puntos circle.on{animation:none}}
/* Planes sin numeración en los títulos (Dan, 4-11-2026) */
#planes .plans > div:not(:first-child) > .lbl::before{content:none}
/* Planes (Dan, 4-11-2026): las mismas filas en las cuatro tarjetas (subgrid): cada línea queda a la misma altura en todas, en cualquier idioma */
@media (min-width:1200px){
  #planes .plans{grid-template-rows:repeat(9,auto);row-gap:0}
  #planes .plans>div{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:var(--s2);align-content:start;align-items:start}
  #planes .plans>div>.plan-puntos,#planes .plans>div>.lbl,#planes .plans>div>*{min-width:0}
  #planes .plans>div>.btn{grid-row:9;align-self:end;justify-self:start;margin-top:var(--s2)}
  #planes .plans>div>.feats{margin-bottom:var(--s3)}
  #planes .plans>div:first-child>p:nth-of-type(2){grid-row:4 / span 4}
}
/* Sobre nosotros (Dan, 4-11-2026): el texto va suelto sobre la página, sin tarjeta */
.sn-txt,.sn-txt:hover{background:none!important;box-shadow:none!important;border-radius:0;padding:0;transform:none!important}
/* Sin tarjeta, la imagen de la columna derecha se apoya en el margen derecho, en espejo con el texto (regla del eje central) */
@media (min-width:901px){.sn-par:not(.espejo) .foto{justify-self:end;margin-left:auto}}
/* Sobre nosotros (Dan, 4-11-2026): el logo a la altura del de la cabecera, nunca mayor; el contacto, debajo del último texto, con aire arriba y hasta el pie */
.sn-txt .sn-logo{height:52px;width:auto;display:block}
.sn-txt picture{justify-self:start}
@media (max-width:760px){.sn-txt .sn-logo{height:32px}}
@media (min-width:901px){
  #contacto.sec.contacto{min-height:0;padding-top:89px;padding-bottom:calc(var(--s8) * 2);align-content:start}
  #contacto .ct-der{align-self:start;margin-right:0;margin-top:0}
}
/* Sobre nosotros (Dan, 4-11-2026): las dos fechas de la editorial en el cuadrante vacío, en la sangría derecha; el texto de la derecha, en espejo sobre esa sangría */
.sn-fechas{margin:0;display:grid;justify-self:end;align-self:start;justify-items:end;font-size:clamp(89px,10vw,144px);font-weight:300;line-height:1;letter-spacing:-.01em;color:var(--teal);font-variant-numeric:lining-nums}
@media (min-width:901px){.sn-par.espejo .sn-txt{text-align:right;margin-right:0}}
@media (max-width:900px){.sn-fechas{order:-1;justify-self:start;justify-items:start;font-size:89px}}
/* Preguntas frecuentes por bloques (Dan, 4-11-2026): rótulo de bloque en petróleo; dentro de cada bloque, las dos columnas en espejo */
.faq-grupo{font-size:var(--fs-s);font-weight:500;letter-spacing:var(--caps);text-transform:uppercase;color:var(--teal);margin:var(--s7) 0 var(--s4)}
#preguntas .head + .faq-grupo{margin-top:var(--s3)}
/* Enlaces de correo en toda la web (Dan, 4-11-2026): sin subrayado; petróleo al pasar el cursor o al pulsar */
.faq a,a[href^="mailto:"]{color:inherit;text-decoration:none!important;border:0!important;background-image:none!important;transition:color .2s}
.faq a:hover,.faq a:focus-visible,.faq a:active,a[href^="mailto:"]:hover,a[href^="mailto:"]:focus-visible,a[href^="mailto:"]:active{color:var(--teal)!important;text-shadow:none!important;font-weight:inherit!important;-webkit-text-stroke:0!important}
/* Preguntas frecuentes (Dan, 4-11-2026): letra algo menor y menos interlineado, en proporción al resto de la página */
.faq h3{font-size:13px;margin-bottom:var(--s1)}
.faq p{font-size:14px;line-height:1.5}
.faq{row-gap:var(--s5)}
.faq-grupo{font-size:12px}
@media (max-width:760px){.faq p{font-size:13px}.faq h3{font-size:12px}.faq{row-gap:var(--s4)}}
/* Planes (Dan, 4-11-2026): la letra pequeña pasa a las preguntas frecuentes; aire y margen hasta el pie */
#preguntas{padding-bottom:calc(var(--s8) * 2.5)}
/* Visores (Dan, 4-11-2026): proporción áurea 1,618; las pantallas de la app se recortan sin la cabecera oscura */
main .comparador .foto img,main .ventana .foto img,main .foto img.vista,main .vista,main .mini-visor img,.sn-par .foto img{aspect-ratio:2000/1236!important;height:auto!important;width:100%}
.sn-par .foto .marco,.sn-par > .foto .marco,main .ventana > .foto .marco{aspect-ratio:2000/1236!important;height:auto!important;flex:none!important}
.jv .jv-escena > .jv-marco,main .jv-marco{flex:none!important;aspect-ratio:2000/1236!important;height:auto!important;min-height:0!important}
/* Planes (Dan, 4-11-2026): la tarjeta Demo, compacta: no se estira hasta la altura de los planes de pago */
@media (min-width:1200px){
  #planes .plans>div:first-child{display:flex;flex-direction:column;align-self:start;gap:var(--s2);grid-template-rows:none}
  #planes .plans>div:first-child>.btn{margin-top:var(--s3)}
}
/* Planes (Dan, 4-11-2026): los botones centrados en el eje de cada tarjeta */
#planes .plans>div:nth-child(n)>.btn{align-self:center;justify-self:center}
/* Planes (Dan, 4-11-2026): texto centrado en el eje de cada tarjeta y tarjetas algo menores, con la letra y el aire en proporción */
#planes .plans{--fs-xs:12px;--fs-s:13px;--fs-m:14px;--fs-l:16px;--s5:21px}
#planes .plans>div:nth-child(n){text-align:center;align-items:center;justify-items:center}
#planes .plans>div:nth-child(n) .feats{justify-items:center;justify-self:center;width:100%}
#planes .plans .cost,#planes .plans .mes{justify-content:center;justify-self:center}
#planes .plans .cost{line-height:24px;align-self:start;min-height:24px}
@media (min-width:1200px){
  #planes .plans{grid-template-columns:minmax(0,1fr) var(--s3) repeat(4,minmax(0,1fr))}
}
/* Sobre nosotros (Dan, 5-11-2026): el tope de las cifras 1976 cuadra con el de las mayúsculas del título; .137em es el aire interno de la cifra en Jost */
.sn-fechas{margin-top:calc(5px - .137em)}
/* Regla de la cabecera (Dan, 4-11-2026): misma caja y mismo grosor en todas las páginas, para que no salte al cambiar de página */
.regla{height:10px;align-items:end}
.regla i{height:4px}
/* Planes (Dan, 4-11-2026): al pasar el cursor por una tarjeta, los puntos se vuelven a encender desde el centro (js/escala.js) */
.plan-puntos.reinicia circle.on{animation:none}
/* Planes con Grupo (Dan, 4-11-2026): cinco tarjetas. Desde 1200, la Demo a la izquierda y los cuatro de pago juntos; por debajo, la Demo en su fila y los cuatro de dos en dos */
@media (min-width:521px) and (max-width:1199px){
  #planes .plans{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:0}
  #planes .plans>div:first-child{grid-column:1 / -1}
  #planes .plans>div:first-child>.plan-puntos{height:144px}
}
/* La Demo, punto hueco: es una prueba; Personal, el mismo punto lleno */
.plan-puntos circle.on.hueco{fill:none;stroke:#fff;stroke-width:1}
/* Personal lleva una línea menos: la lista arranca a la misma altura que en las demás tarjetas */
@media (min-width:1200px){#planes .plans>div>.feats{align-self:start}}
/* Idiomas plegados (Dan, 4-11-2026): solo se ve el activo; los demás se despliegan hacia su izquierda */
header.cab .util .langs{gap:0;flex-wrap:nowrap}
header.cab .util .langs a:not([aria-current="true"]){max-width:0;margin-right:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-width .4s var(--suave),margin-right .4s var(--suave),opacity .3s var(--suave),color .3s var(--suave)}
header.cab .util .langs.abierta a:not([aria-current="true"]),
header.cab .util .langs:has(a:focus-visible) a:not([aria-current="true"]){max-width:3em;margin-right:var(--s3);opacity:1;overflow:visible;pointer-events:auto}
@media (hover:hover){header.cab .util .langs:hover a:not([aria-current="true"]){max-width:3em;margin-right:var(--s3);opacity:1;overflow:visible;pointer-events:auto}}
@media (prefers-reduced-motion:reduce){header.cab .util .langs a:not([aria-current="true"]){transition:none}}
/* Cabecera y pie más contenidos respecto a la página (Dan, 4-11-2026): medidas de la serie 8 · 13 · 21 · 34 */
@media (min-width:761px){
  header.cab{padding-top:13px}
  header.cab .brand{padding-block:13px}
  header.cab .brand img{height:42px}
  header.cab .tabs,header.cab .util{transform:translateY(4px)}
}
@media (min-width:761px) and (max-width:1180px){
  header.cab .brand{padding-block:8px}
  header.cab .brand img{height:38px}
  header.cab .tabs,header.cab .util{transform:none}
}
@media (min-width:1181px){header.cab .util{transform:none} header.cab .util .btn{transform:translateY(4px)} header.cab .util .btn:hover{transform:translateY(3px)}}
@media (max-width:760px){
  header.cab{padding-top:13px;row-gap:4px}
  header.cab .brand{padding-block:0 8px}
}
footer .sec{padding-block:34px calc(21px + 24px)}
footer li,footer li a{line-height:1.7}
footer li.colofon{line-height:1.5}
/* Aire entre los idiomas y «Acceso app» (Dan, 4-11-2026): 16 px en todas las anchuras de escritorio */
@media (min-width:761px){header.cab .util .langs{top:9px}}
@media (min-width:1181px){header.cab .util .btn{transform:translateY(9px)} header.cab .util .btn:hover{transform:translateY(8px)}}
@media (min-width:761px) and (max-width:1180px){header.cab .util .btn{transform:translateY(16px)} header.cab .util .btn:hover{transform:translateY(15px)}}
/* Planes en pantalla táctil (Dan, 5-11-2026): los puntos esperan apagados hasta que la tarjeta entra en pantalla (js/escala.js) */
.plan-puntos.espera circle.on{animation:none;opacity:.2;transform:scale(.3)}
/* Preguntas frecuentes (Dan, 5-11-2026): el título en el eje central, igual que el de la página */
#preguntas .head{max-width:none;justify-items:center;text-align:center}
main > #preguntas.sec .head > h2{font-size:var(--fs-xl);font-weight:400;line-height:1.35}
/* Planes (Dan, 5-11-2026): el precio y el selector de moneda, centrados en el eje de la tarjeta en todas las anchuras */
#planes .plans .cost,#planes .plans .mes{width:100%;text-align:center}
/* Preguntas frecuentes (Dan, 5-11-2026): el rótulo de cada bloque, a 13 px de la primera pregunta; la separación entre bloques no cambia */
#preguntas{row-gap:0}
#preguntas .faq-grupo{margin:calc(var(--s7) + 32px) 0 13px}
#preguntas .head + .faq-grupo{margin-top:calc(var(--s3) + 32px)}
/* Sobre nosotros (Dan, 5-11-2026): cada fecha encabeza su capítulo, en espejo */
#sobre .head{gap:13px}
.sn-par.sn-capitulo{align-items:start}
.sn-par.espejo .sn-fechas{justify-self:start;justify-items:start}
.sn-par.espejo .sn-txt.sn-izq{text-align:left;justify-items:start;justify-self:start}
@media (max-width:900px){.sn-par.espejo .sn-txt{text-align:left;justify-items:start}}
main > #en-el-aula.sec{padding-bottom:34px}
/* Enlaces (Dan, 5-11-2026): sin subrayado; al pasar, solo el cambio de color */
main a:not(.btn),footer a,.link{text-decoration:none!important}
main a:not(.btn):hover,main a:not(.btn):focus-visible,footer a:hover,footer a:focus-visible,.link:hover,.link:focus-visible{color:var(--teal);text-decoration:none!important;text-shadow:none}
/* Planes en cinco columnas estrechas: el selector de moneda, en su propia línea en todas las tarjetas (Dan, 6-11-2026) */
@media (min-width:1201px) and (max-width:1400px){#planes .plans .moneda{display:flex;justify-content:center;margin:2px 0 0}}

/* Sobre nosotros (Dan, 7-11-2026): cada tramo, texto y visor de mapas sobre las dos columnas; el texto de la columna derecha arranca en el borde de su imagen */
.sn-par .sn-mapa,.sn-par > .sn-mapa{width:100%;justify-self:stretch;margin:0;contain:none;display:grid;gap:var(--s2)}
.sn-mapa .marco{display:block;aspect-ratio:2000/1236!important;height:auto!important;border:0;border-radius:var(--r-card);overflow:hidden;background:var(--soft)}
.sn-mapa img{width:100%;height:100%!important;object-fit:cover;opacity:1!important;aspect-ratio:2000/1236!important}
.sn-mapa figcaption{display:block!important;margin:0;padding:0;font-size:14px;line-height:1.4;color:var(--gris)}
.sn-col{display:grid;gap:var(--s4);min-width:0}
.sn-cierre{margin:0 auto}
@media (max-width:900px){.sn-col{display:contents}.sn-mapa{order:-1}}
/* Sobre nosotros: el mapa llena la pantalla al abrir; la pista da el recorrido del fundido y, al salir la imagen, js/escala.js la retira */
.lamina-pista{position:relative;z-index:100;height:250vh;height:250svh;margin-top:calc(-1 * var(--cab, 0px));width:100%}
.lamina-pista .lamina{position:sticky;top:0;height:100vh;height:100svh;width:100vw;margin:0 0 0 calc(50% - 50vw);overflow:hidden;background:var(--soft)}
.lamina-pista .lamina-fija{height:100%;clip-path:none}
.lamina-pista picture{height:100%}
.lamina-pista img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;transform:none}
.lamina-baja{position:absolute;left:50%;bottom:max(34px,env(safe-area-inset-bottom, 0px));width:55px;height:55px;margin-left:-27.5px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 2px 13px rgba(0,0,0,.18);cursor:pointer;opacity:calc(1 - var(--funde, 0) * 5);transition:background .2s,color .2s}
.lamina-baja:hover,.lamina-baja:active{background:var(--teal);color:#fff}
.lamina-baja:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lamina-baja svg{animation:lamina-baja 2.6s ease-in-out infinite}
@keyframes lamina-baja{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion: reduce){.lamina-baja svg{animation:none}}

/* Modos de la app (Dan, 7-11-2026): dos columnas sobre el eje central, dentro de «Mapas para trabajar en el aula» */
.modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--col-gap, var(--s7));margin-top:var(--s7)}
.modo{display:grid;gap:var(--s3);min-width:0;align-content:start;justify-items:start}
.mod-logo{height:40px;width:auto;max-width:100%;display:block}
.modo .fx{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--caps);color:var(--gris)}
.modo .mini-visor{width:100%}
.modo .mini-visor .marco{border:0;border-radius:var(--r-card);overflow:hidden}
.modo .mini-visor img{aspect-ratio:2000/1236!important;height:auto!important;width:100%;object-fit:cover}
@media (max-width:760px){.modos{grid-template-columns:minmax(0,1fr)}}

/* Cabecera con la misma altura que el pie (Dan, 8-11-2026): 144 px desde 761 px. El menú, el logo y «Acceso app» bajan
   al espacio ganado; los idiomas se quedan arriba, separados del botón */
@media (min-width:761px){header.cab{min-height:144px;align-content:end;box-sizing:border-box}}
.pila [data-c]{cursor:pointer}

/* Sobre nosotros (Dan, 8-11-2026): el centro del texto coincide con el centro de su mapa. En el tercer tramo, el texto de la
   izquierda se centra con el globo y el segundo texto queda debajo del globo */
@media (min-width:901px){
  .sn-par.sn-capitulo{align-items:center}
  .sn-tres{grid-template-areas:"izq mapa" ". der";row-gap:var(--s4)}
  .sn-tres .sn-col{display:contents}
  .sn-tres > .sn-txt{grid-area:izq}
  .sn-tres .sn-mapa{grid-area:mapa}
  .sn-tres .sn-col > .sn-txt{grid-area:der;align-self:start}
  /* el pie del mapa no cuenta: el texto se centra con la imagen, no con imagen y pie */
  .sn-par.sn-capitulo > .sn-txt{padding-bottom:calc(var(--s2) + 14px * 1.4)}
}