/* ═════════════ Yeah Studio · diseño editorial (home) ═════════════
   Grilla de celdas que comparten borde: sin espacios, sin sombras, sin esquinas redondas.
   Paleta de marca: amarillo, negro, gris y hueso. Tipografía: DM Sans.
   Los rollovers pasan DENTRO de cada celda; nada crece ni se sale de la grilla. */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1D1B16; --y:#FFD400; --paper:#EFE6D2; --card:#FAF5EA; --hueso:#E3D6BA;
  --gray:#B9B3A7; --gray-m:#8F897D; --gray-d:#6B665C; --soft:#CFC9BC;
  --line:2px;   /* bordes chicos: botones, tags, + */
  --grid:2px;   /* líneas de la grilla */
  --f:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --out:cubic-bezier(.16,1,.3,1); --in:cubic-bezier(.4,0,1,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:90px}
body{font-family:var(--f);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--y);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}
.c.k :focus-visible,.c.k:focus-visible{outline-color:var(--y)}
.skip{position:absolute;left:24px;top:-60px;z-index:1000;background:var(--y);color:var(--ink);font-weight:700;padding:10px 14px;border:var(--line) solid var(--ink)}
.skip:focus{top:24px}

/* ── tipografía ── */
.disp{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.86}
.disp .l{font-weight:300}
.d1{font-size:clamp(60px,10.4vw,280px)}
.d2{font-size:clamp(42px,6.2vw,168px)}
.d3{font-size:clamp(30px,3.4vw,92px)}
.d4{font-size:clamp(22px,2vw,48px);letter-spacing:-.02em}
.lab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
p{font-size:16px;line-height:1.55;max-width:54ch}
.sm{font-size:14px;line-height:1.5}
.muted{color:var(--gray-d)}
.c.k .muted,.c.k .sm{color:var(--soft)}

