/* ============================================================
   HYPERCARS — page-specific styles
   Extends tokens.css + styles.css design system
   ============================================================ */

/* ---- Standalone nav: brand + single CTA, no links back into Black Diamond ---- */
.hc-nav__brand { display: inline-flex; align-items: baseline; gap: 0.6em; }
.hc-nav__wordmark {
  font-family: var(--font-sans); font-size: var(--t-sm); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-dim);
}
@media (max-width: 560px) { .hc-nav__wordmark { display: none; } }

/* ---- Cookie banner ---- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: oklch(10% 0.006 60 / 0.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  padding: clamp(1rem, 2vw, 1.4rem) var(--gutter);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.cookie-banner__text { color: var(--ink-dim); font-size: var(--t-sm); max-width: 62ch; margin: 0; }
.cookie-banner__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.cookie-banner__actions .btn { padding: 0.7em 1.4em; font-size: var(--t-sm); }

/* ============ HERO (video background) ============ */
/* Shrunk from 100svh so the lead form (moved right below it) sits above the fold
   without scrolling, on both desktop and mobile — CRO parity with the Fuengirola
   Palace landing, where the form lives inside the first viewport. */
.hc-hero {
  position: relative; min-height: 64svh; display: flex; flex-direction: column;
  justify-content: center; padding: 0 var(--gutter);
  padding-top: 9vh; padding-bottom: 5vh; overflow: hidden;
}
/* Mobile hero image is a tall 9:16 portrait (logo/headline in the upper half, car in the
   lower half) — a very short box only shows the empty wood-panel background between them,
   so mobile needs more height than desktop's 64svh to keep both readable. */
@media (max-width: 720px) { .hc-hero { min-height: 76svh; padding-top: 5vh; padding-bottom: 2vh; } }
.hc-hero__media {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 90% at 72% 18%, oklch(26% 0.02 70 / 0.9), transparent 55%), linear-gradient(135deg, oklch(17% 0.008 60), var(--void) 70%);
}
.hc-hero__video, .hc-hero__img {
  position: absolute; inset: 0; width: 100%; height: 116%; object-fit: cover;
  object-position: center 30%; filter: saturate(0.9) contrast(1.05) brightness(0.55);
}
@media (max-width: 720px) { .hc-hero__img { object-position: center 24%; } }
.hc-hero__img { filter: saturate(1) contrast(1.05) brightness(0.95); z-index: -1; }
.hc-hero .hero__veil { opacity: 0.2; }
.hc-hero__video { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .hc-hero__video { display: none; } }

/* ============ STAT BAR (light mode, to stand out) ============ */
.hc-stats {
  border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
  background: var(--bg-light);
}
.hc-stats__grid {
  display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .hc-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.hc-stat { display: grid; gap: 0.3em; }
.hc-stat__label {
  font-size: var(--t-mono); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--ink-on-light-dim);
}
.hc-stat__value {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-h4); color: var(--gold-deep);
}
.hc-stat__sub { font-size: var(--t-sm); color: var(--ink-on-light-dim); }

/* ============ EL ACTIVO — full-bleed split hero ============ */
.hc-activo-hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-5) var(--gutter); overflow: hidden;
}
.hc-activo-hero__media { position: absolute; inset: 0; z-index: -1; }
.hc-activo-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: saturate(0.92) brightness(0.72);
}
.hc-activo-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(8% 0.006 60 / 0.6) 0%, oklch(8% 0.006 60 / 0.15) 45%, oklch(8% 0.006 60 / 0.75) 100%);
}
.hc-activo-hero__content { position: relative; z-index: 1; max-width: 46rem; }
.hc-activo-hero .kicker { color: var(--gold); }

/* ============ EL ACTIVO — info (light) ============ */
.hc-lede {
  font-size: var(--t-lead); font-weight: 300; color: var(--ink-on-light-dim);
  max-width: 56ch; margin-inline: auto; text-align: center; margin-bottom: var(--space-5);
}
.philo-grid strong { color: var(--ink-on-light); font-weight: 500; }

