/* Pixel · V5. Final override layer; the original stylesheet stays intact. */
:root { --v5-gutter:clamp(20px,4vw,72px); --v5-rule:rgba(238,231,216,.24); --v5-ease:cubic-bezier(.22,.68,.25,1); --v5-label:11px; }
body::after { content:""; position:fixed; inset:0; z-index:45; pointer-events:none; opacity:.026; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.8' d='M0 0h160v160H0z' fill='%23fff'/%3E%3C/svg%3E"); }
.grain { opacity:.025; }
::selection { background:var(--amber); color:var(--ink); }
:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline:2px solid var(--amber); outline-offset:5px; }
:where(button,input,select,textarea) { accent-color:var(--amber); }
:where(a,button,select,label[for]) { cursor:pointer; }
:where(input,textarea) { cursor:text; }
button:disabled { cursor:not-allowed; }
:where(section[id]) { scroll-margin-top:28px; }
:where(h1,h2,h3) em { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; color:var(--amber); letter-spacing:-.055em; }
/* AA: el ámbar claro no alcanza 3:1 sobre papel; se usa un ámbar oscuro solo en secciones claras. */
.v5-services .v5-title em, .v5-brands .v5-title em { color:#7d5f2b; }
.v5-title { font:800 clamp(56px,7.3vw,118px)/.96 var(--display); letter-spacing:-.025em; max-width:100%; text-wrap:balance; }
.v5-title em { display:inline-block; line-height:1.06; }
.v5-services,.v5-process,.v5-stats,.v5-brands,.v5-contact { padding:clamp(64px,7vw,112px) var(--v5-gutter); }
.v5-services { background:var(--paper); color:var(--ink); }
.v5-services .v5-title { margin-bottom:64px; }
.v5-services-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.v5-service { border-top:1px solid #18171245; padding-top:24px; min-width:0; }
.v5-service h3 { font:800 clamp(26px,2.6vw,40px)/1.05 var(--display); margin:0 0 20px; max-width:240px; }
.v5-service p { font:14px/1.8 Arial,sans-serif; max-width:28ch; margin:0; color:#534d41; }
.v5-process { background:var(--ink); color:var(--paper); }
.v5-process-list { list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.v5-process-step { min-width:0; padding:24px 24px 0; border-top:1px solid var(--v5-rule); border-left:1px solid var(--v5-rule); }
.v5-process-step:first-child { padding-left:0; border-left:0; }
.v5-process-step:last-child { padding-right:0; }
.v5-step-number { display:block; font:800 clamp(60px,6vw,96px)/1 var(--display); color:var(--amber); margin-bottom:52px; }
.v5-process-step h3 { font:800 26px/1.1 var(--display); margin:0 0 16px; }
.v5-process-step p { font:14px/1.75 Arial,sans-serif; color:#c6bead; margin:0; max-width:25ch; }
.v5-stats { background:var(--ink); border-top:1px solid var(--v5-rule); }
.v5-stats .v5-title { font-size:clamp(48px,5vw,80px); }
.v5-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin:64px 0 0; }
.v5-stat { display:flex; flex-direction:column; min-width:0; border-bottom:1px solid var(--v5-rule); padding-bottom:24px; }
.v5-stat dt { font:var(--v5-label)/1.7 monospace; letter-spacing:.04em; max-width:26ch; color:var(--paper); }
.v5-stat dd { order:-1; margin:0 0 20px; font:800 clamp(110px,14vw,224px)/.9 var(--display); letter-spacing:-.025em; color:var(--amber); }
.v5-stat-note { display:block; font:11px/1.7 monospace; letter-spacing:.04em; margin-top:12px; }
.v5-brands { background:var(--paper); color:var(--ink); overflow:hidden; padding-bottom:64px; }
.v5-brands .v5-title { font-size:clamp(44px,5.5vw,86px); margin-bottom:40px; }
.v5-marquee { display:flex; overflow:hidden; border-block:1px solid #18171236; padding-block:30px; }
.v5-brand-list { list-style:none; padding:0 56px 0 0; margin:0; display:flex; flex:0 0 auto; align-items:center; gap:56px; min-width:100%; justify-content:space-around; }
.v5-brand-list li { white-space:nowrap; font:800 clamp(28px,3.4vw,52px)/1.2 var(--display); }
/* Bolt: add .is-running to the marquee only after wiring its pause control. */
.v5-marquee.is-running .v5-brand-list { animation:v5-marquee 32s linear infinite; }
.v5-marquee:hover .v5-brand-list,.v5-marquee:focus-within .v5-brand-list,.v5-marquee.is-paused .v5-brand-list { animation-play-state:paused; }
@keyframes v5-marquee { to { transform:translateX(-100%); } }
.v5-contact { background:var(--ink); color:var(--paper); min-height:100svh; display:grid; grid-template-columns:1fr 1fr; column-gap:9%; align-content:center; padding-block:100px; }
.v5-contact>.v5-title { grid-column:1/-1; font-size:clamp(64px,10vw,160px); margin-bottom:48px; }
.v5-contact-intro { font:clamp(20px,2vw,30px)/1.5 Arial,sans-serif; max-width:25ch; margin:0; }
.v5-contact-form { grid-column:2; grid-row:2/5; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; min-width:0; }
.v5-field { display:flex; flex-direction:column; gap:12px; min-width:0; }
.v5-field label,.v5-field legend { font:11px/1.7 monospace; color:#d1c7b5; letter-spacing:.04em; }
.v5-field input,.v5-field select,.v5-field textarea { width:100%; min-width:0; border:0; border-bottom:1px solid #eee7d866; border-radius:0; padding:10px 0 14px; background:transparent; color:var(--paper); font:16px/1.6 Arial,sans-serif; transition:border-color .25s; }
.v5-field select { color-scheme:dark; }
.v5-field option { color:var(--paper); background:var(--ink); }
.v5-field textarea { resize:vertical; min-height:110px; }
.v5-field :is(input,select,textarea):focus { outline:none; border-bottom-color:var(--amber); box-shadow:0 1px 0 var(--amber); }
.v5-field:has(#v5-tipo),.v5-field-message,.v5-contact-status { grid-column:1/-1; }
.v5-contact-status { color:#bbb2a1; font:12px/1.7 monospace; margin:0; max-width:50ch; }
.v5-submit { justify-self:start; grid-column:1/-1; border:1px solid var(--amber); padding:16px 28px; font:800 24px/1 var(--display); transition:color .25s,background .25s; }
.v5-submit:hover:not(:disabled) { color:var(--ink); background:var(--amber); }
.v5-submit:disabled { opacity:.45; }
/* Optional accessible chips: native radio + span inside label; preserve #v5-tipo as fallback. */
.v5-project-types { grid-column:1/-1; border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.v5-project-types legend { margin-bottom:14px; }
.v5-chip { position:relative; display:inline-flex; }
.v5-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.v5-chip span { border:1px solid #eee7d866; border-radius:100px; padding:10px 16px; font:12px/1.5 monospace; transition:background .25s,border-color .25s,color .25s; }
.v5-chip:hover span,.v5-chip input:checked+span { background:var(--amber); border-color:var(--amber); color:var(--ink); }
.v5-chip input:focus-visible+span { outline:2px solid var(--amber); outline-offset:4px; }
.v5-contact-fixed { position:fixed; z-index:20; bottom:max(22px,env(safe-area-inset-bottom)); right:24px; border:1px solid #d6ad6e80; background:var(--ink); color:var(--paper); padding:13px 19px; border-radius:100px; font:11px/1 monospace; letter-spacing:.06em; transition:background .25s,color .25s; }
.v5-contact-fixed:hover { background:var(--amber); color:var(--ink); }
body:has(dialog[open],#mobile-nav:not([hidden]),#v5-preloader:not(.is-leaving):not([hidden])) .v5-contact-fixed { visibility:hidden; }
footer { padding-bottom:88px; }
/* Cinematic hover remains available to keyboard users. */
.project-image::after,.story-image::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#18171208 10%,#18171299 100%); opacity:0; transition:opacity .55s var(--v5-ease); }
.project-play,.story-arrow { z-index:1; opacity:0; transform:translate(-6px,6px); transition:transform .5s var(--v5-ease),opacity .4s; }
.project-caption h3,.story-card strong { display:block; transition:transform .5s var(--v5-ease); }
:is(.project,.story-card):is(:hover,:focus-visible) :is(.project-image,.story-image)::after { opacity:1; }
:is(.project,.story-card):is(:hover,:focus-visible) :is(.project-play,.story-arrow) { opacity:1; transform:translate(0,0); }
:is(.project,.story-card):is(:hover,:focus-visible) :is(h3,strong) { transform:translateY(-5px); }
/* Preloader is opt-in: Bolt inserts the element only when JS can dismiss it. */
#v5-preloader { position:fixed; inset:0; z-index:200; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; padding:var(--v5-gutter); opacity:1; visibility:visible; transition:opacity .65s var(--v5-ease),visibility .65s; }
.v5-preloader-logo { display:block; width:min(70vw,620px); height:auto; }
.v5-preloader-counter { position:absolute; right:var(--v5-gutter); bottom:40px; font:800 clamp(64px,9vw,144px)/1 var(--display); color:var(--amber); font-variant-numeric:tabular-nums; }
.v5-preloader-label { position:absolute; left:var(--v5-gutter); bottom:44px; font:11px/1.6 monospace; }
#v5-preloader.is-leaving { opacity:0; visibility:hidden; pointer-events:none; }
/* Override the original 6–10 px metadata without changing display typography. */
.eyebrow,.header-note,.header-note>span,.header nav sup,.hero-index a>span,.hero-bottom .eyebrow,.play>span:last-child,.hero-footer,.section-top,.intro-heading p,.intro-heading h2>sup,.filters button,.filters sup,#project-count,.project-number,.project-format,.project-title-row>span,.project-caption>p,.studio-copy .eyebrow,.studio-copy a,.process-title p,.bts-strip figcaption,footer>div,.viewer-top,.viewer-top>span,.viewer-top button,#viewer-kind,#viewer-meta,#full-project,.viewer-project-nav button:not(#viewer-prev),#gallery-controls,#mobile-nav a small,.hospitality-heading>p,.hospitality-card>p,.story-number,.story-meta,.stories-toolbar .eyebrow,.portfolio-end>.eyebrow,.set-gallery-link .eyebrow { font-size:var(--v5-label); }
.project-title-row { flex-wrap:wrap; gap:6px 12px; }
.filters button { opacity:.75; }
.hero-footer { flex-wrap:wrap; }
@media(max-width:1100px) { .v5-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; } .v5-process-step { padding-inline:16px; } .v5-contact { column-gap:6%; } .header nav { gap:20px; } }
@media(max-width:760px) {
 :root { --v5-gutter:20px; --v5-label:10px; }
 .v5-title { font-size:clamp(48px,12vw,80px); line-height:1; letter-spacing:-.025em; }
 .v5-services .v5-title { margin-bottom:40px; }
 .v5-services-grid { gap:32px 22px; }
 .v5-service h3 { font-size:26px; overflow-wrap:break-word; }
 .v5-service p { font-size:13px; line-height:1.75; }
 .v5-process-list { grid-template-columns:1fr; margin-top:40px; }
 .v5-process-step,.v5-process-step:first-child,.v5-process-step:last-child { border-left:0; padding:24px 0; display:grid; grid-template-columns:58px 1fr; gap:8px 18px; }
 .v5-step-number { grid-row:1/3; font-size:58px; margin:0; }
 .v5-process-step h3 { margin:0; font-size:27px; }
 .v5-process-step p { grid-column:2; max-width:32ch; }
 .v5-stats .v5-title { font-size:46px; }
 .v5-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px; margin-top:40px; }
 .v5-stat dd { font-size:clamp(100px,29vw,180px); }
 .v5-stat dt { font-size:10px; }
 .v5-stat-note { font-size:10px; }
 .v5-brands .v5-title { font-size:44px; }
 .v5-brand-list { gap:36px; padding-right:36px; }
 .v5-contact { display:block; padding-block:64px; min-height:100svh; }
 .v5-contact>.v5-title { font-size:clamp(58px,15vw,108px); margin-bottom:28px; }
 .v5-contact-intro { font-size:21px; margin-bottom:44px; }
 .v5-contact-form { gap:28px; grid-template-columns:1fr; }
 .v5-field,.v5-contact-status,.v5-submit { grid-column:1; }
 .v5-contact-fixed { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); padding:12px 16px; font-size:10px; }
 .header-note { max-width:215px; letter-spacing:.5px; }
 .hero-bottom { bottom:165px; }
 .hero-footer { bottom:65px; }
 .stories-toolbar { gap:12px; }
 .stories-toolbar>.eyebrow { max-width:190px; }
 .portfolio-end { flex-wrap:wrap; }
 .set-gallery-link { flex-wrap:wrap; }
 footer>div { flex-wrap:wrap; line-height:1.7; }
 .viewer-top { flex-wrap:wrap; }
 .project-number,.project-format { left:8px; letter-spacing:0; max-width:calc(100% - 16px); }
 .project-number { top:10px; } .project-format { bottom:10px; }
}
@media(hover:none) { .project-play,.story-arrow { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
 body::after { display:none; }
 .v5-marquee { flex-wrap:wrap; overflow:visible; }
 .v5-brand-list { flex-wrap:wrap; flex-basis:100%; padding:0; gap:24px 32px; justify-content:flex-start; min-width:0; }
 .v5-brand-list-copy { display:none; }
 .v5-brand-list li { white-space:normal; }
 :is(.project,.story-card):is(:hover,:focus-visible) :is(h3,strong,img) { transform:none; }
}
.v5-stat dt { margin-top:auto; }
.v5-contact-fixed.is-hidden,body.v5-contact-in-view .v5-contact-fixed { opacity:0; visibility:hidden; pointer-events:none; }

/* Transición suave entre páginas (navegadores con soporte; el resto usa el desvanecido de v5.js). */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-group(root){animation-duration:.4s}}

/* Los atributos width/height de las imágenes no deben anular la proporción definida por CSS. */
.hospitality-card img,.bts-strip img,.project-image img,.story-image img{height:auto}
.project-image img,.story-image img{height:100%}
@media(max-width:760px){.v5-contact-fixed{padding:9px 13px;font-size:9px;opacity:.92}}
@media(max-width:760px){.hero-index{top:31%}.hero-index a{font-size:clamp(54px,15.5vw,96px)}.hero-bottom{bottom:170px}}

/* Logo de portada: cada letra gira al pasar el cursor. */
.hero h1{perspective:1100px}
.v5-logo-letters{display:block;position:relative;width:100%;aspect-ratio:869/198;opacity:.96}
.v5-letter{position:absolute;top:0;height:100%;background-image:url("assets/distropik-logo.png");background-repeat:no-repeat;transform-origin:50% 50%;will-change:transform;cursor:default}
.v5-letter{transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1),filter .35s ease}
.v5-logo-letters:hover .v5-letter{opacity:.5}
.v5-logo-letters .v5-letter:hover{opacity:1;transform:translateY(-8px) scale(1.035);filter:brightness(1.12) drop-shadow(0 0 20px #d6ad6ecc)}
@media(prefers-reduced-motion:reduce){.v5-letter{transition:opacity .2s}.v5-logo-letters .v5-letter:hover{transform:none}}
@media(max-height:699px) and (min-width:761px){.v5-logo-letters{max-width:calc(250px*869/198)}}
.story-number,.story-arrow{z-index:2}

/* Presentación del director en «El estudio». */
.studio-image img{object-position:50% 14%;filter:saturate(.92) contrast(1.02)}
.studio-copy h2{font-size:clamp(84px,9.4vw,160px)}
.studio-copy .v5-role{font:11px/1.6 monospace;letter-spacing:.14em;color:var(--amber);margin:-8px 0 26px}
.studio-copy>p:not(.eyebrow):not(.v5-role):not(.v5-tagline){max-width:420px}
.studio-copy .v5-tagline{font:800 clamp(26px,2.6vw,40px)/1 var(--display);letter-spacing:.02em;color:var(--paper);margin:34px 0 4px;max-width:none}
.studio-copy .v5-tagline em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:var(--amber)}
@media(max-width:760px){.studio-image{height:520px}.studio-copy h2{font-size:24vw}.studio-copy .v5-role{margin:-4px 0 20px}.studio-copy .v5-tagline{font-size:28px;margin-top:26px}}