/* ── la grilla ── */
.frame{max-width:none;margin:0;border:0;background:var(--ink);display:grid;gap:var(--grid)}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid)}
.c{background:var(--card);padding:26px;position:relative;overflow:hidden;min-width:0}
.c.k{background:var(--ink);color:var(--card)}
.c.y{background:var(--y)}
.c.h{background:var(--hueso)}
.c.gr{background:var(--gray)}
.c.flush{padding:0}
.col{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.stack{display:grid;gap:var(--grid);background:var(--ink);padding:0}
.c > *:not(.peek){position:relative;z-index:1}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;grid-template-columns:auto auto repeat(5,1fr) auto;background:var(--ink);box-shadow:0 0 0 var(--grid) var(--ink)}
/* el nav fijo lleva sus propias líneas: fondo negro entre celdas y contorno, aunque se despegue del marco */
.nav .c{padding:18px 20px;display:flex;align-items:center}
.logo{display:block;width:92px;aspect-ratio:1400/923;background:var(--ink);-webkit-mask:url(img/logo-yeah.webp) center/contain no-repeat;mask:url(img/logo-yeah.webp) center/contain no-repeat}
.nav .who{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.35}
.nav a.c{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;justify-content:space-between;gap:10px}
.nav a.c[aria-current="page"]{background:var(--hueso)}
.pill{font-size:9px;font-weight:800;letter-spacing:.1em;background:var(--ink);color:var(--y);padding:3px 6px;text-transform:uppercase}
.nav .cta{background:var(--y);min-width:170px}
.nav .burger{display:none;justify-content:center;min-width:64px}
.burger i{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .25s var(--out)}
.burger i::before{top:-7px}.burger i::after{top:7px}
.burger.open i{background:transparent}
.burger.open i::before{transform:translateY(7px) rotate(45deg)}
.burger.open i::after{transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{position:fixed;inset:0;z-index:45;background:var(--paper);padding:110px 16px 24px;display:grid;align-content:start;gap:var(--line);visibility:hidden;opacity:0;transition:opacity .2s var(--in),visibility 0s .2s}
.nav-drawer.open{visibility:visible;opacity:1;transition:opacity .3s var(--out)}
.nav-drawer > a,.nav-drawer .foot-links a{background:var(--card);border:var(--line) solid var(--ink);margin-top:calc(var(--line) * -1);padding:18px 20px;font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center}
.nav-drawer .foot-links{display:grid;grid-template-columns:1fr 1fr;margin-top:18px}
.nav-drawer .foot-links a{font-size:12px;letter-spacing:.12em;font-weight:700}
.nav-drawer .new{font-size:10px;background:var(--ink);color:var(--y);padding:3px 6px;letter-spacing:.1em}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;border:var(--line) solid var(--ink);padding:14px 18px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--card);position:relative;overflow:hidden;cursor:pointer}
.btn.k{background:var(--ink);color:var(--card)}
.c.k .btn:not(.k){background:transparent;color:var(--card);border-color:var(--card)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ulink{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-bottom:var(--line) solid currentColor;padding-bottom:3px;display:inline-flex;gap:8px;align-self:flex-start}

/* ═════ ROLLOVERS ═════ */
/* 1 · relleno que sube desde abajo */
.fx{isolation:isolate}
.fx::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fill,var(--y));clip-path:inset(100% 0 0 0);transition:clip-path .22s var(--in)}
.fx:hover::before,.fx:focus-visible::before{clip-path:inset(0 0 0 0);transition:clip-path .34s var(--out)}
.c.k.fx{--fill:#2E2B25}
.c.y.fx{--fill:var(--card)}
.btn.fx::before{z-index:0}.btn.fx>*{position:relative;z-index:1}
.btn.k.fx:hover,.c.k .btn.fx:hover{color:var(--ink);border-color:var(--ink)}
/* 2 · flecha que avanza */
.ar{display:inline-block;transition:transform .22s var(--in)}
.fx:hover .ar,a:hover .ar,.btn:hover .ar{transform:translate(4px,-4px);transition:transform .3s var(--out)}
.ar.dn{transform:none}
a:hover .ar.dn,.btn:hover .ar.dn{transform:translateY(4px)}
/* 3 · foto en blanco y negro que se pinta */
.ph{position:relative;overflow:hidden;height:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transform:scale(1.001);transition:filter .3s var(--in),transform .35s var(--in)}
.c:hover .ph img,.wk:hover .ph img{filter:none;transform:scale(1.04);transition:filter .45s var(--out),transform .6s var(--out)}
/* 4 · manita que se asoma desde el borde de abajo: la celda le corta el brazo */
.peek{position:absolute;bottom:0;right:6%;width:var(--w,190px);pointer-events:none;z-index:0}
.peek img{width:100%;height:auto;transform:translateY(var(--hide,9%));transform-origin:50% 100%;transition:transform .3s var(--in)}
.c:hover .peek img{transform:translateY(var(--show,3%)) rotate(-4deg);transition:transform .5s var(--out)}
/* 5 · número que rueda como marcador */
.roll{display:block;height:1em;line-height:1;overflow:hidden}
.roll i{display:block;height:1em;line-height:1;font-style:normal;transition:transform .25s var(--in)}
.roll i + i{-webkit-text-stroke:2px var(--ink);color:transparent}
.wk:hover .roll i{transform:translateY(-100%);transition:transform .38s var(--out)}

/* ── hero ── */
.hero{grid-template-rows:auto 1fr}
.hero-main{grid-column:1/8;grid-row:1/3;min-height:640px}
.hero-main h1{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.sq{display:inline-block;width:12px;height:12px;background:var(--y);border:var(--line) solid var(--ink);margin-right:10px;vertical-align:-1px}
.hero-txt{grid-column:8/11}
.hero-txt p{font-size:17px;font-weight:600;line-height:1.4}
.stk{grid-column:11/13;display:flex;align-items:center;justify-content:center;min-height:190px}
.stk-in{width:132px;height:132px;border-radius:50%;background:var(--card);border:var(--line) solid var(--ink);display:flex;align-items:center;justify-content:center;position:relative}
.stk-in svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:spin 22s linear infinite}
.stk-in i{width:24px;height:30px;background:var(--ink);-webkit-mask:url(img/logo-y.webp) center/contain no-repeat;mask:url(img/logo-y.webp) center/contain no-repeat}
.stk:hover svg{animation-duration:6s}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-img{grid-column:8/13}
.hero-img .ph{min-height:430px}

/* ── fila-cinta ── */
.ribbon{grid-template-columns:72px 1fr 340px}
/* la celda ocupa toda su columna; solo el texto va vertical */
.vert{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:18px 0}
.vert > span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.mq{display:flex;align-items:center;overflow:hidden;padding:0}
.mq-t{display:flex;width:max-content;animation:mq 38s linear infinite;will-change:transform}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t > span{display:flex;align-items:center;gap:.5em;padding-right:.5em;white-space:nowrap}
.spk{width:.5em;height:.5em;fill:var(--ink);flex:none}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ribbon .logo-mq{min-height:110px}
.clock b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;display:block;margin:10px 0 8px}
.clock b small{font-size:14px;letter-spacing:0;margin-left:4px}

/* ── números ── */
.nums > .c{grid-column:span 3}
.num{font-size:clamp(56px,6vw,160px)}
.c.k .num{color:var(--y)}

/* ── logos ── */
.logos{grid-template-columns:3fr 9fr}
.logo-mq .mq-t{gap:64px;padding:22px 32px 22px 0;animation-duration:52s}
.logo-mq .mq-t img{height:34px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s}
.logo-mq .mq-t img.sq2{height:52px}
.logo-mq .mq-t img.wide{height:24px;max-width:170px}
.logo-mq .mq-t img:hover{filter:none;opacity:1}

