/* ============================================================================
   FORMIA · goformia.co
   Sistema visual — construido sobre los tokens de marca del Documento Maestro.
   Concepto: "el giro". La geometría del símbolo Formia —capas que nacen
   verticales y giran hasta encontrarse— gobierna diagramas, transiciones y
   ritmo. La estrella dorada aparece solo en puntos de convergencia.
   ========================================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  /* Marca (Documento Maestro §13) */
  --deep:      #073F49;
  --teal:      #176B73;
  --gold:      #DDB348;
  --cream:     #F6F4ED;
  --white:     #FCFCF9;
  --ink:       #15282B;

  /* Derivados */
  --deep-2:    #0A5260;
  --teal-soft: #E4EDED;
  --gold-dk:   #8B6A17;   /* 4.57:1 sobre crema · 4.90:1 sobre blanco (AA) */
  --gold-soft: #F6EDD3;
  --ink-2:     #3D5459;
  --ink-3:     #5B6D71;   /* 4.93:1 sobre crema · 5.28:1 sobre blanco (AA) */
  --cream-2:   #EFEBDF;

  --on-deep:   #EDEADF;
  --on-deep-2: #9FBEC2;

  --line:      rgba(21,40,43,.13);
  --line-2:    rgba(21,40,43,.07);
  --line-deep: rgba(237,234,223,.16);
  --line-field:rgba(21,40,43,.50);   /* 3.05:1 — bordes de control, WCAG 1.4.11 */

  /* Lectura de brechas — deliberadamente NO rojo/verde:
     no se codifica aprobado/reprobado ni juicio docente. */
  --curric:    #4C6E8C;
  --curric-bg: #EAEFF4;
  --pedag:     #886817;   /* 4.57:1 sobre --pedag-bg (AA) */
  --pedag-bg:  #F7F0DE;

  /* Tipografía */
  --display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --gutter: clamp(22px, 3vw, 52px);
  --maxw: 1540px;
  --maxw-text: 68ch;
  --sec-y: clamp(52px, 6vw, 96px);
  --sec-y-lg: clamp(64px, 7.5vw, 120px);   /* respiro deliberado */
  --sec-y-sm: clamp(38px, 4.4vw, 66px);    /* bloques encadenados */
  --radius: 3px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);

  --shadow-sm: 0 1px 2px rgba(7,63,73,.05);
  --shadow: 0 2px 4px rgba(7,63,73,.04), 0 14px 34px -20px rgba(7,63,73,.28);
  --shadow-lg: 0 4px 8px rgba(7,63,73,.05), 0 28px 60px -30px rgba(7,63,73,.38);

  --nav-h: 90px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0}

html{
  -webkit-text-size-adjust:100%;
  tab-size:2;
  overflow-x:clip;              /* clip, no hidden: preserva sticky */
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
/* Sin scroll-behavior:smooth global: al tabular, el navegador desplazaba con
   animación hasta 6.700px y el foco tardaba más de un segundo en aparecer.
   Las anclas y el riel lateral piden su propio desplazamiento suave por JS. */

body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--cream);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.022em;
  text-wrap:balance;
}

::selection{background:var(--gold);color:var(--deep)}

:focus-visible{
  outline:2px solid var(--gold-dk);
  outline-offset:3px;
  border-radius:2px;
}
.on-deep :focus-visible,.site-footer :focus-visible{outline-color:var(--gold)}

/* =============================================================
   3. Utilidades
   ============================================================= */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:940px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:9999;
  padding:.7rem 1.1rem;background:var(--deep);color:var(--on-deep);
  border-radius:var(--radius);font-weight:600;font-family:var(--display);
}
.skip-link:focus{top:14px}

.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:var(--sec-y-sm)}
.section--air{padding-block:var(--sec-y-lg)}
/* Encadena dos bloques que pertenecen al mismo momento narrativo. */
.section--joined{padding-top:0}
.section--joins{padding-bottom:var(--sec-y-sm)}
.section--white{background:var(--white)}
.section--cream2{background:var(--cream-2)}

/* Campo profundo: el único momento oscuro tiene una razón narrativa */
.on-deep{background:var(--deep);color:var(--on-deep)}
.on-deep h1,.on-deep h2,.on-deep h3,.on-deep h4{color:var(--on-deep)}
.on-deep .lede,.on-deep .muted{color:var(--on-deep-2)}
.on-deep .eyebrow{color:var(--gold)}
.on-deep .eyebrow::before{background:var(--on-deep-2)}
.on-deep hr{border-color:var(--line-deep)}

/* =============================================================
   4. Tipografía de composición
   ============================================================= */
.h-hero{font-size:clamp(1.78rem,3.5vw,3rem);line-height:1.08;letter-spacing:-.028em;max-width:24ch}
.h-1{font-size:clamp(1.62rem,2.7vw,2.3rem);line-height:1.12;letter-spacing:-.024em;max-width:26ch}
.h-2{font-size:clamp(1.24rem,1.9vw,1.6rem);line-height:1.18;letter-spacing:-.019em;max-width:28ch}
.h-3{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.24;letter-spacing:-.014em}

.lede{
  font-size:clamp(1.04rem,1.45vw,1.2rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:56ch;
}
.muted{color:var(--ink-3)}
.body-text{max-width:var(--maxw-text)}
.body-text p + p{margin-top:1em}

.eyebrow{
  font-family:var(--display);
  font-size:.775rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--teal);
  display:flex;align-items:center;gap:11px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";width:24px;height:2px;background:var(--gold);
  border-radius:2px;flex:none;
}

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- botones --- */
.btn{
  --btn-bg:var(--deep);
  --btn-fg:var(--on-deep);
  --btn-bd:var(--deep);
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:.925rem;font-weight:600;
  letter-spacing:-.005em;
  padding:13px 22px;
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  background:var(--btn-bg);
  color:var(--btn-fg);
  overflow:hidden;
  transition:color .4s var(--ease-out),border-color .4s var(--ease-out),
             background-color .4s var(--ease-out);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--teal);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease-out);
}
.btn > *{position:relative;z-index:1}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{border-color:var(--teal)}

.btn__arrow{
  width:15px;height:15px;flex:none;
  transition:transform .45s var(--ease-out);
}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(4px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-field)}
.btn--ghost:hover,.btn--ghost:focus-visible{--btn-fg:var(--on-deep)}
.on-deep .btn--ghost{--btn-fg:var(--on-deep);--btn-bd:var(--line-deep)}
.on-deep .btn--ghost::before{background:var(--gold)}
.on-deep .btn--ghost:hover,.on-deep .btn--ghost:focus-visible{--btn-fg:var(--deep);border-color:var(--gold)}
.on-deep .btn:not(.btn--ghost){--btn-bg:var(--gold);--btn-fg:var(--deep);--btn-bd:var(--gold)}
.on-deep .btn:not(.btn--ghost)::before{background:var(--on-deep)}
.on-deep .btn:not(.btn--ghost):hover{border-color:var(--on-deep)}

.link-inline{
  font-family:var(--display);font-weight:600;font-size:.94rem;
  color:var(--teal);
  display:inline-flex;align-items:center;gap:8px;
  padding-bottom:2px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease-out);
}
.link-inline:hover,.link-inline:focus-visible{background-size:100% 2px}
.link-inline svg{transition:transform .45s var(--ease-out)}
.link-inline:hover svg{transform:translateX(3px)}
.on-deep .link-inline{color:var(--gold)}

/* --- estrella de convergencia --- */
.spark{color:var(--gold);flex:none}
.spark--dk{color:var(--gold-dk)}

/* --- reglas y separadores --- */

/* --- panel de datos (el objeto recurrente del sitio) --- */
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.on-deep .panel{
  background:rgba(255,255,255,.05);
  border-color:var(--line-deep);
  box-shadow:none;
}

.panel__head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;
  padding:14px 20px;
  border-bottom:1px solid var(--line-2);
}
.on-deep .panel__head{border-color:var(--line-deep)}
.panel__title{
  font-family:var(--display);font-size:.82rem;font-weight:600;
  color:var(--ink-2);letter-spacing:-.005em;
}
.on-deep .panel__title{color:var(--on-deep)}
.panel__meta{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.on-deep .panel__meta{color:var(--on-deep-2)}
.panel__body{padding:20px}

/* --- barras de desempeño --- */
.bars{display:grid;gap:11px}
.bar-row{display:grid;grid-template-columns:minmax(96px,.32fr) minmax(0,1fr) auto;gap:14px;align-items:center}
.bar-row__label{font-size:.83rem;color:var(--ink-2);line-height:1.3}
.on-deep .bar-row__label{color:var(--on-deep-2)}
.bar{height:8px;border-radius:6px;background:var(--line-2);overflow:hidden}
.on-deep .bar{background:rgba(255,255,255,.1)}
.bar i{
  display:block;height:100%;border-radius:6px;
  background:var(--teal);
  width:0;
  transition:width 1.1s var(--ease-out);
}
.on-deep .bar i{background:var(--on-deep-2)}
.is-revealed .bar i{width:var(--v,50%)}
.bar-row__val{
  font-family:var(--display);font-size:.8rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-3);min-width:2.6em;text-align:right;
}
.on-deep .bar-row__val{color:var(--on-deep-2)}

/* --- chips / etiquetas de lectura --- */
.chip-tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:.76rem;font-weight:600;
  padding:5px 11px;border-radius:2px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.chip-tag--curric{color:var(--curric)}
.chip-tag--pedag{color:var(--pedag)}
.chip-tag--none{color:var(--teal)}

/* --- listas con regla (sustituyen a las tarjetas repetidas) --- */
.rlist > li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,26px);
  align-items:start;
  padding-block:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--line-2);
}
.rlist > li:first-child{border-top:1px solid var(--line)}
.rlist > li:last-child{border-bottom:1px solid var(--line-2)}
.on-deep .rlist > li{border-color:var(--line-deep)}
.rlist__k{
  font-family:var(--display);font-size:.78rem;font-weight:700;
  color:var(--gold-dk);font-variant-numeric:tabular-nums;
  padding-top:.25em;min-width:2.1em;
}
.on-deep .rlist__k{color:var(--gold)}
.rlist__t{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:5px;letter-spacing:-.012em}
.rlist__d{color:var(--ink-2);font-size:.97rem;max-width:62ch}
.on-deep .rlist__d{color:var(--on-deep-2)}

/* --- nota destacada --- */
.callout{
  border-left:2px solid var(--gold);
  padding:4px 0 4px clamp(16px,2.2vw,24px);
  max-width:64ch;
}
.callout p{color:var(--ink-2);font-size:.98rem}
.on-deep .callout p{color:var(--on-deep-2)}

/* =============================================================
   6. Navegación
   ============================================================= */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  border-bottom:1px solid transparent;
  transition:transform .45s var(--ease-out),background-color .35s ease,
             border-color .35s ease,box-shadow .35s ease;
}
@supports (backdrop-filter:blur(8px)){
  .site-nav{backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
}
.site-nav.is-stuck{
  background:color-mix(in srgb,var(--cream) 96%,transparent);
  border-bottom-color:var(--line);
  box-shadow:0 8px 26px -22px rgba(7,63,73,.5);
}
.site-nav.is-hidden{transform:translateY(-100%)}

.nav-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:20px;
}
.nav-logo{display:flex;align-items:center;flex:none;padding-block:6px}
.nav-logo img{width:auto;height:30px}

.nav-links{
  display:none;
  margin-left:auto;
  align-items:center;
  gap:clamp(14px,1.9vw,30px);
}
.nav-links a{
  font-family:var(--display);font-size:.9rem;font-weight:500;
  color:var(--ink-2);
  position:relative;padding-block:6px;
  transition:color .3s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease-out);
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--teal)}

.nav-cta{
  display:none;
  font-family:var(--display);font-size:.86rem;font-weight:600;
  color:var(--teal);
  align-items:center;gap:7px;
  padding:9px 15px;
  border:1px solid var(--line-field);
  border-radius:var(--radius);
  transition:border-color .35s var(--ease-out),color .35s ease,background-color .35s ease;
}
.nav-cta:hover,.nav-cta:focus-visible{border-color:var(--teal);background:var(--teal-soft)}
.nav-cta svg{transition:transform .4s var(--ease-out)}
.nav-cta:hover svg{transform:translate(2px,-2px)}

.nav-toggle{
  position:relative;
  margin-left:auto;
  width:42px;height:42px;
  border:1px solid var(--line-field);border-radius:var(--radius);
  transition:border-color .35s var(--ease-out);
}
.nav-toggle:hover{border-color:var(--teal)}
/* Las tres barras comparten centro exacto: la X siempre cierra bien. */
.nav-toggle span{
  position:absolute;left:50%;top:50%;
  width:18px;height:1.6px;margin:-0.8px 0 0 -9px;
  background:var(--ink);border-radius:2px;
  transition:transform .42s var(--ease-out),opacity .2s ease;
}
.nav-toggle span:nth-child(1){transform:translateY(-5.5px)}
.nav-toggle span:nth-child(3){transform:translateY(5.5px)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

.nav-drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:8px var(--gutter) 26px;
  display:grid;
  transform:translateY(-8px);
  opacity:0;visibility:hidden;
  transition:opacity .32s ease,transform .32s var(--ease-out),visibility .32s;
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
}
.nav-drawer.is-open{opacity:1;visibility:visible;transform:none;
  box-shadow:0 0 0 100vh color-mix(in srgb,var(--deep) 42%,transparent)}
.nav-drawer a{
  font-family:var(--display);font-size:1.14rem;font-weight:600;
  padding:15px 0;border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;
  letter-spacing:-.015em;
}
.nav-drawer a[aria-current="page"]{color:var(--teal)}
.nav-drawer .drawer-cta{
  margin-top:20px;border:0;justify-content:flex-start;gap:9px;
  color:var(--teal);font-size:.98rem;
}