/* ============ FABRICANTE credentials (reuse .sectors, bento: 2 featured + 6 medium) ============ */
.hc-credentials { margin-top: var(--space-2); }
/* Cancels the generic .sector:nth-child(1..5) { grid-column: span N } rule in styles.css
   (written for index.html's 5-item sectors grid) which would otherwise also match these
   8 credential cards and force the wrong ones full-width. */
.hc-credentials .sector { grid-column: auto; }
@media (min-width: 1080px) {
  .hc-credentials.sectors { grid-template-columns: repeat(6, 1fr); }
  .hc-credentials .sector:nth-child(1),
  .hc-credentials .sector:nth-child(2) { grid-column: span 3; grid-row: span 2; }
  .hc-credentials .sector:nth-child(n+3) { grid-column: span 2; }
}
.hc-credentials .sector__no { text-transform: uppercase; }

/* .sector__veil and .sector__content sit above .sector__bg and intercept clicks before
   they reach the <img data-lightbox>. Scoped to .hc-credentials only — index.html's
   sectors have no lightbox and must keep their default (harmless) hit-testing. */
.hc-credentials .sector__veil,
.hc-credentials .sector__content { pointer-events: none; }
.hc-credentials .sector__bg { pointer-events: auto; }

/* ============ SPEC LIST (reuse .steps, 3-up on desktop) ============ */
.hc-spec-list { counter-reset: none; }
@media (min-width: 720px) { .hc-spec-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-4); } }
.hc-spec-list .step__no { min-width: 4.4rem; font-size: var(--t-h4); }

/* ============ ATELIER FILM ============ */
.hc-atelier { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.hc-overview {
  border-radius: 3px; border: 1px solid var(--line); overflow: hidden; margin-top: var(--space-5);
}
.hc-overview img { width: 100%; height: auto; display: block; filter: saturate(0.92) brightness(0.92); }
.hc-overview figcaption {
  padding: var(--space-3) var(--space-3) var(--space-4); color: var(--ink-dim); font-size: var(--t-sm);
  border-top: 1px solid var(--line); background: var(--void-soft);
}
.hc-film {
  position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden;
  border-radius: 3px; border: 1px solid var(--line); margin-block: var(--space-5);
  background: var(--void-soft);
}
.hc-film__video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.82); }
.hc-film__play {
  position: absolute; inset: 0; margin: auto; width: 4.6rem; height: 4.6rem;
  border-radius: 50%; border: 1px solid var(--line-strong); background: oklch(13% 0.006 60 / 0.55);
  backdrop-filter: blur(6px); cursor: pointer; display: grid; place-items: center;
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.hc-film__play span {
  width: 0; height: 0; margin-left: 4px;
  border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; border-left: 1.05rem solid var(--gold);
}
.hc-film__play:hover { border-color: var(--gold); transform: scale(1.06); }
.hc-film.is-playing .hc-film__play { opacity: 0; pointer-events: none; }

.hc-gallery { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .hc-gallery { grid-template-columns: repeat(3, 1fr); } }
.hc-gallery__item {
  overflow: hidden; border-radius: 3px; border: 1px solid var(--line); aspect-ratio: 4 / 3;
  transition: border-color var(--dur-slow) var(--ease-out);
}
.hc-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.85);
  transition: transform var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out);
}
@media (hover: hover) {
  .hc-gallery__item:hover { border-color: var(--gold); }
  .hc-gallery__item:hover img { transform: scale(1.06); filter: saturate(1) brightness(0.95); }
}

/* ============ FINAL CTA background image ============ */
.hc-access { position: relative; overflow: hidden; }
.hc-access__media { position: absolute; inset: 0; z-index: -1; opacity: 0.22; }
.hc-access__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.5); }

/* ============ REQUIRED FIELD ASTERISK ============ */
.req { color: var(--gold); margin-left: 0.2em; }

/* ============ PRIVACY CHECKBOX ============ */
.field--checkbox { margin-top: 0.2rem; }
/* .field label (styles.css) is a floating-label rule meant for text inputs — it also
   matches our <label class="checkbox">, absolutely positioning it out of flow and
   causing it to overlap the submit button. Reset it here with higher specificity. */
