/* ==========================================================================
   Home v5 — capa sobre home-v3.css. Ronda 6: hero centrado con stickers de vinilo, el producto entra por la izquierda
   empujando el hero, pila con la mecánica de Hosier Brown, cursor "View more", CTAs divertidos, menú que se abre como "about".
   ========================================================================== */
:root{ --T:5.5rem; --card-h:calc(100vh - 7rem); --card-r:1.5rem; }

/* ---------- CTAs playful (más pequeños que la referencia) ---------- */
.pbtn, .gbtn{ position:relative; display:inline-flex; height:3.25rem; border-radius:.9rem; isolation:isolate; -webkit-tap-highlight-color:transparent; }
.pbtn_face, .gbtn_face{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.55rem; height:100%; padding:0 1.6rem; border-radius:inherit; font-weight:600; font-size:1.05rem; letter-spacing:-.01em; white-space:nowrap; transform-origin:50% 100%; }
.pbtn_face{ background:var(--brand); color:#fff;
  box-shadow:inset 6px 6px 6px -3px rgba(255,255,255,.28), inset -6px -6px 6px -3px rgba(30,0,140,.3), 0 10px 24px -12px rgba(79,28,248,.6); }
.gbtn_face{ background:#fff; color:var(--ink); border:1px solid rgba(17,29,42,.14);
  box-shadow:inset 5px 5px 6px -3px #fff, inset -5px -5px 6px -3px rgba(17,29,42,.08), 0 8px 20px -14px rgba(17,29,42,.35); }
/* hover divertido: el botón hace "gelatina" y un dino se asoma por detrás (primario) / el texto rueda y el calendario salta (secundario) */
.pbtn_peek{ position:absolute; z-index:0; width:3rem; right:1rem; top:.1rem; transform:translateY(0) rotate(0) scale(.8); transition:transform .35s var(--ease); pointer-events:none; }
.pbtn:hover .pbtn_peek, .pbtn:focus-visible .pbtn_peek{ transform:translateY(-66%) rotate(-10deg); transition:transform .55s cubic-bezier(.28,1.9,.45,1); }
.pbtn:hover .pbtn_face, .gbtn:hover .gbtn_face{ animation:jelly .62s both; }
.pbtn:active .pbtn_face, .gbtn:active .gbtn_face{ transform:scale(.96, .92); animation:none; }
@keyframes jelly{ 0%{transform:scale(1,1)} 22%{transform:scale(1.08,.88)} 44%{transform:scale(.95,1.07)} 64%{transform:scale(1.03,.97)} 82%{transform:scale(.99,1.01)} 100%{transform:scale(1,1)} }
.gbtn_roll{ display:inline-block; height:1.3em; line-height:1.3em; overflow:hidden; }
.gbtn_roll i{ display:block; font-style:normal; text-shadow:0 1.3em 0 currentColor; transition:transform .45s cubic-bezier(.5,1.6,.4,1); }
.gbtn:hover .gbtn_roll i{ transform:translateY(-1.3em); }
.gbtn_cal{ display:inline-block; font-size:1rem; transition:transform .5s cubic-bezier(.28,1.9,.45,1); }
.gbtn:hover .gbtn_cal{ transform:translateY(-3px) rotate(-14deg) scale(1.2); }
.pbtn:focus-visible, .gbtn:focus-visible{ outline:none; }
.pbtn:focus-visible .pbtn_face, .gbtn:focus-visible .gbtn_face{ outline:3px solid var(--brand); outline-offset:3px; }

/* ---------- intro: hero centrado ---------- */
.intro{ position:relative; }
.hero5{ position:relative; min-height:100vh; display:grid; place-items:center; padding:6.5rem 1.5rem 3rem; }
.hero5_in{ position:relative; z-index:2; text-align:center; max-width:64rem; display:flex; flex-direction:column; align-items:center; gap:1.4rem; pointer-events:none; }
.hero5_in a, .hero5_in .badges{ pointer-events:auto; }
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; font-size:.9rem; color:var(--ink); }
.badges > span{ display:inline-flex; align-items:center; gap:.45rem; height:2.1rem; padding:0 .8rem 0 .35rem; border-radius:999px; background:rgba(255,255,255,.85); font-weight:500;
  box-shadow:0 0 0 1px rgba(17,29,42,.08), 0 6px 16px -10px rgba(17,29,42,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.badges .bk{ display:grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--green); color:#fff; box-shadow:0 0 0 3px var(--green-soft); }
.badges .bk svg{ width:.75rem; height:.75rem; }
.hero5_h1{ font-family:var(--display); font-weight:400; font-size:clamp(2.7rem, 6.1vw, 6.25rem); line-height:.98; letter-spacing:-.035em; }
.morph{ display:block; color:var(--brand); min-height:.98em; }
.morph .w{ display:inline-block; white-space:nowrap; }
.morph .ch{ display:inline-block; will-change:transform, opacity; }
.morph .sp{ display:inline-block; width:.26em; }
.hero5_p{ color:var(--ink-2); font-size:clamp(1.02rem, 1.25vw, 1.2rem); line-height:1.5; max-width:38rem; text-wrap:pretty; }
.hero5_ctas{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem; }

/* ---------- stickers de vinilo (mecánica de la referencia: perspectiva 800, inclinación por velocidad, se levantan) ---------- */
.stickers{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.stk{ position:absolute; left:var(--x); top:var(--y); width:var(--s); rotate:var(--r); perspective:800px; cursor:grab; pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
.stk.is-lifted{ cursor:grabbing; z-index:2; }
.stk_tilt{ position:relative; transform-style:preserve-3d; will-change:transform; }
.stk img{ display:block; width:100%; height:auto; -webkit-user-drag:none;
  filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.3)) drop-shadow(0 5px 7px rgba(17,29,42,.1)); transition:filter .35s var(--ease); }
.stk.is-lifted img{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.16)) drop-shadow(0 24px 22px rgba(17,29,42,.26)); }
.stk_sheen{ position:absolute; inset:0; pointer-events:none; -webkit-mask-size:100% 100%; mask-size:100% 100%;
  background:linear-gradient(118deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.1) 52%, rgba(255,255,255,0) 60%);
  background-size:280% 280%; background-position:var(--sx, 85%) 50%; mix-blend-mode:soft-light; opacity:.9; }

