:root{
  --paper:#FFFFFF; --ink:#000000; --mute:#7A7A7A; --soft:#CFCFCF; --line:#E7E7E7; --card:#F4F4F4;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif; --pad:clamp(18px,4vw,64px); --section-space:clamp(72px,7vw,110px);
  --ease:cubic-bezier(.2,.7,.1,1);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#FFFFFF; --ink:#000000; } }
:root[data-theme="dark"]{ --paper:#FFFFFF; --ink:#000000; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:var(--paper); scrollbar-color:#000 #fff; }
html::-webkit-scrollbar{ width:10px; }
html::-webkit-scrollbar-track{ background:#fff; }
html::-webkit-scrollbar-thumb{ background:#000; border:2px solid #fff; border-radius:999px; }
*,*::before,*::after{ box-sizing:inherit; margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }
::selection{ background:#000; color:#fff; }
:focus-visible{ outline:1px solid #000; outline-offset:4px; }
html.lenis,html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* grano sutil */
body::after{ content:""; position:fixed; inset:-50%; z-index:95; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:none; }
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

.up{ font-weight:500; text-transform:uppercase; letter-spacing:-.01em; line-height:.92; }
.wide{ font-weight:200; text-transform:uppercase; letter-spacing:.55em; }
.tag{ font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.lam{ display:inline-block; width:.74em; height:.705em; }
.lam svg{ width:100%; height:100%; display:block; } .lam path{ fill:currentColor; }
.mask{ display:block; overflow:hidden; padding:.14em 0 .06em; margin:-.14em 0 -.06em; }
.mask > span{ display:block; }

/* ---------- Cristal líquido ---------- */
.glass{ position:relative; isolation:isolate;
  background:linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 42%,rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.05); backdrop-filter:blur(14px) saturate(1.9) brightness(1.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), inset 0 2px 1px -1px rgba(255,255,255,1), inset 0 -2px 2px -1px rgba(0,0,0,.14), inset 0 0 30px rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.05), 0 34px 60px -34px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.2); }
.glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(90% 60% at 100% 115%,rgba(255,255,255,.65),transparent 60%); opacity:.65; }
.glass > :not(.pill):not(.shine){ position:relative; z-index:1; }
.glass::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1.5px;
  background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.05) 38%,rgba(0,0,0,.10) 62%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.btn.glass{ border:1px solid rgba(255,255,255,.7); } .btn.glass:hover{ background:rgba(0,0,0,.86); color:#fff; }
html.glass-refraction .nav,html.glass-refraction .btn.glass{
  -webkit-backdrop-filter:url(#ewGlassRefract) blur(3px) saturate(1.45);
  backdrop-filter:url(#ewGlassRefract) blur(3px) saturate(1.45);
}
html.glass-refraction .nav{ background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.16) 52%,rgba(255,255,255,.42)); }
.isoW{ position:absolute; pointer-events:none; aspect-ratio:74/70; z-index:0; }
.isoW svg{ width:100%; height:100%; display:block; } .isoW path{ fill:url(#isoFill); }

/* ---------- Loader ---------- */
#loader{ position:fixed; inset:0; z-index:200; background:#fff; display:grid; place-items:center; }
html.skip-intro #loader{ display:none !important; }
html.skip-intro:not(.brand-ready) #brand{ visibility:hidden; }
#loader .logo{ display:flex; flex-direction:column; align-items:center; will-change:transform; }
#loader .lw{ display:flex; font-size:clamp(58px,15.5vw,290px); line-height:.9; }
#loader .lw .mask{ display:inline-block; }
#loader .lk{ font-size:clamp(14px,2.1vw,38px); letter-spacing:.62em; padding-left:.62em; margin-top:clamp(12px,2vw,34px); }
#loader .bar{ width:min(60vw,520px); height:1px; background:var(--line); position:relative; overflow:hidden; margin-top:clamp(26px,4vw,60px); }
#loader .bar i{ position:absolute; inset:0; background:#000; transform:scaleX(0); transform-origin:left; }
#loader .num{ position:absolute; right:var(--pad); bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px)); font-weight:200; font-size:clamp(28px,4vw,64px); line-height:.8; font-variant-numeric:tabular-nums; }
#loader .who{ position:absolute; left:var(--pad); bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px)); font-size:11px; }

/* ---------- Logo fijo que se escribe ---------- */
#brand{ position:fixed; left:var(--visual-center-x,50vw); top:50svh; z-index:210; width:var(--bw); pointer-events:none; mix-blend-mode:difference; will-change:transform; transform:translate(-50%,-50%); transform-origin:0 0; }
#brand svg{ width:100%; height:auto; display:block; overflow:visible; }
#brand path{ fill:#fff; stroke:#fff; stroke-width:1.1px; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
:root{ --bw:min(56vw,790px,95vh); }
@media (max-width:760px){ :root{ --bw:84vw; } }
body.written #brand{ pointer-events:auto; cursor:pointer; }

/* ---------- Menú en cápsula ---------- */
.nav{ position:fixed; top:calc(16px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:90; display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.38) 52%,rgba(255,255,255,.68)); border:1px solid rgba(255,255,255,.85); -webkit-backdrop-filter:blur(15px) saturate(1.6); backdrop-filter:blur(15px) saturate(1.6); box-shadow:0 8px 28px rgba(0,0,0,.1),inset 0 1px rgba(255,255,255,.95),inset 0 -1px rgba(0,0,0,.1); }
.nav .home{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#000; color:#fff; }
.nav .home .lam{ font-size:15px; }
.nav .home{ position:relative; }
.nav-links{display:flex;align-items:center;gap:4px}
.nav .ring{ position:absolute; inset:-3px; width:40px; height:40px; transform:rotate(-90deg); pointer-events:none; }
.nav .ring circle{ fill:none; stroke:#000; stroke-width:1.5; }
.nav a.i{ position:relative; font-size:11px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; padding:10px 14px; border-radius:999px; transition:color .4s; z-index:1; }
.nav .pill{ position:absolute; top:50%; left:6px; height:34px; width:0; border-radius:999px; background:#111; box-shadow:0 4px 12px rgba(0,0,0,.16); z-index:0; transform:translateX(var(--pill-x,0px)) translateY(-50%); transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .42s cubic-bezier(.22,1,.36,1),opacity .2s; opacity:0; pointer-events:none; }
.nav a.i.on{ color:#fff; }
@media(prefers-reduced-motion:reduce){ .nav .pill,.nav a.i{ transition:none; } }
.nav .lang{ font-size:11px; letter-spacing:.14em; padding:0 12px 0 10px; border-left:1px solid var(--line); margin-left:4px; }
.nav-social{display:flex;align-items:center;gap:2px;flex:none;margin:0 2px 0 1px}
.nav-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#111;transition:background .25s,color .25s,transform .25s}
.nav-social a:hover{transform:translateY(-1px)}
.nav-social a:focus-visible{outline:2px solid #111;outline-offset:2px}
.nav-social svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-social .nav-instagram svg{width:28px;height:28px;padding:3px;border-radius:8px;background:linear-gradient(45deg,#ffdc80 0%,#f77737 25%,#e1306c 55%,#833ab4 82%,#405de6 100%);color:#fff;stroke-width:1.9;box-shadow:0 1px 3px #0002}
.nav-social .nav-social-dot{fill:#fff;stroke:none}
.nav-social .nav-whatsapp img{display:block;width:28px;height:28px}
.nav-toggle{display:none}
@media (max-width:760px){
  html{scrollbar-gutter:auto;scrollbar-width:none}
  html::-webkit-scrollbar{display:none;width:0;height:0}
  :root{--pad:clamp(32px,9vw,44px)}
  .nav{left:auto;right:calc(50% - 50vw + 20px + var(--visual-right-inset,0px));width:190px;height:56px;transform:none;justify-content:flex-end;gap:3px;padding:7px 8px;top:calc(40px + env(safe-area-inset-top,0px));border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(232,236,241,.18) 52%,rgba(255,255,255,.46));border-color:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px) saturate(1.75) contrast(1.06);backdrop-filter:blur(8px) saturate(1.75) contrast(1.06);box-shadow:0 14px 34px #00000019,inset 0 2px 2px #ffffffd9,inset 0 -3px 5px #303b4b1c,inset 2px 0 3px #fff9,inset -2px 0 3px #28313a17;transition:width .55s cubic-bezier(.22,1,.36,1)}
  .nav.menu-open,.nav.music-open{z-index:220}
  body.header-docked #brand{z-index:221;mix-blend-mode:normal}
  body.header-docked #brand path{fill:#090909;stroke:#090909}
  html.glass-refraction .nav{background:linear-gradient(145deg,rgba(255,255,255,.53),rgba(233,237,243,.13) 52%,rgba(255,255,255,.42))}
  body.header-docked .nav{width:calc(100vw - 40px)}
  body.header-docked .nav,html.glass-refraction body.header-docked .nav{background:linear-gradient(100deg,#fff 0%,#fff 42%,rgba(255,255,255,.96) 62%,rgba(255,255,255,.91) 100%)}
  .nav::before{inset:1px;opacity:.82;background:radial-gradient(ellipse 64% 125% at 45% -52%,#fff9,transparent 72%),linear-gradient(105deg,#fff7,transparent 15%,transparent 81%,#fff8),linear-gradient(180deg,#ffffff96,transparent 46%,#4a556517);box-shadow:inset 0 1px 2px #fff,inset 0 -2px 4px #1112}
  .nav::after{padding:2px;background:linear-gradient(145deg,#fff 0%,#ffffff55 28%,#6f7b8e38 57%,#ffffffed 83%,#fff)}
  .nav .home,.nav .lang,.nav .pill{display:none}
  .nav-social{gap:0;margin:0 1px 0 0}.nav-social a{width:36px;height:40px;border-radius:11px}
  .nav-social .nav-instagram svg{width:30px;height:30px;padding:0;border-radius:0;background:none;box-shadow:none}
  .nav-social .nav-instagram rect,.nav-social .nav-instagram circle:not(.nav-social-dot){stroke:url(#navIgGradient);stroke-width:2.1}
  .nav-social .nav-instagram .nav-social-dot{fill:#c13584}
  .nav-social .nav-whatsapp img{width:25px;height:25px}
  .nav-social a:hover,.nav-social a:active{background:#00000009;transform:none}
  .nav-toggle{display:block;position:relative;width:40px;height:40px;flex:none;padding:0;border:0;border-radius:12px;background:#111;color:#fff;cursor:pointer;transition:background .22s,transform .22s}
  .nav-toggle span{position:absolute;left:50%;width:17px;height:1.5px;margin-left:-8.5px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s}
  .nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:19px}.nav-toggle span:nth-child(3){top:24px}
  .nav-toggle:focus-visible{outline:2px solid #111;outline-offset:3px}
  .nav-toggle:active{transform:scale(.94)}
  .nav.menu-open .nav-toggle{background:#333}
  .nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
  .nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .nav.glass > .nav-links{position:absolute;top:calc(100% + 9px);right:0;z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:2px;width:min(268px,calc(var(--visual-width,100vw) - 24px));padding:10px;border:1px solid #ffffffd9;border-radius:18px;background:rgba(255,255,255,.985);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 16px 45px #0002;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s,transform .22s,visibility .22s}
  .nav .nav-links::before{content:'EUPHORIA / EXPLORAR';padding:8px 14px 11px;color:#888;font-size:9px;font-weight:500;letter-spacing:.18em}
  .nav.menu-open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav .nav-links a.i{display:block;padding:12px 15px;border-radius:12px;font-size:12px;letter-spacing:.12em;color:#111;text-align:left}
  .nav .nav-links a.i.on,.nav .nav-links a.i:hover{background:#111;color:#fff}
}
@media (prefers-reduced-motion:reduce){.nav-social a{transition:none}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.nav .nav-links,.nav-toggle span{transition:none}}
@media (max-width:360px){.nav{width:168px;padding-inline:6px}.nav-social a{width:32px}.nav-toggle{width:36px;height:40px}}

/* ---------- Hero ---------- */
.hero-dim{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:7; will-change:opacity; }
.hero{ --dim:0; background:radial-gradient(75% 60% at 50% 46%,#FFFFFF 0%,#F1F1F0 100%); position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden; display:grid; place-items:center; text-align:center; }
.ghost{ position:absolute; left:0; top:50%; transform:translateY(-50%); white-space:nowrap; font-weight:500; font-size:clamp(160px,30vw,520px); line-height:1; color:transparent; -webkit-text-stroke:1px #EDEDED; letter-spacing:-.02em; pointer-events:none; z-index:0; }
.hero .center{ position:relative; z-index:3; margin-top:54vh; }
@media (max-width:760px){ .hero .center{ margin-top:44vh; } }
.hero .kick{ font-size:clamp(11px,1vw,14px); margin-bottom:clamp(18px,2.4vw,34px); display:inline-flex; gap:.2em; align-items:center; padding-left:.55em; }
.hero h1{ font-size:clamp(30px,min(5.2vw,8.6vh),96px); }
.hero .sub{ font-size:clamp(10px,.95vw,14px); margin-top:clamp(20px,2.4vw,34px); padding-left:.55em; }
.hero h1{ position:relative; }
.hero .draw{ position:absolute; left:10%; width:80%; bottom:-.2em; height:.16em; pointer-events:none; overflow:visible; }
.hero .draw path{ fill:none; stroke:#000; stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.hero .scroll{ position:absolute; left:92%; bottom:calc(36px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:12px; font-size:11px; }
.hero .scroll i{ width:1px; height:40px; background:#000; transform-origin:top; animation:drip 2.2s var(--ease) infinite; }
@keyframes drip{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.float{ position:absolute; z-index:2; will-change:transform; }
.float .ph{ border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); background:var(--card); aspect-ratio:4/5; }
.float .ph img{ width:100%; height:100%; object-fit:cover; }
.float .obj{ width:100%; filter:drop-shadow(0 30px 30px rgba(0,0,0,.28)); }
#cam{ position:absolute; z-index:6; width:clamp(220px,22vw,400px); right:-3vw; top:9vh; pointer-events:none; will-change:transform; filter:drop-shadow(0 40px 40px rgba(0,0,0,.25)); }
@media (max-width:760px){ .float.hm{ display:none; } #cam{ width:40vw; right:-8vw; top:12vh; } .hero .scroll{ display:none; } }

/* ---------- Bandas ---------- */
.bands{ position:relative; z-index:5; background:var(--paper); border-radius:36px 36px 0 0; box-shadow:0 -30px 60px -30px rgba(0,0,0,.18); height:clamp(180px,27vh,290px); overflow:hidden; display:grid; place-items:center; }
main > section:not(.hero){ position:relative; z-index:5; background:var(--paper); }
.band{ position:absolute; left:-10%; right:-10%; padding:clamp(12px,1.4vw,22px) 0; overflow:hidden; }
.band .bt{ display:flex; width:max-content; white-space:nowrap; will-change:transform; font-weight:500; text-transform:uppercase; font-size:clamp(28px,4.4vw,78px); line-height:1; }
.band .bt span{ display:inline-flex; align-items:center; gap:.5em; padding-right:.5em; }
.band .bt .lam{ font-size:.6em; }
.b1{ background:#000; color:#fff; transform:rotate(-4deg); z-index:2; }
.b2{ background:#fff; color:#000; border-top:1px solid #000; border-bottom:1px solid #000; transform:rotate(3deg); z-index:1; }
.b2 .bt{ font-weight:200; letter-spacing:.2em; }

/* ---------- Proceso con cámara lateral ---------- */
.how{ position:relative; }
.how .pin{ position:relative; height:100vh; height:100svh; overflow:hidden; background:#fff; }
.how canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.rfallback{ position:absolute; right:6vw; top:50%; width:min(42vw,540px); aspect-ratio:1; transform:translateY(-50%); display:none; grid-template-columns:1fr 1fr; place-items:center; gap:12px; padding:10%; border:1px solid #dadada; border-radius:50%; background:#f7f7f5; text-align:center; text-transform:uppercase; font-size:clamp(11px,1.2vw,18px); font-weight:500; letter-spacing:.08em; }
.rfallback span{ width:100%; padding:14px 8px; border-bottom:1px solid #c7c7c4; }
.rfallback b{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:#151618; color:#fff; font-size:30px; font-weight:300; }
.how.nofx canvas{ display:none; } .how.nofx .rfallback{ display:grid; }
.how.nofx .pin{ height:auto; min-height:100svh; padding:var(--section-space) var(--pad); display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,42%); align-items:center; gap:40px; }
.how.nofx .rfallback{ position:relative; inset:auto; width:100%; transform:none; grid-column:2; grid-row:1; }
.how.nofx .hcol{ position:relative; inset:auto; width:auto; grid-column:1; grid-row:1; display:block; }
.how.nofx .hcol .head{ position:static; margin-bottom:36px; }
.how.nofx .hsteps{ height:auto; display:grid; gap:24px; }
.how.nofx .hs{ position:static; margin:0; opacity:1 !important; transform:none !important; filter:none !important; }
.how.nofx .hs .n{ font-size:28px; }
.how.nofx .hs h3{ font-size:clamp(22px,2.4vw,38px); margin:8px 0; }
.how.nofx .hdots,.how.nofx .rtags{ display:none; }
@media (max-width:760px){ .how.nofx .pin{ display:flex; flex-direction:column-reverse; align-items:stretch; } .how.nofx .rfallback{ width:min(75vw,400px); align-self:center; } }
.hcol{ position:absolute; left:var(--pad); top:0; bottom:0; width:min(40vw,520px); z-index:3; pointer-events:none; display:flex; flex-direction:column; justify-content:center; }
.hcol .head{ position:absolute; left:0; top:calc(84px + env(safe-area-inset-top,0px)); }
.hcol .head h2{ font-size:clamp(20px,2vw,30px); }
.hsteps{ position:relative; height:clamp(260px,42vh,380px); }
.hs{ position:absolute; left:0; right:0; top:50%; margin-top:-120px; opacity:0; will-change:transform,opacity,filter; }
.hs .n{ font-weight:200; font-size:clamp(50px,6.4vw,110px); line-height:.8; letter-spacing:-.02em; }
.hs h3{ font-weight:500; text-transform:uppercase; font-size:clamp(28px,3.6vw,62px); line-height:.95; margin:clamp(14px,2vw,26px) 0 16px; }
.hs p{ max-width:36ch; font-size:clamp(14px,1.1vw,17px); }
.hdots{ position:absolute; left:0; bottom:calc(var(--pad) + 8px); display:flex; gap:10px; }
.hdots i{ width:34px; height:2px; background:rgba(0,0,0,.14); position:relative; overflow:hidden; border-radius:2px; }
.hdots i::after{ content:""; position:absolute; inset:0; background:#000; transform:scaleX(var(--f,0)); transform-origin:left; }
.rtags{ position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.rtag{ position:absolute; left:0; top:0; display:flex; align-items:center; opacity:0; will-change:transform,opacity; }
.rtag .dot{ width:9px; height:9px; border-radius:50%; background:#000; box-shadow:0 0 0 4px rgba(0,0,0,.12); flex:none; }
.rtag .ln{ height:1px; width:46px; background:#000; flex:none; }
.rtag .lb{ padding:9px 16px; border-radius:999px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; white-space:nowrap; background:rgba(255,255,255,.72); }
.rtag.l{ flex-direction:row-reverse; }
@media (max-width:760px){ .hcol{ width:auto; right:var(--pad); justify-content:flex-start; } .hcol .head{ top:calc(72px + env(safe-area-inset-top,0px)); } .hsteps{ margin-top:calc(120px + env(safe-area-inset-top,0px)); height:260px; } .hs{ margin-top:0; top:0; } .hs .n{ font-size:44px; } .hs h3{ font-size:30px; margin:10px 0 8px; } .hs p{ font-size:13px; } .rtag .ln{ width:24px; } .rtag .lb{ font-size:9px; padding:7px 11px; } }
/* UI de web */
.win{ background:#fff; border-radius:14px; box-shadow:0 30px 60px -30px rgba(0,0,0,.4); border:1px solid #E6E6E6; overflow:hidden; }
.win .bar{ height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #EFEFEF; }
.win .bar i{ width:8px; height:8px; border-radius:50%; background:#DADADA; }
.win .bar u{ text-decoration:none; margin-left:12px; flex:1; height:16px; border-radius:99px; background:#F3F3F3; font-size:9px; line-height:16px; padding-left:10px; color:#999; letter-spacing:.06em; }
.win .site{ padding:6% 7%; position:relative; }
.win .site b{ display:block; font-weight:500; text-transform:uppercase; font-size:clamp(12px,1.6vw,26px); line-height:.95; }
.win .site .pics{ display:flex; gap:6px; margin-top:10%; }
.win .site .pics span{ flex:1; aspect-ratio:4/5; border-radius:6px; background-size:cover; background-position:center; }
.win .cur{ position:absolute; width:18px; height:18px; left:30%; top:40%; }
.win .cur path{ fill:#000; stroke:#fff; stroke-width:1.5; }
.code{ padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.code i{ display:block; height:7px; border-radius:99px; background:#E9E9E9; transform-origin:left; }
.code i.k{ background:#000; } .code i.s{ background:#BDBDBD; }
.tl{ padding:12px 14px 16px; display:flex; flex-direction:column; gap:7px; border-top:1px solid #EFEFEF; }
.tl div{ display:flex; gap:4px; } .tl span{ height:14px; border-radius:4px; background:#E4E4E4; }
.tl div:nth-child(2) span{ background:#CFCFCF; } .tl .ph2{ background:#000 !important; }
.tl .head{ position:absolute; top:0; bottom:0; width:1px; background:#000; left:20%; }
.phone{ width:clamp(130px,13vw,220px); aspect-ratio:9/19; border-radius:28px; background:#000; padding:7px; box-shadow:0 40px 70px -30px rgba(0,0,0,.5); }
.phone .scr{ position:relative; width:100%; height:100%; border-radius:22px; overflow:hidden; }
.phone .scr img{ width:100%; height:100%; object-fit:cover; }
.phone .pb{ position:absolute; left:10px; right:10px; top:10px; height:2px; background:rgba(255,255,255,.4); border-radius:2px; overflow:hidden; }
.phone .pb i{ position:absolute; inset:0; background:#fff; transform-origin:left; }
.phone .cap{ position:absolute; left:12px; bottom:14px; right:12px; color:#fff; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.chart{ padding:16px 18px 18px; width:clamp(170px,16vw,260px); }
.chart .tag{ font-size:9px; color:var(--mute); }
.chart .bars{ display:flex; align-items:flex-end; gap:6px; height:90px; margin-top:12px; }
.chart .bars i{ flex:1; background:#E3E3E3; border-radius:4px 4px 0 0; transform-origin:bottom; }
.chart .bars i:last-child{ background:#000; }

/* ---------- Intro ---------- */
.intro{ z-index:1; position:relative; min-height:clamp(680px,84vh,840px); display:grid; place-items:center; text-align:center; padding:var(--section-space) var(--pad); overflow:hidden; isolation:isolate; }
.intro::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 46% 44% at 50% 50%,var(--paper) 0%,rgba(248,248,246,.96) 55%,rgba(248,248,246,0) 100%); }
.intro-gallery{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.intro-gallery figure{ position:absolute; width:clamp(155px,17vw,260px); aspect-ratio:4/5; margin:0; overflow:hidden; border-radius:8px; background:#ddd; box-shadow:0 22px 45px -20px rgba(0,0,0,.38); }
.intro-gallery figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.intro-gallery figure:nth-child(1){ left:2.5%; top:9%; rotate:-8deg; }
.intro-gallery figure:nth-child(2){ right:2%; top:6%; rotate:7deg; width:clamp(150px,16vw,245px); }
.intro-gallery figure:nth-child(3){ left:6%; bottom:4%; rotate:6deg; width:clamp(150px,15vw,230px); }
.intro-gallery figure:nth-child(4){ right:5%; bottom:3%; rotate:-7deg; width:clamp(160px,18vw,275px); }
.swoosh{ position:absolute; left:50%; top:50%; width:min(80vw,900px); transform:translate(-50%,-50%); z-index:0; pointer-events:none; }
.swoosh path{ fill:url(#isoFill); }
.intro .c{ position:relative; z-index:2; max-width:850px; }
.intro h2{ font-size:clamp(34px,4.6vw,86px); }
.intro p{ max-width:52ch; margin:clamp(22px,3vw,40px) auto 0; font-size:clamp(15px,1.25vw,19px); }
@media(max-width:760px){
  .intro{ display:flex; flex-direction:column; justify-content:center; gap:38px; min-height:0; padding:var(--section-space) var(--pad); }
  .intro::after{ display:none; }
  .intro .c{ order:0; }
  .intro h2{ font-size:clamp(38px,9vw,65px); }
  .intro-gallery{ position:relative; order:1; width:100%; max-width:570px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 8px; }
  .intro-gallery figure,.intro-gallery figure:nth-child(n){ position:relative; inset:auto; width:100%; aspect-ratio:4/5; rotate:0deg; border-radius:7px; }
  .intro-gallery figure:nth-child(2),.intro-gallery figure:nth-child(4){ translate:0 16px; }
  .intro .swoosh{ top:22%; width:90vw; }
}

/* ---------- Sobre nosotros ---------- */
.about{ overflow:hidden; position:relative; padding:var(--section-space) var(--pad); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(30px,6vw,110px); align-items:center; }
.about .pic{ grid-column:1; grid-row:1; position:relative; width:min(100%,560px,58svh); aspect-ratio:4/5; margin-inline:auto; }
.about-copy{ grid-column:2; grid-row:1; }
.about .pic .ph{ position:absolute; border-radius:20px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.45); }
.about .pic .ph img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.045); }
.about.is-floating .pic .ph img{ animation:about-photo-drift 8s ease-in-out infinite alternate; will-change:transform; }
.about.is-floating .pic .b img{ animation-duration:9.5s; animation-delay:-3s; animation-direction:alternate-reverse; }
@keyframes about-photo-drift{ from{transform:translate3d(0,-1%,0) scale(1.045)} to{transform:translate3d(0,1%,0) scale(1.055)} }
@media (prefers-reduced-motion:reduce){ .about .pic .ph img{transform:none;animation:none!important} }
.about .pic .a{ left:0; top:2%; width:68%; aspect-ratio:9/16; }
.about .pic .b{ width:40%; aspect-ratio:9/16; right:0; bottom:0; z-index:2; }
.about .tag{ margin-bottom:22px; color:var(--mute); }
.about h2{ font-size:clamp(40px,6.4vw,112px); }
.about h2 .w{ display:inline-block; }
.about .cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:clamp(28px,4vw,56px); max-width:760px; }
@media (max-width:860px){ .about{ grid-template-columns:1fr; } .about .pic,.about-copy{grid-column:auto;grid-row:auto} .about .cols{ grid-template-columns:1fr; } }

/* ---------- Trabajos ---------- */
.work{ padding:var(--section-space) 0; overflow:hidden; }
.rows{ overflow:hidden; padding:2vh 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.work .head{ display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; padding:0 var(--pad); margin-bottom:clamp(30px,5vw,64px); }
.work h2{ font-size:clamp(36px,5.4vw,92px); }
.btn{ display:inline-flex; align-items:center; gap:12px; border:1px solid #000; border-radius:999px; padding:14px 22px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; transition:background .4s,color .4s; white-space:nowrap; }
.btn .lam{ font-size:11px; } .btn:hover{ background:#000; color:#fff; }
.btn.dark{ background:#000; color:#fff; } .btn.dark:hover{ background:#fff; color:#000; }
.row{ display:flex; gap:clamp(12px,1.6vw,22px); width:max-content; will-change:transform; padding:clamp(6px,1vw,12px) 0; }
.tile{ position:relative; width:clamp(170px,17vw,290px); aspect-ratio:4/5; border-radius:16px; overflow:hidden; flex:none; background:var(--card); transition:transform .7s var(--ease); cursor:pointer; }
.tile:focus-visible{ outline:3px solid #111; outline-offset:5px; }
.tile img,.tile video{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.work img,.work video,.work-viewer img,.work-viewer video,.archive img,.archive video{ -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; }
.tile .playmark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border:1px solid #fff9; border-radius:50%; display:grid; place-items:center; color:#fff; background:#0005; backdrop-filter:blur(8px); font-size:18px; pointer-events:none; transition:opacity .3s; }
.tile.playing .playmark{ opacity:0; }
.tile figcaption{ position:absolute; left:12px; bottom:12px; right:12px; display:flex; justify-content:space-between; color:#fff; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:400; opacity:0; transform:translateY(8px); transition:.5s var(--ease); text-shadow:0 1px 12px rgba(0,0,0,.5); }
@media (hover:hover){ .tile:hover{ transform:scale(1.04) rotate(-1deg); z-index:2; } .tile:hover img,.tile:hover video{ transform:scale(1.08); } .tile:hover figcaption{ opacity:1; transform:none; } }
.tile:focus-visible figcaption{ opacity:1; transform:none; }
@media(hover:none){ .tile figcaption{ opacity:1; transform:none; } }
.work-viewer{ position:fixed; inset:0; margin:auto; padding:0; width:min(520px,calc(100vw - 24px)); max-width:none; height:auto; max-height:84dvh; aspect-ratio:4/5; border:1px solid #ffffff3a; border-radius:14px; background:#090909; color:#fff; box-shadow:0 32px 100px #0009; overflow:hidden; }
.work-viewer::backdrop{ background:rgba(0,0,0,.86); }
.work-viewer[open]{ display:block; }
.work-viewer.is-opening::backdrop{ animation:work-backdrop-in 520ms ease-out both; }
.work-viewer.is-closing::backdrop{ animation:work-backdrop-out 390ms ease-in both; }
.work-viewer-transition{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.work-viewer.is-opening .work-viewer-bar,.work-viewer.is-opening .work-viewer-foot{ animation:work-ui-in 520ms ease-out both; }
.work-viewer.is-closing .work-viewer-bar,.work-viewer.is-closing .work-viewer-foot{ animation:work-ui-out 390ms ease-in both; }
@keyframes work-backdrop-in{ from{background:transparent} to{background:rgba(0,0,0,.86)} }
@keyframes work-backdrop-out{ from{background:rgba(0,0,0,.86)} to{background:transparent} }
@keyframes work-ui-in{ 0%,45%{opacity:0} 100%{opacity:1} }
@keyframes work-ui-out{ from{opacity:1} 45%,100%{opacity:0} }
@media(prefers-reduced-motion:reduce){ .work-viewer.is-opening::backdrop,.work-viewer.is-closing::backdrop,.work-viewer.is-opening .work-viewer-bar,.work-viewer.is-opening .work-viewer-foot,.work-viewer.is-closing .work-viewer-bar,.work-viewer.is-closing .work-viewer-foot{ animation:none; } }
.work-viewer-bar,.work-viewer-foot{ position:absolute; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; }
.work-viewer-bar{ top:0; background:linear-gradient(to bottom,#000b 0%,#0007 58%,transparent 100%); }
.work-viewer-foot{ bottom:0; min-height:70px; background:linear-gradient(to top,#000c 0%,#0008 58%,transparent 100%); }
.work-viewer-title{ font-size:15px; font-weight:600; letter-spacing:.02em; text-shadow:0 1px 8px #000a; }
.work-viewer-kind,.work-viewer-count{ color:#fff; font-size:10px; letter-spacing:.13em; text-transform:uppercase; text-shadow:0 1px 8px #000a; }
.work-viewer[data-kind=video] .work-viewer-count{ display:none; }
.work-viewer-close,.work-viewer-nav button{ display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:1px solid #ffffff70; border-radius:50%; color:#fff; background:#0005; backdrop-filter:blur(8px); cursor:pointer; line-height:0; }
.work-viewer-close:hover,.work-viewer-nav button:hover{ background:#fff; color:#000; }
.work-viewer button svg{ display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.work-viewer button .icon-play path,.work-viewer button .icon-pause rect{ fill:currentColor; stroke:none; }
#workViewerPlay[data-state=paused] .icon-pause,#workViewerPlay[data-state=playing] .icon-play,#workViewerMute[data-muted=true] .icon-volume,#workViewerMute[data-muted=false] .icon-muted{ display:none; }
.work-viewer-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; background:#090909; }
.work-viewer-stage img,.work-viewer-stage video{ display:block; width:100%; height:100%; object-fit:contain; }
.work-viewer-controls{ display:flex; align-items:center; flex:1; min-width:0; gap:8px; font-size:11px; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 1px 8px #000a; }
.work-viewer-controls[hidden]{ display:none; }
.work-viewer-controls button{ display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#0005; color:#fff; cursor:pointer; line-height:0; }
.work-viewer-controls button:hover{ background:#ffffff40; }
.work-viewer-controls input{ flex:1; min-width:44px; accent-color:#fff; cursor:pointer; }
.work-viewer-controls .work-volume{ flex:none; width:66px; min-width:0; }
.work-viewer-nav{ display:flex; gap:6px; }
.work-viewer-nav button{ width:34px; height:34px; }
@media(max-width:640px){ .work-viewer{ width:calc(100vw - 48px); border-radius:12px; } .work-viewer-bar,.work-viewer-foot{ padding:12px; gap:8px; } .work-viewer-title{ font-size:14px; } .work-viewer-kind,.work-viewer-count,.work-viewer-controls span{ display:none; } .work-viewer-controls{ gap:4px; } .work-viewer-controls .work-volume{ width:52px; } .work-viewer-nav{ gap:4px; } }
@media(max-width:380px){ .work-viewer-foot{ padding:8px; } .work-viewer-controls .work-volume{ width:40px; } .work-viewer-controls input:not(.work-volume){ min-width:30px; } }

/* ---------- Servicios ---------- */
.services{ padding:var(--section-space) var(--pad); overflow:clip; }
.services .card{ background:rgba(255,255,255,.84); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border:1px solid rgba(255,255,255,.9); }
.services .card::before{ opacity:.5; }
.services .card .shine{ display:none; }
.services > .top, .services > .cards, .services > .all, .services > .service-area, .services > .service-questions{ position:relative; z-index:1; }
.services .top{ text-align:center; margin-bottom:clamp(40px,6vw,80px); }
.services h2{ font-size:clamp(34px,5vw,86px); max-width:15ch; margin:0 auto; }
.services .top p{ margin-top:22px; color:var(--mute); }
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); max-width:1320px; margin:0 auto; perspective:1400px; }
.card{ border-radius:26px; padding:clamp(24px,2.6vw,40px); display:flex; flex-direction:column; gap:22px; min-height:520px; transform-style:preserve-3d; will-change:transform; position:relative; overflow:hidden; }
.card-kicker{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.card .h{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card h3{ font-weight:500; text-transform:uppercase; font-size:clamp(22px,2vw,32px); line-height:1; }
.card .h .lam{ font-size:22px; flex:none; }
.service-visual{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:100%;height:clamp(155px,13vw,190px);margin-block:-3px 18px}
.service-visual::before{content:"";position:absolute;inset:7% 5%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at center,rgba(179,190,209,.2),transparent 68%)}
.service-visual img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.14));transition:transform .65s cubic-bezier(.22,1,.36,1)}
.service-visual--camera::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.3),rgba(255,255,255,.06) 52%,transparent 75%)}
.service-visual--camera{margin-bottom:28px}
.service-visual--camera img{filter:brightness(1.2) drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.service-visual--meta::before{background:radial-gradient(ellipse at center,rgba(236,109,156,.15),transparent 70%)}
.service-visual--digital::before{background:radial-gradient(ellipse at center,rgba(74,147,230,.13),transparent 70%)}
@media(hover:hover){.card:hover .service-visual img{transform:translateY(-6px) scale(1.025)}}
@media(prefers-reduced-motion:reduce){.service-visual img{transition:none}}
.card p{ color:#333; }
.card ul{ list-style:none; border-top:1px solid #E2E2E2; margin-top:auto; }
.card li{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid #E2E2E2; font-size:14px; }
.card li b{ font-weight:500; }
.card .btn{ align-self:flex-start; }
.card .shine{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.9), transparent 60%); opacity:0; transition:opacity .4s; }
@media (hover:hover){ .card:hover .shine{ opacity:1; } }
.services .card--featured{min-height:560px;margin-block:-14px;z-index:2;background:linear-gradient(150deg,#202020 0%,#080808 72%);border:1px solid #242424;color:#fff;box-shadow:0 32px 65px -34px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.14)}
.services .card--featured::before{opacity:.12}
.services .card--featured .card-kicker{color:#c9c9c9}
.services .card--featured p{color:#e0e0e0}
.services .card--featured ul{border-color:#ffffff3b}
.services .card--featured li{border-color:#ffffff3b}
.services .card--featured .btn{background:#fff;border-color:#fff;color:#111}
.services .card--featured .btn:hover{background:transparent;color:#fff}
@media(min-width:961px){.card--meta{grid-column:1;grid-row:1}.card--featured{grid-column:2;grid-row:1}.card--digital{grid-column:3;grid-row:1}}
.all{ max-width:1320px; margin:clamp(14px,1.6vw,24px) auto 0; border-radius:26px; padding:26px clamp(24px,2.6vw,40px); display:grid; grid-template-columns:auto repeat(4,minmax(0,1fr)); gap:22px; align-items:center; font-size:14px; }
.all .tag{ color:var(--mute); }
@media (max-width:960px){ .cards{ grid-template-columns:1fr; } .card,.services .card--featured{ min-height:0; margin-block:0; } .service-visual{height:clamp(155px,46vw,220px)} .all{ grid-template-columns:1fr 1fr; } }
.service-area{max-width:1320px;margin:clamp(52px,6vw,90px) auto 0;padding:clamp(25px,3vw,42px) 0;border-top:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:end}
.service-area-heading .tag{display:block;margin-bottom:19px;color:var(--mute)}
.service-area-heading h3{max-width:12ch;font-size:clamp(32px,3.8vw,58px);font-weight:400;line-height:1.04;letter-spacing:-.055em;text-transform:uppercase}
.service-area-copy p{max-width:60ch;font-size:clamp(16px,1.35vw,20px);line-height:1.55;color:#4f4f4f}
.service-area-copy a{display:inline-flex;align-items:center;gap:16px;margin-top:25px;padding-bottom:8px;border-bottom:1px solid #111;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:gap .25s ease}
@media (hover:hover){.service-area-copy a:hover{gap:24px}}
.service-area-copy a:focus-visible{outline:2px solid #111;outline-offset:4px}
.service-questions{max-width:1320px;margin:clamp(52px,6vw,90px) auto 0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px)}
.service-questions-intro{align-self:start;position:sticky;top:clamp(110px,16vh,170px)}
.service-questions-intro .tag{display:block;margin-bottom:15px;color:var(--mute)}
.service-questions-intro h3{max-width:12ch;font-size:clamp(30px,3.2vw,52px);font-weight:400;line-height:1.06;letter-spacing:-.045em}
.service-questions-list{border-top:1px solid #d8d8d8}
.service-questions-list details{border-bottom:1px solid #d8d8d8}
.service-questions-list summary{position:relative;list-style:none;cursor:pointer;padding:20px 35px 20px 0;font-size:clamp(16px,1.3vw,20px);line-height:1.35;transition:color .25s}
.service-questions-list summary::-webkit-details-marker{display:none}
.service-questions-list summary::before,.service-questions-list summary::after{content:'';position:absolute;background:currentColor;pointer-events:none}
.service-questions-list summary::before{right:2px;top:50%;width:17px;height:1px}
.service-questions-list summary::after{right:10px;top:calc(50% - 8px);width:1px;height:17px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.service-questions-list details[open] summary::after{transform:scaleY(0)}
.service-questions-list summary:hover{color:#555}
.service-questions-list summary:focus-visible{outline:2px solid #111;outline-offset:3px}
.service-questions-list .faq-answer{overflow:hidden}
.service-questions-list p{max-width:58ch;padding:0 28px 20px 0;color:#555;font-size:15px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.service-questions-list summary,.service-questions-list summary::after{transition:none}}
@media(max-width:760px){.service-area{grid-template-columns:1fr;margin-top:58px;gap:26px}.service-area-heading h3{max-width:16ch}.service-questions{grid-template-columns:1fr;margin-top:58px;gap:28px}.service-questions-intro{position:static}.service-questions-intro h3{max-width:none}}

/* ---------- Contacto ---------- */
.contact > .contact-content, .contact > form{ position:relative; z-index:1; }
.contact{ overflow:hidden; padding:var(--section-space) var(--pad); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,5vw,90px); align-items:start; }
.contact h2{ font-size:clamp(48px,4.4vw,140px); white-space:nowrap; }
.contact-intro{max-width:43ch;margin-top:24px;color:#4f4f4f;font-size:clamp(15px,1.3vw,19px);line-height:1.5}
.contact .links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.contact .links .contact-email:hover{background:#1769e0;border-color:#1769e0;color:#fff}
.contact .links .contact-instagram:hover{background:linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 56%,#962fbf 78%,#4f5bd5);border-color:#d62976;color:#fff}
.contact .links .contact-whatsapp:hover{background:#25d366;border-color:#25d366;color:#082b15}
footer .contact-email:hover{color:#1769e0}
footer .contact-instagram:hover{color:#d62976}
.contact .clock{ margin-top:26px; font-size:12px; letter-spacing:.14em; color:var(--mute); font-variant-numeric:tabular-nums; }
.contact-photos{display:flex;align-items:flex-start;gap:clamp(10px,1.5vw,18px);width:min(100%,560px);margin-top:clamp(32px,4vw,58px)}
.contact-photo{flex:1;min-width:0;aspect-ratio:4/5;overflow:hidden;border-radius:18px;background:var(--card);box-shadow:0 28px 55px -30px rgba(0,0,0,.38)}
.contact-photo:nth-child(2){margin-top:clamp(24px,3vw,42px)}
.contact-photo:nth-child(3){margin-top:clamp(10px,1.6vw,22px)}
.contact-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.contact.is-floating .contact-photo img{animation:contact-photo-float 8s ease-in-out infinite alternate;will-change:transform}
.contact.is-floating .contact-photo:nth-child(2) img{animation-duration:9.5s;animation-delay:-3s;animation-direction:alternate-reverse}
.contact.is-floating .contact-photo:nth-child(3) img{animation-duration:7.5s;animation-delay:-5s}
@keyframes contact-photo-float{from{transform:translate3d(0,-2%,0) scale(1.1)}to{transform:translate3d(0,2%,0) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.contact-photo img{transform:none}.contact.is-floating .contact-photo img{animation:none}}
form{ border-radius:26px; padding:clamp(22px,2.6vw,40px); display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
form .tag{ grid-column:1/-1; margin-bottom:10px; color:var(--mute); }
.service-options{ grid-column:1/-1; min-width:0; margin:14px 0 6px; border:0; }
.service-options legend{ font-size:14px; font-weight:400; line-height:1.4; }
.service-options > p{ margin:4px 0 14px; color:var(--mute); font-size:12px; line-height:1.5; }
.service-options-list{ display:flex; flex-wrap:wrap; gap:8px; }
.service-options-list label{ position:relative; max-width:100%; cursor:pointer; }
.service-options-list input{ position:absolute; width:1px; height:1px; opacity:0; }
.service-options-list span{ display:block; padding:11px 15px; border:1px solid #cfcfcf; border-radius:999px; background:rgba(255,255,255,.5); font-size:12px; line-height:1.35; transition:background .2s,color .2s,border-color .2s; }
.service-options-list label:hover span{ border-color:#555; }
.service-options-list input:checked + span{ background:#111; border-color:#111; color:#fff; }
.service-options-list input:focus-visible + span{ outline:2px solid #111; outline-offset:3px; }
.service-options .service-options-error:not([hidden]){ margin:10px 0 0; color:#a52626; }
.privacy-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:11px;margin-top:4px;color:#575757;font-size:12px;line-height:1.55;cursor:pointer}
.privacy-consent input{flex:none;width:16px;height:16px;margin-top:2px;accent-color:#111;cursor:pointer}
.privacy-consent a{text-decoration:underline;text-underline-offset:3px;color:#111}
.privacy-consent a:hover{color:#1769e0}
.f{ position:relative; border-bottom:1px solid rgba(0,0,0,.14); }
.f.full{ grid-column:1/-1; }
.f input,.f textarea{ width:100%; background:transparent; border:0; outline:0; padding:24px 0 10px; font-size:15px; resize:none; }
.f label{ position:absolute; left:0; top:22px; font-size:14px; color:var(--mute); pointer-events:none; transition:.35s var(--ease); }
.f input:focus+label,.f input:not(:placeholder-shown)+label,.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{ top:4px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.f::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#000; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.f:focus-within::after{ transform:scaleX(1); }
form .send{ grid-column:1/-1; justify-self:start; margin-top:20px; cursor:pointer; }
form .ok{ grid-column:1/-1; font-size:13px; color:var(--mute); min-height:1.4em; }
form .ok.is-error{color:#a52626}
form .ok.is-success{color:#176449}
form .send:disabled{opacity:.55;cursor:wait}
.form-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:1100px){ .contact{ grid-template-columns:1fr; } }
@media (max-width:860px){ form{ grid-template-columns:1fr; } }
@media (max-width:760px){.contact-photos{width:min(100%,480px);margin-top:36px}.contact-photo{border-radius:14px}.contact-photo:nth-child(2){margin-top:24px}.contact-photo:nth-child(3){margin-top:10px}}

/* ---------- Cierre con física ---------- */
.outro{ position:relative; height:clamp(460px,82vh,860px); overflow:hidden; border-top:1px solid var(--line); }
.outro .word{ position:absolute; left:0; right:0; bottom:clamp(40px,7vh,80px); text-align:center; font-size:clamp(60px,17.4vw,330px); z-index:0; pointer-events:none; }
.outro .works{ position:absolute; left:0; right:0; bottom:clamp(22px,3.4vh,40px); text-align:center; font-size:clamp(10px,1.2vw,18px); padding-left:.55em; z-index:0; }
.outro .hintd{ position:absolute; top:28px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--mute); z-index:2; }
.body{ position:absolute; left:0; top:0; z-index:1; border-radius:12px; overflow:hidden; box-shadow:0 20px 40px -20px rgba(0,0,0,.4); cursor:grab; user-select:none; touch-action:none; background:var(--card); }
.body img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.body.o{ background:transparent; box-shadow:none; border-radius:0; overflow:visible; }
.body.o img{ object-fit:contain; filter:drop-shadow(0 18px 18px rgba(0,0,0,.28)); }
.body.mark{ background:#fff; border:1px solid #000; display:grid; place-items:center; }
.body.mark .lam{ font-size:44px; }
@media (hover:none){ .body{ pointer-events:none; } }
@media (max-width:760px){
  :root{--section-space:64px}
  main > section[id]:not(.hero){scroll-margin-top:64px}
  .hero{min-height:560px}
  .bands{height:clamp(150px,25svh,190px)}
  .hero .center{width:100%;margin-top:30svh;padding:0 var(--pad)}
  .hero h1{font-size:clamp(40px,10.5vw,64px)}
  .hero .sub{max-width:100%;margin-top:22px;padding-left:0;font-size:10px;letter-spacing:.22em;line-height:1.5}
  #cam{width:clamp(155px,42vw,260px);right:1vw;top:12svh}
  .hero .float:nth-child(1){left:4vw!important;top:16%!important;width:clamp(56px,15vw,90px)!important}
  .hero .float:nth-child(3){left:5vw!important;top:89%!important;width:clamp(58px,16vw,95px)!important}
  .hero .float:nth-child(4){left:auto!important;right:5vw;top:88%!important;width:clamp(60px,17vw,98px)!important}
  .hero .float:nth-child(5){left:auto!important;right:3vw;top:32%!important;width:clamp(56px,15vw,88px)!important}
  .how .hcol{left:var(--pad);right:var(--pad);width:auto}
  .how .hcol .head{top:calc(126px + env(safe-area-inset-top,0px))}
  .how .hcol .head h2{font-size:clamp(20px,5.4vw,27px)}
  .how .hsteps{margin-top:calc(190px + env(safe-area-inset-top,0px));height:220px}
  .how .hs .n{font-size:clamp(34px,9vw,48px)}
  .how .hs h3{max-width:15ch;margin:8px 0;font-size:clamp(24px,6.8vw,32px);line-height:1.04}
  .how .hs p{max-width:34ch;font-size:13px;line-height:1.5}
  .how .hdots{bottom:26px}
  .how .rtag .dot{width:6px;height:6px;box-shadow:0 0 0 3px #0002}
  .how .rtag .ln{width:15px}
  .how .rtag .lb{padding:6px 9px;background:#111;color:#fff;font-size:9px;letter-spacing:.04em;box-shadow:0 3px 10px #0003}
  .how.nofx .hsteps{margin-top:0;height:auto}
  .about{padding:var(--section-space) var(--pad);gap:40px}
  .about .pic{width:min(100%,560px,58svh);margin-inline:auto}
  .about h2{font-size:clamp(38px,9vw,66px)}
  .about .cols{gap:18px;margin-top:28px}
  .work{padding-block:var(--section-space)}
  .services{padding:var(--section-space) var(--pad)}
  .services .top{margin-bottom:38px}
  .services .top p{margin-top:14px}
  .contact{padding:var(--section-space) var(--pad)}
  .contact h2{font-size:clamp(27px,8.4vw,68px);white-space:nowrap}
  .outro{height:clamp(400px,60svh,520px)}
  .outro .word{font-size:clamp(38px,11.5vw,86px)}
}
@media (max-width:480px){
  .all{grid-template-columns:1fr;gap:12px}
  .all .tag{padding-bottom:8px;border-bottom:1px solid #ddd}
  .card{padding:24px 20px;gap:18px}
  .card li{font-size:12px;gap:8px}
  .card li b{flex:none}
  .work .head{gap:18px}
  .work h2{font-size:clamp(34px,9vw,43px);text-align:center}
  .contact .links{margin-top:22px}
}
@media (max-width:760px) and (orientation:landscape){
  .how .hcol{width:44%;right:auto;justify-content:center}
  .how .hcol .head{top:calc(65px + env(safe-area-inset-top,0px))}
  .how .hsteps{margin-top:100px}
  .how .hs h3{font-size:clamp(20px,3.5vw,28px)}
  .how .hs p{font-size:12px}
}
footer{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom,0px)); font-size:11px; letter-spacing:.14em; text-transform:uppercase; border-top:1px solid var(--line); }
footer nav{ display:flex; gap:22px; flex-wrap:wrap; }
@media(max-width:480px){footer{gap:15px}footer nav{gap:14px;flex-wrap:wrap}}

#cursor{ position:fixed; left:0; top:0; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#000; z-index:150; pointer-events:none; display:grid; place-items:center; color:#fff; font-size:0; letter-spacing:.14em; text-transform:uppercase; transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),font-size .3s; }
#cursor.big{ width:78px; height:78px; margin:-39px 0 0 -39px; font-size:10px; }
@media (hover:none){ #cursor{ display:none; } }
@media (prefers-reduced-motion:reduce){ body::after{ animation:none; } .hero .scroll i{ animation:none; } }

.credit{ padding:0 var(--pad) calc(22px + env(safe-area-inset-bottom,0px)); font-size:11px; color:var(--mute); line-height:1.5; max-width:none; }