@media (min-width:1080px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-toggle{display:none}
  .nav-drawer{display:none}
}

/* aviso "acceso estudiantes" — sin inventar destino */
.soon{
  position:fixed;z-index:120;
  left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--deep);color:var(--on-deep);
  padding:13px 20px;border-radius:var(--radius);
  font-size:.9rem;box-shadow:var(--shadow-lg);
  max-width:min(92vw,420px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,transform .4s var(--ease-out),visibility .3s;
}
.soon.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.soon b{font-family:var(--display);color:var(--gold);font-weight:600}

/* =============================================================
   7. Hero
   ============================================================= */
.hero{
  padding-top:calc(var(--nav-h) + clamp(34px,5.4vw,68px));
  padding-bottom:clamp(44px,6vw,84px);
  position:relative;
  overflow:hidden;
}
.hero__grid{
  display:grid;gap:clamp(30px,4.2vw,54px);
  align-items:start;
}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,36px)}
.hero .lede{margin-top:20px}

/* marca de agua: el giro del símbolo, no el logo repetido */
.hero__turn{
  position:absolute;pointer-events:none;
  right:clamp(-30px,-2vw,0px);bottom:-14%;
  width:min(30vw,330px);
  color:var(--teal);opacity:.075;
  z-index:0;
}
.hero > .wrap{position:relative;z-index:1}
@media (max-width:959px){ .hero__turn{width:56vw;right:-14%;bottom:-8%;opacity:.055} }

/* páginas internas: hero editorial más contenido */
.hero--page{padding-bottom:clamp(34px,5vw,64px)}
.hero--page .h-hero{max-width:24ch}

/* =============================================================
   8. WOW 1 — el resultado que gana contexto (escena sticky)
   ============================================================= */
.scene{position:relative}
.scene__track{height:170vh}
.scene__stage{
  position:sticky;top:0;
  height:100svh;min-height:560px;
  display:flex;align-items:center;
  overflow:hidden;
}
.scene__inner{width:100%;height:100%;display:flex}
.scene__inner > .wrap{
  flex:1;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(22px,4.4vh,54px);
}
.scene__top{
  display:flex;align-items:center;gap:18px;
  padding-bottom:14px;border-bottom:1px solid var(--line-deep);
}
.scene__top .eyebrow{margin-bottom:0}
.scene__top .scene__area{
  margin-left:auto;font-size:.8rem;color:var(--on-deep-2);
}
.scene__bottom{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line-deep);
}
.scene__hint{font-size:.8rem;color:var(--on-deep-2);margin-left:auto}
.scene__grid{flex:1;align-content:center}
.scene__grid{display:grid;gap:clamp(26px,4vw,52px);align-items:center}
@media (min-width:960px){
  .scene__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:center;gap:clamp(30px,4vw,64px)}
  .scene__caption{align-self:center}
  .layers{max-width:none}
}

.scene__caption{min-height:0}
.scene__step{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .16s ease,transform .5s var(--ease-out);
  position:absolute;
  max-width:40ch;
  pointer-events:none;
}
.scene__steps{position:relative;min-height:clamp(230px,32vh,320px)}
.scene__step.is-on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .5s ease .1s,transform .6s var(--ease-out) .1s}
.scene__step .h-2{margin-bottom:14px;font-size:clamp(1.34rem,2.2vw,1.92rem);max-width:16ch}
.scene__step p{color:var(--on-deep-2);font-size:clamp(1rem,1.15vw,1.1rem);max-width:44ch}
.scene__step__k{
  display:block;font-family:var(--display);font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}

.scene__progress{display:flex;gap:6px}
.scene__progress i{width:44px}
.scene__progress i{
  width:34px;height:2px;border-radius:2px;
  background:var(--line-deep);
  overflow:hidden;position:relative;
}
.scene__progress i::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.scene__progress i.is-on::after{transform:scaleX(1)}

/* las capas del instrumento */
.layers{position:relative;display:grid;gap:12px;max-width:660px}
.layers__head{
  display:grid;
  grid-template-columns:minmax(84px,.3fr) minmax(0,1fr);
  gap:clamp(10px,1.8vw,20px);
  margin-bottom:4px;
}
.layers__head > span:last-child{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.layers__head b{
  font-family:var(--display);font-size:.7rem;font-weight:600;
  color:var(--on-deep-2);text-align:center;
  font-variant-numeric:tabular-nums;
}
.layers__foot{
  margin-top:14px;font-size:.82rem;color:var(--on-deep-2);
}
.layer{
  display:grid;
  grid-template-columns:minmax(84px,.3fr) minmax(0,1fr);
  gap:clamp(10px,1.8vw,20px);
  align-items:center;
  opacity:0;
  transform:translateX(var(--enter,-24px));
  transition:opacity .6s ease,transform .8s var(--ease-out);
}
.layer.is-on{opacity:1;transform:none}
.layer__name{
  font-family:var(--display);font-size:.75rem;font-weight:600;
  color:var(--on-deep-2);text-align:right;line-height:1.32;
}
.layer__track{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.cellu{
  height:clamp(30px,4.6vw,62px);
  border-radius:2px;
  background:rgba(237,234,223,.16);
  transition:background-color .5s ease,opacity .5s ease,box-shadow .5s ease;
}
.layer--result .cellu{background:rgba(180,208,211,.72)}
.layer--result .cellu.low{background:rgba(180,208,211,.13);box-shadow:inset 0 0 0 1px rgba(180,208,211,.22)}
.layer--plan .cellu{background:rgba(124,166,198,.62)}
.layer--plan .cellu.void{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(124,166,198,.65)}
.layer--ref .cellu{background:rgba(237,234,223,.26)}

/* marcadores de convergencia */
.layers__marks{
  display:grid;grid-template-columns:minmax(84px,.3fr) minmax(0,1fr);
  gap:clamp(10px,1.8vw,20px);margin-top:12px;
}
.layers__marks > span:last-child{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.mark{
  display:grid;place-items:center;height:22px;
  opacity:0;transform:scale(.6);
  transition:opacity .45s ease,transform .55s var(--ease-out);
}
.mark.is-on{opacity:1;transform:none}

.scene__read{
  margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line-deep);
  display:flex;gap:13px;align-items:flex-start;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s ease .1s,transform .7s var(--ease-out) .1s;
}
.scene__read.is-on{opacity:1;transform:none}
.scene__read p{font-size:.97rem;color:var(--on-deep-2);max-width:54ch}
.scene__read strong{color:var(--on-deep);font-weight:600}

/* =============================================================
   9. Tres fuentes — composición asimétrica, no tres tarjetas
   ============================================================= */
.sources{display:grid;gap:clamp(18px,2.6vw,26px)}
@media (min-width:960px){
  .sources{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .sources__item:nth-child(2){margin-top:clamp(28px,4vw,56px)}
  .sources__item:nth-child(3){margin-top:clamp(56px,8vw,112px)}
}
.sources__item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,2.6vw,28px);
  position:relative;
  transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),
             transform .45s var(--ease-out);
}
.sources__item:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-3px)}
.sources__n{
  font-family:var(--display);font-size:.76rem;font-weight:700;
  color:var(--gold-dk);letter-spacing:.02em;margin-bottom:14px;display:block;
}
.sources__item h3{margin-bottom:9px}
.sources__item p{font-size:.96rem;color:var(--ink-2)}
/* micro-visualizaciones distintas por fuente */
.viz-bars{display:flex;align-items:flex-end;gap:5px;width:100%;height:56px}
.viz-bars i{
  flex:1;background:var(--teal);border-radius:2px;
  height:var(--h,40%);
  transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s var(--ease-out) var(--d,0s);
}
.is-revealed .viz-bars i{transform:scaleY(1)}
.viz-bars i.dim{background:var(--teal-soft)}

.viz-plan{display:grid;gap:6px;width:100%}
.viz-plan span{
  height:9px;border-radius:2px;
  background:color-mix(in srgb,var(--curric) 34%,transparent);
  border:1px solid color-mix(in srgb,var(--curric) 55%,transparent);
  width:var(--w,100%);
  transform-origin:left;transform:scaleX(0);
  transition:transform .7s var(--ease-out) var(--d,0s);
}
.is-revealed .viz-plan span{transform:scaleX(1)}
.viz-plan span.gap{background:transparent;border-style:dashed;
  border-color:color-mix(in srgb,var(--curric) 65%,transparent)}

.viz-scale{display:flex;align-items:center;gap:8px;width:100%}
.viz-scale i{
  flex:1;height:4px;border-radius:3px;background:var(--line);
  position:relative;overflow:hidden;
}
.viz-scale i::after{
  content:"";position:absolute;inset:0;background:var(--gold-dk);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .2s;
}
.is-revealed .viz-scale i::after{transform:scaleX(.72)}
.viz-scale b{
  font-family:var(--display);font-size:.74rem;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* convergencia bajo las tres fuentes */
.converge{
  margin-top:clamp(26px,3.6vw,40px);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 20px;
  background:var(--gold-soft);
  border-radius:var(--radius);
}
.converge p{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.014em}

/* =============================================================
   10. Brechas — dos lecturas, dos decisiones
   ============================================================= */
.gaps{display:grid;gap:clamp(16px,2.4vw,22px)}
@media (min-width:840px){ .gaps{grid-template-columns:repeat(2,minmax(0,1fr))} }
.gap-card{
  padding:clamp(22px,3vw,34px);
  border-radius:var(--radius);
  border:1px solid transparent;
  display:flex;flex-direction:column;gap:14px;
}
.gap-card--curric{background:var(--curric-bg);border-color:color-mix(in srgb,var(--curric) 22%,transparent)}
.gap-card--pedag{background:var(--pedag-bg);border-color:color-mix(in srgb,var(--pedag) 24%,transparent)}
.gap-card h3{max-width:20ch}
.gap-card p{font-size:.98rem;color:var(--ink-2)}
/* Micro-diagrama de la brecha: tres temas del plan, uno de ellos ausente
   (curricular) o presente pero flojo (pedagógica). Antes se leía como un
   esqueleto de carga porque las tres barras eran iguales y muy tenues. */
.gap-card__viz{display:grid;gap:7px;margin-block:6px;max-width:290px}
.gap-card__viz span{
  height:12px;border-radius:2px;position:relative;
  width:var(--w,100%);
}
.gap-card--curric .gap-card__viz span{background:color-mix(in srgb,var(--curric) 62%,transparent)}
.gap-card--curric .gap-card__viz span.void{
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--curric);
  background-image:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--curric) 22%,transparent) 0 4px,transparent 4px 8px);
}
.gap-card--pedag .gap-card__viz span{background:color-mix(in srgb,var(--pedag) 62%,transparent)}
.gap-card--pedag .gap-card__viz span.low{
  background:color-mix(in srgb,var(--pedag) 22%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pedag) 55%,transparent);
}
.gap-card__cap{
  font-family:var(--display);font-size:.74rem;font-weight:600;color:var(--ink-3);
  margin-top:-2px;
}
.gap-card__do{
  margin-top:auto;padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  font-size:.94rem;
}
.gap-card__do b{font-family:var(--display);font-weight:600}

/* diagnóstico interactivo */
.diag__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.diag__chip{
  font-family:var(--display);font-size:.87rem;font-weight:500;
  padding:9px 15px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-2);text-align:left;
  transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out),
             color .35s ease,transform .35s var(--ease-out);
}
.diag__chip:hover{border-color:var(--teal);color:var(--ink);transform:translateY(-1px)}
.diag__chip[aria-pressed="true"]{
  background:var(--deep);color:var(--on-deep);border-color:var(--deep);
}
.diag__out{display:grid;gap:14px}
@media (min-width:720px){ .diag__out{grid-template-columns:repeat(3,minmax(0,1fr))} }
.diag__box{border:1px solid var(--line-2);border-radius:var(--radius);padding:15px 17px;background:var(--cream)}
.diag__box h4{
  font-family:var(--display);font-size:.76rem;font-weight:600;
  color:var(--ink-3);margin-bottom:8px;letter-spacing:-.005em;
}
.diag__val{font-family:var(--display);font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.diag__read{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;gap:13px;align-items:flex-start;
}
.diag__read p{font-size:.97rem;color:var(--ink-2);max-width:60ch}
.demo-note{
  margin-top:16px;font-size:.8rem;color:var(--ink-3);line-height:1.5;max-width:64ch;
}

/* =============================================================
   11. WOW 3 — el ciclo como cinta continua
   ============================================================= */
.cycle{position:relative;margin-top:clamp(26px,4vw,44px)}
.cycle__line{
  position:absolute;left:0;right:0;top:19px;height:2px;
  background:var(--line-deep);border-radius:2px;
  display:none;
}
.cycle__line::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform 1.6s var(--ease-out);
}
.is-revealed .cycle__line::after{transform:scaleX(1)}
.cycle__steps{display:grid;gap:0}
.cycle__step{
  position:relative;
  padding:16px 0 16px 34px;
  border-left:2px solid var(--line-deep);
}
.cycle__step::before{
  content:"";position:absolute;left:-7px;top:22px;
  width:12px;height:12px;border-radius:50%;
  background:var(--deep);
  box-shadow:inset 0 0 0 2px var(--on-deep-2);
  transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out);
}
.cycle__step.is-key::before{box-shadow:inset 0 0 0 3px var(--gold);transform:scale(1.18)}
.cycle__step b{
  display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  color:var(--on-deep);margin-bottom:4px;letter-spacing:-.014em;
}
.cycle__step span{font-size:.92rem;color:var(--on-deep-2);display:block;max-width:44ch}

