/* VGA Contracting · capa visual compartida (landing, páginas, blog). Se carga después del CSS de cada página.
   Lenguaje: interfaz tipo Apple aplicada a la marca de VGA (negro + amarillo de seguridad, el lobo).
   - Tipografía del sistema (SF Pro en Apple, Inter Tight en el resto), tracking negativo según tamaño.
   - Un solo acento (#ffc928). Radios: botones en píldora, tarjetas 22px, fotos y videos 28px.
   - Materiales translúcidos solo en el menú; respeta reduce-motion, reduce-transparency y more-contrast.
   Tema oscuro fijo a propósito: la identidad de VGA es negro + amarillo.
   html:root / html body: más específico que los bloques <style> en línea de la landing. */
html:root{
  --bg:#0b0b0a; --surface:#151514; --surface-2:#1d1d1b; --line:rgba(255,255,255,.085);
  --ink:#f5f5f2; --muted:#a3a39e; --accent:#ffc928; --accent-ink:#171300;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Segoe UI Variable Display",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight","Segoe UI Variable Text",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:22px; --r-lg:28px; --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:64px;
}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;letter-spacing:-.011em;text-rendering:optimizeLegibility}
html body :is(h1,h2,h3){font-family:var(--display);font-stretch:100%!important;font-optical-sizing:auto;text-wrap:balance}
html body h1{font-weight:700;letter-spacing:-.042em;line-height:1.03}
html body h2{font-weight:700;letter-spacing:-.036em;line-height:1.05}
h2{font-size:clamp(2rem,4.2vw,3.6rem)}
html body h3{font-weight:600;letter-spacing:-.018em;line-height:1.2}
p{text-wrap:pretty}
.lede{color:var(--muted);font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.45;letter-spacing:-.016em}
.eyebrow{font:600 .86rem/1.2 var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--accent)}
.hl{color:var(--accent)}
::selection{background:rgba(255,201,40,.85);color:#111}

/* botones: respuesta inmediata al presionar */
.btn{min-height:48px;padding:0 1.35rem;border-radius:999px;font:500 1rem/1 var(--body);letter-spacing:-.012em;transition:transform .1s ease-out,background-color .2s,color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#ffd447}
.btn-ghost{background:rgba(255,255,255,.08);border-color:transparent;color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:transparent}
.link{font-weight:500}

/* ritmo de secciones: más aire, sin líneas entre bloques */
.block{border-top:0!important;padding-block:clamp(72px,10vw,150px)}
.wrap{max-width:1240px}
.note,.cap{color:var(--muted)}

/* superficies */
.b-cell,.cell,.checks li,.opt-row article,.rel-row a,.area-grid li,.gal-i .cmp,.cmp,.steps img,.jobs img,.qf{border-radius:var(--r)}
.b-cell,.checks li,.rel-row a,.area-grid li{background:var(--surface);border:1px solid var(--line)}
.p-hero-media,.tour-grid img,.form-grid img,.est-frame{border-radius:var(--r-lg)!important}
.b-cell{padding:28px 26px}
.rel-row a{transition:transform .35s var(--ease),background-color .2s}
.rel-row a:hover{background:var(--surface-2);transform:translateY(-2px)}

/* páginas internas */
.crumbs{font-size:.84rem;padding-top:1.2rem}
.p-hero{padding:1.6rem 0 clamp(56px,7vw,96px)}
.p-hero h1{font-size:clamp(2.4rem,5vw,4.4rem)}
.p-hero-media{border:0;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.faq details{border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:0 20px;margin-bottom:10px;transition:background-color .2s}
.faq details[open]{background:var(--surface-2)}
.faq summary{padding:18px 2.4rem 18px 0;font-weight:600;letter-spacing:-.015em;cursor:pointer}
.quote-band blockquote{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.cta-band{text-align:center}.cta-band h2{margin-inline:auto}.cta-band .cta-row{justify-content:center}
.fld input,.fld select,.fld textarea,.field input,.field select,.field textarea{border-radius:12px}

/* ───────── Menú principal ───────── */
.gnav-sentinel{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}
/* el material va en ::before: un backdrop-filter en .gnav volvería al menú móvil (position:fixed) relativo al encabezado */
.gnav{position:sticky;top:0;z-index:70;transition:box-shadow .3s}
.gnav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,10,.7);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);transition:background-color .3s}
.gnav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.07)}
.gnav.scrolled::before{background:rgba(11,11,10,.8)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gnav-bar{display:flex;align-items:center;gap:16px;height:var(--nav-h)}
.gnav-brand{display:flex;align-items:center;flex:0 0 auto}
.gnav-brand img{height:40px;width:auto;display:block}
.gnav-menu{margin-left:auto}
.gnav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.gnav-list>li{position:relative}
.gnav-top{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;border:0;background:none;color:rgba(245,245,242,.76);font:500 .9rem/1 var(--body);letter-spacing:-.008em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .2s,background-color .2s}
.gnav-top:hover,.has-sub.open>.gnav-top{color:#fff;background:rgba(255,255,255,.08)}
.gnav-top[aria-current],.gnav-top[data-current]{color:#fff}
.gnav-top[aria-current]::after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:2px;background:var(--accent)}
.gnav-top i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform .3s var(--ease)}
.has-sub.open>.gnav-top i{transform:translateY(1px) rotate(225deg)}
.gnav-sub{position:absolute;top:calc(100% + 12px);left:50%;min-width:240px;padding:8px;border-radius:20px;background:rgba(24,24,22,.95);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);opacity:0;visibility:hidden;transform:translate(-50%,-6px) scale(.98);transform-origin:50% 0;transition:opacity .16s ease,transform .3s var(--ease),visibility 0s linear .3s}
.gnav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub.open>.gnav-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .16s ease,transform .35s var(--ease),visibility 0s}
.gnav-sub ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gnav-sub ul:has(>li:nth-child(7)){grid-template-columns:repeat(2,minmax(170px,1fr))}
.is-wide .gnav-sub{min-width:580px}
.is-wide .gnav-sub ul{grid-template-columns:1fr 1fr}
.gnav-sub a{display:grid;gap:3px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background-color .15s}
.gnav-sub a b{font-weight:600;font-size:.93rem;letter-spacing:-.012em}
.gnav-sub a span{font-size:.8rem;line-height:1.35;color:var(--muted)}
.gnav-sub a:hover,.gnav-sub a:focus-visible{background:rgba(255,255,255,.08)}
.gnav-sub a[aria-current] b{color:var(--accent)}
.gnav-sub .gnav-sub-foot{display:flex;justify-content:space-between;align-items:center;margin:6px 4px 2px;padding:12px 8px 6px;border-top:1px solid var(--line);color:var(--accent);font-weight:600;font-size:.9rem;text-decoration:none}
.gnav-cta{min-height:36px!important;padding:0 16px!important;font-size:.88rem!important;flex:0 0 auto}
.gnav-burger,.gnav-mob{display:none}
@media (max-width:1100px){
  .gnav-cta{margin-left:auto}
  .gnav-burger{display:block;position:relative;flex:0 0 44px;width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:999px}
  .gnav-burger span[aria-hidden]{position:absolute;left:13px;width:18px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease)}
  .gnav-burger span[aria-hidden]:first-child{top:18px}.gnav-burger span[aria-hidden]:nth-child(2){top:25px}
  .gnav.menu-open .gnav-burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
  .gnav.menu-open .gnav-burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
  .gnav.menu-open::before{background:rgba(11,11,10,.97)}
  .gnav-menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;margin:0;padding:8px var(--gut-r,16px) calc(32px + env(safe-area-inset-bottom,0px)) var(--gut-l,16px);background:rgba(11,11,10,.97);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .4s var(--ease),visibility 0s linear .4s}
  .gnav.menu-open .gnav-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .4s var(--ease),visibility 0s}
  .gnav-list{flex-direction:column;align-items:stretch;gap:0;max-width:640px;margin:0 auto}
  .gnav-list>li{border-bottom:1px solid var(--line)}
  .gnav-top{width:100%;height:auto;min-height:60px;padding:0 4px;justify-content:space-between;border-radius:0;background:none!important;color:var(--ink);font-size:1.3rem;font-weight:600;letter-spacing:-.022em}
  .gnav-top[aria-current]::after{display:none}
  .gnav-top[aria-current]{color:var(--accent)}
  .gnav-top i{width:9px;height:9px}
  .gnav-sub{position:static;display:none;min-width:0!important;padding:0 0 14px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none!important;transition:none}
  .gnav-sub::before{display:none}
  .has-sub.open>.gnav-sub{display:block}
  .gnav-sub ul,.is-wide .gnav-sub ul,.gnav-sub ul:has(>li:nth-child(7)){grid-template-columns:1fr 1fr}
  .gnav-sub a{padding:10px 8px}
  .gnav-mob{display:grid;gap:10px;max-width:640px;margin:28px auto 0}
  .gnav-mob .btn{justify-content:center;min-height:52px}
  .gnav-es{text-align:center;color:var(--muted);font-size:.92rem;padding:8px;text-decoration:none}
  html.gnav-lock,html.gnav-lock body{overflow:hidden}
  html.gnav-lock .pack{visibility:hidden}
}
@media (max-width:560px){.gnav-sub ul,.is-wide .gnav-sub ul,.gnav-sub ul:has(>li:nth-child(7)){grid-template-columns:1fr}.gnav-sub a span{display:none}.is-wide .gnav-sub a span{display:block}}
@media (max-width:400px){.gnav-cta{display:none!important}.gnav-burger{margin-left:auto}}