.field--checkbox label.checkbox {
  position: static; top: auto; left: auto; pointer-events: auto; transform: none;
}
.checkbox {
  display: flex; align-items: flex-start; gap: 0.7em; cursor: pointer;
  font-size: var(--t-sm); color: var(--ink-dim); line-height: 1.5;
}
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox__box {
  flex-shrink: 0; width: 1.15em; height: 1.15em; margin-top: 0.2em;
  border: 1px solid var(--line-strong); border-radius: 2px; position: relative;
  transition: border-color var(--dur-mid) var(--ease-out), background-color var(--dur-mid) var(--ease-out);
}
.checkbox input:checked + .checkbox__box { background: var(--gold); border-color: var(--gold); }
.checkbox input:checked + .checkbox__box::after {
  content: ""; position: absolute; left: 50%; top: 42%; width: 4px; height: 8px;
  border: solid var(--void); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--gold); outline-offset: 2px; }
.checkbox a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.checkbox a:hover { color: var(--gold); }
.field--checkbox.is-invalid .checkbox__box { border-color: oklch(58% 0.14 25); }

/* ============ LIGHTBOX ============ */
.has-lightbox { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: oklch(8% 0.006 60 / 0.92); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out);
  padding: clamp(1.5rem, 5vw, 4rem);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
body.lightbox-lock { overflow: hidden; }
.lightbox__figure { max-width: min(92vw, 1400px); max-height: 88vh; display: grid; gap: var(--space-2); justify-items: center; }
.lightbox__img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain;
  border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-lift);
  transform: scale(0.97); transition: transform var(--dur-slow) var(--ease-out);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption { color: var(--ink-dim); font-size: var(--t-sm); text-align: center; max-width: 60ch; margin: 0; }
.lightbox__caption[hidden] { display: none; }

.lightbox__close, .lightbox__nav {
  position: absolute; background: oklch(13% 0.006 60 / 0.55); border: 1px solid var(--line-strong);
  color: var(--ink); border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 2.6rem; height: 2.6rem; font-size: 1.6rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.8rem; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }
@media (max-width: 640px) { .lightbox__nav { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; } }

.hc-maker__logo { height: 0.72em; width: auto; vertical-align: 0.02em; margin-right: 0.2em; border-radius: 2px; }

/* ============ FABRICANTE — model lineup ============ */
.hc-models {
  list-style: none; padding: 0; margin: var(--space-5) auto var(--space-6);
  display: grid; grid-template-columns: repeat(2, 1fr);
  /* px/vw-driven, not rem: on real phones with system text-size scaling turned up, a
     rem-based gap inflates and eats into the fluid (1fr) column width, making the
     thumbnails render visibly smaller with more space between them than in any
     desktop/devtools preview at default text size. */
  gap: clamp(8px, 2.4vw, 24px);
  max-width: 64rem;
}
@media (min-width: 720px) { .hc-models { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.hc-model__link {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 3px; border: 1px solid var(--line);
}
.hc-model__img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) brightness(0.82);
  transition: transform var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out);
}
.hc-model__link::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(8% 0.006 60 / 0.85), transparent 55%);
}
.hc-model__name {
  position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); z-index: 1;
  font-family: var(--font-display); font-size: var(--t-h5, 1.3rem); color: var(--ink);
  letter-spacing: var(--tracking-wide); text-align: center;
}
@media (hover: hover) {
  .hc-model__link:hover .hc-model__img { transform: scale(1.06); filter: saturate(1) brightness(0.95); }
}

/* ============ EL PROYECTO — build progress ============ */
.hc-progress { margin-block: var(--space-4); max-width: 32rem; }
.hc-progress__head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5em;
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-dim);
}
.hc-progress__value { font-family: var(--font-display); font-size: var(--t-h5, 1.3rem); color: var(--gold); letter-spacing: 0; text-transform: none; }
.hc-progress__bar {
  width: 100%; height: 6px; border-radius: 3px; background: oklch(100% 0 0 / 0.12); overflow: hidden;
}
.hc-progress__bar span { display: block; height: 100%; background: var(--gold); border-radius: 3px; }

/* ============ INLINE CTA BUTTONS (mid-page) ============ */
.hc-cta-inline { display: inline-flex; margin-top: var(--space-5); }