@media (min-width:960px){
  .cycle__line{display:block}
  .cycle__steps{grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
  .cycle__step{
    padding:0;border-left:0;padding-top:44px;padding-right:16px;
  }
  .cycle__step::before{left:0;top:13px}
  .cycle__step span{font-size:.85rem}
  .cycle__step b{font-size:.92rem}
}

/* =============================================================
   12. Escala de lectura
   ============================================================= */
.scale-row{display:grid;gap:14px}
@media (min-width:840px){ .scale-row{grid-template-columns:repeat(4,minmax(0,1fr))} }
.scale-item{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;background:var(--white);
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .4s var(--ease-out),background-color .4s ease;
}
.scale-item:hover{border-color:var(--teal)}
.scale-item__dots{display:flex;flex-wrap:wrap;gap:3px;max-width:96px;min-height:34px;align-content:flex-start}
.scale-item__dots i{width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.32}
.scale-item__dots i.on{opacity:1}
.scale-item h4{font-family:var(--display);font-size:.98rem;font-weight:600;letter-spacing:-.015em}
.scale-item p{font-size:.9rem;color:var(--ink-2)}

/* =============================================================
   13. Selector oficial / privada
   ============================================================= */
.switch{
  display:inline-flex;padding:4px;gap:4px;
  background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--radius);
}
.on-deep .switch{background:rgba(255,255,255,.06);border-color:var(--line-deep)}
.switch button{
  font-family:var(--display);font-size:.92rem;font-weight:600;
  padding:11px 20px;border-radius:2px;color:var(--ink-2);
  letter-spacing:-.01em;
  transition:background-color .4s var(--ease-out),color .35s ease,box-shadow .4s var(--ease-out);
}
.on-deep .switch button{color:var(--on-deep-2)}
.switch button[aria-selected="true"]{background:var(--deep);color:var(--on-deep);box-shadow:var(--shadow-sm)}
.on-deep .switch button[aria-selected="true"]{background:var(--gold);color:var(--deep)}
.switch button:hover:not([aria-selected="true"]){color:var(--ink)}
.on-deep .switch button:hover:not([aria-selected="true"]){color:var(--on-deep)}

.route{display:none}
.route.is-active{display:block;animation:routeIn .5s var(--ease-out) both}
@keyframes routeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* la sección cambia de temperatura según la ruta */
.route-field{transition:background-color .7s var(--ease-soft)}
.route-field[data-route="oficial"]{background:var(--cream)}
.route-field[data-route="privada"]{background:var(--teal-soft)}

.qa{display:grid;gap:0}
.qa__item{border-top:1px solid var(--line-2);padding-block:20px}
.qa__item:first-child{border-top:1px solid var(--line)}
.qa__q{
  font-family:var(--display);font-weight:600;font-size:1.04rem;
  letter-spacing:-.016em;margin-bottom:8px;
  display:flex;gap:11px;align-items:baseline;
}
.qa__q::before{content:"—";color:var(--gold-dk);flex:none}
.qa__a{color:var(--ink-2);font-size:.98rem;max-width:64ch;padding-left:24px}

/* =============================================================
   14. Principios (Nosotros)
   ============================================================= */
.principles{display:grid;gap:0}
.principle{
  display:grid;gap:clamp(10px,2vw,28px);
  padding-block:clamp(24px,3.2vw,36px);
  border-top:1px solid var(--line);
  align-items:start;
}
@media (min-width:840px){ .principle{grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr)} }
.principle__n{
  font-family:var(--display);font-size:.78rem;font-weight:700;
  color:var(--gold-dk);padding-top:.4em;min-width:2.4em;
}
.principle h3{letter-spacing:-.022em}
.principle p{color:var(--ink-2);font-size:1rem;max-width:56ch}

.team-grid{display:grid;gap:clamp(16px,2.4vw,24px)}
@media (min-width:720px){ .team-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} }
.team-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.team-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.team-card__body{padding:18px 20px}
.team-card h4{font-family:var(--display);font-size:1.02rem;font-weight:600}
.team-card .role{font-size:.86rem;color:var(--teal);margin-bottom:8px;font-family:var(--display);font-weight:600}
.team-card p{font-size:.92rem;color:var(--ink-2)}

/* =============================================================
   15. Formulario
   ============================================================= */
.form-shell{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(22px,3.4vw,40px);
}
.form-steps{display:flex;gap:10px;margin-bottom:26px;align-items:center}
.form-steps__i{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.84rem;font-weight:600;color:var(--ink-3);
  transition:color .4s ease;
}
.form-steps__i b{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);font-size:.75rem;
  transition:background-color .4s var(--ease-out),color .35s ease,border-color .4s ease;
}
.form-steps__i.is-on{color:var(--ink)}
.form-steps__i.is-on b{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.form-steps__i.is-done b{background:var(--gold);color:var(--deep);border-color:var(--gold)}
.form-steps__bar{flex:1;height:1px;background:var(--line)}

.fstep{display:none}
.fstep.is-active{display:grid;gap:16px;animation:routeIn .45s var(--ease-out) both}

.field{display:grid;gap:7px}
.field > label{
  font-family:var(--display);font-size:.86rem;font-weight:600;
  color:var(--ink-2);letter-spacing:-.008em;
}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;
  width:100%;padding:12px 14px;
  border:1px solid var(--line-field);border-radius:var(--radius);
  background:var(--cream);color:var(--ink);
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);background:var(--white);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 14%,transparent);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.72}
.field .hint{font-size:.83rem;color:var(--ink-3)}
.field .err{font-size:.85rem;color:#96442E;display:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#96442E}
.field.has-error .err{display:block}

.field-row{display:grid;gap:16px}
@media (min-width:640px){ .field-row{grid-template-columns:repeat(2,minmax(0,1fr))} }

.radio-set{display:flex;gap:10px;flex-wrap:wrap}
.radio-set label{
  position:relative;
  flex:1 1 150px;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line-field);border-radius:var(--radius);
  padding:13px 16px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.93rem;color:var(--ink-2);
  transition:border-color .35s var(--ease-out),background-color .35s ease,color .3s ease;
}
/* accesible: sigue en el árbol y es enfocable, pero no se ve */
.radio-set input{
  position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.radio-set label::before{
  content:"";width:15px;height:15px;flex:none;border-radius:50%;
  border:1.5px solid var(--line-field);
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.radio-set label:hover{border-color:var(--teal)}
.radio-set label:hover::before{border-color:var(--teal)}
.radio-set label:has(input:checked){border-color:var(--deep);background:var(--deep);color:var(--on-deep)}
.radio-set label:has(input:checked)::before{
  border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px var(--deep);
}
.radio-set label:has(input:focus-visible){outline:2px solid var(--gold-dk);outline-offset:3px}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.form-msg{font-size:.94rem;padding:14px 16px;border-radius:var(--radius);display:none}
.form-msg.is-on{display:block}
.form-msg--err{background:#FAEDE9;color:#7C3823;border:1px solid rgba(150,68,46,.28)}

.is-sending .btn{opacity:.65;pointer-events:none}

/* aside de contacto */
.contact-aside{display:grid;gap:24px;align-content:start}
.contact-aside__item{border-top:1px solid var(--line);padding-top:18px}
.contact-aside__item h4{font-family:var(--display);font-size:.92rem;font-weight:600;margin-bottom:6px}
.contact-aside__item p{font-size:.94rem;color:var(--ink-2)}
.wa{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--teal);
  margin-top:10px;
}
.wa:hover{color:var(--deep)}
.wa svg{flex:none}

/* =============================================================
   16. Footer
   ============================================================= */
.site-footer{
  background:var(--deep);color:var(--on-deep);
  padding-block:clamp(46px,6vw,72px) 30px;
}
.footer-grid{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:840px){ .footer-grid{grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,.85fr))} }
.footer-logo img{height:34px;width:auto}
.footer-tag{margin-top:16px;color:var(--on-deep-2);font-size:.95rem;max-width:34ch}
.footer-col h2{
  font-family:var(--display);font-size:.78rem;font-weight:600;
  color:var(--on-deep-2);margin-bottom:14px;letter-spacing:.01em;
}
.footer-col li + li{margin-top:9px}
.footer-col a,.footer-btn{
  display:inline-block;padding-block:4px;   /* 24px mínimo · WCAG 2.2 SC 2.5.8 */
  font-size:.95rem;color:var(--on-deep);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:2px;
  transition:background-size .4s var(--ease-out),color .3s ease;
}
.footer-col a:hover,.footer-col a:focus-visible,
.footer-btn:hover,.footer-btn:focus-visible{background-size:100% 1px;color:var(--gold)}
.footer-btn{font-family:inherit;text-align:left;cursor:pointer;padding-inline:0}   /* sin la sangría del navegador: alinea con los enlaces */
.footer-bottom{
  margin-top:clamp(34px,5vw,54px);padding-top:22px;
  border-top:1px solid var(--line-deep);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.85rem;color:var(--on-deep-2);
}

/* =============================================================
   17. Reveals (una sola orquestación, sin fade en todo)
   ============================================================= */
/* Solo se ocultan si hay JS. Sin JS, el contenido se ve completo desde el
   primer pintado — la clase .js la pone un script en línea en el <head>. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease-soft),transform .8s var(--ease-out);
}
.js [data-reveal].is-revealed{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.08s}
.js [data-reveal][data-delay="2"]{transition-delay:.16s}
.js [data-reveal][data-delay="3"]{transition-delay:.24s}

/* transición entre páginas */
@view-transition{navigation:auto}

/* =============================================================
   18. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  /* Con movimiento reducido el observador de scroll puede no llegar a marcar
     .is-revealed. Sin esto, la cohorte de "subir el piso" quedaba aplastada
     al 18% y las barras a cero: el diagrama clave dejaba de comunicar. */
  .cohort i{transform:scaleY(1)!important;transition:none!important}
  .floor__row.is-formia .cohort i.hit{height:var(--h2,var(--h))!important}
  .bar i{width:var(--v,50%)!important;transition:none!important}
  .level__bar i{width:var(--f,50%)!important;transition:none!important}
  .pair__bar i{width:var(--v,50%)!important;transition:none!important}
  .viz-bars i{transform:scaleY(1)!important}
  .viz-plan span{transform:scaleX(1)!important}
  .viz-scale i::after{transform:scaleX(.72)!important}
  .cycle__line::after{transform:scaleX(1)!important}
  .scale-item__dots i{opacity:1!important}
  .scene__track{height:auto}
  .scene__stage{position:static;height:auto;min-height:0;padding-block:var(--sec-y)}
  .scene__step{position:static;opacity:1;transform:none;margin-bottom:20px;pointer-events:auto}
  .scene__steps{min-height:0}
  .layer,.mark,.scene__read{opacity:1;transform:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .cycle__line::after{transform:scaleX(1)}
  .viz-bars i{transform:scaleY(1)}
  .viz-plan span{transform:scaleX(1)}
}


/* =============================================================
   18b. Escena en móvil — no es el desktop comprimido.
   El sticky se retira y la secuencia se lee en vertical, con las
   tres capas visibles y cada paso como un momento de lectura.
   ============================================================= */
@media (max-width:959px){
  .scene__track{height:auto}
  .scene__stage{position:static;height:auto;min-height:0;display:block;overflow:visible}
  .scene__inner{height:auto;display:block}
  .scene__inner > .wrap{display:block;padding-block:var(--sec-y)}
  .scene__grid{display:block}
  .scene__top{flex-direction:column;align-items:flex-start;gap:6px}
  .scene__top .scene__area{margin-left:0}
  .scene__bottom{display:none}

  .scene__steps{min-height:0;margin-top:26px}
  .scene__step{
    position:static;opacity:1;transform:none;pointer-events:auto;
    max-width:none;padding-left:20px;
    border-left:2px solid var(--line-deep);
    margin-bottom:22px;
  }
  .scene__step.is-on{border-left-color:var(--gold)}
  .scene__step .h-2{font-size:1.18rem;margin-bottom:8px}
  .scene__step p{font-size:.95rem}

  .layers{margin-top:30px;max-width:none}
  .layer{opacity:1;transform:none;grid-template-columns:minmax(0,1fr);gap:7px}
  .layer__name{text-align:left;font-size:.72rem}
  .layers__head{grid-template-columns:minmax(0,1fr)}
  .layers__head > span:first-child{display:none}
  .layers__marks{grid-template-columns:minmax(0,1fr)}
  .layers__marks > span:first-child{display:none}
  .mark{opacity:1;transform:none}
  .scene__read{opacity:1;transform:none}
  .cellu{height:34px}
}
@media (min-width:720px) and (max-width:959px){
  /* En tablet la secuencia se lee en vertical, con más aire que en móvil.
     Los anchos máximos pensados para la columna estrecha del escritorio
     partían los titulares en tres líneas. */
  .scene__step{max-width:none;padding-left:22px}
  .scene__step .h-2{max-width:26ch;font-size:clamp(1.3rem,3.4vw,1.6rem)}
  .scene__step p{max-width:66ch}
  .scene__steps{margin-top:26px}
  .layers{max-width:none}
  .cellu{height:44px}
  .scene__read{display:flex}
  .topic-insight{margin-top:16px}
  .lead-grid{gap:26px}
  .floor__hd{flex-direction:row;align-items:baseline}
  .value{grid-template-columns:repeat(2,minmax(0,1fr))}
  .levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reports,.rep.is-active{grid-template-columns:minmax(0,1fr)}
  .sheet{position:static}
}

/* =============================================================
   19. Impresión
   ============================================================= */
