/* ══════════════════════════════════════════════════════════════════
   GRUPO PIA · Home · rediseño «humanizado» (2026-11)
   Portada 1:1 del prototipo de Claude Design (`Grupo PIA v5.dc.html`).
   Cada regla lleva los valores del prototipo; lo que allá era un
   estado de React acá es una clase (en <html> o en la sección).

   Convención de estados:
     · sin clase            → estado FINAL (así se ve sin JS o sin movimiento)
     · html.mov             → hay movimiento: valen los estados iniciales
     · html.built / .ever   → terminó la intro del hero (2,0 s / 3,5 s)
     · .on / .open / .run…  → la sección entró en vista

   Los `:hover` van con !important porque así los generaba el runtime
   del prototipo (y por eso le ganan a una animación en curso).
   ══════════════════════════════════════════════════════════════════ */

/* ── Capas fijas ── */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--fg-rgb),.02) 1px,transparent 1px);background-size:3px 3px}
.prog{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,#8F0D35,#D54563,var(--rose));transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.7);box-shadow:0 0 24px rgba(213,69,99,.5);z-index:130;pointer-events:none;opacity:0;transition:transform .18s ease-out,opacity .3s}
.page{position:relative;z-index:1;overflow-x:clip}
/* El bot (pia.css + assets/bot.js) acá no está desde el arranque: salta al terminar la intro (`ever`, 3,5 s). */
.mov:not(.ever) .bot-w{opacity:0;transform:translateY(40px) scale(.4);pointer-events:none}

/* ── Piezas que se repiten ── */
.k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.k i{width:40px;height:2px;background:#D54563}
.h2{font-weight:700;font-size:clamp(34px,4.4vw,58px);line-height:1;letter-spacing:-.035em;margin:14px 0 0}
.lt{font-weight:300;color:var(--rose)}
.w{max-width:1240px;margin:0 auto;padding:0 24px}

/* ── Menú ── */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;opacity:1;pointer-events:auto;margin-top:0;transition:opacity .7s 0s ease,margin-top .8s 0s cubic-bezier(.2,.7,.2,1);width:min(1080px,calc(100% - 24px))}
.mov:not(.ever) .nav{transition-delay:.3s}
.mov:not(.built) .nav{opacity:0;pointer-events:none;margin-top:-28px}
.nav-in{position:relative;display:flex;align-items:center;gap:6px;padding:7px;border-radius:999px;background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(var(--fg-rgb),.1);box-shadow:0 20px 50px -20px var(--shadow),inset 0 1px 0 rgba(var(--fg-rgb),.06)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:999px;flex:none}
.brand:hover{color:var(--fg)!important}
.brand-i{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(var(--fg-rgb),.12),0 0 24px rgba(213,69,99,.35)}
.brand-i img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.17)}
.brand-t{font-weight:700;font-size:16px;letter-spacing:-.01em}
.links{position:relative;display:flex;gap:2px;margin-left:auto}
.ind{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:rgba(var(--fg-rgb),.1);border:1px solid rgba(var(--fg-rgb),.08);transition:left .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1),opacity .3s;opacity:0;pointer-events:none}
.nl{position:relative;padding:11px 18px;border-radius:999px;font-weight:500;font-size:15px;white-space:nowrap;color:var(--muted);transition:color .3s}
.nl.act{color:var(--fg)}
.nl:hover{color:var(--fg)!important}
.sep{width:1px;height:26px;background:rgba(var(--fg-rgb),.12);margin:0 6px;flex:none}
.cli{padding:11px 16px;border-radius:999px;font-weight:500;font-size:15px;white-space:nowrap;color:var(--rose);border:1px solid rgba(var(--fg-rgb),.3);flex:none;transition:all .3s}
.cli:hover{border-color:var(--rose)!important;background:rgba(var(--fg-rgb),.08)!important;color:var(--fg)!important}
.quo{display:flex;align-items:center;gap:9px;padding:11px 20px 11px 16px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;background:#8F0D35;color:#FFF6F0;flex:none;box-shadow:0 0 30px -6px rgba(213,69,99,.7);transition:all .3s}
.quo:hover{background:#D54563!important;color:#FFF6F0!important;transform:translateY(-1px)!important}
.quo i{width:8px;height:8px;border-radius:50%;background:#F2C6CA;animation:piaPulse 1.8s infinite}

/* ── Hero ── */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.arc{position:absolute;left:50%;border-radius:50%;opacity:1;pointer-events:none}
.a1{top:6vh;width:150vw;height:150vw;border:1px solid rgba(213,69,99,.28);animation:piaArc 14s ease-in-out infinite;transition:opacity 1.6s .75s ease}
.a2{top:13vh;width:170vw;height:170vw;border:1px solid rgba(177,79,232,.22);animation:piaArc 18s ease-in-out -4s infinite;transition:opacity 1.6s 1s ease}
.a3{top:21vh;width:190vw;height:190vw;border:1px solid rgba(232,163,59,.2);animation:piaArc 22s ease-in-out -9s infinite;transition:opacity 1.6s 1.25s ease}
.mov:not(.built) .arc{opacity:0}
.ball{position:absolute;left:50%;top:50%;width:min(86vh,86vw);height:min(86vh,86vw);margin:calc(min(86vh,86vw) / -2) 0 0 calc(min(86vh,86vw) / -2);opacity:0;transform:scale(1.9);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.5,0,.2,1);pointer-events:none}
.mov:not(.built) .ball{opacity:1;transform:scale(1)}
.ball-in{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(213,69,99,.22),rgba(143,13,53,.08) 55%,transparent 72%);animation:piaSpin 60s linear infinite}
.ball-in b{position:absolute;left:50%;top:50%;border-radius:50%}
.bl1{width:100%;height:100%;margin:-50% 0 0 -50%;border:1px solid rgba(224,69,107,.55)}
.bl2{width:78%;height:100%;margin:-50% 0 0 -39%;border:1px solid rgba(177,79,232,.5)}
.bl3{width:54%;height:100%;margin:-50% 0 0 -27%;border:1px solid rgba(232,163,59,.5)}
.bl4{width:28%;height:100%;margin:-50% 0 0 -14%;border:1px solid rgba(224,69,107,.55)}
.bl5{width:100%;height:78%;margin:-39% 0 0 -50%;border:1px solid rgba(232,163,59,.5)}
.bl6{width:100%;height:54%;margin:-27% 0 0 -50%;border:1px solid rgba(224,69,107,.55)}
.bl7{width:100%;height:28%;margin:-14% 0 0 -50%;border:1px solid rgba(177,79,232,.5)}
.ball-in .blv{left:50%;top:0;bottom:0;width:1px;border-radius:0;background:rgba(177,79,232,.5)}
.ball-in .blh{top:50%;left:0;right:0;height:1px;border-radius:0;background:rgba(232,163,59,.5)}
.hero-w{position:relative;flex:1;max-width:1240px;width:100%;margin:0 auto;padding:92px 24px 16px;display:flex;align-items:center;justify-content:center}
.hero-b{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%;transform:none;transition:transform 1.5s cubic-bezier(.65,0,.2,1)}
.mov:not(.built) .hero-b{transform:translateY(var(--sy,0px));transition:none}
.hero h1{font-weight:400;font-size:clamp(18px,5vw,72px);line-height:1.08;letter-spacing:-.03em;margin:0;white-space:nowrap;opacity:1;transition:opacity 1.2s ease}
.mov:not(.ready) .hero h1{opacity:0}
.h1a{display:block;background:linear-gradient(90deg,#E0456B 0%,#B14FE8 52%,#E8A33B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;margin:0 auto;padding-bottom:.06em}
.h1b{display:block;color:var(--fg)}
.hb{opacity:1;transform:none}
.hb1{transition:opacity .9s .8s ease,transform .9s .8s cubic-bezier(.2,.7,.2,1)}
.hb2{transition:opacity .9s 1.1s ease,transform .9s 1.1s cubic-bezier(.2,.7,.2,1)}
.hb3{transition:opacity .9s 1.4s ease,transform .9s 1.4s cubic-bezier(.2,.7,.2,1)}
.mov:not(.built) .hb{opacity:0;transform:translateY(26px)}
.mov:not(.built) .hb3{pointer-events:none}
.sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;margin:22px 0 0;color:var(--muted)}
.sub>span{display:block}
.sub>.rot{height:1.5em;overflow:hidden;color:var(--fg);font-weight:600}
.rot>span{display:block;text-align:center;animation:piaWord .55s cubic-bezier(.2,.7,.2,1) both}
.sub2{font-size:clamp(15px,1.25vw,17px);line-height:1.55;max-width:34em;margin:8px 0 0;color:var(--muted);text-wrap:pretty}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px;align-items:center}
.b1{height:54px;display:flex;align-items:center;padding:0 28px;border-radius:14px;font-weight:600;font-size:16px;white-space:nowrap;background:var(--fg);color:var(--bg);transition:all .3s}
.b1:hover{background:#D54563!important;color:#FFF6F0!important;transform:translateY(-2px)!important}
.b2{height:54px;padding:0 22px 0 11px;border-radius:14px;font-weight:500;font-size:16px;white-space:nowrap;display:flex;align-items:center;gap:12px;border:1px solid rgba(var(--fg-rgb),.2);background:rgba(var(--bg-rgb),.4);transition:all .3s}
.b2:hover{border-color:var(--accent)!important;color:var(--fg)!important}
.b2 i{width:32px;height:32px;border-radius:10px;background:#8F0D35;color:#FFF6F0;display:grid;place-items:center;font-size:11px;padding-left:2px;font-style:normal}

/* ── Problemas ── */
.pains-s{position:relative;padding:clamp(40px,6vh,80px) 0}
.pains{position:relative;max-width:1240px;height:clamp(560px,78vh,720px);margin:0 auto}
.pain{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(1);opacity:1;transition:left 1.1s cubic-bezier(.2,1.3,.4,1),top 1.1s cubic-bezier(.2,1.3,.4,1),transform .9s cubic-bezier(.2,1.3,.4,1),opacity .5s ease;transition-delay:calc(var(--i) * .09s)}
.mov .pains-s:not(.on) .pain{left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;transition-delay:0s}
.pill{animation:piaFloat var(--d) ease-in-out var(--o) infinite;padding:clamp(9px,1.2vw,14px) clamp(14px,1.8vw,22px);border-radius:999px;background:var(--surface);border:1px solid var(--c);box-shadow:0 0 34px -10px var(--c);font-weight:500;font-size:clamp(12px,1.35vw,17px);white-space:nowrap;color:var(--fg);transition:background .3s,transform .3s}
.pill:hover{background:#8F0D35!important;color:#FFF6F0!important;transform:scale(1.08)!important}
.p0{--i:0;--x:15%;--y:16%;--xn:27%;--yn:5%;--d:5s;--o:0s;--c:#E0456B}
.p1{--i:1;--x:41%;--y:9%;--xn:73%;--yn:9%;--d:5.9s;--o:-.7s;--c:#B14FE8}
.p2{--i:2;--x:67%;--y:14%;--xn:27%;--yn:17%;--d:6.8s;--o:-1.4s;--c:#E8A33B}
.p3{--i:3;--x:86%;--y:25%;--xn:71%;--yn:21%;--d:7.7s;--o:-2.1s;--c:#E0456B}
.p4{--i:4;--x:10%;--y:47%;--xn:27%;--yn:29%;--d:5s;--o:-2.8s;--c:#B14FE8}
.p5{--i:5;--x:90%;--y:56%;--xn:73%;--yn:71%;--d:5.9s;--o:-3.5s;--c:#E8A33B}
.p6{--i:6;--x:14%;--y:80%;--xn:27%;--yn:76%;--d:6.8s;--o:-4.2s;--c:#E0456B}
.p7{--i:7;--x:38%;--y:90%;--xn:72%;--yn:83%;--d:7.7s;--o:-4.9s;--c:#B14FE8}
.p8{--i:8;--x:63%;--y:87%;--xn:27%;--yn:88%;--d:5s;--o:-5.6s;--c:#E8A33B}
.p9{--i:9;--x:86%;--y:79%;--xn:73%;--yn:95%;--d:5.9s;--o:-6.3s;--c:#E0456B}
.pain-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.pain-k{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.pain-c h2{font-weight:700;font-size:clamp(44px,8.5vw,128px);line-height:1;letter-spacing:-.045em;margin:10px 0 0;color:var(--fg);text-shadow:0 0 70px rgba(213,69,99,.55)}
.pain-c p{font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:var(--muted);margin:12px 0 0}

/* ── Productos ── */
.prods-s{position:relative;padding:clamp(56px,9vh,110px) 0 clamp(24px,4vh,48px)}
.sec-c{text-align:center}
.sec-c .h2{font-size:clamp(32px,4.4vw,58px)}
.lead{font-size:17px;line-height:1.5;color:var(--muted);margin:14px auto 0;max-width:30em}
.prods{margin-top:clamp(28px,5vh,56px)}
.prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(44px,9vh,96px) 0;border-top:1px solid rgba(var(--fg-rgb),.08)}
.d0{--c:#E0456B;--pi:0s}.d1{--c:#B14FE8;--pi:1s}.d2{--c:#E8A33B;--pi:2s}
.pt{order:0}
.pn{display:flex;align-items:center;gap:14px}
.pn b{font-weight:300;font-size:20px;color:var(--c)}
.pn i{width:120px;height:6px;border-radius:999px;background:var(--c);box-shadow:0 0 22px var(--c);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.mov .prod:not(.on) .pn i{width:36px}
.prod h3{font-weight:700;font-size:clamp(34px,4.6vw,64px);letter-spacing:-.04em;line-height:1;margin:18px 0 0;text-wrap:balance}
.prod .pl{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--muted);margin:18px 0 0;max-width:30em;text-wrap:pretty}
.pb{display:flex;flex-direction:column;gap:16px}
.bw{margin-left:var(--ind);margin-right:0;opacity:1;transform:none;transform-origin:0 50%;transition:opacity .7s ease,transform 1s cubic-bezier(.2,1.25,.4,1);transition-delay:var(--bd)}
.j0{--ind:0px;--by:40px;--bd:.15s;--fd:5.5s;--fo:0s}
.j1{--ind:56px;--by:0px;--bd:.31s;--fd:6.3s;--fo:-1.3s}
.j2{--ind:18px;--by:-40px;--bd:.47s;--fd:7.1s;--fo:-2.6s}
.mov .prod:not(.on) .bw{opacity:0;transform:translate(var(--bx,-90px),var(--by)) scale(.45);transition-delay:0s}
.bub{animation:piaFloat var(--fd) ease-in-out calc(var(--fo) - var(--pi)) infinite;display:flex;align-items:center;gap:16px;padding:14px 28px 14px 14px;border-radius:44px;background:var(--surface);border:1px solid var(--c);box-shadow:0 0 44px -14px var(--c);transition:background .3s}
.bub:hover{background:var(--surface-2)!important}
.bn{width:52px;height:52px;border-radius:50%;background:var(--c);color:#1A0407;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.bx{min-width:0}
.bt{display:block;font-weight:600;font-size:17px;letter-spacing:-.01em}
.bd{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:3px;text-wrap:pretty}

/* ── Valores + Confían ── */
.vals-s{position:relative;min-height:100vh;display:flex;align-items:center}
.vals-w{position:relative;max-width:1240px;width:100%;margin:0 auto;padding:96px 24px 48px}
.vals-h{max-width:760px}
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.val{position:relative;opacity:1;transition:transform var(--od) var(--dl) cubic-bezier(.2,.75,.25,1),opacity .35s var(--dl) ease}
.v0{--od:1.6s;--dl:0s;transform:translateX(0vw) rotate(0deg)}
.v1{--od:1.1s;--dl:2.1s;transform:none}
.v2{--od:1.1s;--dl:1.2s;transform:translateX(0vw)}
.half{transform:translateX(0px);transition:transform 1s var(--dl) cubic-bezier(.3,.9,.3,1)}
.ha{height:100%;clip-path:inset(-30px 49.8% -30px -30px)}
.hbk{position:absolute;inset:0;clip-path:inset(-30px -30px -30px 49.8%)}
.card{position:relative;height:100%;min-height:320px;border-radius:28px;padding:30px;background:var(--surface);border:1px solid rgba(var(--fg-rgb),.08);transition:background .45s,border-color .45s,transform .45s,border-radius .8s 1.1s ease;transform:none;cursor:default;display:flex;flex-direction:column;overflow:hidden}
.mov .vals:not(.open) .val{--dl:0s}
.mov .vals:not(.open) .v0{transform:translateX(-115vw) rotate(-720deg)}
.mov .vals:not(.open) .v2{transform:translateX(115vw)}
.mov .vals:not(.open) .v1{opacity:0}
.mov .vals:not(.open) .v1 .ha{transform:translateX(calc(-50% - 16px))}
.mov .vals:not(.open) .v1 .hbk{transform:translateX(calc(50% + 16px))}
.mov .vals:not(.open) .v0 .card{border-radius:50%}
.mov .vals:not(.open) .card{transition-delay:0s}
.num{font-weight:800;font-size:110px;line-height:.8;letter-spacing:-.05em;color:rgba(213,69,99,.14);position:absolute;right:16px;top:18px;transition:color .45s}
.vk{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.card h3{font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;line-height:1.05;margin:12px 0 0;max-width:9em}
.card p{font-size:16px;line-height:1.5;margin:auto 0 0;padding-top:26px;color:var(--muted);text-wrap:pretty}
.prac{font-size:14.5px;line-height:1.5;font-weight:500;color:var(--rose);max-height:0px;opacity:0;overflow:hidden;transition:max-height .45s,opacity .45s,margin .45s;margin-top:0px}
.val:hover .card{background:var(--surface-2);border-color:#D54563;transform:translateY(-8px)}
.val:hover .num{color:rgba(var(--fg-rgb),.18)}
.val:hover .prac{max-height:120px;opacity:1;margin-top:14px}
.trust{margin-top:56px;padding-top:28px;border-top:1px solid rgba(var(--fg-rgb),.08)}
.tk{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.marq{margin-top:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:40px;width:max-content;margin-left:100%;animation:piaCross 18s linear infinite;padding:6px 0}
.marq:hover .track{animation-play-state:paused}
.cl{display:flex;align-items:center;gap:12px;height:62px;padding:0 26px 0 9px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.1);background:rgba(var(--surface-rgb),.6);transition:all .3s;white-space:nowrap}
.cl:hover{transform:translateY(-3px)!important;border-color:var(--accent)!important;background:var(--surface)!important;color:var(--fg)!important}
.cl b{width:44px;height:44px;border-radius:50%;color:#1A0407;display:grid;place-items:center;font-weight:700;font-size:13px}
.cl span{font-weight:600;font-size:17px}
.c-ij{background:#F2C6CA}.c-fl{background:#D54563}

/* ── Nosotros ── */
.nos{position:relative;padding:clamp(40px,7vh,88px) 16px}
.runner{position:absolute;top:46%;left:-8%;opacity:0;transition:left 2.6s linear,opacity .3s;z-index:3;pointer-events:none}
.nos.run .runner{left:106%}
.nos.run:not(.done) .runner{opacity:1}
.bob{animation:piaBob .36s ease-in-out infinite}
.fig{position:relative;width:48px;height:70px}
.fig b{position:absolute}
.f-pk{left:5px;top:22px;width:15px;height:20px;border-radius:5px;background:#E8A33B}
.nos.drop .runner .f-pk,.thrower .f-pk{opacity:0}
.f-l1,.f-l2{top:42px;width:6px;height:26px;border-radius:3px;background:var(--fg);transform-origin:50% 0}
.f-l1{left:19px}.f-l2{left:25px}
.runner .f-l1{animation:piaLeg .36s ease-in-out infinite}
.runner .f-l2{animation:piaLeg .36s ease-in-out -.18s infinite}
.thrower .f-l1{transform:rotate(8deg)}
.thrower .f-l2{transform:rotate(-8deg)}
.f-bd{left:18px;top:20px;width:15px;height:26px;border-radius:8px;background:#D54563}
.f-ar{left:23px;top:23px;width:5px;height:19px;border-radius:3px;background:#F2C6CA;transform-origin:50% 0}
.runner .f-ar{animation:piaLeg .36s ease-in-out -.18s infinite}
.thrower .f-ar{transform:rotate(-20deg)}
.nos.throw .thrower .f-ar{animation:piaThrow .32s ease-in-out .4s 5}
.f-hd{left:15px;top:0;width:21px;height:21px;border-radius:50%;background:#F2C6CA}
.pack{position:absolute;left:50%;top:calc(46% + 22px);width:20px;height:26px;margin-left:-10px;border-radius:7px;background:#E8A33B;box-shadow:0 0 30px rgba(232,163,59,.7);opacity:0;transform:rotate(0deg);transition:top .45s cubic-bezier(.5,0,.9,.5),transform .45s ease,opacity .5s ease;z-index:3;pointer-events:none}
.nos.drop .pack{top:calc(46% + 66px);transform:rotate(-28deg)}
.nos.drop:not(.open) .pack{opacity:1}
.thrower{position:absolute;left:max(6px,calc(50% - 636px));bottom:clamp(14px,5vh,48px);opacity:0;transform:translateX(-60px);transition:opacity .4s ease,transform .6s cubic-bezier(.2,1.2,.4,1);z-index:4;pointer-events:none}
.nos.throw .thrower{opacity:1;transform:translateX(0px)}
.cw{display:flex;justify-content:center}
.ncard{position:relative;width:min(1200px,100%);overflow:hidden;border-radius:28px;background:var(--surface);border:1px solid rgba(var(--fg-rgb),.1);box-shadow:0 60px 120px -40px var(--shadow),0 0 80px -20px rgba(213,69,99,.35);transform-origin:50% 52%;transform:scale(1);opacity:1;transition:transform 1.1s cubic-bezier(.2,1.1,.3,1),opacity .35s ease}
.mov .nos:not(.open) .ncard{transform:scale(.03);opacity:0}
.nin{position:relative;padding:clamp(20px,3vw,36px)}
.nh{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.nh h2{font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.035em;margin:14px 0 0}
.nh p{font-size:17px;line-height:1.5;color:var(--muted);margin:0;max-width:26em}
.ngrid{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:20px;align-items:center}
.video{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:var(--bg);border:1px solid rgba(var(--fg-rgb),.08);box-shadow:0 40px 90px -30px var(--shadow)}
/* Marcador de un material que todavía no llegó (el <image-slot> del prototipo). */
.slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;font:600 12px/1.3 system-ui,-apple-system,sans-serif;color:rgba(var(--fg-rgb),.75)}
.slot::before{content:"";position:absolute;inset:0;border:1.5px dashed currentColor;opacity:.35;pointer-events:none}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:0;background:#D54563;color:#FFF6F0;font-size:24px;cursor:pointer;animation:piaPulse 1.8s infinite;display:grid;place-items:center;padding-left:6px;transition:background .3s}
.play:hover{background:var(--fg)!important;color:#8F0D35!important}
.vlab{position:absolute;left:18px;bottom:16px;pointer-events:none}
.vlab span{background:rgba(var(--bg-rgb),.8);color:var(--rose);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;border:1px solid rgba(var(--fg-rgb),.1)}
.exs{display:flex;flex-direction:column;gap:10px}
.exl{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--accent);padding-left:6px;margin-bottom:4px}
.ex{margin-left:var(--ml);pointer-events:none;opacity:0;transform:translate(-62vw,var(--ey)) scale(.12);transition:opacity .3s 0s ease,transform .95s 0s cubic-bezier(.25,1.35,.45,1)}
.nos.throw .ex{pointer-events:auto;opacity:1;transform:translate(0px,0px) scale(1);transition-delay:var(--ed)}
.x0{--ml:0px;--ey:240px;--ed:.55s;--xd:6s;--xo:0s}
.x1{--ml:22px;--ey:184px;--ed:.87s;--xd:6.4s;--xo:-1.1s}
.x2{--ml:8px;--ey:128px;--ed:1.19s;--xd:6.8s;--xo:-2.2s}
.x3{--ml:28px;--ey:72px;--ed:1.51s;--xd:7.2s;--xo:-3.3s}
.x4{--ml:4px;--ey:16px;--ed:1.83s;--xd:7.6s;--xo:-4.4s}
.ex a{animation:piaFloat var(--xd) ease-in-out var(--xo) infinite;display:flex;gap:12px;align-items:center;padding:10px 16px 10px 10px;border-radius:999px;background:var(--bg);border:1px solid rgba(var(--fg-rgb),.1);transition:border-color .3s,background .3s}
.ex a:hover{border-color:var(--accent)!important;background:var(--surface-2)!important;color:var(--fg)!important}
.ex b{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:12px}
.e-ia{background:#D54563;color:#FFF6F0}.e-01{background:#8F0D35;color:#FFF6F0}.e-pp{background:#F2C6CA;color:#1A0407}
.ex a>span{min-width:0}
.ext{display:block;font-weight:600;font-size:15px}
.exd{display:block;font-size:12.5px;color:var(--muted)}

/* ── Quién está detrás ── */
.who{position:relative;height:190vh}
.who-s{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.who-ch{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:22px;pointer-events:none;will-change:transform,opacity}
.chr{position:relative;width:240px;height:300px}
.chr b{position:absolute}
.c-q{left:50%;top:-14px;margin-left:-28px;width:56px;text-align:center;font-weight:700;font-size:92px;line-height:1;color:#E8A33B;text-shadow:0 0 40px rgba(232,163,59,.6);animation:piaFloat 2.6s ease-in-out infinite}
.c-hd{left:78px;top:86px;width:84px;height:84px;border-radius:50%;background:#F2C6CA}
.c-hd i{position:absolute;top:38px;width:8px;height:8px;border-radius:50%;background:var(--bg)}
.c-hd i:first-child{left:24px}.c-hd i:last-child{right:24px}
.c-bd{left:80px;top:164px;width:80px;height:112px;border-radius:36px 36px 20px 20px;background:#D54563}
.c-a1{left:52px;top:178px;width:18px;height:74px;border-radius:9px;background:#F2C6CA;transform:rotate(22deg);transform-origin:50% 0}
.c-a2{right:52px;top:178px;width:18px;height:74px;border-radius:9px;background:#F2C6CA;transform:rotate(-22deg);transform-origin:50% 0}
.c-lp{left:55px;top:204px;width:130px;height:82px;border-radius:10px 10px 3px 3px;background:var(--surface);border:2px solid rgba(var(--fg-rgb),.4);display:grid;place-items:center;box-shadow:0 0 50px rgba(213,69,99,.45)}
.c-lp i{width:14px;height:14px;border-radius:50%;background:#D54563;animation:piaPulse 1.6s infinite}
.c-bs{left:36px;top:286px;width:168px;height:11px;border-radius:0 0 10px 10px;background:var(--surface-2);border:2px solid rgba(var(--fg-rgb),.4);border-top:0}
.who-q{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.who-ct{opacity:0;will-change:transform,opacity;position:relative;max-width:1240px;width:100%;margin:0 auto;padding:84px 24px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px;align-items:center}
.who-ph{position:relative;width:min(400px,44vh,100%);justify-self:center}
.who-fr{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.1);box-shadow:0 40px 90px -30px var(--shadow)}
.who-bg{position:absolute;right:-16px;bottom:28px;background:#8F0D35;color:#FFF6F0;padding:12px 18px;border-radius:14px;font-weight:600;font-size:15px;pointer-events:none;box-shadow:0 0 40px -8px rgba(213,69,99,.8)}
.quote{font-weight:300;font-size:clamp(24px,2.6vw,36px);line-height:1.2;letter-spacing:-.02em;margin:18px 0 0;text-wrap:pretty}
.quote .qr{color:var(--rose);font-weight:500}
.who-p{font-size:17px;line-height:1.55;color:var(--muted);margin:20px 0 0;max-width:32em;text-wrap:pretty}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.chips span{padding:9px 14px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.14);font-weight:500;font-size:14px;color:var(--rose)}

/* ── Cotizá ── */
.cot{position:relative;padding:clamp(40px,7vh,88px) 16px}
.sheet{position:relative;width:min(1200px,100%);overflow:hidden;border-radius:28px;background:#8F0D35;border:1px solid rgba(255,246,240,.1);box-shadow:0 60px 120px -40px var(--shadow),0 0 80px -20px rgba(213,69,99,.35);transform-origin:50% 0;will-change:transform}
.sh-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(213,69,99,.55),transparent 70%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(26,4,7,.6),transparent 70%);pointer-events:none}
.sh-ring{position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;border:1px dashed rgba(255,246,240,.3);animation:piaSpin 50s linear infinite;pointer-events:none}
.sh-in{position:relative;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.sh-in h2{font-weight:700;font-size:clamp(32px,4.6vw,64px);line-height:.98;letter-spacing:-.04em;margin:0;max-width:12em}
.sh-in h2 .lt{color:#F6CDD1}
.sh-p{font-size:17px;line-height:1.5;margin:18px 0 0;max-width:32em;color:#F6CDD1}
.wishes{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;max-width:860px}
.wish{cursor:pointer;font-weight:500;font-size:15px;padding:11px 16px;border-radius:999px;border:1px solid rgba(255,246,240,.3);background:rgba(26,4,7,.25);color:#FFF6F0;transition:all .2s;transform:none}
.wish.on{border-color:#FFF6F0;background:#FFF6F0;color:#1A0407;transform:scale(1.05)}
.sh-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:32px}
.send{padding:17px 28px;border-radius:999px;background:#FFF6F0;color:#1A0407;font-weight:600;font-size:17px;transition:all .3s}
.send:hover{background:#1A0407!important;color:#FFF6F0!important;transform:translateY(-2px)!important}
.sh-r{font-size:14px;font-weight:500;color:#F6CDD1}

/* ── Preguntas ── */
.faq{position:relative;min-height:100vh;display:flex;align-items:center}
.faq-w{position:relative;max-width:1240px;width:100%;margin:0 auto;padding:96px 24px 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px;align-items:start}
.faq-s{font-size:17px;line-height:1.5;color:var(--muted);margin:20px 0 0;max-width:26em}
.fq{border-top:1px solid rgba(var(--fg-rgb),.1)}
.fq-b{width:100%;cursor:pointer;background:none;border:0;color:var(--fg);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;text-align:left;font-weight:500;font-size:18px}
.fq-b:hover{color:var(--rose)!important}
.plus{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.2);display:grid;place-items:center;transition:all .3s;transform:none;font-size:18px;color:var(--accent)}
.fq.open .plus{transform:rotate(45deg)}
.fq-a{overflow:hidden;max-height:0px;transition:max-height .4s ease}
.fq.open .fq-a{max-height:240px}
.fq-a p{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:44em}

/* ── Pie ── */
.foot{position:relative;color:var(--muted);border-top:1px solid rgba(var(--fg-rgb),.08);padding-top:40px}
.foot-w{max-width:1240px;margin:0 auto;padding:36px 24px 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px;align-items:start}
.foot img{width:min(100%,320px);height:auto;aspect-ratio:2304/510;object-fit:cover;display:block;border-radius:10px}
.foot-t{font-size:14px;line-height:1.5;margin:12px 0 0;max-width:22em}
.fc{display:flex;flex-direction:column;gap:8px;font-size:14px}
.fc>b{color:var(--rose);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.fc a{color:inherit}
.fc a:hover{color:var(--fg)!important}
.fcp{margin-top:8px;font-size:13px}

/* ── El corte de 720 px del prototipo (allá era `innerWidth < 720` en JS) ── */
@media (max-width:719.98px){
  .pain{left:var(--xn);top:var(--yn)}
  .vals{grid-template-columns:minmax(0,1fr)}
  .half{transform:translateY(0%)}
  .mov .vals:not(.open) .v1 .ha{transform:translateY(-60%)}
  .mov .vals:not(.open) .v1 .hbk{transform:translateY(60%)}
  .bw{--ind:0px}
  /* (agregado) Nosotros apilado: el video arriba y los ejemplos abajo, sin sangría. */
  .ngrid{grid-template-columns:minmax(0,1fr)}
  .ex{margin-left:0}
}
/* (agregado) En pantallas táctiles no hay puntero que seguir. */
@media (hover:none){.cur{display:none}}
/* Desde 720 px el producto del medio va espejado: texto a la derecha, burbujas que entran desde la derecha. */
@media (min-width:720px){
  .d1 .pt{order:2}
  .d1 .bw{margin-left:0;margin-right:var(--ind);transform-origin:100% 50%;--bx:90px}
}