/* ───────── Pie ───────── */
.gfoot{position:relative;padding:clamp(56px,7vw,88px) 0 calc(28px + env(safe-area-inset-bottom,0px));background:#080807;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;line-height:1.5}
.gfoot-top{display:grid;grid-template-columns:minmax(220px,.8fr) 2.2fr;gap:clamp(32px,5vw,72px)}
.gfoot-brand{display:grid;gap:14px;align-content:start}
.gfoot-brand p{max-width:34ch;margin:0}
.gfoot-meta{font-size:.8rem}
.gfoot-logo{position:relative;width:170px;aspect-ratio:1;margin:-10px 0 0 -12px}
.gfoot-logo img,.gfoot-logo model-viewer{position:absolute;inset:0;width:100%;height:100%;background:transparent;--poster-color:transparent}
.gfoot-logo model-viewer{opacity:0;transition:opacity .6s ease}
.gfoot-logo.is-3d model-viewer{opacity:1}.gfoot-logo.is-3d img{opacity:0;transition:opacity .6s ease}
.gfoot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.gfoot b{display:block;margin-bottom:12px;color:var(--ink);font-weight:600;font-size:.84rem;letter-spacing:-.005em}
.gfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gfoot a{color:var(--muted);text-decoration:none;transition:color .15s}
.gfoot a:hover{color:var(--ink)}
.gfoot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid var(--line);font-size:.8rem}
.gfoot-bottom span:last-child{display:flex;flex-wrap:wrap;gap:18px}
@media (max-width:900px){.gfoot-top{grid-template-columns:1fr}.gfoot-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}

