/* =====================================================================
   NOAH'S GARAGE 3.0 — Dark Automotive Luxury
   Mobile first · sin frameworks · animación progresiva (GSAP opcional)
   ===================================================================== */

:root{
  --yellow:#FFCB23;
  --yellow-deep:#E5A800;
  --blue:#133E70;
  --blue-bright:#4C8DDB;
  --carbon:#080B0E;
  --ink-1:#0C1015;
  --ink-2:#11171D;
  --ink-3:#1A222B;
  --steel:#9AA4B0;
  --steel-dim:#6C7682;
  --paper:#F3F1EC;
  --line:rgba(243,241,236,.12);
  --line-strong:rgba(243,241,236,.24);

  --f-display:"Archivo NG", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Archivo NG", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"JetBrains Mono NG", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter:16px;
  --maxw:1440px;
  --header-h:64px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --radius:2px;
}
@media (min-width:768px){ :root{ --gutter:32px; --header-h:76px; } }
@media (min-width:1280px){ :root{ --gutter:56px; } }

/* ---------- lenis ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:var(--header-h); }
html:not(.lenis){ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html:not(.lenis){ scroll-behavior:auto; } }
body{
  margin:0; background:var(--carbon); color:var(--paper);
  font-family:var(--f-body); font-size:16px; line-height:1.6; font-weight:400;
  font-stretch:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; text-rendering:optimizeLegibility;
}
@supports (overflow:clip){ body{ overflow-x:clip; } }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--yellow); color:var(--carbon); }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ic{ width:1.1em; height:1.1em; flex:none; }
.mono{ font-family:var(--f-mono); letter-spacing:.02em; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.skip{ position:fixed; left:var(--gutter); top:-60px; z-index:200; background:var(--yellow); color:var(--carbon); padding:10px 16px; font-weight:700; transition:top .2s; }
.skip:focus{ top:12px; }

/* ---------- tipografía ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--yellow);
  margin-bottom:20px;
}
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(255,203,35,.18); }
.h2{
  font-family:var(--f-display); font-weight:800; font-stretch:78%;
  font-size:clamp(40px, 9.6vw, 104px); line-height:.92; letter-spacing:-.02em; text-transform:uppercase;
}
.h2 em, .footer-title em{ font-style:italic; color:var(--yellow); font-weight:800; }
.h2-xl{ font-size:clamp(52px, 13vw, 168px); line-height:.86; }
.lead{ font-size:clamp(17px, 1.6vw, 20px); line-height:1.55; color:#D9D6CF; max-width:56ch; margin-top:24px; }
p + p{ margin-top:14px; }

/* ---------- botones ---------- */
.btn{
  --bg:transparent; --fg:var(--paper); --bd:var(--line-strong);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:48px; padding:12px 22px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-family:var(--f-display); font-weight:700; font-stretch:88%; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--radius); overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--hover, var(--paper));
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover,.btn:focus-visible{ color:var(--hover-fg, var(--carbon)); border-color:var(--hover, var(--paper)); }
.btn .ic{ transition:transform .35s var(--ease-out); }
.btn:hover .ic{ transform:translateX(4px); }
.btn-yellow{ --bg:var(--yellow); --fg:#0B0B0B; --bd:var(--yellow); --hover:var(--paper); --hover-fg:var(--carbon); }
.btn-ghost{ --bd:var(--line-strong); }
.btn-line{ --bd:currentColor; }
.btn-sm{ min-height:40px; padding:8px 16px; font-size:13px; }
.btn-lg{ min-height:56px; padding:16px 28px; font-size:16px; }
.btn-block{ width:100%; }
.text-link{ display:inline-flex; align-items:center; gap:8px; color:var(--yellow); font-weight:600; border-bottom:1px solid rgba(255,203,35,.4); padding-bottom:2px; transition:border-color .3s; }
.text-link:hover{ border-color:var(--yellow); }

/* =====================================================================
   INTRO — la puerta del garaje se abre
   ===================================================================== */
.intro{ display:none; }
.js-motion:not(.gsap-on):not(.motion-off) .hero-title .ht-in{ opacity:0; animation:htFailsafe .01s 2.6s forwards; }
@keyframes htFailsafe{ to{ opacity:1; } }
.js-intro .intro{
  display:block; position:fixed; inset:0; z-index:150; pointer-events:auto;
  /* failsafe: si el JS no corre, la puerta se retira sola */
  animation:introFailsafe .9s var(--ease-io) 3.2s forwards;
}
.intro-slats{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%, transparent 70%, rgba(0,0,0,.5)),
    repeating-linear-gradient(180deg, #1C232B 0 34px, #10161C 34px 37px, #232B34 37px 38px);
}
.intro-light{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow); box-shadow:0 0 24px 6px rgba(255,203,35,.55); transform-origin:left; transform:scaleX(0); }
.intro-label{ position:absolute; left:var(--gutter); bottom:28px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); }
.intro-skip{ position:absolute; right:var(--gutter); bottom:22px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); padding:8px; }
@keyframes introFailsafe{ to{ transform:translateY(-100%); visibility:hidden; } }

