.etapas{ background:var(--crema); padding:clamp(24px,3.8vh,46px) 0 clamp(26px,4.2vh,50px); }
.etapas__par{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.8vw,48px); margin-top:clamp(16px,2.4vh,28px); align-items:start; }
.etapa{ display:grid; grid-template-rows:auto auto; gap:clamp(10px,1.4vh,15px); }
.etapa__foto{ margin:0; overflow:hidden; border-radius:2px; aspect-ratio:18/5; }
.etapa__foto img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transition:transform 1.4s cubic-bezier(.22,1,.28,1); }
.etapa:hover .etapa__foto img{ transform:scale(1.035); }
.etapa__eti{ margin:0 0 7px; font-size:clamp(11.5px,.86vw,13px); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#004484; }
.etapa__eti::before{ content:""; display:block; width:40px; height:1px; margin-bottom:10px; background:var(--oro-vivo);
  transform:scaleX(0); transform-origin:left center; transition:transform .7s cubic-bezier(.22,1,.28,1) .35s; }
.etapas__par.se-traza .etapa__eti::before, html:not(.js-traza) .etapa__eti::before{ transform:scaleX(1); }
.etapa__nom{ margin:0 0 8px; font-family:var(--f-display); font-weight:500; font-size:clamp(21px,1.85vw,29px); line-height:1.12; letter-spacing:-.012em; color:var(--tinta); }
.etapa__p{ margin:0 0 clamp(10px,1.4vh,14px); font-size:clamp(14px,.98vw,15.5px); line-height:1.46; color:rgba(12,31,79,.82); max-width:52ch; }
.etapa__foto{ position:relative; }
.etapa:nth-child(2){ --esc:.18s; }
html.js-traza .etapas__par:not(.se-traza) .etapa__foto{ clip-path:inset(100% 0 0 0); }
.etapa__foto{ clip-path:inset(0 0 0 0); transition:clip-path 1.3s cubic-bezier(.76,0,.24,1) calc(var(--esc,0s) + .06s); }
html.js-traza .etapas__par:not(.se-traza) .etapa__foto img{ transform:scale(1.1) translateY(-2.5%); }
.etapa__foto::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(to right, rgba(249,198,88,0), var(--oro-vivo) 45%, rgba(249,198,88,0)); }
.etapas__par.se-traza .etapa__foto::after{ animation:telon-filo 1.3s cubic-bezier(.76,0,.24,1) calc(var(--esc,0s) + .06s) both; }
html.js-traza .etapas__par:not(.se-traza) .etapa__txt > *{ opacity:0; transform:translateY(14px); }
.etapa__txt > *{ transition:opacity .75s ease calc(var(--esc,0s) + .55s + var(--j,0) * .1s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--esc,0s) + .55s + var(--j,0) * .1s); }
.etapa__txt > :nth-child(2){ --j:1; } .etapa__txt > :nth-child(3){ --j:2; } .etapa__txt > :nth-child(4){ --j:3; }
@media (min-width:901px) and (min-height:560px){
  .etapas{ min-height:calc(100svh - var(--cab-c, 61px)); box-sizing:border-box; display:flex; flex-direction:column; }
  .etapas > .marco{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }
  .etapas > .marco > *{ flex:0 0 auto; }
  .etapas > .marco > .niv__enca{ margin-bottom:0; }
}

/* 1 · el párrafo del nivel vive en la hoja, donde estaban los seis hechos */
.hero--nivel .hechos__desc{ margin:0; max-width:66ch; font-size:clamp(16px,1.18vw,19px); line-height:1.55; color:rgba(12,31,79,.86); text-wrap:pretty;
  opacity:0; transform:translateY(10px); animation:hecho-entra .9s cubic-bezier(.22,1,.28,1) .9s both; }
html.intro-viva .hero--nivel .hechos__desc{ animation-delay:3.75s; }