/* ============ MANIFESTO — tighter type (scoped, index.html keeps its own scale) ============ */
#division.manifesto .manifesto__lede p {
  font-size: clamp(1.5rem, 1.25rem + 1.4vw, 2.3rem); line-height: 1.25;
}
#division.manifesto .manifesto__body p { max-width: 46ch; }

/* ============ FINAL CTA + FORM — light mode, to stand out ============ */
.hc-access {
  background: var(--bg-light);
  border-top-color: var(--line-dark);
}
.hc-access__media { display: none; }
.hc-access .access__title { color: var(--ink-on-light); }
.hc-access .access__title em { color: var(--gold-deep); }
.hc-access .access__intro p { color: var(--ink-on-light-dim); }
.hc-access .access__welcome { color: var(--ink-on-light) !important; }
.hc-access .access__welcome span { color: var(--gold-deep); }
.hc-access .form {
  background: oklch(100% 0 0 / 0.6); border-color: var(--line-dark); backdrop-filter: blur(6px);
}
.hc-access .field input,
.hc-access .field select,
.hc-access .field textarea { color: var(--ink-on-light); border-bottom-color: var(--line-dark); }
.hc-access .field select option { background: var(--porcelain); color: var(--ink-on-light); }
.hc-access .field label { color: var(--ink-on-light-dim); }
.hc-access .field label.label--static,
.hc-access .field input:focus + label,
.hc-access .field textarea:focus + label,
.hc-access .field input:not(:placeholder-shown) + label,
.hc-access .field textarea:not(:placeholder-shown) + label { color: var(--gold-deep); }
.hc-access .checkbox { color: var(--ink-on-light-dim); }
.hc-access .checkbox a { color: var(--ink-on-light); }
.hc-access .checkbox__box { border-color: var(--line-dark); }
.hc-access .form__note { color: var(--ink-on-light-dim); }
.hc-access .form__success h3 { color: var(--ink-on-light); }
.hc-access .form__success p { color: var(--ink-on-light-dim); }
.hc-access .access__intro .kicker { color: var(--gold-deep); }

/* ============ COMPACT FORM — keeps hero + form together above the fold ============ */
.hc-access { padding-block: clamp(1.4rem, 3vw, 2.4rem); }
.hc-access .access__grid { gap: var(--space-3); }
@media (min-width: 920px) { .hc-access .access__grid { gap: var(--space-4); } }
.hc-access .access__title { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: var(--space-2); }
.hc-access .access__intro p { margin-bottom: var(--space-1); font-size: var(--t-sm); }
.hc-access .access__welcome { font-size: var(--t-body); }
.hc-access .form { padding: clamp(1.1rem, 2.2vw, 1.6rem); gap: var(--space-2); }
.hc-access .field input,
.hc-access .field select,
.hc-access .field textarea { padding: 1.05rem 0 0.4rem; }
.hc-access .field label { top: 1.05rem; }
.hc-access .field input:focus + label, .hc-access .field textarea:focus + label,
.hc-access .field input:not(:placeholder-shown) + label, .hc-access .field textarea:not(:placeholder-shown) + label,
.hc-access .field label.label--static { transform: translateY(-1.05rem) scale(0.72); }

/* Mobile: form first (order -1, right under the hero, no scrolling through copy first),
   long description hidden to keep the form + submit button within the first viewport —
   same "form above the fold" pattern as the Fuengirola Palace landing. */
@media (max-width: 720px) {
  .hc-access .access__grid { gap: var(--space-2); }
  .hc-access .form { order: -1; }
  .hc-access .access__intro { text-align: center; }
  .hc-access .access__intro p:not(.access__welcome) { display: none; }
  .hc-access .access__title { font-size: clamp(1.5rem, 1.2rem + 3vw, 2rem); }
}

/* ============ CLOSING BAND (bottom CTA — scrolls up to the single form) ============ */
.hc-closing { padding-block: var(--section-y); border-top: 1px solid var(--line); text-align: center; }
.hc-closing__inner { max-width: 40rem; margin-inline: auto; display: grid; justify-items: center; }
.hc-closing p { color: var(--ink-dim); margin-top: var(--space-2); margin-bottom: var(--space-4); max-width: 44ch; }
/* .footer__legal now lives in styles.css (shared with index.html) */