/* =========================================================
   NOVOA MOTORS — estilos
   Monocromo puro. Negro absoluto + blanco + gris neutro.
   Inter (fina, con espaciado) + IBM Plex Mono (datos/eyebrows).
   Sin color de acento — dirección creativa de Juan.
   ========================================================= */

:root {
  --black: #050505;
  --black-2: #0d0d0d;
  --black-3: #161616;
  --white: #FFFFFF;
  --grey: #8a8a8a;      /* texto secundario, neutro, sin tinte */
  --grey-dim: #4a4a4a;  /* líneas, bordes, terciario */

  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;

  --wrap: 1180px;
  --radius: 4px; /* precisión, no redondeos suaves */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: transparent; /* deja ver .bg-canvas (fixed, detrás de todo) */
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img { max-width: 100%; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.wrap--narrow { max-width: 680px; }

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 300; letter-spacing: -0.02em; }
.heading { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 300; margin-bottom: .6em; }
h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }
p { margin: 0 0 1em; color: var(--grey); font-weight: 300; }

a { color: inherit; text-decoration: none; }

/* ---------- Editorial type ---------- */
.lead {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--white);
  font-weight: 300;
  max-width: 38ch;
  line-height: 1.45;
  margin-bottom: .9em;
}
.body { font-size: 1rem; max-width: 60ch; color: var(--grey); }
.body--quiet { font-size: .9rem; opacity: .7; }
.under {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--grey-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ---------- Grain overlay ---------- */
.grain {
  /* sin mix-blend-mode: con el canvas de fondo cambiando en cada scroll,
     el blend-mode obligaba a remezclar esta capa completa en cada frame.
     Con opacity sola (ya muy baja) el navegador puede componerla en GPU
     sin recalcularla contra lo de abajo. */
  position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 16px 30px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: .88rem;
  letter-spacing: .02em;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap; border: 1px solid var(--white); cursor: pointer;
}
.btn:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.btn--primary { background: var(--white); color: var(--black); }
.btn--primary:hover { transform: translateY(-2px); background: #e8e8e8; }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--grey-dim); padding: 11px 22px; font-size: .8rem; }
.btn--ghost:hover { border-color: var(--white); }
.btn--text { border: none; padding: 16px 0; text-decoration: underline; text-underline-offset: 4px; }
.btn--card { display: block; text-align: center; margin-top: 22px; padding: 12px; border: 1px solid var(--grey-dim); font-size: .8rem; transition: border-color .2s ease; }
.btn--card:hover { border-color: var(--white); }

.tag {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
  border: 1px solid var(--grey-dim); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(5,5,5,.7); border-bottom: 1px solid rgba(255,255,255,.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__word { font-family: var(--font-body); font-weight: 500; letter-spacing: .06em; font-size: .92rem; color: var(--white); }
.brand__word span { color: var(--grey); font-weight: 300; }
.site-nav { display: none; gap: 32px; font-size: .85rem; color: var(--grey); }
.site-nav a { transition: color .15s ease; }
.site-nav a:hover { color: var(--white); }
@media (min-width: 860px) { .site-nav { display: flex; } }

/* ---------- Fondo cinematográfico fijo (los 118 frames ocupan TODA la web) ---------- */
.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }

/* ---------- HERO (solo texto — el video vive en .bg-canvas) ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero__copy { max-width: 620px; text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-fade { opacity: 0; transition: opacity 1.4s ease; }
.hero-fade.is-in { opacity: 1; }
.hero__lead { font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 46ch; color: var(--grey); margin: 18px auto 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }

/* ---------- Sections ----------
   Fondo translúcido (no negro sólido): así el video de fondo (.bg-canvas)
   se sigue viendo/respirando detrás del contenido en TODA la página, no
   solo en el hero. La opacidad es suficiente para que el texto blanco
   siga siendo legible sobre el video (que ya es mayormente oscuro). */
.section { padding: 110px 0; position: relative; background: rgba(5,5,5,.74); }
.section--alt { background: rgba(13,13,13,.82); }
.section__head { max-width: 620px; margin-bottom: 52px; }

/* ---------- Diagnóstico: lista de problemas ---------- */
.problem-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 0; grid-template-columns: 1fr; max-width: 640px; }
@media (min-width: 640px) { .problem-list { grid-template-columns: 1fr 1fr; } }
.problem-list li {
  padding: 20px 0; border-top: 1px solid var(--grey-dim); font-size: .98rem; color: var(--white);
  display: flex; align-items: baseline; gap: 12px;
}
.problem-list li::before { content: "—"; color: var(--grey); flex-shrink: 0; }

/* ---------- Proceso: flujo de nodos ---------- */
.flow { margin-top: 56px; overflow-x: auto; }
.flow__track { display: flex; align-items: flex-start; gap: 0; min-width: 760px; }
.flow__node { flex: 1; text-align: center; position: relative; padding-top: 26px; }
.flow__dot {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--black); border: 1.5px solid var(--grey-dim);
  transition: background .4s ease, border-color .4s ease;
}
.chart.is-drawn .flow__dot { background: var(--white); border-color: var(--white); }
.flow__line { position: absolute; top: 0; left: 50%; width: 100%; height: 1px; background: var(--grey-dim); z-index: -1; }
.flow__node:last-child .flow__line { display: none; }
.flow__num { font-family: var(--font-mono); font-size: .68rem; color: var(--grey); display: block; margin-bottom: 8px; }
.flow__node h3 { font-size: .92rem; margin: 0; color: var(--white); }

/* ---------- Búsqueda inteligente (ilustración SVG) ---------- */
.search-illustration { margin: 48px auto 0; max-width: 420px; }
.search-illustration svg { width: 100%; height: auto; }
.search-illustration circle, .search-illustration path { stroke: var(--grey-dim); }
.chart.is-drawn .search-illustration .pulse { stroke: var(--white); }

/* ---------- Cobertura nacional ---------- */
.coverage { margin-top: 48px; }
.coverage__svg { width: 100%; height: auto; max-width: 760px; margin: 0 auto; display: block; }
.coverage__node circle { fill: var(--black); stroke: var(--grey-dim); stroke-width: 1; transition: stroke .5s ease, fill .5s ease; }
.coverage__node text { font-family: var(--font-mono); font-size: 11px; fill: var(--grey); letter-spacing: .04em; }
.coverage__link { stroke: var(--grey-dim); stroke-width: .75; opacity: .5; }
.chart.is-drawn .coverage__node circle { fill: var(--white); stroke: var(--white); }
.chart.is-drawn .coverage__node--hub circle { fill: var(--white); stroke: var(--white); }
.chart.is-drawn .coverage__link { opacity: 1; stroke: var(--grey); }

/* ---------- Trust cards ---------- */
.trust-grid { display: grid; gap: 1px; background: var(--grey-dim); margin-top: 48px; border: 1px solid var(--grey-dim); }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { background: var(--black); padding: 28px 24px; }
.trust-item__num { font-family: var(--font-mono); color: var(--grey); font-size: .7rem; }
.trust-item h3 { margin-top: 10px; }
.trust-item p { font-size: .88rem; margin: 8px 0 0; }

/* ---------- Case study ---------- */
.case { border: 1px solid var(--grey-dim); padding: 32px; margin-top: 40px; display: grid; gap: 20px; }
@media (min-width: 640px) { .case { grid-template-columns: auto 1fr auto; align-items: center; } }
.case__badge { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--grey-dim); padding: 6px 12px; border-radius: 999px; width: fit-content; }
.case__model { font-size: 1.2rem; color: var(--white); font-weight: 400; margin: 0; }
.case__meta { font-family: var(--font-mono); font-size: .8rem; color: var(--grey); margin-top: 6px; }
.case__result { font-size: 1.6rem; color: var(--white); font-weight: 300; text-align: right; }
.case__result span { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--grey); font-weight: 400; margin-bottom: 4px; }
.case-note { margin-top: 20px; font-size: .85rem; }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--grey-dim); }
.faq__item { border-bottom: 1px solid var(--grey-dim); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; font-size: 1rem; color: var(--white); background: none; border: none;
  width: 100%; text-align: left; font-family: var(--font-body); font-weight: 400;
}
.faq__q-icon { font-family: var(--font-mono); color: var(--grey); font-size: 1.1rem; transition: transform .3s ease; flex-shrink: 0; }
.faq__item.is-open .faq__q-icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq__a p { padding-bottom: 20px; font-size: .92rem; max-width: 60ch; }
.faq__item.is-open .faq__a { max-height: 240px; }