/* ---------- pila de producto ---------- */
.intro_slot, .cards{ width:min(1392px, 100% - 3rem); margin-inline:auto; }
.hero5_h1 .l1{ display:inline-block; }
.hero5_in > *, .hero5_h1 .l1, .morph{ transform-origin:0% 50%; }
.cards{ display:flex; flex-direction:column; gap:.75rem; margin-top:1rem; }
.pcard{ position:relative; border-radius:var(--card-r); overflow:clip; }
.pcard_in{ padding:2rem 2.5rem; box-sizing:border-box; background:linear-gradient(180deg, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; overflow:hidden; }
.pcard_win{ width:min(100%, 60rem); overflow:hidden; border-radius:1.15rem; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); }
.pcard_win.is-narrow{ width:min(100%, 42rem); }
.pcard_win .win{ border-radius:1.15rem; box-shadow:none; }
.pcard_win .chat{ margin:0; max-width:none; }
.pcard_t{ color:#fff; text-align:center; max-width:38rem; }
.pcard_t b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(1.6rem, 2.4vw, 2.3rem); letter-spacing:-.02em; line-height:1.1; margin-bottom:.4rem; }
.pcard_t span{ font-size:1rem; opacity:.85; }
.pcard_link{ position:absolute; inset:0; z-index:4; border-radius:inherit; }
.pcard_link:focus-visible{ outline:3px solid #fff; outline-offset:-8px; box-shadow:inset 0 0 0 8px rgba(17,29,42,.35); }
.has-vcur .pcard_link{ cursor:none; }
.stage .trust{ margin-top:5rem; }

/* escritorio: la mecánica de Hosier Brown (marco que se desplaza + contenido fijo en pantalla) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference){
  .pcard{ height:var(--card-h); }
  /* R9: la pista acaba en el borde inferior del marco → el producto queda fijo mientras entra y, al salir, sube con su marco por detrás del menú */
  .pcard_track{ position:absolute; left:0; right:0; top:-100vh; height:calc(100% + 100vh); }
  .pcard_in{ position:sticky; top:var(--T); height:var(--card-h); }
  .pcard_win{ max-height:56vh; }
  .pcard_win .win{ max-height:56vh; }
  .pcard_win .win.is-app{ height:60vh; min-height:0; }

  /* el producto entra por la izquierda empujando el hero (lo activa el JS; sin JS la página queda apilada) */
  html.push-on .intro{ height:230vh; }
  html.push-on .intro_pin{ position:sticky; top:0; height:100vh; overflow:clip; }
  html.push-on .hero5{ position:absolute; inset:0; min-height:0; }
  html.push-on .intro_slot{ position:absolute; top:var(--T); left:0; right:0; clip-path:inset(0 var(--ci, 0px) round var(--card-r)); will-change:transform; }
  html.push-on .cards{ margin-top:-.75rem; }
  html:not(.push-set).push-on .intro_slot{ visibility:hidden; }
}
@media (min-width: 1024px) and (max-width: 1439px){
  .pcard_win .win{ zoom:.84; }
}
@media (min-width: 1024px) and (max-width: 1439px) and (prefers-reduced-motion: no-preference){
  .pcard_win .win{ max-height:calc(56vh / .84); } /* zoom también escala las longitudes vh */
  .pcard_win .win.is-app{ height:calc(56vh / .84); }
}
@media (min-width: 1024px) and (max-height: 760px){
  .hero5_h1{ font-size:clamp(2.6rem, 5.2vw, 5rem); }
  .hero5_in{ gap:1.1rem; }
}

