/* Sistema Mg.films: negro puro de sala de proyección, blanco puro, rojo solo como marca (el punto). Retícula de 12, grotesca apretada con acentos en serif itálica, mono para datos. Diseño de un solo tema por decisión de marca. */
:root{
  --negro:#000;--blanco:#fff;--rojo:#FF0000;
  --fg2:#BDBDBD;--muted:#7E7E7E;--line:rgba(255,255,255,.14);--surface:#0D0D0D;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.65,0,.15,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--negro);color:var(--blanco);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--negro)}
section,header,footer{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--rojo);outline-offset:3px}
::selection{background:var(--rojo);color:#fff}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px}
.mono{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.muted{color:var(--muted)}
.dot{color:var(--rojo)}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
p{margin:0}
@supports (animation-timeline:view()){.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 25%}}
@keyframes rv{from{opacity:0;transform:translateY(40px)}}

/* ---------- entrada: logo en tinta ---------- */
.intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.intro.done{opacity:0;visibility:hidden}
.intro canvas{width:min(46vw,440px);height:auto;aspect-ratio:1064/767}
.intro .skip{position:absolute;right:var(--gr);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:none;border:1px solid rgba(255,255,255,.3);color:#aaa;padding:9px 14px;cursor:pointer}
.intro .skip:hover{color:#fff;border-color:#fff}
@media (max-width:700px){.intro canvas{width:68vw}}

/* ---------- cabecera ---------- */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:background .4s,backdrop-filter .4s}
.top.solid{background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}
.top .wrap{display:flex;align-items:center;gap:28px;padding-block:16px}
.top .logo svg{height:30px;width:auto;display:block}
.top nav{display:flex;gap:26px;margin-left:auto}
.top nav a{font:500 14px var(--sans);color:#ddd;transition:color .3s}
.top nav a:hover{color:#fff}
.lang{display:flex;border:1px solid rgba(255,255,255,.3)}
.lang button{background:none;border:0;padding:7px 10px;cursor:pointer;color:#999;font:500 10.5px var(--mono);letter-spacing:.1em}
.lang button[aria-pressed="true"]{background:#fff;color:#000}
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid #fff;font:500 14px var(--sans);cursor:pointer;background:transparent;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{background:#fff;color:#000}
.btn.red{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn.red:hover{background:#fff;border-color:#fff;color:#000}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.top .btn{height:38px;padding:0 16px;font-size:13px}
.menuBtn{display:none;background:none;border:1px solid rgba(255,255,255,.3);height:38px;width:42px;cursor:pointer}
.menuBtn i{display:block;width:16px;height:1.5px;background:#fff;margin:4px auto}
@media (max-width:900px){.top nav{display:none}.menuBtn{display:block;margin-left:auto}.top .btn{display:none}}
.drawer{position:fixed;inset:0;z-index:70;background:#000;padding:calc(90px + env(safe-area-inset-top,0px)) var(--gr) 40px var(--gl);display:grid;align-content:start;gap:6px;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{font:500 clamp(2.2rem,9vw,3.4rem)/1.1 var(--sans);letter-spacing:-.04em;border-bottom:1px solid var(--line);padding:10px 0}
.drawer .close{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:var(--gr);background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:9px 14px;cursor:pointer}

/* ---------- portada ---------- */
.hero{position:relative;min-height:clamp(560px,92svh,980px);display:grid;align-items:end;overflow:hidden}
.hero picture,.hero .ph{position:absolute;inset:0;width:100%;height:100%}
.hero .ph{object-fit:cover;object-position:52% 58%;transform:scale(1.08);animation:push 16s ease-out forwards}
@keyframes push{to{transform:scale(1)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 6%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.55) 100%)}
.hero .in{position:relative;padding-block:140px clamp(32px,5vw,64px);width:100%}
.hero .eyebrow{display:flex;gap:14px;align-items:center;color:#ddd;margin-bottom:28px}
.hero .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--rojo);display:block}
.hero h1{font-size:clamp(3rem,8.4vw,9.4rem);max-width:13ch}
.hero .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:end;margin-top:clamp(28px,4vw,48px)}
.hero .row p{grid-column:1/6;color:#d6d6d6;font-size:clamp(1rem,1.25vw,1.15rem);max-width:44ch}
.hero .row .ctas{grid-column:8/13;display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:860px){.hero .row p,.hero .row .ctas{grid-column:1/-1}.hero .row .ctas{justify-content:flex-start;margin-top:24px}}

/* ---------- marcas ---------- */
.brands{border-block:1px solid var(--line);padding-block:28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.brands .lbl{padding-left:var(--gl);color:var(--muted);max-width:150px}
.marq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;animation:roll 38s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq img{height:var(--h,44px);width:auto;opacity:.78;transition:opacity .3s}
.marq img:hover{opacity:1}
@keyframes roll{to{transform:translateX(-50%)}}
@media (max-width:700px){.brands{grid-template-columns:1fr;gap:18px}.brands .lbl{max-width:none}}

/* ---------- encabezados ---------- */
section.blk{padding-block:clamp(96px,12vw,170px) 0}
.shead{align-items:end;padding-bottom:clamp(36px,5vw,64px)}
.shead .idx{grid-column:1/3;color:var(--muted);align-self:start;padding-top:.7em}
.shead h2{grid-column:3/10;font-size:clamp(2.8rem,7vw,7.2rem)}
.shead p{grid-column:10/13;color:var(--fg2);font-size:15px;max-width:30ch;justify-self:end}
@media (max-width:860px){.shead .idx{grid-column:1/-1;padding:0 0 14px}.shead h2{grid-column:1/-1}.shead p{grid-column:1/-1;justify-self:start;padding-top:16px}}

/* ---------- frentes ---------- */
.fronts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.front{position:relative;aspect-ratio:3/4.4;overflow:hidden;background:var(--surface);display:grid;align-content:end;isolation:isolate}
.front video,.front img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease),filter .6s}
.front::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.05) 60%)}
.front:hover video,.front:hover img.ph{transform:scale(1.05)}
.front .in{padding:22px;display:grid;gap:10px}
.front .n{color:#ccc}
.front h3{font-size:clamp(1.8rem,2.6vw,2.6rem)}
.front p{color:#cfcfcf;font-size:14px;max-width:28ch}
.front .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.front .tags span{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.3);padding:4px 7px;color:#ddd}
.front.pod{background:#0a0a0a}
.front.pod canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.front.pod .logos{position:absolute;top:22px;left:22px;display:flex;gap:16px;align-items:center;opacity:.9}
.front.pod .logos img{height:30px;width:auto}
@media (max-width:1000px){.fronts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fronts{grid-template-columns:minmax(0,1fr)}.front{aspect-ratio:4/5}}

/* ---------- destacados ---------- */
.cases{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.case{position:relative;overflow:hidden;background:var(--surface);display:grid;align-content:space-between;min-height:clamp(380px,40vw,560px);cursor:pointer;isolation:isolate;border:0;text-align:left;padding:0;color:#fff}
.case.c1{grid-column:span 7}.case.c2{grid-column:span 5}.case.c3{grid-column:span 5}.case.c4{grid-column:span 7}
.case video,.case img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.case::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.1) 55%,rgba(0,0,0,.35))}
.case:hover video,.case:hover img.ph{transform:scale(1.04)}
.case .tp{display:flex;justify-content:space-between;gap:12px;padding:22px;color:#ddd}
.case .bt{padding:22px;display:grid;gap:12px}
.case h3{font-size:clamp(2rem,3.6vw,3.6rem)}
.case .kpi{font:500 clamp(2.6rem,5vw,4.8rem)/.9 var(--sans);letter-spacing:-.05em;color:#fff}
.case .kpi small{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ccc;margin-top:8px}
.case .go{display:inline-flex;gap:8px;align-items:center;color:#fff;font:500 14px var(--sans)}
.case .go .arr{transition:transform .4s var(--ease)}
.case:hover .go .arr{transform:translateX(5px)}
.case.mundial{background:radial-gradient(70% 90% at 85% 10%,rgba(255,0,0,.38),transparent 70%),#050505}
.case.mundial .big{position:absolute;right:-2%;bottom:-8%;font:500 clamp(10rem,24vw,22rem)/.8 var(--sans);letter-spacing:-.08em;color:rgba(255,255,255,.06);z-index:-1;pointer-events:none}
.case.mundial .fdp{position:absolute;top:70px;right:22px;height:56px;width:auto;opacity:.9}
.case.staygo{background:#f2f2f2;color:#000}
.case.staygo::after{display:none}
.case.staygo .tp,.case.staygo .kpi small{color:#555}
.case.staygo .kpi,.case.staygo .go{color:#000}
.case.staygo .sw{position:absolute;right:22px;top:72px;display:grid;grid-template-columns:repeat(3,44px);gap:6px}
.case.staygo .sw i{display:block;aspect-ratio:1}
.case.staygo .guide{position:absolute;right:22px;top:132px;width:min(46%,260px);display:grid;gap:6px}
.case.staygo .guide span{height:8px;background:#000;opacity:.1}
.case.staygo .guide span:nth-child(1){width:70%;opacity:.8;height:14px}
.case.staygo .guide span:nth-child(3){width:85%}
.case.staygo .guide span:nth-child(4){width:60%}
@media (max-width:900px){.case.c1,.case.c2,.case.c3,.case.c4{grid-column:1/-1}}

/* ---------- cifras ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.stat{padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);display:grid;gap:10px;padding-right:20px}
.stat:nth-child(3n+2),.stat:nth-child(3n+3){padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.stat b{font:500 clamp(3rem,6.4vw,6.4rem)/.88 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.stat b .u{color:var(--rojo);font-size:.62em;letter-spacing:-.02em;margin-left:.04em}
.stat > span{color:var(--fg2);font-size:14px;max-width:26ch}
.stat .src{color:var(--muted)}
@media (max-width:760px){.stats{grid-template-columns:minmax(0,1fr)}.stat:nth-child(n){padding-left:0;border-left:0}}

/* ---------- proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.step{padding:24px 20px 28px 0;display:grid;gap:12px;align-content:start;position:relative}
.step + .step{padding-left:20px;border-left:1px solid var(--line)}
.step .n{color:var(--rojo)}
.step h3{font-size:clamp(1.4rem,2vw,1.9rem);letter-spacing:-.035em}
.step p{color:var(--fg2);font-size:14px}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}.step + .step{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* ---------- cierre ---------- */
.cta{position:relative;padding-block:clamp(120px,15vw,210px) clamp(40px,5vw,64px);overflow:hidden}
.cta .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(36% 50% at var(--mx,80%) var(--my,30%),rgba(255,0,0,.32),transparent 70%)}
.cta .big{position:relative;font:500 clamp(3.4rem,12vw,13rem)/.86 var(--sans);letter-spacing:-.06em}
.cta .row{position:relative;display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:32px;margin-top:clamp(40px,6vw,72px)}
.contact{display:grid;gap:10px}
.contact .ln{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font:500 clamp(1.1rem,2vw,1.5rem) var(--sans);letter-spacing:-.02em}
.copy{background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 2px;cursor:pointer;color:var(--muted);font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.copy:hover{color:#fff;border-color:#fff}
.foot{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:40px;margin-top:clamp(56px,8vw,100px);border-top:1px solid var(--line);color:var(--muted)}
.foot svg{height:28px;width:auto}
.foot nav{display:flex;gap:18px}
.foot nav a:hover{color:#fff}

.wa{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#fff;color:#000;padding:12px 18px;opacity:0;transition:.35s var(--ease);pointer-events:none;z-index:90}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{animation:none!important}html{scroll-behavior:auto}}

/* ---------- visor de foto y video ---------- */
dialog.viewer{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh;overflow:visible;color:#fff}
dialog.viewer::backdrop{background:rgba(0,0,0,.94)}
dialog.viewer .vbody video,dialog.viewer .vbody img{max-height:88vh;max-width:94vw;width:auto;display:block;margin:auto;background:#000}
dialog.viewer .vclose{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;cursor:pointer;font-size:14px}
dialog.viewer .vclose:hover{background:#fff;color:#000}

/* ---------- página de caso ---------- */
.chero{padding-top:calc(100px + env(safe-area-inset-top,0px))}
.crumb{display:flex;gap:10px;color:var(--muted);padding-bottom:clamp(24px,3vw,40px)}
.crumb a:hover{color:#fff}
.chero .g12{align-items:end;row-gap:32px}
.chero .l{grid-column:1/8;display:grid;gap:28px;align-self:stretch;align-content:space-between}
.chero h1{font-size:clamp(4rem,13vw,13rem);letter-spacing:-.06em;line-height:.82}
.chero .lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.35;letter-spacing:-.015em;color:#e6e6e6;max-width:30ch}
.chero .r{grid-column:9/13;position:relative;aspect-ratio:9/14;overflow:hidden;background:var(--surface)}
.chero .r video{width:100%;height:100%;object-fit:cover}
.chero .r .tag{position:absolute;left:14px;bottom:12px;color:#fff;mix-blend-mode:difference}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.meta div{padding:18px 18px 18px 0;display:grid;gap:6px;align-content:start}
.meta div + div{padding-left:18px;border-left:1px solid var(--line)}
.meta dt{color:var(--muted)}.meta dd{margin:0;font-size:15px}
@media (max-width:860px){.chero .l,.chero .r{grid-column:1/-1}.chero .r{aspect-ratio:4/5}.meta{grid-template-columns:repeat(2,minmax(0,1fr))}.meta div:nth-child(3){padding-left:0;border-left:0}.meta div:nth-child(n+3){border-top:1px solid var(--line)}}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--rojo);color:#fff;margin-top:clamp(64px,8vw,110px)}
.results div{padding:clamp(24px,3.4vw,48px) var(--gr) clamp(24px,3.4vw,48px) var(--gl);display:grid;gap:10px}
.results div + div{border-left:1px solid rgba(255,255,255,.35)}
.results b{font:500 clamp(3.4rem,8vw,8rem)/.85 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.results span{font-size:15px;max-width:24ch}
@media (max-width:760px){.results{grid-template-columns:minmax(0,1fr)}.results div + div{border-left:0;border-top:1px solid rgba(255,255,255,.35)}}
.story{padding-block:clamp(80px,10vw,150px) 0}
.srow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;padding-block:clamp(28px,3.6vw,48px);border-top:1px solid var(--line);align-items:start}
.srow .k{grid-column:1/4;color:var(--muted)}
.srow .v{grid-column:4/11;font-size:clamp(1.5rem,2.8vw,2.6rem);line-height:1.12;letter-spacing:-.03em}
.srow ol{grid-column:4/13;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.srow ol li{display:grid;gap:10px;align-content:start}
.srow ol li b{font:500 clamp(1.2rem,1.7vw,1.5rem)/1.2 var(--sans);letter-spacing:-.02em}
.srow ol li span{color:var(--fg2);font-size:15px}
.srow ol li i{font-style:normal;color:var(--rojo)}
@media (max-width:860px){.srow .k,.srow .v,.srow ol{grid-column:1/-1}.srow .k{padding-bottom:12px}.srow ol{grid-template-columns:minmax(0,1fr)}}
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(110px,11vw,170px);gap:12px;margin-top:clamp(56px,7vw,96px)}
.gal button{position:relative;overflow:hidden;border:0;padding:0;background:var(--surface);cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal button:hover img{transform:scale(1.04)}
.g-a{grid-column:span 5;grid-row:span 5}.g-b{grid-column:span 4;grid-row:span 3}.g-c{grid-column:span 3;grid-row:span 3}.g-d{grid-column:span 3;grid-row:span 2}.g-e{grid-column:span 4;grid-row:span 2}
.g-f{grid-column:span 4;grid-row:span 4}.g-g{grid-column:span 4;grid-row:span 4}.g-h{grid-column:span 4;grid-row:span 4}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(110px,30vw,200px)}.gal button{grid-column:span 1!important;grid-row:span 2!important}.gal .g-a{grid-column:span 2!important;grid-row:span 3!important}}
.pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.piece{display:grid;gap:12px;border:0;padding:0;background:none;text-align:left;cursor:pointer;color:#fff}
.piece .im{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--surface)}
.piece video,.piece img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.piece:hover video,.piece:hover img{transform:scale(1.04)}
.piece .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,0,0,.92);display:grid;place-items:center;transition:transform .4s var(--ease)}
.piece:hover .play{transform:scale(1.1)}
.piece .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.piece .cap{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.piece .cap b{font:500 17px var(--sans);letter-spacing:-.02em}
@media (max-width:900px){.pieces{grid-template-columns:repeat(2,minmax(0,1fr))}}
.credits{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;border-top:1px solid var(--line);padding-top:28px}
.credits .k{grid-column:1/4;color:var(--muted)}
.credits dl{grid-column:4/13;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.credits dt{color:var(--muted);margin-bottom:6px}.credits dd{margin:0;font-size:16px}
@media (max-width:860px){.credits .k,.credits dl{grid-column:1/-1}.credits dl{grid-template-columns:minmax(0,1fr);margin-top:16px}}
.next{display:block;position:relative;overflow:hidden;margin-top:clamp(80px,10vw,140px);min-height:clamp(320px,36vw,480px);isolation:isolate}
.next video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.45);transition:filter .8s,transform 1.4s var(--ease)}
.next:hover video{filter:brightness(.65);transform:scale(1.03)}
.next .in{padding-block:clamp(32px,5vw,64px);display:grid;gap:14px;align-content:end;min-height:inherit}
.next h2{font-size:clamp(3rem,9vw,9rem)}

/* ---------- caso con video horizontal ---------- */
.chero.wide .l{grid-column:1/-1}
.chero.wide .r{grid-column:1/-1;aspect-ratio:16/8}
@media (max-width:860px){.chero.wide .r{aspect-ratio:16/10}}
.yt{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;display:block;width:100%;border:0;padding:0;cursor:pointer;color:#fff}
.yt img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:filter .6s,transform 1.2s var(--ease)}
.yt:hover img{filter:brightness(.85);transform:scale(1.02)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--rojo);display:grid;place-items:center;transition:transform .4s var(--ease)}
.yt:hover .play{transform:scale(1.08)}
.yt .play::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.yt .lbl{position:absolute;left:20px;bottom:18px;text-align:left;display:grid;gap:4px}
.yt .lbl b{font:500 clamp(1.2rem,2vw,1.8rem) var(--sans);letter-spacing:-.03em}
.ytrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:14px;color:var(--muted)}
.ytrow a{color:#fff;border-bottom:1px solid var(--line)}
.ytrow a:hover{border-color:#fff}

/* ---------- celular con Reels ---------- */
.feedsec{position:relative;overflow:hidden;margin-top:clamp(96px,12vw,170px);padding-block:clamp(72px,9vw,130px)}
.feedsec .amb{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(70px) saturate(1.2) brightness(.45);transform:scale(1.2);transition:background-image 1s}
.feedgrid{position:relative;align-items:center;row-gap:48px}
.feedgrid .l{grid-column:1/7;display:grid;gap:26px}
.feedgrid .l h2{font-size:clamp(2.8rem,6.6vw,6.4rem)}
.feedgrid .l p{color:#cfcfcf;max-width:40ch}
.feedgrid .r{grid-column:8/13;justify-self:center}
.rlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rlist button{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 0;cursor:pointer;color:#aaa;transition:color .3s,padding .4s var(--ease)}
.rlist button b{font:500 clamp(1.1rem,1.6vw,1.35rem) var(--sans);letter-spacing:-.02em}
.rlist button[aria-current="true"]{color:#fff;padding-left:10px}
.rlist button[aria-current="true"] .mono:first-child{color:var(--rojo)}
.rlist a{color:inherit}
@media (max-width:860px){.feedgrid .l,.feedgrid .r{grid-column:1/-1}}
.phone{width:min(330px,82vw);aspect-ratio:9/19.3;border-radius:50px;background:#0c0c0c;padding:10px;box-shadow:0 0 0 1.5px #2c2c2c,0 60px 120px -40px rgba(0,0,0,.95);position:relative}
.phone::before{content:"";position:absolute;top:19px;left:50%;width:86px;height:25px;border-radius:14px;background:#000;transform:translateX(-50%);z-index:6}
.screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#000;color:#fff;font:13px/1.35 var(--sans)}
.reels{position:absolute;inset:0;transition:transform .8s var(--ease)}
.reel{position:relative;height:100%;width:100%}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 38%),linear-gradient(to bottom,rgba(0,0,0,.35),transparent 18%)}
.reel .who{position:absolute;left:12px;right:64px;bottom:44px;display:grid;gap:8px}
.reel .who .u{display:flex;align-items:center;gap:8px;font:600 13px var(--sans)}
.reel .who .u .av{width:30px;height:30px;border-radius:50%;background:#000;display:grid;place-items:center;border:1.5px solid #fff;overflow:hidden}
.reel .who .u .av img{width:76%;height:auto}
.reel .who .u span.f{border:1px solid rgba(255,255,255,.7);border-radius:8px;padding:2px 8px;font:600 11px var(--sans)}
.reel .who p{font-size:12.5px;line-height:1.35}
.reel .who a{font:600 11px var(--sans);opacity:.85;text-decoration:underline;text-underline-offset:2px}
.reel .acts{position:absolute;right:10px;bottom:48px;display:grid;gap:18px;justify-items:center}
.reel .acts svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
.screen .topbar{position:absolute;top:0;left:0;right:0;padding:50px 14px 0;display:flex;justify-content:space-between;align-items:center;z-index:4;pointer-events:none}
.screen .topbar b{font:700 18px var(--sans);letter-spacing:-.02em}
.screen .snd{position:absolute;right:8px;bottom:168px;z-index:5;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:grid;place-items:center}
.screen .snd svg{width:18px;height:18px}
.screen .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:5}
.screen .prog i{display:block;height:100%;width:0;background:#fff}
.screen .nav{position:absolute;left:0;right:0;z-index:4;height:30%;border:0;background:none;cursor:pointer}
.screen .nav.up{top:14%}.screen .nav.dn{bottom:14%}

/* ---------- transición entre páginas ---------- */
html::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;background:radial-gradient(circle at 50% 50%,var(--rojo) 0 7px,transparent 7.5px),#000;transform:translateY(0);animation:ptIn .75s var(--ease) .08s forwards}
@keyframes ptIn{to{transform:translateY(-101%)}}
.pt-exit{position:fixed;inset:0;z-index:301;pointer-events:none;background:#000;transform:translateY(101%);transition:transform .5s var(--ease);display:grid;place-items:center}
.pt-exit i{width:14px;height:14px;border-radius:50%;background:var(--rojo);transform:scale(0);transition:transform .35s var(--ease) .2s}
html.leaving .pt-exit{transform:translateY(0)}
html.leaving .pt-exit i{transform:scale(1)}
.chero h1,.chero .lead,.chero .crumb,.hero h1,.hero .eyebrow,.hero .row{animation:ptUp .9s var(--ease) both}
.chero h1,.hero h1{animation-delay:.42s}.chero .lead,.hero .row{animation-delay:.55s}.chero .crumb,.hero .eyebrow{animation-delay:.35s}
.chero .r{animation:ptMedia 1.1s var(--ease) .4s both}
@keyframes ptUp{from{opacity:0;transform:translateY(36px)}}
@keyframes ptMedia{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){html::after{display:none}.pt-exit{display:none}}

/* ---------- caso con imagen y capturas de navegador ---------- */
.chero .r img{width:100%;height:100%;object-fit:cover}
.browser{border-radius:14px;overflow:hidden;background:#111;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);border:1px solid var(--line)}
.browser .bar{display:flex;gap:6px;align-items:center;padding:10px 12px;background:#1a1a1a}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#3a3a3a;display:block}
.browser .bar span{margin-left:10px;font:500 11px var(--mono);color:#888;letter-spacing:.04em}
.browser img{width:100%;height:auto;display:block}
.shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:clamp(56px,7vw,96px);align-items:start}
.shots .s1{grid-column:1/9}.shots .s2{grid-column:9/13;align-self:center;justify-self:center}
.shots .s3{grid-column:1/7}.shots .s4{grid-column:7/13}.shots .s5{grid-column:2/12}
.shots figcaption{padding-top:10px;color:var(--muted)}
.shots figure{margin:0}
.mphone{width:min(260px,70vw);aspect-ratio:9/19.3;border-radius:40px;background:#0c0c0c;padding:8px;box-shadow:0 0 0 1.5px #2c2c2c,0 40px 80px -30px rgba(0,0,0,.9)}
.mphone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:32px}
@media (max-width:860px){.shots .s1,.shots .s2,.shots .s3,.shots .s4,.shots .s5{grid-column:1/-1}}
.guidecta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:clamp(20px,3vw,32px);margin-top:clamp(40px,5vw,64px)}
.guidecta b{font:500 clamp(1.4rem,2.6vw,2.2rem)/1.05 var(--sans);letter-spacing:-.035em}

/* ---------- servicios ---------- */
.svhero{padding-top:calc(110px + env(safe-area-inset-top,0px))}
.svhero h1{font-size:clamp(4rem,13vw,13rem);letter-spacing:-.06em;line-height:.82}
.svhero .g12{align-items:end;row-gap:28px;padding-top:clamp(20px,3vw,40px)}
.svhero .l{grid-column:1/8}.svhero .r{grid-column:9/13;display:grid;gap:18px}
.svhero .lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.35;letter-spacing:-.015em;color:#e6e6e6;max-width:32ch}
.svidx{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.svidx a{display:flex;gap:14px;align-items:baseline;padding:16px 16px 16px 0;border-bottom:1px solid var(--line);transition:color .3s,padding .4s var(--ease)}
.svidx a:hover{padding-left:10px}
.svidx a b{font:500 clamp(1.05rem,1.5vw,1.3rem) var(--sans);letter-spacing:-.02em}
.svidx a .mono{color:var(--rojo)}
@media (max-width:860px){.svhero .l,.svhero .r{grid-column:1/-1}.svidx{grid-template-columns:minmax(0,1fr)}}
.sv{padding-block:clamp(80px,10vw,140px) 0;scroll-margin-top:70px}
.sv .g12{align-items:start;row-gap:32px}
.sv .media{grid-column:1/7;position:relative;overflow:hidden;background:var(--surface);aspect-ratio:4/5;position:sticky;top:calc(90px + env(safe-area-inset-top,0px))}
.sv .media video,.sv .media > img{width:100%;height:100%;object-fit:cover}
.sv .media .browser{position:absolute;inset:10% 6% auto 6%}
.sv .media.blank{display:grid;place-items:center;background:radial-gradient(60% 70% at 70% 20%,rgba(255,0,0,.25),transparent 70%),#080808}
.sv .media .mphone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.sv .body{grid-column:8/13;display:grid;gap:26px}
.sv.flip .media{grid-column:7/13;grid-row:1}.sv.flip .body{grid-column:1/6;grid-row:1}
.sv .num{font:500 clamp(4rem,9vw,8rem)/.8 var(--sans);letter-spacing:-.06em;color:var(--rojo)}
.sv h2{font-size:clamp(2.4rem,5vw,4.6rem)}
.sv .pitch{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4;letter-spacing:-.012em;color:#e2e2e2}
.sv dl{margin:0;display:grid;gap:18px;border-top:1px solid var(--line);padding-top:20px}
.sv dt{color:var(--muted);margin-bottom:8px}
.sv dd{margin:0}
.sv ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sv ul li{padding-left:22px;position:relative;font-size:15.5px;color:#ddd}
.sv ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.sv .for{display:flex;flex-wrap:wrap;gap:6px}
.sv .for span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:6px 9px;color:#ccc}
.sv .cases{display:flex;flex-wrap:wrap;gap:10px}
.sv .cases a{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:6px 12px 6px 6px;font:500 14px var(--sans);transition:border-color .3s,background .3s}
.sv .cases a:hover{border-color:#fff;background:#111}
.sv .cases img{width:34px;height:34px;object-fit:cover}
.sv .cases span.none{color:var(--muted);font-size:14px}
@media (max-width:860px){.sv .media,.sv.flip .media{grid-column:1/-1;grid-row:auto;position:relative;top:auto;aspect-ratio:4/3}.sv .body,.sv.flip .body{grid-column:1/-1;grid-row:auto}}
.tailor{margin-top:clamp(96px,12vw,170px);background:var(--rojo);color:#fff}
.tailor .wrap{padding-block:clamp(56px,8vw,110px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:28px;align-items:end}
.tailor h2{grid-column:1/8;font-size:clamp(2.6rem,6.4vw,6.4rem)}
.tailor p{grid-column:8/13;font-size:17px;max-width:36ch}
.tailor .btn{grid-column:8/13;justify-self:start;border-color:#fff}
.tailor .btn:hover{background:#000;border-color:#000;color:#fff}
@media (max-width:860px){.tailor h2,.tailor p,.tailor .btn{grid-column:1/-1}}

/* servicios: cada medio se ve completo, en su proporción real */
.sv .media{aspect-ratio:4/5}
.sv .media .vf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:88%;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:#000;box-shadow:0 0 0 1px var(--line),0 40px 80px -30px rgba(0,0,0,.9)}
.sv .media .vf video{width:100%;height:100%;object-fit:cover;display:block}
.sv .media .mphone{height:88%;width:auto;max-width:none}
@media (max-width:860px){.sv .media,.sv.flip .media{aspect-ratio:4/5}}
@media (min-width:861px){.sv .media{max-height:calc(100svh - 120px)}}
.sv .media.photo > img{object-fit:contain}

/* ---------- nosotros ---------- */
.abst{padding-block:clamp(80px,11vw,160px)}
.abst p{margin:0;font:500 clamp(2rem,5.2vw,5rem)/1.02 var(--sans);letter-spacing:-.045em;max-width:18ch}
.abst em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--rojo)}
.lbl{display:block;color:var(--muted);margin-bottom:28px}
.abpr ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.abpr li{padding:28px 24px 8px 0;display:grid;gap:12px;align-content:start}
.abpr li+li{padding-left:24px;border-left:1px solid var(--line)}
.abpr li .mono{color:var(--rojo)}
.abpr h3{margin:0;font:500 clamp(1.3rem,1.9vw,1.7rem)/1.1 var(--sans);letter-spacing:-.025em}
.abpr p{margin:0;color:#cfcfcf;font-size:15.5px;line-height:1.5}
.abdir{padding-block:clamp(90px,11vw,160px)}
.abdir .g12{align-items:center;row-gap:40px}
.abdir .ph{grid-column:1/6;aspect-ratio:4/5;display:grid;place-items:center;background:radial-gradient(60% 70% at 70% 20%,rgba(255,0,0,.28),transparent 70%),#080808;border:1px solid var(--line);overflow:hidden}
.abdir .ph svg{width:46%;height:auto}
.abdir .ph img{width:100%;height:100%;object-fit:cover}
.abdir .tx{grid-column:7/13;display:grid;gap:22px;justify-items:start}
.abdir .red{color:var(--rojo)}
.abdir h2{font-size:clamp(3rem,7vw,6.6rem);margin:0}
.abdir p{margin:0;font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.5;color:#dcdcdc;max-width:46ch}
.tl{list-style:none;margin:6px 0 4px;padding:0;width:100%;border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.tl li .mono{color:var(--muted)}
.tl li b{font-weight:500}
.tl li span:last-child{color:#aaa;font-size:14px;text-align:right}
.abkit{padding-bottom:clamp(80px,10vw,140px)}
.abkit ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.abkit li{padding:26px 20px 26px 0;display:grid;gap:10px}
.abkit li+li{padding-left:20px;border-left:1px solid var(--line)}
.abkit li .mono{color:var(--muted)}
.abkit li b{font:500 clamp(1.4rem,2.4vw,2.2rem)/1 var(--sans);letter-spacing:-.03em}
.ablogos{padding-bottom:clamp(90px,11vw,150px)}
.ablogos ul{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ablogos li{aspect-ratio:1.4;display:grid;place-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18%}
.ablogos img{max-width:100%;max-height:46px;width:auto;height:auto;opacity:.8;transition:opacity .3s}
.ablogos li:hover img{opacity:1}
@media (max-width:980px){.abpr ol,.abkit ul{grid-template-columns:repeat(2,minmax(0,1fr))}.abpr li:nth-child(3),.abkit li:nth-child(3){padding-left:0;border-left:0}.abpr li:nth-child(n+3),.abkit li:nth-child(n+3){border-top:1px solid var(--line)}.ablogos ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.abdir .ph,.abdir .tx{grid-column:1/-1}}
@media (max-width:560px){.abpr ol{grid-template-columns:minmax(0,1fr)}.abpr li,.abpr li+li{padding-left:0;border-left:0}.abpr li+li{border-top:1px solid var(--line)}.ablogos ul{grid-template-columns:repeat(3,minmax(0,1fr))}.tl li{grid-template-columns:minmax(0,1fr);gap:4px}.tl li span:last-child{text-align:left}}
.abkit .kl{display:flex;align-items:center;gap:12px;min-height:44px}
.abkit .kl img{height:34px;width:auto;display:block}
.abkit .kl b{font:500 clamp(1.1rem,1.7vw,1.5rem)/1 var(--sans);letter-spacing:-.02em}
.abkit .kl b.wm{font:700 clamp(1.5rem,2.4vw,2rem)/1 var(--sans);letter-spacing:-.04em}
.ablogos li{aspect-ratio:auto;height:clamp(92px,10vw,136px);padding:0 16%}
.abdir .sclbl{margin-top:6px}
.scenes{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.scenes li{background:#000;padding:20px 20px 22px;display:grid;gap:8px;align-content:start;transition:background .4s}
.scenes li:hover{background:#0d0d0d}
.scenes li .mono{color:var(--muted)}
.scenes li i{font-style:normal;color:var(--rojo)}
.scenes li b{font:500 clamp(1.2rem,1.7vw,1.5rem)/1.1 var(--sans);letter-spacing:-.025em}
.scenes li p{font-size:14.5px;line-height:1.45;color:#bdbdbd;margin:0}
@media (max-width:480px){.scenes{grid-template-columns:minmax(0,1fr)}}

/* ---------- cotiza ---------- */
.qt{padding:calc(110px + env(safe-area-inset-top,0px)) 0 clamp(80px,10vw,140px)}
.qt .g12{align-items:start;row-gap:48px}
.qside{grid-column:1/6;display:grid;gap:26px;position:sticky;top:110px}
.qside h1{font-size:clamp(3.6rem,9vw,8.6rem);letter-spacing:-.06em;line-height:.85;margin:0}
.qside .lead{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4;color:#e2e2e2;max-width:34ch;margin:0}
.qalt{display:grid;gap:12px;justify-items:start;border-top:1px solid var(--line);padding-top:22px}
.qalt .mail{background:none;border:0;color:#aaa;padding:0;cursor:pointer;text-transform:none;letter-spacing:.02em}
.qalt .mail:hover{color:#fff}
.qform{grid-column:7/13;border:1px solid var(--line);background:var(--surface);padding:clamp(22px,3vw,40px);display:grid;gap:28px}
.qprog{display:grid;gap:12px}.qprog .mono{color:var(--muted)}.qprog b{color:#fff;font-weight:500}
.qprog i{display:block;height:2px;background:var(--line)}.qprog i b{display:block;height:100%;width:25%;background:var(--rojo);transition:width .6s var(--ease)}
.qstep{border:0;margin:0;padding:0;display:none;gap:18px;min-width:0}
.qstep.on{display:grid;animation:qin .5s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(12px)}}
.qstep legend{font:500 clamp(1.8rem,3.4vw,2.8rem)/1 var(--sans);letter-spacing:-.04em;padding:0;margin-bottom:10px}
.qstep .sub{color:var(--muted);margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 16px;border:1px solid var(--line);font-size:14.5px;color:#ddd;transition:border-color .25s,background .25s,color .25s}
.chips label:hover span{border-color:#fff}
.chips input:checked+span{background:#fff;color:#000;border-color:#fff}
.chips input:checked+span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rojo)}
.chips input:focus-visible+span{outline:1.5px solid var(--rojo);outline-offset:3px}
.fld{display:grid;gap:8px}.fld .mono{color:var(--muted)}
.fld input,.fld textarea{width:100%;background:#000;border:1px solid var(--line);color:#fff;font:400 16px var(--sans);padding:13px 14px;border-radius:0;transition:border-color .25s}
.fld input:focus,.fld textarea:focus{outline:0;border-color:#fff}
.fld textarea{resize:vertical;min-height:110px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qsum{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:12px}
.qsum dl{margin:0;display:grid;gap:10px}
.qsum dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px}
.qsum dt{color:var(--muted)}.qsum dd{margin:0;font-size:14.5px;color:#ddd;white-space:pre-wrap;overflow-wrap:anywhere}
.qsend{display:flex;flex-wrap:wrap;gap:10px}
.qsend .off{opacity:.4}
.note{margin:0;text-transform:none;letter-spacing:.02em}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:22px}
.btn.ghost{border-color:var(--line)}
.qerr{color:var(--rojo);text-transform:none;letter-spacing:.02em;text-align:center;flex:1}
.qfoot{padding-bottom:30px}
@media (max-width:900px){.qside,.qform{grid-column:1/-1}.qside{position:static}}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}.qsum dl div{grid-template-columns:minmax(0,1fr);gap:2px}.qnav .btn{padding:0 14px}}
/* intro corta en celular */
@media (max-width:700px){.intro{transition-duration:.4s}}