:root {
  --bg:#0b0b0b;
  --surface:#151515;
  --ink:#faf7ef;
  --muted:#d1cdc5;
  --gold:#dfbe72;
  --line:#38332a;
  --display:"Archivo Narrow","Arial Narrow",system-ui,sans-serif;
}
body{font-size:clamp(1rem,.97rem + .2vw,1.15rem)}
.wrap{width:min(1440px,calc(100% - clamp(32px,10vw,150px)))}
.top{position:sticky;top:0;z-index:5;background:#0b0b0bef;backdrop-filter:blur(14px)}
.bar{min-height:76px}
.bar .brand{font-size:.93rem;letter-spacing:.01em}
.bar nav a:hover{color:var(--gold)}
.button{border-radius:3px;padding:12px 20px;gap:12px}
.secondary{background:#101010b3}

.cinema .eyebrow{font-size:.85rem;margin-bottom:16px}
.cinema h1{font:850 clamp(4rem,10vw,10rem)/.87 var(--display);letter-spacing:-.055em;text-transform:uppercase;text-wrap:initial}
.section{padding-block:clamp(45px,8vw,108px);scroll-margin-top:84px}
.section h2{font-family:var(--display);font-size:clamp(2.3rem,5.3vw,5.4rem);line-height:.99;letter-spacing:-.042em;text-wrap:balance;max-width:19ch}
.lead{font-size:clamp(1rem,1.6vw,1.25rem);margin-bottom:clamp(20px,4vw,42px)}
.grid{gap:clamp(12px,2vw,24px)}
.card{border-radius:4px}
.film-card h3{font-size:clamp(1.5rem,3vw,2.55rem)}
.feature-film{margin:0 0 24px;min-height:clamp(300px,43vw,620px);display:grid;align-items:end;position:relative;isolation:isolate;overflow:hidden;background:#17130d}
.feature-film img{position:absolute;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 57%}
.feature-film::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#000e,transparent 85%)}
.feature-caption{padding:clamp(18px,5vw,62px)}
.feature-caption h3{font-size:clamp(2rem,5vw,4.5rem);margin:3px 0 12px;line-height:1.05}
.gallery .poster img{transition:transform .4s ease}
.gallery .work:is(:hover,:focus-visible) img{transform:scale(1.06)}
.cta{border-radius:4px}
.video-dialog{width:min(95vw,550px);max-height:92svh;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:14px}
.video-dialog::backdrop{background:#000c}
.video-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.video-controls h2{font-size:1.25rem}
.video-controls button{font-size:1.65rem;min-width:44px;min-height:44px;background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer}
.video-player iframe{display:block;width:100%;height:min(63svh,630px);border:0;background:#fff}
.instagram-fallback{display:inline-block;color:var(--gold);padding-top:8px}
[data-reveal].animate-in{animation:section-arrive .65s ease-out both}
@keyframes section-arrive{from{transform:translateY(14px);opacity:.65}to{transform:translateY(0);opacity:1}}
@media(max-width:760px){
  .bar{min-height:64px;padding-block:8px;gap:12px}
  .bar .brand img{width:37px;height:37px}
  .bar .button{font-size:.83rem;padding:8px 10px}

  .cinema h1{font-size:clamp(3.25rem,13.5vw,6.1rem)}
  .section h2{font-size:clamp(2.1rem,9vw,3.4rem)}
  .gallery{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.finish-car{position:absolute;top:16%;right:3%;width:62%;height:64%;border:0;background:transparent;cursor:pointer;padding:0}
.finish-car:focus-visible{outline:2px solid var(--gold);outline-offset:-5px}
.finish-strip{border-block:1px solid var(--line);background:#151310}
.finish-strip-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.finish-strip h2{font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:normal}
.finish-caption{margin-top:3px;color:var(--muted);font-size:.9rem}
.finish-controls:not([hidden]){display:flex;gap:4px;border:1px solid var(--line);padding:4px;border-radius:4px}
.finish-controls button{padding:8px 16px;min-height:44px;border:0;border-radius:2px;background:transparent;color:var(--ink);font:700 .95rem system-ui;cursor:pointer}
.finish-controls [aria-pressed="true"]{background:var(--gold);color:#171207}
.finish-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:760px){
  .finish-car{top:3%;right:0;width:100%;height:53%}
  .finish-strip-inner{flex-wrap:wrap}
}
.finish-note{color:var(--muted);font-size:.8rem}
@media(max-width:760px){
  .finish-controls:not([hidden]){width:100%}
  .finish-controls button{flex:1;padding-inline:9px}
}

@font-face{
  font-family:Fahkwang;
  src:url('fahkwang-bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}
:root{--display:Fahkwang,"Arial Narrow",system-ui,sans-serif}
.cinema h1{font-size:clamp(2.8rem,7vw,7rem);font-weight:700;line-height:.98;letter-spacing:-.04em}
.section>h2,.section>.lead{margin-inline:auto;text-align:center}
.finish-strip-inner{justify-content:center;flex-wrap:wrap;text-align:center}
.finish-strip h2{font-family:var(--display)}
.film-card h3{min-height:68px;display:grid;place-items:center}
.film-card h3 img{width:auto;height:auto;max-height:48px;max-width:min(100%,240px);object-fit:contain}
.film-card .film-accent{text-align:center;color:var(--film-accent);text-wrap:balance}
.film-card a{color:var(--film-accent)}
.film-xpel{--film-accent:#fdb521;border-top:3px solid var(--film-accent)}
.film-nevada{--film-accent:#48d8e8;border-top:3px solid var(--film-accent)}
@media(max-width:760px){
  .cinema h1{font-size:clamp(2.35rem,10vw,4.8rem)}
}

.cinema{background:#0b0b0b;text-align:center}
.cinema-heading{padding-block:clamp(22px,4vw,56px) clamp(14px,2vw,28px)}
.cinema-heading .eyebrow{margin-bottom:10px}
.cinema-stage{position:relative;width:100%;aspect-ratio:1200/724;overflow:hidden;background:#0b0b0b}
.car-photo{display:block;width:100%;height:100%;object-fit:cover}
.cinema-description{padding-block:24px 38px}
.cinema-description p{margin-bottom:16px;color:var(--muted)}
.cinema-description .actions{justify-content:center}
.finish-strip-inner{flex-direction:column}
.simulator-controls:not([hidden]){display:grid;gap:12px;width:min(100%,590px)}
.color-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.color-controls button{min-height:44px;padding:5px 2px;background:transparent;color:var(--ink);border:1px solid transparent;border-radius:4px;cursor:pointer;font:650 .78rem system-ui}
.color-controls button::before{content:"";display:block;width:22px;height:22px;margin:0 auto 4px;border:1px solid #ffffff45;border-radius:50%;background:var(--swatch)}
.color-controls button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.color-controls button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.finish-controls:not([hidden]){width:100%;justify-content:center}
.finish-controls button{flex:1}
@media(max-width:760px){
  .finish-car{top:8%;right:0;width:90%;height:86%}
  .color-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.cinema-stage .finish-car{top:11%;right:4%;width:92%;height:78%}

.finish-error{color:var(--gold);font-size:.9rem}
.color-controls button{line-height:1.2;padding-inline:4px;text-wrap:balance}

.bar nav{gap:clamp(12px,2vw,30px)}
.bar nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:clamp(1rem,1.42vw,1.23rem);font-weight:750;white-space:nowrap}
.bar .nav-logo img{height:auto;width:clamp(62px,8vw,112px)}
.bar .nav-xpel img{width:clamp(54px,6vw,86px)}
.bar .nav-logo:hover{opacity:.8}
.film-card[id]{scroll-margin-top:95px}
.installer-mark{position:absolute;z-index:1;top:clamp(6px,1.7vw,24px);left:clamp(6px,1.7vw,24px);padding:clamp(5px,1vw,12px) clamp(8px,1.3vw,16px);background:#0b0b0bf2;border:1px solid #dfbe7270;border-radius:4px;text-align:left;pointer-events:none}
.installer-mark span{display:block;color:var(--gold);font-size:clamp(.65rem,1.1vw,.98rem);font-weight:750;line-height:1.1}
.installer-logos{display:flex;align-items:center;gap:clamp(7px,1vw,14px);margin-top:6px}
.installer-logos img{width:clamp(43px,6vw,87px);height:auto}
.installer-logos img:first-child{width:clamp(35px,4.7vw,67px)}
.simulator-controls:not([hidden]){width:min(100%,760px)}
.color-controls{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:850px){
  .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .bar nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;grid-row:2;grid-column:1/-1}
  .bar nav a{font-size:clamp(.82rem,2.9vw,1.1rem)}
  .bar>.button{grid-row:1;grid-column:2}
  .section,.film-card[id]{scroll-margin-top:125px}
}
@media(max-width:760px){
  .color-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
}

#proteccion h3,#coberturas h2{color:var(--gold);text-transform:uppercase}
#coberturas h2{font-size:clamp(2rem,5vw,4.8rem)}
.coverage{border-top:3px solid var(--coverage)}
.coverage-partial{--coverage:#67dca1}
.coverage-front{--coverage:#f3ca5b}
.coverage-full{--coverage:#79bcff}
.coverage h3{color:var(--coverage);text-transform:uppercase}
.coverage .button{background:var(--coverage);border-color:var(--coverage);color:#111;font-weight:800}
.coverage .button:hover{filter:brightness(1.12)}
.feature-film img{object-position:center 52%}
.feature-film::after{background:linear-gradient(0deg,#000b 0%,#0004 33%,transparent 62%)}
.feature-caption{color:#fff;text-shadow:0 2px 8px #000}
.location-card iframe{width:100%;height:clamp(210px,30vw,340px);border:0;border-radius:4px;background:#191919}
.location-card .actions .button{margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){
  .feature-film{min-height:clamp(270px,85vw,400px)}
  .coverage .button{width:100%}
  .location-card .actions .button{flex:1 1 100px}
}
.location-map{position:relative}
.location-map iframe{display:block;pointer-events:none}
.location-map>a{position:absolute;inset:0;border-radius:4px}

@media (min-width: 1000px) {
  .cinema {
    --desktop-stage-height: clamp(220px, calc(100svh - 344px), 650px);
  }
  .cinema-heading {
    padding-block: 10px 12px;
  }
  .cinema-heading .eyebrow {
    margin-bottom: 4px;
  }
  .cinema h1 {
    font-size: clamp(2.6rem, min(4.6vw, 7svh), 5.6rem);
  }
  .cinema-stage {
    height: var(--desktop-stage-height);
    aspect-ratio: auto;
    background: #0b0b0b;
  }
  .car-photo {
    width: min(100%, calc(var(--desktop-stage-height) * 1.95));
    margin-inline: auto;
    object-fit: cover;
    object-position: center top;
    mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  }
  .cinema-stage .finish-car {
    inset: 0;
    width: min(100%, calc(var(--desktop-stage-height) * 1.95));
    height: 100%;
    margin-inline: auto;
  }
  .finish-strip-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    padding-block: 7px;
  }
  .finish-intro {
    flex: 0 0 min(22%, 220px);
  }
  .finish-strip h2 {
    font-size: 1.13rem;
  }
  .finish-note {
    font-size: .75rem;
    line-height: 1.2;
  }
  .simulator-controls:not([hidden]) {
    gap: 4px;
  }
  .color-controls button {
    padding-block: 3px;
  }
  .color-controls button::before {
    width: 18px;
    height: 18px;
    margin-bottom: 2px;
  }
  .finish-controls button {
    min-height: 40px;
    padding-block: 5px;
  }
}

.bar nav{gap:clamp(8px,1.45vw,24px)}
.kits-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.kit-prices table{width:100%;border-collapse:collapse;font-size:clamp(.82rem,1.4vw,1rem)}
.kit-prices caption{text-align:left;font-weight:800;color:var(--gold);margin-bottom:9px}
.kit-prices th,.kit-prices td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--line)}
.kit-prices td{white-space:nowrap;font-variant-numeric:tabular-nums}
.kit-prices thead th:nth-child(2){color:#48d8e8}
.kit-prices thead th:nth-child(3){color:#fdb521}
.kit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kit-fields label{font-size:.85rem;font-weight:700;display:grid;gap:5px}
.kit-fields select{width:100%;min-height:44px;background:#101010;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:6px;font:inherit}
.kit-fields select:focus-visible{outline:2px solid var(--gold)}
#kit-price{color:var(--gold);font-size:clamp(1.35rem,3vw,2rem);font-weight:800}
@media(max-width:850px){
  .bar nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
  .bar nav a{font-size:clamp(.67rem,2.45vw,1rem)}
  .bar .nav-logo img{max-width:88%}
  .kits-layout{grid-template-columns:1fr}
}
@media(max-width:430px){
  .kit-fields{grid-template-columns:1fr}
  .kit-picker .button{width:100%}
}
@media (min-width:851px) and (max-width:999px) {
  .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .bar nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;grid-row:2;grid-column:1/-1}
  .bar>.button{grid-row:1;grid-column:2}
  .section,.film-card[id]{scroll-margin-top:140px}
}

[hidden]{display:none!important}
.cookie-banner{position:fixed;z-index:10;inset:auto 0 0;display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:center;background:#171510;color:var(--ink);border-top:1px solid var(--gold);padding:14px clamp(16px,5vw,64px) max(14px,env(safe-area-inset-bottom));box-shadow:0 -6px 24px #0007}
.cookie-banner h2,.cookie-settings h2{font-family:var(--display);font-size:clamp(1.18rem,3vw,1.7rem)}
.cookie-banner p,.cookie-settings p{font-size:.9rem;line-height:1.45;color:var(--muted);margin-top:5px}
.cookie-banner a,.privacy-links a,.privacy-links button{color:var(--gold)}
.cookie-actions{display:flex;gap:7px;flex-wrap:wrap}
.cookie-actions button,.privacy-links button{cursor:pointer;font:inherit;font-weight:750}
.cookie-actions .button{font-size:.88rem;padding:8px 12px;min-height:44px}
.cookie-settings{width:min(92vw,530px);max-height:88svh;overflow:auto;background:#171510;color:var(--ink);border:1px solid var(--gold);border-radius:7px;padding:20px}
.cookie-settings::backdrop{background:#000a}
.cookie-settings label{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cookie-settings input{accent-color:var(--gold);width:18px;height:18px;margin-top:4px}
.cookie-settings small{display:block;color:var(--muted)}
.cookie-settings .cookie-actions{margin-top:16px;justify-content:flex-end}
.privacy-links{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:6px}
.privacy-links button{background:none;border:0;text-decoration:underline;padding:0}
.map-placeholder{width:100%;min-height:100px}
@media(max-width:850px){.cookie-banner{grid-template-columns:1fr}.cookie-actions .button{flex:1}}
@media(max-width:390px){.cookie-banner{padding-inline:12px}.cookie-actions .button{padding-inline:7px;font-size:.8rem}}

@media(max-width:600px){
  .wrap{width:calc(100% - 2 * max(10px, env(safe-area-inset-left), env(safe-area-inset-right)))}
  .bar{min-height:0;padding-block:6px;row-gap:0}
  .bar .brand{font-size:.8rem}
  .bar .brand img{width:34px;height:34px}
  .bar>.button{min-height:44px}
  .cinema-heading{padding-block:17px 13px}
  .cinema-heading .eyebrow{margin-bottom:6px}
  .cinema h1{font-size:clamp(2rem,9vw,3.5rem)}
  .finish-strip-inner{gap:7px;padding-block:9px}
  .finish-caption{margin-top:0}
  .finish-note{font-size:.75rem;line-height:1.25}
  .simulator-controls:not([hidden]){gap:5px}
  .color-controls{gap:3px}
  .color-controls button::before{width:17px;height:17px;margin-bottom:3px}
  .finish-controls{padding:2px}
  .cinema-description{padding-block:12px 20px}
  .cinema-description p{margin-bottom:9px}
  .section{padding-block:26px;scroll-margin-top:110px}
  .section h2,#coberturas h2{font-size:clamp(1.8rem,7.5vw,2.65rem);line-height:1.06;max-width:none}
  .section>.lead{margin-block:8px 13px;font-size:1rem;line-height:1.45}
  .grid,.kits-layout{gap:8px}
  .card{padding:13px;gap:7px}
  .card p,.film-card dd,.film-origin p,.location-card address{line-height:1.45}
  .film-card h3{min-height:48px}
  .film-card h3 img{max-height:35px}
  .film-card dt{margin-top:9px;padding-top:9px}
  .film-origin{margin-top:8px;padding:12px}
  .kit-prices th,.kit-prices td{padding:7px 4px}
  .kit-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .kit-fields label:last-child{grid-column:1/-1}
  .feature-film{min-height:250px;margin-bottom:8px}
  .feature-caption{padding:13px}
  .feature-caption h3{font-size:1.75rem;margin-bottom:7px}
  .gallery .work{padding:0}
  .gallery .poster img{aspect-ratio:1;object-fit:cover}
  .gallery .work-label{padding:7px;gap:1px}
  .gallery .work-label small{line-height:1.3}
  .gallery-source{margin-top:10px}
  .faq summary{min-height:44px;padding-block:10px;font-size:1rem}
  .faq details p{padding-bottom:11px;line-height:1.45}
  .cta{padding:14px;margin-bottom:0}
  .location-card iframe{height:190px}
  .map-placeholder{min-height:48px}
}