@media print{
  .site-nav,.nav-drawer,.soon{display:none}
  .on-deep{background:#fff;color:#000}
  .scene__track{height:auto}
  .scene__stage{position:static;height:auto}
}


/* =============================================================
   20. Capa de experiencia — consolidada
   Antes vivía inyectada desde main.js (initExperienceV2) y desde
   interacciones.js. Ahora está aquí: un solo sistema, sin
   sobreescritura de tokens en tiempo de ejecución y sin salto de
   layout al arrancar el JavaScript.
   ============================================================= */

@media (min-width:1080px){
  .nav-inner{gap:clamp(24px,2.2vw,40px)}
  .nav-logo{transition:transform .32s var(--ease-out)}
  .nav-logo img{height:42px}
  .nav-logo:hover,.nav-logo:focus-visible{transform:translateY(-1px) scale(1.03)}
  .nav-links{gap:clamp(20px,1.9vw,34px)}
  .nav-links a{font-size:.99rem;padding-block:10px;letter-spacing:-.008em}
  .nav-cta{font-size:.94rem;padding:11px 17px}
  .hero{padding-bottom:clamp(64px,7vw,108px)}
  .hero .h-hero{font-size:clamp(2.2rem,3.25vw,3.35rem)}
  .hero .lede{font-size:clamp(1.08rem,1.25vw,1.28rem)}
}
@media (min-width:1440px){
  :root{--maxw:1580px;--gutter:clamp(28px,3vw,54px)}
  .hero__grid{gap:clamp(44px,5vw,84px)}
}

/* --- barra de progreso de lectura (una sola) --- */
.formia-progress{
  position:fixed;z-index:180;left:0;right:0;top:0;height:3px;
  background:rgba(7,63,73,.08);pointer-events:none;
}
.formia-progress__fill{
  display:block;width:100%;height:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--teal) 0%,var(--gold) 78%,#E8C86F 100%);
  will-change:transform;
}

/* --- navegación lateral por secciones (una sola) --- */
.formia-sections{
  position:fixed;right:clamp(12px,1.2vw,20px);top:50%;z-index:96;
  transform:translateY(-50%);display:grid;gap:0;padding:14px 9px;
  border:1px solid rgba(7,63,73,.12);border-radius:999px;
  background:color-mix(in srgb,var(--cream) 86%,transparent);
  box-shadow:0 16px 42px -32px rgba(7,63,73,.5);
}
@supports (backdrop-filter:blur(8px)){
  .formia-sections{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
}
.formia-sections__rail{
  position:absolute;z-index:0;top:20px;bottom:20px;left:50%;width:2px;
  transform:translateX(-50%);background:rgba(7,63,73,.14);overflow:hidden;
}
.formia-sections__rail i{
  position:absolute;inset:0;background:linear-gradient(180deg,var(--teal),var(--gold));
  transform:scaleY(0);transform-origin:top center;will-change:transform;
}
.formia-dot{
  /* 26x26: el punto visible mide 7px, pero el objetivo pulsable no puede
     bajar de 24x24 (WCAG 2.5.8). */
  position:relative;z-index:1;width:26px;height:26px;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;outline-offset:4px;
}
.formia-dot::before{
  content:"";display:block;width:7px;height:7px;border-radius:50%;
  background:#8FA3A6;border:2px solid var(--cream);
  box-shadow:0 0 0 1px rgba(7,63,73,.16);
  transition:transform .34s var(--ease-out),background-color .3s ease,box-shadow .34s var(--ease-out);
}
.formia-dot:hover::before,.formia-dot:focus-visible::before{transform:scale(1.5);background:var(--teal)}
.formia-dot.is-active::before{
  width:10px;height:10px;background:var(--gold);
  transform:scale(1.1);box-shadow:0 0 0 4px rgba(221,179,72,.2),0 0 0 7px rgba(7,63,73,.06);
}
.formia-dot.is-passed::before{background:var(--teal)}
.formia-dot span{
  position:absolute;right:32px;top:50%;transform:translate(8px,-50%);
  white-space:nowrap;padding:6px 10px;border-radius:5px;
  background:var(--deep);color:var(--on-deep);
  font-family:var(--display);font-size:.75rem;font-weight:600;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 10px 26px -16px rgba(7,63,73,.65);
  transition:opacity .18s ease,transform .28s var(--ease-out),visibility .18s;
}
.formia-dot:hover span,.formia-dot:focus-visible span{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media (max-width:1120px){.formia-sections{display:none}}
@media print{.formia-progress,.formia-sections{display:none!important}}

/* --- microinteracciones que sí aportan --- */
.btn:hover,.btn:focus-visible{box-shadow:0 12px 28px -20px rgba(7,63,73,.55)}
.btn:active,.nav-cta:active{filter:brightness(.97)}
.micro-surface{
  transition:border-color .36s var(--ease-out),box-shadow .42s var(--ease-out),
             background-color .36s ease;
}
.micro-surface:hover,.micro-surface:focus-within{
  border-color:color-mix(in srgb,var(--teal) 32%,transparent);
  box-shadow:0 20px 44px -32px rgba(7,63,73,.42);
}

/* --- exploración de las tres fuentes --- */
.sources__item{cursor:pointer;overflow:hidden;transition:transform .5s var(--ease-out),
  opacity .35s ease,box-shadow .5s var(--ease-out),border-color .35s ease}
.sources.is-exploring .sources__item:not(.is-source){opacity:.55}
.sources__item.is-source{
  z-index:2;transform:translateY(-8px) scale(1.02);
  border-color:color-mix(in srgb,var(--teal) 45%,transparent);
  box-shadow:0 26px 56px -36px rgba(7,63,73,.45);
}
.converge{transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out)}
.converge.is-reacting{transform:translateY(-2px);box-shadow:0 18px 40px -32px rgba(7,63,73,.4)}
.formia-source-state{
  margin-left:auto;font-family:var(--display);font-size:.78rem;font-weight:700;
  color:var(--teal);letter-spacing:.01em;
}

/* --- exploración de las dos brechas --- */
.gap-card{cursor:pointer;transition:transform .5s var(--ease-out),opacity .35s ease,
  box-shadow .5s var(--ease-out)}
.gaps.is-exploring .gap-card:not(.is-gap){opacity:.6}
.gap-card.is-gap{transform:translateY(-6px);box-shadow:0 26px 54px -38px rgba(7,63,73,.4)}
.callout{position:relative;transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out)}

/* --- el ciclo --- */
.cycle{--cycle-progress:.01}
.cycle__line::after{transform:scaleX(var(--cycle-progress));transition:transform .6s var(--ease-out)}
.cycle__step{cursor:pointer;border-radius:8px;transition:transform .4s var(--ease-out),
  opacity .3s ease,color .3s ease}
.cycle__steps.is-exploring .cycle__step:not(.is-cycle){opacity:.55}
.cycle__step.is-cycle{transform:translateY(-5px);opacity:1}
.cycle__step.is-cycle::before{background:var(--gold);transform:scale(1.55);
  box-shadow:0 0 0 5px rgba(221,179,72,.18)}
.cycle__step.is-cycle b{color:var(--gold)}
.cycle__step.is-passed::before{box-shadow:inset 0 0 0 3px var(--gold)}
@media (max-width:959px){
  .cycle__step.is-cycle{transform:translateX(6px)}
  .cycle__step.is-passed{border-left-color:var(--gold)}
}

/* --- lista con regla --- */
.rlist li{transition:transform .38s var(--ease-out),background-color .3s ease}
.rlist li:hover{transform:translateX(6px);background:color-mix(in srgb,var(--gold-soft) 45%,transparent)}
.rlist li:hover .rlist__k{color:var(--gold-dk)}
.rlist__k{transition:color .3s ease}
.bar-row{transition:transform .3s var(--ease-out),opacity .28s ease}
.bars:hover .bar-row:not(:hover){opacity:.55}
.bar-row:hover{transform:translateX(5px)}

@media (max-width:640px){ .callout::after{display:none} }

@media (prefers-reduced-motion:reduce){
  .formia-progress__fill,.formia-dot::before,.formia-dot span,
  .sources__item,.gap-card,.cycle__step,.rlist li,.bar-row,.converge,
  .micro-surface,.btn{transition:none!important;animation:none!important}
  .sources__item.is-source,.gap-card.is-gap,.cycle__step.is-cycle,
  .rlist li:hover,.bar-row:hover{transform:none!important}
}


/* =============================================================
   21. Bloques de contenido nuevos
   ============================================================= */

/* --- Los tres momentos --- */
.moments{display:grid;gap:clamp(14px,2vw,20px)}
@media (min-width:900px){ .moments--mini{grid-template-columns:repeat(3,minmax(0,1fr))} }
.moment{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,22px);align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px);
}
/* En pantallas anchas la fila se abre a dos columnas: qué es a la izquierda,
   qué implica a la derecha. Antes el párrafo dejaba media fila vacía. */
@media (min-width:960px){
  .moments:not(.moments--mini) .moment{grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr)}
  .moments:not(.moments--mini) .moment > div{display:contents}
  .moments:not(.moments--mini) .moment h3{grid-column:2;margin-bottom:8px}
  .moments:not(.moments--mini) .moment .moment__mode{grid-column:2;grid-row:2;align-self:start;margin-bottom:0}
  .moments:not(.moments--mini) .moment p{grid-column:3;grid-row:1 / span 2;max-width:60ch}
}
.moments--mini .moment{grid-template-columns:minmax(0,1fr);gap:10px}
.moment.is-key{border-color:color-mix(in srgb,var(--teal) 34%,transparent)}
.moment__n{
  font-family:var(--display);font-size:.82rem;font-weight:700;
  color:var(--gold-dk);font-variant-numeric:tabular-nums;padding-top:.2em;min-width:2.2em;
}
.moment h3{margin-bottom:5px}
.moment__mode{
  display:inline-block;font-family:var(--display);font-size:.76rem;font-weight:600;
  color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 26%,transparent);
  border-radius:2px;padding:3px 9px;margin-bottom:9px;
}
.moment p{color:var(--ink-2);font-size:.97rem;max-width:62ch}

/* --- Los cuatro niveles --- */
.levels{display:grid;gap:clamp(12px,1.8vw,16px)}
@media (min-width:840px){ .levels{grid-template-columns:repeat(4,minmax(0,1fr))} }
.level{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(16px,2.2vw,22px);display:flex;flex-direction:column;gap:9px;
}
.level__bar{display:block;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.level__bar i{
  display:block;height:100%;border-radius:3px;background:var(--teal);
  width:0;transition:width 1s var(--ease-out);
}
.is-revealed .level__bar i{width:var(--f,50%)}
.level__k{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.014em}
.level p{font-size:.92rem;color:var(--ink-2)}

/* --- formulario: leyenda de grupo --- */
.field__legend{font-family:var(--display);font-size:.86rem;font-weight:600;color:var(--ink-2)}

/* --- indicador de pasos: ahora es lista y sí se anuncia --- */
.form-steps{list-style:none;padding:0}
.form-steps__i span{display:inline}


/* =============================================================
   22. Explorador contextual de temas T1–T8
   Antes se inyectaba desde un <script> incrustado en index.html.
   ============================================================= */
/* La pista y la ficha viajan en el HTML para reservar su espacio antes de que
   corra el explorador. Sin JavaScript no hay nada que previsualizar ni fijar,
   así que no deben verse. La clase .js la pone build.py en el <head>, de forma
   síncrona: nunca hay un parpadeo. */
html:not(.js) .topic-hint,
html:not(.js) .topic-insight{display:none}

.topic-hint{
  margin:10px 0 3px min(30%,190px);display:flex;align-items:center;gap:8px;
  color:var(--on-deep-2);font-size:.78rem;letter-spacing:.01em;
}
.topic-hint::before{content:"";width:18px;height:1px;background:var(--gold);flex:none}

.topic-btn{
  appearance:none;border:0;background:transparent;color:var(--on-deep-2);
  font-family:var(--display);font-size:.7rem;font-weight:650;line-height:1;
  min-width:32px;min-height:32px;padding:0;border-radius:999px;cursor:pointer;
  transition:transform .3s var(--ease-out),background-color .3s ease,color .3s ease;
}
.topic-btn:hover{color:var(--on-deep);background:rgba(221,179,72,.16)}
/* Foco visible real, no un box-shadow tenue (WCAG 2.4.7) */
.topic-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;color:var(--on-deep)}
/* Vista previa: contorno. Selección fija: relleno sólido.
   Antes ambos estados se veían idénticos y no se sabía qué estaba elegido. */
.topic-btn.is-preview{
  background:transparent;color:var(--gold);
  box-shadow:inset 0 0 0 1.5px var(--gold);
}
.topic-btn.is-fixed{
  background:var(--gold);color:var(--deep);font-weight:750;
  box-shadow:0 0 0 3px rgba(221,179,72,.22);
}
.topic-insight__state{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-deep-2);margin-bottom:9px;
}
.topic-insight__state::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1.5px var(--on-deep-2);
}
.topic-insight.is-fixed .topic-insight__state{color:var(--gold)}
.topic-insight.is-fixed .topic-insight__state::before{background:var(--gold);box-shadow:none}

.layers.is-exploring .cellu{opacity:.3;
  transition:opacity .26s ease,background-color .32s ease,box-shadow .32s ease}
/* Sin transform: la geometría no cambia, así el puntero nunca oscila entre
   celdas vecinas. La lectura se sostiene con opacidad y anillo dorado. */
.layers.is-exploring .cellu.is-topic-active{
  opacity:1;position:relative;z-index:2;
  box-shadow:0 0 0 2px rgba(221,179,72,.55),0 10px 26px rgba(0,0,0,.14);
}
.layers.is-exploring .layer--result .cellu.is-topic-active.low{
  background:rgba(221,179,72,.3);box-shadow:0 0 0 1px rgba(221,179,72,.8),0 10px 26px rgba(0,0,0,.14)
}
.layers.is-exploring .layer--plan .cellu.is-topic-active.void{
  background:rgba(221,179,72,.08);box-shadow:inset 0 0 0 2px rgba(221,179,72,.92),0 10px 26px rgba(0,0,0,.14)
}
.layers.is-exploring .layer{opacity:.78;transition:opacity .28s ease}
.layers.is-exploring .layer:has(.is-topic-active){opacity:1}
.layers__marks .mark.is-topic-mark{opacity:1;transform:scale(1.18);color:var(--gold)}