/* ---------- cursor "View more" ---------- */
.vcur{ position:fixed; left:0; top:0; z-index:300; pointer-events:none; display:inline-flex; align-items:center; gap:.3rem; padding:.34rem .62rem .34rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.62); color:var(--ink); border:1px solid rgba(255,255,255,.7); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  font-weight:500; font-size:.74rem; letter-spacing:0; white-space:nowrap; box-shadow:0 6px 16px -10px rgba(17,29,42,.4); visibility:hidden; }
.vcur svg{ width:.62rem; height:.62rem; opacity:.7; }

/* ---------- nav: barra que se vuelve flotante al hacer scroll + botones coherentes con los CTAs ---------- */
.nav, .nav.is-scrolled, .nav.is-open{ height:auto; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none; }
.nav_in{ pointer-events:auto; width:min(1360px, 100% - 3rem); height:4.25rem; margin:0 auto; padding:0; border:1px solid transparent; border-radius:0; gap:1rem;
  transition:width .6s var(--ease), height .45s var(--ease), margin .45s var(--ease), padding .45s var(--ease), border-radius .5s var(--ease), background-color .35s, box-shadow .45s, border-color .35s; }
.nav.is-scrolled .nav_in, .nav.is-open .nav_in{ width:min(1120px, 100% - 2rem); height:3.6rem; margin-top:.75rem; padding:0 .45rem 0 1rem; border-radius:1.15rem;
  background-color:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border-color:rgba(17,29,42,.08); box-shadow:0 14px 34px -18px rgba(17,29,42,.35), 0 2px 6px -3px rgba(17,29,42,.08); }
.nav_logo{ width:7.6rem; margin-right:.25rem; transition:width .45s var(--ease); }
.nav.is-scrolled .nav_logo{ width:6.9rem; }
.nav_menu{ gap:.35rem; }
.nav_menu{ position:relative; }
.nav_btn{ position:relative; z-index:2; height:2.4rem; padding:0 .9rem; border-radius:.8rem; background:transparent; border:0; box-shadow:none; font-weight:500; color:var(--ink); transition:color .2s; }
@media (min-width: 1024px) and (max-width: 1119px){ .nav_menu{ gap:0; } .nav_btn{ padding:0 .6rem; font-size:.875rem; } }   /* R24: a 1024 las 5 opciones se partían en dos líneas */
.nav_btn{ white-space:nowrap; }
.nav_btn:hover{ background:transparent; }
.nav_item.is-open .nav_btn{ background:transparent; color:var(--brand-ink); }
/* fondo que se desliza entre opciones (nav y megamenú comparten el mismo gesto) */
.nav_hl, .mega_hl{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; border-radius:.8rem; background:rgba(17,29,42,.06); will-change:transform, width, height; }
.mega_hl{ background:var(--brand-soft); border-radius:.85rem; }
.nav_right{ gap:.4rem; }
.pbtn.is-sm, .gbtn.is-sm{ height:2.5rem; border-radius:.8rem; }
.pbtn.is-sm .pbtn_face, .gbtn.is-sm .gbtn_face{ padding:0 1.05rem; font-size:.94rem; }
.pbtn.is-sm .pbtn_peek{ width:2.3rem; right:.6rem; }
.nav .pbtn:hover .pbtn_peek{ transform:translateY(-58%) rotate(-10deg); }