/* 2 · propuesta educativa: una etapa a la vez, con pestañas */
.prop__enca{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px 32px; flex-wrap:wrap; }
.prop__tabs{ gap:30px; margin:0 0 4px; }
.prop__tabs .dia__tab{ font-size:14px; letter-spacing:.13em; }
.prop__paneles{ display:block; }
.prop__panel{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(22px,3.2vw,60px); align-items:center; }
.prop__panel[hidden]{ display:none; }
.prop__panel .etapa__foto{ aspect-ratio:auto; height:clamp(260px, calc(100svh - var(--cab-c,61px) - 240px), 520px); }
.prop__panel .etapa__nom{ font-size:clamp(24px,2.15vw,34px); margin-bottom:14px; text-wrap:balance; }
.prop__panel .etapa__p{ font-size:clamp(15px,1.1vw,17.5px); line-height:1.62; max-width:46ch; margin:0; }
.prop__panel.es-nuevo .etapa__foto img{ animation:prop-foto .8s cubic-bezier(.22,1,.28,1) both; }
.prop__panel.es-nuevo .etapa__txt > *{ animation:hecho-entra .7s cubic-bezier(.22,1,.28,1) calc(.1s + var(--j,0) * .08s) both; }
@keyframes prop-foto{ from{ opacity:0; transform:scale(1.05); } to{ opacity:1; transform:none; } }