.topic-insight{
  margin-top:18px;border:1px solid rgba(221,179,72,.28);border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(221,179,72,.04));
  padding:18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  align-items:start;opacity:0;transform:translateY(6px);
  transition:opacity .32s ease,transform .4s var(--ease-out),border-color .3s ease;
}
.topic-insight.is-visible{opacity:1;transform:none}
.topic-insight__badge{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);color:var(--deep);
  font-family:var(--display);font-size:.76rem;font-weight:750;
}
.topic-insight__meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.topic-insight__meta span{
  border:1px solid var(--line-deep);border-radius:999px;padding:5px 9px;
  color:var(--on-deep-2);font-size:.74rem;line-height:1;background:rgba(255,255,255,.03);
}
.topic-insight__meta span.is-key{border-color:rgba(221,179,72,.55);color:var(--gold)}
.topic-insight__title{
  color:var(--on-deep);font-family:var(--display);font-weight:680;
  font-size:clamp(.98rem,1.35vw,1.1rem);margin:0 0 5px;
}
.topic-insight__copy{color:var(--on-deep-2);font-size:.93rem;line-height:1.55;margin:0;max-width:62ch}
.topic-insight__copy strong{color:var(--on-deep);font-weight:650}
.topic-insight.is-curricular{border-color:rgba(221,179,72,.5)}
.topic-insight.is-pedagogica{border-color:rgba(180,208,211,.5)}
.topic-insight.is-neutral{border-color:var(--line-deep)}

.scene__read.topic-read-active{border-top-color:rgba(221,179,72,.38)}
.scene__read [data-topic-summary]{transition:opacity .2s ease,transform .24s var(--ease-out)}
.scene__read [data-topic-summary].is-switching{opacity:.3;transform:translateY(3px)}

/* La celda es indicadora, no un control: se puede pulsar, pero los ocho
   botones T1–T8 son la vía accesible. Antes las 24 celdas eran paradas de
   tabulación redundantes. */
.layers .cellu{cursor:pointer}

@media (max-width:719px){
  .topic-hint{margin:14px 0 4px;font-size:.76rem}
  .layers__head > span:last-child{gap:3px}
  .topic-btn{min-width:36px;min-height:36px;font-size:.68rem}
  .topic-insight{grid-template-columns:1fr;padding:15px;margin-top:14px}
  .topic-insight__badge{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .topic-btn,.cellu,.topic-insight,.scene__read [data-topic-summary],
  .layers.is-exploring .layer{transition:none!important}
}


/* =============================================================
   24. Fase 5 · Composición editorial
   ============================================================= */

/* --- Encabezado de sección con dos columnas asimétricas.
       Rompe el patrón "título → párrafo → tarjetas" repetido. --- */
.lead-grid{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:980px){
  .lead-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
  .lead-grid__aside{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.lead-grid__aside .lede{margin-top:14px}
.lead-grid__note{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-3);max-width:34ch;
}
.on-deep .lead-grid__note{border-color:var(--line-deep);color:var(--on-deep-2)}

/* =============================================================
   25. Subir el piso — diagrama de cohorte
   Una sola cohorte, dos lecturas. Sustituye a las dos tarjetas
   con barras que no dejaban ver la diferencia.
   ============================================================= */
.floor{display:grid;gap:clamp(18px,2.6vw,30px)}
.floor__row{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);
  display:grid;gap:14px;
  transition:border-color .4s var(--ease-out),box-shadow .45s var(--ease-out);
}
.floor__row.is-formia{
  background:linear-gradient(180deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 55%,var(--white)));
  border-color:color-mix(in srgb,var(--gold-dk) 32%,transparent);
  box-shadow:0 20px 46px -38px rgba(7,63,73,.4);
}
.floor__hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.floor__k{
  font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
}
.floor__row.is-formia .floor__k{color:#7E6015}
.floor__t{font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:-.016em}

/* la cohorte: 24 columnas ordenadas de menor a mayor desempeño */
.cohort{display:flex;align-items:flex-end;gap:3px;height:clamp(64px,8vw,92px)}
.cohort i{
  flex:1;border-radius:2px 2px 0 0;height:var(--h);position:relative;
  background:color-mix(in srgb,var(--ink-3) 20%,transparent);
  transform-origin:bottom;transform:scaleY(.18);
  transition:transform .8s var(--ease-out) var(--d,0s),background-color .5s ease,height .8s var(--ease-out) var(--d,0s);
}
.is-revealed .cohort i,.floor__row.is-revealed .cohort i{transform:scaleY(1)}
.cohort i.hit{background:var(--teal)}
.floor__row.is-formia .cohort i{position:relative}
.floor__row.is-formia .cohort i.hit{background:var(--gold-dk)}
/* El movimiento se lee porque queda marcado de dónde salió cada columna:
   la línea punteada es la altura original, la barra llena es hasta dónde
   llega el trabajo focalizado. --orig lo calcula tools/build.py. */
.floor__row.is-formia .cohort i.hit::before{
  content:"";position:absolute;left:-1px;right:-1px;bottom:0;
  height:var(--orig,100%);
  border-top:2px dashed rgba(255,255,255,.75);
  pointer-events:none;
}
/* .is-revealed cae sobre la propia fila, no sobre un ancestro. */
.floor__row.is-formia.is-revealed .cohort i.hit{height:var(--h2,var(--h))}

.floor__axis{
  display:flex;justify-content:space-between;
  font-family:var(--display);font-size:.72rem;font-weight:600;color:var(--ink-3);
  padding-top:8px;border-top:1px solid var(--line-2);
}
.floor__legend{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:.84rem;color:var(--ink-2);
}
.floor__legend b{display:inline-flex;align-items:center;gap:7px;font-weight:400}
.floor__legend i{width:11px;height:11px;border-radius:2px;flex:none}

/* =============================================================
   26. Tres fuentes — filas editoriales, no tarjetas escalonadas
   ============================================================= */
.srcs{display:grid;gap:0}
.srcs__item{
  display:grid;gap:clamp(12px,2vw,26px);align-items:center;
  padding-block:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--line);
  transition:background-color .35s ease;
}
.srcs__item:last-child{border-bottom:1px solid var(--line)}
@media (min-width:840px){
  .srcs__item{grid-template-columns:auto minmax(0,1.05fr) minmax(0,.95fr)}
}
.srcs__n{
  font-family:var(--display);font-size:.78rem;font-weight:700;
  color:var(--gold-dk);font-variant-numeric:tabular-nums;min-width:3.2em;
}
.srcs__t{font-family:var(--display);font-weight:600;font-size:clamp(1.04rem,1.6vw,1.26rem);letter-spacing:-.018em}
.srcs__d{color:var(--ink-2);font-size:.95rem;margin-top:5px;max-width:52ch}
.srcs__viz{min-height:52px;display:flex;align-items:center;max-width:260px;
  width:100%;margin-left:auto}
@media (max-width:839px){ .srcs__viz{margin-left:0;max-width:320px} }
.srcs__item:hover{background:color-mix(in srgb,var(--white) 70%,transparent)}

.converge{margin-top:0;border-radius:0 0 var(--radius) var(--radius)}

/* =============================================================
   27. Valor institucional — rejilla numerada, no lista de texto
   ============================================================= */
.value{display:grid;gap:1px;background:var(--line-deep);border:1px solid var(--line-deep);border-radius:var(--radius);overflow:hidden}
@media (min-width:720px){ .value{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .value{grid-template-columns:repeat(4,minmax(0,1fr))} }
.value__i{
  background:var(--deep);padding:clamp(18px,2.2vw,24px);
  display:grid;gap:8px;align-content:start;
  transition:background-color .4s ease;
}
.value__i:hover{background:var(--deep-2)}
.value__n{
  font-family:var(--display);font-size:.76rem;font-weight:700;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.value__t{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--on-deep);
  letter-spacing:-.014em;display:flex;align-items:center;gap:8px}
.value__t svg{flex:none;transition:transform .38s var(--ease-out)}
.value__i--link:hover .value__t svg{transform:translateX(4px)}
.value__i--link .value__t{color:var(--gold)}
.value__d{font-size:.9rem;color:var(--on-deep-2)}
.value__i--link{background:color-mix(in srgb,var(--gold) 12%,var(--deep))}
.value__i--link:hover{background:color-mix(in srgb,var(--gold) 20%,var(--deep))}

/* =============================================================
   28. Los reportes — comparador visual
   ============================================================= */
.rep-switch{display:inline-flex;padding:4px;gap:4px;background:var(--cream-2);
  border:1px solid var(--line);border-radius:var(--radius)}
.rep-switch button{
  font-family:var(--display);font-size:.92rem;font-weight:600;
  padding:11px 18px;border-radius:2px;color:var(--ink-2);letter-spacing:-.01em;
  transition:background-color .38s var(--ease-out),color .3s ease;
}
.rep-switch button[aria-selected="true"]{background:var(--deep);color:var(--on-deep)}
.rep-switch button:hover:not([aria-selected="true"]){color:var(--ink)}

/* El panel usa el mismo mecanismo que las rutas oficial/privada, así que
   hereda el patrón ARIA con flechas sin código nuevo. */
.rep.is-active{display:grid;gap:clamp(22px,3.2vw,44px)}
@media (min-width:1000px){
  .rep.is-active{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}
}

.rep__list{display:grid;gap:0}
.rep__list li{padding-block:14px;border-top:1px solid var(--line);display:grid;gap:4px}
.rep__list li:last-child{border-bottom:1px solid var(--line)}
.rep__list b{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.012em}
.rep__list span{font-size:.93rem;color:var(--ink-2)}
.rep__who{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-dk);margin-bottom:12px;
}
.rep__who::before{content:"";width:20px;height:2px;background:var(--gold);flex:none}

/* maqueta ilustrativa del informe */
.sheet{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 24px);
}
/* La maqueta no puede confundirse con un informe real: etiqueta en la
   cabecera y marca de agua sobre las cifras. */
.sheet__demo{
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-dk);
  border:1px solid color-mix(in srgb,var(--gold-dk) 42%,transparent);
  background:var(--gold-soft);border-radius:999px;padding:3px 9px;white-space:nowrap;
}
/* La marca de agua es decoración pura: se dibuja con content, no con un nodo
   de texto, para que no aparezca en el árbol de accesibilidad ni en una
   auditoría de contraste como si fuera contenido legible. */
.sheet__wm{
  position:absolute;z-index:1;inset:0;display:grid;place-items:center;pointer-events:none;
  transform:rotate(-18deg);user-select:none;
}
.sheet__wm::before{
  content:"Ejemplo";
  font-family:var(--display);font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  font-size:clamp(2rem,4vw,3rem);color:rgba(139,106,23,.055);
}
.sheet{position:sticky}
.sheet__hd,.sheet__b{position:relative;z-index:2}
.sheet__hd{
  display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line-2);background:var(--cream);
}
.sheet__t{font-family:var(--display);font-size:.84rem;font-weight:600;color:var(--ink-2)}
.sheet__m{font-size:.76rem;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto}
.sheet__b{padding:18px;display:grid;gap:18px}
.sheet__blk{display:grid;gap:9px}
.sheet__k{
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);
}
.sheet__note{font-size:.78rem;color:var(--ink-3);line-height:1.5;padding-top:12px;border-top:1px solid var(--line-2)}

/* distribución por niveles */
.dist{display:flex;height:34px;border-radius:3px;overflow:hidden;border:1px solid var(--line-2)}
.dist i{display:grid;place-items:center;font-family:var(--display);font-size:.7rem;font-weight:700;
  width:var(--w);transition:width .9s var(--ease-out)}
/* --curric puro sobre esta mezcla al 26% daba 3.67:1 y el rótulo va en 11px:
   se oscurece dentro de la misma familia hasta 5.30:1. */
.dist i:nth-child(1){background:color-mix(in srgb,var(--curric) 26%,var(--white));color:#3A5570}
.dist i:nth-child(2){background:color-mix(in srgb,var(--curric) 48%,var(--white));color:#26384a}
.dist i:nth-child(3){background:color-mix(in srgb,var(--teal) 45%,var(--white));color:#0d3b40}
.dist i:nth-child(4){background:var(--teal);color:var(--white)}
.dist__lb{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-3);margin-top:6px}

/* filas de brecha */
.gapline{display:grid;gap:7px}
.gapline__r{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:9px 11px;border:1px solid var(--line-2);border-radius:3px;background:var(--cream);
  font-size:.88rem;
}
.gapline__r b{font-weight:600;font-family:var(--display)}

/* comparativo entrada/salida */
.pair{display:grid;gap:9px}
.pair__r{display:grid;grid-template-columns:minmax(78px,.3fr) minmax(0,1fr);gap:12px;align-items:center}
.pair__lb{font-size:.8rem;color:var(--ink-3);font-family:var(--display);font-weight:600}
.pair__bar{height:9px;border-radius:5px;background:var(--line-2);overflow:hidden}
.pair__bar i{display:block;height:100%;border-radius:5px;background:var(--teal);width:0;
  transition:width 1s var(--ease-out) var(--d,0s)}
.is-revealed .pair__bar i{width:var(--v)}
.pair__r.is-out .pair__bar i{background:var(--gold-dk)}

/* qué decisión permite */
.decide{display:grid;gap:10px;margin-top:4px}
.decide__i{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:13px 15px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--teal-soft) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 18%,transparent);
}
.decide__q{font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--teal);white-space:nowrap}
.decide__d{font-size:.92rem;color:var(--ink-2)}

/* =============================================================
   29. Ajuste fino de bloques existentes
   ============================================================= */
