/* Playground IEP — Home v5 · secciones (R14 estructura · R15 movimiento, profundidad y textura)
   Tesis: el papeleo, por fin en orden — y con las marcas de la profe. UI real como contenido, color en paneles con
   material (luz + grano + sombra interior), stickers como puntuación, todo con un punto de juego en el movimiento. */

/* ---------- sistema de capítulo ---------- */
.sec{ padding-top:clamp(6rem, 10vw, 9rem); }
.sec{ overflow-x:clip; }   /* el lienzo WebGL de un sticker es mayor que el sticker: sin scroll horizontal */
.sec_hd{ margin-bottom:clamp(2.5rem, 4.5vw, 4rem); }
.sec_hd.is-split{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:1.5rem 4rem; align-items:end; }
.eyebrow{ font-weight:600; font-size:.95rem; letter-spacing:-.005em; color:var(--brand); margin:0 0 .9rem; }
.eyebrow.is-light{ color:#c9bbff; }
.h2x{ font-family:var(--display); font-weight:400; font-size:clamp(2.1rem, 3.3vw, 3rem); line-height:1.04; letter-spacing:-.028em; text-wrap:balance; max-width:18ch; margin:0; }   /* R15: antes 4.1rem */
.h2x .w{ display:inline-block; }
.leadx{ font-size:clamp(1.05rem, 1.25vw, 1.2rem); line-height:1.5; color:var(--ink-2); max-width:30rem; margin:0; text-wrap:pretty; }
.linkx{ font-weight:600; color:var(--brand); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.2em; }
.linkx:hover{ text-decoration-thickness:2.5px; }

/* ---------- material de los degradados (R15): luz que deriva despacio + grano + sombra interior ---------- */
.tex, :where(.pcard_in){ position:relative; } /* :where → especificidad 0: no pisa el position:sticky de la pila (home-v5.css) */
.tex, .pcard_in{ isolation:isolate; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -90px 110px -70px rgba(10,0,50,.38); }
.tex::before, .tex::after, .pcard_in::before, .pcard_in::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; }
/* grano tipo risografía: grueso, visible, mezclado en soft-light para que tiña sin ensuciar */
.tex::before, .pcard_in::before{ opacity:.62; mix-blend-mode:soft-light; background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* profundidad: luz alta, sombra baja y un brillo secundario */
.tex::after, .pcard_in::after{
  background:radial-gradient(52% 46% at 16% 4%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%), radial-gradient(70% 60% at 92% 108%, rgba(15,0,60,.42), rgba(15,0,60,0) 70%), radial-gradient(34% 30% at 72% 26%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
/* la luz solo deriva donde el contenedor recorta (si no, el borde de la capa se vería); la capa es mayor que la caja */
.bn_art.tex::after, .hp_stage.tex::after, .pcard_in::after{ inset:-12%; border-radius:0; will-change:transform; animation:texDrift 16s ease-in-out infinite alternate; }
@keyframes texDrift{ from{ transform:translate(-3%, -2%) scale(1); } to{ transform:translate(4%, 3%) scale(1.06); } }

/* ---------- ventana de app mínima ---------- */
.ui{ position:relative; background:#fff; border:1px solid var(--line); border-radius:1rem; box-shadow:0 30px 60px -32px rgba(17,29,42,.32), 0 2px 8px -3px rgba(17,29,42,.08); font-size:.8rem; line-height:1.45; color:var(--ink); text-align:left; }
.ui_top{ display:flex; align-items:center; gap:.55rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap; min-width:0; }
.ui_top b{ font-weight:600; }
.ui_top > span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.ui_top em{ margin-left:auto; font-style:normal; }
.ui svg path, .seals svg path{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tag.gray{ background:#f1f2f5; color:#59616c; }
.ui_actions{ display:flex; justify-content:flex-end; gap:.45rem; margin-top:auto; }
.ui_actions em, .snap2_a em{ display:inline-flex; align-items:center; gap:.35rem; font-style:normal; font-weight:600; font-size:.74rem; padding:.38rem .7rem; border-radius:.5rem; }
.ui_ghost{ border:1px solid var(--line); color:var(--ink-2); }
.ui_ok{ background:var(--brand); color:#fff; }
.ui_ok svg{ width:.75rem; height:.75rem; }
.cite2{ background:linear-gradient(var(--green), var(--green)) 0 100% / var(--uw, 100%) 2px no-repeat; padding-bottom:1px; }
.ui sup, .pl_src sup{ display:inline-grid; place-items:center; width:1rem; height:1rem; margin-left:.15rem; border-radius:.25rem; background:var(--green-soft); color:var(--green-text); font:700 .6rem/1 var(--sans); vertical-align:.35em; }
.ui_k{ margin:.9rem 1rem .35rem; font-family:var(--display); font-size:1.05rem; }
.ui_draft{ margin:0 1rem .6rem; font-family:var(--serif); font-size:.95rem; line-height:1.55; }
.needs{ margin:.2rem 1rem .9rem; padding:.55rem .7rem; border-radius:.6rem; background:var(--amber-soft); color:#7a5410; font-size:.74rem; }
.needs b{ font-weight:700; }
.draws{ margin:.2rem 1rem .9rem; padding:.7rem .85rem; border-left:3px solid var(--green); background:#f6faf7; border-radius:.2rem .6rem .6rem .2rem; }
.draws p{ margin:0; font-family:var(--serif); font-size:.9rem; line-height:1.5; }
.draws p.ui_l, .pl_from small{ font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--green-text); margin-bottom:.3rem; }
.draws mark, .pl_from mark{ background:linear-gradient(#cdeed8, #cdeed8) 0 0 / var(--mw, 100%) 100% no-repeat; color:inherit; padding:0 .1em; }
.files{ padding:.6rem .7rem .7rem; display:flex; flex-direction:column; gap:.4rem; }
.file{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:.55rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:.6rem; background:#fff; }
.file span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.file em{ font-style:normal; }
.pdf{ width:.7rem; height:.88rem; border-radius:2px; background:linear-gradient(#f3b2a3, #e2735f); }
/* cursor falso de las demos */
.cur{ position:absolute; left:0; top:0; z-index:5; width:20px; height:22px; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2 1.5 17 12l-6.6 1.2 3.8 6.8-2.6 1.4-3.8-6.9L3 19z' fill='%23111214' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* stickers de sección: absolutos respecto a su pieza, arrastrables, flotan en reposo (R15) */
.stk.is-sec{ position:absolute; z-index:4; }
@keyframes stkFloat{ 0%, 100%{ translate:0 0; rotate:0deg; } 50%{ translate:0 -6px; rotate:2.5deg; } }
.stk.is-sec .stk_tilt{ animation:stkFloat 5.2s ease-in-out infinite; }
.stk.is-sec:nth-of-type(2n) .stk_tilt{ animation-duration:6.4s; animation-delay:-2s; }
.stk.is-sec.is-lifted .stk_tilt{ animation-play-state:paused; }

/* ---------- 1 · Cómo funciona: bento de 4 ---------- */
.bento{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:1rem; }
.bn{ position:relative; display:flex; flex-direction:column; border-radius:1.75rem; background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .5s cubic-bezier(.3,1.4,.5,1), box-shadow .4s var(--ease); }
.bn:hover{ transform:translateY(-4px) rotate(-.25deg); box-shadow:0 24px 50px -30px rgba(17,29,42,.3); }
.bn.is-1, .bn.is-4{ grid-column:span 5; }
.bn.is-2, .bn.is-3{ grid-column:span 7; }
.bn_txt{ padding:1.75rem 1.9rem 1.4rem; }
.bn_n{ font-family:var(--display); font-size:1rem; color:var(--brand); }
.bn h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.35rem, 1.7vw, 1.6rem); line-height:1.15; letter-spacing:-.015em; margin:.35rem 0 .45rem; }
.bn_txt p{ margin:0; color:var(--ink-2); font-size:.98rem; line-height:1.5; max-width:30rem; }
.bn_art{ flex:1; display:grid; place-items:center; min-height:19.5rem; margin:0 .55rem .55rem; padding:1.75rem 1.25rem; border-radius:1.3rem; background:linear-gradient(160deg, var(--t1), var(--t2)); overflow:hidden; }
.bn_ui{ width:min(100%, 24rem); }
.bn_ui.is-wide{ width:min(100%, 31rem); }
.dr_rail{ height:3px; margin:0 1rem; border-radius:3px; background:#eceefe; overflow:hidden; }
.dr_rail i{ display:block; height:100%; width:100%; background:var(--brand); transform-origin:0 50%; transform:scaleX(.69); }
.ck{ padding-top:.9rem; min-height:9.8rem; }
.ck_pop{ transform-origin:50% 0; }
.snap2{ overflow:hidden; }
.snap2_h{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; background:linear-gradient(135deg, #5a2cff, #4f1cf8); color:#fff; }
.snap2_h .av{ background:rgba(255,255,255,.22); color:#fff; }
.snap2_h b{ display:block; } .snap2_h small{ opacity:.8; font-size:.7rem; }
.snap2_b{ padding:.6rem 1rem .2rem; }
.snap2_b p{ margin:0 0 .6rem; }
.snap2_b small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.snap2_a{ position:relative; display:flex; justify-content:flex-end; gap:.45rem; padding:.4rem 1rem 1rem; }
.toast2{ position:absolute; left:1rem; right:1rem; bottom:.85rem; display:flex; align-items:center; gap:.55rem; padding:.55rem .75rem; border-radius:.65rem; background:var(--ink); color:#fff; font-weight:600; font-size:.76rem; opacity:0; }
.toast2 i.ok, .float i.ok, .audit i.ok{ background:var(--green); }
.toast2 i, .audit i, .float i{ flex:none; width:1.05rem; height:1.05rem; border-radius:50%; display:grid; place-items:center; }
.toast2 i.ok::after, .float i.ok::after, .audit i.ok::after{ content:""; width:.26rem; height:.48rem; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }

/* ---------- 2 · IEP Copilot: scroll horizontal ---------- */
.hs_nav{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.25rem; margin-bottom:1.75rem; }
.hs_tab{ display:flex; flex-direction:column; gap:.6rem; text-align:left; font-weight:600; font-size:.95rem; color:var(--muted); transition:color .3s; }
.hs_tab i{ display:block; height:3px; border-radius:3px; background:#eceef3; overflow:hidden; }
.hs_tab b{ display:block; height:100%; background:var(--c); transform-origin:0 50%; transform:scaleX(0); }
.hs_tab.is-on, .hs_tab:hover{ color:var(--ink); }
.hs_view{ overflow:hidden; }
/* R16 · escritorio: un trabajo cada vez — pila en profundidad con niebla (la coloca el JS; sin JS no existe .hs-depth) */
.hs.hs-depth .hs_view{ overflow:visible; }
.hs.hs-depth .hs_track{ position:relative; width:min(1200px, 100% - 3rem); margin-inline:auto; padding:0; height:min(60vh, 33rem); margin-top:clamp(5.5rem, 13vh, 8rem); }
.hs.hs-depth .hp{ position:absolute; inset:0; width:auto; perspective:1700px; perspective-origin:70% -20%; pointer-events:none; }
.hs.hs-depth .hp_txt{ pointer-events:auto; padding:2rem 0 0; }
.hs.hs-depth .hp_stage{ min-height:0; height:100%; transform-origin:50% 0; will-change:transform, opacity; box-shadow:0 40px 80px -40px rgba(17,29,42,.35); }
.hs.hs-depth .hp_tools{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.75rem; padding:0; }
.hs.hs-depth .hp_tools li{ padding:.34rem .7rem; border:0; border-radius:999px; background:color-mix(in oklab, var(--c) 9%, #fff); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 18%, #fff); font-size:.84rem; color:var(--ink-2); }
.hp_fog{ position:absolute; inset:-1px; z-index:6; border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(250,249,255,.9) 55%, rgba(244,241,255,.82) 100%); }
/* la bruma de fondo sobre la que "salen" las tarjetas */
.hs.hs-depth .hs_track::before{ content:""; position:absolute; z-index:0; left:36%; right:-6%; top:-7rem; height:12rem; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(236,232,255,.9), rgba(236,232,255,0) 72%); }
.hs.hs-native .hs_view{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.hs.hs-native .hp{ scroll-snap-align:center; align-content:start; }   /* R25d: el carrusel estira las tarjetas a la más larga y ese sobrante inflaba cada escena distinto */
.hs_track{ display:flex; gap:1.25rem; width:max-content; padding-inline:max(1.5rem, calc((100vw - 1200px) / 2)); }
.hp{ flex:none; width:min(1080px, 100vw - 9rem); display:grid; grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr); gap:2.5rem; align-items:stretch; }
.hp_txt{ display:flex; flex-direction:column; padding:1.5rem 0; }
.hp_k{ display:flex; align-items:center; gap:.55rem; margin:0 0 1rem; font-weight:600; color:var(--ink-2); }
.hp_k i{ width:.7rem; height:.7rem; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in oklab, var(--c) 18%, #fff); }
.hp_txt h3{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(1.9rem, 2.8vw, 2.6rem); line-height:1.02; letter-spacing:-.03em; }
.hp_txt > p:not(.hp_k){ margin:.7rem 0 0; color:var(--ink-2); font-size:1.05rem; max-width:24rem; }
.hp_tools{ list-style:none; margin:auto 0 0; padding:1.5rem 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:1.25rem; }
.hp_tools li{ padding:.55rem 0; border-top:1px solid var(--line); font-size:.92rem; font-weight:500; color:var(--ink-2); }
.hp_stage{ display:grid; place-items:center; min-height:min(64vh, 34rem); padding:2rem; border-radius:1.75rem; background:linear-gradient(160deg, var(--g1) 0%, var(--g2) 58%, var(--g3) 125%); overflow:hidden; }
.hp_ui{ width:min(100%, 34rem); min-width:0; }
.hp_stage, .bn_art{ grid-template-columns:minmax(0, 1fr); justify-items:center; }
.bn_ui{ min-width:0; }
.goal{ margin:1rem 1.1rem .5rem; font-family:var(--serif); font-size:1rem; line-height:1.55; }
.bench{ display:flex; align-items:flex-end; gap:1.25rem; padding:1.6rem 1.1rem 1.1rem; }
.bench_base small{ display:block; color:var(--muted); font-size:.7rem; }
.bench_base b{ font-family:var(--display); font-weight:400; font-size:2.2rem; line-height:1; }
.bench_bars{ flex:1; display:flex; align-items:flex-end; gap:.5rem; height:5.5rem; }
.bench_bars i{ position:relative; flex:1; height:calc(var(--h) * 100%); border-radius:.4rem .4rem .15rem .15rem; background:linear-gradient(var(--c), color-mix(in oklab, var(--c) 70%, #fff)); transform-origin:50% 100%; }
.bench_bars em{ position:absolute; left:0; right:0; top:-1.35rem; text-align:center; font-style:normal; font-size:.68rem; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.audit{ list-style:none; margin:0; padding:.35rem 1.1rem .8rem; }
.audit li{ display:flex; align-items:center; gap:.65rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.audit li:last-child{ border-bottom:0; }
.audit li.is-na{ color:var(--muted); }
.audit li em{ margin-left:auto; font-style:normal; font-weight:600; color:var(--brand); }
.audit i.flag, .float i.warn{ background:#e8a13a; }
.audit i.flag::after, .float i.warn::after{ content:"!"; color:#fff; font-weight:800; font-size:.68rem; line-height:1; }
.audit i.na{ background:#e6e8ec; }
.audit i.na::after{ content:""; width:.45rem; height:2px; background:#9aa1ab; }
.lvl{ position:relative; margin:1rem 1.1rem .4rem; min-height:5.2rem; font-family:var(--serif); font-size:1rem; line-height:1.55; }
.lvl p{ margin:0; }
.lvl_b{ position:absolute; inset:0; opacity:0; }
.lvl_scale{ display:flex; align-items:center; gap:.6rem; padding:.6rem 1.1rem 1rem; color:var(--muted); font-size:.7rem; font-weight:600; }
.lvl_scale i{ position:relative; flex:1; height:4px; border-radius:4px; background:#ece8fb; }
.lvl_scale b{ position:absolute; top:50%; left:var(--k, 33%); width:.95rem; height:.95rem; margin:-.475rem 0 0 -.475rem; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--c), 0 2px 6px rgba(17,29,42,.2); }
.rep{ padding:.9rem 1.1rem 1rem; display:flex; flex-direction:column; gap:.8rem; }
.rep_dots{ display:flex; align-items:center; justify-content:space-between; }
.rep_dots small{ color:var(--muted); font-size:.72rem; }
.rep_dots span{ display:flex; gap:.35rem; }
.rep_dots i{ width:.62rem; height:.62rem; border-radius:50%; }
.rep_dots .g{ background:#2f9e5b; } .rep_dots .o{ background:#e8a13a; } .rep_dots .b{ background:#3d6bff; }
.rep_t{ margin:0; min-height:4.7rem; font-family:var(--serif); font-size:1rem; line-height:1.55; }
/* R18: Writing Sample Analyzer (trabajo 4 de Copilot) */
.ws{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:1rem; }
.ws_t{ margin:0; font-family:var(--serif); font-size:1.02rem; line-height:1.6; }
.ws_t mark{ --hw:100%; color:inherit; padding:0 .1em; border-radius:.2em; background:linear-gradient(#ffe1c2, #ffe1c2) 0 0 / var(--hw) 100% no-repeat; }
.ws_t mark.is-good{ background-image:linear-gradient(#d6f2de, #d6f2de); }
.ws_bars{ display:flex; flex-direction:column; gap:.5rem; }
.ws_bars > div{ display:grid; grid-template-columns:6.5rem 1fr auto; align-items:center; gap:.7rem; }
.ws_bars small{ color:var(--muted); font-size:.74rem; font-weight:500; }
.ws_bars i{ height:.45rem; border-radius:999px; background:#f1ece6; overflow:hidden; }
.ws_bars b{ display:block; height:100%; width:calc(var(--v) * 100%); border-radius:inherit; background:var(--c); transform-origin:0 50%; }
.ws_bars em{ font-style:normal; font-weight:600; font-size:.74rem; color:var(--ink-2); }
.ws_next{ margin:0; padding:.55rem .7rem; border-radius:.6rem; background:#fff4e8; color:#7a3f0c; font-size:.76rem; }

/* ---------- 3 · Safe by design (R16): la página se inunda de índigo desde el sello ---------- */
.safe4{ position:relative; isolation:isolate; margin-top:clamp(6rem, 10vw, 9rem); margin-inline:auto; width:min(100%, 100vw); padding-block:clamp(8rem, 13vw, 11rem) calc(clamp(8rem, 13vw, 11rem) + 3.2vw); color:#fff; overflow-x:clip; }
/* R20b: abajo = mismo aire que arriba + lo que ocupa la curva del arco (flecha ≈ 3,1vw con radio 400vw): antes el arco
   se comía el aire en los laterales (59–78 px abajo frente a ~200 px arriba). */
.safe4_flood{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  /* R20: arco arriba Y abajo, de la misma circunferencia y más plano que en R16c (170vw → 400vw: flecha ~108px → ~45px a 1440).
     Dos círculos del mismo radio, uno por arriba y otro por abajo, intersecados → lente simétrica.
     Solo es seguro si la sección mide menos de 2×radio (R17: en móvil no llegaba): 390px mide 2407 y 2×400vw = 3120. */
  --arc:400vw;
  -webkit-mask:radial-gradient(circle var(--arc) at 50% var(--arc), #000 calc(var(--arc) - 1.5px), transparent var(--arc)) no-repeat,
               radial-gradient(circle var(--arc) at 50% calc(100% - var(--arc)), #000 calc(var(--arc) - 1.5px), transparent var(--arc)) no-repeat;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--arc) at 50% var(--arc), #000 calc(var(--arc) - 1.5px), transparent var(--arc)) no-repeat,
       radial-gradient(circle var(--arc) at 50% calc(100% - var(--arc)), #000 calc(var(--arc) - 1.5px), transparent var(--arc)) no-repeat;
  mask-composite:intersect; }
/* R25 (R25c: clip-path circle() en JS, ver home-v5-sections.js): la inundación ya no es un círculo escalado (al tocar el arco plano de arriba antes que los lados se veía un corte en pico).
   Capa a sección completa recortada con clip-path: nace como círculo en el sello y se abre como rectángulo redondeado cuyos
   radios se van a 0 al cubrir; su borde de arriba ya es plano cuando toca el arco. El degradado queda fijo, centrado en el sello. */
.safe4_blob{ position:absolute; inset:0;
  background:radial-gradient(circle calc(var(--bd, 300vmax) / 2) at var(--bx, 50%) var(--by, 12rem), #2a1790 0%, #1d0f66 38%, #140a4a 70%, #0d0833 100%); }
.safe4_blob::after{ content:""; position:absolute; inset:0; opacity:.3; mix-blend-mode:soft-light; background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html:not(.sec-js) .safe4_blob{ clip-path:none !important; }
.safe4_in{ position:relative; }
.safe4 .seal{ position:relative; display:block; top:auto; right:auto; width:clamp(7.5rem, 11vw, 9.5rem); margin:0 auto 2.5rem; }
.safe4_hd{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.safe4_hd .h2x{ color:#fff; max-width:17ch; font-size:clamp(2.4rem, 4.4vw, 4rem); }
.safe4_hd .leadx{ margin-top:1.5rem; max-width:40rem; color:rgba(255,255,255,.76); }
.seals{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.seals li{ display:flex; align-items:center; gap:.55rem; padding:.45rem .9rem .45rem .5rem; border-radius:999px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font-weight:500; font-size:.95rem; }
.seals svg{ flex:none; width:1.35rem; height:1.35rem; padding:.3rem; border-radius:50%; background:var(--green); color:#fff; }
.safe4_grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:1.25rem; margin-top:clamp(4.5rem, 8vw, 7rem); }
.pledge{ grid-column:span 2; display:flex; flex-direction:column; gap:1.6rem; padding:1.25rem 1.25rem 1.75rem; border-radius:1.6rem; background:linear-gradient(170deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14); transition:background .35s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.pledge.is-wide{ grid-column:span 3; }
.pledge:hover{ background:linear-gradient(170deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); transform:translateY(-5px) rotate(-.3deg); }
.pl_txt{ padding:0 .5rem; }
.pl_n{ font-family:var(--display); font-size:.95rem; color:#c9bbff; }
.pledge h3{ margin:.3rem 0 .5rem; font-family:var(--display); font-weight:400; font-size:clamp(1.3rem, 1.8vw, 1.6rem); line-height:1.12; letter-spacing:-.015em; }
.pledge p{ margin:0; color:rgba(255,255,255,.72); font-size:.96rem; line-height:1.55; max-width:32rem; }
.pl_ui{ min-height:9.5rem; display:flex; flex-direction:column; justify-content:center; gap:.6rem; padding:1.1rem; border-radius:1.05rem; background:rgba(255,255,255,.06); font-size:.8rem; }
.pl_band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.3rem .8rem; padding:.65rem .8rem; border-radius:.65rem; background:#e9f7ee; color:#1c6b3c; }
.pl_band b{ font-weight:600; font-size:.84rem; } .pl_band span{ font-size:.74rem; text-decoration:underline; text-underline-offset:2px; }
.pl_gaprow{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; }
.pl_gap{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .7rem; border-radius:.55rem; background:#fff1d6; color:#7a5410; font-weight:600; }
.pl_gap::before{ content:"!"; display:grid; place-items:center; width:1rem; height:1rem; border-radius:50%; background:#e8a13a; color:#fff; font-weight:800; font-size:.62rem; }
.pl_q{ color:rgba(255,255,255,.82); font-family:var(--serif); font-size:.9rem; }
.pl_src{ color:var(--ink); gap:0; }
.pledge .pl_src > p{ color:var(--ink); margin:0; padding:.6rem .8rem; background:#fff; border-radius:.6rem .6rem 0 0; font-family:var(--serif); font-size:.9rem; max-width:none; }
.pl_from{ padding:.55rem .8rem .65rem; background:#f6faf7; border-left:3px solid var(--green); border-radius:0 0 .6rem .6rem; font-family:var(--serif); font-size:.84rem; line-height:1.4; }
.pl_from small{ display:block; }
.pl_btns{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; }
.pl_btns em{ font-style:normal; font-weight:600; padding:.45rem .8rem; border-radius:.55rem; border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.85); }
.pl_btns em.is-ok{ background:#fff; color:var(--ink); border-color:#fff; }
.pl_roles{ gap:.5rem; }
.pl_role{ display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:.65rem; background:rgba(255,255,255,.08); }
.pl_role b{ font-weight:600; font-size:.84rem; }
.pl_role em{ margin-left:auto; font-style:normal; font-weight:600; font-size:.72rem; padding:.22rem .5rem; border-radius:.4rem; background:rgba(47,158,91,.25); color:#9df0bb; white-space:nowrap; }
.pl_role em.is-v{ background:rgba(201,187,255,.2); color:#dcd2ff; }
/* R18: un alumno, un expediente */
.pl_file{ display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:.65rem; background:#fff; color:var(--ink); }
.pl_file b{ font-weight:600; font-size:.86rem; } .pl_file em{ margin-left:auto; font-style:normal; font-size:.72rem; color:var(--muted); }
.pl_chips{ display:flex; flex-wrap:wrap; gap:.35rem; padding-left:1.1rem; border-left:2px dashed rgba(201,187,255,.45); margin-left:1.2rem; }
.pl_chips span{ padding:.25rem .55rem; border-radius:.45rem; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font-size:.72rem; color:rgba(255,255,255,.88); }
.pl_doc{ flex-direction:row; align-items:center; gap:.7rem; }
.pl_doc i{ width:1.8rem; height:2.3rem; border-radius:.22rem; background:#fff; box-shadow:inset 0 -.55rem 0 #e9e5fb; flex:none; }
.pl_doc span{ font-weight:600; font-size:.88rem; }
.pl_doc em{ margin-left:auto; font-style:normal; font-weight:700; padding:.28rem .55rem; border-radius:.4rem; background:rgba(47,158,91,.25); color:#9df0bb; }
.safe4_cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.5rem; margin-top:3.5rem; color:rgba(255,255,255,.78); }
.safe4_cta p{ margin:0; }
.seal text{ font:700 12.5px/1 var(--sans); letter-spacing:.06em; fill:#fff; }
.seal_spin{ transform-origin:100px 100px; animation:sealSpin 26s linear infinite; }
.seal_in{ fill:#4f1cf8; stroke:#fff; stroke-width:3; }
.seal_ck{ fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
@keyframes sealSpin{ to{ transform:rotate(360deg); } }
.safe4 .seal{ filter:drop-shadow(0 14px 30px rgba(10,0,50,.45)); overflow:visible; }
.safe4_ring{ position:absolute; left:50%; top:0; width:clamp(7.5rem, 11vw, 9.5rem); aspect-ratio:1; margin-left:calc(clamp(7.5rem, 11vw, 9.5rem) / -2); border-radius:50%; box-shadow:0 0 0 2px rgba(201,187,255,.7); opacity:0; pointer-events:none; }

/* ---------- 4 · Equipo (R16): composición tipo Clay — la app sobresale del panel, popover con pasos, línea punteada ---------- */
.t3{ position:relative; padding:8rem 3.5rem 0; }
.t3_bg{ position:absolute; left:0; right:0; top:13.5rem; bottom:0; border-radius:2.25rem; background:linear-gradient(172deg, #efeaff 0%, #d4c6ff 55%, #b39cff 100%); }
.t3 > .stk.is-sec{ z-index:6; }
.t3_app{ position:relative; z-index:2; border-radius:1.4rem 1.4rem 0 0; font-size:.86rem; }
/* la ventana se funde con el panel por abajo (Clay): fondo blanco que se desvanece; la máscara va solo en tabla y lateral para no recortar el popover */
.t3_bar{ display:flex; align-items:center; gap:1rem; height:3.6rem; padding:0 1.25rem; border-bottom:1px solid var(--line); background:#fff; border-radius:inherit; box-shadow:0 -1px 0 1px rgba(17,29,42,.05), 0 -20px 50px -30px rgba(40,10,120,.35); }
.t3_logo{ display:flex; align-items:center; gap:.45rem; font-family:var(--display); font-size:1.15rem; letter-spacing:-.02em; }
.t3_logo img{ width:1.4rem; height:auto; rotate:16deg; }
.t3_view{ display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .6rem; border-radius:.5rem; background:#fff5d6; color:#7a5410; font-weight:600; font-size:.76rem; }
.t3_view svg, .t3_app svg path{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.t3_view svg{ width:.75rem; height:.75rem; }
.t3_me{ margin-left:auto; display:flex; align-items:center; gap:.55rem; line-height:1.2; }
.t3_me b{ display:block; font-weight:600; font-size:.8rem; } .t3_me small{ color:var(--muted); font-size:.72rem; }
.t3_body{ display:grid; grid-template-columns:14.5rem minmax(0, 1fr); height:30rem; background:linear-gradient(#fff 40%, rgba(255,255,255,.55) 72%, rgba(255,255,255,0)); }
.t3_side, .t3_tbl{ -webkit-mask-image:linear-gradient(#000 45%, rgba(0,0,0,.3) 80%, transparent 96%); mask-image:linear-gradient(#000 45%, rgba(0,0,0,.3) 80%, transparent 96%); }
.t3_tbl{ -webkit-mask-size:100% 24rem; mask-size:100% 24rem; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.t3_side{ padding:1.1rem .8rem; border-right:1px solid var(--line); }
.t3_lbl{ margin:.2rem .55rem .5rem; color:var(--muted); font-size:.72rem; font-weight:500; }
.t3_roles{ position:relative; display:flex; flex-direction:column; gap:.15rem; margin-bottom:1.4rem; }
.t3_roles button{ position:relative; z-index:1; display:flex; align-items:center; gap:.6rem; padding:.62rem .6rem; border-radius:.65rem; text-align:left; font-weight:500; font-size:.9rem; color:var(--ink-2); transition:color .2s; }
.t3_roles button svg{ width:1.1rem; height:1.1rem; flex:none; color:var(--muted); transition:color .2s, transform .45s cubic-bezier(.3,1.8,.45,1); }
.t3_roles button:hover svg{ transform:rotate(-8deg) scale(1.12); }
.t3_roles button[aria-selected="true"]{ color:var(--ink); font-weight:600; }
.t3_roles button[aria-selected="true"] svg{ color:var(--brand); }
.t3_roles button:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.t3_hl{ position:absolute; z-index:0; left:0; right:0; top:0; border-radius:.65rem; background:#f2effd; box-shadow:inset 0 0 0 1px rgba(79,28,248,.1); }
html:not(.sec-js) .t3_roles button[aria-selected="true"]{ background:#f2effd; }
.t3_nav{ list-style:none; margin:0; padding:0; }
.t3_nav li{ padding:.5rem .6rem; color:var(--ink-2); font-size:.86rem; }
.t3_nav li.is-dim{ color:var(--muted); }
.t3_panes{ min-width:0; }
.t3_pane[hidden]{ display:none; }
.t3_head{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem; }
.t3_head h3{ display:flex; align-items:center; gap:.7rem; margin:0; font-family:var(--display); font-weight:400; font-size:1.45rem; letter-spacing:-.02em; }
.t3_live{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.82rem; color:var(--muted); }
.t3_live i{ width:.45rem; height:.45rem; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); animation:livePulse 2.4s ease-in-out infinite; }
.t3_live.is-red{ color:#c0392b; } .t3_live.is-red i{ background:#e5484d; box-shadow:0 0 0 3px #fde8e8; }
@keyframes livePulse{ 50%{ box-shadow:0 0 0 6px rgba(47,158,91,0); } }
.t3_btns{ margin-left:auto; display:flex; gap:.4rem; }
.t3_btns em{ font-style:normal; font-weight:600; font-size:.78rem; padding:.45rem .75rem; border-radius:.55rem; border:1px solid var(--line); color:var(--ink-2); background:#fff; }
.t3_btns em.is-hi{ color:var(--brand); border-color:rgba(79,28,248,.35); background:#f7f4ff; }
.t3_tbl{ width:100%; border-collapse:collapse; }
.t3_tbl th{ text-align:left; font-weight:500; color:var(--muted); font-size:.78rem; padding:.55rem 1rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fcfcfd; white-space:nowrap; }
.t3_tbl td{ padding:.78rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.t3_tbl th:first-child, .t3_tbl td:first-child{ width:2.5rem; padding-left:1.4rem; color:var(--muted); }
.t3_tbl .st{ display:inline-flex; align-items:center; gap:.55rem; font-weight:500; }
.t3_tbl .over{ color:#c0392b; font-weight:600; }
.t3_tbl td[data-load]{ font-weight:600; color:var(--green-text); }
.t3_ldg{ display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); font-weight:500; }
.t3_spin{ position:relative; display:inline-block; width:.95rem; height:.95rem; flex:none; }
.t3_spin::before{ content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, currentColor 0 12%, transparent 12% 25%, currentColor 25% 37%, transparent 37% 50%, currentColor 50% 62%, transparent 62% 75%, currentColor 75% 87%, transparent 87%);
  -webkit-mask:radial-gradient(circle, transparent 38%, #000 40% 100%); mask:radial-gradient(circle, transparent 38%, #000 40% 100%); animation:spin 1s steps(8) infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* popover flotante y píldora de acción (fuera de la máscara de la tabla) */
.t3_pop{ position:absolute; z-index:5; top:-6.25rem; left:36%; width:min(23rem, 36%); padding:.55rem; border-radius:1.25rem; background:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(17,29,42,.06), 0 30px 60px -24px rgba(40,10,120,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.t3_pop_h, .t3_pop ul{ background:#fff; border-radius:.85rem; }
.t3_pop_h{ display:flex; align-items:center; gap:.8rem; padding:.85rem .9rem; margin-bottom:.4rem; box-shadow:0 0 0 1px var(--line); }
.t3_pop_h b{ display:block; font-weight:600; font-size:.95rem; } .t3_pop_h small{ color:var(--muted); font-size:.8rem; }
.t3_pop_i{ display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:.7rem; background:linear-gradient(160deg, #efeaff, #d9ccff); flex:none; }
.t3_pop_i img{ width:2rem; height:2rem; object-fit:contain; }
.t3_pop ul{ list-style:none; margin:0; padding:0 .9rem; box-shadow:0 0 0 1px var(--line); }
.t3_pop li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; font-size:.9rem; font-weight:500; }
.t3_pop li + li{ border-top:1px solid var(--line); }
.t3_pop li i{ position:relative; display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; flex:none; background:var(--green); color:var(--muted); }
.t3_pop li i::after{ content:""; width:.3rem; height:.56rem; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
.t3_pop li.is-wait i{ background:none; }
.t3_pop li.is-wait i::after{ display:none; }
.t3_pop li.is-wait i::before{ content:""; position:absolute; inset:.1rem; border-radius:50%; background:conic-gradient(currentColor 0 12%, transparent 12% 25%, currentColor 25% 37%, transparent 37% 50%, currentColor 50% 62%, transparent 62% 75%, currentColor 75% 87%, transparent 87%);
  -webkit-mask:radial-gradient(circle, transparent 36%, #000 38%); mask:radial-gradient(circle, transparent 36%, #000 38%); animation:spin 1s steps(8) infinite; }
.t3_pill{ position:absolute; z-index:5; top:-7.4rem; right:-1.5rem; display:flex; align-items:center; gap:.65rem; padding:.45rem .5rem .45rem .5rem; border-radius:1rem; background:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(17,29,42,.06), 0 20px 40px -20px rgba(40,10,120,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-weight:600; font-size:1rem; white-space:nowrap; }
.t3_pill::before{ content:""; position:absolute; inset:.3rem; z-index:-1; border-radius:.75rem; background:#fff; box-shadow:0 0 0 1px var(--line); }
.t3_pill_i{ display:grid; place-items:center; width:1.9rem; height:1.9rem; margin-left:.25rem; border-radius:.55rem; background:var(--brand); color:#fff; font-size:.9rem; }
.t3_pill svg{ width:2.1rem; height:2.1rem; padding:.5rem; margin-right:.25rem; border-radius:.55rem; background:#f3f2f7; color:var(--ink-2); }
.t3_link{ position:absolute; z-index:4; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.t3_link > path{ fill:none; stroke:var(--ink); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:0 8; }

/* ---------- 5 · Prueba: testimonios que rotan + logos que cambian ---------- */
.proof2_grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:1rem; }
.quote2{ position:relative; grid-column:span 5; margin:0; padding:clamp(1.5rem, 2.5vw, 2.1rem); border-radius:1.6rem; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; min-height:15.5rem; }
.quote2.is-big{ grid-column:span 7; grid-row:span 2; background:linear-gradient(165deg, #fff9e6 0%, #ffecb8 100%); border-color:transparent; padding:clamp(2rem, 3.5vw, 3rem); }
.qstack{ flex:1; display:grid; }
.qstack > .qbody{ grid-area:1 / 1; }
.qstack > .qbody + .qbody{ visibility:hidden; }   /* sin JS: solo la primera; con JS GSAP controla la visibilidad */
html:not(.sec-js) .proof2_grid{ display:none; }
.qbody{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:1.75rem; }
.quote2 blockquote{ margin:0; font-size:1.02rem; line-height:1.5; color:var(--ink); text-wrap:pretty; }
.quote2.is-big blockquote{ font-family:var(--display); font-size:clamp(1.9rem, 3vw, 2.8rem); line-height:1.08; letter-spacing:-.025em; }
.quote2.is-big blockquote.is-long{ font-size:clamp(1.25rem, 1.75vw, 1.6rem); line-height:1.3; letter-spacing:-.012em; }
.quote2 figcaption{ display:flex; align-items:center; gap:.8rem; font-size:.92rem; }
.quote2 figcaption b{ display:block; font-weight:600; }
.quote2 figcaption span{ color:var(--muted); }
.mj{ flex:none; width:3rem; height:3rem; border-radius:50%; object-fit:cover; background:#e4ebfb; box-shadow:0 0 0 3px #fff, 0 6px 14px -6px rgba(17,29,42,.35); }
.is-big .mj{ width:4.6rem; height:4.6rem; box-shadow:0 0 0 4px #fff, 0 10px 22px -8px rgba(120,80,0,.4); }
/* R16: controles reales — flechas + puntos; el punto activo se llena con el tiempo que queda */
.qctl{ display:flex; align-items:center; gap:.6rem; margin-top:1.75rem; }
.qdots{ display:flex; align-items:center; gap:.15rem; }
.qdot{ display:grid; place-items:center; width:1.6rem; height:2.25rem; border-radius:.6rem; transition:width .45s cubic-bezier(.3,1.5,.5,1); }
.qdot::before{ content:""; grid-area:1 / 1; width:.55rem; height:.55rem; border-radius:999px; background:rgba(17,29,42,.2); transition:width .45s cubic-bezier(.3,1.5,.5,1), background .25s; }
.qdot i{ grid-area:1 / 1; justify-self:start; width:2.2rem; height:.55rem; margin-left:.2rem; border-radius:999px; overflow:hidden; visibility:hidden; --p:0; }
/* R25c (Eric): la píldora ya redondeada hace de máscara y dentro se llena un rectángulo; antes se escalaba la píldora y su borde
   izquierdo "se creaba" a medida que avanzaba. */
.qdot i::after{ content:""; position:absolute; inset:0; background:var(--ink); transform-origin:0 50%; transform:scaleX(var(--p)); }
.qdot i{ position:relative; }
.qdot:hover::before{ background:rgba(17,29,42,.42); }
.qdot.is-on{ width:2.6rem; }
.qdot.is-on::before{ width:2.2rem; background:rgba(17,29,42,.16); }
.qdot.is-on i{ visibility:visible; }
.qarrow{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%; color:rgba(17,29,42,.45); transition:color .2s, background .2s, transform .45s cubic-bezier(.3,1.8,.45,1); }
.qarrow svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qarrow:hover{ color:var(--ink); background:rgba(17,29,42,.06); }
.qarrow[data-qprev]:hover svg{ animation:nudgeL .5s ease; } .qarrow[data-qnext]:hover svg{ animation:nudgeR .5s ease; }
@keyframes nudgeR{ 50%{ transform:translateX(3px); } } @keyframes nudgeL{ 50%{ transform:translateX(-3px); } }
.qdot:focus-visible, .qarrow:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.logos{ margin-top:clamp(2.5rem, 4vw, 3.5rem); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos_n{ margin:0; padding:2rem 2rem 2rem 0; display:flex; flex-direction:column; justify-content:center; gap:.4rem; }
.logos_n b{ font-family:var(--display); font-weight:400; font-size:clamp(2.8rem, 4.5vw, 4rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.logos_n b::after{ content:"+"; color:var(--brand); }
.logos_n span{ color:var(--ink-2); max-width:18rem; }
.logos_g{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.logos_g li{ position:relative; display:grid; place-items:center; min-height:7rem; padding:1rem; border-left:1px solid var(--line); overflow:hidden; perspective:600px; }
.logos_g li:nth-child(n+4){ border-top:1px solid var(--line); }
.logos_g img{ max-height:3rem; max-width:10.5rem; width:auto; filter:grayscale(1) contrast(1.15); mix-blend-mode:multiply; opacity:.8; transition:opacity .3s, filter .3s; }
.logos_g li:hover img{ opacity:1; filter:none; }

/* ---------- 6 · Empezar ---------- */
.start2_grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:1rem; }
.way{ position:relative; display:flex; flex-direction:column; gap:.9rem; padding:clamp(2rem, 4vw, 3rem); border-radius:2rem; }
.way.is-edu{ background:linear-gradient(165deg, #f1ecff 0%, #d9ccff 100%); }
.way.is-org{ background:#fff; border:1px solid var(--line); }
.way_k{ margin:0; font-weight:600; color:var(--brand); }
.way h3{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(1.8rem, 2.6vw, 2.4rem); line-height:1; letter-spacing:-.03em; }
.way > p:not(.way_k){ margin:0; color:var(--ink-2); max-width:26rem; }
.way.is-edu .pbtn{ margin-top:auto; align-self:flex-start; }
.way_ui{ margin:.5rem 0 2rem; max-width:26rem; }
.way_row{ display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; }
.way_row + .way_row{ border-top:1px solid var(--line); }
.way_row b{ display:block; font-weight:600; } .way_row small{ color:var(--muted); font-size:.74rem; }
.way_row em{ margin-left:auto; font-style:normal; color:var(--green-text); font-weight:600; font-size:.74rem; }
.way_row.is-dim{ color:var(--muted); } .way_row.is-dim b{ font-weight:500; }
.way_row i{ width:1.75rem; height:1.75rem; border-radius:50%; border:1.5px dashed rgba(17,29,42,.3); flex:none; animation:dashSpin 9s linear infinite; }
@keyframes dashSpin{ to{ transform:rotate(360deg); } }
.way_opt{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.3rem 0; border-top:1px solid var(--line); }
.way h3 + .way_opt{ margin-top:1rem; }
.way_opt > div > b{ display:block; font-weight:600; font-size:1.05rem; }
.way_opt > div > span{ display:block; color:var(--ink-2); font-size:.95rem; margin-top:.15rem; max-width:28rem; }   /* R16: antes `.way_opt span` también pisaba los span del botón → texto descentrado */
.way_opt > div > small{ display:block; color:var(--muted); font-size:.85rem; margin-top:.35rem; }
.way_opt .gbtn{ flex:none; }

/* ---------- 7 · FAQ (R16): tablón de notas adhesivas; cada nota se da la vuelta ---------- */
.faq4_hd > div{ position:relative; }
.board{ list-style:none; margin:0; padding:1rem 0 0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(1.25rem, 2.2vw, 2rem); }
.note{ --rot:-2deg; perspective:1100px; }
.note:nth-child(4n+2){ --rot:1.6deg; } .note:nth-child(4n+3){ --rot:-1deg; margin-top:1.5rem; } .note:nth-child(4n){ --rot:2.4deg; }
.note:nth-child(4n+1){ margin-top:.5rem; } .note:nth-child(4n+2){ margin-top:2rem; }
.note_card{ position:relative; display:grid; min-height:17rem; transform-style:preserve-3d; rotate:var(--rot); transition:transform .8s cubic-bezier(.3,1.35,.45,1), rotate .5s cubic-bezier(.3,1.6,.45,1), translate .5s cubic-bezier(.3,1.6,.45,1); }
.note:hover .note_card{ rotate:0deg; translate:0 -6px; }
.note.is-flipped .note_card{ transform:rotateY(180deg); rotate:0deg; }
.note_front{ transition:visibility 0s .22s; }
.note_back{ visibility:hidden; transition:visibility 0s .22s; }
.note.is-flipped .note_front{ visibility:hidden; }
.note.is-flipped .note_back{ visibility:visible; }
/* sin backface-visibility: con ella Chrome no deja pulsar la cara trasera (hit-test la trata como oculta); las caras se cambian a mitad del giro */
.note_face{ grid-area:1 / 1; position:relative; display:flex; flex-direction:column; padding:1.6rem 1.4rem 1.3rem; border-radius:.35rem .35rem .35rem 1.6rem; background:var(--c); color:var(--ink); text-align:left;
  box-shadow:0 1px 1px rgba(17,29,42,.08), 0 18px 30px -18px rgba(17,29,42,.35), inset 0 -40px 60px -50px rgba(0,0,0,.18); }
/* celo arriba */
.note_face::before{ content:""; position:absolute; top:-.7rem; left:50%; width:5.5rem; height:1.5rem; margin-left:-2.75rem; rotate:-3deg; background:rgba(255,255,255,.55); box-shadow:0 1px 2px rgba(17,29,42,.12); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  -webkit-mask:linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)); }
/* papel: esquina doblada abajo a la izquierda + grano */
.note_face::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.35; mix-blend-mode:multiply; background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.note_front{ cursor:pointer; gap:.7rem; width:100%; border:0; font:inherit; }
.note_n{ font-family:var(--display); font-size:.95rem; opacity:.55; }
.note_q{ font-family:var(--display); font-size:clamp(1.25rem, 1.6vw, 1.45rem); line-height:1.15; letter-spacing:-.015em; text-wrap:balance; }
.note_hint{ margin-top:auto; font-size:.8rem; font-weight:600; opacity:.55; transition:opacity .2s; }
.note_front:hover .note_hint{ opacity:.9; }
.note_s{ position:absolute; right:.9rem; bottom:.85rem; width:3.1rem; height:auto; rotate:10deg; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); transition:transform .55s cubic-bezier(.3,1.8,.45,1); }
.note_front:hover .note_s{ transform:scale(1.18) rotate(-14deg); }
.note_front:focus-visible, .note_flip:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.note_back{ transform:rotateY(180deg); justify-content:space-between; gap:1rem; background:color-mix(in oklab, var(--c) 30%, #fffdf6); }
.note_back::after{ opacity:.22; }
.note_back p{ margin:0; font-family:var(--serif); font-size:1rem; line-height:1.5; color:var(--ink-2);
  background:repeating-linear-gradient(transparent 0 calc(1.5em - 1px), rgba(79,28,248,.12) calc(1.5em - 1px) 1.5em); }
.note_back{ box-shadow:0 1px 1px rgba(17,29,42,.08), 0 18px 30px -18px rgba(17,29,42,.35), inset 4px 0 0 var(--c); }
.note_flip{ align-self:flex-start; font-weight:600; font-size:.82rem; color:var(--brand); padding:.3rem 0; }

/* ---------- 8 · Final (R16): CTA + footer en una escena — colinas del patio y la tarjeta posada sobre un montón de stickers ---------- */
.endx{ position:relative; margin-top:clamp(6rem, 10vw, 9rem); overflow-x:clip; }
.endx_cta{ position:relative; z-index:3; text-align:center; }
.endx_cta .wrap{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.endx_cta .h2x{ max-width:none; font-size:clamp(2.6rem, 6.2vw, 5.6rem); line-height:.98; letter-spacing:-.04em; }
.endx_cta > .wrap > p{ margin:0; max-width:34rem; color:var(--ink-2); font-size:clamp(1.05rem, 1.3vw, 1.2rem); }
.endx_cta .hero5_ctas{ justify-content:center; margin-top:.6rem; }
.endx .pg{ position:relative; display:inline-block; color:var(--brand); white-space:nowrap; }
.endx .pg::after{ content:""; position:absolute; left:-1%; right:-1%; bottom:-.2em; height:.24em;   /* R16b: los dos trazos de la web original, en el color de la palabra */
  background:url(../img/line-top-fit.svg) 0 0 / 100% 42% no-repeat, url(../img/underline-bottom-fit.svg) 58% 100% / 66% 38% no-repeat;
  clip-path:inset(0 var(--sq, 0%) 0 0); transition:clip-path 1.1s cubic-bezier(.6,0,.2,1); }
.endx_world{ position:relative; margin-top:clamp(-1rem, -2vw, 0rem); padding-top:clamp(15rem, 30vw, 27rem); }
.endx_hills{ position:absolute; left:0; top:0; width:100%; height:clamp(20rem, 38vw, 34rem); overflow:visible; }
.endx_hills image{ filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.25)); }
.endx_ground{ position:absolute; left:0; right:0; top:calc(clamp(20rem, 38vw, 34rem) - 2px); bottom:0; background:linear-gradient(180deg, #6a3cf6 0%, #5a2cf0 40%, #4a1fd6 100%); }
/* el montón: posiciones relativas al borde superior de la tarjeta */
.endx_pit{ position:absolute; z-index:1; left:0; right:0; top:clamp(15rem, 30vw, 27rem); height:0; }
.endx_pit img{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:auto; margin-left:calc(var(--s) / -2); rotate:var(--r); cursor:grab; touch-action:none;
  filter:drop-shadow(0 3px 3px rgba(20,0,80,.35)); transition:scale .45s cubic-bezier(.3,1.8,.45,1); }
.endx_pit img:hover{ scale:1.14; }
.endx_pit img:active{ cursor:grabbing; }
.footx2{ position:relative; z-index:2; width:min(1240px, 100% - 3rem); margin:0 auto; padding:clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) 1.75rem; border-radius:2.25rem 2.25rem 0 0; background:#fff; font-size:.95rem;
  box-shadow:0 -30px 60px -40px rgba(20,0,80,.5); }
.footx2_top{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:3rem; }
.footx_brand img{ width:9.5rem; height:auto; }
.footx_brand p{ margin:1rem 0 .4rem; color:var(--ink-2); }
.footx_cols{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2rem; }
.footx_cols h3{ margin:0 0 .9rem; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.footx_cols a{ display:block; width:max-content; max-width:100%; padding:.28rem 0; color:var(--ink-2); transition:color .25s var(--ease), translate .35s var(--ease); }
.footx_cols a:hover{ color:var(--ink); translate:2px 0; }   /* R16d: hover sutil, sin subrayado ondulado */
.footx_road{ position:relative; height:3.2rem; margin-top:2.5rem; border-bottom:2px dashed rgba(17,29,42,.14); container-type:inline-size; }
.skater{ position:absolute; left:0; bottom:-2px; height:3.4rem; width:auto; image-rendering:pixelated; animation:skate 14s linear infinite; }
@keyframes skate{ from{ transform:translateX(-5rem); } to{ transform:translateX(calc(100cqw + 1rem)); } }
.footx_b{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.25rem; color:var(--muted); font-size:.85rem; }
.footx_b span:last-child{ display:flex; gap:1.25rem; }
.footx_b a:hover{ color:var(--ink); }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .tex::after, .pcard_in::after, .stk.is-sec .stk_tilt, .seal_spin, .skater, .way_row i{ animation:none; }
  .endx_bus{ display:none; }
  .bn:hover, .pledge:hover{ transform:none; }
  .note_card{ transition:none; }
  .note.is-flipped .note_card{ transform:none; }
  .note.is-flipped .note_front{ visibility:hidden; }
  .note_back{ transform:none; visibility:hidden; }
  .note.is-flipped .note_back{ visibility:visible; }
  .t3_live i, .t3_spin::before, .t3_pop li.is-wait i::before{ animation:none; }
}

/* ---------- responsive ---------- */
@media (min-width: 1024px) and (max-width: 1279px){
  .hp{ width:calc(100vw - 7rem); gap:1.75rem; }
  .bn_art{ min-height:18rem; }
  .t3_pop{ left:45%; }   /* R24: a 36% tapaba el título "My students" de la ventana */
}
@media (max-width: 1023px){
  .sec_hd.is-split{ grid-template-columns:1fr; }
  .bn.is-1, .bn.is-2, .bn.is-3, .bn.is-4{ grid-column:1 / -1; }
  .bn_art{ min-height:16rem; }
  .hs_nav{ display:none; }
  .hs_view{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .hs_view::-webkit-scrollbar{ display:none; }
  .hs_track{ padding-inline:1.25rem; gap:.9rem; }
  .hp{ width:84vw; grid-template-columns:1fr; gap:1.25rem; scroll-snap-align:center; }
  .hp_txt{ padding:0; }
  .hp_tools{ margin-top:1rem; }
  .hp_stage{ min-height:0; padding:1.5rem 1rem; order:-1; }
  .safe4_grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pledge, .pledge.is-wide{ grid-column:span 1; }
  .pledge.is-wide{ grid-column:1 / -1; }
  .proof2_grid{ grid-template-columns:1fr; }
  .quote2, .quote2.is-big{ grid-column:auto; grid-row:auto; }
  .logos{ grid-template-columns:1fr; }
  .logos_n{ padding:2rem 0; border-bottom:1px solid var(--line); }
  .start2_grid{ grid-template-columns:1fr; }
  .board{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .footx2_top{ grid-template-columns:1fr; }
  .footx2{ width:calc(100% - 1.5rem); border-radius:1.75rem 1.75rem 0 0; }
  .endx_pit img:nth-child(odd){ display:none; }
  .endx_pit img{ width:calc(var(--s) * .72); margin-left:calc(var(--s) * -.36); }
  .stk.is-sec{ position:absolute; width:clamp(3.4rem, 14vw, 4.6rem); }
  .t3{ padding:0; }
  .t3_bg{ top:6rem; }
  .t3 > .stk.is-sec{ left:auto !important; right:.4rem; top:-2.6rem !important; }
  .t3_app{ margin:0 .75rem; border-radius:1.2rem 1.2rem 0 0; }
  .t3_me span, .t3_view{ display:none; }
  .t3_body{ grid-template-columns:minmax(0, 1fr); height:auto; background:#fff; }   /* R24: con 1fr la fila de roles (nowrap) ensanchaba la ventana a 477px en móvil */
  .t3_side, .t3_tbl{ -webkit-mask-image:none; mask-image:none; }
  .t3_tbl tbody tr:nth-child(n+5){ display:none; }
  .t3_bar{ box-shadow:none; }
  .t3_app{ box-shadow:0 30px 60px -30px rgba(40,10,120,.35); border-radius:1.2rem; overflow:hidden; }
  .t3_side{ border-right:0; padding:.75rem .75rem 0; }
  .t3_lbl, .t3_nav{ display:none; }
  .t3_roles{ flex-direction:row; overflow-x:auto; scrollbar-width:none; margin-bottom:0; }
  .t3_roles button{ white-space:nowrap; }
  .t3_btns{ display:none; }
  .t3_tbl th:nth-child(1), .t3_tbl td:nth-child(1), .t3_tbl th:nth-child(4), .t3_tbl td:nth-child(4){ display:none; }
  .t3_pop, .t3_pill{ position:relative; top:auto; left:auto; right:auto; width:auto; margin:1rem .75rem 0; }
  .t3_pill{ display:inline-flex; margin-bottom:1.25rem; white-space:normal; }
  .t3_link{ display:none; }
  .t3_tbl td, .t3_tbl th{ padding-inline:.6rem; font-size:.8rem; }
  .t3_tbl td:last-child, .t3_tbl th:last-child{ white-space:normal; }
}
@media (max-width: 640px){
  .safe4_grid{ grid-template-columns:1fr; }
  .pledge, .pledge.is-wide{ grid-column:auto; }
  .logos_g{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .logos_g li{ border-left:0; border-top:1px solid var(--line); min-height:5.5rem; }
  .logos_g li:nth-child(1), .logos_g li:nth-child(2){ border-top:0; }
  .logos_g li:nth-child(even){ border-left:1px solid var(--line); }
  .way_opt{ flex-direction:column; align-items:flex-start; }
  .footx_cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hp_tools{ grid-template-columns:1fr; }
  .board{ grid-template-columns:1fr; gap:1.75rem; }
  .note, .note:nth-child(n){ margin-top:0; }
  .note_card{ min-height:13rem; }
  .faq4_hd .stk.is-sec{ left:auto !important; right:0; top:-1rem !important; }
  /* R24: la manzana asomaba por encima de la tarjeta y tapaba "district." del titular */
  .way.is-edu > .stk.is-sec{ left:auto !important; right:.75rem; top:-1.4rem !important; }
}

@media (max-width: 374px){ .t3_tbl th:nth-child(3), .t3_tbl td:nth-child(3){ display:none; } }   /* R24: a 320px la tabla de Team no cabía ni con 3 columnas */

@media (prefers-reduced-motion: reduce){ .toast2{ opacity:1 } }

/* R20: redes del footer (las mismas que playgroundiep.com), en tinta y sutiles como el resto del pie */
.footx_socs{ display:flex; gap:.35rem; margin-top:1rem; }
.footx_soc{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:.6rem; color:var(--ink-2); transition:color .2s, background-color .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.footx_soc svg{ width:1.05rem; height:1.05rem; }
.footx_soc:hover{ color:var(--ink); background:rgba(17,29,42,.06); transform:translateY(-2px); }

/* R25d (móvil): radios concéntricos — radio interior = radio exterior − separación, con la misma separación arriba y a los lados
   donde el hijo se pega a la esquina. Medido con un script que recorre pares padre/hijo redondeados (antes 18/24 con 12 y 20 px de hueco). */
@media (max-width: 640px){
  .pcard_in{ padding:.75rem .75rem 1.25rem; }
  .pcard_win, .pcard_win .win{ border-radius:calc(var(--card-r) - .75rem); }                      /* 24 − 12 = 12 */
  .bn_art{ border-radius:calc(1.75rem - .55rem); }                                                  /* 28 − 9 = 19 */
  .hp_stage{ padding:1rem; }
  .hp_ui, .hp_ui.ui{ border-radius:calc(1.75rem - 1rem); }                                          /* 28 − 16 = 12 */
  .pl_ui{ margin:-.5rem -.5rem 0; border-radius:calc(1.6rem - .75rem); }                             /* 25,6 − 12 */
  .t3_pop{ padding:.55rem; border-radius:1.25rem; }
  .t3_pop_h, .t3_pop ul{ border-radius:calc(1.25rem - .55rem); }                                    /* 20 − 9 = 11 */
  /* la tarjeta morada enmascara el producto: la ventana acaba DENTRO del panel, con el mismo hueco abajo que a los lados */
  .t3{ padding-bottom:.75rem; }
  .t3_app{ margin:0 .75rem; border-radius:calc(2.25rem - .75rem); }                                 /* 36 − 12 = 24 */
}