/* Geekign Studio — estilos del tema. Generado desde el prototipo v9. */

/* Layout concept: base quieta (papel azulado, linea fina) con un color propio por servicio que recolorea la pagina al navegar; la mesa de foodstyling es la unica seccion calida y oscura. */
@property --live{syntax:'<color>';inherits:true;initial-value:#2433FF}
:root{
  --bg:#E9EEF4; --bg2:#DEE5EE; --card:#F4F7FA;
  --fg:#0B1020; --muted:#47506A; --line:#B8C3D3;
  --accent:#2433FF; --accent-ink:#FFFFFF;
  --c-social:#D61F6E; --c-ads:#F08A00; --c-code:#2433FF; --c-food:#D93A26; --c-herb:#A8B50A; --brand:#A8B50A; --c-ai:#7A3CF0;
  --on-c:#FFFFFF; --on-amber:#0B1020; --on-herb:#0B1020;
  --code-bg:#0B1020; --code-fg:#E8EDF6; --code-k:#93A0FF; --code-c:#8190AE; --code-hl:rgba(147,160,255,.16);
  --fd-bg:#16110D; --fd-bg2:#1F1812; --fd-fg:#F4EADD; --fd-muted:#BBAA96; --fd-line:#3B2F25;
  --live:var(--accent);
  --page:color-mix(in srgb,var(--live) 6%,var(--bg));
  --f-display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --f-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,48px);
  --nav:64px;
  transition:--live .7s ease;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0E18; --bg2:#111726; --card:#0E1422;
    --fg:#E8EDF6; --muted:#9AA6BF; --line:#243049;
    --accent:#7B88FF; --accent-ink:#0A0E18;
    --c-social:#FF5C9C; --c-ads:#FFA938; --c-code:#7B88FF; --c-food:#FF7A5C; --c-herb:#C6D43A; --brand:#C6D43A;
    --on-c:#0A0E18;
    --code-bg:#060912; --code-hl:rgba(147,160,255,.18);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0E18; --bg2:#111726; --card:#0E1422;
  --fg:#E8EDF6; --muted:#9AA6BF; --line:#243049;
  --accent:#7B88FF; --accent-ink:#0A0E18;
  --c-social:#FF5C9C; --c-ads:#FFA938; --c-code:#7B88FF; --c-food:#FF7A5C; --c-herb:#C6D43A; --brand:#C6D43A;
  --on-c:#0A0E18;
  --code-bg:#060912; --code-hl:rgba(147,160,255,.18);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
html.intro{overflow:hidden}
body{background:var(--page);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--live);outline-offset:3px}
section{scroll-margin-top:var(--nav)}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tag::before{content:"";width:8px;height:8px;background:var(--hue,var(--live));border-radius:50%}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.02em;font-variation-settings:'opsz' 96}
h2{font-size:clamp(2rem,5vw,4rem);line-height:1.02}
p{margin:0}
.hl{text-decoration:underline;text-decoration-color:var(--hue);text-decoration-thickness:.13em;text-underline-offset:.14em}