.gaps{gap:clamp(14px,2vw,20px)}
.gap-card{padding:clamp(20px,2.6vw,30px)}
.moments{gap:clamp(12px,1.6vw,16px)}
.moment{padding:clamp(16px,2.2vw,24px)}
.cycle{margin-top:clamp(22px,3vw,34px)}
.rlist > li{padding-block:clamp(15px,2vw,22px)}
.callout{max-width:70ch}
/* Cuando el callout cierra una sección, no debe arrastrar aire extra. */
.section > .wrap > .callout:last-child{margin-bottom:0}
.note-row{display:grid;gap:clamp(16px,2.4vw,32px);align-items:center}
@media (min-width:900px){ .note-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.note-row__aside{
  font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:clamp(16px,2vw,24px);
}
.on-deep .note-row__aside{color:var(--on-deep-2);border-color:var(--line-deep)}

/* La última pieza de una sección no debe arrastrar aire extra */
.section > .wrap > :last-child{margin-bottom:0}


/* =============================================================
   30. Preguntas frecuentes plegables
   El <summary> no daba ninguna señal de que se pudiera abrir.
   ============================================================= */
details.qa__item{border-top:1px solid var(--line-2);padding-block:0}
details.qa__item:first-of-type{border-top:1px solid var(--line)}
details.qa__item:last-of-type{border-bottom:1px solid var(--line-2)}
/* .qa__q traía su propio guion en ::before y un display:flex; dentro de una
   rejilla eso empujaba el titular a la segunda columna. */
details.qa__item > summary.qa__q::before{content:none}
details.qa__item > summary{
  list-style:none;cursor:pointer;padding-block:18px;
  display:grid !important;grid-template-columns:minmax(0,1fr) auto;
  gap:14px;align-items:center;margin-bottom:0;transition:color .3s ease;
}
details.qa__item > summary::-webkit-details-marker{display:none}
details.qa__item > summary h4{
  font-family:var(--display);font-weight:600;font-size:1.04rem;letter-spacing:-.016em;
  display:flex;gap:11px;align-items:baseline;
}
details.qa__item > summary h4::before{content:"—";color:var(--gold-dk);flex:none}
details.qa__item > summary::after{
  content:"";width:13px;height:13px;flex:none;justify-self:end;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .34s var(--ease-out),border-color .3s ease;
}
details.qa__item[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
details.qa__item > summary:hover h4,
details.qa__item > summary:focus-visible h4{color:var(--teal)}
details.qa__item > summary:hover::after{border-color:var(--teal)}
details.qa__item .qa__a{padding-left:24px;padding-bottom:20px;margin-top:-4px}
@media (max-width:719px){
  details.qa__item > summary{padding-block:15px}
  details.qa__item > summary h4{font-size:.99rem}
  details.qa__item .qa__a{padding-left:19px;padding-bottom:16px;font-size:.94rem}
}


/* =============================================================
   31. Espacio para el riel lateral
   El riel flota en el borde derecho y el contenedor llegaba hasta
   17px por debajo de él: la última columna del ciclo y el chevron
   de las preguntas quedaban tapados.
   ============================================================= */
@media (min-width:1121px){
  .wrap{padding-right:max(var(--gutter), 62px)}
}

/* =============================================================
   32. CAPA MÓVIL — va DESPUÉS de los componentes que corrige

   Estas reglas anulan a las de los componentes (secciones 24-31).
   Con la misma especificidad gana la última, así que este bloque no
   puede moverse hacia arriba: si lo hace, la mitad del móvil deja de
   aplicarse sin dar ningún error.

   Lo que viene después (33 y 34) respeta la misma norma: la sección 33
   trae sus propios @media móviles junto a cada componente nuevo, y la 34
   solo actúa bajo prefers-reduced-motion. Al añadir un componente nuevo,
   su versión móvil va inmediatamente después de él, no aquí arriba.
   ============================================================= */

/* =============================================================
   23. Móvil — experiencia propia, no el escritorio comprimido
   Se recorta espacio y jerarquía secundaria; el tamaño del texto
   de lectura no se toca.
   ============================================================= */
@media (max-width:719px){
  :root{ --sec-y: 46px; --sec-y-lg: 56px; --sec-y-sm: 32px }

  .hero{padding-top:calc(var(--nav-h) + 26px);padding-bottom:34px}
  .h-hero{font-size:clamp(1.72rem,7.6vw,2.3rem)}
  .h-1{font-size:clamp(1.5rem,6.4vw,1.9rem)}
  .lede{font-size:1.02rem}

  /* --- escena vertical --- */
  .scene__inner > .wrap{padding-block:var(--sec-y)}
  .scene__step{margin-bottom:14px;padding-left:16px}
  .scene__step .h-2{font-size:1.12rem;margin-bottom:6px;max-width:none}
  .scene__step p{font-size:.95rem;max-width:none}
  .scene__step__k{font-size:.68rem;margin-bottom:8px}
  .scene__steps{margin-top:18px;min-height:0}
  .layers{margin-top:20px}
  .cellu{height:30px}
  .topic-insight{margin-top:12px;padding:14px;gap:10px}
  .topic-insight__copy{font-size:.9rem}
  .layers__foot{margin-top:10px;font-size:.78rem}
  .scene__read{margin-top:16px;padding-top:14px}

  /* --- subir el piso --- */
  .lead-grid{gap:18px}
  .lead-grid__note{margin-top:12px;padding-top:12px}
  .floor{gap:12px}
  .floor__row{padding:15px;gap:10px}
  .cohort{height:56px;gap:2px}
  .floor__hd{gap:2px;flex-direction:column;align-items:flex-start}
  .floor__legend{gap:8px;flex-direction:column;align-items:flex-start;font-size:.82rem}

  /* --- tres fuentes --- */
  .srcs__item{padding-block:15px;gap:9px}
  .srcs__viz{min-height:0}
  .srcs__d{font-size:.93rem}
  .converge{padding:14px 16px}

  /* --- brechas --- */
  .gap-card{padding:17px;gap:10px}
  .gaps{gap:12px}
  .gap-card p{font-size:.94rem}
  .note-row{gap:14px}
  .note-row__aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:12px}

  /* --- el ciclo --- */
  .cycle{margin-top:20px}
  .cycle__step{padding:11px 0 11px 26px}
  .cycle__step b{font-size:.95rem;margin-bottom:2px}
  .cycle__step span{font-size:.86rem;max-width:none}
  .cycle__step::before{top:16px;width:10px;height:10px;left:-6px}

  /* --- valor institucional: dos columnas ya desde 420px --- */
  .value__i{padding:15px}
  .value__d{font-size:.86rem}

  /* --- momentos y niveles --- */
  .moment{padding:15px;gap:8px}
  .moments{gap:10px}
  .moment p{font-size:.94rem}
  .moment__mode{margin-bottom:6px;font-size:.74rem}
  .level{padding:14px;gap:7px}
  .levels{gap:9px}

  /* --- reportes --- */
  .rep.is-active{gap:20px}
  .sheet{position:static}
  .sheet__b{padding:15px;gap:15px}
  .rep__list li{padding-block:12px}
  .decide__i{padding:11px 13px;gap:9px;grid-template-columns:minmax(0,1fr)}
  .rep-switch{display:grid;grid-template-columns:1fr;width:100%}
  .rep-switch button{width:100%;text-align:left}
  .dist i{font-size:.64rem}
  .dist__lb{font-size:.66rem}

  /* --- listas y pie --- */
  .rlist > li{padding-block:14px;gap:10px}
  .rlist__d{font-size:.92rem}
  .footer-grid{gap:24px}
  .site-footer{padding-block:38px 24px}
  .callout{padding-left:14px}
}


/* =============================================================
   23b. Móvil — tiras deslizables
   En vertical, cuatro tarjetas apiladas son cuatro pantallas.
   En horizontal son una, y la tarjeta parcial que asoma a la
   derecha indica que hay más sin necesidad de explicarlo.
   ============================================================= */
@media (max-width:719px){
  /* Especificidad doble: .value y .moments declaran display:grid más abajo
     en el archivo, y con un solo punto de clase ganaban por orden. */
  .snap.snap{
    display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .snap.snap::-webkit-scrollbar{display:none}
  .snap.snap > *{flex:0 0 82%;scroll-snap-align:start}

  /* valor institucional */
  .value{background:transparent;border:0;border-radius:0}
  .value.snap.snap > .value__i{
    border:1px solid var(--line-deep);border-radius:var(--radius);
    min-height:100%;
  }

  /* los tres momentos */
  .moments--mini.snap.snap > .moment{min-height:100%}

  /* el ciclo */
  .cycle__line{display:none}
  .cycle__steps.snap.snap{gap:0}
  .cycle__steps.snap.snap > .cycle__step{
    flex:0 0 72%;padding:14px 16px 14px 24px;
    border-left:2px solid var(--line-deep);border-top:0;
  }
  .cycle__steps.snap.snap > .cycle__step::before{left:-7px;top:18px}

  /* pista de deslizamiento */
  .snap-hint{
    display:flex;align-items:center;gap:8px;margin-top:10px;
    font-family:var(--display);font-size:.74rem;font-weight:600;
    letter-spacing:.03em;color:var(--ink-3);
  }
  .on-deep .snap-hint{color:var(--on-deep-2)}
  .snap-hint::after{content:"";flex:1;height:1px;background:var(--line);max-width:60px}
  .on-deep .snap-hint::after{background:var(--line-deep)}

  /* la leyenda de la cohorte repite lo que ya rotula cada fila */
  .floor__legend{display:none}
  /* el aside del callout de brechas dice lo mismo que el callout */
  .note-row__aside{display:none}
  /* el resumen de la escena y la ficha del explorador dicen lo mismo */
  .scene__read{display:none}
}

@media (min-width:380px) and (max-width:719px){
  .value.snap.snap > .value__i,.moments--mini.snap.snap > .moment{flex-basis:78%}
}

@media (max-width:719px){
  /* Reglas que antes quedaban anuladas por el orden del archivo. */
  .decide__i{grid-template-columns:minmax(0,1fr);gap:5px}
  .decide__q{white-space:normal}
  .sheet{position:static}
  .rep-switch{display:grid;grid-template-columns:1fr;width:100%}
  .rep-switch button{width:100%;text-align:left}
  .moment{padding:15px}
  .value__i{padding:15px}
  .rlist > li{padding-block:14px}
  .gap-card{padding:17px}
  .report{padding:18px}
  .lead-grid__aside{position:static}
}

@media (max-width:719px){
  /* Tiras adicionales de modelo.html */
  .scale-row.snap.snap > .scale-item,
  .levels.snap.snap > .level,
  .sources.snap.snap > .sources__item{flex:0 0 76%;scroll-snap-align:start;min-height:100%}
  .sources.snap.snap > .sources__item{margin-top:0}
  .levels.snap.snap,.scale-row.snap.snap,.sources.snap.snap{align-items:stretch}
}


/* =============================================================
   33. Fase 6 · Correcciones de validación
   ============================================================= */

/* --- Lo que Formia no es: rejilla compacta de negaciones --- */
.nots{display:grid;gap:1px;margin-top:clamp(22px,3vw,34px);
  background:var(--line-deep);border-block:1px solid var(--line-deep)}
@media (min-width:720px){ .nots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .nots{grid-template-columns:repeat(4,minmax(0,1fr))} }
.nots > li{
  background:var(--deep);padding:clamp(16px,2.2vw,22px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 11px;align-content:start;
}
.nots__x{grid-row:1 / span 2;color:var(--gold);font-family:var(--display);font-weight:700;padding-top:.1em}
.nots > li b{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--on-deep);letter-spacing:-.014em}
.nots > li span{font-size:.91rem;color:var(--on-deep-2)}

/* --- La pista de deslizamiento solo aplica donde hay tira --- */
@media (min-width:720px){ .snap-hint{display:none} }

/* --- Etiqueta de maqueta: visible antes que las cifras --- */
.sheet__demo{
  margin-left:auto;font-family:var(--display);font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:#7E6015;background:var(--gold-soft);   /* 4.93:1 sobre --gold-soft (AA) */
  border:1px solid color-mix(in srgb,var(--gold-dk) 40%,transparent);
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
@media (max-width:719px){ .sheet__demo{margin-left:0} }

@media (max-width:719px){
  /* El pie medía 756px: las dos listas de enlaces caben en paralelo. */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
  .footer-grid > :first-child{grid-column:1 / -1}
  .footer-tag{margin-top:11px;font-size:.9rem;max-width:none}
  .footer-logo img{height:28px}
  .footer-col h2{margin-bottom:9px}
  .footer-col li + li{margin-top:4px}
  .footer-col a,.footer-btn{font-size:.92rem}
  .footer-bottom{margin-top:22px;padding-top:16px;font-size:.8rem;gap:6px}
  .site-footer{padding-block:30px 20px}
  /* Cuatro negaciones apiladas son cuatro pantallas: van en tira. */
  .nots{grid-template-columns:none}
  .nots > li{padding:14px 15px}
  .nots > li span{font-size:.89rem}
}

/* Los encabezados de las cajas de diagnóstico y de la escala de lectura
   pasaron de h4 a h3 para no saltar de nivel; el tamaño no cambia. */
.diag__h{
  font-family:var(--display);font-size:.76rem;font-weight:600;
  color:var(--ink-3);margin-bottom:8px;letter-spacing:-.005em;
}
.scale__h{font-family:var(--display);font-size:.98rem;font-weight:600;letter-spacing:-.015em}

@media (max-width:719px){
  /* Los bloques que dejaron de ser tira se compactan en rejilla de dos:
     mantienen la comparación a la vista sin cuatro pantallas de scroll. */
  .levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .level{padding:13px;gap:6px}
  .level p{font-size:.86rem}
  .level__k{font-size:.94rem}

  .scale-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .scale-item{padding:14px;gap:7px}
  .scale-item p{font-size:.86rem}
  .scale-item__dots{min-height:24px;max-width:74px}

  /* El ciclo vuelve a leerse en vertical, pero mucho más ceñido. */
  .cycle__step{padding:9px 0 9px 22px}
  .cycle__step b{font-size:.92rem}
  .cycle__step span{font-size:.84rem}
  .cycle__step::before{top:14px}

  /* Los tres momentos: numeración en línea con el título. */
  .moments--mini .moment{grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start}
  .moments--mini .moment__n{padding-top:.1em}
  .moment h3{font-size:1rem}
}

@media (max-width:719px){
  /* Pie: tres columnas de enlaces ocupaban media pantalla. */
  .site-footer{padding-block:30px 20px}
  .footer-grid{gap:20px}
  .footer-col h2{margin-bottom:9px}
  .footer-col li + li{margin-top:4px}
  .footer-tag{margin-top:10px;font-size:.9rem}
  .footer-logo img{height:26px}
  .footer-bottom{margin-top:20px;padding-top:14px;font-size:.8rem}

  /* Brechas: la recomendación cabe junto al diagnóstico. */
  .gap-card{gap:8px}
  .gap-card h3{font-size:1.08rem}
  .gap-card__viz{margin-block:4px;max-width:220px}
  .gap-card__do{padding-top:10px;font-size:.9rem}
  .gap-card__cap{font-size:.7rem}

  /* Héroe: el panel de datos no necesita tanto aire. */
  .panel__body{padding:15px}
  .panel__head{padding:11px 15px}
  .bars{gap:8px}
  .demo-note{margin-top:11px;font-size:.76rem}
}

@media (max-width:719px){
  /* Pie en dos columnas: diez enlaces apilados eran media pantalla. */
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .footer-grid > :first-child{grid-column:1 / -1}
  .footer-col a,.footer-btn{font-size:.9rem}
}


/* =============================================================
   34. Movimiento reducido — regla general

   Arriba hay tres bloques de prefers-reduced-motion que fijan VALORES
   finales (la altura de la cohorte, el ancho de las barras, el estado de
   reposo de las tarjetas). Eso sigue siendo necesario y se conserva.

   Lo que faltaba era la red de seguridad: cada componente nuevo tenía que
   acordarse de anular su propia transición. Esta regla lo hace de una vez
   para todo el sitio. Se usa .01ms en vez de "none" porque un
   transition-duration mínimo mantiene vivo el evento transitionend si algún
   día alguien lo escucha; hoy no lo escucha nadie.
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* =============================================================
   35. Fase 9 · piezas de venta

   Tres bloques nuevos, todos sobre componentes que ya existían.
   Nada aquí cambia la paleta ni la composición: solo agrega el
   destinatario de cada entrega, la comparación frente a un
   preparatorio y el acceso permanente a WhatsApp en móvil.
   ============================================================= */

/* --- Quién recibe cada entrega y cuándo -------------------------------- */
.value__w{
  display:inline-block;font-family:var(--display);font-size:.72rem;font-weight:650;
  letter-spacing:.01em;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  border-radius:2px;padding:3px 8px;margin-top:2px;justify-self:start;
}

/* --- Dato de contexto con fuente a la vista --------------------------- */
.band{background:var(--cream-2);border-block:1px solid var(--line)}
.band__in{
  padding-block:clamp(26px,3.2vw,38px);
  display:grid;gap:clamp(10px,1.6vw,18px);align-items:baseline;
}
@media (min-width:860px){ .band__in{grid-template-columns:minmax(0,auto) minmax(0,1fr)} }
.band__n{
  font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--teal);white-space:nowrap;
}
.band__t{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-2);max-width:62ch}
.band__t b{color:var(--ink);font-weight:650}
.band__src{display:block;margin-top:8px;font-size:.8rem;color:var(--ink-3)}

/* --- Comparación frente a un preparatorio ------------------------------ */
.vs{width:100%;border-collapse:collapse;margin-top:clamp(22px,3vw,32px);font-size:.95rem}
.vs caption{text-align:left;font-size:.82rem;color:var(--ink-3);padding-bottom:10px}
.vs th,.vs td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.vs thead th{
  font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);border-bottom-width:2px;
}
/* --gold-dk está calibrado contra --cream (4.57:1). Esta tabla vive sobre
   --cream-2, que es más oscuro, y ahí cae a 4.22:1 con texto de 12px. Se
   oscurece solo aquí: 4.93:1 sobre este fondo. */