/* ---------- Cards (disponibles) ---------- */
.cards { display: grid; gap: 1px; background: var(--grey-dim); border: 1px solid var(--grey-dim); grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.car-card { background: var(--black); overflow: hidden; display: flex; flex-direction: column; }
.car-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; filter: grayscale(1) contrast(1.05); }
.car-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.car-card:hover .car-card__media img { transform: scale(1.05); }
.car-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.9) 100%); }
.car-card__price { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-family: var(--font-mono); font-weight: 500; color: var(--white); font-size: 1.05rem; }
.car-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.car-card__body h3 { margin: 0 0 12px; }
.car-card__body .btn--card { margin-top: auto; }
.specs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0; margin: 0 0 22px; font-size: .78rem; color: var(--grey); font-family: var(--font-mono); }
.specs li::before { content: "/"; margin-right: 8px; color: var(--grey-dim); }
.specs li:first-child::before { content: none; }

/* Carrusel de fotos */
.car-card__media--slider { cursor: grab; }
.car-card__media--slider:active { cursor: grabbing; }
.car-card__slides { display: flex; width: 100%; height: 100%; transition: transform .35s ease; }
.car-card__slides img { flex-shrink: 0; width: 100%; height: 100%; object-fit: cover; }
.car-card__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--white); background: rgba(5,5,5,.6); color: var(--white); font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s ease, background .2s ease; }
.car-card__media:hover .car-card__arrow { opacity: 1; }
.car-card__arrow:hover { background: rgba(5,5,5,.85); }
.car-card__arrow--prev { left: 10px; padding-right: 2px; }
.car-card__arrow--next { right: 10px; padding-left: 2px; }