/* ---------- progreso ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; }
.progress span{ display:block; height:100%; background:var(--yellow); transform-origin:0 50%; transform:scaleX(var(--p,0)); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:fixed; inset:0 0 auto; z-index:110; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 var(--gutter); transition:background .4s, border-color .4s, transform .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{ background:rgba(8,11,14,.78); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-color:var(--line); }
.site-header.is-hidden{ transform:translateY(-100%); }
.brand img{ width:clamp(150px, 16vw, 210px); height:auto; }
.nav{ display:none; }
.nav-list{ display:flex; gap:clamp(16px, 2vw, 32px); }
.nav-list a{ position:relative; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#CFCBC3; padding:6px 0; transition:color .3s; }
.nav-list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out); }
.nav-list a:hover,.nav-list a.is-active{ color:var(--paper); }
.nav-list a:hover::after,.nav-list a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.lang-link{ font-size:12px; font-weight:700; letter-spacing:.12em; padding:10px 8px; color:var(--steel); transition:color .3s; }
.lang-link:hover{ color:var(--yellow); }
.header-cta{ display:none; }
.menu-toggle{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:var(--radius); }
.menu-toggle-lines{ position:relative; width:18px; height:10px; }
.menu-toggle-lines i{ position:absolute; left:0; right:0; height:2px; background:var(--paper); transition:transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu-toggle-lines i:first-child{ top:0; }
.menu-toggle-lines i:last-child{ top:8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines i:first-child{ top:4px; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child{ top:4px; transform:rotate(-45deg); }
@media (min-width:600px){ .header-cta{ display:inline-flex; } }
@media (min-width:1100px){ .nav{ display:block; } .menu-toggle{ display:none; } }

/* menú móvil */
.mobile-menu{
  position:fixed; inset:0; z-index:105; background:var(--carbon);
  padding:calc(var(--header-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:space-between; overflow-y:auto;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); pointer-events:none; opacity:.5; }
.mm-list li{ border-bottom:1px solid var(--line); }
.mm-list a{ display:flex; align-items:baseline; gap:16px; padding:14px 0; font-family:var(--f-display); font-weight:800; font-stretch:80%; text-transform:uppercase; font-size:clamp(34px, 9vw, 56px); line-height:1; }
.mm-list a span{ font-size:12px; color:var(--yellow); }
.mm-foot{ position:relative; display:grid; gap:20px; margin-top:32px; }
.mm-links{ display:flex; gap:24px; font-size:13px; color:var(--steel); }
.menu-open{ overflow:hidden; }

/* índice lateral */
.side-index{ display:none; }
@media (min-width:1280px){
  .side-index{ display:block; position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:90; }
  .side-index ol{ display:grid; gap:2px; }
  .side-index a{ position:relative; display:flex; align-items:center; justify-content:flex-end; width:28px; height:22px; }
  .si-n{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .side-index a::after{ content:""; width:10px; height:2px; background:rgba(243,241,236,.35); transition:width .4s var(--ease-out), background .3s; }
  .side-index a:hover::after{ width:18px; background:var(--paper); }
  .side-index a.is-active::after{ width:24px; background:var(--yellow); }
  .si-l{ position:absolute; right:36px; top:50%; transform:translate(6px,-50%); white-space:nowrap; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--carbon); background:var(--yellow); padding:4px 8px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
  .side-index a:hover .si-l, .side-index a:focus-visible .si-l{ opacity:1; transform:translate(0,-50%); }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--header-h) + 32px); overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:62% 40%; transform:scale(1.08); filter:saturate(.85) contrast(1.05); }
.hero-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,11,14,.75) 0%, rgba(8,11,14,.25) 30%, rgba(8,11,14,.55) 62%, var(--carbon) 100%),
    linear-gradient(90deg, rgba(8,11,14,.92) 0%, rgba(8,11,14,.45) 55%, rgba(8,11,14,.1) 100%);
}
.spot{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle 360px at var(--mx,70%) var(--my,40%), rgba(255,214,90,.16), transparent 70%);
  mix-blend-mode:screen;
}
.has-pointer [data-spotlight]:hover .spot, .has-pointer [data-spotlight]:hover > .spot{ opacity:1; }
.hero-grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:calc((100vw - 2 * var(--gutter)) / 4) 100%, calc((100vw - 2 * var(--gutter)) / 4) 100%;
  background-position:var(--gutter) 0;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
}
.hero-scale{
  position:absolute; right:-.04em; top:calc(var(--header-h) + 2vh); z-index:-1;
  font-family:var(--f-display); font-weight:900; font-stretch:62%; font-size:clamp(160px, 42vw, 620px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(255,203,35,.2); letter-spacing:-.04em; user-select:none; pointer-events:none;
}
.hero-inner{ position:relative; padding-bottom:28px; }
.hero-kicker{ color:var(--paper); }
.hero-title{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(58px, 15.5vw, 236px); line-height:.92; letter-spacing:-.035em;
  --hs:72; font-stretch:calc(var(--hs) * 1%); font-variation-settings:"wdth" var(--hs); margin-left:-.04em;
}
.ht-line{ display:block; overflow:hidden; white-space:nowrap; padding:.16em 0 .04em; margin-top:-.16em; }
.ln-mask{ padding-top:.16em; margin-top:-.16em; }
.ht-in{ display:inline-block; }
.hero-title .hl{ color:var(--yellow); font-style:italic; }
.hero-bottom{ display:grid; gap:28px; margin-top:28px; }
.hero-lead{ max-width:46ch; color:#E2DFD8; font-size:clamp(16px, 1.45vw, 19px); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-ctas .btn{ flex:1 1 220px; }
@media (min-width:600px){ .hero-ctas .btn{ flex:0 0 auto; } }
@media (min-width:1024px){
  .hero-bottom{ grid-template-columns:minmax(0,1fr) auto; align-items:end; }
}
.hero-readouts{
  position:relative; display:none; border-top:1px solid var(--line); padding-top:16px; padding-bottom:22px;
  font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--steel);
}
.hero-readouts li{ display:flex; gap:10px; align-items:center; }
.hero-readouts li span{ color:var(--yellow); }
.scroll-cue{ margin-left:auto; }
.scroll-cue i{ position:relative; width:1px; height:28px; background:var(--line-strong); overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--yellow); animation:cue 1.8s var(--ease-io) infinite; }
@keyframes cue{ to{ top:100%; } }
@media (min-width:768px){ .hero-readouts{ display:flex; gap:clamp(20px, 4vw, 64px); } }