/* ── productos ── */
.prod > .c{grid-column:span 6;min-height:440px}
.tagk{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:var(--line) solid currentColor}
.c.k .tagk.y{background:var(--y);color:var(--ink);border-color:var(--y)}
.c.y .tagk{background:var(--ink);color:var(--y);border-color:var(--ink)}
.c.k .l.acc{color:var(--y)}
.incl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;font-size:13px;max-width:40ch}
.incl li{padding-left:16px;position:relative}
.incl li::before{content:'';position:absolute;left:0;top:.45em;width:7px;height:7px;background:var(--y)}
.c.y .incl li::before{background:var(--ink)}

/* ── listas desplegables (servicios y preguntas) ── */
.si{background:var(--card);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:22px 26px;text-align:left;width:100%;position:relative;cursor:pointer;list-style:none}
.si::-webkit-details-marker{display:none}
.pl{width:34px;height:34px;border:var(--line) solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:500;line-height:1;flex:none;transition:transform .25s var(--out),background .2s,color .2s}
.si[aria-expanded="true"] .pl,details[open] > .si .pl{transform:rotate(45deg);background:var(--ink);color:var(--y)}
.si-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--out)}
.si-b > div{overflow:hidden}
.si[aria-expanded="true"] + .si-b{grid-template-rows:1fr}
.si-wrap,.faq-r details{background:var(--card)}
.si-b p,.faq-r details > p{padding:0 26px 22px;font-size:15px}
.si-b a{display:inline-block;margin:0 26px 24px}

/* servicios */
.svc-l{grid-column:1/6;min-height:560px}
.svc-v{grid-column:6/7}
.svc-r{grid-column:7/13}

/* ── trabajo (índice editorial) ── */
.wk-l{grid-column:1/4;grid-row:span 5}
.wk{display:contents}
.wk > .c{transition:background .2s}
.wk .n{grid-column:4/6;display:flex;align-items:center;padding:18px 24px}
.wk .n .num{font-size:clamp(64px,7vw,190px)}
.wk .t{grid-column:6/9;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:190px}
.wk .im{grid-column:9/13;padding:0;min-height:190px}
.wk .im .ph{min-height:190px}
.wk .im.logo-c{display:flex;align-items:center;justify-content:center;background:var(--hueso)}
.wk .im.logo-c img{max-width:46%;max-height:90px;width:auto;height:auto;filter:grayscale(1);transition:filter .3s,transform .5s var(--out)}
.wk:hover .im.logo-c img{filter:none;transform:scale(1.06)}
.wk:hover .n{background:var(--y)}
.wk:hover .t{background:var(--hueso)}
a.wk:focus-visible .n{background:var(--y)}

/* ── planes ── */
.plans > .c{grid-column:span 3;min-height:440px}
.price{font-size:clamp(40px,3.8vw,100px);font-weight:800;letter-spacing:-.04em;line-height:1}
.plans ul{list-style:none;display:grid;gap:8px;font-size:14px}
.plans li{padding-left:18px;position:relative}
.plans li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;background:currentColor}
.plans .btn{width:100%}

/* ── reels ── */
.reels{grid-template-columns:3fr 9fr}
.reels-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:var(--grid);background:var(--ink);overflow-x:auto;scrollbar-width:none;cursor:grab;padding:0}
.reels-rail::-webkit-scrollbar{display:none}
.reels-rail.drag{cursor:grabbing}
.reels-rail.drag a{pointer-events:none}
.reel{position:relative;overflow:hidden;aspect-ratio:9/16;background:var(--hueso);display:block}
.reel:nth-child(even){background:var(--gray)}
.reel-img{position:absolute;inset:0}
.reel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--out)}
.reel:hover .reel-img img{transform:scale(1.04)}
.reel.rph .reel-img img{position:absolute;top:auto;left:2%;bottom:0;width:96%;height:auto;object-fit:contain;filter:none;transform:translateY(6%);transition:transform .3s var(--in)}
.reel.rph:hover .reel-img img{transform:translateY(-3%) rotate(-4deg);transition:transform .5s var(--out)}
.reel-play{position:absolute;left:14px;top:14px;z-index:2;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--card);border:var(--line) solid var(--ink)}
.reel:hover .reel-play{background:var(--y)}
.reel-t{position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--card);border-top:var(--line) solid var(--ink);padding:10px 14px;font-size:12px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-more{display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:var(--y)!important}

/* ── estudio ── */
.std-l{grid-column:1/6}
.std-i{grid-column:6/10;padding:0;min-height:460px}
.std-r{grid-column:10/13}
.std-r .c{display:flex;flex-direction:column;justify-content:flex-end;gap:8px}

/* ── preguntas ── */
.faq-l{grid-column:1/6}
.faq-l img{width:min(360px,86%);margin-top:20px;height:auto}
.faq-r{grid-column:6/13;grid-template-rows:repeat(9,auto) 1fr}
.faq-r::after{content:'';background:var(--card)}
.faq-r .si{font-size:18px;font-weight:700;letter-spacing:-.01em}
.faq-r details[open] > .si{padding-bottom:12px}