/* ───────── Película con scroll ───────── */
.sfilm{position:relative;height:calc(var(--n,3) * 85vh + 100vh);background:#000;isolation:isolate}
.sfilm-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex}
.sfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.sfilm-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 52%,rgba(0,0,0,.78) 100%)}
.sfilm-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;width:100%;padding-top:calc(var(--nav-h) + clamp(28px,6vh,72px));padding-bottom:clamp(56px,10vh,110px)}
.sfilm-copy h2{color:#fff;max-width:16ch;font-size:clamp(2.2rem,5.2vw,4.6rem)}
.sfilm-caps{list-style:none;margin:0;padding:0;display:grid;max-width:540px}
.sfilm-cap{grid-area:1/1;display:grid;gap:8px;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s var(--ease)}
.sfilm-cap.on{opacity:1;transform:none}
.sfilm-cap b{color:#fff;font:600 clamp(1.5rem,2.6vw,2.25rem)/1.1 var(--display);letter-spacing:-.03em}
.sfilm-cap span{color:rgba(255,255,255,.8);font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.45}
.sfilm-bar{position:absolute;left:var(--gut-l,16px);right:var(--gut-r,16px);bottom:28px;height:2px;max-width:1208px;margin:0 auto;overflow:hidden;border-radius:2px}
.sfilm-bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.sfilm.is-static{height:auto}
.sfilm.is-static .sfilm-stage{position:relative;height:auto;min-height:88vh}
.sfilm.is-static .sfilm-caps{grid-template-columns:1fr;gap:22px;max-width:640px}
.sfilm.is-static .sfilm-cap{grid-area:auto;opacity:1;transform:none}
.sfilm.is-static .sfilm-bar{display:none}
@media (max-width:700px){.sfilm{height:calc(var(--n,3) * 75vh + 100vh)}.sfilm-copy h2{max-width:12ch}}

/* ───────── Accesibilidad ───────── */
@media (prefers-reduced-motion:reduce){
  .gnav-sub,.gnav-menu,.sfilm-cap,.btn,.rel-row a{transition:opacity .15s ease!important;transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .gnav::before,.gnav-menu,.gnav-sub{background:#121211!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  html:root{--muted:#d0d0ca;--line:rgba(255,255,255,.3)}
  .gnav-sub,.b-cell,.checks li{border-color:rgba(255,255,255,.4)}
}

/* landing: sin indicador de "Scroll" (el contenido ya invita a bajar) */
.hero-scroll{display:none!important}
/* con la barra de administración de WordPress visible, el menú queda debajo de ella */
html:has(#wpadminbar) .gnav{top:32px}
@media (max-width:782px){html:has(#wpadminbar) .gnav{top:46px}}

/* ───────── Projects: carrusel de barrios con antes y después ───────── */
.zones{padding-bottom:clamp(40px,5vw,72px)}
.zones-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.zones-arrows{display:none;gap:8px;flex:0 0 auto}
.zones.is-live .zones-arrows{display:flex}
.zones-arrows button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.09);color:var(--ink);cursor:pointer;transition:transform .1s ease-out,background-color .2s,opacity .2s}
.zones-arrows button:hover{background:rgba(255,255,255,.16)}
.zones-arrows button:active{transform:scale(.94)}
.zones-arrows button:disabled{opacity:.3;cursor:default}
.zones-arrows svg{width:18px;height:18px}
.zones-track{--edge:max(var(--gut-l,16px),calc((100vw - 1240px)/2 + var(--gut-l,16px)));display:grid;grid-auto-flow:column;grid-auto-columns:clamp(216px,23vw,300px);gap:14px;margin-top:clamp(20px,3vw,32px);padding:6px var(--edge) 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.zones-track::-webkit-scrollbar{display:none}
.zones-track.is-dragging{scroll-snap-type:none;cursor:grabbing}
.zones-track.is-dragging .zc{pointer-events:none}
.zc{display:grid;gap:3px;color:var(--ink);text-decoration:none;scroll-snap-align:start;-webkit-user-drag:none;user-select:none}
.zc img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:9px;border-radius:var(--r);outline:2px solid transparent;outline-offset:3px;opacity:.62;transition:opacity .25s,outline-color .2s,transform .1s ease-out}
.zc:hover img{opacity:.9}
.zc:active img{transform:scale(.98)}
.zc b{font-weight:600;font-size:1.06rem;letter-spacing:-.018em;transition:color .2s}
.zc span{color:var(--muted);font-size:.86rem}
.zc[aria-selected="true"] img{opacity:1;outline-color:var(--accent)}
.zc[aria-selected="true"] b{color:var(--accent)}
.zones-panels{display:grid;gap:clamp(56px,7vw,88px);margin-top:clamp(20px,3vw,36px)}
.zones.is-live .zones-panels{gap:0}
.zp{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;scroll-margin-top:calc(var(--nav-h) + 16px)}
.zp.is-entering{animation:zp-in .5s var(--ease)}
@keyframes zp-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.zp .cmp{margin-top:0;aspect-ratio:3/2;border-radius:var(--r-lg)}
.zp .cap{margin-top:10px;font-size:.84rem}
.zp .gal-grid{margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.zp-copy{display:grid;gap:16px;justify-items:start}
.zp-copy h3{font-size:clamp(1.75rem,3vw,2.6rem);letter-spacing:-.034em}
.zp-copy>p{color:var(--muted);max-width:44ch}
.zp-facts{display:grid;gap:12px;margin:6px 0 8px;width:100%}
.zp-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.zp-facts dt{color:var(--muted);font-size:.92rem}
.zp-facts dd{margin:0;font:600 1.3rem/1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.zones>.note{margin-top:clamp(24px,3vw,36px);font-size:.82rem}
@media (max-width:860px){.zp{grid-template-columns:1fr}.zones-track{grid-auto-columns:64vw;gap:12px}.zones-head{align-items:center}}

/* ───────── About ───────── */
.vn-list{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;gap:clamp(20px,3vw,34px)}
.vn-list li{display:grid;grid-template-columns:clamp(84px,14vw,190px) minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:center}
.vn-l{font:700 clamp(4.6rem,11vw,9.5rem)/.9 var(--display);letter-spacing:-.06em;color:var(--accent)}
.vn-list h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.03em}
.vn-list p{color:var(--muted);max-width:50ch;margin-top:6px}
.people-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.people-grid figure{margin:0}
.people-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.people-list{display:grid;gap:22px;margin:clamp(22px,3vw,34px) 0 0}
.people-list dt{font-weight:600;font-size:1.14rem;letter-spacing:-.02em}
.people-list dd{margin:3px 0 0;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:24px 0 0;padding:0}
@media (max-width:860px){.people-grid{grid-template-columns:1fr}.people-grid img{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.zp.is-entering{animation:none}.zc img{transition:none}}

/* Letras que se llenan con el scroll (vga-ui.js). El relleno extendido evita recortar la última letra con tracking negativo. */
.fw{--w:-6%;--fc:currentColor;--dc:rgba(255,255,255,.22);background-image:linear-gradient(90deg,var(--fc) calc(var(--w) - 6%),var(--dc) calc(var(--w) + 6%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.14em .06em;margin:-.14em -.06em}
.fw::selection{background:var(--accent);color:var(--accent-ink);-webkit-text-fill-color:var(--accent-ink)}
@media print,(forced-colors:active){.fw{background:none;color:inherit;-webkit-text-fill-color:currentColor}}

/* Las imágenes con atributos width/height conservan su proporción */
html body img{height:auto}

/* Páginas legales: índice fijo y lectura cómoda */
.legal-grid{display:grid;grid-template-columns:minmax(200px,270px) minmax(0,740px);gap:clamp(32px,6vw,88px);align-items:start}
.legal-toc{position:sticky;top:96px;max-height:calc(100dvh - 120px);overflow:auto;font-size:.92rem}
.legal-toc b{display:block;margin-bottom:.7rem;color:var(--ink)}
.legal-toc ol{list-style:none;margin:0;padding:0}
.legal-toc a{display:block;padding:.34rem 0;color:var(--muted);text-decoration:none}
.legal-toc a:hover,.legal-toc a:focus-visible{color:var(--accent)}
html body .legal{max-width:740px}
.legal section{scroll-margin-top:96px;padding-bottom:.5rem}
html body .legal h2{font-size:1.45rem;letter-spacing:-.022em;margin:2.4rem 0 .7rem}
.legal section:first-child h2{margin-top:0}
.legal p,.legal li{color:var(--muted);line-height:1.68}
.legal p+p,.legal p+ul{margin-top:.8rem}
.legal ul{margin:.6rem 0 0;padding-left:1.15rem}
.legal li{margin-top:.42rem}
@media (max-width:860px){.legal-grid{grid-template-columns:minmax(0,1fr)}.legal-toc{position:static;max-height:none;padding-bottom:1rem;border-bottom:1px solid var(--line)}}
body.page-legal .p-hero-media{display:none}
body.page-legal .p-hero-grid{grid-template-columns:minmax(0,1fr)}
body.page-legal .p-hero{padding-bottom:0}

/* ───────── "Meet him": juego del lobo (wolf-game.js) ───────── */
html.wg-lock{overflow:hidden;scrollbar-gutter:stable}
.wg{width:min(940px,calc(100vw - 48px));height:min(720px,calc(100dvh - 48px));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:var(--r-lg);background:#121211;color:var(--ink);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);opacity:0;transform:scale(.9);transform-origin:var(--ox,50%) var(--oy,50%);transition:opacity .2s ease,transform .36s var(--ease)}
.wg[open]{display:flex;flex-direction:column}
.wg.is-in{opacity:1;transform:none}
.wg:focus{outline:0}
.wg::backdrop{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);opacity:0;transition:opacity .3s ease}
.wg.is-in::backdrop{opacity:1}
.wg-hud{display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 10px 8px 24px}
html body .wg-title{flex:1;min-width:0;margin:0;font-size:1.06rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.wg-score{display:flex;align-items:center;gap:14px}
.wg-count{font:600 1rem/1 var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wg-drops{display:none;gap:5px}
.wg.is-playing .wg-drops{display:flex}
.wg-drops svg{width:13px;height:17px;fill:rgba(255,255,255,.16);transition:fill .15s}
.wg-drops svg.on{fill:#6fb7ff}
.wg-x{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ink);cursor:pointer;transition:transform .1s ease-out,background-color .2s;-webkit-tap-highlight-color:transparent}
.wg-x:hover{background:rgba(255,255,255,.15)}
.wg-x:active{transform:scale(.92)}
.wg-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.wg-meter{height:3px;background:rgba(255,255,255,.08)}
.wg-meter i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.wg-stage{--storm:.22;position:relative;flex:1;min-height:0;overflow:hidden;container-type:size;background:linear-gradient(180deg,#14140f 0%,#1f1c10 62%,#2b2409 100%)}
.wg-sky{position:absolute;inset:0;background:linear-gradient(180deg,#4a5a6b 0%,#c79a3f 74%,#ffc928 100%);opacity:0;transition:opacity 1s ease}
.is-clear .wg-sky{opacity:.55}
.wg-rain{position:absolute;left:0;right:0;top:-220px;bottom:0;opacity:var(--storm);transition:opacity .6s ease;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='%23a9c4dc' stroke-width='1.4' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M30 10l-5 22M96 46l-5 22M170 18l-5 22M58 104l-5 22M138 118l-5 22M204 92l-5 22M22 170l-5 22M104 184l-5 22M182 164l-5 22'/%3E%3C/g%3E%3C/svg%3E");animation:wg-rain .42s linear infinite;will-change:transform}
@keyframes wg-rain{to{transform:translate3d(-50px,220px,0)}}
.wg-house{position:absolute;left:50%;top:4cqh;width:min(92%,640px);transform:translateX(-50%);bottom:5cqh;display:flex;flex-direction:column}
.wg-roof{display:grid;gap:3px;position:relative;z-index:1;padding-bottom:6px}
/* silueta: tejado a dos aguas con chimenea; las tejas se apoyan encima */
.wg-roof::before{content:"";position:absolute;z-index:-1;inset:-5px -7px 0;background:#2d2a24;clip-path:polygon(15.8% 0,84.2% 0,100% calc(100% - 6px),100% 100%,0 100%,0 calc(100% - 6px))}
.wg-roof::after{content:"";position:absolute;z-index:-2;right:21%;top:-4cqh;width:6.5%;height:11cqh;background:linear-gradient(90deg,#3a2a22,#4a352a);box-shadow:inset 0 5px 0 #231a15}
.wg-row{display:flex;justify-content:center;gap:3px}
.wg-t{position:relative;flex:0 0 calc((100% - 15px)/6);height:58px;height:clamp(40px,11cqh,74px);padding:0;border:0;border-radius:5px;background:linear-gradient(180deg,#6a655b,#4e4a42);box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);overflow:hidden;cursor:default;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.wg-t:nth-child(3n){background:linear-gradient(180deg,#5d5850,#45423b)}
.wg-t:nth-child(4n+1){background:linear-gradient(180deg,#716b60,#57524a)}
.wg-t i{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.wg-t.hole{background:#050504;box-shadow:inset 0 0 0 2px var(--accent),inset 0 8px 18px #000;cursor:pointer;transition:transform .1s ease-out}
.wg-t.hole:hover{background:#1a1608}
.wg-t.hole:active{transform:scale(.94)}
.wg-t.new{background:linear-gradient(180deg,#ffd447,#f2b705);box-shadow:inset 0 -3px 0 rgba(120,80,0,.35);animation:wg-nail .34s var(--ease)}
.wg-t.new:nth-child(even){background:linear-gradient(180deg,#ffcb2e,#e5ab00)}
@keyframes wg-nail{from{transform:scale(.72);opacity:.4}to{transform:none;opacity:1}}
.wg-wall{flex:1;min-height:0;width:calc(100% * 5/6);margin:0 auto;display:flex;justify-content:space-evenly;align-items:flex-end;background:linear-gradient(180deg,#1b1a17 0%,#272520 22%);box-shadow:inset 0 14px 18px -8px rgba(0,0,0,.65)}
.wg-win{width:15%;height:44%;margin-bottom:24%;border-radius:4px;background:linear-gradient(180deg,#3a3213,#6c5716);box-shadow:inset 0 0 0 3px #15140f}
.wg-door{width:16%;height:66%;border-radius:5px 5px 0 0;background:#14130f}
.wg-ground{position:absolute;left:0;right:0;bottom:0;height:5cqh;min-height:12px;background:#0a0a09;box-shadow:0 -1px 0 rgba(255,201,40,.42)}
.wg-wolf{position:absolute;left:0;bottom:calc(5cqh - 2px);height:46cqh;aspect-ratio:.62;will-change:transform;pointer-events:none}
.wg-flip{position:absolute;inset:0}
.wg-flip img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);visibility:hidden;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.wg-flip img.on{visibility:visible}
.wg-drip{position:absolute;z-index:2;width:8px;height:12px;margin-left:-4px;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;background:#6fb7ff;animation:wg-drip .62s cubic-bezier(.55,0,1,.6) forwards;pointer-events:none}
@keyframes wg-drip{to{transform:translate3d(0,44cqh,0);opacity:.2}}
.wg-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:112px;padding:18px 24px calc(18px + env(safe-area-inset-bottom,0px))}
.wg-line{margin:0;max-width:52ch;font-size:1.06rem;line-height:1.38;letter-spacing:-.014em;color:var(--ink)}
.wg-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;flex:0 0 auto}
.wg-act:empty{display:none}
.wg-act .btn{white-space:nowrap}
@media (max-width:640px){
  .wg{width:100vw;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  .wg-hud{padding-left:16px}
  .wg-foot{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));min-height:150px}
  .wg-line{font-size:1rem}
  .wg-act{justify-content:stretch}.wg-act .btn{flex:1 1 auto}
}
@media (max-height:520px){.wg-foot{min-height:0;padding-block:10px}.wg-line{font-size:.94rem}.wg-hud{min-height:52px}}
@media (prefers-reduced-motion:reduce){
  .wg,.wg::backdrop{transition:opacity .15s ease;transform:none!important}
  .wg-rain{animation:none}.wg-t.new{animation:none}.wg-sky,.wg-meter i{transition:none}
}
@media (prefers-reduced-transparency:reduce){.wg::backdrop{background:rgba(0,0,0,.86);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.wg-t.hole{box-shadow:inset 0 0 0 3px #fff}.wg-t{outline:1px solid rgba(255,255,255,.4)}}

/* ───────── Pulido general: tipografía única, respuesta táctil y detalles de lectura ───────── */
html{-webkit-text-size-adjust:100%}
a,button,summary,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where([id]){scroll-margin-top:calc(var(--nav-h) + 20px)}
h2+.lede{margin-top:.85rem}
.fact b{font-family:var(--display);font-stretch:100%;font-weight:700;letter-spacing:-.03em}
/* etiquetas pequeñas: texto normal del sistema, sin monoespaciada en mayúsculas */
html body :is(.frames .stamp,.step .k,.dio-load,.dio-read,.dio-hint,.dc-tag,.dc-n,.dc-clock,.dio-say b,.dio-card .k,.cmp .lb,.contact-lines small,.bubble .who,.pk-who,.pk-ctl .n,.steps .num){font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:-.005em;text-transform:none;font-variant-numeric:tabular-nums}
html body .dc-ticks li{font-family:var(--body);font-size:.7rem;letter-spacing:-.003em;text-transform:none}
html body .dio-hint{font-size:.86rem;line-height:1.3}
/* guía y bienvenida del lobo con la misma letra que el resto del sitio */
.pk-bub{font-family:var(--body);letter-spacing:-.01em}
html body .pk-t{font:700 1.1rem/1.2 var(--display);font-stretch:100%;letter-spacing:-.024em}
.pk-ctl button{min-height:40px;font-weight:500;letter-spacing:-.01em;transition:transform .1s ease-out,background-color .2s}
.pk-ctl button:active{transform:scale(.96)}
.pk-x{width:38px;height:38px;top:4px;right:4px}
.l-skip{min-height:44px;transition:transform .1s ease-out,color .2s,background-color .2s}
.l-skip:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.l-skip:active{transform:scale(.97)}
/* presión visible desde el primer contacto */
.gnav-top:active{background:rgba(255,255,255,.14)}
.gnav-sub a:active{background:rgba(255,255,255,.13)}
.rel-row a:active{transform:scale(.985);transition-duration:.1s}
.faq summary{transition:opacity .15s}
.faq summary:active{opacity:.65}
.area-grid a,.chips a{transition:color .15s}
.area-grid a:hover,.chips a:hover{color:var(--accent)}
/* en pantallas táctiles :hover se queda pegado después del toque */
@media (hover:none){
  .btn-primary:hover{background:var(--accent)}
  .btn-ghost:hover{background:rgba(255,255,255,.08)}
  .rel-row a:hover{background:var(--surface);transform:none}
  .zones-arrows button:hover{background:rgba(255,255,255,.09)}
  .gnav-top:hover{background:none}
  .wg-x:hover{background:rgba(255,255,255,.08)}
}
@media (prefers-reduced-motion:reduce){.pk-ctl button,.l-skip,.rel-row a{transition:none;transform:none!important}}

/* ───────── v2.6 · Movimiento y rendimiento ─────────
   Cada animación comunica algo: la aparición ordena la lectura (jerarquía), la presión confirma el toque
   (respuesta) y la transición entre páginas mantiene el lugar (continuidad). Solo transform, opacity y filter. */
/* aparición: el bloque se "materializa" (enfoque + escala) y los hermanos entran en cascada */
.js .pre{opacity:0;transform:translate3d(0,18px,0) scale(.985);filter:blur(6px)}
.js .rv.pre{transform:translate3d(0,22px,0);filter:blur(8px)}
.rv,.bento>*,.steps>li,.opt-row>*,.checks>li,.area-grid>li,.gal-i,.people-list>div,.jobs>figure{transition:opacity .7s var(--ease) calc(var(--i,0) * 55ms),transform .9s var(--ease) calc(var(--i,0) * 55ms),filter .7s ease calc(var(--i,0) * 55ms)}
.bento>*:nth-child(n),.steps>li:nth-child(n),.opt-row>*:nth-child(n){transition-delay:calc(var(--i,0) * 55ms)}
.rel-row>a{transition:opacity .7s var(--ease) calc(var(--i,0) * 55ms),transform .5s var(--ease),filter .7s ease calc(var(--i,0) * 55ms),background-color .2s}
/* hero de página: texto y foto llegan juntos al cargar, sin esperar a JavaScript */
@media (prefers-reduced-motion:no-preference){
  .p-hero-copy>*{animation:vga-rise .9s var(--ease) both}
  .p-hero-copy>:nth-child(2){animation-delay:.07s}.p-hero-copy>:nth-child(3){animation-delay:.14s}
  .p-hero-media{animation:vga-settle 1.1s var(--ease) both}
  @keyframes vga-rise{from{opacity:.35;transform:translate3d(0,14px,0)}}
  @keyframes vga-settle{from{transform:scale(1.03);clip-path:inset(3% round var(--r-lg))}to{clip-path:inset(0 round var(--r-lg))}}
  /* continuidad entre páginas: fundido corto del contenido; el menú no parpadea */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vga-vt-out .18s ease both}
  ::view-transition-new(root){animation:vga-vt-in .34s var(--ease) both}
  @keyframes vga-vt-out{to{opacity:0}}
  @keyframes vga-vt-in{from{opacity:0;transform:translate3d(0,10px,0)}}
  .gnav{view-transition-name:vga-nav}
  ::view-transition-group(vga-nav){animation:none}
  /* fotos con profundidad: se desplazan un poco más lento que el texto mientras cruzan la pantalla */
  @supports (animation-timeline:view()){
    .people-grid img,.tour-grid img,.steps.with-img img{animation:vga-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes vga-drift{from{transform:translate3d(0,3.5%,0) scale(1.04)}to{transform:translate3d(0,-3.5%,0) scale(1.04)}}
    .people-grid figure,.tour-grid>img{overflow:hidden;border-radius:var(--r-lg)}
  }
}
.people-grid figure{overflow:hidden;border-radius:var(--r-lg)}
/* preguntas: la respuesta se despliega en lugar de saltar (Chrome/Edge; el resto abre al instante) */
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .42s var(--ease),opacity .3s ease,content-visibility .42s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
}
/* tarjetas: se elevan con el puntero y ceden al presionar */
@media (hover:hover){
  .b-cell,.area-grid li,.checks li{transition-property:opacity,transform,filter,background-color,border-color}
  .b-cell:hover,.area-grid li:hover{background:var(--surface-2);border-color:rgba(255,255,255,.14)}
  .jobs img,.gal-i .cmp{transition:transform .6s var(--ease)}
  .jobs figure:hover img{transform:scale(1.025)}
}
.jobs figure{overflow:hidden;border-radius:var(--r)}
/* antes y después: el tirador crece al tocarlo y la línea se ve sobre fotos claras */
.cmp-line{box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.cmp-line::after{transition:transform .2s var(--ease);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171300' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat}
.cmp:active .cmp-line::after,.cmp:has(input:focus-visible) .cmp-line::after{transform:scale(1.14)}
.cmp:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* el lobo guía y el recorrido: sombras más densas para el lobo oscuro */
.pk-fig img,.pack-stage .wolves img,.wolf-grid img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.p-hero-media.contain{background:radial-gradient(70% 60% at 50% 72%,rgba(255,201,40,.22),transparent 70%),var(--surface)}

/* ───────── Responsivo: de 320 px a pantallas anchas ───────── */
.wrap{padding-left:max(var(--gut-l,16px),env(safe-area-inset-left,0px));padding-right:max(var(--gut-r,16px),env(safe-area-inset-right,0px))}
html body{overflow-x:clip}
h1,h2,h3,p,li,dd,dt{overflow-wrap:break-word}
.gal-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.zp .gal-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.jobs{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.btn{max-width:100%}
.est-frame{display:block}
@media (min-width:1600px){.wrap{max-width:1360px}}
@media (max-width:1100px){.p-hero-grid{gap:28px}}
@media (max-width:860px){
  .block{padding-block:clamp(56px,13vw,88px)}
  .p-hero{padding-top:1rem}
  .p-hero h1{font-size:clamp(2.1rem,9.2vw,3.2rem)}
  .faq-grid,.about-grid,.form-grid,.wolf-grid{gap:28px}
  .zp-copy h3{font-size:clamp(1.6rem,7vw,2.2rem)}
  .legal-toc ol{columns:2;column-gap:20px}
}
@media (max-width:560px){
  body{font-size:16px}
  .cta-row{display:grid;grid-template-columns:1fr}
  .cta-row .btn{justify-content:center;min-height:52px}
  .b-cell{padding:22px 20px;min-height:0}
  .vn-list li{grid-template-columns:72px minmax(0,1fr)}
  .zp-facts dd{font-size:1.14rem}
  .gfoot-cols{gap:24px 18px}
  .qf{padding:18px}
  .legal-toc ol{columns:1}
  .cmp-line::after{width:48px;height:48px;margin:-24px 0 0 -24px}
}
@media (max-width:360px){.gfoot-cols{grid-template-columns:1fr}.zones-track{grid-auto-columns:78vw}}
/* teléfonos acostados: la película no ocupa más que la pantalla */
@media (max-height:480px) and (orientation:landscape){.sfilm-copy h2{font-size:1.8rem}.sfilm-cap b{font-size:1.2rem}.sfilm-copy{padding-bottom:44px}}
@media (prefers-reduced-motion:reduce){.js .pre{opacity:1;transform:none;filter:none}.cmp-line::after,.jobs img{transition:none}}