/* ---------- intro: interruptor ---------- */
[hidden]{display:none!important}
#intro{position:fixed;inset:0;z-index:200;background:#0A0E18;color:#E8EDF6;display:grid;place-items:center;padding:24px;transition:transform 1s cubic-bezier(.7,0,.2,1)}
#intro.out{transform:translateY(-101%)}
.fl{position:absolute;inset:0;clip-path:circle(0 at var(--x,50%) var(--y,60%));transition:clip-path 1.15s cubic-bezier(.6,0,.2,1)}
#intro.on .fl{clip-path:circle(160vmax at var(--x,50%) var(--y,60%))}
.fl:nth-child(1){background:var(--c-social)}
.fl:nth-child(2){background:var(--c-ads);transition-delay:.12s}
.fl:nth-child(3){background:var(--c-code);transition-delay:.24s}
.fl:nth-child(4){background:var(--c-food);transition-delay:.36s}
.fl:nth-child(5){background:var(--bg);transition-delay:.5s}
.in-c{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vw,44px);text-align:center;transition:opacity .35s .3s}
#intro.on .in-c{opacity:0}
.in-t{font-size:clamp(2.2rem,8.5vw,6.8rem);line-height:1;font-weight:500;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em}
.st{display:inline-grid;overflow:hidden;height:1.05em;vertical-align:bottom;font-weight:800;font-variation-settings:'wght' 800,'wdth' 80,'opsz' 96}
.st span{grid-area:1/1;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.st .off{color:#8190AE}
.st .onw{color:var(--c-ads);transform:translateY(105%)}
#intro.on .st .off{transform:translateY(-105%)}
#intro.on .st .onw{transform:none}
.bigsw{position:relative;width:min(260px,70vw);height:124px;border-radius:62px;border:2px solid #E8EDF6;background:transparent;cursor:grab;padding:0;touch-action:none}
.bigsw:active{cursor:grabbing}
.bigsw .knob{position:absolute;top:10px;left:10px;width:100px;height:100px;border-radius:50%;background:#E8EDF6;transition:transform .5s cubic-bezier(.6,0,.2,1),background .4s;animation:ring 2.2s ease-out infinite}
#intro.on .bigsw .knob{transform:translateX(calc(min(260px,70vw) - 124px));background:var(--c-ads);animation:none}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(232,237,246,.45)}100%{box-shadow:0 0 0 26px rgba(232,237,246,0)}}
.in-hint{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9AA6BF}
.in-auto{width:min(260px,70vw);height:2px;background:#243049;overflow:hidden}
.in-auto i{display:block;height:100%;width:100%;background:var(--c-ads);transform-origin:left;animation:fill 7s linear both}
@keyframes fill{from{transform:scaleX(0)}}
.skip{position:absolute;right:var(--gut);top:calc(20px + env(safe-area-inset-top,0px));z-index:3;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9AA6BF;background:transparent;border:1px solid #243049;border-radius:999px;padding:8px 16px;cursor:pointer}
.skip:hover{color:#E8EDF6;border-color:#E8EDF6}
html.intro .ch,html.intro .sw-knob,html.intro .obj{animation-play-state:paused}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:calc(var(--nav) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gut) 0;
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--live);transform:scaleX(0);transform-origin:left}
.logo{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;text-decoration:none;display:inline-flex;align-items:baseline;gap:2px}
.logo i{font-style:normal;color:var(--live)}
.links{display:flex;gap:clamp(14px,2.4vw,32px)}
.links a{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.links a:hover,.links a[aria-current="true"]{color:var(--fg);border-color:var(--live)}
.ctrl{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--live);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg);cursor:pointer;transition:border-color .2s}
.icon-btn:hover{border-color:var(--live)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#menu{display:none}
@media (max-width:900px){
  #menu{display:inline-grid}
  .pill .lbl{display:none}
  .links{display:none}
  .nav[data-open="true"] .links{display:flex;flex-direction:column;gap:6px;position:absolute;top:100%;left:0;right:0;padding:16px var(--gut) 24px;background:var(--bg);border-bottom:1px solid var(--line)}
  .nav[data-open="true"] .links a{font-size:14px;padding:12px 0}
}

/* dock de servicios */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:4px;padding:6px;max-width:calc(100vw - 24px);overflow-x:auto;
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;
  transform:translate(-50%,160%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.dock.show{transform:translate(-50%,0)}
.dock a{--h:var(--c-code);display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-decoration:none;white-space:nowrap;color:var(--fg);transition:background .3s,color .3s}
.dock a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--h);transition:background .3s}
.dock a:hover{background:var(--bg2)}
.dock a[aria-current="true"]{background:var(--h);color:var(--on-c)}
.dock a[aria-current="true"]::before{background:var(--on-c)}
.dock a[data-h="ads"][aria-current="true"]{color:var(--on-amber)}
.dock a[data-h="ads"][aria-current="true"]::before{background:var(--on-amber)}
.dock a[data-h="ai"][aria-current="true"]{color:var(--on-c)}
@media (max-width:560px){.dock a{padding:8px 11px;font-size:11px}}

/* cursor */
.cur{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid var(--live);border-radius:50%;pointer-events:none;z-index:150;opacity:0;
  transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
.cur.big{width:60px;height:60px;margin:-30px 0 0 -30px;background:color-mix(in srgb,var(--live) 16%,transparent)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav) + clamp(40px,7vw,88px));padding-bottom:clamp(40px,6vw,72px);overflow:hidden}
#grid{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(20px,3vw,36px)}
.mark{font-size:min(15vw,13.5rem);line-height:.9;letter-spacing:-.025em;white-space:nowrap;font-weight:300}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ch{display:inline-block;font-variation-settings:'wght' var(--w,300),'wdth' var(--wd,100),'opsz' 96;animation:up 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms + 120ms)}
.ch.plus{color:var(--live)}
@keyframes up{from{transform:translateY(108%)}}
.hero-foot{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:clamp(20px,4vw,56px);align-items:end}
.on{display:flex;flex-direction:column;gap:14px}
.sw{display:flex;align-items:center;gap:14px;font-family:var(--f-display);font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.sw-track{width:46px;height:26px;border:1px solid var(--fg);border-radius:999px;position:relative;flex:none}
.sw-knob{position:absolute;top:3px;left:23px;width:18px;height:18px;border-radius:50%;background:var(--c-ads);animation:flip 1.1s 1.2s cubic-bezier(.6,0,.2,1) both}
@keyframes flip{from{left:3px;background:var(--muted)}}
.clock{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);max-width:52ch}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font:500 .95rem var(--f-body);text-decoration:none;border:1px solid var(--fg);border-radius:999px;background:transparent;color:var(--fg);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover{border-color:var(--live)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.hero-foot{grid-template-columns:1fr;align-items:start}}

/* objetos del hero: uno por servicio, cada uno lleva a su panel */
.objs{position:absolute;z-index:1;right:var(--gut);top:calc(var(--nav) + 30px);width:min(46vw,560px);height:250px}
.obj{position:absolute;display:block;text-decoration:none;translate:calc(var(--px,0) * var(--dx,10) * 1px) calc(var(--py,0) * var(--dy,10) * 1px);
  transform:rotate(var(--r,0deg));animation:bob var(--t,7s) ease-in-out infinite;transition:filter .3s}
.obj:hover{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--glow) 55%,transparent))}
@keyframes bob{50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@media (max-width:1000px){.objs{display:none}}
.o-phone{--r:8deg;--t:7s;--dx:16;--dy:12;--glow:var(--c-social);right:16%;top:0}
.ph{display:block;width:104px;height:208px;padding:6px;border-radius:22px;background:linear-gradient(145deg,#343A4A,#0C0F18);box-shadow:0 20px 34px -12px rgba(5,8,20,.55),inset 0 0 0 1px rgba(255,255,255,.14);position:relative}
.ph::before{content:"";position:absolute;top:11px;left:50%;width:28px;height:7px;margin-left:-14px;border-radius:6px;background:#05070D;z-index:2}
.ph::after{content:"";position:absolute;inset:0;border-radius:22px;background:linear-gradient(120deg,rgba(255,255,255,.2),transparent 38%);pointer-events:none}
.ph-s{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:4px;height:100%;padding:26px 6px 8px;border-radius:17px;background:#0F1422}
.ph-s i{display:block;border-radius:6px;background:var(--c)}
.o-ad{--r:-4deg;--t:8s;--dx:-10;--dy:14;--glow:var(--c-ads);left:0;top:60px}
.ad{display:flex;flex-direction:column;justify-content:space-between;width:150px;height:116px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:0 18px 30px -16px rgba(11,16,32,.4)}
.ad b{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--on-amber);background:var(--c-ads);align-self:flex-start;padding:2px 7px;border-radius:4px}
.bars{display:flex;align-items:flex-end;gap:7px;height:56px}
.bars i{flex:1;background:var(--c-ads);border-radius:3px 3px 0 0;transform-origin:bottom;animation:grow 3.4s ease-in-out infinite alternate;animation-delay:var(--d)}
.bars i:nth-child(2){background:var(--c-social)}.bars i:nth-child(3){background:var(--c-code)}.bars i:nth-child(4){background:var(--c-herb)}
@keyframes grow{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.o-web{--r:3deg;--t:9s;--dx:12;--dy:-10;--glow:var(--c-code);left:30%;top:128px}
.win{width:214px;border:1px solid var(--line);border-radius:9px;background:var(--code-bg);box-shadow:0 18px 30px -16px rgba(11,16,32,.5);overflow:hidden}
.win-b{display:flex;gap:5px;align-items:center;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.win-b i{width:7px;height:7px;border-radius:50%;background:var(--code-c);opacity:.6}
.win-b span{margin-left:8px;font-family:var(--f-mono);font-size:9px;color:var(--code-c)}
.win-c{display:flex;flex-direction:column;gap:6px;padding:12px}
.win-c i{display:block;height:6px;border-radius:3px;background:var(--code-k);opacity:.9}
.win-c i:nth-child(2n){background:var(--c-social)}.win-c i:nth-child(3n){background:var(--c-ads)}.win-c i:nth-child(5n){background:var(--c-herb)}
.o-plate{--r:-6deg;--t:6.5s;--dx:-14;--dy:-12;--glow:var(--c-food);right:0;top:150px}
.o-plate svg{display:block;width:124px;height:124px;filter:drop-shadow(0 16px 14px rgba(11,16,32,.35))}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:16px 0}
.marq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-grp{display:flex}
.marq-grp span{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center}
.marq-grp span::after{content:"+";color:var(--c-social);margin-inline:2rem}
.marq-grp span:nth-child(4n+2)::after{color:var(--c-ads)}
.marq-grp span:nth-child(4n+3)::after{color:var(--c-code)}
.marq-grp span:nth-child(4n)::after{color:var(--c-food)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(64px,10vw,140px)}
.sec-head{display:grid;grid-template-columns:1fr 2fr;gap:clamp(16px,4vw,56px);align-items:start;margin-bottom:clamp(32px,5vw,64px)}
.sec-head p.sub{color:var(--muted);max-width:56ch;margin-top:20px;font-size:1.05rem}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:16px}}
@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes rise{from{transform:translateY(28px);opacity:.35}to{transform:none;opacity:1}}
}

/* ---------- servicios: paneles apilados ---------- */
.stack{display:flex;flex-direction:column}
.panel{position:sticky;top:calc(var(--nav) + 14px + var(--k) * 14px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);
  background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--hue);border-radius:6px;padding:clamp(20px,3vw,40px);margin-bottom:24px;min-height:500px;scroll-margin-top:calc(var(--nav) + 8px)}
.panel-txt{display:flex;flex-direction:column;gap:20px;justify-content:space-between;min-width:0}
.panel h3{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.04;margin-top:14px}
.panel p{color:var(--muted);max-width:50ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;padding:7px 12px;border:1px solid color-mix(in srgb,var(--hue) 55%,var(--line));border-radius:999px;background:var(--bg);color:var(--fg)}
.viz{position:relative;min-height:340px;background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;min-width:0}
@media (max-width:820px){
  .panel{grid-template-columns:1fr;position:static;min-height:0}
  .viz{min-height:300px}
}
.soc-grid{position:absolute;inset:0;padding:16px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:12px}
.tl{position:relative;border:1px solid var(--line);background:var(--bg2);display:flex;align-items:flex-end;padding:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow:hidden}
.tl::before{content:"";position:absolute;right:-14%;top:-14%;width:58%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.22)}
.tl:nth-child(1){background:var(--c-social);color:var(--on-c);border-color:transparent}
.tl:nth-child(2){background:var(--c-ads);color:var(--on-amber);border-color:transparent}
.tl:nth-child(3){background:var(--c-code);color:var(--on-c);border-color:transparent}
.tl:nth-child(4){background:var(--fg);color:var(--bg);border-color:transparent}
.tl:nth-child(5){background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 9px)}
.tl:nth-child(5)::before,.tl:nth-child(9)::before{display:none}
.tl:nth-child(6){background:var(--c-herb);color:var(--on-herb);border-color:transparent}
.tl:nth-child(7){background:var(--c-food);color:var(--on-c);border-color:transparent}
.tl:nth-child(8){background:var(--c-social);color:var(--on-c);border-color:transparent;opacity:.85}
.tl:nth-child(9){background:var(--card)}
.head{position:absolute;left:16px;top:16px;width:calc((100% - 56px) / 3);height:calc((100% - 56px) / 3);border:3px solid var(--fg);outline:3px solid var(--bg);pointer-events:none;animation:hop 10s ease-in-out infinite}
@keyframes hop{
  0%{transform:translate(0,0)}
  11.1%{transform:translate(calc(100% + 12px),0)}
  22.2%{transform:translate(calc(200% + 24px),0)}
  33.3%{transform:translate(calc(200% + 24px),calc(100% + 12px))}
  44.4%{transform:translate(calc(100% + 12px),calc(100% + 12px))}
  55.5%{transform:translate(0,calc(100% + 12px))}
  66.6%{transform:translate(0,calc(200% + 24px))}
  77.7%{transform:translate(calc(100% + 12px),calc(200% + 24px))}
  88.8%,100%{transform:translate(calc(200% + 24px),calc(200% + 24px))}
}
#funnel{position:absolute;inset:0;width:100%;height:100%;display:block}
.stages{position:absolute;left:20px;right:28px;bottom:16px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stages span{display:inline-flex;align-items:center;gap:6px}
.stages span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--d)}
.viz.code{background:var(--code-bg);border-color:var(--code-bg);display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,3vw,28px);gap:16px}
.bar{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;color:var(--code-c)}
.bar i{width:9px;height:9px;border-radius:50%;background:var(--code-c);opacity:.5}
.bar i:nth-child(1){background:var(--c-social);opacity:.9}.bar i:nth-child(2){background:var(--c-ads);opacity:.9}.bar i:nth-child(3){background:var(--c-herb);opacity:.9}
.bar span{margin-left:8px}
.codebox{position:relative;font-family:var(--f-mono);font-size:clamp(10.5px,2.3vw,13px);line-height:1.75;color:var(--code-fg);counter-reset:ln;overflow:hidden}
.l{display:block;height:1.75em;white-space:pre;counter-increment:ln}
.l::before{content:counter(ln);display:inline-block;width:2.2em;color:var(--code-c);opacity:.6}
.k{color:var(--code-k)}
.s{color:#F5B971}
.c{color:var(--code-c)}
.scan{position:absolute;left:0;right:0;top:0;height:1.75em;background:var(--code-hl);border-left:2px solid var(--code-k);animation:scan 8s steps(8,end) infinite}
@keyframes scan{to{transform:translateY(800%)}}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--code-k);vertical-align:-.15em;animation:blink 1.1s steps(1) infinite}
.ok{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:#8FE3B1;display:flex;align-items:center;gap:8px}
.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:#8FE3B1}
.viz.foodv{background:var(--fd-bg2);border-color:var(--fd-line)}
.plate{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-a{fill:#F3EEE6;stroke:#CFC6B6;stroke-width:1.2}
.pl-b{fill:none;stroke:var(--fd-muted);stroke-width:1;stroke-dasharray:1.5 9;stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;animation:spin 50s linear infinite reverse}
.spin{transform-box:view-box;transform-origin:50% 50%;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tq{transform-box:fill-box;transform-origin:center;animation:place 9s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:var(--d)}
@keyframes place{0%{transform:scale(0)}12%{transform:scale(1)}92%{transform:scale(1)}100%{transform:scale(0)}}
.t-base{fill:#E7BC6C;stroke:#B9812F;stroke-width:1.2}
.t-a{fill:#D93A26}.t-f{fill:#2E8A4B}.t-m{fill:#B04F9F}
.foodv .go{position:absolute;left:16px;bottom:16px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.mini{border:1px solid var(--line);border-radius:6px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px;transition:border-color .25s,background .25s}
.mini:hover{border-color:var(--hue);background:var(--bg2)}
.mini h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.mini p{color:var(--muted);max-width:46ch}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

/* ---------- foodstyling: la mesa ---------- */
.food{background:var(--fd-bg);color:var(--fd-fg);padding-block:clamp(64px,10vw,140px)}
.food .tag,.food .eyebrow{color:var(--fd-muted)}
.food h2{max-width:16ch}
.food-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.food-head p{color:var(--fd-muted);font-size:1.08rem;max-width:56ch}
.food-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:start}
.stage{position:relative;aspect-ratio:1;max-width:680px;width:100%;border-radius:8px;overflow:hidden;background:#5A3A20;box-shadow:0 40px 70px -30px rgba(0,0,0,.8)}
.tilt{position:absolute;inset:0;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
#scene{display:block;width:100%;height:100%}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.stage.shot .flash{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.vf{position:absolute;inset:7%;pointer-events:none;opacity:0;transition:opacity .2s}
.stage.shot .vf{opacity:1}
.vf::before,.vf::after,.vf i::before,.vf i::after{content:"";position:absolute;width:28px;height:28px;border:2px solid #fff}
.vf::before{left:0;top:0;border-right:0;border-bottom:0}
.vf::after{right:0;top:0;border-left:0;border-bottom:0}
.vf i::before{left:0;bottom:0;border-right:0;border-top:0}
.vf i::after{right:0;bottom:0;border-left:0;border-top:0}
.vf b{position:absolute;left:0;bottom:-26px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;font-weight:400;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.food-ctrl{display:flex;flex-direction:column;gap:26px}
.food-ctrl h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.food-ctrl .eyebrow{margin-bottom:12px}
.ings{display:flex;flex-wrap:wrap;gap:8px}
.ib{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--fd-line);border-radius:999px;background:transparent;color:var(--fd-fg);font:400 .9rem var(--f-body);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.ib i{width:11px;height:11px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.ib:hover{border-color:var(--fd-fg)}
.ib[aria-pressed="false"]{color:var(--fd-muted)}
.ib[aria-pressed="false"] i{opacity:.35}
.ib[aria-pressed="true"]{background:var(--fd-bg2);border-color:var(--fd-fg)}
.rng{display:flex;align-items:center;gap:16px}
.rng label{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted)}
.rng input{flex:1;accent-color:#FF9A3C;min-width:0}
.temps{display:flex;gap:8px;flex-wrap:wrap}
.tb{padding:8px 16px;border:1px solid var(--fd-line);border-radius:999px;background:transparent;color:var(--fd-muted);font:400 .85rem var(--f-body);cursor:pointer}
.tb[aria-pressed="true"]{background:var(--fd-fg);color:var(--fd-bg);border-color:var(--fd-fg)}
.meter-l{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fd-muted);margin-bottom:10px}
.meter{height:8px;border-radius:4px;background:var(--fd-line);overflow:hidden}
.meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c-herb),var(--c-ads),var(--c-food));transform-origin:left;transform:scaleX(var(--m,1));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.meter-n{font-size:.85rem;color:var(--fd-muted);margin-top:10px}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.food .btn{border-color:var(--fd-fg);color:var(--fd-fg)}
.food .btn:hover{border-color:#FF9A3C}
.food .btn.pri{background:var(--c-food);border-color:var(--c-food);color:#fff}
.food .btn.pri:hover{background:var(--fd-fg);color:var(--fd-bg);border-color:var(--fd-fg)}
.adv{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,6vw,80px)}
.adv-c{border-top:1px solid var(--fd-fg);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.adv-c h3{font-size:1.35rem}
.adv-c p{color:var(--fd-muted);font-size:.95rem}
.adv-c .eyebrow{color:#FF9A3C}
@media (max-width:980px){.food-head,.food-grid{grid-template-columns:1fr}.adv{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.adv{grid-template-columns:1fr}}
.ing{opacity:0;transform:translateY(-34px) scale(1.12);transform-box:fill-box;transform-origin:center;transition:opacity .45s,transform .65s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.ing.on{opacity:1;transform:none}
#steam{transition:opacity .8s;opacity:0}
#steam.on{opacity:1}
.wisp{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;opacity:.0;filter:blur(7px);animation:steam 4.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes steam{0%{transform:translateY(20px);opacity:0}30%{opacity:.28}100%{transform:translateY(-46px);opacity:0}}

/* ---------- portafolio ---------- */
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idx a{display:grid;grid-template-columns:1fr auto 28px;align-items:center;gap:20px;padding:clamp(18px,2.4vw,30px) 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.idx .nm{display:flex;align-items:center;font-family:var(--f-display);font-weight:500;font-size:clamp(1.7rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.02em;transition:font-variation-settings .35s;font-variation-settings:'wght' 400,'wdth' 100,'opsz' 96}
.idx .nm::before{content:"";flex:none;width:0;height:.55em;margin-right:0;background:var(--c);border-radius:3px;transition:width .35s cubic-bezier(.2,.8,.2,1),margin .35s}
.idx .ct{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}
.idx .ar{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s,stroke .25s}
.idx a:hover .nm,.idx a:focus-visible .nm{font-variation-settings:'wght' 700,'wdth' 90,'opsz' 96}
.idx a:hover .nm::before,.idx a:focus-visible .nm::before{width:.55em;margin-right:.3em}
.idx a:hover .ar,.idx a:focus-visible .ar{stroke:var(--c);transform:translate(3px,-3px)}
@media (max-width:640px){.idx a{grid-template-columns:1fr 24px}.idx .ct{grid-column:1;grid-row:2;text-align:left}.idx .ar{grid-column:2;grid-row:1}}
#pv{position:fixed;left:0;top:0;z-index:40;pointer-events:none;width:300px}
.pv-card{width:300px;height:200px;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;opacity:0;transform:scale(.85) rotate(-3deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 40px -18px rgba(11,16,32,.45)}
#pv.on .pv-card{opacity:1;transform:none}
.pv-bar{display:flex;gap:5px;padding:9px 10px;border-bottom:1px solid var(--line)}
.pv-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.pv-body{position:relative;height:calc(100% - 26px);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  background:repeating-linear-gradient(var(--a,135deg),var(--pc,var(--line)) 0 1px,transparent 1px 11px)}
.pv-body b{font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;line-height:1;background:var(--card);align-self:flex-start;padding:4px 8px 4px 0}
.pv-body span{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--card);align-self:flex-start;padding:2px 8px 2px 0}
#pvImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.pv-body.has-img #pvImg{opacity:1}
.pv-body.has-img b,.pv-body.has-img span{position:relative;background:color-mix(in srgb,var(--card) 88%,transparent);padding-left:8px}

/* ===== v6: combo desarmado sobre la foto real ===== */
.dz{margin-top:clamp(56px,8vw,110px)}
.dz-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(20px,3vw,36px)}
.dz-head h3{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.02em;margin:6px 0 14px}
.dz-head .sub{color:var(--fd-muted);max-width:54ch}
.dz-ctl{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.dz-lbl{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-muted);margin-bottom:6px}
.dz-rng{width:100%;accent-color:var(--c-food);height:32px;cursor:pointer;touch-action:pan-y}
.dz-wrap{container-type:inline-size}
.dz-stage{--t:0;--px:0;--py:0;--h2:66.65;position:relative;width:100%;height:calc((66.65 + (var(--h2) - 66.65)*var(--t))*1cqw);border:1px solid var(--fd-line);border-radius:12px;overflow:hidden;background:#1a130e;touch-action:pan-y}
.dz-soft,.dz-photo,.dz-shade{position:absolute;pointer-events:none;user-select:none}
.dz-soft{inset:0;width:100%;height:100%;object-fit:cover;}
.dz-photo{left:0;top:0;width:100cqw;height:auto;opacity:max(0,calc(1 - var(--t)*5))}
.dz-shade{inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(20,12,6,calc(var(--t)*.15)) 0,rgba(10,6,3,calc(var(--t)*.38)) 100%)}
.pc[data-k=tacos]{--ax:5.43;--ay:16.03;--aw:36.22;--bx:4;--by:3;--bw:28;--br:-5}
.pc[data-k=quesadilla]{--ax:40.68;--ay:4.58;--aw:37.73;--bx:36;--by:2;--bw:29;--br:3}
.pc[data-k=flautas]{--ax:26.13;--ay:31.99;--aw:27.87;--bx:9;--by:39;--bw:17.5;--br:-6}
.pc[data-k=dorado]{--ax:49.69;--ay:36.22;--aw:24.50;--bx:37;--by:37;--bw:19;--br:5}
.pc[data-k=verde]{--ax:72.52;--ay:-5.86;--aw:18.32;--bx:74;--by:3;--bw:16;--br:-8}
.pc[data-k=roja]{--ax:73.84;--ay:31.21;--aw:19.18;--bx:70;--by:36;--bw:16;--br:7}
.pc{position:absolute;margin:0;
  left:calc((var(--ax)*(1 - var(--t)) + var(--bx)*var(--t))*1cqw);top:calc((var(--ay)*(1 - var(--t)) + var(--by)*var(--t))*1cqw);
  width:calc((var(--aw)*(1 - var(--t)) + var(--bw)*var(--t))*1cqw);transform:rotate(calc(var(--br)*var(--t)*1deg))}
.pc-i{display:block;transform:translate3d(calc(var(--px)*var(--d)*1cqw*var(--t)),calc(var(--py)*var(--d)*.7cqw*var(--t)),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pc img{display:block;width:100%;height:auto;animation:dzf 6.5s ease-in-out var(--dl) infinite;
  filter:drop-shadow(0 calc(1.6cqw*var(--t)) calc(1.5cqw*var(--t)) rgba(0,0,0,calc(.6*var(--t))));transition:scale .4s cubic-bezier(.2,.8,.2,1)}
.pc:hover img{scale:1.045}
@keyframes dzf{50%{transform:translateY(calc(-1.1cqw*var(--t))) rotate(calc(.9deg*var(--t)))}}
.pc figcaption{position:absolute;left:50%;top:calc(100% - .6cqw);translate:-50% 0;white-space:nowrap;display:flex;gap:1cqw;align-items:center;padding:.7cqw 1.4cqw .7cqw .9cqw;border:1px solid var(--fd-line);border-radius:99px;
  background:color-mix(in srgb,var(--fd-bg) 88%,transparent);backdrop-filter:blur(6px);opacity:calc(var(--t)*var(--t)*var(--t));pointer-events:none;font-size:clamp(9px,1.3cqw,13px);color:var(--fd-fg)}
.pc figcaption i{font-style:normal;font-family:var(--f-mono);color:#FF9A3C;font-size:.9em}
.pc figcaption b{display:block;font-weight:600;line-height:1.15}
.pc figcaption small{display:block;color:var(--fd-muted);font-size:.85em;line-height:1.2}
@container (max-width:640px){.dz-stage{--h2:141}.pc[data-k=tacos]{--bx:2;--by:3;--bw:46;--br:-4}.pc[data-k=quesadilla]{--bx:52;--by:4;--bw:46;--br:3}.pc[data-k=flautas]{--bx:6;--by:80;--bw:36;--br:-5}.pc[data-k=dorado]{--bx:50;--by:82;--bw:42;--br:4}.pc[data-k=verde]{--bx:47;--by:62;--bw:22;--br:-6}.pc[data-k=roja]{--bx:77;--by:63;--bw:20;--br:6}.pc figcaption small{display:none}.pc figcaption{padding:1cqw 2.4cqw 1cqw 1.8cqw;gap:1.6cqw;font-size:10.5px}}
@media (max-width:760px){.dz-head{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pc img{animation:none}.pc-i{transition:none}}

/* ===== v7: navegación y experiencia móvil ===== */
html.noscroll,html.noscroll body{overflow:hidden}
.mnav{display:none}
.tabbar{display:none}
@media (max-width:900px){
  .mnav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:120;visibility:hidden;background:#0A0E18;color:#E8EDF6;
    padding:calc(76px + env(safe-area-inset-top,0px)) var(--gut) calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;
    clip-path:circle(0 at var(--mx,92%) var(--my,36px));transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s .75s}
  .mnav.open{visibility:visible;clip-path:circle(150vmax at var(--mx,92%) var(--my,36px));transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s}
  .mn-top{position:absolute;left:var(--gut);right:var(--gut);top:calc(14px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:center}
  .mn-top .lg{height:24px;width:auto;--lg-ink:#E8EDF6}
  .mn-x{width:42px;height:42px;border-radius:50%;border:1px solid rgba(232,237,246,.28);background:transparent;color:#E8EDF6;display:grid;place-items:center;cursor:pointer}
  .mn-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .mn-links{display:flex;flex-direction:column;margin:auto 0}
  .mn-links a{--h:var(--c-social);position:relative;display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:4px 10px;padding:14px 0;border-bottom:1px solid rgba(232,237,246,.12);text-decoration:none;color:#E8EDF6;
    opacity:0;transform:translateY(34px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
  .mnav.open .mn-links a{opacity:1;transform:none;transition-delay:calc(.28s + var(--i)*.06s)}
  .mn-links a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--h);transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .mn-links a:active::after,.mn-links a[aria-current="true"]::after{width:100%}
  .mn-links i{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--h)}
  .mn-links b{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,9.5vw,3.2rem);line-height:1;letter-spacing:-.02em;font-variation-settings:'wght' 600,'wdth' 92}
  .mn-links small{grid-column:2;font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:#8E9AB4;text-transform:uppercase}
  .mn-foot{display:flex;flex-wrap:wrap;gap:10px;padding-top:22px;opacity:0;transition:opacity .5s .7s}
  .mnav.open .mn-foot{opacity:1}
  .mn-foot .btn{border-color:rgba(232,237,246,.4);color:#E8EDF6}
  .mn-foot .btn.pri{background:var(--brand);border-color:var(--brand);color:#0B1020}
}
@media (max-width:700px){
  .dock,body .wa{display:none!important}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:46;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:62px;border-radius:22px;
    background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);
    box-shadow:0 16px 34px -14px rgba(11,16,32,.5);transform:translateY(150%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
  .tabbar.show{transform:none}
  .tabbar>a,.tabbar>button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:0;padding:0;color:var(--muted);
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:color .3s}
  .tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .tabbar>[aria-current="true"]{color:var(--fg)}
  .tabbar>[aria-current="true"] svg{transform:translateY(-2px) scale(1.15)}
  .tabbar>a:active svg,.tabbar>button:active svg{transform:scale(.88)}
  .tb-ind{position:absolute;top:-1px;left:0;width:20%;height:3px;display:grid;place-items:center;transform:translateX(calc(var(--ti,0)*100%));transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
  .tb-ind::after{content:"";width:30px;height:3px;border-radius:3px;background:var(--live)}
  .tabbar.noind .tb-ind{opacity:0}
  .tb-wa{overflow:visible}
  .tb-wa .fab{width:54px;height:54px;border-radius:50%;margin-top:-26px;display:grid;place-items:center;background:var(--brand);color:#0B1020;box-shadow:0 10px 22px -6px color-mix(in srgb,var(--brand) 70%,#000),0 0 0 5px color-mix(in srgb,var(--bg) 82%,transparent);animation:fabp 3.4s ease-in-out infinite}
  .tb-wa .fab svg{width:25px;height:25px}
  @keyframes fabp{50%{transform:translateY(-3px) scale(1.04)}}
  footer{padding-bottom:110px}
}
/* objetos del hero en móvil: bajan a la lectura, cada uno enlaza a su servicio */
.objs.mob{position:relative;right:auto;top:auto;display:block;width:560px;height:250px;margin:6px auto 0;pointer-events:auto}
@media (max-width:600px){.objs.mob{zoom:.7;margin-left:0}}
@media (max-width:440px){.objs.mob{zoom:.6}}
@media (max-width:370px){.objs.mob{zoom:.54}}
/* portafolio en pantallas táctiles: la fila "despierta" al centrar la pantalla */
.idx .th{display:none}
@media (hover:none){
  .idx .th{display:block;grid-column:1/-1;width:100%;height:0;opacity:0;object-fit:cover;border-radius:6px;margin-top:0;transition:height .6s cubic-bezier(.2,.8,.2,1),opacity .5s,margin .5s}
  .idx li.act .th{height:min(46vw,200px);opacity:1;margin-top:14px}
  .idx li.act a{background-size:100% 100%;color:var(--on)}
  .idx li.act a .nm::before{width:.55em;margin-right:.3em;background:var(--on)}
  .idx li.act a .ct{color:var(--on)}
  .idx li.act a .ar{stroke:var(--on);transform:translate(3px,-3px)}
}
/* respaldo de revelado para navegadores sin animation-timeline (Safari/Firefox móvil) */
@supports not (animation-timeline: view()){
  html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
  html.js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}.mnav,.mn-links a{transition:none}.tb-wa .fab{animation:none}}

/* ===== v8: AI Creators ===== */
.ai{position:relative}
.ai-grad{background:linear-gradient(100deg,var(--c-ai),var(--c-social) 60%,var(--c-ads));-webkit-background-clip:text;background-clip:text;color:transparent}
.aiw{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.ai-stage{--ai-c:var(--c-social);--ex:0;--ey:0;position:relative;aspect-ratio:1/1.04;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ai-c) 32%,var(--card)) 0,var(--card) 70%);transition:background .5s}
.ai-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--ai-c) 10%,transparent) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--ai-c) 10%,transparent) 23px 24px);mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 75%)}
.ai-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ai-bubble{position:absolute;z-index:2;left:5%;top:5%;max-width:60%;padding:10px 14px;background:var(--bg);border:1px solid var(--line);border-radius:16px 16px 16px 4px;font-size:clamp(.82rem,1.6vw,.95rem);line-height:1.3;box-shadow:0 10px 24px -14px rgba(11,16,32,.5);animation:aibub .5s cubic-bezier(.2,.8,.2,1)}
@keyframes aibub{from{opacity:0;transform:translateY(8px) scale(.94)}}
.ai-tap{position:absolute;z-index:2;right:14px;bottom:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.ai-char{transform-origin:200px 392px;animation:aifloat 4.6s ease-in-out infinite}
.ai-char.pop{animation:aipop .7s cubic-bezier(.2,.8,.2,1)}
@keyframes aifloat{50%{transform:translateY(-9px)}}
@keyframes aipop{0%{transform:scale(1)}30%{transform:translateY(-28px) scale(1.06,.94) rotate(-3deg)}60%{transform:translateY(0) scale(.96,1.05)}100%{transform:none}}
.ai-shadow{animation:aishadow 4.6s ease-in-out infinite;transform-origin:200px 396px}
@keyframes aishadow{50%{transform:scale(.88);opacity:.6}}
.ai-eyes{transform-box:fill-box;transform-origin:center;animation:aiblink 5.2s infinite}
@keyframes aiblink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
.ai-pu{transform:translate(calc(var(--ex)*5px),calc(var(--ey)*4px));transition:transform .12s}
.ai-wave{transform-box:fill-box;transform-origin:0% 100%;animation:aiwave 2.4s ease-in-out infinite}
@keyframes aiwave{50%{transform:rotate(-16deg)}}
.ai-tail{transform-box:fill-box;transform-origin:0% 100%;animation:aitail 3s ease-in-out infinite}
@keyframes aitail{50%{transform:rotate(12deg)}}
.ai-ctl h3{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.04;margin:8px 0 10px}
.ai-ctl .hint{color:var(--muted);margin:0 0 18px;max-width:46ch}
.ai-fs{border:0;padding:0;margin:0 0 18px;min-width:0}
.ai-fs legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:10px}
.ai-sw{display:flex;gap:12px;flex-wrap:wrap}
.ai-sw button{width:38px;height:38px;border-radius:50%;border:2px solid var(--bg);background:var(--s);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ai-sw button:hover{transform:scale(1.12)}
.ai-sw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--s);transform:scale(1.08)}
.ai-sheet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.8,.2,1),margin .7s;margin-top:0}
.ai-sheet>*{overflow:hidden;min-height:0}
.ai-sheet.open{grid-template-rows:1fr;margin-top:clamp(24px,4vw,40px)}
.ai-sheet .eyebrow{margin-bottom:14px}
.ai-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ai-tile{position:relative;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--ai-c) 26%,var(--card)),var(--card) 72%);opacity:0;transform:translateY(18px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.ai-sheet.open .ai-tile{opacity:1;transform:none;transition-delay:calc(var(--i)*.09s + .2s)}
.ai-tile svg{position:absolute;inset:0;width:100%;height:100%}
.ai-tile span{position:absolute;left:10px;bottom:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ai-feed-head{margin-top:clamp(56px,8vw,110px);margin-bottom:22px}
.ai-feed-head h3{font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.04;margin-top:8px}
.ai-feed{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ai-post{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 38%,var(--card)),color-mix(in srgb,var(--pc) 8%,var(--card)));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ai-post:hover{transform:translateY(-6px) rotate(-1deg)}
.ai-post svg{position:absolute;left:0;right:0;top:4%;width:100%;height:78%}
.ai-post .cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 92%,transparent) 55%)}
.ai-post .cap small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ai-post .cap b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem;line-height:1.1;margin-top:3px}
.ai-post .pl{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.ai-post .pl svg{position:static;width:12px;height:12px;fill:var(--fg)}
.ai-what{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,7vw,96px)}
.ai-card{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--hue);border-radius:6px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.ai-card h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05}
.ai-card p{margin:0;color:var(--muted)}
.ai-card .eyebrow{color:var(--hue)}
.ai-steps{list-style:none;margin:clamp(48px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;position:relative}
.ai-steps::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:linear-gradient(90deg,var(--c-ai),var(--c-social),var(--c-ads),var(--c-herb),var(--c-code));opacity:.55}
.ai-steps li{counter-increment:s;position:relative;padding:44px 18px 0 0;display:flex;flex-direction:column;gap:6px}
.ai-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--c-ai);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;color:var(--fg)}
.ai-steps b{font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.1}
.ai-steps span{color:var(--muted);font-size:.93rem}
.ai-pledge{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ai-pledge li{display:flex;flex-direction:column;gap:4px}
.ai-pledge b{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ai)}
.ai-pledge span{color:var(--muted);font-size:.93rem}
@media (max-width:980px){.aiw{grid-template-columns:1fr}.ai-stage{max-width:560px;margin-inline:auto;width:100%}.ai-what{grid-template-columns:1fr}.ai-pledge{grid-template-columns:1fr 1fr}.ai-steps{grid-template-columns:1fr;gap:0}.ai-steps::before{left:15px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--c-ai),var(--c-social),var(--c-ads),var(--c-herb),var(--c-code))}.ai-steps li{padding:0 0 26px 52px}.ai-steps li::before{top:-2px}}
@media (max-width:760px){
  .ai-sheet-grid{grid-template-columns:1fr 1fr}
  .ai-feed{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ai-feed::-webkit-scrollbar{display:none}
  .ai-post{flex:0 0 72%;scroll-snap-align:center}
  .ai-pledge{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ai-char,.ai-shadow,.ai-eyes,.ai-wave,.ai-tail{animation:none}.ai-tile{opacity:1;transform:none;transition:none}}
@media (hover:none),(pointer:coarse){#pv{display:none}}

/* ---------- nosotros ---------- */
.about-top{display:grid;grid-template-columns:1fr 2fr;gap:clamp(16px,4vw,56px);margin-bottom:clamp(32px,5vw,64px)}
.trio{display:flex;flex-wrap:wrap;gap:.1em .35em;font-family:var(--f-display);font-weight:500;font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.03em}
.trio .x{color:var(--c-ads);font-weight:300}
.trio .w{font-variation-settings:'wght' 500,'wdth' 100,'opsz' 96;transition:font-variation-settings .5s;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.09em;text-underline-offset:.1em}
.trio .w:hover{font-variation-settings:'wght' 800,'wdth' 78,'opsz' 96;text-decoration-color:var(--h)}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.col{border-top:3px solid var(--h);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.col p{color:var(--muted)}
@media (max-width:820px){.about-top,.cols{grid-template-columns:1fr}}

/* ---------- contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,80px);align-items:start}
.soc-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.full{grid-column:1 / -1}
.f label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f input,.f textarea{width:100%;font:400 1rem var(--f-body);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;transition:border-color .25s}
.f textarea{resize:vertical;min-height:120px}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--live)}
.f:focus-within label{color:var(--fg)}
.send{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#fstatus{font-size:.9rem;color:var(--muted);min-height:1.4em}
@media (max-width:820px){.contact{grid-template-columns:1fr}form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px 96px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer p{font-size:.9rem;color:var(--muted)}
footer .links-f{display:flex;gap:20px;align-items:center}
footer .links-f a,footer .links-f button{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);background:transparent;border:0;padding:0;cursor:pointer}
footer .links-f a:hover,footer .links-f button:hover{color:var(--fg)}

/* ===== v3: color y fluidez ===== */
.lead-wrap{display:flex;flex-direction:column;gap:14px}
.roll-line{font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.15;letter-spacing:-.02em}
.roll{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.28em;padding-bottom:.04em}
.rw{grid-area:1/1;white-space:nowrap;font-weight:700;transform:translateY(112%);transition:transform .75s cubic-bezier(.7,0,.2,1);
  background:linear-gradient(transparent 60%,color-mix(in srgb,var(--h) 60%,transparent) 60%)}
.rw.on{transform:none}
.rw.out{transform:translateY(-112%)}

.dock a.go{background:var(--accent);color:var(--accent-ink);margin-left:4px}
.dock a.go::before{display:none}
.dock a.go:hover{background:var(--fg);color:var(--bg)}

.marq-track.js{animation:none;will-change:transform}
.marq-grp span{padding:8px 18px;margin-right:12px;border-radius:999px;background:color-mix(in srgb,var(--h) 16%,transparent);border:1px solid color-mix(in srgb,var(--h) 55%,transparent)}
.marq-grp span::after{display:none}
.marq-grp span:nth-child(5n+1){--h:var(--c-social)}
.marq-grp span:nth-child(5n+2){--h:var(--c-ads)}
.marq-grp span:nth-child(5n+3){--h:var(--c-code)}
.marq-grp span:nth-child(5n+4){--h:var(--c-food)}
.marq-grp span:nth-child(5n){--h:var(--c-herb)}

.panel{background:radial-gradient(520px circle at var(--mx,70%) var(--my,0%),color-mix(in srgb,var(--hue) 16%,transparent),transparent 62%),var(--bg2);transition:border-color .3s}
.tl{cursor:pointer;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tl:hover{transform:scale(1.04) rotate(-1deg)}
.heart{position:absolute;width:18px;height:18px;pointer-events:none;animation:floatup 1.3s ease-out both;z-index:3}
.heart svg{width:100%;height:100%;fill:currentColor}
@keyframes floatup{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translateY(-70px) scale(1.2);opacity:0}}
#funnel{cursor:pointer}
.runrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.runbtn{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:8px 16px;border-radius:999px;border:1px solid var(--code-k);background:transparent;color:var(--code-k);cursor:pointer;transition:background .25s,color .25s}
.runbtn:hover{background:var(--code-k);color:var(--code-bg)}

.wave{position:relative;height:76px;overflow:hidden;margin-top:-1px}
.wave svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block}
.wave .w1{transform:translateY(0);animation:drift 22s linear infinite}
.wave .w2{transform:translateY(11px);animation:drift 17s linear infinite reverse}
.wave .w3{transform:translateY(22px);animation:drift 13s linear infinite}
.wave .w4{transform:translateY(33px);animation:drift 19s linear infinite reverse}
@keyframes drift{to{margin-left:-100%}}
.wbot{transform:scaleY(-1);margin-top:0;margin-bottom:-1px}

.idx a{background:linear-gradient(var(--c),var(--c)) no-repeat left center/0% 100%;transition:background-size .55s cubic-bezier(.2,.8,.2,1),padding .35s cubic-bezier(.2,.8,.2,1),color .3s}
.idx li{--on:var(--on-c)}
.idx li[style*="--c-ads"]{--on:var(--on-amber)}
.idx a:hover,.idx a:focus-visible{background-size:100% 100%;color:var(--on)}
.idx a:hover .nm::before,.idx a:focus-visible .nm::before{background:var(--on)}
.idx a:hover .ct,.idx a:focus-visible .ct{color:var(--on)}
.idx a:hover .ar,.idx a:focus-visible .ar{stroke:var(--on)}

.mini{background:color-mix(in srgb,var(--hue) 10%,var(--bg));border-color:color-mix(in srgb,var(--hue) 40%,var(--line))}
.mini:hover{background:color-mix(in srgb,var(--hue) 18%,var(--bg))}

.col{background:color-mix(in srgb,var(--h) 13%,var(--bg));padding:22px;border-radius:8px;border-top:3px solid var(--h)}
.trio .w{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--h) 50%,transparent) 64%)}
.trio .x{display:inline-block;animation:spinx 9s linear infinite}
@keyframes spinx{to{transform:rotate(360deg)}}

.brief-box{position:relative;border-radius:14px;padding:clamp(24px,5vw,64px);background:color-mix(in srgb,var(--c-code) 8%,var(--bg));border:1px solid var(--line);overflow:hidden}
.brief-box::before,.brief-box::after{content:"";position:absolute;width:56%;aspect-ratio:1;border-radius:50%;filter:blur(14px);pointer-events:none}
.brief-box::before{right:-14%;top:-30%;background:radial-gradient(circle,color-mix(in srgb,var(--c-social) 38%,transparent),transparent 65%);animation:blob 14s ease-in-out infinite alternate}
.brief-box::after{left:-16%;bottom:-40%;background:radial-gradient(circle,color-mix(in srgb,var(--c-ads) 36%,transparent),transparent 65%);animation:blob 18s ease-in-out infinite alternate-reverse}
@keyframes blob{to{transform:translate(-9%,11%) scale(1.18)}}
.brief-box>*{position:relative;z-index:1}
.brief-head .sub{color:var(--muted);max-width:56ch;margin-top:16px;font-size:1.05rem}
.dsteps{display:flex;gap:8px;margin:28px 0 24px;max-width:420px}
.dstep{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .5s}
.dstep.on:nth-child(1){background:var(--c-social)}
.dstep.on:nth-child(2){background:var(--c-ads)}
.dstep.on:nth-child(3){background:var(--c-code)}
.bstep h3{font-size:clamp(1.5rem,3vw,2.3rem)}
.bstep .hint{color:var(--muted);margin:6px 0 20px;font-size:.95rem}
.bstep:not([hidden]){animation:stepin .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes stepin{from{opacity:0;transform:translateX(26px)}}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{padding:14px 22px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--h) 65%,var(--line));background:var(--bg);color:var(--fg);font:500 1rem var(--f-body);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.opt:hover{transform:translateY(-3px) rotate(-1deg)}
.opt[aria-pressed="true"]{background:var(--h);color:var(--on);border-color:var(--h);transform:scale(1.03)}
.bnav{display:flex;gap:12px;margin-top:30px;align-items:center;flex-wrap:wrap}
.btn[disabled]{opacity:.4;pointer-events:none}
.rlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.rlist li{display:grid;grid-template-columns:14px 1fr;gap:2px 16px;align-items:center;padding:16px 20px;border-radius:10px;background:color-mix(in srgb,var(--h) 17%,var(--bg));animation:stepin .5s cubic-bezier(.2,.8,.2,1) both}
.rlist li::before{content:"";grid-row:1/3;width:14px;height:14px;border-radius:50%;background:var(--h)}
.rlist li b{font-family:var(--f-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.rlist li span{grid-column:2;color:var(--muted);font-size:.95rem}

.contact{position:relative;padding:clamp(24px,5vw,64px);border-radius:14px;background:color-mix(in srgb,var(--c-social) 7%,var(--bg));border:1px solid var(--line);overflow:hidden}
.contact::before{content:"";position:absolute;left:-12%;top:-28%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-code) 30%,transparent),transparent 65%);filter:blur(14px);animation:blob 16s ease-in-out infinite alternate;pointer-events:none}
.contact::after{content:"";position:absolute;right:-10%;bottom:-34%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-ads) 32%,transparent),transparent 65%);filter:blur(14px);animation:blob 20s ease-in-out infinite alternate-reverse;pointer-events:none}
.contact>*{position:relative;z-index:1}
.f:nth-child(4n+1) input:focus{border-bottom-color:var(--c-social)}
.f:nth-child(4n+2) input:focus{border-bottom-color:var(--c-ads)}
.f:nth-child(4n+3) input:focus{border-bottom-color:var(--c-code)}
.f:nth-child(4n) input:focus,.f textarea:focus{border-bottom-color:var(--c-food)}
.f input,.f textarea{border-bottom-width:2px}