/* ---------- ticker ---------- */
.ticker{ position:relative; overflow:hidden; border-block:1px solid var(--line); background:var(--yellow); color:#0B0B0B; }
.ticker-track{ display:flex; width:max-content; animation:ticker 38s linear infinite; }
.ticker-group{ display:flex; align-items:center; gap:28px; padding-right:28px; padding-block:14px; white-space:nowrap; }
.ticker-group span{ font-family:var(--f-display); font-weight:800; font-stretch:82%; font-size:clamp(18px, 2.4vw, 28px); text-transform:uppercase; letter-spacing:.01em; }
.ticker-group b{ font-size:14px; }
@keyframes ticker{ to{ transform:translateX(-50%); } }
.gsap-on .ticker-track{ animation:none; }

/* =====================================================================
   ANATOMÍA (vista explosionada)
   ===================================================================== */
.anatomy{ position:relative; background:var(--carbon); overflow:hidden; }
.anatomy-pin{ padding-block:clamp(80px, 12vw, 120px); }
.anatomy-grid{ display:grid; gap:48px; }
.anatomy-stage{ position:relative; display:grid; justify-items:center; perspective:1800px; perspective-origin:50% 40%; padding-block:24px; }
.piece3d{
  --gap:0px;
  position:relative; width:min(74vw, 400px); aspect-ratio:4/5; transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) scale(var(--ps,1));
  will-change:transform;
}
.ly{ position:absolute; inset:0; transform-style:preserve-3d; backface-visibility:hidden; transform:translateZ(calc(var(--gap) * var(--z))); }
.ly-back{ --z:-2; background:linear-gradient(135deg, #1B2129, #0E1217); border:1px solid #2A333D; display:grid; place-content:center; justify-items:center; gap:14px; color:var(--yellow); }
.ly-back .nfc-chip{ width:34%; height:auto; aspect-ratio:1; filter:drop-shadow(0 0 18px rgba(255,203,35,.45)); }
.ly-back span{ font-size:11px; letter-spacing:.24em; }
.ly-art{ --z:-1; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.ly-art img{ width:100%; height:100%; object-fit:cover; }
.ly-car{ --z:0; inset:auto; left:24%; top:72.5%; width:52%; aspect-ratio:568/256; }
.ly-car img{ width:100%; height:100%; object-fit:cover; border-radius:4px; box-shadow:0 10px 26px rgba(0,0,0,.6); }
.ly-story{ --z:.6; pointer-events:none; }
.ly-story .chip{ position:absolute; font-size:clamp(9px, 1.1vw, 11px); letter-spacing:.12em; text-transform:uppercase; padding:6px 9px; background:rgba(8,11,14,.86); border:1px solid rgba(255,203,35,.6); color:var(--yellow); white-space:nowrap; opacity:var(--chips,0); transition:opacity .4s; }
.ly-story .chip:nth-child(1){ left:-8%; top:30%; }
.ly-story .chip:nth-child(2){ right:-10%; top:52%; }
.ly-story .chip:nth-child(3){ left:6%; top:62%; }
.ly.is-focus{ outline:1px solid rgba(255,203,35,.85); outline-offset:6px; }
.ly-frame{ --z:1.4; border:clamp(12px, 3.2vw, 20px) solid #0D0F11; box-shadow:inset 0 0 0 1px #2C3036, inset 0 0 0 6px #121417, inset 0 0 24px rgba(0,0,0,.7), 0 0 0 1px #2A2E33, 0 40px 80px rgba(0,0,0,.55); background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%); }
.anatomy-caption{ position:relative; z-index:6; margin-top:28px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); text-align:center; }
.anatomy-caption span{ color:var(--steel-dim); text-transform:none; letter-spacing:.02em; }
.anatomy-layers{ display:grid; gap:2px; counter-reset:l; }
.anatomy-layers li{ display:grid; grid-template-columns:44px 1fr; gap:12px; padding:18px 0; border-top:1px solid var(--line); transition:opacity .4s, border-color .4s; }
.anatomy-layers h3{ font-family:var(--f-display); font-weight:800; font-stretch:85%; text-transform:uppercase; font-size:20px; line-height:1.1; letter-spacing:.01em; }
.anatomy-layers p{ color:var(--steel); font-size:15px; margin-top:6px; }
.al-n{ font-size:12px; color:var(--yellow); padding-top:4px; }
.gsap-on .anatomy-layers li{ opacity:.38; }
.gsap-on .anatomy-layers li.is-active{ opacity:1; border-color:var(--yellow); }
@media (min-width:1024px){
  .anatomy-pin{ min-height:100vh; display:flex; align-items:center; padding-block:calc(var(--header-h) + 24px) 40px; }
  .anatomy-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.9fr); align-items:center; gap:clamp(24px, 4vw, 64px); }
  .anatomy-head .h2{ font-size:clamp(44px, 4.6vw, 76px); }
  .piece3d{ width:min(28vw, 400px, 52vh); }
  .anatomy-caption{ margin-top:72px; }
}
@media (prefers-reduced-motion:reduce){ .ly-story .chip{ --chips:1; } }

/* =====================================================================
   COLECCIONES (scroll horizontal en desktop / swipe nativo en móvil)
   ===================================================================== */
.cols{ position:relative; background:var(--ink-1); border-top:1px solid var(--line); }
.cols-pin{ position:relative; padding-block:clamp(72px, 10vw, 110px) 48px; }
.cols-track{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cols-track::-webkit-scrollbar{ display:none; }
.cpanel{
  position:relative; flex:0 0 86vw; max-width:560px; min-height:min(640px, 82svh); scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate;
  background:var(--ink-2); border:1px solid var(--line);
}
.cpanel-intro,.cpanel-custom{ justify-content:center; padding:28px 24px; background:transparent; border:0; }
.cpanel-intro{ flex-basis:74vw; padding-left:0; }
.cpanel-custom{ background:var(--yellow); color:#0B0B0B; border:0; }
.cpanel-custom .kicker{ color:#0B0B0B; }
.cpanel-custom .h2{ font-size:clamp(40px, 4.4vw, 68px); }
.cpanel-intro .h2{ font-size:clamp(40px, 5.2vw, 88px); }
.cpanel-custom .lead{ color:#2A2A2A; }
.cpanel-custom .btn-yellow{ --bg:#0B0B0B; --fg:var(--yellow); --bd:#0B0B0B; --hover:var(--paper); margin-top:32px; align-self:flex-start; }
.cols-hint{ display:flex; align-items:center; gap:12px; margin-top:36px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.cols-hint span{ width:48px; height:1px; background:var(--yellow); position:relative; overflow:hidden; }
.cols-hint span::after{ content:""; position:absolute; inset:0; background:var(--carbon); animation:hint 2s var(--ease-io) infinite; }
@keyframes hint{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
.cp-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.cp-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); }
.cpanel:not(.cpanel-intro):not(.cpanel-custom)::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,11,14,.15) 0%, rgba(8,11,14,.35) 40%, rgba(8,11,14,.94) 78%); }
.cp-fx{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.cp-deco{ position:absolute; top:20px; right:20px; text-align:right; z-index:1; }
.cp-deco span{ display:block; font-family:var(--f-display); font-weight:900; line-height:.85; }
.cp-deco small{ display:block; margin-top:8px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }
.cp-body{ position:relative; padding:24px; display:grid; gap:12px; justify-items:start; }
.cp-count{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.cp-count span{ color:var(--accent, var(--yellow)); }
.cp-name{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(44px, 11vw, 92px); line-height:.86; letter-spacing:-.02em; }
.cp-tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent, var(--yellow)); }
.cp-text{ color:#D7D3CB; max-width:42ch; }
.cp-body .btn{ margin-top:8px; color:var(--paper); --hover:var(--accent, var(--yellow)); --hover-fg:#0B0B0B; }

/* — personalidad: JDM Legends — */
.cp-jdm{ --accent:#FF3B30; }
.cp-jdm .cp-name{ font-stretch:70%; font-style:italic; color:var(--yellow); text-shadow:3px 3px 0 #C8102E; }
.cp-jdm .cp-deco span{ writing-mode:vertical-rl; font-size:clamp(64px, 14vw, 140px); color:rgba(255,59,48,.88); font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-weight:900; letter-spacing:.06em; text-shadow:0 0 30px rgba(255,59,48,.5); }
.jdm-scan{ position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px); mix-blend-mode:multiply; opacity:.6; }
/* — Blueprint Series — */
.cp-bpt{ --accent:#6FB1FF; background:#0A2240; }
.cp-bpt .cp-name{ font-family:var(--f-mono); font-weight:700; font-size:clamp(34px, 8vw, 68px); letter-spacing:-.04em; line-height:.95; color:#DDEBFF; }
.cp-bpt .cp-deco span{ font-family:var(--f-mono); font-weight:400; font-size:12px; letter-spacing:.4em; color:#9CC8FF; border:1px solid rgba(156,200,255,.6); padding:6px 10px; }
.cp-bpt::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(111,177,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(111,177,255,.12) 1px, transparent 1px); background-size:28px 28px; }
.bpt-dims{ position:absolute; inset:12% 8% 40% 8%; width:84%; height:48%; fill:none; stroke:#9CC8FF; stroke-width:1; opacity:.75; }
.bpt-dims text{ fill:#9CC8FF; stroke:none; font-family:var(--f-mono); font-size:11px; text-anchor:middle; }
.bpt-dims path{ stroke-dasharray:1200; stroke-dashoffset:var(--dash,0); }
/* — Track Icons — */
.cp-trk{ --accent:#FF2A1F; }
.cp-trk .cp-name{ font-style:italic; font-stretch:92%; letter-spacing:-.04em; transform:skewX(-6deg); transform-origin:left bottom; }
.cp-trk .cp-deco span{ font-style:italic; font-size:clamp(40px, 8vw, 72px); font-stretch:70%; color:transparent; -webkit-text-stroke:1.5px #fff; }
.trk-curb{ position:absolute; left:0; right:0; bottom:0; height:10px; background:repeating-linear-gradient(90deg, #E10600 0 28px, #F5F5F5 28px 56px); z-index:2; }
.trk-timer{ position:absolute; left:24px; top:22px; font-size:11px; letter-spacing:.2em; color:#fff; background:rgba(0,0,0,.6); border-left:3px solid #E10600; padding:6px 10px; }
.trk-timer b{ color:var(--yellow); margin-left:8px; }
/* — Retro Futures — */
.cp-rtf{ --accent:#FF8A3D; }
.cp-rtf .cp-name{ font-stretch:110%; font-style:italic; background:linear-gradient(180deg, #FFFFFF 0%, #CFE7FF 45%, #3A6EA5 52%, #FFB36B 60%, #FF6A3D 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:clamp(36px, 9vw, 76px); }
.cp-rtf .cp-deco span{ font-size:clamp(64px, 12vw, 120px); font-style:italic; font-stretch:120%; background:linear-gradient(180deg, #FFD36B, #FF6A3D); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rtf-sun{ position:absolute; left:50%; bottom:38%; width:62%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:linear-gradient(180deg, rgba(255,179,107,.0), rgba(255,106,61,.0)); }
.rtf-grid{ position:absolute; left:-20%; right:-20%; bottom:0; height:42%; background-image:linear-gradient(rgba(54,197,240,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(54,197,240,.35) 1px, transparent 1px); background-size:48px 32px; transform:perspective(300px) rotateX(58deg); transform-origin:bottom; -webkit-mask-image:linear-gradient(180deg, transparent, #000 70%); mask-image:linear-gradient(180deg, transparent, #000 70%); opacity:.55; }

.cols-progress{ display:none; }
@media (min-width:1024px){
  .cols-pin{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-block:calc(var(--header-h) + 16px) 40px; overflow:hidden; }
  .cols-track{ overflow:visible; scroll-snap-type:none; gap:20px; padding-left:var(--gutter); }
  .cpanel{ flex:0 0 min(64vw, 920px); max-width:none; height:min(78vh, 760px); min-height:0; }
  .cpanel-intro{ flex-basis:min(38vw, 560px); padding-right:40px; }
  .cpanel-custom{ flex-basis:min(40vw, 560px); padding:56px; }
  .cp-body{ padding:40px; max-width:620px; }
  .cp-deco{ top:36px; right:36px; }
  .cols-progress{ display:block; position:absolute; left:var(--gutter); right:var(--gutter); bottom:28px; height:1px; background:var(--line); }
  .cols-progress span{ display:block; height:100%; background:var(--yellow); transform-origin:left; transform:scaleX(var(--cp,0)); }
  .no-hscroll .cols-track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px; }
}

/* =====================================================================
   GALERÍA
   ===================================================================== */
.gallery{ position:relative; padding-block:clamp(88px, 12vw, 160px); background:radial-gradient(ellipse 80% 60% at 50% 0%, #161C23 0%, var(--carbon) 70%); overflow:hidden; }
.spot-gallery{ background:radial-gradient(circle 420px at var(--mx,50%) var(--my,30%), rgba(255,230,170,.10), transparent 70%); z-index:0; }
.gallery .wrap{ position:relative; z-index:1; }
.gallery-head{ display:grid; gap:0; margin-bottom:clamp(48px, 8vw, 96px); }
.wall{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 16px; align-items:start; }
.work{ position:relative; }
.work-btn{ display:block; width:100%; text-align:left; perspective:900px; }
.work-frame{ display:block; position:relative; transform-style:preserve-3d; transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); transition:transform .5s var(--ease-out), box-shadow .5s; box-shadow:0 30px 50px -20px rgba(0,0,0,.8); }
.work-frame::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.18), transparent 55%); opacity:0; transition:opacity .4s; pointer-events:none; }
.work-btn:hover .work-frame::after, .work-btn:focus-visible .work-frame::after{ opacity:1; }
.work-frame img{ width:100%; height:auto; }
.work-btn::after{ content:""; display:block; height:40px; margin:-20px 10% 0; background:radial-gradient(ellipse at center, rgba(255,214,120,.18), transparent 70%); filter:blur(6px); pointer-events:none; }
.plaque{ margin-top:6px; padding:12px 0 0; border-top:1px solid var(--line); }
.plaque-name{ font-family:var(--f-display); font-weight:800; font-stretch:85%; text-transform:uppercase; font-size:clamp(15px, 1.5vw, 19px); line-height:1.15; }
.plaque dl{ display:grid; gap:2px; margin-top:8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-dim); }
.plaque dl div{ display:flex; gap:6px; }
.plaque dd{ color:var(--steel); }
.plaque-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:600; color:var(--yellow); }
.plaque-cta .ic{ transition:transform .3s var(--ease-out); }
.plaque-cta:hover .ic{ transform:translate(3px,-3px); }
.gallery-note{ margin-top:56px; font-size:11px; color:var(--steel-dim); max-width:70ch; letter-spacing:.04em; }
@media (min-width:768px){
  .wall{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(32px, 4vw, 64px) clamp(16px, 2vw, 32px); }
  .work-a{ grid-column:1 / span 4; margin-top:12vw; }
  .work-b{ grid-column:5 / span 4; }
  .work-c{ grid-column:9 / span 4; margin-top:18vw; }
  .work-d{ grid-column:2 / span 4; margin-top:-4vw; }
  .work-e{ grid-column:7 / span 4; margin-top:4vw; }
  .gallery-head{ grid-template-columns:1fr minmax(0, 420px); align-items:end; column-gap:48px; }
  .gallery-head .kicker{ grid-column:1 / -1; }
  .gallery-head .lead{ margin-top:0; }
}
@media (max-width:767.98px){ .work-b{ grid-column:1 / -1; width:78%; justify-self:center; } }

/* diálogos */
dialog{ padding:0; border:0; background:transparent; color:inherit; max-width:none; max-height:none; }
dialog::backdrop{ background:rgba(4,6,8,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
dialog[open]{ animation:dIn .45s var(--ease-out); }
@keyframes dIn{ from{ opacity:0; transform:translateY(20px) scale(.98);} }
.work-dialog{ width:min(1040px, calc(100vw - 2 * var(--gutter))); margin:auto; }
.wd-inner{ position:relative; display:grid; background:var(--ink-1); border:1px solid var(--line); max-height:calc(100svh - 32px); overflow:auto; }
.wd-media{ background:#0A0D10; display:grid; place-items:center; padding:24px; }
.wd-media img{ max-height:min(62svh, 720px); width:auto; box-shadow:0 30px 60px rgba(0,0,0,.7); }
.wd-body{ padding:28px 24px 32px; display:grid; gap:16px; align-content:center; justify-items:start; }
.wd-title{ font-family:var(--f-display); font-weight:900; font-stretch:78%; text-transform:uppercase; font-size:clamp(32px, 4vw, 52px); line-height:.92; }
.wd-specs{ display:grid; gap:6px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--steel); margin-bottom:8px; }
.wd-specs div{ display:flex; gap:10px; } .wd-specs dt{ color:var(--steel-dim); }
.wd-close{ position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; display:grid; place-items:center; background:rgba(8,11,14,.7); border:1px solid var(--line-strong); }
.wd-close .ic{ width:20px; height:20px; }
@media (min-width:860px){ .wd-inner{ grid-template-columns:1.1fr 1fr; } .wd-body{ padding:48px; } }

/* =====================================================================
   PROCESO
   ===================================================================== */
.process{ position:relative; padding-block:clamp(88px, 12vw, 160px); background:var(--paper); color:#0B0B0B; }
.process .kicker{ color:var(--blue); }
.process .lead{ color:#3B3F45; }
.process-grid{ display:grid; gap:48px; }
.process-counter{ margin-top:32px; font-size:13px; color:#6A6F76; }
.process-counter b{ font-size:44px; color:var(--blue); font-weight:700; letter-spacing:-.04em; }
.process-track{ position:relative; padding-left:60px; }
.track-line{ position:absolute; left:14px; top:0; bottom:0; width:12px; background:#2A2F35; border-radius:2px; overflow:hidden; }
.track-line::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:repeating-linear-gradient(180deg, rgba(255,255,255,.7) 0 14px, transparent 14px 28px); z-index:1; }
.track-fill{ position:absolute; inset:0; background:var(--yellow); transform-origin:top; transform:scaleY(var(--draw,1)); }
.steps{ display:grid; gap:clamp(48px, 9vh, 120px); padding-block:8px; }
.step{ position:relative; max-width:560px; }
.step::before{ content:""; position:absolute; left:-49px; top:12px; width:14px; height:14px; border-radius:50%; background:var(--paper); border:3px solid var(--blue); }
.step-n{ display:block; font-size:12px; letter-spacing:.2em; color:var(--blue); margin-bottom:10px; }
.step h3{ font-family:var(--f-display); font-weight:900; font-stretch:80%; text-transform:uppercase; font-size:clamp(30px, 4.6vw, 56px); line-height:.95; letter-spacing:-.01em; }
.step p{ margin-top:12px; color:#3B3F45; font-size:17px; max-width:46ch; }
.gsap-on .step{ opacity:.3; transition:opacity .5s; }
.gsap-on .step.is-active{ opacity:1; }
.gsap-on .step.is-active::before{ background:var(--yellow); border-color:#0B0B0B; }
@media (min-width:1024px){
  .process-grid{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:64px; }
  .process-head{ position:sticky; top:calc(var(--header-h) + 40px); align-self:start; }
  .process-track{ padding-left:96px; padding-block:12vh; }
  .track-line{ left:30px; }
  .step::before{ left:-73px; }
}

/* =====================================================================
   EXCLUSIVIDAD — tipografía cinética
   ===================================================================== */
.excl{ position:relative; padding-block:clamp(96px, 14vw, 200px); background:var(--carbon); overflow:hidden; }
.excl-lines{ display:grid; margin-top:24px; font-family:var(--f-display); font-weight:900; text-transform:uppercase; line-height:.84; letter-spacing:-.03em; }
.xl{ --wdth:72; display:block; white-space:nowrap; font-size:clamp(52px, 13vw, 230px); font-stretch:calc(var(--wdth) * 1%); font-variation-settings:"wdth" var(--wdth); padding-inline:var(--gutter); }
.xl-1{ color:transparent; -webkit-text-stroke:1.5px rgba(243,241,236,.55); }
.xl-2{ color:var(--paper); text-align:right; }
.xl-3{ color:var(--yellow); font-style:italic; }
.excl-copy{ margin-top:clamp(40px, 6vw, 80px); display:grid; }
.excl-copy p{ max-width:52ch; font-size:clamp(18px, 1.8vw, 24px); line-height:1.5; color:#D9D6CF; justify-self:end; }

/* =====================================================================
   EXPERIENCIA DIGITAL / ART ID
   ===================================================================== */
.digital{ position:relative; padding-block:clamp(88px, 12vw, 160px); background:var(--ink-1); overflow:hidden; isolation:isolate; }
.digital-bg{ position:absolute; inset:0; z-index:-1; opacity:.28; }
.digital-bg img{ width:100%; height:100%; object-fit:cover; }
.digital-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--ink-1), rgba(12,16,21,.6) 40%, var(--ink-1)); }
.digital-grid{ display:grid; gap:56px; }
.nfc-visual{ position:relative; height:clamp(340px, 90vw, 560px); max-width:560px; width:100%; justify-self:center; }
.nfc-frame{ position:absolute; left:6%; top:4%; width:58%; aspect-ratio:4/5; border:12px solid #0D0F11; box-shadow:inset 0 0 0 1px #2C3036, 0 40px 80px rgba(0,0,0,.6); transform:rotate(-3deg); }
.nfc-frame img{ width:100%; height:100%; object-fit:cover; }
.nfc-spot{ position:absolute; right:12%; bottom:12%; width:28px; height:28px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 6px rgba(255,203,35,.25), 0 0 30px rgba(255,203,35,.8); }
.nfc-rings{ position:absolute; left:48%; top:52%; width:0; height:0; }
.nfc-rings i{ position:absolute; left:-60px; top:-60px; width:120px; height:120px; border-radius:50%; border:1.5px solid var(--yellow); opacity:0; animation:ring 2.4s var(--ease-out) infinite; }
.nfc-rings i:nth-child(2){ animation-delay:.8s; } .nfc-rings i:nth-child(3){ animation-delay:1.6s; }
@keyframes ring{ 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(2.2); opacity:0; } }
.nfc-phone{ position:absolute; right:4%; bottom:2%; width:44%; aspect-ratio:9/18.5; border-radius:28px; background:#05070A; border:2px solid #2E353D; box-shadow:0 0 0 6px #12171C, 0 50px 80px rgba(0,0,0,.7); transform:rotate(8deg); padding:10px; }
.np-notch{ position:absolute; left:50%; top:10px; width:34%; height:14px; transform:translateX(-50%); border-radius:10px; background:#05070A; z-index:2; }
.np-screen{ position:relative; height:100%; border-radius:20px; background:linear-gradient(180deg, #0E2442 0%, #0A1626 60%, #080B0E 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 12px; overflow:hidden; text-align:center; }
.np-ic{ width:38%; height:auto; color:var(--yellow); }
.np-id{ font-size:clamp(9px, 1.6vw, 12px); color:var(--yellow); letter-spacing:.06em; font-weight:700; }
.np-label{ font-size:11px; color:var(--steel); }
.np-bar{ display:block; width:70%; height:6px; border-radius:3px; background:rgba(255,255,255,.12); }
.np-bar.short{ width:46%; }
.digital-copy{ max-width:620px; }
.dig-points{ display:grid; gap:18px; margin-top:36px; }
.dig-points li{ display:grid; grid-template-columns:140px 1fr; gap:16px; padding-top:16px; border-top:1px solid var(--line); }
.dig-points h3{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); font-weight:700; }
.dig-points p{ color:var(--steel); font-size:15px; }
.artid-anatomy{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-top:36px; }
.artid-anatomy span{ display:grid; gap:6px; }
.artid-anatomy b{ font-size:clamp(18px, 3vw, 26px); letter-spacing:.06em; padding:8px 12px; border:1px solid var(--line-strong); background:rgba(8,11,14,.6); }
.artid-anatomy span:first-child b{ color:var(--yellow); border-color:rgba(255,203,35,.5); }
.artid-anatomy small{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-dim); }
.artid-anatomy i{ font-style:normal; color:var(--steel-dim); padding-top:10px; }
.artid-form{ margin-top:36px; padding:24px; background:rgba(8,11,14,.75); border:1px solid var(--line-strong); border-left:3px solid var(--yellow); }
.af-title{ font-family:var(--f-display); font-weight:800; font-stretch:85%; text-transform:uppercase; font-size:22px; }
.af-label{ display:block; margin-top:14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }
.af-row{ display:flex; gap:8px; margin-top:8px; }
.af-row input{ flex:1; min-width:0; height:56px; padding:0 16px; background:#05070A; border:1px solid var(--line-strong); border-radius:var(--radius); font-family:var(--f-mono); font-size:clamp(15px, 2vw, 18px); letter-spacing:.08em; text-transform:uppercase; color:var(--paper); }
.af-row input::placeholder{ color:#4E5761; }
.af-row input:focus{ outline:none; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,203,35,.2); }
.af-row input[aria-invalid="true"]{ border-color:#FF6B5A; }
.af-row .btn{ min-height:56px; }
.af-help{ margin-top:10px; font-size:13px; color:var(--steel-dim); }
.af-status{ margin-top:10px; min-height:1.4em; font-size:14px; font-weight:600; }
.af-status[data-state="error"]{ color:#FF8A7A; }
.af-status[data-state="ok"]{ color:var(--yellow); }
.af-status[data-state="busy"]{ color:var(--steel); }
.af-status a{ color:var(--yellow); text-decoration:underline; }
.disclaimer{ margin-top:16px; font-size:11px; color:var(--steel-dim); letter-spacing:.02em; }
.digital-copy .text-link{ margin-top:18px; }
@media (min-width:1024px){ .digital-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(40px, 6vw, 96px); } .nfc-visual{ height:min(600px, 70vh); } }
@media (max-width:420px){ .dig-points li{ grid-template-columns:1fr; gap:4px; } .af-row{ flex-direction:column; } }

/* =====================================================================
   SOLICITA TU PIEZA
   ===================================================================== */
.request{ position:relative; padding-block:clamp(88px, 12vw, 160px); background:var(--carbon); border-top:1px solid var(--line); }
.request-grid{ display:grid; gap:48px; }
.request-direct{ margin-top:32px; color:var(--steel); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.ticket{
  position:relative; background:var(--paper); color:#0B0B0B; padding:28px 20px 24px; border-radius:var(--radius);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
.ticket::before,.ticket::after{ content:""; position:absolute; top:86px; width:20px; height:20px; border-radius:50%; background:var(--carbon); }
.ticket::before{ left:-10px; } .ticket::after{ right:-10px; }
.ticket-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding-bottom:20px; margin-bottom:28px; border-bottom:2px dashed #C9C4BA; color:#4B5057; }
.ticket-head span:first-child{ color:var(--blue); font-weight:700; }
.field{ display:grid; gap:8px; margin:0 0 22px; padding:0; border:0; min-width:0; }
.field label, .field legend{ font-weight:700; font-size:14px; letter-spacing:.01em; padding:0; margin-bottom:2px; }
.field small{ font-weight:400; color:#6A6F76; }
.field input[type="text"], .field textarea{
  width:100%; min-height:52px; padding:12px 14px; background:#FFFFFF; border:1.5px solid #CFCAC0; border-radius:var(--radius);
  font-size:16px; color:#0B0B0B; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(19,62,112,.18); }
.field input[aria-invalid="true"]{ border-color:#C62828; }
.field-err{ font-size:13px; color:#B3261E; min-height:0; }
.field-err:empty{ display:none; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-opt{ position:relative; }
.chip-opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip-opt span{ display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:8px 14px; border:1.5px solid #CFCAC0; border-radius:40px; font-size:14px; font-weight:600; background:#fff; transition:background .2s, border-color .2s, color .2s; }
.chip-opt input:checked + span{ background:#0B0B0B; color:var(--yellow); border-color:#0B0B0B; }
.chip-opt input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:2px; }
.frame-chip i{ width:14px; height:14px; border-radius:2px; border:1.5px solid #0B0B0B; }
.fc-1 i{ background:#111; } .fc-2 i{ background:#fff; } .fc-3 i{ background:#8A8F96; } .fc-4 i{ background:linear-gradient(135deg, #111 33%, #fff 33% 66%, #8A8F96 66%); }
.field-inline{ margin-bottom:22px; }
.toggle{ display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:15px; cursor:pointer; position:relative; }
.toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle-ui{ width:48px; height:28px; border-radius:20px; background:#CFCAC0; position:relative; transition:background .25s; }
.toggle-ui::after{ content:""; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .3s var(--ease-out); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.toggle input:checked + .toggle-ui{ background:var(--blue); }
.toggle input:checked + .toggle-ui::after{ transform:translateX(20px); }
.toggle input:focus-visible + .toggle-ui{ outline:2px solid var(--blue); outline-offset:2px; }
.ticket-notice{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#4B5057; margin:6px 0 18px; padding:12px; background:#E9E5DC; border-radius:var(--radius); }
.ticket-notice .ic{ width:18px; height:18px; color:#1E7F4F; margin-top:2px; }
.ticket .btn-yellow{ --hover:#0B0B0B; --hover-fg:var(--yellow); }
.ticket-noscript{ margin-top:14px; font-size:14px; }
.ticket-noscript a{ color:var(--blue); font-weight:700; text-decoration:underline; }
@media (min-width:768px){ .ticket{ padding:40px 40px 36px; } }
@media (min-width:1024px){ .request-grid{ grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:clamp(48px, 6vw, 96px); align-items:start; } .request-head{ position:sticky; top:calc(var(--header-h) + 40px); } }

.wa-dialog{ width:min(560px, calc(100vw - 2 * var(--gutter))); margin:auto; }
.wad-inner{ position:relative; background:var(--ink-1); border:1px solid var(--line-strong); border-top:3px solid var(--yellow); padding:32px 24px 24px; }
.wad-inner h3{ font-family:var(--f-display); font-weight:900; font-stretch:80%; text-transform:uppercase; font-size:clamp(28px, 4vw, 40px); line-height:.95; padding-right:40px; }
.wad-lead{ margin-top:10px; color:var(--steel); font-size:15px; }
.wad-msg{ margin:20px 0; padding:16px; max-height:42svh; overflow:auto; background:#0A2A1C; border:1px solid #1E5A3C; border-radius:10px 10px 10px 2px; color:#E6F5EC; font-family:var(--f-body); font-size:15px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.wad-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.wad-actions .btn{ flex:1 1 200px; }

/* =====================================================================
   NOSOTROS
   ===================================================================== */
.about{ position:relative; padding-block:clamp(88px, 12vw, 180px); overflow:hidden; isolation:isolate; background:var(--carbon); }
.about-bg{ position:absolute; inset:0; z-index:-1; opacity:.35; }
.about-bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
.about-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--carbon) 0%, rgba(8,11,14,.75) 50%, rgba(8,11,14,.9) 100%), linear-gradient(180deg, var(--carbon), transparent 20%, transparent 80%, var(--carbon)); }
.about-grid{ display:grid; gap:56px; align-items:center; }
.about-figure{ position:relative; width:min(78%, 380px); justify-self:center; }
.about-plate{ position:absolute; inset:12% -14% -10% 18%; background:var(--yellow); z-index:-1; }
.about-figure img{ width:100%; box-shadow:0 40px 70px rgba(0,0,0,.6); }
.about-figure figcaption{ margin-top:14px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#0B0B0B; position:relative; padding-left:calc(18% + 12px); }
.about-copy{ max-width:620px; }
.about-copy > p:not(.kicker):not(.lead){ color:#C9C5BD; font-size:17px; }
.about-sign{ margin-top:32px!important; font-family:var(--f-display); font-style:italic; font-weight:800; font-stretch:90%; font-size:clamp(26px, 3vw, 38px); color:var(--yellow)!important; text-transform:uppercase; letter-spacing:-.01em; }
@media (min-width:1024px){ .about-grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(56px, 8vw, 140px); } }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ position:relative; padding-top:clamp(88px, 12vw, 160px); padding-bottom:calc(32px + env(safe-area-inset-bottom)); overflow:hidden; isolation:isolate; border-top:1px solid var(--line); }
.footer-bg{ position:absolute; inset:0; z-index:-1; opacity:.5; }
.footer-bg img{ width:100%; height:100%; object-fit:cover; }
.footer-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--carbon) 0%, rgba(8,11,14,.7) 40%, var(--carbon) 100%); }
.footer-cta{ display:grid; justify-items:start; gap:8px; padding-bottom:clamp(64px, 9vw, 120px); border-bottom:1px solid var(--line); }
.footer-title{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-stretch:72%; font-size:clamp(64px, 16vw, 240px); line-height:.84; letter-spacing:-.03em; margin-bottom:28px; }
.footer-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 24px; padding-block:56px; }
.fc-brand{ grid-column:1 / -1; }
.fc-brand img{ width:min(280px, 80%); }
.fc-brand p{ margin-top:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.fc-t{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; }
.fc ul + .fc-t{ margin-top:28px; }
.fc li + li{ margin-top:8px; }
.fc a{ display:inline-flex; align-items:center; gap:8px; color:#D3CFC7; transition:color .3s; min-height:28px; }
.fc a:hover{ color:var(--yellow); }
.fc-lang a[aria-current="page"]{ color:var(--paper); font-weight:700; }
.footer-legal{ display:grid; gap:12px; padding-top:24px; border-top:1px solid var(--line); font-size:12px; color:var(--steel-dim); }
.footer-disclaimer{ max-width:90ch; font-size:12px; }
.to-top{ color:var(--steel); justify-self:start; padding:6px 0; }
.to-top:hover{ color:var(--yellow); }
@media (min-width:900px){
  .footer-cols{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .fc-brand{ grid-column:auto; }
  .footer-legal{ grid-template-columns:auto 1fr auto; align-items:start; gap:32px; }
}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); z-index:95;
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 16px 0 14px; border-radius:30px;
  background:#0E1318; color:var(--paper); border:1px solid var(--line-strong); box-shadow:0 12px 30px rgba(0,0,0,.45);
  font-family:var(--f-display); font-weight:700; font-stretch:88%; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  transform:translateY(0); opacity:1; transition:transform .5s var(--ease-out), opacity .4s, background .3s, color .3s;
}
.wa-float .ic{ width:22px; height:22px; color:#3DDC84; }
.wa-float:hover{ background:var(--yellow); color:#0B0B0B; }
.wa-float:hover .ic{ color:#0B0B0B; }
.wa-float.is-hidden{ transform:translateY(140%); opacity:0; pointer-events:none; }
@media (max-width:599px){ .wa-float{ width:56px; height:56px; padding:0; justify-content:center; } .wa-float-label{ display:none; } }

/* ---------- revelados genéricos (solo con GSAP activo) ---------- */
.gsap-on [data-reveal]{ will-change:transform, opacity; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .ticker-track{ animation:none; }
  .nfc-rings i{ animation:none; opacity:.4; transform:scale(1.2); }
}

/* ---------- impresión ---------- */
@media print{
  .site-header,.wa-float,.intro,.progress,.side-index,.ticker,.mobile-menu{ display:none!important; }
  body{ background:#fff; color:#000; }
}