/* ---------- menú: se abre como "about" (punto que cae y se transforma en la tarjeta), conservando el color claro ---------- */
html.morph-nav .mega{ isolation:isolate; background:transparent; border:0; box-shadow:none; opacity:1; transform:none; transition:none; visibility:hidden; top:calc(100% + .7rem); }
html.morph-nav .mega_bg{ position:absolute; inset:0; z-index:-1; background:#fff; border-radius:1.25rem; box-shadow:0 0 0 1px rgba(17,29,42,.08), 0 30px 60px -20px rgba(17,29,42,.28), 0 4px 16px -6px rgba(17,29,42,.08); will-change:transform; }
.nav.is-scrolled .mega{ top:calc(100% + 1rem); }
.mega_link, .mega_mini, .ms_rec, .ms_card, .ms_btn, .mega_foot .link{ position:relative; z-index:2; }
.mega_link:hover, .mega_mini:hover{ background:transparent !important; }
.mega_link i{ background:#fff; border:0; color:var(--brand); box-shadow:0 0 0 1px rgba(79,28,248,.14); transition:background .2s, color .2s, box-shadow .2s; }
.mega_link i svg{ width:1.1rem; height:1.1rem; }
.mega_link:hover i, .mega_mini:hover i{ background:var(--brand); color:#fff; box-shadow:none; }
.mega_mini{ display:flex !important; align-items:center; gap:.6rem; padding:.42rem .3rem !important; border-radius:.6rem; }
.mega_mini i{ flex:none; width:1.75rem; height:1.75rem; border-radius:.5rem; display:grid; place-items:center; background:#fff; color:var(--brand); box-shadow:0 0 0 1px rgba(17,29,42,.08); transition:background .15s, color .15s; }
.mega_mini i svg{ width:.95rem; height:.95rem; }
.mega_mini.is-plain{ padding:.5rem .6rem !important; font-weight:500; }
html.morph-nav .mega::before{ content:""; position:absolute; left:0; right:0; top:-1.1rem; height:1.1rem; }  /* puente para el hover */
.mega_foot .link{ padding:.3rem .55rem; border-radius:.6rem; }
.mega.is-1 .mega_mini i{ background:var(--brand-soft); box-shadow:none; }
.mega.is-1 .mega_mini:hover i{ background:var(--brand); color:#fff; } /* R9: la regla de arriba era más específica que el hover */

/* ---------- móvil / tablet ---------- */
@media (max-width: 1023px){
  .hero5{ min-height:0; padding:6.5rem 1.25rem 2.5rem; }
  .stickers{ position:static; display:flex; justify-content:center; gap:.4rem; margin-top:1.5rem; }
  .stk{ position:static; width:clamp(3.4rem, 15vw, 4.6rem); cursor:default; touch-action:auto; }
  .hero5{ display:flex; flex-direction:column; }
  .pcard_in{ padding:2rem 1rem; }
  .pcard_link{ z-index:4; }
}
@media (max-width: 640px){
  .hero5_h1{ font-size:clamp(2.4rem, 11vw, 3.2rem); }
  .pcard_in{ padding:1.25rem .75rem; }
  .hero5_ctas{ width:100%; }
  .hero5_ctas .pbtn, .hero5_ctas .gbtn{ flex:1 1 100%; }
  .hero5_ctas .pbtn_face, .hero5_ctas .gbtn_face{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .pbtn:hover .pbtn_face, .gbtn:hover .gbtn_face{ animation:none; }
  .pbtn_peek, .gbtn_roll i, .gbtn_cal{ transition:none; }
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- R7: sticker en WebGL (papel que se despega) ---------- */
.stk_gl{ position:absolute; display:block; pointer-events:none; filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.28)) drop-shadow(0 5px 7px rgba(17,29,42,.08)); transition:filter .35s var(--ease); }
.stk.is-gl img, .stk.is-gl .stk_sheen{ opacity:0; }
.stk.is-gl.is-lifted .stk_gl{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.14)) drop-shadow(0 26px 24px rgba(17,29,42,.24)); }

.gbtn.nav_login{ padding:0; }
@media (max-width: 1023px){
  .nav_in, .nav.is-scrolled .nav_in, .nav.is-open .nav_in{ width:calc(100% - 1rem); }
  .nav.is-open .sheet{ pointer-events:auto; inset:5rem .5rem auto .5rem; border-radius:1.15rem; max-height:calc(100vh - 6rem); box-shadow:0 20px 40px -20px rgba(17,29,42,.35); }
}
html.morph-nav .mega:not(.is-2):not(.is-1){ grid-template-columns:1fr 1fr 13.5rem; width:61rem; }
html.morph-nav .mega.is-2{ grid-template-columns:1fr 14rem; width:41rem; }
html.morph-nav .mega.is-1{ width:15rem; }
@media (max-width: 1023px){ .gbtn.nav_login{ display:none; } }
@media (max-width: 1023px){ .sheet .ctas .btn{ display:flex; justify-content:center; width:100%; padding:0 1.35rem; color:#fff; } }

.mega_side a:hover{ color:inherit; }

/* ---------- R8: piezas de producto superpuestas (se entiende qué hace cada pantalla) ---------- */
.pstage{ position:relative; width:min(100%, 60rem); display:flex; justify-content:center; }
.pstage .pcard_win{ width:100%; }
.pstage:has(.is-narrow){ width:min(100%, 42rem); }
.frag{ position:absolute; z-index:3; width:15.5rem; padding:.8rem .9rem; border-radius:.95rem; background:#fff; color:var(--ink); font-size:.78rem; line-height:1.35;
  box-shadow:0 0 0 1px rgba(17,29,42,.06), 0 26px 50px -20px rgba(8,12,30,.5), 0 6px 14px -8px rgba(8,12,30,.2); will-change:transform; }
.frag b{ font-weight:600; }
.frag small{ display:block; color:var(--muted); font-size:.7rem; margin-top:.1rem; }
.frag_h{ display:flex; align-items:center; gap:.4rem; font-weight:600; font-size:.74rem; margin-bottom:.55rem; }
.frag_k{ margin-left:auto; font-weight:500; color:var(--muted); font-size:.68rem; }
.frag_dot{ width:.45rem; height:.45rem; border-radius:50%; background:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.18); }
.frag_row{ display:grid; grid-template-columns:1.5rem 1fr auto; grid-template-rows:auto auto; column-gap:.5rem; align-items:center; padding:.38rem 0; border-top:1px solid var(--line); }
.frag_row .av{ grid-row:1 / span 2; width:1.5rem; height:1.5rem; font-size:.55rem; }
.frag_row span:not(.av){ grid-column:2; color:var(--muted); font-size:.7rem; }
.frag_row em{ grid-column:3; grid-row:1 / span 2; font-style:normal; font-weight:600; font-size:.7rem; color:var(--ink-2); background:var(--surface); border-radius:.4rem; padding:.15rem .4rem; }
.frag_row em.late{ color:#c2272d; background:#fdecec; }
.frag_stu{ display:flex; align-items:center; gap:.55rem; }
.frag_stu .av{ width:2.1rem; height:2.1rem; font-size:.7rem; }
.frag_tags{ display:flex; gap:.3rem; margin:.55rem 0; }
.frag_tags .tag.green{ background:var(--green-soft); color:var(--green-text); }
.frag_meter{ display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; font-size:.7rem; color:var(--muted); }
.frag_meter i{ height:.35rem; border-radius:9px; background:var(--surface); overflow:hidden; }
.frag_meter i b{ display:block; height:100%; width:72%; border-radius:inherit; background:linear-gradient(90deg, var(--brand), #8f6bff); }
.frag_meter em{ font-style:normal; font-weight:600; color:var(--ink); }
.doclab{ display:inline-grid; place-items:center; height:1.15rem; padding:0 .3rem; border-radius:.3rem; background:#fdecec; color:#c2272d; font-size:.56rem; font-weight:700; letter-spacing:.02em; }
.doclab.is-doc{ background:#e8f0ff; color:#2456d8; }
.frag_lines{ display:flex; flex-direction:column; gap:.38rem; padding:.2rem 0 .5rem; }
.frag_lines i{ display:block; height:.32rem; border-radius:9px; background:#eceef2; }
.frag_mark{ display:inline; font-size:.72rem; line-height:1.5; padding:.05rem .1rem; background:linear-gradient(transparent 55%, rgba(47,158,91,.28) 55%) no-repeat 0 0 / 100% 100%; }
.frag_src{ display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.5rem; }
.frag_src .n, .frag .chip .n{ display:inline-grid; place-items:center; width:1.05rem; height:1.05rem; border-radius:.3rem; background:var(--green-soft); color:var(--green-text); font-weight:700; font-size:.62rem; }
.f-badge, .f-toast{ display:flex; align-items:center; gap:.6rem; width:auto; padding:.65rem .9rem .65rem .7rem; }
.frag_check{ flex:none; display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--green); color:#fff; font-size:.8rem; font-weight:700; box-shadow:0 0 0 4px var(--green-soft); }
.f-toast em{ font-style:normal; margin-left:.4rem; font-weight:600; color:var(--brand); font-size:.74rem; }
.frag_file{ display:flex; align-items:center; gap:.5rem; padding:.42rem .5rem; margin-top:.3rem; border-radius:.55rem; background:var(--surface); font-weight:500; }
.frag_quote{ font-family:var(--serif, Georgia, serif); font-size:.86rem; line-height:1.45; margin:0 0 .45rem; background:linear-gradient(transparent 60%, rgba(79,28,248,.16) 60%) no-repeat 0 0 / 100% 100%; }
.frag_k2{ font-size:.68rem; color:var(--muted); }
.f-chart{ width:17rem; }
.f-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.f-chart .aim{ stroke:#c9ced8; stroke-width:1.5; stroke-dasharray:4 4; fill:none; }
.f-chart .line{ stroke:var(--brand); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.f-chart circle{ fill:var(--brand); stroke:#fff; stroke-width:2.5; }
.frag_leg{ display:flex; gap:.7rem; align-items:center; font-size:.68rem; color:var(--muted); margin-top:.35rem; }
.frag_leg i{ display:inline-block; width:.8rem; height:.18rem; border-radius:2px; margin-right:.3rem; vertical-align:middle; background:var(--brand); }
.frag_leg i.a{ background:#c9ced8; }
.frag_leg b{ margin-left:auto; color:var(--green-text); }
.f-cal{ width:14.5rem; }
.frag_wd, .frag_cal{ display:grid; grid-template-columns:repeat(7, 1fr); gap:.15rem; text-align:center; }
.frag_wd i{ font-style:normal; font-size:.6rem; color:var(--muted); }
.frag_cal i{ position:relative; font-style:normal; font-size:.66rem; padding:.24rem 0; border-radius:.35rem; color:var(--ink-2); }
.frag_cal i.today{ background:var(--surface); font-weight:600; }
.frag_cal i.pill{ background:var(--brand); color:#fff; font-weight:600; }
.frag_cal i.pill em{ position:absolute; left:50%; top:-.95rem; transform:translateX(-50%); font-style:normal; font-size:.55rem; font-weight:700; color:var(--brand); background:#fff; border-radius:.3rem; padding:0 .25rem; box-shadow:0 2px 6px -2px rgba(0,0,0,.25); }
.frag_evt{ display:flex; align-items:center; gap:.45rem; margin-top:.55rem; padding:.45rem .5rem; border-radius:.55rem; background:var(--brand-soft); color:var(--brand-ink); font-weight:500; font-size:.7rem; }
.frag_evt i{ width:.18rem; align-self:stretch; border-radius:2px; background:var(--brand); }
/* colocación: siempre montadas sobre un borde de la ventana */
.f-deadlines{ right:-5.5rem; top:12%; }
.f-student{ left:-5rem; bottom:9%; }
.f-doc{ left:-6rem; top:20%; width:16.5rem; }
.f-badge{ right:-4rem; bottom:12%; }
.f-files{ right:-9rem; top:12%; width:14rem; }
.f-cite{ left:-13rem; bottom:-2%; width:15rem; }   /* R18: historial de chats; más abajo para no tapar la respuesta */
.f-chart{ left:-6rem; top:-6%; }
.f-toast{ right:-4.5rem; bottom:10%; }
.f-cal{ right:-6rem; top:-4%; }
.f-toast.is-left{ right:auto; left:-5rem; bottom:8%; }
@media (min-width: 1024px) and (max-width: 1439px){ .frag{ zoom:.84; } }
@media (min-width: 1024px) and (max-width: 1179px){ .pstage, .pstage:has(.is-narrow){ width:min(100% - 6rem, 42rem); } .pstage:not(:has(.is-narrow)){ width:min(100% - 6rem, 60rem); } .f-cite{ left:-10rem; } }   /* R24: a 1024–1112 las piezas se salían hasta 41px de la tarjeta y quedaban cortadas */
@media (max-width: 1023px){ .frag{ display:none; } .pstage{ width:100%; } }

/* ---------- R8: fondo del hero con profundidad — suelo de cuaderno en perspectiva que avanza + luz de horizonte + grano ---------- */
.intro_pin{ position:relative; }
.hero5{ z-index:1; }
.intro_slot{ position:relative; z-index:2; } /* la tarjeta siempre por encima del hero (si no, el hero transparente se come el ratón) */
.hero_bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 45%, #fff 92%), radial-gradient(120% 90% at 50% 34%, #ffffff 0%, #f8f7fc 52%, #eeebf8 100%); } /* R9: acaba en blanco → sin corte cuando la intro se va */
.hero_horizon{ position:absolute; left:4%; right:4%; top:calc(86% - 90px); height:180px; /* R12: antes 1px + box-shadow → la sombra no se pinta bajo la caja y quedaba una raya */
  background:radial-gradient(50% 50% at 50% 50%, rgba(150,115,255,.2) 0%, rgba(150,115,255,.09) 45%, rgba(150,115,255,0) 100%); }
.hero_grain{ position:absolute; inset:0; opacity:.07; mix-blend-mode:multiply; -webkit-mask-image:linear-gradient(#000 45%, transparent 90%); mask-image:linear-gradient(#000 45%, transparent 90%);   /* R16c: el grano también acaba en blanco → sin corte al irse la intro */
  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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 1023px){ .hero_horizon{ display:none; } }

#card-draft #dpop-c{ display:none; } /* R8: la pieza del PDF superpuesta ya enseña la fuente */
.frag_cal i.pill em{ display:none; }

/* ---------- R9: pista escrita a mano junto al T-rex ---------- */
.stk_hint{ position:absolute; left:calc(6% + 1rem); top:calc(16% + 7.6rem); width:6.6rem; height:auto; color:var(--ink-2); opacity:.72; rotate:-5deg; pointer-events:none; }
@media (max-width: 1023px){ .stk_hint{ display:none; } }

/* ---------- R20b: carga — el cohete-cera despega. Sustituye al "hoyo en uno" (R10–R11, ~5 s, "too much").
   Es el PNG oficial del logo partido en capas (a ≤320 px de ancho su resolución nativa basta para retina): el wordmark se queda,
   el cohete despega pintando una estela de cera (el cohete ES una cera) y la pantalla sube tras él con la curva de Safe. ---------- */
.loader{ display:none; }
html.is-loading{ overflow:hidden; }
html.is-loading .loader{ display:block; position:fixed; inset:0; z-index:1000; cursor:pointer; }
.ld_panel{ position:absolute; inset:0; background:#eee9ff; }   /* R20d: el lila de la carga original de playgroundiep.com (antes #f6f5fb ≈ el blanco de la web) */
/* R20d: franjas de la carga original (azul, rosa, melocotón, cian; mismos colores exactos) que suben en cascada tras el cohete,
   cruzan la pantalla y salen por arriba: detrás de la última aparece la web (el original acababa en blanco → blanco a blanco).
   Cada franja lleva la curva de Safe (dos círculos de 400vw intersecados) arriba y abajo. Estado por defecto: fuera, debajo. */
.ld_bands{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ld_bands i{ position:absolute; inset:0; display:block; background:var(--c); visibility:hidden; will-change:transform; --arc:400vw;   /* reposo invisible SIN transform: GSAP sumaba el translateY(100%) del CSS a su yPercent */
  -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; }
.ld_logo{ position:absolute; left:50%; top:50%; width:clamp(200px, 26vw, 320px); aspect-ratio:640 / 220; margin:0; translate:-50% -50%;
  animation:ld-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ld-in{ from{ opacity:0; translate:-50% calc(-50% + 12px); } }
/* capa de sprite: --x --y --w --h en píxeles del PNG oficial (640×220) */
.ld_sprite{ position:absolute; display:block; left:calc(var(--x) / 640 * 100%); top:calc(var(--y) / 220 * 100%); width:calc(var(--w) / 640 * 100%); height:calc(var(--h) / 220 * 100%);
  background:url(../img/playground-transparent-logo-black-1.png) no-repeat; background-size:calc(640 / var(--w) * 100%) calc(220 / var(--h) * 100%);
  background-position:calc(var(--x) / (640 - var(--w)) * 100%) calc(var(--y) / (220 - var(--h)) * 100%); }
.ld_word{ --x:84.5; --y:0; --w:555.5; --h:220; }
.ld_logo.is-rocket{ z-index:3; pointer-events:none; }                       /* R20c: capa hermana de la pantalla → no se acelera cuando esta sube */
.ld_rocket, .ld_hover, .ld_boost{ position:absolute; inset:0; display:block; }
.ld_rocket{ transform-origin:6.25% 56%; will-change:transform; }                  /* GSAP: despegue */
/* R20c: la espera vive en CSS (hilo del compositor): no se congela con las tareas largas del arranque de la home, que
   paraban GSAP hasta 0,8 s; y se mueve lo bastante para leerse (antes: parpadeo de 80 ms y temblor de 0,7 px = parecía colgado) */
.ld_hover{ animation:ld-hover 1.3s ease-in-out infinite; will-change:transform; }  /* CSS: flota */
@keyframes ld-hover{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3.5%) rotate(-1.2deg); } }
.ld_boost{ transform-origin:6.25% 85.5%; will-change:transform; }                 /* GSAP: la llama crece al despegar */
.ld_body{ --x:0; --y:28; --w:80; --h:161; }
.ld_flame{ --x:20; --y:188; --w:40; --h:31; transform-origin:50% 0%; animation:ld-flame .34s ease-in-out infinite alternate; will-change:transform; }
@keyframes ld-flame{ 0%{ transform:scale(.9, .72); } 45%{ transform:scale(1.06, 1.18); } 100%{ transform:scale(.94, 1.34); } }
/* estela de cera: sale de la llama hacia arriba; mismo morado que el cohete (#3900f7 al 89 %), bordes rugosos y vetas */
.ld_trail{ position:absolute; z-index:1; left:calc(23.5 / 640 * 100%); width:calc(30 / 640 * 100%); bottom:calc(20 / 220 * 100%); height:160vh;
  transform:scaleY(0); transform-origin:50% 100%; will-change:transform;
  /* R20b-2: la mitad de ancho que el cuerpo (una cera traza una línea, no un bloque), bordes rugosos y se desvanece hacia abajo
     (la estela más antigua se va → no queda un pilar pegado al wordmark). El degradado se estira con scaleY: siempre opaca junto al cohete. */
  -webkit-mask:linear-gradient(#000 0%, #000 22%, rgba(0,0,0,.55) 62%, transparent 100%);
          mask:linear-gradient(#000 0%, #000 22%, rgba(0,0,0,.55) 62%, transparent 100%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 600' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-40%25' y='0' width='180%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45 .009' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .012' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .965 0 0 0 0 .96 0 0 0 0 .984 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Cg filter='url(%23r)'%3E%3Crect x='4' y='-20' width='22' height='640' rx='11' fill='%233900f7' fill-opacity='.89'/%3E%3C/g%3E%3Crect x='3' width='24' height='600' filter='url(%23v)' opacity='.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* ---------- R12: stickers escolares + logo, indicador de scroll ---------- */
.scrollcue{ display:none; }
html.push-on .scrollcue{ position:absolute; left:0; right:0; margin-inline:auto; width:max-content; bottom:1.4rem; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.35rem; color:rgba(17,29,42,.42); font-size:.7rem; font-weight:500; letter-spacing:.04em; text-decoration:none;
  opacity:0; transition:opacity .8s var(--ease), color .2s; }
html.push-on .scrollcue.is-in{ opacity:1; }
html.push-on .scrollcue.is-gone{ opacity:0; pointer-events:none; transition-duration:.25s; }
.scrollcue:hover{ color:rgba(17,29,42,.7); }
.scrollcue_mouse{ position:relative; width:.95rem; height:1.45rem; border-radius:.55rem; box-shadow:inset 0 0 0 1.5px currentColor; }
.scrollcue_mouse i{ position:absolute; left:50%; top:.26rem; width:2px; height:.3rem; margin-left:-1px; border-radius:2px; background:currentColor; animation:cueWheel 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cueWheel{ 0%{ transform:translateY(0); opacity:0; } 25%{ opacity:1; } 65%{ transform:translateY(.36rem); opacity:1; } 100%{ transform:translateY(.36rem); opacity:0; } }
@media (max-height: 700px){ html.push-on .scrollcue{ bottom:.6rem; } }
@media (prefers-reduced-motion: reduce){ .scrollcue_mouse i{ animation:none; } }
@media (max-width: 1023px){
  .stickers{ flex-wrap:wrap; }
  .stk:nth-child(n+6){ display:none; }          /* móvil: T-rex, logo, estrella, manzana */
}

/* ---------- R13: un sticker pegado en la esquina de cada ventana de producto ---------- */
.pstage .stk.is-card{ position:absolute; z-index:5; }       /* por encima de .pcard_link (4): se coge, no abre el producto */
@media (min-width: 1024px) and (max-width: 1439px){ .pstage .stk.is-card{ width:calc(var(--s) * .86); } }
@media (max-width: 1023px){ .pstage .stk.is-card{ position:absolute; left:auto; right:-.6rem; top:-1.4rem; width:clamp(3.2rem, 14vw, 4.4rem); } }

/* ===== R20b: columnas laterales del megamenú con contenido real (antes: 2 enlaces sueltos en una caja alta) ===== */
/* "Get started": la ficha del alumno de muestra arriba y los CTAs abajo → la altura de la columna tiene composición */
.mega_start{ display:flex; flex-direction:column; }
.mega_start .kicker{ margin-bottom:.6rem; }
.ms_card{ background:#fff; border-radius:.7rem; padding:.7rem; box-shadow:0 0 0 1px rgba(17,29,42,.07), 0 6px 14px -8px rgba(17,29,42,.18); }
.ms_stu{ display:flex; align-items:center; gap:.55rem; }
.ms_av{ flex:none; width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size:.66rem; font-weight:700; letter-spacing:.02em; }
.ms_stu b{ display:block; font-size:.84rem; font-weight:600; line-height:1.15; }
.ms_stu small{ display:block; font-size:.72rem; color:var(--muted); }
.ms_docs{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.55rem; font-size:.72rem; font-weight:600; color:var(--green-text); }
.ms_docs::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--green); }
.ms_card p{ margin:.45rem 0 0; font-size:.76rem; line-height:1.4; color:var(--ink-2); }
.ms_ctas{ margin-top:auto; padding-top:.9rem; display:flex; flex-direction:column; gap:.15rem; }
.mega_side .ms_btn{ display:flex; justify-content:center; align-items:center; height:2.4rem; padding:0 .9rem; border-radius:.7rem; background:var(--brand); color:#fff; font-size:.86rem; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px rgba(79,28,248,.55); transition:transform .25s cubic-bezier(.3,1.6,.5,1), background-color .2s; }
.mega_side .ms_btn:hover{ color:#fff; background:var(--brand-ink); transform:translateY(-1px) scale(1.02); }
.ms_ctas .mega_mini.is-plain{ justify-content:center; }

/* Resources: 4 opciones + recomendados reales (1 workshop y 2 posts del blog del cliente) */
html.morph-nav .mega.is-res{ grid-template-columns:1fr 17rem; width:44rem; left:auto; right:-.5rem; }   /* último desplegable: anclado a la derecha de su botón para no salirse */
.mega_recs .kicker{ margin-bottom:.45rem; }
.ms_rec{ display:grid !important; grid-template-columns:2.4rem 1fr; gap:.65rem; align-items:center; padding:.5rem .4rem !important; border-radius:.65rem; }
.ms_cover{ width:2.4rem; height:2.4rem; border-radius:.55rem; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 90% at 20% 15%, color-mix(in oklab, var(--c) 55%, #fff) 0%, var(--c) 60%, color-mix(in oklab, var(--c) 80%, #000) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.ms_cover svg{ width:1.05rem; height:1.05rem; }
.ms_rec small{ display:block; font-size:.68rem; font-weight:600; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; }
.ms_rec b{ display:block; font-size:.82rem; font-weight:500; line-height:1.3; color:var(--ink); }
.mega_side .ms_rec{ font-size:inherit; }