/* Sección de video en los niveles */
.nv-video{ position:relative; background:#E8EFF7; padding:clamp(28px,5vh,64px) 0; }
.nv-video__in{ display:grid; gap:clamp(16px,3vh,28px); }
.nv-video__frase{ margin:clamp(10px,1.8vh,18px) 0 0; max-width:36ch; font-size:clamp(16px,1.2vw,19px); line-height:1.5; color:rgba(12,31,79,.72); }
.nv-video__marco{ position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--tinta,#0C1F4F); cursor:pointer; }
.nv-video__marco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.22,1,.28,1); }
.nv-video__marco:hover img{ transform:scale(1.03); }
.nv-video__marco iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.nv-video__velo{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,31,79,.05), rgba(12,31,79,.34)); }
.nv-video__play{ position:absolute; left:50%; top:50%; width:clamp(64px,6vw,92px); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.9); border-radius:50%; background:rgba(12,31,79,.42); transition:background .3s ease; }
.nv-video__marco:hover .nv-video__play, .nv-video__marco:focus-visible .nv-video__play{ background:rgba(12,31,79,.72); }
.nv-video__play svg{ width:34%; height:34%; fill:#fff; margin-left:6%; }
.nv-video__marco:focus-visible{ outline:2px solid var(--tinta,#0C1F4F); outline-offset:3px; }
@media (min-width:901px){
  .nv-video__in{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); align-items:center; gap:clamp(28px,4vw,72px); }
  .nv-video__marco{ justify-self:end; width:min(100%, calc((100svh - var(--cab-c,61px) - 90px) * 16 / 9)); }
}
@media (min-width:901px) and (min-height:560px){
  .nv-video{ min-height:calc(100svh - var(--cab-c,61px)); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .nv-video__marco img{ transition:none; } }
html[data-piel] .nv-video .trz-marca{ white-space:normal; }
.nv-video .niv__enca{ margin-bottom:0; position:relative; }

/* dibujito a crayón junto al video: se traza cuando la sección se arma */
.nv-dib{ --w:clamp(112px,10.4vw,168px); display:block; width:var(--w); height:auto; margin:clamp(14px,3.2vh,34px) calc(var(--w) * .93 - clamp(14px,2.2vw,40px)) 0 auto; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
html[data-piel] .se-traza .nv-dib .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
@media (max-width:900px){
  .nv-dib{ position:absolute; right:0; top:-10px; width:66px; margin:0; }
  .nv-dib__flecha{ display:none; }
}
@media (max-width:380px){ .nv-dib{ width:60px; top:-12px; } }
@media (max-width:900px){ .nv-video--corto .niv__tit{ padding-right:76px; } }
@media (prefers-reduced-motion:reduce){ html[data-piel] .nv-dib .trz-d{ stroke-dashoffset:0; } }
/* Bachillerato no carga trazo.css: el trazo de su cámara se define aquí */
html[data-piel="cursor"] .nv-dib .trz-d{ stroke-dasharray:1 2; stroke-dashoffset:1.001; }
@media (prefers-reduced-motion:reduce){ html[data-piel="cursor"] .nv-dib .trz-d{ stroke-dashoffset:0; } }

/* Secundaria y Bachillerato: cámara en post-it y en mensaje */
.nv-nota{ display:flex; align-items:center; justify-content:flex-end; gap:clamp(8px,1vw,16px); margin:clamp(14px,3vh,30px) calc(-1 * clamp(8px,1.6vw,30px)) 0 0; pointer-events:none; }
.nv-nota svg{ overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nv-flecha{ flex:none; width:clamp(70px,6.8vw,104px); height:auto; }
html[data-piel] .se-traza .nv-nota .trz-d{ stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1s) cubic-bezier(.55,.08,.35,1) var(--d,0s); }
html[data-piel="cursor"] .nv-nota .trz-d{ stroke-dasharray:1 2; stroke-dashoffset:1.001; }
html[data-piel="cursor"] .se-traza .nv-nota .trz-d{ stroke-dashoffset:0; }
.nv-postit{ position:relative; flex:none; box-sizing:border-box; width:clamp(142px,12vw,176px); padding:clamp(14px,1.4vw,20px) 12px 12px; background:linear-gradient(170deg,#DAFB8E 0%,#C3F062 60%,#AEDE4A 100%); box-shadow:0 1px 2px rgba(12,31,79,.16), 0 16px 26px -14px rgba(12,31,79,.42); transform:rotate(-3deg); }
.nv-postit__pin{ position:absolute; top:-6px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #5F8FD0, #004484 70%); box-shadow:0 2px 3px rgba(12,31,79,.35); }
.nv-postit__cam{ display:block; width:62%; height:auto; margin:0 auto 6px; }
.nv-postit p{ margin:0; text-align:center; font-family:Caveat, "Segoe Print", cursive; font-weight:700; font-size:clamp(20px,1.65vw,25px); line-height:1.02; color:#0C1F4F; }
html.js-traza .nv-video:not(.se-traza) .nv-postit{ opacity:0; transform:rotate(-8deg) translateY(14px) scale(.92); }
.nv-postit{ transition:opacity .45s ease .15s, transform .7s cubic-bezier(.2,1.4,.4,1) .15s; }
.nv-wa{ position:relative; flex:none; width:clamp(176px,15.4vw,232px); font-family:var(--sf,system-ui,sans-serif); color:#111B21; }
.nv-wa__msg{ position:relative; padding:3px 3px 5px; background:#D9FDD3; border-radius:12px; border-top-right-radius:0; box-shadow:0 1px .5px rgba(11,20,26,.13), 0 14px 30px -14px rgba(11,20,26,.45); transform-origin:top right; }
.nv-wa__msg::before{ content:""; position:absolute; top:0; right:-8px; width:10px; height:12px; background:#D9FDD3; clip-path:polygon(0 0, 100% 0, 0 100%); }
.nv-wa__img{ display:grid; place-items:center; aspect-ratio:16/10; border-radius:9px; background:linear-gradient(145deg,#0C1F4F 0%,#004484 100%); }
.nv-wa__img svg{ width:46%; height:auto; }
.nv-wa__txt{ margin:5px 7px 0; font-size:clamp(13px,1vw,14.5px); line-height:1.3; letter-spacing:-.005em; }
.nv-wa__meta{ float:right; display:inline-flex; align-items:center; gap:3px; margin:5px 0 -1px 8px; font-size:11px; color:#667781; }
.nv-wa__leido{ width:16px; height:11px; color:#53BDEB; }
.nv-wa__escribe{ position:absolute; top:0; right:0; display:flex; gap:4px; padding:11px 13px; background:#D9FDD3; border-radius:12px; border-top-right-radius:0; opacity:0; }
.nv-wa__escribe i{ width:7px; height:7px; border-radius:50%; background:#5E7A6E; animation:cur-wa-punto 1.1s ease-in-out infinite; }
.nv-wa__escribe i:nth-child(2){ animation-delay:.15s; } .nv-wa__escribe i:nth-child(3){ animation-delay:.3s; }
html.js-traza .nv-video:not(.se-traza) .nv-wa__msg{ opacity:0; }
html.js-traza .nv-video.se-traza .nv-wa__msg{ animation:nv-wa-llega .45s cubic-bezier(.2,1.4,.4,1) 1.5s both; }
html.js-traza .nv-video.se-traza .nv-wa__escribe{ animation:nv-wa-escribe 1.5s linear .1s both; }
@keyframes nv-wa-llega{ from{ opacity:0; transform:translateY(-10px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes nv-wa-escribe{ 0%{ opacity:0; } 10%,92%{ opacity:1; } 100%{ opacity:0; } }
@media (max-width:900px){
  .nv-nota{ margin:14px 0 2px; justify-content:center; }
  .nv-flecha{ display:none; }
  .nv-postit{ width:168px; } .nv-postit p{ font-size:23px; }
  .nv-wa{ width:236px; } .nv-wa__txt{ font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  html[data-piel] .nv-nota .trz-d{ stroke-dashoffset:0; }
  .nv-wa__escribe{ display:none; } html.js-traza .nv-video .nv-wa__msg{ opacity:1; animation:none; } .nv-postit{ transition:none; }
}
/* sin IntersectionObserver nadie arma la sección: los dibujos se ven completos */
html:not(.js-traza) .nv-dib .trz-d, html:not(.js-traza) .nv-nota .trz-d{ stroke-dashoffset:0 !important; }