html[data-piel] .hero--nivel{
  --foto-h:clamp(350px, 64svh, 690px);   /* 350 mín.: en ventanas bajas los hechos no bajan hasta Porfirio */
  height:auto; min-height:0; display:block; overflow:visible; overflow-x:clip; background:var(--crema,#FBF7EE);
}
/* la foto y su velo, solo en la franja de arriba */
html[data-piel] .hero--nivel .hero__foto,
html[data-piel] .hero--nivel .hero__velo{ inset:auto; top:0; left:0; right:0; width:100%; height:var(--foto-h); }
html[data-piel] .hero--nivel .hero__velo{
  background:
    linear-gradient(to top,    rgba(12,31,79,.8) 0%, rgba(12,31,79,.4) 32%, rgba(12,31,79,0) 62%),
    linear-gradient(to bottom, rgba(12,31,79,.62) 0%, rgba(12,31,79,.18) 16%, rgba(12,31,79,0) 32%),
    linear-gradient(to right,  rgba(12,31,79,.32) 0%, rgba(12,31,79,0) 55%);
}
/* el título abajo a la izquierda de la foto (como Delbarton) */
html[data-piel] .hero--nivel .hero__copy{
  position:relative; min-height:var(--foto-h); box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding-top:110px; padding-bottom:clamp(22px,3.6vh,38px);
}
/* abajo del corte: la página misma, con los hechos en tinta */
html[data-piel] .hero--nivel .hechos{ position:relative; z-index:2; color:var(--tinta,#0C1F4F); background:var(--crema,#FBF7EE); }
html[data-piel="lapiz"] .hero--nivel .hechos{
  background-image:linear-gradient(rgba(0,68,132,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,68,132,.06) 1px, transparent 1px);
  background-size:24px 24px;
}
html[data-piel="plumon"] .hero--nivel .hechos{
  background-image:radial-gradient(circle, rgba(0,68,132,.16) 1.1px, transparent 1.4px); background-size:22px 22px;
}
/* la línea del corte: centrada sobre la costura foto/página */
html[data-piel] .hero--nivel .trz-filo{ position:absolute; left:0; top:-8px; bottom:auto; z-index:3; pointer-events:none; }
html[data-piel] .hero--nivel .trz-raya{ display:none; }
html[data-piel] .hero--nivel .hechos__marco{
  border-top:0; margin-top:0; margin-bottom:0;   /* el <dl> trae 1em de margen: colapsaba y abría 16 px entre la foto y la línea */
  padding-top:clamp(18px,2.8vh,28px); padding-bottom:clamp(22px,3.6vh,36px);
}
html[data-piel] .hero--nivel .hecho dt{ color:var(--tinta,#0C1F4F); }
html[data-piel] .hero--nivel .hecho dd{ color:rgba(12,31,79,.66); }
html[data-piel="crayon"] .hero--nivel .hecho dt{ color:#12407A; }
html[data-piel="lapiz"]  .hero--nivel .hecho dt{ color:#26303D; }

html[data-piel="plumon"] .hero--nivel .hecho{
  background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 1px 1px rgba(12,31,79,.1), 0 8px 16px -8px rgba(12,31,79,.3), inset 0 0 0 1px rgba(12,31,79,.04);
}
html[data-piel="plumon"] .hero--nivel .hecho::before{ opacity:1; padding:2px; }
html[data-piel="plumon"] .hero--nivel .hecho:hover{ box-shadow:0 2px 2px rgba(12,31,79,.1), 0 16px 26px -12px rgba(12,31,79,.34), 0 0 0 1px rgba(249,198,88,.5); }

html[data-piel="cursor"] .hero--nivel{ background:#0C1F4F; }
html[data-piel="cursor"] .hero--nivel .hero__foto{ height:100%; }
html[data-piel="cursor"] .hero--nivel .hero__velo{ height:var(--foto-h); }
html[data-piel="cursor"] .hero--nivel .hechos{
  background:linear-gradient(180deg, rgba(252,253,255,.66), rgba(244,247,252,.9));
  -webkit-backdrop-filter:blur(32px) saturate(1.8) brightness(1.45); backdrop-filter:blur(32px) saturate(1.8) brightness(1.45);
  border-top:1px solid rgba(255,255,255,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-piel="cursor"] .hero--nivel .hechos::after{
  content:""; position:absolute; top:-1px; height:2px; pointer-events:none;
  left:max(4vw, (100vw - var(--marco-max,1660px)) / 2); right:max(4vw, (100vw - var(--marco-max,1660px)) / 2);
  background:linear-gradient(90deg, #6FB6FF, #BFD9FF 45%, #F9C658); border-radius:2px;
  box-shadow:0 0 10px rgba(191,217,255,.7);
  transform:scaleX(0); transform-origin:left center;
  animation:corte-traza 2.6s cubic-bezier(.45,0,.35,1) .6s both;
}
@keyframes corte-traza{ to{ transform:scaleX(1); } }
html[data-piel="cursor"] .hero--nivel .hechos__marco{
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; box-shadow:none; border-radius:0;
  margin-left:max(4vw, (100vw - var(--marco-max,1660px)) / 2); margin-right:max(4vw, 292px);
  padding:clamp(16px,2.4vh,24px) 0 clamp(20px,3.2vh,32px);
}
html[data-piel="cursor"] .hero--nivel .hecho dt{ color:#0C1F4F; }
html[data-piel="cursor"] .hero--nivel .hecho dd{ color:rgba(12,31,79,.62); }

/* ---------- celular ---------- */
@media (max-width:900px){
  html[data-piel] .hero--nivel{ --foto-h:clamp(380px, 56svh, 520px); height:auto; min-height:0; }
  html[data-piel] .hero--nivel .hero__copy{ padding-top:90px; }
  html[data-piel] .hero--nivel .hechos__marco{ padding-top:16px; }
  html[data-piel="cursor"] .hero--nivel .hechos{ background:rgba(247,249,252,.8); }
  html[data-piel="cursor"] .hero--nivel .hechos__marco{ margin-left:4vw; margin-right:4vw; padding:14px 0 16px; }
}
@media (prefers-reduced-motion:reduce){ html[data-piel="cursor"] .hero--nivel .hechos::after{ display:none; } }

@media (min-width:901px){
  html[data-piel] .hero--nivel .hechos__marco{ padding-right:0; }
  html[data-piel="cursor"] .hero--nivel .hechos__marco{ margin-right:max(4vw, (100vw - var(--marco-max,1660px)) / 2); }
}

@media (min-width:901px){
  html[data-piel] .hero--nivel{ height:100svh; min-height:560px; display:grid; grid-template-rows:minmax(0,1fr) auto; }
  html[data-piel] .hero--nivel .hero__foto,
  html[data-piel] .hero--nivel .hero__velo{ position:relative; grid-area:1/1; inset:auto; width:100%; height:100%; min-height:0; }
  html[data-piel] .hero--nivel .hero__copy{ grid-area:1/1; min-height:0; z-index:1; }
  html[data-piel] .hero--nivel .hechos{ grid-area:2/1; padding-bottom:96px; }   /* banda de Porfirio: 56 px de pill + 18 de margen + aire */
  html[data-piel="cursor"] .hero--nivel .hero__foto{ grid-area:1/1/3/2; }
  html[data-piel="cursor"] .hero--nivel .hero__velo{ grid-area:1/1; }
}
@media (max-width:900px){
  html[data-piel] .hero--nivel{ min-height:100svh; display:grid; grid-template-rows:minmax(300px,1fr) auto; }
  html[data-piel] .hero--nivel .hero__foto,
  html[data-piel] .hero--nivel .hero__velo{ position:relative; grid-area:1/1; inset:auto; width:100%; height:100%; min-height:0; }
  html[data-piel] .hero--nivel .hero__copy{ grid-area:1/1; min-height:0; z-index:1; }
  html[data-piel] .hero--nivel .hechos{ grid-area:2/1; padding-bottom:calc(168px + env(safe-area-inset-bottom, 0px)); }   /* banda de Porfirio en celular: ahí flota a ~94 px del borde */
  html[data-piel="cursor"] .hero--nivel .hero__foto{ grid-area:1/1/3/2; }
}

.cuida__lleva{
  list-style:none; margin:clamp(8px,1.4vh,16px) 0 clamp(8px,1.4vh,16px); padding:clamp(10px,1.6vh,16px) 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(249,198,88,.5); border-bottom:1px solid rgba(255,255,255,.16);
}
.lleva{ display:flex; align-items:baseline; gap:10px; padding:0 clamp(10px,1.2vw,18px); border-left:1px solid rgba(255,255,255,.16); color:#fff; }
.lleva:first-child{ border-left:0; padding-left:0; }
.lleva__n{ font-family:var(--f-display); font-size:clamp(20px,1.6vw,26px); line-height:1; color:#F9C658; }
.lleva__t{ font-size:clamp(13px,1vw,15.5px); font-weight:600; line-height:1.3; }
html.js-traza .lleva{ opacity:0; transform:translateY(10px); transition:opacity .8s ease calc(.25s + var(--i,0) * .14s), transform .8s cubic-bezier(.22,1,.28,1) calc(.25s + var(--i,0) * .14s); }
html.js-traza .cuida__lleva.se-traza .lleva, html:not(.js-traza) .lleva{ opacity:1; transform:none; }
.cuida__lema{ font-family:var(--f-display); font-style:italic; }
.cuida__uno{ margin:clamp(8px,1.4vh,16px) 0 0; font-size:clamp(15px,1.15vw,18px); line-height:1.4; color:rgba(255,255,255,.92); }
.cuida__uno b{ color:#F9C658; font-weight:600; }
/* preescolar: "Y desde maternal, ya es colegio" */
.etapas__colegio{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 22px; margin:clamp(12px,2vh,22px) 0 0; padding-top:clamp(10px,1.6vh,16px); border-top:1px solid rgba(0,68,132,.14); }
.etapas__colegio-t{ margin:0; font-family:var(--f-display); font-size:clamp(17px,1.3vw,21px); color:#0C1F4F; }
.etapas__colegio-t b{ font-weight:500; }
.etapas__colegio-l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; }
.etapas__colegio-l li{ position:relative; padding-left:14px; font-size:clamp(13px,1vw,15px); font-weight:600; color:#004484; }
.etapas__colegio-l li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:#F9C658; }
@media (max-width:900px){
  .cuida__lleva{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:12px; }
  .lleva:nth-child(3){ border-left:0; padding-left:0; }
  .etapas__colegio{ gap:8px 16px; }
}
/* preescolar a 1366×657: con la línea "ya es colegio" la sección se pasaba 20 px → fotos de las etapas un poco más bajas en pantallas bajas */
@media (min-width:901px) and (max-height:700px){ .etapa__foto{ aspect-ratio:18/4.2; } }
.trz-postit--aizq{ bottom:88px; }

html[data-piel] .hero--nivel .trz-remate{ position:absolute; z-index:4; pointer-events:none; overflow:visible; }
html[data-piel] .hero--nivel .trz-remate--dibujo{ filter:drop-shadow(0 1px 1.5px rgba(12,31,79,.45)); }

html[data-piel] .trz-remate--holo{ filter:drop-shadow(0 2px 3px rgba(12,31,79,.4)); opacity:0; transform:scale(.2) rotate(-40deg); }
html[data-piel].trz-cargado .trz-remate--holo{ animation:holo-pega .75s cubic-bezier(.3,1.5,.45,1) 3.25s both; }
html[data-piel] .trz-remate--holo.ya{ animation:none !important; opacity:1; transform:rotate(-12deg); }
html[data-piel] .trz-remate--holo b,
html[data-piel] .trz-remate--holo i{ position:absolute; display:block;
  clip-path:polygon(50% 0%, 62% 34%, 98% 35%, 69% 57%, 80% 93%, 50% 72%, 20% 93%, 31% 57%, 2% 35%, 38% 34%); }
html[data-piel] .trz-remate--holo b{ inset:0; background:#fff; }
html[data-piel] .trz-remate--holo i{ inset:17%; overflow:hidden;
  background:conic-gradient(from 200deg at 50% 55%, #2F7BF5, #6FB6FF, #D8E9FF, #F9C658, #F2A93B, #6FB6FF, #2F7BF5); }
html[data-piel] .trz-remate--holo i::after{ content:""; position:absolute; inset:-20% -60%;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
  transform:translateX(-70%); }
html[data-piel].trz-cargado .trz-remate--holo i::after{ animation:holo-brilla 1.1s ease-in-out 4.05s both; }
@keyframes holo-pega{
  0%{ opacity:0; transform:scale(.2) rotate(-40deg); }
  55%{ opacity:1; transform:scale(1.18) rotate(-8deg); }
  78%{ transform:scale(.94) rotate(-13deg); }
  100%{ opacity:1; transform:scale(1) rotate(-12deg); }
}
@keyframes holo-brilla{ from{ transform:translateX(-70%); } to{ transform:translateX(70%); } }

html[data-piel="cursor"] .hero--nivel .hechos::after{
  height:3px; top:-1.5px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.98) 50%, transparent) no-repeat,
             linear-gradient(90deg, #6FB6FF, #BFD9FF 45%, #F9C658);
  background-size:26% 100%, 100% 100%; background-position:-60% 0, 0 0;
  animation:corte-traza 2.6s cubic-bezier(.45,0,.35,1) .6s both, corte-brilla 1.3s ease-in-out 3.25s both;
}
@keyframes corte-brilla{ from{ background-position:-60% 0, 0 0; } to{ background-position:160% 0, 0 0; } }
html[data-piel="cursor"] .hero--nivel .cur-chispas{ position:absolute; z-index:4; pointer-events:none;
  top:-40px; width:36px; height:36px;
  right:calc(max(4vw, (100vw - var(--marco-max,1660px)) / 2) + 2px);
  filter:drop-shadow(0 0 5px rgba(191,217,255,.85)) drop-shadow(0 1px 2px rgba(12,31,79,.35)); }
html[data-piel="cursor"] .cur-chispas svg{ width:100%; height:100%; overflow:visible; display:block; }
html[data-piel="cursor"] .cur-chispa{ transform-box:fill-box; transform-origin:center; opacity:0; transform:scale(0) rotate(-60deg);
  animation:chispa-entra .7s cubic-bezier(.3,1.6,.5,1) calc(4.2s + var(--i) * .28s) both,
            chispa-respira 4.2s ease-in-out calc(6.4s + var(--i) * .7s) infinite; }
@keyframes chispa-entra{ 0%{ opacity:0; transform:scale(0) rotate(-60deg); } 100%{ opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes chispa-respira{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.72; transform:scale(.8); } }

@media (max-width:900px){
  html[data-piel="cursor"] .hero--nivel .cur-chispas{ width:28px; height:28px; top:-33px; right:calc(4vw + 2px); }
}
@media (prefers-reduced-motion:reduce){
  html[data-piel] .trz-remate--holo, html[data-piel] .trz-remate--holo i::after,
  html[data-piel="cursor"] .cur-chispa{ animation:none !important; opacity:1; transform:none; }
  html[data-piel] .trz-remate--holo{ transform:rotate(-12deg); }
  html[data-piel] .trz-remate--holo i::after{ display:none; }
}