/* 3 · lo que distingue esta etapa */
.distingue{ background:#fff; padding:clamp(28px,5vh,64px) 0; }
.dist__lista{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,4.2vh,46px) clamp(24px,3vw,60px); margin:clamp(16px,3.4vh,40px) 0 0; }
.dist__item{ display:grid; align-content:start; gap:8px; border-top:1px solid rgba(12,31,79,.14); padding-top:clamp(14px,2.2vh,22px); }
.dist__item dt{ font-family:var(--f-display); font-weight:500; font-size:clamp(24px,2.3vw,36px); line-height:1.08; letter-spacing:-.01em; color:var(--tinta,#0C1F4F); }
.dist__item dt small{ font-size:.55em; font-weight:400; }
.dist__item dd{ margin:0; font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.5; color:rgba(12,31,79,.72); max-width:34ch; }
.dist__item{ transition:opacity .7s ease calc(.2s + var(--i,0) * .1s), transform .8s cubic-bezier(.22,1,.28,1) calc(.2s + var(--i,0) * .1s); }
html.js-traza .dist__lista:not(.se-traza) .dist__item{ opacity:0; transform:translateY(14px); }

/* 4 · espacios: tira uniforme (nada de collage), telón que sube, pie de una palabra */
.espacios{ background:var(--crema); padding:clamp(28px,5vh,64px) 0 clamp(18px,3vh,32px); }
.esp__tira{ list-style:none; margin:clamp(14px,3vh,32px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); }
.esp__foto figure{ position:relative; margin:0; overflow:hidden; border-radius:2px; height:clamp(240px, calc(100svh - var(--cab-c,61px) - 310px), 480px); }
.esp__foto img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.22,1,.28,1); }
.esp__foto:hover img{ transform:scale(1.04); }
.esp__foto figcaption{ position:absolute; left:0; right:0; bottom:0; padding:44px 16px 14px; background:linear-gradient(to top, rgba(12,31,79,.74), rgba(12,31,79,0)); color:#fff; font-family:var(--f-display); font-size:clamp(17px,1.35vw,22px); line-height:1.1; }
.esp__foto figure{ clip-path:inset(0 0 0 0); transition:clip-path 1.2s cubic-bezier(.76,0,.24,1) calc(var(--i,0) * .12s); }
html.js-traza .esp__tira:not(.se-traza) .esp__foto figure{ clip-path:inset(100% 0 0 0); }
.esp__ir{ margin:clamp(16px,2.8vh,30px) 0 0; text-align:center; }
.esp__link{ position:relative; display:inline-flex; align-items:center; gap:8px; padding-bottom:6px; font-size:13.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta,#0C1F4F); text-decoration:none; }
.esp__link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--oro-vivo,#F9C658); transform-origin:left center; }
.esp__link svg{ width:16px; height:16px; transition:transform .3s ease; }
.esp__link:hover svg{ transform:translateX(4px); }
.esp__link:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:4px; }

/* 5 · siguiente nivel, discreto y centrado (abajo a la derecha vive Porfirio) */
.siguiente{ background:var(--crema); padding:0 0 clamp(34px,6vh,64px); }
.siguiente__marco{ display:flex; justify-content:center; border-top:1px solid rgba(12,31,79,.12); padding-top:clamp(18px,3vh,28px); }
.siguiente__ir{ display:inline-grid; justify-items:center; gap:4px; text-decoration:none; color:var(--tinta,#0C1F4F); }
.siguiente__eti{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(12,31,79,.55); }
.siguiente__nom{ font-family:var(--f-display); font-size:clamp(22px,1.9vw,30px); }
.siguiente__nom span{ display:inline-block; transition:transform .3s ease; }
.siguiente__ir:hover .siguiente__nom span{ transform:translateX(5px); }
.siguiente__ir:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:6px; }

/* una pantalla por sección en escritorio */
@media (min-width:901px) and (min-height:560px){
  .distingue, .espacios{ min-height:calc(100svh - var(--cab-c, 61px)); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width:900px){
  .prop__panel{ grid-template-columns:1fr; gap:16px; }
  .prop__panel .etapa__foto{ height:auto; aspect-ratio:3/2; }
  .prop__tabs{ gap:24px; }
  .dist__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  .dist__item dt{ font-size:clamp(20px,5.6vw,26px); }
  .dist__item dd{ font-size:14px; }
  .esp__tira{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .esp__foto figure{ height:auto; aspect-ratio:4/5; }
}
@media (prefers-reduced-motion:reduce){
  .hero--nivel .hechos__desc, .prop__panel.es-nuevo .etapa__foto img, .prop__panel.es-nuevo .etapa__txt > *{ animation:none; opacity:1; transform:none; }
  .esp__foto figure, .dist__item{ transition:none; }
}

@media (max-width:900px){
  .hero--nivel .hero__ir, .prop__tabs .dia__tab, .esp__link{ position:relative; }
  .hero--nivel .hero__ir::before, .prop__tabs .dia__tab::before, .esp__link::before{ content:""; position:absolute; left:-6px; right:-6px; top:50%; height:46px; transform:translateY(-50%); }
  .prop__panel .etapa__txt{ padding-bottom:84px; }
}

.siguiente__marco{ flex-direction:column; align-items:center; gap:clamp(16px,2.4vh,24px); }
.siguiente__puente{ margin:0; text-align:center; font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.5; color:rgba(12,31,79,.72); }
.siguiente__puente a{ position:relative; display:inline-block; margin-left:4px; font-weight:700; color:var(--tinta,#0C1F4F); text-decoration:none; white-space:nowrap;
  background:linear-gradient(var(--oro-vivo,#F9C658),var(--oro-vivo,#F9C658)) left bottom / 100% 2px no-repeat; padding-bottom:3px; }
.siguiente__puente a:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:4px; }
@media (max-width:900px){
  .siguiente__puente a::before{ content:""; position:absolute; left:-6px; right:-6px; top:50%; height:46px; transform:translateY(-50%); }
  .prop__panel .etapa__foto{ aspect-ratio:16/10; }
}
/* los post-its de plumón y los dibujos se anclan a su sección: tienen que ser contenedores posicionados */
.distingue, .espacios, .esp__tira{ position:relative; }

.dist__lista--10{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,2.6vh,30px) clamp(18px,2vw,36px); }
.esp__tira--5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.prop__panel .etapa__fin{ margin-top:.9em; }
.dist__lista--10 dt{ font-size:clamp(19px,1.55vw,25px); line-height:1.15; }
.dist__lista--10 dt small{ font-size:.6em; }
@media (max-width:900px){
  .dist__lista--10{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  .esp__tira--5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .esp__tira--5 .esp__foto:last-child{ grid-column:1 / -1; }
}
@media (min-width:901px){
  .prop__panel + .prop__panel{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); }
  .prop__panel + .prop__panel .etapa__foto{ order:2; }
}
@media (min-width:901px){
  #etapas .prop__enca{ position:relative; }   
  #etapas .prop__tabs{ position:absolute; top:-6px; right:0; }
}
.esp__tira--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .esp__tira--3{ grid-template-columns:1fr; } }

.dist__lista{ position:relative; }
.trz-postit--hueco{ right:3%; bottom:2%; }   
html[data-piel="cursor"] #espacios .esp__foto figcaption{   /* bachillerato: pies en vidrio sobre las fotos */
  left:12px; right:auto; bottom:12px; padding:8px 16px; border-radius:999px;
  background:rgba(12,31,79,.30); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.28); box-shadow:0 8px 24px -12px rgba(12,31,79,.6);
}
.esp__foto figure{ position:relative; }
html[data-piel] .trz-fotodib{ position:absolute; top:6%; right:6%; width:30%; height:auto; pointer-events:none; overflow:visible; filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px rgba(255,255,255,.9)); }
html[data-piel] .se-traza .trz-fotodib .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
html[data-piel] .trz-fotodib--chico{ width:clamp(56px,11%,96px); top:7%; right:6%; }
html[data-piel] .trz-fotodib--izq{ right:auto; left:6%; }
.etapa__foto{ position:relative; }
html[data-piel] .trz-fotodib--izq{ width:clamp(80px,14%,124px); filter:drop-shadow(0 1px 1.5px rgba(12,31,79,.6)) drop-shadow(0 0 2px rgba(255,255,255,.85)); }   /* la estrella cae sobre pared clara: sombra azul para que se lea */
@media (max-width:600px){ html[data-piel="lapiz"] #espacios .niv__tit{ font-size:7.2vw; } }   
html[data-piel] .trz-fotodib--centro{ left:44%; top:3%; }   

.nivnav{ display:grid; justify-items:center; gap:clamp(10px,1.6vh,14px); }
.nivnav__eti{ margin:0; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(12,31,79,.55); }
.nivnav__lista{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:0; }
.nivnav__lista li{ display:flex; align-items:flex-end; }
.nivnav__lista li + li::before{ content:""; width:1px; height:22px; margin:0 clamp(14px,1.8vw,28px) 6px; background:rgba(12,31,79,.18); }
.nivnav__ir, .nivnav__aqui{ position:relative; display:inline-grid; justify-items:center; padding:4px 0 7px; font-family:var(--f-display); font-size:clamp(19px,1.55vw,25px); line-height:1.15; text-decoration:none; white-space:nowrap; }
.nivnav__ir{ color:rgba(12,31,79,.62); transition:color .25s ease; }
.nivnav__ir::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--oro-vivo,#F9C658); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.22,1,.28,1); }
.nivnav__ir:hover, .nivnav__ir:focus-visible{ color:var(--tinta,#0C1F4F); }
.nivnav__ir:hover::after, .nivnav__ir:focus-visible::after{ transform:scaleX(1); }
.nivnav__ir:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:6px; }
.nivnav__aqui{ color:var(--tinta,#0C1F4F); font-weight:600; }
.nivnav__aqui::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; background:var(--oro-vivo,#F9C658); }
.nivnav__estas{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px; font-family:var(--f-text,'Montserrat',sans-serif); font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro,#C0A145); white-space:nowrap; }
@media (max-width:700px){
  .nivnav__lista{ display:grid; grid-template-columns:1fr 1fr; gap:18px 10px; width:100%; max-width:360px; }
  .nivnav__lista li{ justify-content:center; }
  .nivnav__lista li + li::before{ display:none; }
  .nivnav__ir, .nivnav__aqui{ font-size:18px; min-height:44px; align-content:end; }
}
.nivnav{ gap:clamp(24px,3.4vh,32px); }   /* aire para "Estás aquí" bajo la etiqueta */
@media (max-width:700px){ .nivnav{ gap:22px; } }

.dist__lista .dist__item--justo{ gap:6px; }
.dist__lista .dist__item--justo dt{ font-size:clamp(17px,1.28vw,21px); line-height:1.12; }
.dist__lista .dist__item--justo dd{ font-size:14px; line-height:1.42; }

#distingue .niv__enca{ position:relative; }
.trz-postit--encader{ right:3%; top:6px; }