/* toma6 · sitio público. Base: diseño original de la landing. */
/* Archivo (variable: ancho 62–125, peso 100–900) servida desde el propio sitio */
@font-face{font-family:"Archivo";src:url("/assets/archivo-variable-f02771cd.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
/* El atributo hidden siempre gana (las reglas display:flex/grid no lo pisan) */
[hidden]{display:none!important}

:root{
  --bg:#0e0b0a;
  --bg-alt:#17110f;
  --ink:#f6eee8;
  --ink-2:#a8978e;
  --line:#3b2c27;
  --card:#211815;
  --bar:rgba(14,11,10,.82);
  --logo-filter:none;
  --black:#080606;
  --red:#b63830;
  --red-hover:#c9463c;
  --amber:#e0a458;
  --rec:#e0473b;
  --blue:var(--red);
  --blue-hover:var(--red-hover);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  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"]){
    --bg:#0e0b0a; --bg-alt:#17110f; --ink:#f6eee8; --ink-2:#a8978e; --line:#3b2c27; --card:#211815; --bar:rgba(14,11,10,.82); --logo-filter:none;
  }
}
:root[data-theme="dark"]{
  --bg:#0e0b0a; --bg-alt:#17110f; --ink:#f6eee8; --ink-2:#a8978e; --line:#3b2c27; --card:#211815; --bar:rgba(14,11,10,.82); --logo-filter:none;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 52px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- Navegación ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(22,22,23,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);color:#f5f5f7}
.nav-inner{max-width:1024px;margin:0 auto;height:48px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{height:26px;width:auto}
.bar-logo{height:24px;filter:var(--logo-filter)}
.wordmark{margin:0 auto;width:min(80vw,520px);line-height:0}
.wordmark img{width:100%;height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.5))}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:32px;font-size:13px}
.nav ul a{text-decoration:none;opacity:.8;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.nav .btn{font-size:12px;padding:5px 12px}

/* ---------- Botones ---------- */
.btn{display:inline-block;text-decoration:none;border-radius:980px;padding:12px 24px;font-size:17px;font-weight:500;transition:background .2s,transform .2s}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-hover)}
.link{color:#2997ff;text-decoration:none;font-size:17px}
.link:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;background:#000;color:#f5f5f7;overflow:hidden;display:grid;place-items:center;text-align:center}
.lens{position:absolute;left:50%;top:50%;width:min(92vmin,860px);aspect-ratio:1;margin-left:calc(min(92vmin,860px) / -2);margin-top:calc(min(92vmin,860px) / -2);pointer-events:none}
.glow{position:absolute;inset:-20%;background:radial-gradient(40% 35% at 50% 55%,rgba(64,90,255,.28),transparent 70%),radial-gradient(30% 25% at 62% 40%,rgba(255,120,80,.16),transparent 70%);pointer-events:none}
.hero-copy{position:relative;z-index:2;padding:0 22px;will-change:transform,opacity}
.rec{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.02em;color:#a1a1a6;margin:0 0 18px;font-variant-numeric:tabular-nums}
.rec .dot{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 12px var(--rec);animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.hero-sub{max-width:34ch;margin:22px auto 0;font-size:clamp(19px,2.4vw,28px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#f5f5f7}
.hero-cta{margin-top:34px;display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;z-index:2}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ---------- Manifiesto (texto que se revela) ---------- */
.manifesto{position:relative;height:260vh;background:#000;color:#f5f5f7}
.manifesto-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding:0 22px}
.manifesto p{max-width:980px;margin:0;font-size:clamp(32px,5.6vw,72px);line-height:1.08;font-weight:700;letter-spacing:-.035em}
.manifesto .w{opacity:.16;transition:opacity .25s linear}
.manifesto .w.on{opacity:1}

/* ---------- Secciones generales ---------- */
.section{padding:clamp(96px,14vw,160px) 22px}
.wrap{max-width:1080px;margin:0 auto}
.section-head{text-align:center;max-width:760px;margin:0 auto clamp(64px,9vw,110px)}
.section-head h2{margin:0;font-size:clamp(40px,6.4vw,80px);line-height:1.04;font-weight:700;letter-spacing:-.04em}
.section-head p{margin:20px auto 0;max-width:46ch;font-size:clamp(19px,2vw,24px);line-height:1.35;color:var(--ink-2);letter-spacing:-.015em}

/* ---------- Servicios ---------- */
.services{background:var(--bg)}
.service{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,80px);align-items:center;margin-bottom:clamp(96px,13vw,170px)}
.service:last-child{margin-bottom:0}
.service:nth-child(even){grid-template-columns:7fr 5fr}
.service:nth-child(even) .service-text{order:2}
.take{display:inline-block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:14px;font-variant-numeric:tabular-nums}
.service h3{margin:0 0 16px;font-size:clamp(32px,4.2vw,52px);line-height:1.06;font-weight:700;letter-spacing:-.035em}
.service p{margin:0;color:var(--ink-2);font-size:19px;line-height:1.45;max-width:38ch}
.service ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.service li{font-size:14px;padding:6px 14px;border-radius:980px;border:1px solid var(--line);color:var(--ink)}
.visual{position:relative;aspect-ratio:5/4;border-radius:30px;overflow:hidden;background:var(--bg-alt);isolation:isolate}
.layer{position:absolute;will-change:transform}

/* Toma 1: producción audiovisual */
.v-video .sky{inset:-15%;background:linear-gradient(180deg,#2a2d6e 0%,#8a4f9e 38%,#ff7a6b 68%,#ffc27a 100%)}
.v-video .sun{width:34%;aspect-ratio:1;left:33%;top:42%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff6d8 0%,#ffd27a 55%,rgba(255,180,90,0) 72%)}
.v-video .hills{left:-10%;right:-10%;bottom:-18%;height:62%}
.v-video .frame{inset:0;padding:22px;color:#fff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.corner{position:absolute;width:34px;height:34px;border-color:rgba(255,255,255,.9);border-style:solid;border-width:0}
.c-tl{top:18px;left:18px;border-top-width:2px;border-left-width:2px}
.c-tr{top:18px;right:18px;border-top-width:2px;border-right-width:2px}
.c-bl{bottom:18px;left:18px;border-bottom-width:2px;border-left-width:2px}
.c-br{bottom:18px;right:18px;border-bottom-width:2px;border-right-width:2px}
.vf-top{position:absolute;top:30px;left:66px;right:66px;display:flex;justify-content:space-between;align-items:center}
.vf-top span:first-child{display:inline-flex;align-items:center;gap:6px}
.vf-top span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec)}
.vf-cross{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
.vf-cross::before,.vf-cross::after{content:"";position:absolute;background:rgba(255,255,255,.8)}
.vf-cross::before{left:12px;top:0;width:2px;height:26px}
.vf-cross::after{top:12px;left:0;height:2px;width:26px}

/* Toma 2: fotografía */
.v-photo{background:linear-gradient(160deg,#eef0f5,#dfe3ea)}
:root[data-theme="dark"] .v-photo{background:linear-gradient(160deg,#1f2026,#121317)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-photo{background:linear-gradient(160deg,#1f2026,#121317)}}
.print-wrap{width:44%;aspect-ratio:4/5}
.print{width:100%;height:100%;background:#fff;padding:5%;padding-bottom:15%;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.print div{width:100%;height:100%;border-radius:2px}
.p1{left:8%;top:18%}.p1 .print{transform:rotate(-9deg)}.p1 .print div{background:linear-gradient(200deg,#8ec5fc,#e0c3fc)}
.p2{left:44%;top:10%}.p2 .print{transform:rotate(7deg)}.p2 .print div{background:radial-gradient(circle at 30% 70%,#f9d423,#ff4e50 60%,#6b1f3a)}
.p3{left:27%;top:30%}.p3 .print{transform:rotate(-1deg)}.p3 .print div{background:linear-gradient(180deg,#0f2027,#2c5364 55%,#b1c9a4)}

/* Toma 3: edición */
.v-edit{background:#1d1d1f}
.editor{inset:9% 7%;display:flex;flex-direction:column;gap:10px}
.monitor{flex:1;border-radius:12px;background:linear-gradient(135deg,#3a1c71,#d76d77 55%,#ffaf7b);position:relative;overflow:hidden}
.monitor::after{content:"00:01:24:12";position:absolute;right:12px;bottom:10px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.tracks{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px;background:#2c2c2e;border-radius:12px}
.track{position:relative;height:18px}
.clip{position:absolute;top:0;height:100%;border-radius:4px}
.t1 .clip{background:#5e5ce6}.t2 .clip{background:#30d158}.t3 .clip{background:#ff9f0a}.t4 .clip{background:#64d2ff;height:60%;top:20%}
.playhead{position:absolute;top:4px;bottom:4px;left:32%;width:2px;background:var(--rec);border-radius:1px;animation:play 7s linear infinite}
.playhead::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:8px;background:var(--rec);border-radius:2px}
@keyframes play{from{left:4%}to{left:96%}}

/* Toma 4: motion graphics */
.v-motion{background:linear-gradient(145deg,#0a84ff,#5e5ce6 60%,#bf5af2)}
.shape{border-radius:50%}
.s1{width:30%;aspect-ratio:1;left:10%;top:14%;background:radial-gradient(circle at 35% 30%,#fff,#ffd60a 40%,#ff9f0a)}
.s2{width:24%;aspect-ratio:1;right:14%;top:12%;border-radius:22%;background:linear-gradient(135deg,#ffffff,#c7c7ff);transform-origin:center}
.s3{width:34%;aspect-ratio:1;left:40%;bottom:6%;background:transparent;border:clamp(14px,2.4vw,26px) solid rgba(255,255,255,.9)}
.s4{width:18%;aspect-ratio:1;left:16%;bottom:14%;border-radius:0;background:#ff375f;clip-path:polygon(50% 0,100% 100%,0 100%)}
.s5{width:9%;aspect-ratio:1;right:22%;bottom:34%;background:#30d158}

/* Toma 5: redes sociales */
.v-social{background:linear-gradient(180deg,#fdf2ec,#f7dfe9)}
:root[data-theme="dark"] .v-social{background:linear-gradient(180deg,#2a1d22,#1a1216)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-social{background:linear-gradient(180deg,#2a1d22,#1a1216)}}
.phone{width:26%;aspect-ratio:9/19;border-radius:22px;border:5px solid #1d1d1f;background:#1d1d1f;box-shadow:0 30px 60px -24px rgba(0,0,0,.45);overflow:hidden}
.phone div{width:100%;height:100%;border-radius:17px}
.ph1{left:12%;top:18%}.ph1 div{background:linear-gradient(180deg,#f7971e,#ffd200)}
.ph2{left:37%;top:8%;width:28%}.ph2 div{background:linear-gradient(180deg,#ff5f6d,#845ec2)}
.ph3{left:63%;top:22%}.ph3 div{background:linear-gradient(180deg,#43cea2,#185a9d)}

/* Toma 6: en vivo */
.v-live{background:#000}
.live-badge{top:9%;left:7%;display:inline-flex;align-items:center;gap:8px;background:var(--rec);color:#fff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:8px}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s steps(2,start) infinite}
.viewers{top:9%;right:7%;color:#a1a1a6;font-size:13px;font-weight:500;padding-top:6px;font-variant-numeric:tabular-nums}
.wave{left:7%;right:7%;top:28%;bottom:18%;display:flex;align-items:center;gap:1.2%}
.wave span{flex:1;border-radius:4px;background:linear-gradient(180deg,#64d2ff,#5e5ce6);transform-origin:center;animation:eq 1.4s ease-in-out infinite alternate}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.live-bar{left:7%;right:7%;bottom:9%;height:4px;border-radius:2px;background:#2c2c2e;overflow:hidden}
.live-bar::after{content:"";position:absolute;inset:0;width:100%;background:var(--rec)}

/* ---------- Trabajos (scroll horizontal) ---------- */
.work{position:relative;background:var(--bg-alt)}
.work-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.work-head{padding:0 max(22px,calc((100vw - 1080px)/2));margin-bottom:40px}
.work-head h2{margin:0;font-size:clamp(40px,6.4vw,80px);line-height:1.04;font-weight:700;letter-spacing:-.04em}
.work-head p{margin:12px 0 0;color:var(--ink-2);font-size:clamp(17px,1.8vw,21px)}
.track-x{display:flex;gap:24px;padding:0 max(22px,calc((100vw - 1080px)/2));will-change:transform}
.project{flex:0 0 auto;width:min(78vw,440px);aspect-ratio:4/5;max-height:62vh;border-radius:28px;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:28px}
.project::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55));z-index:0}
.project > *{position:relative;z-index:1}
.project small{font-size:14px;font-weight:500;opacity:.85}
.project h3{margin:6px 0 0;font-size:clamp(24px,2.6vw,32px);line-height:1.1;font-weight:700;letter-spacing:-.025em}
.pj1{background:radial-gradient(120% 90% at 20% 10%,#ffb199,#ff0844 60%,#5c0020)}
.pj2{background:linear-gradient(160deg,#13547a,#80d0c7)}
.pj3{background:radial-gradient(100% 80% at 80% 20%,#fddb92,#d1fdff 40%,#3a7bd5)}
.pj4{background:linear-gradient(200deg,#232526,#414345 50%,#b79891)}
.pj5{background:radial-gradient(120% 100% at 50% 0%,#c471f5,#fa71cd 50%,#3b1c5a)}

/* ---------- Galería (adelanto en la landing) ---------- */
.gallery-teaser{background:var(--bg);overflow:hidden}
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.teaser-col{display:flex;flex-direction:column;gap:16px}
.teaser-col:nth-child(2){margin-top:90px}
.teaser-col:nth-child(3){margin-top:30px}
.teaser-cta{text-align:center;margin-top:72px}
.teaser-cta p{margin:14px 0 0;color:var(--ink-2);font-size:15px}

.ph-tile{position:relative;display:block;width:100%;border:0;padding:0;margin:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--bg-alt);transition:filter .25s}
.ph-tile:hover{filter:brightness(1.07)}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Página de galería ---------- */
.gpage{position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;display:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.gpage.open{display:block;animation:gIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes gIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.gpage-bar{position:sticky;top:0;z-index:3;padding-top:env(safe-area-inset-top,0px);background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.gpage-bar-inner{max-width:1200px;margin:0 auto;height:52px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}
.back{background:none;border:0;padding:6px 0;color:var(--blue);font:inherit;font-size:15px;cursor:pointer}
.gpage-head{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,88px) 22px 32px}
.gpage-head h2{margin:0;font-size:clamp(44px,7vw,88px);line-height:1;font-weight:800;letter-spacing:-.05em}
.gpage-head p{margin:14px 0 0;color:var(--ink-2);font-size:clamp(17px,1.8vw,21px)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.chip{border:1px solid var(--line);background:none;color:var(--ink);border-radius:980px;padding:8px 18px;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.masonry{max-width:1200px;margin:0 auto;padding:0 22px 110px;columns:3 260px;column-gap:16px}
.masonry .ph-tile{margin-bottom:16px;break-inside:avoid}

/* ---------- Visor (lightbox) ---------- */
.lb{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 64px) 84px calc(env(safe-area-inset-bottom,0px) + 40px)}
.lb.open{display:flex;animation:lbIn .3s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%}
.lb-img{border-radius:14px;overflow:hidden;background:#1d1d1f}
.lb-img img{width:100%;height:100%;object-fit:cover;display:block}
.lb figcaption{color:#f5f5f7;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.01em}
.lb figcaption span{display:block;margin-top:4px;font-size:14px;font-weight:400;color:#a1a1a6;font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-close{top:calc(env(safe-area-inset-top,0px) + 14px);right:18px;font-size:22px}
.lb-prev{left:18px;top:50%;margin-top:-23px}
.lb-next{right:18px;top:50%;margin-top:-23px}

@media (max-width:760px){
  .teaser-grid{grid-template-columns:1fr 1fr}
  .teaser-col:nth-child(3){display:none}
  .lb{padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 96px)}
  .lb-prev,.lb-next{top:auto;margin-top:0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}
  .lb-prev{left:calc(50% - 60px)}
  .lb-next{right:calc(50% - 60px)}
}

/* ---------- Proceso ---------- */
.process{background:var(--bg)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;counter-reset:step}
.steps li{padding-top:22px;border-top:1px solid var(--line);counter-increment:step}
.steps li::before{content:counter(step);display:block;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:18px;color:var(--ink)}
.steps h3{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.steps p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.45}

/* ---------- Contacto ---------- */
.contact{position:relative;background:#000;color:#f5f5f7;overflow:hidden;text-align:center;padding:clamp(120px,18vw,220px) 22px}
.contact .lens{width:min(120vmin,1100px);margin-left:calc(min(120vmin,1100px) / -2);margin-top:calc(min(120vmin,1100px) / -2);opacity:.55}
.contact-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.contact h2{margin:0;font-size:clamp(44px,7.4vw,96px);line-height:1;font-weight:800;letter-spacing:-.05em;background:linear-gradient(180deg,#fff,#a1a1a6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.contact p{margin:22px auto 0;max-width:40ch;font-size:clamp(19px,2vw,23px);color:#a1a1a6}
.contact .hero-cta{margin-top:40px}
.contact-meta{margin-top:56px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-size:15px;color:#a1a1a6}
.contact-meta a{text-decoration:none;color:#f5f5f7}
.contact-meta a:hover{text-decoration:underline}

/* ---------- Footer ---------- */
footer{background:var(--bg-alt);color:var(--ink-2);font-size:12px;padding:22px}
.foot{max-width:1024px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot nav{display:flex;gap:20px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav ul{display:none}
  .service,.service:nth-child(even){grid-template-columns:1fr}
  .service:nth-child(even) .service-text{order:0}
  .visual{border-radius:22px}
  .steps{grid-template-columns:1fr}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .manifesto .w{opacity:1}
}

/* =================================================================
   IDENTIDAD TOMA6: paleta de la marca (negro de estudio, rojo toma,
   luz cálida) y tipografía condensada como el logotipo.
   ================================================================= */
body{letter-spacing:0;background:var(--bg)}
:focus-visible{outline-color:var(--amber)}
.mark{background:var(--red);color:#fff;padding:.02em .24em .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mark-sm{padding:.05em .3em;font-weight:700}

/* Titulares condensados en mayúsculas, como TOMA */
.section-head h2,.work-head h2,.gpage-head h2,.service h3,.contact h2,.hero-claim{font-family:var(--font);font-stretch:72%;font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
.section-head h2,.work-head h2,.gpage-head h2{font-size:clamp(48px,8vw,104px);line-height:.92}
.service h3{font-size:clamp(36px,4.8vw,60px);line-height:.95}

/* Navegación */
.nav{background:rgba(14,11,10,.78);border-bottom:1px solid rgba(182,56,48,.35)}
.nav ul a{font-weight:500;font-size:14px}

/* Botones: rectos, como las cajas rojas de la marca */
.btn{border-radius:3px;font-weight:700;letter-spacing:.01em;padding:13px 26px}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-hover)}
.nav .btn{padding:6px 14px;font-size:13px}
.link{color:var(--amber);font-weight:600}

/* Hero: estudio en penumbra con luz roja y grano de película */
.hero{background:
  radial-gradient(28% 40% at 80% 20%,rgba(182,56,48,.38),transparent 70%),
  radial-gradient(22% 28% at 14% 32%,rgba(224,164,88,.14),transparent 70%),
  radial-gradient(70% 45% at 50% 100%,rgba(70,45,38,.55),transparent 75%),
  #0b0908}
.hero::before{content:"";position:absolute;right:8%;top:6%;width:min(26vw,300px);aspect-ratio:3/4;transform:rotate(-12deg);background:repeating-linear-gradient(180deg,rgba(246,238,232,.22) 0 9px,rgba(246,238,232,.1) 9px 14px);filter:blur(22px);opacity:.7;pointer-events:none}
.hero::after,.contact::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;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")}
.glow{background:radial-gradient(40% 35% at 50% 55%,rgba(182,56,48,.22),transparent 70%),radial-gradient(30% 25% at 40% 45%,rgba(224,164,88,.1),transparent 70%)}
.lens{opacity:.8}
.rec{color:var(--ink-2)}
.hero-claim{margin:26px 0 0;font-size:clamp(30px,4.6vw,56px);line-height:1;color:#fff}
.hero-sub{font-weight:500;font-size:clamp(17px,1.9vw,22px);color:var(--ink-2);margin-top:20px}

/* Manifiesto */
.manifesto{background:var(--bg)}
.manifesto p{font-weight:800;letter-spacing:-.02em}
.manifesto .w.on{color:var(--ink)}

/* Servicios */
.take{background:var(--red);color:#fff;font-weight:700;padding:4px 10px;border-radius:2px;margin-bottom:18px}
.service li{border-radius:3px;border-color:var(--line);color:var(--ink-2)}
.visual{border-radius:10px;background:var(--bg-alt);box-shadow:0 0 0 1px rgba(246,238,232,.05)}
.v-video .sky{background:linear-gradient(180deg,#140b0a 0%,#4a1a16 38%,#b63830 70%,#e0a458 100%)}
.v-video .sun{background:radial-gradient(circle,#fff1dc 0%,#f3c27f 50%,rgba(224,164,88,0) 72%)}
.v-photo,:root[data-theme="dark"] .v-photo{background:linear-gradient(160deg,#211815,#110c0b)}
.print{background:#f6eee8;border-radius:2px}
.p1 .print div{background:linear-gradient(200deg,#e0a458,#7a2a22)}
.p2 .print div{background:radial-gradient(circle at 30% 70%,#f3d2a2,#b63830 60%,#2a0f0c)}
.p3 .print div{background:linear-gradient(180deg,#1a1311,#5a3b30 55%,#c9a27a)}
.v-edit{background:#17110f}
.monitor{background:linear-gradient(135deg,#2a0f0c,#b63830 55%,#e0a458)}
.tracks{background:#241a17}
.t1 .clip{background:#b63830}.t2 .clip{background:#e0a458}.t3 .clip{background:#7a4a3a}.t4 .clip{background:#d9c4b5}
.v-motion{background:linear-gradient(145deg,#5a1612,#b63830 60%,#d1573f)}
.s1{background:radial-gradient(circle at 35% 30%,#fff1dc,#e0a458 45%,#a0643c)}
.s2{background:linear-gradient(135deg,#f6eee8,#d9c4b5)}
.s3{border-color:rgba(246,238,232,.9)}
.s4{background:#140807}
.s5{background:#e0a458}
.v-social,:root[data-theme="dark"] .v-social{background:linear-gradient(180deg,#241815,#120c0b)}
.phone{border-color:#080606;background:#080606;border-radius:18px}
.phone div{border-radius:13px}
.ph1 div{background:linear-gradient(180deg,#e0a458,#b63830)}
.ph2 div{background:linear-gradient(180deg,#c9463c,#3a1714)}
.ph3 div{background:linear-gradient(180deg,#5a3b30,#c9a27a)}
.v-live{background:#080606}
.wave span{background:linear-gradient(180deg,#e0a458,#b63830)}
.live-badge{background:var(--red);border-radius:2px}
.live-bar{background:#241a17}.live-bar::after{background:var(--red)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-photo{background:linear-gradient(160deg,#211815,#110c0b)}:root:not([data-theme="light"]) .v-social{background:linear-gradient(180deg,#241815,#120c0b)}}

/* Trabajos */
.work{background:var(--bg-alt)}
.project{border-radius:8px}
.project small{font-weight:600}
.project h3{font-stretch:80%;font-weight:800;text-transform:uppercase;letter-spacing:0}
.pj1{background:radial-gradient(120% 90% at 20% 10%,#f3b28a,#b63830 60%,#3a0f0c)}
.pj2{background:linear-gradient(160deg,#2b1a14,#8a6a58)}
.pj3{background:radial-gradient(100% 80% at 80% 20%,#f3d2a2,#e0a458 40%,#7a2a22)}
.pj4{background:linear-gradient(200deg,#0e0b0a,#3b2c27 50%,#b63830)}
.pj5{background:radial-gradient(120% 100% at 50% 0%,#c9463c,#5a1612 50%,#120807)}

/* Galería */
.gallery-teaser{background:var(--bg)}
.ph-tile{border-radius:6px}
.chip{border-radius:3px}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.gpage{background:var(--bg)}
.gpage-bar{border-bottom-color:rgba(182,56,48,.35)}
.back{color:var(--amber);font-weight:600}
.lb{background:rgba(8,6,6,.95)}
.lb-img{border-radius:6px}

/* Proceso */
.process{background:var(--bg-alt)}
.steps li{border-top:2px solid var(--line)}
.steps li:first-child{border-top-color:var(--red)}
.steps li::before{color:var(--red);font-stretch:72%;font-size:56px;font-weight:800}
.steps h3{text-transform:uppercase;font-stretch:80%;font-weight:800;font-size:24px;letter-spacing:0}

/* Contacto */
.contact{background:radial-gradient(60% 50% at 50% 110%,rgba(182,56,48,.35),transparent 70%),#0b0908}
.contact h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;font-size:clamp(40px,7vw,92px);line-height:1.12}
.contact p{color:#d9cbc2}
.contact-meta a{color:var(--ink)}

footer{background:var(--black);border-top:1px solid var(--line)}

/* Fotos de muestra */
.sky-photo{inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover}
.v-video .frame{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.4))}
.print div img,.phone div img{width:100%;height:100%;object-fit:cover;display:block}
.phone div{overflow:hidden}
.monitor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project .pj-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.project::before{z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(10,6,5,.8))}
.project > small,.project > h3{position:relative;z-index:2}
#gpageTitle:focus{outline:none}

/* Videos */
.vid-badge{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(8,6,6,.74);color:#fff;font-size:13px;font-weight:700;line-height:1;padding:6px 9px 6px 8px;border-radius:3px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;pointer-events:none}
.vid-badge svg{width:11px;height:11px;color:var(--red)}
.ph-tile .tile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;z-index:1}
.project .vid-badge{position:absolute;top:18px;left:18px;bottom:auto;z-index:2}
.lb-img video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.type-toggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:4px;margin-right:10px}
.type-toggle button{border:0;background:none;color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;padding:6px 14px;border-radius:2px;cursor:pointer}
.type-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.filters{align-items:center}
.g-empty{max-width:1200px;margin:0 auto;padding:40px 22px 120px;color:var(--ink-2);font-size:17px}
.g-empty button{margin-left:8px;background:none;border:0;padding:0;color:var(--amber);font:inherit;font-weight:600;cursor:pointer}

/* =================================================================
   VERSIÓN COMPACTA Y JUVENIL
   ================================================================= */
.section{padding:clamp(64px,8vw,104px) 22px}
.wrap{max-width:1160px}
.section-head{margin:0 auto clamp(34px,5vw,54px)}
.section-head h2,.work-head h2,.gpage-head h2{font-size:clamp(40px,6.2vw,80px)}
.section-head p{font-size:clamp(16px,1.7vw,20px);margin-top:14px}

/* Botones con volumen */
.btn{border-radius:10px}
.btn.primary{box-shadow:0 5px 0 #6e1e18;transition:transform .15s,box-shadow .15s,background .2s}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #6e1e18}
.btn.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #6e1e18}
.nav .btn.primary{box-shadow:0 3px 0 #6e1e18}
.chip,.type-toggle,.type-toggle button{border-radius:999px}

/* Hero más compacto */
.hero{min-height:560px}
.wordmark{width:min(74vw,440px)}
.hero-claim{font-size:clamp(26px,3.8vw,44px);margin-top:16px}
.hero-claim .mark{display:inline-block;transform:rotate(-2.5deg)}
.hero-sub{max-width:40ch;margin-top:18px}
.hero-cta{margin-top:26px}

/* Cintas animadas */
.ticker{position:relative;z-index:4;background:var(--red);color:#fff;overflow:hidden;transform:rotate(-1.6deg);margin:-24px -3vw 0;padding:12px 0;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.ticker-alt{background:var(--amber);color:#160908;transform:rotate(1.3deg);margin:0 -3vw -24px}
.ticker-track{display:flex;width:max-content;animation:tick 30s linear infinite}
.ticker-alt .ticker-track{animation-direction:reverse;animation-duration:36s}
.ticker span{font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,34px);letter-spacing:.01em;white-space:nowrap;padding-right:.4em}
@keyframes tick{to{transform:translateX(-50%)}}

/* Manifiesto más corto */
.manifesto{height:170vh}
.manifesto p{font-size:clamp(28px,4.4vw,58px);max-width:900px}

/* Servicios en tarjetas */
.services .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.services .section-head{grid-column:1/-1}
.service,.service:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:visible;transition:transform .25s,border-color .25s}
.service:hover{transform:translateY(-5px) rotate(-.4deg);border-color:var(--red)}
.service .visual{order:-1;aspect-ratio:16/11;border-radius:17px 17px 0 0;box-shadow:none}
.service-text,.service:nth-child(even) .service-text{order:0;position:relative;padding:24px 22px 24px}
.service h3{font-size:clamp(24px,2.3vw,30px);margin:0 0 8px}
.service p{font-size:15.5px;line-height:1.45;max-width:none}
.service ul{margin-top:14px;gap:6px}
.service li{font-size:12.5px;padding:4px 11px;border-radius:999px}
.take{position:absolute;top:-15px;left:18px;margin:0;transform:rotate(-4deg);font-size:13px;box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:3}
@media (max-width:980px){.services .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.services .wrap{grid-template-columns:1fr}}

/* Trabajos */
.work-head{margin-bottom:26px}
.track-x{gap:16px}
.project{width:min(74vw,340px);max-height:58vh;border-radius:18px;padding:22px}
.project h3{font-size:clamp(22px,2.2vw,28px)}
.project > p{position:relative;z-index:2;margin:6px 0 0;font-size:14px;line-height:1.4;color:rgba(255,255,255,.85);max-width:32ch}
.project::before{background:linear-gradient(180deg,transparent 30%,rgba(10,6,5,.88))}

/* Galería */
.teaser-grid,.teaser-col{gap:12px}
.teaser-col:nth-child(2){margin-top:60px}
.teaser-col:nth-child(3){margin-top:24px}
.teaser-cta{margin-top:48px}
.ph-tile{border-radius:14px}
.masonry{column-gap:12px}
.masonry .ph-tile{margin-bottom:12px}
.lb-img{border-radius:12px}
.lb figcaption .lb-desc{display:block;margin:8px auto 0;max-width:52ch;font-size:15px;font-weight:400;color:#d9cbc2}

/* Proceso en tarjetas */
.steps{gap:12px}
.steps li,.steps li:first-child{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--card)}
.steps li:nth-child(odd){transform:rotate(-.6deg)}
.steps li:nth-child(even){transform:rotate(.6deg)}
.steps li::before{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;font-size:22px;margin-bottom:14px}
.steps h3{font-size:21px}
.steps p{font-size:14.5px}

/* Contacto */
.contact{padding:clamp(100px,13vw,160px) 22px clamp(80px,10vw,130px)}
.contact h2{font-size:clamp(34px,5.6vw,72px);transform:rotate(-1.5deg)}
.contact p{margin-top:26px}
.contact-meta{margin-top:40px}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .service:hover{transform:none}
}

/* =================================================================
   VERSIÓN NEOBRUTALISMO
   Bordes negros gruesos, sombras duras sin desenfoque, colores planos
   y saturados, tipografía pesada y stickers inclinados.
   ================================================================= */
:root{
  --bg:#FFF3E3; --bg-alt:#FFF3E3; --card:#FFFFFF;
  --ink:#111111; --ink-2:#3b322f; --line:#111111;
  --bd:#111111; --hs:#111111;
  --yellow:#F7C94B; --pink:#FFB5A7; --sky:#A9D6FF;
  --bar:#FFF3E3; --logo-filter:brightness(0);
  --b:3px solid var(--bd);
  --sh:6px 6px 0 var(--hs); --sh-lg:9px 9px 0 var(--hs); --sh-sm:3px 3px 0 var(--hs);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15110f; --bg-alt:#15110f; --card:#241c1a; --ink:#f6eee8; --ink-2:#d2c4bc; --line:#f6eee8;
    --bd:#f6eee8; --hs:#f6eee8; --bar:#15110f; --logo-filter:none;
  }
}
:root[data-theme="dark"]{
  --bg:#15110f; --bg-alt:#15110f; --card:#241c1a; --ink:#f6eee8; --ink-2:#d2c4bc; --line:#f6eee8;
  --bd:#f6eee8; --hs:#f6eee8; --bar:#15110f; --logo-filter:none;
}
body{background:var(--bg);color:var(--ink);font-weight:500}
:focus-visible{outline:3px dashed var(--red);outline-offset:4px}

/* Navegación */
.nav{background:var(--bar);color:var(--ink);border-bottom:var(--b);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav ul a{opacity:1;font-weight:800;text-transform:uppercase;font-stretch:80%;letter-spacing:.02em}
.nav ul a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--red)}
.brand-logo,.bar-logo{filter:var(--logo-filter)}

/* Botones */
.btn,.nav .btn{border-radius:8px}
.btn.primary,.nav .btn.primary{background:var(--red);color:#fff;border:var(--b);box-shadow:var(--sh);font-weight:800;text-transform:uppercase;font-stretch:85%;letter-spacing:.02em}
.nav .btn.primary{box-shadow:var(--sh-sm);border-width:2px}
.btn.primary:hover{background:var(--red);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hs)}
.btn.primary:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--hs)}
.link{color:var(--ink)}
.hero-cta .link,.contact .link{display:inline-block;padding:12px 22px;border-radius:8px;border:var(--b);background:var(--yellow);color:#111;box-shadow:var(--sh);font-weight:800;text-transform:uppercase;font-stretch:85%;text-decoration:none;transition:transform .15s,box-shadow .15s}
.hero-cta .link:hover,.contact .link:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--hs)}
.hero-cta .link:active,.contact .link:active{transform:translate(5px,5px);box-shadow:none}

/* Hero con papel cuadriculado */
.hero{color:var(--ink);background:
  linear-gradient(var(--bg),var(--bg)) padding-box,
  repeating-linear-gradient(0deg,transparent 0 39px,rgba(17,17,17,.08) 39px 40px),
  repeating-linear-gradient(90deg,transparent 0 39px,rgba(17,17,17,.08) 39px 40px);
  background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(127,110,100,.16) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(127,110,100,.16) 39px 40px),var(--bg)}
.hero::before,.hero::after,.contact::after{display:none}
.glow{display:none}
.lens svg{display:none}
.lens{opacity:1;border-radius:50%;background:var(--yellow);border:4px solid var(--bd);box-shadow:14px 14px 0 var(--hs)}
.lens::before{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--card);border:4px solid var(--bd);box-shadow:inset 0 0 0 14px var(--pink),inset 0 0 0 18px var(--bd)}

.rec{color:var(--ink);font-weight:800}
.wordmark img{filter:var(--logo-filter)}
.hero-claim{color:#fff}
.hero-claim .mark{background:var(--red);border:var(--b);box-shadow:var(--sh);border-radius:6px;padding:.06em .35em .1em;transform:rotate(-3deg)}
.hero-sub{color:var(--ink);font-weight:600}
.scroll-hint{border:3px solid var(--bd);background:var(--card)}
.scroll-hint::after{background:var(--ink)}

/* Cintas */
.ticker{background:#111;color:var(--yellow);border-top:var(--b);border-bottom:var(--b);border-color:#111;box-shadow:none}
.ticker-alt{background:var(--yellow);color:#111;border-color:#111}

/* Títulos */
.section-head h2,.work-head h2,.gpage-head h2{color:var(--ink);text-shadow:none}
.section-head p,.work-head p,.gpage-head p{color:var(--ink-2);font-weight:600}

/* Manifiesto sobre amarillo */
.manifesto{background:var(--yellow);border-bottom:var(--b);border-color:#111}
.manifesto p{color:#111}
.manifesto .w{opacity:.2}
.manifesto .w.on{opacity:1;color:#111}

/* Servicios */
.services{background:var(--bg)}
.service,.service:nth-child(even){background:var(--card);border:var(--b);border-radius:14px;box-shadow:var(--sh-lg)}
.service:hover{transform:translate(-3px,-3px) rotate(-.6deg);border-color:var(--bd);box-shadow:12px 12px 0 var(--hs)}
.service .visual{border-radius:11px 11px 0 0;border-bottom:var(--b)}
.take{background:var(--yellow);color:#111;border:2px solid #111;border-radius:6px;box-shadow:3px 3px 0 #111;transform:rotate(-5deg);font-weight:800;text-transform:uppercase;font-stretch:85%}
.service:nth-child(odd) .take{background:var(--pink)}
.service h3{color:var(--ink)}
.service p{color:var(--ink-2)}
.service li{border:2px solid var(--bd);color:#111;font-weight:700}
.service li:nth-child(1){background:var(--yellow)}
.service li:nth-child(2){background:var(--pink)}
.service li:nth-child(3){background:var(--sky)}
.v-photo,.v-social,:root[data-theme="dark"] .v-photo,:root[data-theme="dark"] .v-social{background:var(--sky)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-photo,:root:not([data-theme="light"]) .v-social{background:var(--sky)}}
.v-social{background:var(--pink)}
.print{border:2px solid #111;box-shadow:5px 5px 0 #111;border-radius:0}
.phone{box-shadow:5px 5px 0 #111}

/* Trabajos sobre rosa */
.work{background:var(--pink);border-top:var(--b);border-bottom:var(--b);border-color:#111}
.work-head h2{color:#111}
.work-head p{color:#3b322f}
.project{border:var(--b);border-color:#111;border-radius:14px;box-shadow:8px 8px 0 #111}
.project small{display:inline-block;align-self:flex-start;background:var(--yellow);color:#111;border:2px solid #111;border-radius:4px;padding:3px 8px;font-weight:800;opacity:1;position:relative;z-index:2}
.vid-badge{background:#111;color:#fff;border:2px solid #fff;border-radius:4px;-webkit-backdrop-filter:none;backdrop-filter:none}
.vid-badge svg{color:var(--yellow)}

/* Galería */
.gallery-teaser{background:var(--bg)}
.ph-tile{border:var(--b);border-radius:10px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.ph-tile:hover{filter:none;transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--hs)}
.ph-tile:active{transform:translate(4px,4px);box-shadow:none}
.teaser-cta p{color:var(--ink-2);font-weight:600}
.gpage{background:var(--bg)}
.gpage-bar{background:var(--bar);border-bottom:var(--b)}
.back{color:var(--ink);font-weight:800;text-transform:uppercase;font-stretch:85%}
.type-toggle{border:var(--b);background:var(--card);border-radius:10px;box-shadow:var(--sh-sm);padding:4px}
.type-toggle button{color:var(--ink);font-weight:800;border-radius:6px}
.type-toggle button[aria-pressed="true"]{background:#111;color:var(--yellow)}
.chip{border:2px solid var(--bd);background:var(--card);color:var(--ink);font-weight:700;border-radius:8px;box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s}
.chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hs)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--bd);color:#fff;transform:translate(3px,3px);box-shadow:none}
.lb-btn{background:var(--yellow);color:#111;border:2px solid #111;box-shadow:3px 3px 0 #000}
.lb-btn:hover{background:var(--pink)}
.lb-img{border:3px solid #fff;border-radius:8px}

/* Proceso sobre amarillo */
.process{background:var(--yellow);border-top:var(--b);border-color:#111}
.process .section-head h2{color:#111}
.process .section-head p{color:#3b322f}
.steps li,.steps li:first-child{border:var(--b);border-color:#111;border-radius:14px;background:#fff;color:#111;box-shadow:6px 6px 0 #111}
.steps li:nth-child(odd){transform:rotate(-1.5deg)}
.steps li:nth-child(even){transform:rotate(1.5deg)}
.steps li::before{background:var(--red);color:#fff;border:2px solid #111;box-shadow:3px 3px 0 #111}
.steps h3{color:#111}
.steps p{color:#3b322f}

/* Contacto sobre rojo */
.contact{background:var(--red);color:#fff;border-top:var(--b);border-color:#111}
.contact .lens{display:none}
.contact h2 .mark{background:#111;color:#fff;border:3px solid #111;box-shadow:8px 8px 0 var(--yellow)}
.contact p{color:#fff;font-weight:600}
.contact .mark-sm{background:var(--yellow);color:#111;border:2px solid #111;border-radius:4px;box-shadow:3px 3px 0 #111}
.contact .btn.primary{background:#111;color:#fff;border-color:#111;box-shadow:6px 6px 0 var(--yellow)}
.contact .btn.primary:hover{box-shadow:8px 8px 0 var(--yellow)}
.contact-meta{gap:14px}
.contact-meta a{color:#111;background:#fff;border:2px solid #111;border-radius:8px;padding:8px 16px;font-weight:800;box-shadow:3px 3px 0 #111}
.contact-meta a:hover{text-decoration:none;background:var(--pink)}

footer{background:#111;color:#f6eee8;border-top:0}
footer a{color:#f6eee8}

/* =================================================================
   PALETA DE MARCA (pieza "Dinámica de lanzamiento"):
   carbón neutro, rojo toma6 y blanco, sobre el sistema neobrutalista.
   ================================================================= */
:root,:root[data-theme="dark"]{
  --bg:#171717; --bg-alt:#171717; --card:#242424; --ink:#ffffff; --ink-2:#bdbdbd; --line:#ffffff;
  --bd:#ffffff; --hs:#B63830; --red:#B63830; --red-hover:#C4433A;
  --yellow:#ffffff; --pink:#d9d9d9; --sky:#8f8f8f; --bar:#141414; --logo-filter:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171717; --bg-alt:#171717; --card:#242424; --ink:#ffffff; --ink-2:#bdbdbd; --line:#ffffff;
    --bd:#ffffff; --hs:#B63830; --yellow:#ffffff; --pink:#d9d9d9; --sky:#8f8f8f; --bar:#141414; --logo-filter:none;
  }
}
body{background:var(--bg);color:#fff}
.nav{border-bottom-color:var(--red)}

/* Botones: rojo con sombra blanca; secundarios blancos con sombra roja */
.btn.primary,.nav .btn.primary{border-color:#fff;box-shadow:6px 6px 0 #fff}
.nav .btn.primary{box-shadow:3px 3px 0 #fff}
.btn.primary:hover{box-shadow:8px 8px 0 #fff}
.hero-cta .link,.contact .link{background:#fff;color:#141414;border-color:#fff;box-shadow:6px 6px 0 var(--red)}
.hero-cta .link:hover,.contact .link:hover{box-shadow:8px 8px 0 var(--red)}

/* Hero: carbón con viñeta, como la pieza, y el lente real */
.hero{background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),radial-gradient(70% 60% at 50% 45%,#3a3a3a,#1c1c1c 60%,#0c0c0c)}
.lens{background:none;border:4px solid #fff;box-shadow:16px 16px 0 var(--red)}
.lens::before{inset:0;background:radial-gradient(circle at 50% 50%,rgba(10,10,10,.45),rgba(10,10,10,.72));border:0;box-shadow:none}
.rec,.hero-sub{color:#fff}
.hero-claim .mark{border-color:#fff;box-shadow:6px 6px 0 #fff}
.scroll-hint{background:transparent;border-color:#fff}
.scroll-hint::after{background:#fff}

/* Cintas */
.ticker{background:var(--red);color:#fff;border-color:#fff}
.ticker-alt{background:#fff;color:#141414;border-color:#141414}

/* Manifiesto sobre rojo */
.manifesto{background:var(--red);border-color:#fff}
.manifesto p,.manifesto .w.on{color:#fff}
.manifesto .w{opacity:.28}

/* Servicios */
.service,.service:nth-child(even){background:var(--card);border-color:#fff;box-shadow:9px 9px 0 var(--red)}
.service:hover{box-shadow:12px 12px 0 var(--red)}
.service .visual{border-bottom-color:#fff}
.take{background:#fff;color:#141414;border-color:#141414;box-shadow:3px 3px 0 var(--red)}
.service:nth-child(odd) .take{background:var(--red);color:#fff;border-color:#fff;box-shadow:3px 3px 0 #fff}
.service li{border-color:#fff}
.service li:nth-child(1){background:#fff;color:#141414}
.service li:nth-child(2){background:var(--red);color:#fff}
.service li:nth-child(3){background:#3a3a3a;color:#fff}
.v-photo,.v-social,:root[data-theme="dark"] .v-photo,:root[data-theme="dark"] .v-social{background:#3a3a3a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-photo,:root:not([data-theme="light"]) .v-social{background:#3a3a3a}}
.print{border-color:#141414}

/* Trabajos */
.work{background:#0f0f0f;border-color:var(--red)}
.work-head h2{color:#fff}
.work-head p{color:#bdbdbd}
.project{border-color:#fff;box-shadow:8px 8px 0 var(--red)}
.project small{background:#fff;color:#141414;border-color:#141414}
.vid-badge svg{color:var(--red)}

/* Galería */
.ph-tile{border-color:#fff;box-shadow:6px 6px 0 var(--red)}
.ph-tile:hover{box-shadow:9px 9px 0 var(--red)}
.type-toggle{border-color:#fff;box-shadow:3px 3px 0 var(--red)}
.type-toggle button{color:#fff}
.type-toggle button[aria-pressed="true"]{background:var(--red);color:#fff}
.chip{border-color:#fff;color:#fff;box-shadow:3px 3px 0 var(--red)}
.chip[aria-pressed="true"]{background:#fff;color:#141414;border-color:#fff}
.gpage-bar{border-bottom-color:var(--red)}
.back{color:#fff}
.lb-btn{background:#fff;color:#141414;border-color:#fff;box-shadow:3px 3px 0 var(--red)}
.lb-btn:hover{background:#d9d9d9}

/* Proceso */
.process{background:#1f1f1f;border-color:var(--red)}
.process .section-head h2{color:#fff}
.process .section-head p{color:#bdbdbd}
.steps li,.steps li:first-child{background:#2a2a2a;color:#fff;border-color:#fff;box-shadow:6px 6px 0 var(--red)}
.steps li::before{border-color:#fff;box-shadow:3px 3px 0 #fff}
.steps h3{color:#fff}
.steps p{color:#bdbdbd}

/* Contacto */
.contact{border-color:#fff}
.contact h2 .mark{background:#141414;border-color:#fff;box-shadow:8px 8px 0 #fff}
.contact .mark-sm{background:#fff;color:#141414;border-color:#141414;box-shadow:3px 3px 0 #141414}
.contact .btn.primary{background:#141414;border-color:#fff;box-shadow:6px 6px 0 #fff}
.contact .btn.primary:hover{box-shadow:8px 8px 0 #fff}
.contact .link{box-shadow:6px 6px 0 #141414}
.contact-meta a{background:#fff;color:#141414;border-color:#141414;box-shadow:3px 3px 0 #141414}
.contact-meta a:hover{background:#d9d9d9}
footer{background:#0a0a0a;border-top:3px solid var(--red)}

/* =================================================================
   PORTADA ELEGANTE: logo con ilustración de diafragma de 6 hojas
   ================================================================= */
.hero{background:radial-gradient(65% 55% at 50% 46%,#2b2b2b 0%,#191919 55%,#0b0b0b 100%)}
.hero .lens{background:none;border:0;box-shadow:none;border-radius:0;width:min(94vmin,780px);margin-left:calc(min(94vmin,780px) / -2);margin-top:calc(min(94vmin,780px) / -2)}
.hero .lens::before,.hero .lens::after{display:none}
.hero .lens svg.iris{display:block;width:100%;height:100%;overflow:visible}
.iris-fring,.iris-focus{transform-origin:300px 300px;transform-box:view-box}
.rec{letter-spacing:.14em;font-weight:600;font-size:12px;color:rgba(255,255,255,.7)}
.hero .wordmark{width:min(70vw,400px)}
.hero-claim{margin-top:22px;font-size:clamp(20px,2.6vw,30px);letter-spacing:.04em}
.hero-claim .mark{transform:none;border:0;box-shadow:none;border-radius:2px;padding:.12em .5em .16em}
.hero-sub{font-weight:400;color:rgba(255,255,255,.78);font-size:clamp(16px,1.6vw,19px);margin-top:18px}
.hero .hero-cta{gap:14px;margin-top:30px}
.hero .btn.primary{border:1px solid var(--red);box-shadow:none;border-radius:4px;letter-spacing:.06em;font-size:15px;padding:13px 26px}
.hero .btn.primary:hover{transform:none;box-shadow:none;background:var(--red-hover)}
.hero .btn.primary:active{transform:none}
.hero .hero-cta .link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:none;border-radius:4px;letter-spacing:.06em;font-size:15px;padding:13px 26px}
.hero .hero-cta .link:hover{transform:none;box-shadow:none;border-color:#fff;background:rgba(255,255,255,.06)}
.hero .scroll-hint{border-width:1.5px;border-color:rgba(255,255,255,.5)}
@media (prefers-reduced-motion: reduce){.iris-ring,.iris-blades{animation:none}}

/* Servicios: 5 tarjetas (3 arriba, 2 abajo) */
.services .wrap{grid-template-columns:repeat(6,1fr)}
.services .service{grid-column:span 2}
.services .service:nth-of-type(4),.services .service:nth-of-type(5){grid-column:span 3}
.services .service:nth-of-type(4) .visual,.services .service:nth-of-type(5) .visual{aspect-ratio:16/9}
@media (max-width:980px){
  .services .wrap{grid-template-columns:1fr 1fr}
  .services .service,.services .service:nth-of-type(4){grid-column:span 1}
  .services .service:nth-of-type(5){grid-column:1 / -1}
}
@media (max-width:620px){
  .services .wrap{grid-template-columns:1fr}
  .services .service,.services .service:nth-of-type(4),.services .service:nth-of-type(5){grid-column:auto}
  .services .service .visual{aspect-ratio:16/11}
}
/* Visual de podcast */
.v-live .wave{opacity:.5}
.v-live .mic{left:42%;top:17%;width:16%;height:auto;overflow:visible;filter:drop-shadow(4px 4px 0 #B63830)}
.v-live .viewers{color:#d9d9d9}

/* SEO / accesibilidad */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Preguntas frecuentes */
.faq{background:var(--bg)}
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:16px}
.faq details{background:var(--card);border:3px solid #fff;border-radius:12px;box-shadow:6px 6px 0 var(--red);transition:box-shadow .15s,transform .15s}
.faq details[open]{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--red)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:800;font-size:clamp(17px,1.6vw,20px);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--red);color:#fff;border:2px solid #fff;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 22px 20px;color:#d0d0d0;font-size:16px;line-height:1.55;max-width:70ch}
footer strong{color:#fff}
footer a{text-decoration:underline}

/* Nosotros */
.about{background:#1f1f1f;border-top:3px solid var(--red);border-bottom:3px solid var(--red)}
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,80px);align-items:start}
.about-head h2{margin:0 0 22px;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,76px);line-height:.92;color:#fff}
.about-lead{margin:0;font-size:clamp(21px,2.2vw,28px);line-height:1.3;font-weight:600;color:#e6e6e6}
.about-lead strong{color:#fff;font-weight:800}
.about-body p{margin:0 0 18px;font-size:18px;line-height:1.6;color:#cfcfcf}
.mark-inline{padding:.05em .3em;font-weight:800;color:#fff;white-space:nowrap}
.values{list-style:none;margin:28px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.values li{background:#2a2a2a;border:3px solid #fff;border-radius:12px;box-shadow:5px 5px 0 var(--red);padding:16px}
.values strong{display:block;margin-bottom:6px;font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:18px;color:#fff}
.values span{font-size:14.5px;line-height:1.45;color:#bdbdbd}
.about-body .about-close{margin:0;font-size:clamp(20px,2vw,24px);font-weight:700;color:#fff}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.values{grid-template-columns:1fr}}

.contact-meta a.social{display:inline-flex;align-items:center;gap:8px}
.contact-meta a.social svg{width:18px;height:18px;flex:none}


/* =================================================================
   APP RAILS: navegación, páginas internas, proyectos, galería,
   cotizador y microanimaciones. Mismo sistema: carbón, rojo toma6,
   bordes blancos y sombras duras.
   ================================================================= */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;border-radius:6px;font-weight:800;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{margin:14px 0 4px;min-height:65px}

/* Navegación */
.nav{transition:background .25s,box-shadow .25s}
.nav.is-scrolled{box-shadow:0 6px 0 rgba(0,0,0,.35)}
.nav ul a{position:relative;text-decoration:none}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nav ul a:hover::after,.nav ul a.is-current::after{transform:scaleX(1)}
.nav ul a:hover{text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;width:40px;height:36px;border:2px solid #fff;border-radius:8px;background:transparent;cursor:pointer;padding:0;box-shadow:3px 3px 0 var(--red)}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:18px;height:2px;background:#fff;margin:0 auto;position:relative;transition:transform .25s,opacity .2s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
.menu-open .nav-toggle .bars{background:transparent}
.menu-open .nav-toggle .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-open .nav-toggle .bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .nav-toggle{display:grid;place-items:center}
  .nav ul{display:flex!important;position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 51px);flex-direction:column;gap:0;background:#141414;border-bottom:3px solid var(--red);padding:8px 22px 20px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
  .nav ul li{border-bottom:1px solid rgba(255,255,255,.12)}
  .nav ul a{display:block;padding:14px 0;font-size:20px}
  .nav ul a::after{display:none}
  .menu-open .nav ul{transform:none;opacity:1;pointer-events:auto}
}

/* Mensajes */
.site-flash{position:fixed;z-index:120;left:50%;top:calc(env(safe-area-inset-top,0px) + 66px);transform:translateX(-50%);background:#fff;color:#141414;border:3px solid #141414;border-radius:10px;box-shadow:6px 6px 0 var(--red);padding:12px 18px;font-weight:700;max-width:min(92vw,560px);animation:flashIn .4s cubic-bezier(.2,.8,.2,1)}
.site-flash-alert{background:var(--red);color:#fff;box-shadow:6px 6px 0 #fff}
.site-flash.is-leaving{opacity:0;transform:translate(-50%,-10px);transition:opacity .25s,transform .25s}
@keyframes flashIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translateX(-50%)}}

/* Servicios */
.services-more{text-align:center;margin:44px 0 0}
.service-price{margin-top:16px!important;color:#fff!important;font-size:15px!important}
.service-price strong{font-stretch:80%;font-weight:800;font-size:22px;color:#fff;background:var(--red);padding:2px 8px;border-radius:4px;margin:0 2px}
.v-image .sky-photo{inset:-10%;width:120%;height:120%;object-fit:cover}
.steps{grid-template-columns:repeat(var(--cols,5),1fr)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Trabajos en la portada */
a.project{text-decoration:none;color:#fff}
.pj-more{position:relative;z-index:2;margin-top:12px;font-weight:800;font-size:13px;text-transform:uppercase;font-stretch:85%;letter-spacing:.04em;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
a.project:hover .pj-more,a.project:focus-visible .pj-more{opacity:1;transform:none}
a.project .pj-img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
a.project:hover .pj-img{transform:scale(1.05)}
.work-all{color:#141414;font-weight:800;margin-left:6px}

/* Encabezado de páginas internas */
.page-head{padding:calc(env(safe-area-inset-top,0px) + 110px) 22px 40px;background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),#171717;border-bottom:3px solid var(--red)}
.page-head-inner{max-width:1200px;margin:0 auto}
.page-head h1{margin:10px 0 0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(48px,8vw,108px);line-height:.9;color:#fff}
.page-head p{margin:16px 0 0;max-width:56ch;color:#bdbdbd;font-size:clamp(17px,1.8vw,21px);font-weight:600}
.page-head .g-count{color:#fff;font-weight:800}
.page-head .g-count a{color:#fff}
.back{display:inline-block;color:#fff;text-decoration:none;font-weight:800;text-transform:uppercase;font-stretch:85%;letter-spacing:.03em;font-size:14px;transition:transform .2s}
.back:hover{transform:translateX(-4px)}

/* Listado de proyectos */
.projects-grid{max-width:1200px;margin:0 auto;padding:48px 22px 110px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.project-card{display:flex;flex-direction:column;background:var(--card);border:3px solid #fff;border-radius:14px;box-shadow:8px 8px 0 var(--red);color:#fff;text-decoration:none;overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.project-card:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:11px 11px 0 var(--red)}
.project-card:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--red)}
.project-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid #fff;background:#0e0e0e}
.project-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.project-card:hover .project-card-media img{transform:scale(1.06)}
.project-card-media .vid-badge{top:12px;left:12px;bottom:auto}
.project-count{position:absolute;right:12px;bottom:12px;background:#fff;color:#141414;border:2px solid #141414;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:800}
.project-card-text{padding:20px 20px 24px}
.project-card-text small{display:inline-block;background:#fff;color:#141414;border-radius:4px;padding:3px 8px;font-weight:800;font-size:12px}
.project-card-text h2{margin:12px 0 8px;font-stretch:76%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.4vw,30px);line-height:1}
.project-card-text p{margin:0;color:#bdbdbd;font-size:15px;line-height:1.45}

/* Detalle de proyecto */
.project-hero{display:grid;grid-template-columns:7fr 5fr;min-height:min(86vh,760px);background:#0e0e0e;border-bottom:3px solid var(--red)}
.project-hero-media{position:relative;overflow:hidden}
.project-hero-media img,.project-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-hero-copy{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 90px) clamp(22px,4vw,56px) clamp(32px,5vw,64px)}
.project-hero-copy .take{position:static;align-self:flex-start;transform:rotate(-3deg);background:#fff;color:#141414;border:2px solid #141414;box-shadow:3px 3px 0 var(--red);margin:0}
.project-hero-copy h1{margin:0;font-stretch:70%;font-weight:800;text-transform:uppercase;font-size:clamp(46px,6vw,92px);line-height:.9;color:#fff}
.project-lead{margin:0;color:#d9d9d9;font-size:clamp(17px,1.7vw,21px);line-height:1.45;max-width:46ch}
.project-body{display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,5vw,72px);padding:clamp(56px,8vw,96px) 22px}
.project-facts{margin:0;display:grid;gap:18px;align-content:start}
.project-facts div{border-top:3px solid #fff;padding-top:10px}
.project-facts dt{font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--red)}
.project-facts dd{margin:4px 0 0;font-size:18px;font-weight:700;color:#fff}
.fact-tag{display:inline-block;margin:4px 6px 0 0;padding:3px 10px;border:2px solid #fff;border-radius:999px;font-size:13px}
.project-story p{margin:0 0 18px;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:#d6d6d6;max-width:64ch}
.embed{position:relative;aspect-ratio:16/9;margin-top:28px;border:3px solid #fff;border-radius:12px;box-shadow:8px 8px 0 var(--red);overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.project-gallery{padding:0 0 90px}
.gallery-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:0 22px 26px}
.gallery-bar h2{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(36px,5vw,64px);line-height:1;color:#fff}
.gallery-bar .count{display:inline-grid;place-items:center;min-width:1.6em;height:1.3em;padding:0 .2em;font-size:.45em;vertical-align:middle;background:var(--red);border:2px solid #fff;border-radius:6px}
.album-tabs{margin-top:0}
.chip small{opacity:.75;margin-left:4px;font-weight:700}
.album-note{margin:-6px auto 22px;color:#bdbdbd;font-size:16px;max-width:1200px}
.project-nav{display:flex;justify-content:space-between;gap:16px;padding:0 22px 90px}
.pn{display:flex;flex-direction:column;gap:4px;max-width:46%;padding:16px 20px;border:3px solid #fff;border-radius:12px;background:var(--card);color:#fff;text-decoration:none;box-shadow:6px 6px 0 var(--red);transition:transform .15s,box-shadow .15s}
.pn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
.pn-next{text-align:right;margin-left:auto}
.pn small{color:#bdbdbd;font-weight:700}
.pn strong{font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:20px}
@media (max-width:860px){
  .project-hero{grid-template-columns:1fr}
  .project-hero-media{min-height:56vh}
  .project-body{grid-template-columns:1fr}
}

/* Galería general */
.gallery-page .filters{margin-top:26px}
.g-count{margin:12px 0 0}
.project-select select{appearance:none;font:inherit;font-weight:700;font-size:14px;color:#141414;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;border:2px solid #fff;border-radius:8px;padding:8px 36px 8px 14px;box-shadow:3px 3px 0 var(--red);cursor:pointer}
.gallery-page .masonry{padding-top:36px}
.albums-strip{max-width:1200px;margin:0 auto;padding:44px 22px 8px}
.albums-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:22px}
.albums-head h2{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,48px);color:#fff}
.albums-head p{margin:0;color:#bdbdbd;font-weight:600}
.albums-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,260px);gap:22px;overflow-x:auto;padding:14px 10px 26px 4px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.album-card{scroll-snap-align:start;display:block;color:#fff;text-decoration:none}
.album-fan{position:relative;aspect-ratio:1;margin-bottom:14px}
.album-fan img{position:absolute;inset:8%;width:84%;height:84%;object-fit:cover;border:3px solid #fff;border-radius:8px;box-shadow:5px 5px 0 #000;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.album-fan .fan-1{z-index:3;transform:rotate(-2deg)}
.album-fan .fan-2{z-index:2;transform:rotate(5deg) translate(6px,-4px)}
.album-fan .fan-3{z-index:1;transform:rotate(-8deg) translate(-8px,2px)}
.album-card:hover .fan-1,.album-card:focus-visible .fan-1{transform:rotate(0) translateY(-6px)}
.album-card:hover .fan-2,.album-card:focus-visible .fan-2{transform:rotate(12deg) translate(30px,-8px)}
.album-card:hover .fan-3,.album-card:focus-visible .fan-3{transform:rotate(-14deg) translate(-30px,0)}
.album-card-text small{display:block;color:var(--red);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.album-card-text h3{margin:4px 0 2px;font-stretch:78%;font-weight:800;text-transform:uppercase;font-size:22px;line-height:1}
.album-card-text span{color:#bdbdbd;font-size:14px;font-weight:600}
.ph-tile[hidden],.album-card[hidden],.project-card[hidden]{display:none!important}

/* Visor */
.lb figcaption strong{display:block}
.lb-counter{position:absolute;left:22px;top:calc(env(safe-area-inset-top,0px) + 22px);margin:0;color:#fff;font-weight:800;font-variant-numeric:tabular-nums;font-size:14px}
.lb-img{will-change:transform}

/* ---------- Cotizador ---------- */
.services-page{padding-top:60px}
.estimator{background:#0f0f0f;border-top:3px solid var(--red);padding:clamp(70px,9vw,110px) 22px clamp(90px,10vw,130px);scroll-margin-top:60px}
.estimator-inner{max-width:1200px;margin:0 auto}
.estimator-head{max-width:760px;margin-bottom:40px}
.estimator-head h2{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(44px,7vw,92px);line-height:.92;color:#fff}
.estimator-head p{margin:14px 0 0;color:#bdbdbd;font-size:clamp(17px,1.7vw,20px);font-weight:600}
.estimator-head .bundle-note{color:#fff}
.estimator-grid{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:start}
.est-step{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.04em;color:#fff}
.est-step > span:first-child{flex:none;color:#fff;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);border:2px solid #fff;font-size:14px}
.est-services{display:grid;gap:14px}
.est-service{background:var(--card);border:3px solid #fff;border-radius:14px;box-shadow:6px 6px 0 #000;transition:box-shadow .2s,transform .2s}
.est-service.is-on{box-shadow:8px 8px 0 var(--red);transform:translate(-2px,-2px)}
.est-service-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;cursor:pointer}
.est-service-head input,.est-addon input,.est-choice input{position:absolute;opacity:0;pointer-events:none}
.est-check{position:relative;width:28px;height:28px;border:3px solid #fff;border-radius:7px;background:#141414;transition:background .2s}
.est-check::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.est-check.sm{width:22px;height:22px;border-width:2px;border-radius:5px}
.est-check.sm::after{left:6px;top:2px;width:5px;height:10px}
input:checked + .est-check{background:var(--red)}
input:checked + .est-check::after{transform:rotate(45deg) scale(1)}
input:focus-visible + .est-check{outline:3px dashed var(--red);outline-offset:3px}
.est-service-title strong{display:block;font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2vw,26px);line-height:1;color:#fff}
.est-service-title small{display:block;margin-top:6px;color:#bdbdbd;font-size:14px;line-height:1.4}
.est-service-price{text-align:right;font-stretch:80%;font-weight:800;font-size:24px;color:#fff;white-space:nowrap}
.est-service-price small{display:block;font-stretch:100%;font-weight:600;font-size:12px;color:#bdbdbd}
.est-options{overflow:hidden;border-top:2px dashed rgba(255,255,255,.25);padding:6px 20px 18px;display:grid;gap:4px}
.est-group{border:0;margin:10px 0 4px;padding:0}
.est-group legend{padding:0;margin-bottom:8px;font-weight:800;color:#fff;font-size:14px}
.est-choices{display:flex;flex-wrap:wrap;gap:8px}
.est-choice span{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:2px solid #fff;border-radius:10px;cursor:pointer;background:#1a1a1a;transition:transform .15s,background .15s,box-shadow .15s}
.est-choice span strong{font-size:14px;color:#fff}
.est-choice span em{font-style:normal;font-size:12px;color:#bdbdbd;font-weight:700}
.est-choice input:checked + span{background:var(--red);box-shadow:3px 3px 0 #fff;transform:translate(-1px,-1px)}
.est-choice input:checked + span em{color:#fff}
.est-choice input:focus-visible + span{outline:3px dashed #fff;outline-offset:2px}
.est-addon,.est-qty{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer}
.est-addon:last-child,.est-qty:last-child{border-bottom:0}
.est-opt-text{flex:1;display:flex;flex-direction:column;gap:2px}
.est-opt-text strong{color:#fff;font-size:15px}
.est-opt-text small{color:#9f9f9f;font-size:13px}
.est-opt-text em,.est-addon > em{font-style:normal;font-weight:800;color:#fff;font-size:14px}
.stepper{display:inline-flex;align-items:center;border:2px solid #fff;border-radius:10px;overflow:hidden;background:#141414}
.stepper button{width:36px;height:36px;border:0;background:transparent;color:#fff;font-size:20px;font-weight:800;cursor:pointer;transition:background .15s}
.stepper button:hover{background:var(--red)}
.stepper input{width:44px;height:36px;border:0;border-inline:2px solid #fff;background:transparent;color:#fff;text-align:center;font:inherit;font-weight:800;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
.est-summary{position:sticky;top:76px;display:grid;gap:18px;scroll-margin-top:76px}
.est-summary-card,.est-form{background:#fff;color:#141414;border:3px solid #fff;border-radius:14px;box-shadow:8px 8px 0 var(--red);padding:22px}
.est-summary-card .est-step,.est-form .est-step{color:#141414}
.est-lines{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;max-height:280px;overflow:auto}
.est-lines li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#4a4a4a;animation:lineIn .3s cubic-bezier(.2,.8,.2,1)}
.est-lines li.is-head{color:#141414;font-weight:800;margin-top:6px}
.est-lines li.is-head:first-child{margin-top:0}
.est-lines li:not(.is-head) span:first-child::before{content:"+ ";color:var(--red);font-weight:800}
.est-lines .est-empty{color:#6b6b6b;font-style:italic;animation:none}
.est-lines .est-empty::before{content:none!important}
@keyframes lineIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.est-totals{margin:0;border-top:2px solid #141414;padding-top:10px;display:grid;gap:4px}
.est-totals div{display:flex;justify-content:space-between;font-size:14px;padding:3px 6px;border-radius:6px}
.est-totals dt{color:#4a4a4a}
.est-totals dd{margin:0;font-weight:700}
.est-discount dd{color:var(--red)}
.est-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;background:#141414;color:#fff;border-radius:10px;padding:14px 16px}
.est-total span{font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.04em}
.est-total strong{font-stretch:78%;font-weight:800;font-size:clamp(30px,3vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.est-disclaimer{margin:12px 0 0;font-size:12.5px;color:#6b6b6b;line-height:1.45}
.est-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:#141414}
.fld-wide{grid-column:1/-1}
.fld input,.fld textarea{font:inherit;font-size:15px;font-weight:500;color:#141414;border:2px solid #141414;border-radius:8px;padding:10px 12px;background:#fff;transition:box-shadow .15s,transform .15s}
.fld input:focus,.fld textarea:focus{outline:none;box-shadow:4px 4px 0 var(--red);transform:translate(-1px,-1px)}
.est-submit{width:100%;margin-top:16px;cursor:pointer;font-size:17px}
.est-submit:disabled{background:#efebe8!important;color:#57514d!important;border-color:#c9c2bc!important;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.est-need{margin:10px 0 0;font-size:13px;font-weight:700;color:#57514d;text-align:center}
.est-submit.is-sending{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.7}}
.est-privacy{margin:10px 0 0;font-size:12px;color:#6b6b6b;text-align:center}
.est-form .form-errors{background:#fbe9e7;border:2px solid var(--red);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.est-form .form-errors ul{margin:6px 0 0;padding-left:18px}
.est-bar{display:none}
/* Planes con precio cerrado */
.est-plans-wrap{grid-column:1/-1}
/* Las columnas del cotizador pueden achicarse: si no, la fila deslizable de planes las ensancha más que la pantalla */
.estimator-grid > *{min-width:0}
.est-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:stretch}
.est-plan{position:relative;display:flex;cursor:pointer}
.est-plan input{position:absolute;opacity:0;pointer-events:none}
.est-plan-card{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:22px 20px 20px;background:var(--card);border:3px solid #fff;border-radius:14px;box-shadow:6px 6px 0 #000;color:#fff;transition:transform .2s,box-shadow .2s,background .2s}
.est-plan:hover .est-plan-card{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.est-plan.is-featured .est-plan-card{box-shadow:6px 6px 0 var(--red)}
.est-plan input:checked + .est-plan-card{background:var(--red);box-shadow:8px 8px 0 #fff;transform:translate(-2px,-2px)}
.est-plan input:focus-visible + .est-plan-card{outline:3px dashed #fff;outline-offset:4px}
.est-plan.is-custom .est-plan-card{background:transparent;border-style:dashed}
.est-plan.is-custom input:checked + .est-plan-card{background:#fff;color:#141414;border-style:solid;box-shadow:8px 8px 0 var(--red)}
.est-plan-badge{position:absolute;top:-14px;left:16px;padding:3px 10px;border:2px solid #fff;border-radius:999px;background:var(--red);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.est-plan input:checked + .est-plan-card .est-plan-badge{background:#141414}
.est-plan-title{font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2vw,24px);line-height:1}
.est-plan-price{font-stretch:78%;font-weight:800;font-size:clamp(34px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.est-plan-price small{display:block;margin-top:4px;font-stretch:100%;font-weight:600;font-size:13px;opacity:.9}
.est-plan-price-sm{font-size:clamp(24px,2.4vw,30px)}
.est-plan-summary{font-size:14px;line-height:1.45;opacity:.92}
.est-plan-features{list-style:none;margin:4px 0 0;padding:10px 0 0;border-top:2px dashed rgba(255,255,255,.3);display:grid;gap:6px;font-size:14px;line-height:1.35}
.est-plan-features li{position:relative;padding-left:22px}
.est-plan-features li::before{content:"";position:absolute;left:2px;top:3px;width:6px;height:11px;border:solid currentColor;border-width:0 3px 3px 0;transform:rotate(45deg)}
.est-plan-pick{margin-top:auto;align-self:flex-start;width:26px;height:26px;border:3px solid currentColor;border-radius:50%;position:relative}
.est-plan input:checked + .est-plan-card .est-plan-pick::after{content:"";position:absolute;inset:4px;border-radius:50%;background:currentColor;animation:estPop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes estPop{from{transform:scale(0)}}
.est-included{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-size:12px;font-weight:800}
.est-service.is-included .est-service-price,.est-service.is-included .est-service-price small{color:#a8a19d;text-decoration:line-through;text-decoration-thickness:2px}
.est-lines li.is-plan{color:#fff;background:var(--red);margin:0 0 2px;padding:8px 10px;border-radius:8px}
.est-lines li.is-plan span:first-child::before{content:none}
@media (max-width:980px){
  .estimator-grid{grid-template-columns:1fr}
  .est-summary{position:static}
  .est-bar{display:flex;position:fixed;z-index:60;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);align-items:center;justify-content:space-between;gap:12px;background:#141414;color:#fff;border:3px solid #fff;border-radius:14px;box-shadow:6px 6px 0 var(--red);padding:10px 10px 10px 16px;transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .est-bar.is-visible{transform:none}
  .est-bar strong{display:block;font-stretch:80%;font-size:24px;font-variant-numeric:tabular-nums}
  .est-bar .btn{padding:10px 16px;font-size:14px;box-shadow:3px 3px 0 #fff}
  .est-service-head{grid-template-columns:auto 1fr}
  .est-service-price{grid-column:2;text-align:left}
}
@media (max-width:560px){.est-fields{grid-template-columns:1fr}}
.est-plans-hint{display:none;margin:-4px 0 0;font-size:13px;font-weight:700;color:#bdbdbd}
@media (max-width:700px){
  .est-plans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,300px);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:18px 22px 20px;scroll-padding-inline:22px;scrollbar-width:none}
  .est-plans::-webkit-scrollbar{display:none}
  .est-plan{scroll-snap-align:start}
  .est-plans-hint{display:block}
}

/* Gracias */
.thanks{min-height:100vh;display:grid;place-items:center;padding:110px 22px 80px;background:radial-gradient(60% 50% at 50% 40%,#2b2b2b,#141414)}
.thanks-card{max-width:620px;text-align:center}
.thanks h1{margin:18px 0 0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,72px);line-height:.95;color:#fff}
.thanks p{color:#d9d9d9;font-size:18px}
.clapper{position:relative;width:120px;height:86px;margin:0 auto;background:#fff;border:3px solid #fff;border-radius:6px;box-shadow:6px 6px 0 var(--red)}
.clapper::before{content:"";position:absolute;inset:14px;border:3px solid #141414;border-radius:3px}
.clapper span{position:absolute;left:-3px;right:-3px;top:-28px;height:24px;border:3px solid #fff;border-radius:4px;background:repeating-linear-gradient(-45deg,#141414 0 12px,#fff 12px 24px);transform-origin:6px 100%;animation:clap 1.1s .2s cubic-bezier(.5,0,.3,1) both}
@keyframes clap{0%{transform:rotate(-28deg)}55%{transform:rotate(0)}65%{transform:rotate(-6deg)}75%,100%{transform:rotate(0)}}
.thanks-summary{text-align:left;background:#fff;color:#141414;border-radius:12px;border:3px solid #fff;box-shadow:8px 8px 0 var(--red);padding:18px 20px;margin:26px 0}
.thanks-summary ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.thanks-summary li{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.thanks-summary p{color:#141414;margin:10px 0 0;font-size:15px}
.thanks-total{display:flex;justify-content:space-between;border-top:2px solid #141414;padding-top:10px;font-weight:700}
.thanks-total strong{font-stretch:80%;font-size:26px}

/* Cotización pública */
.pq{padding:calc(env(safe-area-inset-top,0px) + 90px) 16px 80px;background:#2a2a2a;min-height:100vh}
.pq-sheet{max-width:860px;margin:0 auto;background:#fff;color:#171717;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.pq-head{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#171717;border-bottom:6px solid var(--red);padding:28px 40px}
.pq-logo{height:58px;width:auto}
.pq-title{text-align:right;color:#fff}
.pq-title h1{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:38px;line-height:1}
.pq-title p{margin:4px 0 0;color:#bdbdbd;font-weight:600}
.pq-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px 40px}
.pq h2{margin:0 0 6px;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:#6b6b6b;border-top:3px solid var(--red);padding-top:8px;display:inline-block}
.pq-meta p{margin:0;font-size:14px;line-height:1.5}
.pq-items{width:calc(100% - 80px);margin:0 40px;border-collapse:collapse;font-size:14px}
.pq-items th{background:#171717;color:#fff;text-align:left;padding:10px 12px;font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:12px}
.pq-items th:not(:first-child),.pq-items td:not(:first-child){text-align:right;white-space:nowrap}
.pq-items td{padding:12px;border-bottom:1px solid #e2e0dd;vertical-align:top}
.pq-items tr:nth-child(even) td{background:#f6f5f3}
.pq-items small{display:block;color:#6b6b6b;margin-top:2px}
.pq-totals{width:280px;margin:20px 40px 0 auto}
.pq-totals div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.pq-totals dd{margin:0}
.pq-total{margin-top:8px;background:var(--red);color:#fff;padding:12px 14px!important;border-radius:4px}
.pq-total dt{font-stretch:80%;font-weight:800;text-transform:uppercase}
.pq-total dd{font-stretch:80%;font-weight:800;font-size:22px}
.pq-note{padding:20px 40px 0}
.pq-note p{margin:0 0 6px;font-size:14px;color:#3f3f3f}
.pq-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:30px 40px 36px}
.pq-actions .link{color:#171717;font-weight:800}
.pq-actions .btn.primary{border-color:#171717;box-shadow:5px 5px 0 #171717;cursor:pointer;font-size:16px}
.pq-accepted{color:#2f7a4e;font-weight:800;margin:0}
.pq-expired{margin:0;color:#6b6b6b}
@media (max-width:640px){.pq-head,.pq-meta,.pq-note,.pq-actions{padding-left:20px;padding-right:20px}.pq-meta{grid-template-columns:1fr}.pq-items{width:calc(100% - 40px);margin:0 20px}.pq-totals{margin-right:20px}}

/* Transiciones entre páginas (View Transitions + Turbo) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Botones: respuesta táctil */
.btn.primary:focus-visible{outline:3px dashed #fff;outline-offset:4px}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .album-fan img,.project-card,.pj-more{transition:none!important}
}

/* =================================================================
   SECCIONES ADMINISTRABLES (bloques que se agregan desde el panel)
   ================================================================= */
.sx{position:relative;padding:clamp(70px,9vw,120px) 22px;overflow:hidden;scroll-margin-top:60px}
.theme-dark{background:#171717;color:#fff}
.theme-charcoal{background:#242424;color:#fff;border-block:3px solid #000}
.theme-red{background:var(--red);color:#fff;border-block:3px solid #fff}
.theme-light{background:#fff;color:#141414;border-block:3px solid #141414}
.sx-wrap{max-width:1200px;margin:0 auto}
.sx-narrow{max-width:820px}
.sx-head{margin-bottom:clamp(24px,3vw,40px)}
.sx-eyebrow{display:inline-block;margin-bottom:14px;padding:4px 10px;border:2px solid currentColor;border-radius:4px;font-stretch:80%;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;transform:rotate(-2deg)}
.sx-head h2{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,80px);line-height:.92}
.sx-lead{margin:14px 0 0;max-width:60ch;font-size:clamp(17px,1.7vw,21px);font-weight:600;opacity:.82}
.sx-body p{margin:0 0 16px;font-size:clamp(17px,1.5vw,19px);line-height:1.65;max-width:66ch}
.theme-dark .sx-body p,.theme-charcoal .sx-body p{color:#d6d6d6}
.sx-body strong{color:inherit}
.sx-actions{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:26px}
.theme-light .btn.primary{box-shadow:6px 6px 0 #141414;border-color:#141414}
.theme-light .link{color:#141414}
.btn.inverse{background:#fff;color:#141414;border-color:#fff;box-shadow:6px 6px 0 #141414}
.btn.inverse:hover{box-shadow:9px 9px 0 #141414}
.theme-light .mark,.theme-red .mark-inline{background:#141414}

/* Texto con imagen */
.sx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.img-left .sx-split-media{order:-1}
.sx-split-media{margin:0;border:3px solid currentColor;border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--red);aspect-ratio:4/5;transform:rotate(1deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.img-left .sx-split-media{transform:rotate(-1deg);box-shadow:-10px 10px 0 var(--red)}
.sx-split-media:hover{transform:rotate(0) scale(1.01)}
.theme-red .sx-split-media{box-shadow:10px 10px 0 #141414}
.sx-split-media img{width:100%;height:115%;object-fit:cover}

/* Imagen grande */
.sx--image{padding:0}
.sx-full{position:relative;margin:0;height:clamp(320px,70vh,760px);overflow:hidden;border-block:3px solid #fff}
.sx-full img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.sx-caption{max-width:1200px;margin:14px auto 0;padding:0 22px 24px;font-size:15px;opacity:.75;font-weight:600}
.sx--video .sx-caption{padding:0}

/* Video */
.sx-video{position:relative;aspect-ratio:16/9;border:3px solid currentColor;border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--red);background:#000}
.theme-red .sx-video{box-shadow:10px 10px 0 #141414}
.sx-video iframe,.sx-video video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Llamado a la acción */
.sx-cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.sx-cta-box h2{margin:0;font-stretch:70%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,84px);line-height:.92;max-width:14ch}
.sx-cta-box .sx-actions{margin-top:0}
.sx--cta.theme-red::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-55deg,#141414 0 14px,transparent 14px 28px);animation:slate 12s linear infinite}
@keyframes slate{to{background-position:280px 0}}

/* Testimonio */
.sx-quote-box{position:relative;margin:0 auto;max-width:980px;text-align:center}
.sx-quote-mark{display:block;font-stretch:70%;font-weight:900;font-size:clamp(120px,16vw,200px);line-height:.6;color:var(--red);margin-bottom:10px}
.theme-red .sx-quote-mark{color:#141414}
.sx-quote-box blockquote{margin:0;font-stretch:78%;font-weight:800;font-size:clamp(28px,4vw,52px);line-height:1.08;text-transform:uppercase}
.sx-quote-box figcaption{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-weight:700;font-size:16px}
.sx-quote-box figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid currentColor}

/* Cifras */
.sx-stats{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:18px;margin:0}
.sx-stats div{padding:24px 22px;border:3px solid currentColor;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:6px 6px 0 var(--red);transition:transform .2s}
.sx-stats div:hover{transform:translate(-2px,-2px) rotate(-.5deg)}
.theme-red .sx-stats div{box-shadow:6px 6px 0 #141414}
.theme-light .sx-stats div{background:#f6f5f3}
.sx-stats dt{font-stretch:70%;font-weight:800;font-size:clamp(48px,6vw,84px);line-height:1;font-variant-numeric:tabular-nums}
.sx-stats dd{margin:8px 0 0;font-weight:700;opacity:.8}

/* Puntos destacados */
.sx-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.sx-features li{position:relative;padding:22px;border:3px solid currentColor;border-radius:14px;transition:transform .2s,box-shadow .2s}
.sx-features li:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red)}
.theme-red .sx-features li:hover{box-shadow:8px 8px 0 #141414}
.sx-num{display:inline-block;margin-bottom:10px;padding:2px 8px;border-radius:4px;background:var(--red);color:#fff;font-weight:800;font-size:13px}
.theme-red .sx-num{background:#141414}
.sx-features strong{display:block;font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.05}
.sx-features p{margin:8px 0 0;font-size:15px;line-height:1.5;opacity:.82}

/* Galería de un álbum */
.sx-masonry{padding-top:0}
.sx--gallery .sx-actions{justify-content:center}
.story-title{margin:0 0 18px;font-stretch:74%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,48px);color:#fff}

@media (max-width:860px){
  .sx-split{grid-template-columns:1fr}
  .img-left .sx-split-media{order:0}
  .sx-stats{grid-template-columns:1fr 1fr}
}

/* =================================================================
   ILUSTRACIONES DE LA MARCA + SECCIONES PERSONALIZADAS
   ================================================================= */
.illus{display:block;width:100%;height:auto;overflow:visible;color:#fff}
.theme-light .illus{color:#141414}
.theme-red .illus [fill="#B63830"],.theme-red .illus [stroke="#B63830"]{fill:#141414;stroke:#141414}
.theme-red .illus [fill="#B63830"][stroke="none"]{stroke:none}
.illus .ill-bg{fill:#171717}
.theme-charcoal .illus .ill-bg{fill:#242424}
.theme-light .illus .ill-bg{fill:#fff}
.theme-red .illus .ill-bg{fill:var(--red)}
/* Microanimaciones: sutiles y en bucle lento */
.illus .ill-float{animation:illFloat 3.2s ease-in-out infinite}
.illus .ill-delay{animation-delay:-1.4s}
.illus .ill-blink{animation:blink 1.4s steps(2,start) infinite}
.illus .ill-spin{transform-box:fill-box;transform-origin:center;animation:illPulse 1.2s ease-in-out infinite}
.illus .ill-spin-slow{transform-box:fill-box;transform-origin:center;animation:illSpin 14s linear infinite}
.illus .ill-wave{animation:illWave 1.8s ease-in-out infinite}
.illus .ill-rays{animation:illRays 2.4s ease-in-out infinite}
.illus .ill-dot{animation:illDot 1.2s ease-in-out infinite}
.illus .ill-d2{animation-delay:.15s}.illus .ill-d3{animation-delay:.3s}
.illus .ill-beat{transform-box:fill-box;transform-origin:center;animation:illBeat 1.6s ease-in-out infinite}
.illus .ill-pop{transform-box:fill-box;transform-origin:center;animation:illBeat 2.6s ease-in-out infinite}
.illus .ill-playhead{animation:illPlay 4s ease-in-out infinite alternate}
.illus .ill-clap{transform-box:fill-box;transform-origin:left bottom;animation:illClap 3s ease-in-out infinite}
.illus .ill-check,.illus .ill-draw{stroke-dasharray:160;stroke-dashoffset:160;animation:illDraw 3s ease-in-out infinite}
@keyframes illFloat{50%{transform:translateY(-8px)}}
@keyframes illPulse{50%{transform:scaleX(.82)}}
@keyframes illSpin{to{transform:rotate(360deg)}}
@keyframes illWave{50%{opacity:.25}}
@keyframes illRays{50%{opacity:.2;transform:translateX(4px)}}
@keyframes illDot{50%{transform:translateY(-5px)}}
@keyframes illBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(.98)}}
@keyframes illPlay{from{transform:translateX(-44px)}to{transform:translateX(52px)}}
@keyframes illClap{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(12deg)}88%{transform:rotate(0)}}
@keyframes illDraw{0%{stroke-dashoffset:160}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-160}}

.sx-illus-top{width:150px;margin-bottom:18px}
.sx-split-illus{padding:clamp(10px,3vw,40px);border:3px solid currentColor;border-radius:14px;box-shadow:10px 10px 0 var(--red);transform:rotate(1deg)}
.img-left .sx-split-illus{order:-1;transform:rotate(-1deg)}
.theme-red .sx-split-illus{box-shadow:10px 10px 0 #141414}
.sx-cta-box{flex-wrap:nowrap}
.sx-cta-illus{flex:0 0 clamp(120px,16vw,200px)}
.sx-cta-text{flex:1}
.sx-quote-illus{width:130px;margin:0 auto 18px}
.sx-feature-illus{width:110px;margin:-6px 0 6px -8px}

/* Sección personalizada: columnas */
.sx-columns{display:grid;gap:clamp(16px,2vw,24px)}
.layout-1{grid-template-columns:1fr;max-width:760px}
.align-center .layout-1{margin-inline:auto}
.layout-2{grid-template-columns:repeat(2,1fr)}
.layout-3{grid-template-columns:repeat(3,1fr)}
.layout-4{grid-template-columns:repeat(4,1fr)}
.layout-2-1{grid-template-columns:2fr 1fr}
.layout-1-2{grid-template-columns:1fr 2fr}
.align-center .sx-head,.align-center .sx-col{text-align:center}
.align-center .sx-head .sx-lead{margin-inline:auto}
.align-center .sx-col-illus{margin-inline:auto}
.sx-col{display:flex;flex-direction:column;gap:10px;animation:colIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 80ms);animation-timeline:view();animation-range:entry 0% entry 60%}
@keyframes colIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.blocks-card .sx-col{padding:22px;border:3px solid currentColor;border-radius:14px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.blocks-card .sx-col:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red)}
.theme-red.blocks-card .sx-col:hover{box-shadow:8px 8px 0 #141414}
.sx-col-illus{width:min(150px,70%)}
.sx-col-media{margin:0 0 4px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:3px solid currentColor}
.sx-col-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sx-col:hover .sx-col-media img{transform:scale(1.05)}
.sx-col h3{margin:0;font-stretch:78%;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2vw,28px);line-height:1}
.sx-col-body p{margin:0 0 8px;font-size:15.5px;line-height:1.55;opacity:.85}
.sx-col .link{margin-top:auto;align-self:flex-start}
.align-center .sx-col .link{align-self:center}
.sx-eyebrow.sm{font-size:11px;padding:2px 8px;margin:0;align-self:flex-start}
.align-center .sx-eyebrow.sm{align-self:center}
.sx-embed{border:3px solid currentColor;border-radius:14px;overflow:hidden;background:#fff}
.sx-embed iframe{display:block;width:100%;min-height:inherit;border:0}
@media (max-width:980px){.layout-4{grid-template-columns:repeat(2,1fr)}.layout-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .sx-columns{grid-template-columns:1fr!important}
  .sx-cta-box{flex-wrap:wrap}
  .sx-cta-illus{flex-basis:110px}
}
@media (prefers-reduced-motion: reduce){.illus *{animation:none!important}.sx-col{animation:none}}

/* ---------- Galerías compartidas y visor mejorado ---------- */
.lb figure{margin-bottom:84px}
.lb-strip{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;gap:8px;justify-content:safe center;overflow-x:auto;padding:6px 16px;scrollbar-width:none}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip button{flex:0 0 auto;width:58px;height:58px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#222;cursor:pointer;opacity:.5;transition:opacity .2s,transform .2s,border-color .2s}
.lb-strip button:hover{opacity:.85;transform:translateY(-2px)}
.lb-strip button.is-on{opacity:1;border-color:#fff;box-shadow:3px 3px 0 var(--red);transform:translateY(-3px)}
.lb-strip img{width:100%;height:100%;object-fit:cover}
.lb-also{display:block;margin-top:6px;font-size:13px;color:#bdbdbd}
.lb-also a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.lb-also a:hover{color:var(--red)}
.ph-tile .shared-chip{position:absolute;right:10px;top:10px;z-index:2;padding:3px 8px;border-radius:4px;background:#fff;color:#141414;border:2px solid #141414;font-size:11px;font-weight:800;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.ph-tile:hover .shared-chip,.ph-tile:focus-visible .shared-chip{opacity:1;transform:none}
.ph-tile{scroll-margin-top:90px}
.ph-tile:target{outline:4px solid var(--red);outline-offset:4px}
@media (max-width:760px){.lb-strip button{width:46px;height:46px}.lb figure{margin-bottom:70px}}

/* ---------- Ajustes de espaciado tras la revisión visual ---------- */
html,body{overflow-x:clip}
/* Adelanto de galería: el parallax no tapa el título */
.gallery-teaser .section-head{position:relative;z-index:3}
.gallery-teaser .teaser-grid{margin-top:clamp(36px,5vw,64px)}
/* "Armá tu cotización" como botón claro y sin hueco extra */
.services-more{margin:clamp(36px,5vw,56px) 0 0}
.services-more .link{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:3px solid #fff;border-radius:10px;font-weight:800;text-transform:uppercase;font-stretch:85%;letter-spacing:.03em;text-decoration:none;box-shadow:5px 5px 0 var(--red);transition:transform .15s,box-shadow .15s}
.services-more .link:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red)}
/* Secciones seguidas del mismo fondo: no duplicar el aire */
.sx.theme-dark + .sx.theme-dark,.sx.theme-charcoal + .sx.theme-charcoal{padding-top:clamp(20px,3vw,40px)}
/* Pie: los enlaces bajan de línea en pantallas chicas */
.foot nav{display:flex;flex-wrap:wrap;gap:6px 14px}
@media (max-width:640px){
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
  /* Columnas de la sección personalizada: fila compacta con la ilustración al costado */
  .layout-3 .sx-col,.layout-4 .sx-col{display:grid;grid-template-columns:76px 1fr;column-gap:16px;row-gap:4px;align-items:start;text-align:left!important;padding:16px}
  .layout-3 .sx-col > *,.layout-4 .sx-col > *{grid-column:2}
  .layout-3 .sx-col-illus,.layout-4 .sx-col-illus,.layout-3 .sx-col-media,.layout-4 .sx-col-media{grid-column:1;grid-row:1 / span 4;width:76px;margin:0}
  .layout-3 .sx-col-media,.layout-4 .sx-col-media{aspect-ratio:1}
  .layout-3 .sx-col h3,.layout-4 .sx-col h3{font-size:20px}
  .layout-3 .sx-col .link,.layout-4 .sx-col .link{align-self:start}
  .sx-columns{gap:12px}
  .sx-feature-illus{width:84px}
}
/* La fila de álbumes se desvanece al final: indica que se puede desplazar */
.albums-row{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:60px}
.thanks-number{display:inline-block;margin:6px 0 0!important;padding:6px 14px;border:2px solid #fff;border-radius:8px;font-size:16px!important;box-shadow:4px 4px 0 var(--red)}
.thanks-number strong{font-stretch:85%;letter-spacing:.03em}

/* ---------- Modal de confirmación (sitio) ---------- */
.cmodal{padding:0;border:3px solid #fff;border-radius:14px;width:min(440px,calc(100vw - 32px));background:#171717;color:#fff;box-shadow:10px 10px 0 var(--red)}
.cmodal::backdrop{background:rgba(0,0,0,.7)}
.cmodal[open]{animation:modalIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.cmodal-box{margin:0;padding:24px;display:grid;gap:10px}
.cmodal-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:var(--red);color:#fff}
.cmodal-title{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:28px;line-height:1}
.cmodal-text{margin:0;color:#d6d6d6}
.cmodal-list{margin:0;padding-left:20px;color:#d6d6d6}
.cmodal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.cmodal-actions button{font:inherit;font-weight:800;text-transform:uppercase;font-stretch:85%;padding:10px 16px;border-radius:8px;cursor:pointer;border:2px solid #fff;background:transparent;color:#fff}
.cmodal-ok{background:var(--red)!important;box-shadow:4px 4px 0 #fff}

/* ---------- Skeleton e ilustración de respaldo (sitio) ---------- */
.is-loading{background-color:#262626!important;background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 100%)!important;background-size:220% 100%!important;background-repeat:no-repeat!important;animation:shimmer 1.2s ease-in-out infinite}
.is-loading > img,img.is-loading{opacity:0}
.ph-tile img,.project-card-media img,.sx-split-media img,.sx-col-media img{transition:opacity .35s ease}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.img-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:14%;background:#1e1e1e;color:#fff}
.img-fallback .illus{width:min(140px,80%);height:auto;opacity:.9}
.project-card-media,.sx-split-media,.sx-col-media,.ph-tile{position:relative}
.media-placeholder{display:grid;place-items:center;width:100%;height:100%;padding:12%;background:#1e1e1e;color:#fff}
.media-placeholder .illus{width:min(180px,70%)}
/* Página vacía */
.site-empty{min-height:80vh;display:grid;place-items:center;text-align:center;padding:120px 22px 80px}
.site-empty .illus{width:220px;margin:0 auto 20px}
.site-empty h1{margin:0;font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(38px,6vw,72px);line-height:.95}
.site-empty p{color:#bdbdbd;font-size:18px;max-width:46ch;margin:14px auto 26px}
.project-empty{max-width:640px;margin:0 auto;padding:60px 22px;text-align:center;color:#bdbdbd}
.project-empty .illus{width:140px;margin:0 auto 14px}
@media (prefers-reduced-motion: reduce){.is-loading{animation:none}}

/* ---------- Estados vacíos del sitio ---------- */
.wrap-empty{max-width:1200px;margin:0 auto;padding:clamp(20px,4vw,40px) 22px clamp(80px,10vw,120px)}
.empty-state{display:grid;grid-template-columns:auto 1fr;text-align:left;gap:clamp(20px,4vw,40px);align-items:center;max-width:760px;margin:0 auto;padding:clamp(24px,4vw,40px);background:var(--card);color:#fff;border:3px solid #fff;border-radius:16px;box-shadow:8px 8px 0 var(--red)}
.empty-state-illus{width:clamp(110px,16vw,170px);padding:14px;border-radius:14px;background:#141414;border:2px solid rgba(255,255,255,.18)}
.empty-state-illus .illus{display:block;width:100%;height:auto;color:#fff}
.empty-state h2{margin:0;font-stretch:78%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:0}
.empty-state p{margin:12px 0 0;color:#d6cfca;font-size:clamp(15px,1.6vw,18px);line-height:1.45}
.empty-state-actions{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.empty-state.is-compact{max-width:640px;padding:clamp(20px,3vw,28px);box-shadow:6px 6px 0 var(--red)}
.empty-state.is-compact .empty-state-illus{width:clamp(84px,11vw,120px)}
.empty-state.is-compact h2{font-size:clamp(20px,2.4vw,26px)}
.section-empty .section-head{margin-bottom:clamp(28px,4vw,44px)}
@media (max-width:560px){
  .empty-state{grid-template-columns:1fr;text-align:center;justify-items:center}
  .empty-state-actions{justify-content:center}
}

/* ---------- Hero: lente de cine (diafragma, foco y visor) ---------- */
/* Con JS, el texto y el lente esperan a la secuencia de entrada; si el JS no llega, aparecen igual a los 2.5 s */
.js .hero:not(.is-live) .hero-copy,.js .hero:not(.is-live) .lens svg,.js .hero:not(.is-live) .vf{opacity:0;animation:heroFailsafe 0s 2.5s forwards}
@keyframes heroFailsafe{to{opacity:1}}
.hero.is-intro .lens svg{animation:lensIn 1.3s cubic-bezier(.16,1,.3,1) both}
@keyframes lensIn{from{opacity:0;transform:scale(.9) rotate(-8deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero .lens svg.iris{transform-origin:50% 50%}
.iris-aperture{filter:drop-shadow(0 0 6px rgba(224,71,59,.55))}
.hero-copy{will-change:transform,opacity,filter}

/* Visor: esquinas del cuadro y datos de la toma */
.vf{position:absolute;inset:76px 32px 30px;z-index:1;pointer-events:none;color:rgba(255,255,255,.78)}
.hero.is-intro .vf{animation:vfIn .9s .35s ease both}
@keyframes vfIn{from{opacity:0}to{opacity:1}}
.vf-c{position:absolute;width:30px;height:30px;border:0 solid rgba(255,255,255,.6)}
.vf-tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.vf-tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.vf-bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.vf-br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.vf-data{position:absolute;bottom:10px;margin:0;display:flex;gap:16px;align-items:center;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.vf-left{left:44px}
.vf-right{right:44px}
.vf-data b{font-weight:800;color:#fff}
.vf-af{padding:2px 7px;border:1.5px solid currentColor;border-radius:3px;transition:background .25s,border-color .25s,color .25s}
.vf-af.is-locked{background:var(--red);border-color:var(--red);color:#fff}

/* Cuadro de autoenfoque alrededor del texto: busca y traba */
.af{position:absolute;z-index:3;pointer-events:none;color:rgba(255,255,255,.85);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .8s ease,color .2s}
.af i{position:absolute;width:26px;height:26px;border:0 solid currentColor}
.af i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.af i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.af i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.af i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.af{opacity:0}
.af.is-hunting{opacity:1;animation:afHunt .42s ease-in-out infinite alternate}
@keyframes afHunt{from{transform:scale(1.07)}to{transform:scale(1.01)}}
.af.is-locked{opacity:1;color:var(--rec);transform:scale(1);animation:afLock .35s ease-out}
@keyframes afLock{0%{transform:scale(1.05)}60%{transform:scale(.985)}100%{transform:scale(1)}}
.af.is-done{opacity:0}

@media (max-width:700px){
  .vf{inset:66px 14px 58px}
  .vf-c{width:20px;height:20px}
  .vf-data{font-size:10.5px;gap:10px;letter-spacing:.1em;bottom:4px}
  .vf-left{left:28px}
  .vf-right{right:28px}
  .vf-hide-sm{display:none}
  .af i{width:18px;height:18px}
}
@media (prefers-reduced-motion: reduce){
  .af{display:none}
  .hero.is-intro .lens svg,.hero.is-intro .vf{animation:none}
}