/* ── contacto ── */
.ct-l{grid-column:1/9;min-height:540px}
.ct-l .peek{--w:190px;right:4%}
.madlib{font-size:clamp(22px,2.4vw,34px);line-height:1.75;font-weight:500;letter-spacing:-.02em;max-width:20em}
.madlib input,.madlib select{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:var(--line) solid var(--ink);padding:0 4px;width:7em;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.madlib select{width:auto;padding-right:22px;background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 6px center/8px 8px no-repeat}
.madlib input::placeholder{color:var(--gray-m)}
.madlib input:focus,.madlib select:focus{background-color:var(--y)}
.madlib input.err{background:#FFF1B3}
.madlib .row{margin-top:22px;font-size:14px;letter-spacing:0;line-height:1.4}
.madlib .btn.sending{opacity:.7;cursor:progress}
.form-msg{margin-top:14px;font-size:16px;font-weight:600;min-height:22px;line-height:1.4}
.form-msg.bad{background:var(--y);display:inline-block;padding:6px 12px}
.form-done{margin-top:26px;max-width:34em;outline:none;animation:formDone .45s var(--out) both}
.form-done[hidden]{display:none}
.form-done-badge{display:inline-block;background:var(--y);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:var(--line) solid var(--ink)}
.form-done-t{font-size:clamp(30px,3.6vw,52px);line-height:1;font-weight:800;letter-spacing:-.04em;text-transform:uppercase;margin:18px 0 0}
.form-done-t em{font-style:normal;font-weight:300}
.form-done-p{font-size:18px;line-height:1.5;margin:14px 0 22px;max-width:26em}
.form-done .link{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:var(--line) solid var(--ink);padding-bottom:3px}
@keyframes formDone{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ct-r{grid-column:9/13}

/* ── footer ── */
.foot > .c{min-height:220px}
.foot .f1{grid-column:1/4}
.foot .f2{grid-column:4/7}
.foot .f3{grid-column:7/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid);background:var(--ink);padding:0}
.foot .f3 > div{background:var(--card);padding:26px;display:flex;flex-direction:column;gap:10px}
.foot .f3 b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.foot .f3 a{font-size:15px;font-weight:500;width:max-content;border-bottom:var(--line) solid transparent;transition:border-color .2s}
.foot .f3 a:hover{border-color:var(--ink)}
.foot .logo{background:var(--y);width:130px}

/* ── flotantes ── */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:#25D366;border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--out),box-shadow .2s var(--out)}
.wa-float svg{width:28px;height:28px;fill:var(--ink)}
.wa-float:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.toast{position:fixed;left:20px;bottom:20px;z-index:60;background:var(--card);border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:16px 18px;font-size:14px;font-weight:600;line-height:1.5;transform:translateY(16px);opacity:0;visibility:hidden;transition:all .3s var(--out)}
.toast.show{transform:none;opacity:1;visibility:visible}
.toast button{margin-top:10px;background:var(--ink);color:var(--y);padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.video-modal{position:fixed;inset:0;z-index:200;background:rgba(29,27,22,.88);display:none;align-items:center;justify-content:center;padding:20px}
.video-modal.open{display:flex}
.video-wrap{width:min(960px,100%);aspect-ratio:16/9;position:relative;border:var(--line) solid var(--card);background:#000}
.video-wrap iframe{width:100%;height:100%;border:0}
.video-close{position:absolute;right:-2px;top:-46px;background:var(--y);border:var(--line) solid var(--ink);padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* los bucles se pausan fuera de pantalla */
.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}

/* ── responsive ── */
@media (max-width:1100px){
  .nav{grid-template-columns:auto 1fr auto auto}
  .nav a.c:not(.cta):not(.brand),.nav .who{display:none}
  .nav .burger{display:flex}
  .nav .sp{display:block}
  .hero-main{grid-column:1/-1;grid-row:auto;min-height:0;gap:40px}
  .hero-txt{grid-column:1/9}.stk{grid-column:9/13}.hero-img{grid-column:1/-1}
  .nums > .c{grid-column:span 6}
  .svc-l,.svc-r,.faq-l,.faq-r,.ct-l,.ct-r,.std-l,.std-i,.std-r{grid-column:1/-1}
  .svc-l{min-height:0}
  .svc-v{display:none}
  .wk-l{grid-column:1/-1;grid-row:auto}
  .wk .n{grid-column:1/4}.wk .t{grid-column:4/8}.wk .im{grid-column:8/13}
  .plans > .c{grid-column:span 6}
  .reels{grid-template-columns:1fr}
  .foot .f1,.foot .f2,.foot .f3{grid-column:1/-1}
  .ct-l{min-height:0;padding-bottom:110px}
}
@media (min-width:1101px){.nav .sp{display:none}}
@media (max-width:640px){
  html{scroll-padding-top:80px}
  .c{padding:20px}
  .g:not(.nav) > *{grid-column:1/-1!important}
  .nav{grid-template-columns:1fr auto auto}
  .nav .c{padding:14px 16px}
  .nav .cta{min-width:0}
  .nav .logo{width:74px}
  .nav .sp{display:none}
  .hero-txt{order:2}.stk{order:3;min-height:150px}.hero-img{order:4}
  .hero-img .ph{min-height:280px}
  .ribbon{grid-template-columns:44px 1fr}
  .ribbon .clock{grid-column:1/-1!important}
  .nums > .c{grid-column:span 6!important}
  .nums .peek{display:none}
  .logos{grid-template-columns:1fr}
  .wk .n,.wk .t,.wk .im{grid-column:1/-1!important}
  .wk .n{padding:14px 20px}
  .wk .t{min-height:0}
  .wk .im,.wk .im .ph{min-height:200px}
  .prod > .c{min-height:0;padding-bottom:120px}
  .plans > .c{min-height:0}
  .incl{grid-template-columns:1fr}
  .std-i{min-height:340px}
  .foot .f3{grid-template-columns:1fr 1fr}
  .foot .f3 > div:last-child{grid-column:1/-1}
  .madlib{font-size:22px}
  .reels-rail{grid-auto-columns:62%}
  .wa-float{right:14px;bottom:14px;width:52px;height:52px}
  .toast{left:14px;right:84px;bottom:14px}
}
@media (hover:none){
  .fx::before{display:none}
  .ph img{filter:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.si-h{font:inherit;margin:0}

/* ── hero: la boca de Yeah gritando en su cuadro, y la burbuja SALIENDO del cuadro como en un cómic ──
   Escritorio: el cuadro va arriba a la derecha y la burbuja rompe su borde izquierdo hacia el hueco
   que queda arriba de «Creativos». Tablet y móvil: rompe el borde de arriba o el de la derecha. */
.hero{grid-template-rows:auto auto}
.hero-main{grid-column:1/8;grid-row:1/3;min-height:0}
.c.hero-vid{grid-column:8/13;grid-row:1;aspect-ratio:1/1;min-height:0;overflow:visible;z-index:5;background:#FCD200}
.c.hero-vid > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-txt{grid-column:8/11;grid-row:2}
.stk{grid-column:11/13;grid-row:2;min-height:200px}

/* burbuja de cómic: globo ovalado de bordes redondos con su colita curva hacia la boca.
   Sale con un «pop» exagerado (aquí sí rebota: es lenguaje de cómic) y el texto tiembla mientras grita. */
.c.hero-vid > .bubble{position:absolute;z-index:6;width:clamp(210px,21vw,310px);aspect-ratio:326/222;container-type:inline-size;pointer-events:none;
  top:-13%;right:-6%;left:auto;transform-origin:5% 93%;opacity:0;transform:scale(.25) rotate(-24deg);transition:opacity .1s var(--in),transform .14s var(--in)}
.bubble svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bubble .b-bg{fill:var(--card);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.bubble b{position:absolute;left:51.5%;top:42.5%;transform:translate(-50%,-50%) rotate(-6deg);font-size:56px;font-size:23cqw;font-weight:800;letter-spacing:-.05em;line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.c.hero-vid > .bubble.on{opacity:1;transform:scale(1) rotate(-3deg);transition:opacity .08s var(--out),transform .42s cubic-bezier(.26,1.9,.45,1)}
.bubble.on b{animation:shout .09s steps(2) infinite alternate .3s}
@keyframes shout{from{transform:translate(-50%,-50%) rotate(-6deg)}to{transform:translate(calc(-50% + 2px),calc(-50% - 1.5px)) rotate(-4.5deg)}}

@media (min-width:1101px){
  /* espejo: la cola queda abajo a la derecha y apunta a la comisura izquierda */
  .c.hero-vid > .bubble{top:3%;left:-31%;right:auto;transform-origin:95% 93%;transform:scale(.25) rotate(24deg)}
  .c.hero-vid > .bubble.on{transform:scale(1) rotate(3deg)}
  .bubble svg{transform:scaleX(-1)}
  .bubble b{left:48.5%;transform:translate(-50%,-50%) rotate(5deg)}
  @keyframes shout{from{transform:translate(-50%,-50%) rotate(5deg)}to{transform:translate(calc(-50% - 2px),calc(-50% - 1.5px)) rotate(3.5deg)}}
}
@media (max-width:1100px){
  /* tablet: cuadro a la izquierda, sticker a la derecha; la burbuja sale por la derecha hacia el sticker */
  .hero-main{grid-column:1/-1;grid-row:1}
  .c.hero-vid{grid-column:1/8;grid-row:2}
  .stk{grid-column:8/13;grid-row:2;justify-content:flex-end;padding-right:12%}
  .hero-txt{grid-column:1/-1;grid-row:3}
  .c.hero-vid > .bubble{top:5%;right:-34%}
}
@media (max-width:640px){
  /* móvil: el cuadro ocupa todo el ancho; la burbuja sale por arriba hacia la frase */
  .hero-main{grid-row:auto}
  .stk{order:2;grid-row:auto;justify-content:center;padding-right:0;min-height:150px}
  .hero-txt{order:3;grid-row:auto}
  .c.hero-vid{order:4;grid-row:auto}
  .c.hero-vid > .bubble{width:170px;top:-14%;right:3%}
}
@media (max-width:640px){.ribbon > .vert{display:none}.ribbon .mq{min-height:76px}}
/* menú: con la grilla gruesa, que ningún botón se parta en dos renglones */
.nav a.c{white-space:nowrap;padding:18px 16px;letter-spacing:.1em}
@media (min-width:1101px){.c.hero-vid > .bubble{width:clamp(250px,24vw,350px);left:-38%;top:1%}}
@media (max-width:640px){.ribbon .logo-mq{min-height:84px}.logo-mq .mq-t{gap:40px;padding:16px 20px 16px 0}.logo-mq .mq-t img{height:26px;max-width:110px}.logo-mq .mq-t img.sq2{height:40px}.logo-mq .mq-t img.wide{height:19px;max-width:130px}}

/* ── grilla de orilla a orilla: en pantallas grandes el texto chico y los espacios crecen con ella ── */
@media (min-width:1700px){
  html{font-size:112%}
  .c{padding:clamp(26px,1.9vw,48px)}
  p{font-size:clamp(16px,1vw,22px)}
  .sm{font-size:clamp(14px,.86vw,19px)}
  .lab,.nav a.c,.nav .who{font-size:clamp(11px,.66vw,15px)}
  .btn{font-size:clamp(12px,.7vw,15px);padding:clamp(14px,1vw,22px) clamp(18px,1.3vw,28px)}
  .logo{width:clamp(92px,6vw,150px)}
  .madlib{font-size:clamp(28px,2.2vw,46px)}
  .hero-txt p{font-size:clamp(17px,1.1vw,24px)}
}

/* ── primera pantalla a la medida de la ventana (escritorio): hero + fila de clientes y reloj.
      El cuadro de la boca mide lo que quepa a lo alto (ventana − nav − fila de abajo − clientes) o 5/12 del ancho, lo que sea menor; así el hero entero
      cabe en la primera pantalla y el cuadro sigue siendo cuadrado. --navh lo pone editorial.js ── */
@media (min-width:1101px){
  .hero{--sq:clamp(300px,min(41.6vw,calc(100svh - var(--navh,100px) - var(--row2) - var(--rib) - var(--grid) * 3)),1200px);
        grid-template-columns:1fr calc(var(--sq) * .6) calc(var(--sq) * .4 - var(--grid));grid-template-rows:var(--sq) var(--row2)}
  .hero-main{grid-column:1;grid-row:1/3}
  .c.hero-vid{grid-column:2/4;grid-row:1;aspect-ratio:auto;height:var(--sq)}
  .hero-txt{grid-column:2;grid-row:2;min-height:0}
  .stk{grid-column:3;grid-row:2;min-height:0}
}
@media (min-width:1700px){.stk-in{width:clamp(132px,8vw,230px);height:clamp(132px,8vw,230px)}.stk-in i{width:clamp(24px,1.5vw,40px);height:clamp(30px,1.9vw,50px)}.wa-float{width:clamp(58px,3.4vw,74px);height:clamp(58px,3.4vw,74px)}}

/* la fila de clientes y reloj entra en la primera pantalla: alto fijo y compacto */
@media (min-width:1101px){
  :root{--row2:clamp(160px,18vh,250px);--rib:clamp(120px,13vh,180px)}
  .ribbon{grid-template-rows:var(--rib)}
  .ribbon .logo-mq{min-height:0}
  .ribbon .clock{padding:14px 24px;display:flex;flex-direction:column;justify-content:center}
  .ribbon .clock b{font-size:clamp(34px,4.4vh,58px);margin:6px 0 4px}
}
/* reloj a la izquierda de la fila: el botón flotante de WhatsApp queda sobre los logos, no sobre la hora */
@media (min-width:1101px){.ribbon{grid-template-columns:clamp(300px,22vw,420px) 72px 1fr}.ribbon .clock{order:-1}}
@media (min-width:1700px){.logo-mq .mq-t{gap:clamp(64px,4vw,110px)}.logo-mq .mq-t img{height:clamp(34px,2.3vw,58px);max-width:clamp(150px,10vw,250px)}.logo-mq .mq-t img.sq2{height:clamp(52px,3.4vw,86px)}.logo-mq .mq-t img.wide{height:clamp(24px,1.6vw,40px);max-width:clamp(170px,11vw,280px)}}

/* ═════════════ PÁGINAS INTERNAS (SmartWeb, Agentes IA, Creatividad) ═════════════ */
/* hero de página: celda grande a la izquierda y módulos a la derecha */
.phero > .c{min-height:0}
.phero .ph-main{grid-column:1/8;grid-row:1/3;min-height:560px}
.phero .ph-main h1.seo{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.phero .ph-r1{grid-column:8/13;grid-row:1}
.phero .ph-r2a{grid-column:8/11;grid-row:2}
.phero .ph-r2b{grid-column:11/13;grid-row:2}
.lead{font-size:clamp(16px,1.15vw,22px);line-height:1.5;max-width:46ch}
.c.k .lead{color:var(--soft)}
.big-price{font-size:clamp(64px,7vw,150px);font-weight:800;letter-spacing:-.05em;line-height:.9}

/* chat que se escribe solo */
.chat{display:flex;flex-direction:column;gap:10px;min-height:330px}
.chat-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:var(--line) solid #3a3731;margin-bottom:6px}
.chat-head i{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--y);color:var(--ink);font-style:normal;font-weight:800}
.chat-head b{display:block;font-size:14px}
.chat-head .on{font-size:12px;color:var(--soft);display:flex;align-items:center;gap:6px}
.chat-head .on::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--y)}
.msg{max-width:82%;padding:10px 14px;font-size:14px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .3s var(--out),transform .4s var(--out)}
.msg.in{opacity:1;transform:none}
.msg.u{align-self:flex-end;background:var(--card);color:var(--ink)}
.msg.a{align-self:flex-start;background:var(--y);color:var(--ink)}
.typing{align-self:flex-start;display:none;gap:5px;padding:12px 14px;background:#2E2B25}
.typing.on{display:flex}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--soft);animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.call{display:flex;align-items:center;gap:14px}
.call .ico{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--ink);color:var(--y)}
.wave{display:flex;align-items:center;gap:3px;height:28px;margin-left:auto}
.wave i{width:4px;height:100%;background:var(--ink);animation:wv 1s ease-in-out infinite;transform-origin:center}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
@keyframes wv{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* fila de 3 a 4 cifras */
.figs > .c{grid-column:span 4}
.figs.four > .c{grid-column:span 3}
.fig{font-size:clamp(56px,6vw,150px);font-weight:800;letter-spacing:-.05em;line-height:.9}

/* lista de características con etiqueta */
.feats{grid-column:7/13}
.feat{background:var(--card);display:grid;grid-template-columns:120px 1fr;gap:18px;padding:22px 26px;position:relative}
.feat .lab{padding-top:6px;color:var(--gray-d)}
.feat p{font-size:15px;margin-top:6px;max-width:48ch}

/* pasos con número que rueda */
.steps-row > .c{grid-column:span 3;min-height:260px}
.steps-row.three > .c{grid-column:span 4}
.steps-row .st-t{grid-column:1/-1;min-height:0}
.step:hover .roll i{transform:translateY(-100%);transition:transform .38s var(--out)}
.step .num{font-size:clamp(56px,5.6vw,120px)}
.step:hover{background:var(--hueso)}

/* bloque título + texto a lo ancho */
.wide-t{grid-column:1/-1}
.split-l{grid-column:1/6}
.split-r{grid-column:6/13}

/* agentes: dos agentes, un cerebro */
.agents > .c{grid-column:span 4;min-height:420px}
.agents ul{list-style:none;display:grid;gap:10px;font-size:15px;line-height:1.45}
.agents li{padding-left:18px;position:relative}
.agents li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;background:currentColor}
.brain{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.brain .core{width:clamp(150px,13vw,240px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--y);display:flex;align-items:center;justify-content:center;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(18px,1.5vw,28px);line-height:1;transition:transform .35s var(--out)}
.agents:hover .brain .core{transform:scale(1.06)}

/* industrias: la pregunta aparece al pasar el mouse */
.inds > .c{grid-column:span 3;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.inds .q{font-size:clamp(18px,1.4vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2;opacity:0;transform:translateY(10px);transition:opacity .2s var(--in),transform .25s var(--in)}
.inds > .c:hover .q,.inds > .c:focus-visible .q{opacity:1;transform:none;transition:opacity .3s var(--out),transform .45s var(--out)}
@media (hover:none){.inds .q{opacity:1;transform:none}}

/* planes con 3 columnas + celda de título (agentes y smartweb) */
.plans3 > .c{grid-column:span 3;min-height:460px}
.vtoggle{display:inline-flex;border:var(--line) solid var(--ink)}
.vtoggle button{padding:10px 14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.vtoggle button + button{border-left:var(--line) solid var(--ink)}
.vtoggle button[aria-pressed="true"]{background:var(--ink);color:var(--y)}
.ptable{grid-column:1/-1;padding:0;overflow-x:auto}
.ptable table{width:100%;border-collapse:collapse;font-size:15px;min-width:720px}
.ptable th,.ptable td{padding:16px 20px;text-align:left;border-bottom:var(--line) solid var(--ink);border-right:var(--line) solid var(--ink);vertical-align:top}
.ptable th:last-child,.ptable td:last-child{border-right:0}
.ptable thead th{background:var(--ink);color:var(--card);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ptable thead th.hl{background:var(--y);color:var(--ink)}
.ptable tbody th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--hueso);width:22%}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
[hidden]{display:none!important}

/* 4 cajas de costos / servicios 2×2 */
.quad > .c{grid-column:span 3}
.duo > .c{grid-column:span 6;min-height:380px}

/* cierre */
.close > .c{min-height:420px}
.close .cl-main{grid-column:1/9}
.close .cl-side{grid-column:9/13}

@media (max-width:1100px){
  .phero .ph-main{grid-column:1/-1;grid-row:auto;min-height:0;gap:40px}
  .phero .ph-r1{grid-column:1/-1;grid-row:auto}
  .phero .ph-r2a{grid-column:1/7;grid-row:auto}.phero .ph-r2b{grid-column:7/13;grid-row:auto}
  .figs > .c,.figs.four > .c{grid-column:span 6}
  .split-l,.split-r,.feats{grid-column:1/-1}
  .steps-row > .c,.steps-row.three > .c{grid-column:span 6}
  .agents > .c{grid-column:1/-1;min-height:0}
  .inds > .c,.quad > .c{grid-column:span 6}
  .plans3 > .c{grid-column:span 6;min-height:0}
  .duo > .c{grid-column:1/-1;min-height:0}
  .close .cl-main,.close .cl-side{grid-column:1/-1}
}
@media (max-width:640px){
  .feat{grid-template-columns:1fr;gap:6px}
  .inds > .c{min-height:0}
  .close > .c{min-height:0}
  .chat{min-height:300px}
}
/* ajustes de páginas internas */
.steps-row > .c.st-t,.steps-row.three > .c.st-t{grid-column:1/-1}
.phero .d1{font-size:clamp(54px,7.4vw,210px)}
.col > .btn,.col > .tagk,.col > .ulink{align-self:flex-start}
.plans .col > .btn{align-self:stretch}
.inds .q{opacity:.22}
@media (max-width:1100px){.steps-row > .c:not(.st-t),.steps-row.three > .c:not(.st-t){grid-column:span 6}}
/* galería del caso: una foto alta y tres apaisadas */
.gal{grid-template-rows:auto auto}
.gal .gl-t{grid-column:1/5;grid-row:1/3}
.gal .gl-a{grid-column:5/9;grid-row:1/3;min-height:640px}
.gal .gl-b{grid-column:9/13;grid-row:1;min-height:320px}
.gal .gl-c{grid-column:9/13;grid-row:2;min-height:320px}
.gal .gl-d{grid-column:1/5;grid-row:2;min-height:320px}
@media (max-width:1100px){.gal .gl-t,.gal .gl-a,.gal .gl-b,.gal .gl-c,.gal .gl-d{grid-column:1/-1;grid-row:auto;min-height:300px}.gal .gl-t{min-height:0}}
blockquote.c{margin:0}

/* celdas que respiran: la grilla se reacomoda suave (ver editorial.js) */
.breathes{transition:grid-template-columns .75s cubic-bezier(.45,0,.2,1)}
@media (prefers-reduced-motion:reduce){.breathes{transition:none}}

/* ═════ CHISPAZO: rollover de los botones principales (.btn.k) ═════
   Sin relleno: el botón se levanta con su sombra dura, explota un glow y la flecha sale
   disparada con estela (motion blur) y regresa por el otro lado. En fondos amarillos el glow es blanco. */
.btn.k{--glow:255,212,0;transition:transform .35s cubic-bezier(.2,1.6,.4,1),box-shadow .35s cubic-bezier(.2,1.6,.4,1)}
.c.y .btn.k,.form-done .btn.k{--glow:255,255,255}
.btn.k.fx::before{display:none}
.btn.k.fx:hover,.btn.k.fx:focus-visible{color:var(--card);border-color:var(--ink);transform:translate(-4px,-4px);box-shadow:6px 6px 0 rgba(29,27,22,.7),0 0 34px 6px rgba(var(--glow),.75)}
.btn.k:hover .ar,.btn.k:focus-visible .ar{animation:shoot .55s cubic-bezier(.2,.9,.3,1) both}
.btn.k:hover .ar.dn,.btn.k:focus-visible .ar.dn{animation-name:shoot-dn}
.btn.k:active{transform:translate(0,0);box-shadow:2px 2px 0 rgba(29,27,22,.7),0 0 18px 2px rgba(var(--glow),.6);transition-duration:.08s}
@keyframes shoot{
  0%{transform:none;text-shadow:none;opacity:1}
  35%{transform:translate(34px,-10px);text-shadow:-8px 3px 0 currentColor,-16px 5px 0 rgba(255,212,0,.6),-26px 8px 0 rgba(255,212,0,.3);opacity:0}
  36%{transform:translate(-30px,10px);text-shadow:none;opacity:0}
  100%{transform:none;opacity:1}
}
@keyframes shoot-dn{
  0%{transform:none;text-shadow:none;opacity:1}
  35%{transform:translateY(26px);text-shadow:0 -8px 0 currentColor,0 -16px 0 rgba(255,212,0,.6),0 -26px 0 rgba(255,212,0,.3);opacity:0}
  36%{transform:translateY(-24px);text-shadow:none;opacity:0}
  100%{transform:none;opacity:1}
}
@media (hover:none){.btn.k.fx:hover{transform:none;box-shadow:none}}