.vs thead th:last-child{color:#7E6015}
.vs tbody th{font-weight:500;color:var(--ink-2);width:40%}
.vs td{color:var(--ink-3)}
.vs td:last-child{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--gold) 7%,transparent)}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:none}
.vs__m{font-weight:700;font-style:normal;margin-right:7px}
.vs__no{color:var(--ink-3)}
.vs__si{color:#7E6015}
@media (max-width:719px){
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto}
  /* La leyenda hereda el ancho del table-caption y se estrangula al pasar a
     bloque: hay que devolverle el ancho completo. */
  .vs caption{display:block;width:100%;max-width:none}
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vs tbody tr{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}
  .vs tbody th{border:none;padding:0 0 8px;width:auto;font-weight:600;color:var(--ink)}
  .vs td{border:none;padding:4px 0;background:none!important}
  .vs td::before{content:attr(data-th) " · ";font-weight:650;color:var(--ink-3)}
  .vs td:last-child{color:var(--ink);font-weight:600}
}

/* --- WhatsApp siempre a la mano en móvil ------------------------------- */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:150;
  width:54px;height:54px;border-radius:50%;
  display:none;place-items:center;
  background:var(--teal);color:var(--on-deep);
  box-shadow:0 10px 28px -10px rgba(7,63,73,.55),0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .25s var(--ease-out),background-color .25s ease;
}
.wa-float:hover,.wa-float:focus-visible{background:var(--deep);transform:translateY(-2px)}
.wa-float svg{width:26px;height:26px}
/* Solo donde el pulgar manda y el pie queda lejos. En escritorio el CTA
   del nav y los botones de sección ya cubren esa función. */
@media (max-width:719px){
  .wa-float{display:grid}
  /* Aire al final para que el botón no se quede tapando la última línea
     del pie de forma permanente. */
  .site-footer{padding-bottom:calc(var(--sec-y-sm, 30px) + 62px)}
}
@media print{ .wa-float{display:none!important} }


/* =============================================================
   36. Fase 10 · sistema de ilustración

   La misma lengua gráfica de las piezas de marca —trazo fino, nodos,
   punteados— resuelta en SVG en línea. Hereda el color del contenedor,
   así que la misma pieza sirve sobre crema y sobre fondo profundo sin
   duplicar nada. Son decorativas: ninguna carga información que no esté
   también escrita al lado.
   ============================================================= */
.ilus{
  display:block;width:100%;height:auto;
  color:var(--teal);
  overflow:visible;
}
.on-deep .ilus{color:var(--on-deep-2)}
.ilus__gold{stroke:var(--gold)}
.ilus__gold-f{fill:var(--gold)}
.on-deep .ilus__gold{stroke:var(--gold)}
.on-deep .ilus__gold-f{fill:var(--gold)}

/* Aparece con el mismo gesto que el resto de los bloques: el contenedor
   lleva data-reveal y la pieza entra con él. Sin animación propia. */
.ilus{opacity:.999}

/* --- tamaños por sitio ------------------------------------------------- */
.ilus--avance{max-width:176px}
.ilus--ramas{max-width:220px;margin-inline:auto}
.ilus--nodos{max-width:200px}
.ilus--rutas{max-width:220px}

/* --- la banda del dato: cifra · texto · trazo --------------------------- */
@media (min-width:860px){
  .band__in{grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,176px)}
}
.band .ilus{justify-self:end}
@media (max-width:859px){ .band .ilus{display:none} }

/* --- el cierre: la ilustración sostiene el bloque ----------------------- */
.cierre{display:grid;gap:clamp(22px,3.4vw,44px);align-items:center}
@media (min-width:900px){ .cierre{grid-template-columns:minmax(0,1fr) minmax(0,260px)} }
@media (max-width:899px){ .cierre .ilus--ramas{max-width:176px} }

/* --- nosotros y instituciones ------------------------------------------ */
.ilus-aside{display:grid;justify-items:start;gap:clamp(14px,2vw,20px)}
@media (max-width:719px){ .ilus--nodos{max-width:150px} .ilus--rutas{max-width:180px} }


/* =============================================================
   37. Fase 10b · el trazo se dibuja solo

   Las ilustraciones no aparecen: se dibujan, como si alguien las
   estuviera trazando. Se consigue con stroke-dasharray sobre un
   valor generoso que cubre la longitud de cualquiera de los trazos,
   así que no hace falta medir cada path con JavaScript.

   El disparo lo da .is-revealed, que el observador de main.js ya
   pone sobre el contenedor. Sin librerías y sin bucle de animación.
   ============================================================= */
/* :not() excluye los punteados: si el dasharray de la animación los
   alcanzara, perderían su patrón y se volverían línea continua. */
.ilus path:not(.ilus__pt){
  stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset 1.5s var(--ease-out) var(--d,0s);
}
.ilus circle{
  transform:scale(.4);transform-origin:center;transform-box:fill-box;
  opacity:0;
  transition:transform .5s var(--ease-out) var(--d2,.5s),opacity .5s ease var(--d2,.5s);
}
[data-reveal].is-revealed .ilus path:not(.ilus__pt),
.is-revealed .ilus path:not(.ilus__pt),
html:not(.js) .ilus path:not(.ilus__pt){stroke-dashoffset:0}
[data-reveal].is-revealed .ilus circle,
.is-revealed .ilus circle,
html:not(.js) .ilus circle{transform:scale(1);opacity:1}

/* Cada pieza entra con su propio ritmo: los nodos después del trazo. */
.ilus--avance{--d:.05s;--d2:.75s}
.ilus--ramas {--d:0s;  --d2:1s}
.ilus--nodos {--d:.1s; --d2:.8s}
.ilus--rutas {--d:.05s;--d2:.7s}

@media (prefers-reduced-motion:reduce){
  .ilus path:not(.ilus__pt){stroke-dasharray:none;stroke-dashoffset:0}
  .ilus circle{transform:none;opacity:1}
}

/* Los punteados ya usan dasharray para su patrón: no se pueden dibujar con
   la misma técnica. Entran con opacidad, medio segundo después del trazo. */
.ilus .ilus__pt{
  opacity:0;transition:opacity .6s ease var(--d2,.6s);
}
[data-reveal].is-revealed .ilus .ilus__pt,
.is-revealed .ilus .ilus__pt,
html:not(.js) .ilus .ilus__pt{opacity:.7}
@media (prefers-reduced-motion:reduce){ .ilus .ilus__pt{opacity:.7} }


/* =============================================================
   38. Fase 11 — el grupo: treinta personas detrás de un promedio
   -------------------------------------------------------------
   Rampa de color deliberada: del azul del plan de estudios al verde
   profundo de la marca. Ni rojo ni verde semáforo — aquí no se
   codifica aprobado/reprobado, se codifica distancia al umbral.
   Contraste de las figuras sobre --white: 3.42:1 el tono más claro
   (WCAG 1.4.11, gráficos no textuales).
   ============================================================= */
