/* =========================================================
   SCROLL THEME — el fondo cambia de color al hacer scroll y
   TODO se adapta (fondo claro→texto oscuro / fondo oscuro→texto claro).
   Funciona remapeando los tokens de color al color del "journey".
   Solo en la home. Revertible (quitar link + <div>/<script>).
   ========================================================= */

:root{ --pg-bg:#F3EEE8; --pg-fg:#1A1714; }

/* El FONDO funde lento y fluido (0.5s). El TEXTO no funde (lo cambia el JS a
   mitad del fundido, así nunca queda gris sobre gris ilegible). Solo tocamos
   el fondo de las secciones + body + cabecera, para no pisar hovers ni reveals. */
body.is-home,
body.is-home .hero, body.is-home .hero-marquee, body.is-home .manifesto,
body.is-home .section-header, body.is-home .work, body.is-home .services,
body.is-home .workwith, body.is-home .studio, body.is-home .quotes,
body.is-home .contact, body.is-home .site-header{
  transition: background-color .35s ease-out !important;
}

/* El contenido general sigue el journey (convención normal:
   fondo = --paper, texto = --ink) */
body.is-home{
  --paper:      var(--pg-bg);
  --paper-deep: color-mix(in srgb, var(--pg-bg) 90%, var(--pg-fg));
  --ink:        var(--pg-fg);
  --ink-soft:   color-mix(in srgb, var(--pg-fg) 82%, var(--pg-bg));
  --ink-muted:  color-mix(in srgb, var(--pg-fg) 56%, var(--pg-bg));
  --line:       color-mix(in srgb, var(--pg-fg) 14%, transparent);
  --line-terr:  color-mix(in srgb, var(--pg-fg) 12%, transparent);
  background: var(--pg-bg);
}

/* Etiquetas de sección (eyebrows) en color de texto (negro sobre claro,
   claro sobre oscuro) en vez de terracota — Aina las quiere "en negro". */
body.is-home .micro,
body.is-home .sh-num{ color: var(--pg-fg) !important; }

/* Secciones diseñadas "al revés" (fondo oscuro fijo, texto claro):
   intercambian los papeles para fluir con el journey */
body.is-home .services,
body.is-home .studio{
  --ink:       var(--pg-bg);
  --paper:     var(--pg-fg);
  --ink-soft:  color-mix(in srgb, var(--pg-bg) 82%, var(--pg-fg));
  --ink-muted: color-mix(in srgb, var(--pg-bg) 56%, var(--pg-fg));
}

/* El footer se queda en su NEGRO original, inmune al journey
   (el logo se pone blanco solo, vía .on-dark, al llegar a él) */
body.is-home .site-footer{
  --paper:      #F3EEE8;
  --paper-deep: #EBE4D8;
  --ink:        #1A1714;
  --ink-soft:   #3A322B;
  --ink-muted:  #6B5F54;
  --cream-pop:  #FEFFBB;
  --terracota:  #C95A3E;
  --line:       rgba(243, 238, 232, 0.14);
  background:   #1A1714 !important;   /* negro (igual que las secciones oscuras), no el gris #262220 */
}

/* CONTACTO (CTA): está hardcodeado en oscuro (fondo #1A1714 + formulario con
   textos claros). Lo adaptamos al journey para que se vea sobre claro. */
body.is-home .contact{
  background: var(--pg-bg) !important;
  color: var(--pg-fg) !important;
  border-top: 1px solid color-mix(in srgb, var(--pg-fg) 16%, transparent) !important; /* separador testimonios ↔ formulario */
}
body.is-home .contact::before{ opacity: .06 !important; }
/* Mismo negro liso en todas las secciones oscuras (bajamos el ruido que las agrisaba) */
body.is-home .services::before,
body.is-home .studio::before,
body.is-home .site-footer::before{ opacity: .06 !important; }
body.is-home .contact .contact-micro{ color: var(--ink) !important; }
body.is-home .contact-title{ color: var(--pg-fg) !important; }
body.is-home .contact-sub{ color: color-mix(in srgb, var(--pg-fg) 72%, var(--pg-bg)) !important; }
body.is-home .contact-sub strong{ color: var(--pg-fg) !important; }
body.is-home .contact .field label{ color: color-mix(in srgb, var(--pg-fg) 62%, var(--pg-bg)) !important; }
/* Campos en CAJA (no solo línea) para que se lea claramente como formulario */
body.is-home .contact .field input,
body.is-home .contact .field textarea,
body.is-home .contact .field select{
  color: var(--pg-fg) !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--pg-fg) 16%, transparent) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
}
body.is-home .contact .field input:focus,
body.is-home .contact .field textarea:focus,
body.is-home .contact .field select:focus{
  border-color: var(--terracota) !important;
}
body.is-home .contact .field input::placeholder,
body.is-home .contact .field textarea::placeholder{
  color: color-mix(in srgb, var(--pg-fg) 42%, var(--pg-bg)) !important;
}
body.is-home .contact .cf-check{ color: color-mix(in srgb, var(--pg-fg) 70%, var(--pg-bg)) !important; }
body.is-home .contact .contact-direct{ border-top-color: color-mix(in srgb, var(--pg-fg) 16%, transparent) !important; }
body.is-home .contact .quick-contact{
  border-color: color-mix(in srgb, var(--pg-fg) 30%, transparent) !important;
  color: var(--pg-fg) !important;
}
body.is-home .contact .cd-whatsapp a{ color: color-mix(in srgb, var(--pg-fg) 60%, var(--pg-bg)) !important; }

/* La cabecera NUNCA es transparente: le damos un fondo fijo que sigue el color
   del journey (--pg-bg), así se adapta sola — claro sobre claro, oscuro sobre
   oscuro — con un ligero esmerilado. (De base la web la hacía transparente y
   solo cogía fondo al hacer scroll, pero el scroll propio no lo activaba.) */
body.is-home .site-header{
  background: var(--pg-bg) !important;   /* sólido: nunca transparente y sin blur (scroll fluido) */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--line-terr) !important;
  transition: background-color .35s ease-out !important;
}

/* El logo (PNG negro) se invierte a blanco cuando el fondo es oscuro */
body.is-home.on-dark .brand-img{
  filter: brightness(0) saturate(100%) invert(100%);
}

/* CSS recomendado por Lenis (scroll con inercia) */
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; }

@media (prefers-reduced-motion: reduce){
  body.is-home,
  body.is-home .hero, body.is-home .hero-marquee, body.is-home .manifesto,
  body.is-home .section-header, body.is-home .work, body.is-home .services,
  body.is-home .workwith, body.is-home .studio, body.is-home .quotes,
  body.is-home .contact, body.is-home .site-header{
    transition: none !important;
  }
}