.fwrap{overflow:hidden;padding-top:clamp(24px,4vw,56px)}
.fmark{font-family:var(--f-display);font-size:min(15vw,14rem);line-height:.95;letter-spacing:-.03em;white-space:nowrap;text-align:center;font-weight:300;font-variation-settings:'wght' 300,'wdth' 100,'opsz' 96}
.ch2{display:inline-block;font-variation-settings:'wght' 300,'wdth' 100,'opsz' 96}

#cf{position:fixed;inset:0;width:100%;height:100%;z-index:180;pointer-events:none}

/* ===== v4: marca, WhatsApp, formulario ===== */
.lg{display:block}
.lg-ink{fill:var(--lg-ink,#373435)}
.lg-brand{fill:var(--brand,#A8B50A)}
.lg-tx{font:954.88px Arial,Helvetica,sans-serif;fill:var(--lg-ink,#373435)}
.logo .lg-w{height:26px;width:auto;aspect-ratio:12870/2160;--lg-ink:var(--fg)}
.in-logo{width:min(400px,74vw);height:auto;--lg-ink:#E8EDF6}
.lg-foot{width:min(240px,60vw);height:auto;--lg-ink:var(--fg)}
.f-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.wa{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:44;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;
  background:var(--brand);color:#0B1020;font:500 .9rem var(--f-body);text-decoration:none;box-shadow:0 14px 28px -12px rgba(11,16,32,.5);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.wa:hover{transform:translateY(-3px) scale(1.04)}
.wa svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.intro .wa{display:none}
@media (max-width:700px){.wa{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:12px}.wa span{display:none}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.idx li[style*="--c-herb"]{--on:var(--on-herb)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Cohete: volver arriba ---------- */
.rkt{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:44;width:52px;height:52px;padding:0;border:0;border-radius:50%;
  background:var(--fg);color:var(--bg);cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 14px 28px -12px rgba(11,16,32,.55);opacity:0;visibility:hidden;transform:translateY(24px) scale(.6);
  transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.6,.5,1),visibility 0s linear .5s}
.rkt.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.6,.5,1),visibility 0s}
.rkt.on:hover{transform:translateY(-4px) scale(1.06)}
.rkt:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
html.intro .rkt{display:none}
.rkt-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.rkt-ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.rkt-ring .t{stroke:color-mix(in srgb,var(--fg) 14%,transparent)}
.rkt-ring .p{stroke:var(--brand);stroke-dasharray:138.2;stroke-dashoffset:138.2}
.rkt-svg{width:31px;height:31px;overflow:visible;animation:rkFloat 3.2s ease-in-out infinite}
.rkt-svg .body{fill:var(--bg);stroke:var(--bg);stroke-width:.4}
.rkt-svg .fin{fill:var(--brand)}
.rkt-svg .win{fill:var(--fg)}
.rkt-svg .ring{fill:none;stroke:var(--fg);stroke-width:1.1}
.rkt-svg .flame{transform-origin:12px 17.5px;transform:scaleY(.35);opacity:.0;transition:opacity .2s,transform .3s}
.rkt:hover .rkt-svg .flame{opacity:.9;transform:scaleY(.7);animation:rkFlame .18s ease-in-out infinite alternate}
@keyframes rkFloat{50%{transform:translateY(-2px)}}
@keyframes rkFlame{from{transform:scaleY(.6)}to{transform:scaleY(.95)}}
.rkt-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);padding:6px 10px;border-radius:999px;background:var(--fg);color:var(--bg);
  font:500 .72rem var(--f-mono);letter-spacing:.06em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
@media (hover:hover){.rkt.on:hover .rkt-tip{opacity:1;transform:translate(0,-50%)}}
/* despegue */
.rkt.ig{animation:rkShake .09s linear infinite}
.rkt.ig .rkt-svg{animation:none}
.rkt.ig .rkt-svg .flame,.rkt.fly .rkt-svg .flame{opacity:1;transform:scaleY(1.5);animation:rkFlame .09s ease-in-out infinite alternate}
.rkt.fly{transition:none;box-shadow:0 0 0 0 transparent;background:transparent;pointer-events:none}
.rkt.fly .rkt-ring,.rkt.fly .rkt-tip{opacity:0}
.rkt.fly .rkt-svg{animation:none;width:34px;height:34px}
.rkt.fly .rkt-svg .body{fill:var(--fg);stroke:var(--fg)}
.rkt.fly .rkt-svg .win{fill:var(--bg)}
.rkt.fly .rkt-svg .ring{stroke:var(--bg)}
@keyframes rkShake{0%{translate:-1px 0}25%{translate:1px -1px}50%{translate:-1px 1px}75%{translate:1px 0}100%{translate:0 0}}
.rk-puff{position:fixed;z-index:43;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--fg) 22%,transparent);filter:blur(1px);
  animation:rkPuff .75s ease-out forwards}
.rk-puff.h{background:color-mix(in srgb,var(--c-ads) 55%,transparent)}
@keyframes rkPuff{from{opacity:.85;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,calc(-50% + 46px)) scale(2.4)}}
.rk-star{position:fixed;z-index:43;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--brand);pointer-events:none;animation:rkStar .7s ease-out forwards}
@keyframes rkStar{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@media (max-width:700px){.rkt{right:14px;bottom:calc(86px + env(safe-area-inset-bottom,0px));width:48px;height:48px}}
@media (prefers-reduced-motion: reduce){.rkt,.rkt.on{transition:opacity .2s}.rkt-svg{animation:none}}

/* WordPress */
.admin-bar .nav{top:32px}@media (max-width:782px){.admin-bar .nav{top:46px}}
.gk-page{max-width:760px;margin:0 auto;padding:calc(var(--nav,72px) + 56px) var(--gut,20px) 96px}
.gk-page h1{font-family:var(--f-display);font-weight:600;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 28px}
.gk-page .gk-body>*+*{margin-top:1.1em}.gk-page a{color:var(--fg);text-decoration-color:var(--live)}
.screen-reader-text{position:absolute;left:-9999px}