/* Placeholder para cards sin foto */
.car-card__media--placeholder { background: linear-gradient(135deg, var(--black-2) 0%, var(--black-3) 100%); display: flex; align-items: center; justify-content: center; }
.car-card__media--placeholder::after { background: linear-gradient(180deg, transparent 55%, rgba(5,5,5,.6) 100%); }
.car-card__placeholder { font-family: var(--font-body); font-size: 1.1rem; font-weight: 500; color: var(--white); text-align: center; line-height: 1.3; letter-spacing: .02em; }
.car-card--sold { opacity: .75; }
.car-card--sold .car-card__placeholder { color: var(--grey); }
.car-card__sold-badge { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--grey-dim); padding: 6px 12px; border-radius: 999px; margin-top: auto; width: fit-content; }

.car-card--pending { display: flex; align-items: center; justify-content: center; }
.car-card__pending-body { text-align: center; padding: 40px 26px; }
.car-card__pending-num { font-family: var(--font-mono); font-size: 1.6rem; color: var(--grey); }
.car-card__pending-body p { font-size: .88rem; }
.car-card__pending-body h3 { color: var(--white); }

/* ---------- Footer / Final ---------- */
.final-cta { padding: 140px 0; text-align: center; background: var(--black); position: relative; }
.final-cta__wrap { display: flex; flex-direction: column; align-items: center; }
.final-cta .brand__mark { margin-bottom: 28px; }
.final-cta h2 { max-width: 16ch; }
.final-cta .hero__actions { margin-top: 30px; }

.site-footer { border-top: 1px solid rgba(255,255,255,.06); padding: 40px 0 60px; background: var(--black); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer__contact { display: flex; gap: 22px; font-size: .82rem; color: var(--grey); }
.site-footer__contact a:hover { color: var(--white); }
.site-footer__legal { width: 100%; font-size: .74rem; color: var(--grey-dim); margin: 10px 0 0; }

/* ---------- WhatsApp floating (mobile) — mismo B/N, sin verde ---------- */
.fab-whatsapp {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 54px; height: 54px; border-radius: 50%; background: var(--white); color: var(--black);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  transition: transform .15s ease;
}
.fab-whatsapp:hover { transform: scale(1.06); }
@media (min-width: 860px) { .fab-whatsapp { display: none; } }

/* ---------- Scroll reveal ---------- */
[data-anim] { opacity: 1; }
.js-ready [data-anim] { opacity: 0; }
.js-ready [data-anim="rise"] { transform: translateY(24px); }
.js-ready [data-anim="fade"] { transform: translateY(8px); }
.js-ready [data-anim].is-visible {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}

[data-anim-children] > :nth-child(1) { transition-delay: 0s !important; }
[data-anim-children] > :nth-child(2) { transition-delay: .08s !important; }
[data-anim-children] > :nth-child(3) { transition-delay: .16s !important; }
[data-anim-children] > :nth-child(4) { transition-delay: .24s !important; }
[data-anim-children] > :nth-child(5) { transition-delay: .32s !important; }
[data-anim-children] > :nth-child(6) { transition-delay: .4s !important; }
[data-anim-children] > :nth-child(7) { transition-delay: .48s !important; }