.est--ins,.niv--ins{--est:#6F8CA6}
.est--min,.niv--min{--est:#4C6E8C}
.est--sat,.niv--sat{--est:#176B73}
.est--avz,.niv--avz{--est:#073F49}

.grupo__gr{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(5px,1.4vw,10px);
  justify-items:center;
  padding:clamp(14px,2.4vw,22px);
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
}
/* Diez columnas a partir de 560. El paso horizontal crece con el ancho, así
   que la fila necesita más aire para que la retícula no se lea aplastada. */
@media (min-width:560px){
  .grupo__gr{grid-template-columns:repeat(10,minmax(0,1fr));
             row-gap:clamp(10px,1.8vw,24px)}
}

.est{
  display:block;width:100%;max-width:42px;
  padding:4px 3px;border-radius:3px;
  color:var(--est);cursor:pointer;
  transition:transform .4s var(--ease-out),opacity .3s ease,
             box-shadow .3s var(--ease-out);
}
.est svg{display:block;width:100%;height:auto}

/* Entrada escalonada. Va sobre el <svg> y no sobre el <i>: si la animación
   terminara fijando el transform del <i>, el realce del puntero quedaría
   bloqueado por el fill-mode. */
.js [data-reveal] .est svg{opacity:0}
.js [data-reveal].is-revealed .est svg{
  animation:est-entra .5s var(--ease-out) calc(var(--i,0) * 22ms) both;
}
@keyframes est-entra{
  from{opacity:0;transform:translateY(9px) scale(.86)}
  to{opacity:1;transform:none}
}

/* Realce y atenuación: con un nivel elegido, el resto baja de peso. */
.grupo.is-filtro .est{opacity:.2}
.grupo.is-filtro .est.is-on{opacity:1;transform:scale(1.1)}
.grupo .est.is-sel{
  opacity:1;transform:scale(1.18);
  box-shadow:0 0 0 2px var(--white),0 0 0 3.5px currentColor;
}
@media (hover:hover){
  .est:hover{transform:translateY(-2px) scale(1.12)}
}

/* --- Los cuatro niveles: la vía accesible del bloque ------------------- */
.grupo__leg{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.niv{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:8px 13px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  font-family:var(--sans);font-size:.85rem;line-height:1.2;color:var(--ink-2);
  cursor:pointer;
  transition:border-color .3s ease,background-color .3s ease,
             transform .35s var(--ease-out),box-shadow .3s ease;
}
.niv i{width:11px;height:11px;border-radius:50%;background:var(--est);flex:none}
.niv b{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink)}
.niv:hover,.niv.is-vista{border-color:var(--est);transform:translateY(-1px)}
.niv[aria-pressed="true"]{
  background:var(--cream-2);border-color:var(--est);
  box-shadow:inset 0 0 0 1px var(--est);color:var(--ink);
}

/* --- La ficha: lo que cambia cuando se elige algo ---------------------- */
.grupo__ficha{
  margin-top:14px;padding:clamp(15px,2.2vw,20px);
  background:var(--cream-2);border-radius:var(--radius);
  border-left:3px solid var(--est,var(--teal));
  transition:border-color .3s ease;
}
.grupo[data-nivel="ins"] .grupo__ficha{--est:#6F8CA6}
.grupo[data-nivel="min"] .grupo__ficha{--est:#4C6E8C}
.grupo[data-nivel="sat"] .grupo__ficha{--est:#176B73}
.grupo[data-nivel="avz"] .grupo__ficha{--est:#073F49}
.grupo__ficha__v.is-swap{opacity:0}
.grupo__ficha__t{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:1.05rem;line-height:1.35;
}
.grupo__ficha__v{transition:opacity .13s ease}
.grupo__ficha__d{
  margin-top:7px;font-size:.93rem;line-height:1.62;color:var(--ink-2);
  max-width:60ch;
}
/* La reserva de altura la calcula el navegador, no una tabla de píxeles: la
   sombra (el título y el texto más largos) ocupa la misma celda de rejilla que
   la lectura viva, así que la caja mide siempre lo que mediría su estado más
   alto, en cualquier ancho y aunque mañana cambie el texto. */
.grupo__ficha{display:grid}
.grupo__ficha__v,.grupo__ficha__s{grid-area:1 / 1}
.grupo__ficha__s{visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal] .est svg{opacity:1}
  .js [data-reveal].is-revealed .est svg{animation:none}
  .est,.niv,.grupo__ficha,.grupo__ficha__v{transition:none}
  .grupo.is-filtro .est.is-on,.grupo .est.is-sel,.est:hover{transform:none}
}


/* =============================================================
   39. La foto — del informe al salón
   -------------------------------------------------------------
   Una fotografía tratada como se trata hoy una imagen principal:
   se destapa al entrar en pantalla, respira con el scroll y tiene
   tres puntos que se pueden explorar.

   · El destape es un clip-path que se abre más un zoom que asienta.
   · El paralaje usa animation-timeline: view() donde el navegador
     lo soporta. Donde no, la foto queda quieta y no pasa nada más.
   · Zoom y paralaje van en propiedades distintas (scale y
     translate): ninguna pisa a la otra.
   · Los puntos viven dentro del lienzo, así que se mueven con la
     foto y nunca se despegan de lo que señalan.
   · Sin sombra en el marco: el clip-path la recortaría.
   ============================================================= */
.foto{position:relative;--base:1;--radio:clamp(14px,1.6vw,22px)}
/* El destape lo hace la foto; el bloque no se desliza como los demás. */
.js .foto[data-reveal]{opacity:1;transform:none}

/* overflow:clip y no hidden: hidden convierte el marco en contenedor de
   scroll, y entonces la línea de tiempo view() del lienzo mediría su posición
   dentro del marco —que nunca cambia— en vez de dentro de la página. */
.foto__marco{
  position:relative;overflow:clip;isolation:isolate;
  aspect-ratio:1983 / 793;
  border-radius:var(--radio);
  background:#686357;              /* color medio de la foto, mientras carga */
}
@media (max-width:719px){ .foto__marco{aspect-ratio:1190 / 793} }

.foto__lienzo{position:absolute;inset:0;scale:var(--base)}
.foto__lienzo picture,.foto__img{display:block;width:100%;height:100%}
.foto__img{object-fit:cover}
/* Velo verde profundo abajo: amarra la foto a la paleta y le da piso a la
   tarjeta que se monta encima. */
.foto__velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,63,73,.42),rgba(7,63,73,0) 42%);
}
.foto__pts{position:absolute;inset:0}

/* --- destape ------------------------------------------------------------ */
.js .foto .foto__marco{
  clip-path:inset(6% 7% round var(--radio));
  transition:clip-path 1.25s var(--ease-out);
}
.js .foto.is-revealed .foto__marco{clip-path:inset(0 round var(--radio))}
.js .foto .foto__lienzo{
  scale:calc(var(--base) + .12);
  transition:scale 1.7s var(--ease-out);
}
.js .foto.is-revealed .foto__lienzo{scale:var(--base)}

/* --- donde el navegador lo hace nativo, todo sigue al scroll ------------
   El destape y el zoom dejan de depender del reloj y pasan a depender de
   cuánto ha bajado la persona: la foto se abre mientras entra y asienta en
   la mitad de la pantalla. Encima, un paralaje leve mientras la cruza.
   Aquí se apagan las transiciones de arriba: una transición en curso manda
   sobre una animación, y las dos se pelearían el mismo valor. */
@supports (animation-timeline: view()){
  .foto{--base:1.08}               /* margen para que el vaivén no deje bordes */
  .foto__lienzo{
    animation:foto-paralaje linear both;
    animation-timeline:view();
    animation-range:cover;
  }
  .js .foto .foto__marco{
    transition:none;
    animation:foto-abre linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 42%;
  }
  .js .foto .foto__lienzo{
    transition:none;
    animation:foto-asienta linear both,foto-paralaje linear both;
    animation-timeline:view(),view();
    animation-range:entry 0% cover 50%,cover;
  }
  @keyframes foto-abre{
    from{clip-path:inset(9% 11% round var(--radio))}
    to{clip-path:inset(0 round var(--radio))}
  }
  @keyframes foto-asienta{
    from{scale:calc(var(--base) + .14)}
    to{scale:var(--base)}
  }
  @keyframes foto-paralaje{       /* ±3 %: deja 1 % de margen dentro del zoom */
    from{translate:0 -3%}
    to{translate:0 3%}
  }
}

/* --- los tres puntos ---------------------------------------------------- */
.foto__pt{
  position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(252,252,249,.24);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  backdrop-filter:blur(6px) saturate(1.2);
  box-shadow:inset 0 0 0 1.5px rgba(252,252,249,.92),0 6px 18px -6px rgba(0,0,0,.5);
  transition:scale .35s var(--ease-out),background-color .3s ease,box-shadow .3s ease;
}
.foto__pt::before{                  /* centro dorado */
  content:"";position:absolute;left:50%;top:50%;
  width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--gold);
  transition:scale .3s var(--ease-out),background-color .3s ease;
}
.foto__pt::after{                   /* pulso: dice "esto se toca" sin palabras */
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(221,179,72,.95);
  animation:foto-pulso 2.6s var(--ease-out) infinite;
}
@keyframes foto-pulso{
  0%{scale:1;opacity:.9}
  70%,100%{scale:1.9;opacity:0}
}
@media (hover:hover){ .foto__pt:hover{scale:1.1} }
.foto__pt.is-vista{scale:1.1}
.foto__pt[aria-expanded="true"]{
  background:var(--gold);
  box-shadow:inset 0 0 0 1.5px var(--gold),0 8px 22px -6px rgba(0,0,0,.55);
}
.foto__pt[aria-expanded="true"]::before{background:var(--deep);scale:.85}
.foto__pt[aria-expanded="true"]::after{animation:none;opacity:0}
.foto__pt:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* Entran después de que la foto asienta, uno por uno. Es una animación y no
   una transición a propósito: si fuera transición, el retraso de entrada se
   quedaría pegado al realce del puntero. */
.js .foto:not(.is-revealed) .foto__pt{opacity:0}
.js .foto.is-revealed .foto__pt{animation:foto-entra .55s var(--ease-out) var(--pd,1s) backwards}
.foto__pt:nth-child(2){--pd:1.15s}
.foto__pt:nth-child(3){--pd:1.3s}
@keyframes foto-entra{from{scale:0;opacity:0}}
/* Con teclado, el foco puede llegar a un punto antes de que termine su
   entrada (o antes de que la sección se revele): ahí se muestran ya, para
   que nunca haya un foco sobre algo invisible. */
.js .foto:focus-within .foto__pt{animation:none;opacity:1}

@media (max-width:719px){
  .foto__pt{
    left:calc(var(--xm) * 1%);top:calc(var(--ym) * 1%);
    width:40px;height:40px;margin:-20px 0 0 -20px;
  }
}

/* --- la tarjeta que se monta sobre el borde ----------------------------- */
.foto__nota{
  position:relative;z-index:2;
  width:min(100%,480px);
  margin:calc(-1 * clamp(28px,4.6vw,72px)) 0 0 clamp(18px,3.2vw,44px);
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(16px,1.8vw,22px);
  background:var(--deep);color:var(--on-deep);
  border-radius:clamp(12px,1.2vw,16px);
  box-shadow:0 28px 60px -28px rgba(7,63,73,.6);
}
.foto__nota .eyebrow{color:var(--gold)}
.foto__h{
  margin-top:10px;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.3rem,2.1vw,1.72rem);line-height:1.2;color:var(--on-deep);
}
.foto__lect{margin-top:14px}
.foto__l{font-size:.95rem;line-height:1.6;color:var(--on-deep-2)}
.foto__l b{color:var(--on-deep);font-weight:600}
.foto__l + .foto__l{margin-top:10px}   /* sin JavaScript se leen en lista */
.foto__cred{margin-top:14px;font-size:.78rem;color:var(--on-deep-2)}

/* Con JavaScript: las cuatro lecturas en la misma celda. La tarjeta mide lo
   de la más larga y no cambia de alto al pasar de una a otra. */
.js .foto__lect{display:grid}
.js .foto__l{
  grid-area:1 / 1;margin:0;
  visibility:hidden;opacity:0;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.js .foto__l.is-on{
  visibility:visible;opacity:1;
  transition:opacity .35s ease .04s,visibility 0s;
}
/* Sin JavaScript no hay nada que tocar: ni puntos ni invitación. */
html:not(.js) .foto__pts,
html:not(.js) .foto__l[data-foto-l="base"]{display:none}

.js .foto .foto__nota{
  opacity:0;translate:0 22px;
  transition:opacity .7s ease .45s,translate .9s var(--ease-out) .45s;
}
.js .foto.is-revealed .foto__nota{opacity:1;translate:0 0}

@media (max-width:719px){
  .foto__nota{width:auto;margin:-28px 12px 0}
}

@media (prefers-reduced-motion:reduce){
  .foto .foto__marco,.js .foto .foto__marco{clip-path:none;transition:none;animation:none}
  .foto .foto__lienzo,.js .foto .foto__lienzo,
  .js .foto.is-revealed .foto__lienzo{animation:none;scale:1;translate:none;transition:none}
  .js .foto:not(.is-revealed) .foto__pt{opacity:1}
  .foto__pt,.foto__pt::before{transition:none}
  .foto__pt::after{animation:none;opacity:0}
  .js .foto .foto__pt,.js .foto.is-revealed .foto__pt{animation:none;opacity:1}
  .js .foto .foto__nota{opacity:1;translate:none;transition:none}
  .js .foto__l,.js .foto__l.is-on{transition:none}
}


/* =============================================================
   40. Versión final — aviso de analítica y formulario sin JS
   -------------------------------------------------------------
   El aviso solo existe si lib/manifest.js trae un ID de GA4 válido
   (lo crea analitica.js). Discreto, abajo a la izquierda, no bloquea
   nada y no es un modal: se decide con dos botones del mismo peso.
   Misma familia visual que el aviso "Próximamente" (.soon).
   ============================================================= */
.consent{
  /* Por debajo del menú móvil (99) y la cabecera (100): con el menú abierto,
     el aviso nunca tapa sus enlaces. */
  position:fixed;z-index:98;left:16px;bottom:16px;
  width:min(400px,calc(100vw - 32px));
  padding:18px 18px 16px;
  background:var(--deep);color:var(--on-deep);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .45s var(--ease-out);
}
.consent.is-on{opacity:1;transform:none}
.consent[hidden]{display:none}
.consent__t{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--on-deep)}
.consent__d{margin-top:6px;font-size:.88rem;line-height:1.55;color:var(--on-deep-2)}
.consent__d a{color:var(--on-deep);text-decoration:underline;text-underline-offset:3px}
.consent__d a:hover,.consent__d a:focus-visible{color:var(--gold)}
.consent__estado{margin-top:8px;font-size:.84rem;color:var(--gold)}
.consent__acc{display:flex;gap:8px;margin-top:14px}
.consent__btn{
  flex:1;min-height:42px;padding:10px 14px;
  font-family:var(--display);font-size:.9rem;font-weight:600;line-height:1;
  background:transparent;color:var(--on-deep);
  border:1px solid rgba(237,234,223,.42);border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.consent__btn:hover{border-color:var(--on-deep)}
.consent__btn--si{background:var(--gold);color:var(--deep);border-color:var(--gold)}
.consent__btn--si:hover{background:#E6C265;border-color:#E6C265}
.consent__btn:focus-visible,.consent__d a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:719px){
  .consent{left:12px;right:12px;bottom:12px;width:auto}
  /* El botón flotante de WhatsApp sube mientras el aviso está abierto. */
  html.has-consent .wa-float{bottom:calc(var(--consent-h,0px) + 24px)}
}
@media (prefers-reduced-motion:reduce){
  .consent{transition:none;transform:none}
}
@media print{ .consent{display:none!important} }

/* --- Formulario: el error siempre ofrece WhatsApp a un toque --------- */
.form-msg__wa{color:inherit;font-size:inherit;margin-left:2px;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px}
.form-msg__wa:hover,.form-msg__wa:focus-visible{background-size:100% 2px}
[data-form] button[type="submit"]:disabled{cursor:progress}

/* --- Sin JavaScript el formulario se ve completo y se envía por POST
       normal: contacto.php responde con gracias.html o con una página de
       error legible. Con JavaScript nada de esto aplica. ---------------- */
html:not(.js) .fstep{display:grid;gap:16px}
html:not(.js) .form-steps,
html:not(.js) [data-form-next],
html:not(.js) [data-form-back]{display:none}