/* =========================================================
   ChemiLabels — hoja de estilos
   Paleta y tipografía extraídas del diseño de referencia.
   ========================================================= */

:root {
  /* Color de marca (de la guía de identidad) */
  --lila-oscuro: #1b1534;
  --lila-vivido: #5c2483;
  --lila-vivido-hover: #4a1d6a;
  --gris-medio: #c6c6c6;
  --amarillo: #ffcc00;
  --amarillo-hover: #e6b800;
  --gray-50: #f4f4f6;
  --gray-200: #e3e2e8;
  --gray-600: #625d72;
  --white: #ffffff;
  --ink: #1b1534;

  /* Tokens de superficie/texto — SOLO para las zonas "claras" del sitio
     (fondo de página, tarjetas blancas, formularios). Las secciones que ya
     son oscuras a propósito (hero, footer, bandas moradas...) siguen usando
     directamente --lila-oscuro/--white como hasta ahora y no cambian con
     el modo oscuro, porque ya lo son. */
  --surface: var(--white);
  --surface-alt: var(--gray-50);
  --surface-card: var(--white);
  --text-body: var(--ink);
  --text-muted: var(--gray-600);
  --border-soft: var(--gray-200);
  --accent: var(--lila-vivido);
  --accent-hover: var(--lila-vivido-hover);

  /* Tipografía */
  --font-base: 'Poppins', system-ui, sans-serif;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.5rem;
  --step-4: 3.25rem;

  --radius: 10px;
  --container-w: 1200px;
  --header-h: 72px; /* .9rem*2 de padding + 42px de logo + 1px de borde */
  --brands-bar-h: 64px;
}

/* ---------- Modo oscuro (de prueba) ----------
   Se activa con [data-theme="dark"] en <html> (ver initDarkMode en
   script.js). Solo redefine los tokens de superficie/texto de arriba, así
   que las secciones ya oscuras del sitio (hero, footer, bandas moradas,
   filas oscuras de casos de éxito...) no se tocan: ya encajan tal cual. */
[data-theme="dark"] {
  --surface: #14101f;
  --surface-alt: #1c1730;
  --surface-card: #201a35;
  --text-body: #f0eef5;
  --text-muted: #b6adc9;
  --border-soft: #362c52;
  --accent: #9a6fd1;
  --accent-hover: #b28ce0;
}

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--text-body);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Aparición progresiva al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.center { text-align: center; }
.muted { color: var(--text-muted); }
.italic { font-style: italic; }
.lead { font-size: var(--step-1); }
.highlight {
  font-weight: 700;
  font-size: var(--step-1);
}
.eyebrow-free-label { /* etiqueta simple, sin versalitas ni tracking artificial */
  font-weight: 600;
  color: var(--accent);
  margin-bottom: .25em;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  padding: .95rem 1.8rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--step-0);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-small { padding: .6rem 1.2rem; font-size: .9rem; }

.btn-magenta { background: var(--accent); color: var(--white); }
.btn-magenta:hover { background: var(--amarillo); color: var(--ink); }

/* CTA de tono serio (antes en rojo): lila oscuro, que aclara al pasar el ratón. */
.btn-red { background: var(--lila-oscuro); color: var(--white); }
.btn-red:hover { background: var(--accent); }

.btn-yellow { background: var(--amarillo); color: var(--ink); }
.btn-yellow:hover { background: var(--amarillo-hover); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--white);
}
.btn-outline-light:hover { background: rgba(255,255,255,.1); }

/* ---------- Listas con check / cross ---------- */
.check-list { display: grid; gap: .65rem; margin-bottom: 1.5rem; }
.check-list li { position: relative; padding-left: 2rem; }
.check-list li::before {
  position: absolute; left: 0; top: 0.05em;
  font-weight: 700;
}
.check-list--good li::before { content: "✓"; color: var(--accent); }
.check-list--bad li::before {
  content: "";
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E5484D'/%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.band-dark .check-list--good li::before { color: var(--amarillo); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  max-width: 1700px;
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: .9rem;
  padding-inline: 1.5rem;
  gap: 1rem;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { display: block; width: auto; }
.logo-img--header { height: 42px; }
.logo-img--header.logo-img--dark { display: none; }
[data-theme="dark"] .logo-img--header.logo-img--light { display: none; }
[data-theme="dark"] .logo-img--header.logo-img--dark { display: block; }
/* El PNG del logo del footer lleva integrada una burbuja blanca: sobre fondo
   blanco se ve como el logotipo suelto, y sobre fondo oscuro aparece la
   burbuja — por eso el header usa un archivo distinto (sin burbuja). */
.logo-img--footer { height: 72px; }

.main-nav { display: flex; align-items: center; gap: 1.15rem; }
.main-nav a:not(.btn) { font-weight: 500; font-size: .93rem; white-space: nowrap; }
.main-nav a:not(.btn):hover { color: var(--accent); }
.main-nav .btn-catalogo,
.main-nav .btn { white-space: nowrap; }

.lang-switch {
  display: flex; align-items: center; gap: .25rem; flex-shrink: 0;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: .2rem;
}
.lang-btn {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  color: var(--text-muted);
  padding: .3rem .65rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.lang-btn:hover { color: var(--text-body); }
.lang-btn.is-active { background: var(--accent); color: var(--white); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border-soft); border-radius: 50%;
  background: var(--surface); color: var(--text-body);
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--moon { display: none; }
[data-theme="dark"] .theme-icon--sun { display: block; }

/* Catálogo: se distingue más que un enlace normal (borde marcado, relleno
   blanco) pero menos que el CTA principal (que va relleno de color). */
.btn-catalogo {
  display: inline-block;
  padding: .5rem 1rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  font-size: .9rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-catalogo:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--ink); }

/* CTA principal del header: mismo aspecto que el resto de botones
   .btn-magenta del sitio (mismo hover, ver arriba). */
.nav-cta { background: var(--accent); color: var(--white); }
.nav-cta:hover { background: var(--amarillo); color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; padding: 0; flex-direction: column;
  justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; height: 2px; background: var(--text-body); border-radius: 2px; }

@media (max-width: 1260px) {
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface);
    flex-direction: column; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--border-soft);
    display: none;
    padding: .5rem 1.5rem 1.25rem;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a:not(.btn) { padding: .6rem 0; border-bottom: 1px solid var(--border-soft); }
  .main-nav .btn, .main-nav .btn-catalogo { margin-top: .75rem; text-align: center; }
  .lang-switch { justify-content: center; margin-top: .75rem; }
  .theme-toggle { align-self: center; margin-top: .5rem; }
  .nav-toggle { display: flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 560px;
  background: linear-gradient(115deg, var(--lila-oscuro) 0%, var(--lila-vivido) 100%);
  color: var(--white);
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: calc(clamp(1.5rem, 3.5vw, 2.5rem) + var(--brands-bar-h));
}
.hero-inner { position: relative; height: 100%; display: flex; align-items: center; }
.hero-logo { height: clamp(56px, 8vw, 100px); width: auto; margin-bottom: 1.5rem; display: block; }
.hero-copy {
  position: relative; z-index: 2; max-width: 560px;
  transition: opacity .2s ease;
}
.hero-copy.is-fading { opacity: 0; }
.hero-copy h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); max-width: 16ch; margin: 0 0 .6em; }
.hero-sub { font-size: var(--step-1); max-width: 34ch; color: var(--gris-medio); }
.hero-note { margin-top: 1rem; color: var(--gris-medio); font-size: .95rem; }

/* Palabra rodeada a mano estilo rotulador, para la diapositiva
   "Experiencia internacional" (y cualquier otra que la necesite). */
.hero-circle-word { position: relative; display: inline-block; white-space: nowrap; }
.hero-circle-word .circle-svg {
  position: absolute; inset: -22% -16%; width: 132%; height: 144%;
  color: var(--amarillo); overflow: visible; pointer-events: none;
}

/* Fila de banderas de la diapositiva "Experiencia internacional" */
.hero-flags { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero-flags-img { height: 76px; width: auto; display: block; }
.hero-flags-more { font-size: var(--step-1); font-weight: 600; color: var(--white); }

/* La imagen/gráfico de la derecha ocupa casi toda la altura real de la
   sección y sangra ligeramente por el borde derecho; overflow:hidden en
   .hero lo recorta. El contenedor tiene ancho Y alto definidos, y
   object-fit:contain evita cualquier deformación. */
.hero-visual {
  position: absolute;
  top: 0;
  bottom: var(--brands-bar-h);
  right: 0;
  width: min(44vw, 590px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}
.hero-visual-content {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease;
}
.hero-visual-content.is-fading { opacity: 0; }
.hero-img { max-height: 100%; max-width: 120%; width: auto; height: auto; object-fit: contain; display: block; }
.hero-img2 { max-height: 100%; max-width: 200%; width: auto; height: auto; object-fit: contain; display: block; }
/* Desplazamiento propio de la diapositiva 1 (packshot), para separarla del
   texto sin mover el contenedor compartido con la diapositiva 2 (globo). */
.hero-img--packshot { transform: translateX(80px); }
.hero-img--packshot2 { transform: translateX(10px); }
.hero-img--packshot3 { transform: translateX(40px); }

/* La imagen de escritorio y la de móvil son elementos <img> distintos e
   independientes (ver heroSlideHTML en script.js): cada una con sus
   propias clases, sin ninguna en común. Así, tocar el tamaño/posición de
   una nunca puede afectar por accidente a la otra — solo se alterna cuál
   de las dos se muestra según el ancho de pantalla. */
.hero-img--mobile-only { display: none; }

/* Énfasis en negrita + subrayado, para la diapositiva "chemical"
   (en vez del círculo dibujado a mano que usa la diapositiva 2). */
.hero-underline-word {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--amarillo);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.slider-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border-radius: 50%; border: 1px solid currentColor; background: transparent;
  color: inherit; cursor: pointer; transition: background-color .15s ease, opacity .15s ease;
}
.slider-arrow svg { width: 16px; height: 16px; }
.slider-arrow:hover { background: rgba(255,255,255,.12); }

.hero-dots { display: flex; gap: .5rem; pointer-events: none; }
.hero-dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.35); cursor: default;
}
.hero-dots button.is-active { background: var(--white); }

/* ---------- Franja de marcas al pie del hero ---------- */
.hero-brands {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--brands-bar-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .94);
}
.hero-brands-track {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  width: max-content;
  padding-inline: 1.5rem;
  animation: hero-brands-scroll 34s linear infinite;
}
/* Misma idea que en la rejilla de "Más de 30 marcas" de más abajo: cada
   logo se escala dentro de una celda del mismo tamaño (con object-fit
   contain), en vez de forzar solo la altura — así un logo cuadrado y uno
   apaisado quedan con un peso visual comparable, igual que abajo. */
.hero-brands-track .brand-tile {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 34px; flex-shrink: 0;
}
.hero-brands-track img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.hero-brands-track .brand-tile-img { border-radius: 4px; }
@keyframes hero-brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brands-track { animation: none; }
}

@media (max-width: 900px) {
  .hero { height: auto; min-height: auto; padding-block: clamp(2rem, 8vw, 3rem); padding-bottom: calc(clamp(2rem, 8vw, 3rem) + var(--brands-bar-h)); overflow: visible; }
  .hero-inner {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 1.25rem; height: auto;
  }
  .hero-logo { margin-inline: auto; }
  .hero-visual {
    position: static; display: flex; width: auto; height: auto;
    order: -1;
  }
  .hero-visual-content { flex: 0 0 auto; width: auto; }
  .hero-img--desktop-only { display: none; }
  .hero-img--mobile-only { display: block; }
  .hero-img-mobile { height: auto; width: 88%; max-width: 380px; margin-inline: auto; object-fit: initial; }
  .hero-img2-mobile { height: auto; width: 92%; max-width: 400px; margin-inline: auto; object-fit: initial; }
  .hero-copy { max-width: 100%; order: 2; }
  .hero-sub { max-width: 100%; margin-inline: auto; }
  .hero-flags { justify-content: center; }
  .hero-flags-img { height: 60px; }
}

/* =========================================================
   PROBLEMA
   ========================================================= */
.problem { background: var(--surface); position: relative; }
.problem-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.problem-copy h2 { font-size: var(--step-3); max-width: 16ch; }
/* La columna de la imagen ocupa la misma altura que la del texto (fila del
   grid); dentro, el envase ocupa el 100% de esa altura (misma altura que
   el texto) y se ancla a la base, así coinciden altura y base con el
   texto/botón del lateral. */
.problem-visual { position: relative; }
.problem-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 100%;
}

@media (max-width: 900px) {
  .problem-inner { grid-template-columns: 1fr; }
  .problem-visual { position: static; order: -1; height: auto; }
  .problem-img { position: static; transform: translateX(-18px); height: auto; width: 100%; max-width: 280px; margin-inline: auto; }
  .problem-copy { text-align: center; }
  .problem-copy h2 { max-width: 100%; margin-inline: auto; }
  .problem-copy .check-list { display: inline-grid; text-align: left; }
}

.band { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band-dark { background: var(--lila-oscuro); color: var(--white); }
.band-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start;
}
.band-copy h2 { font-size: var(--step-2); max-width: 20ch; }
.band-caption {
  max-width: 900px; margin: 2.5rem auto 0; padding-inline: 1.5rem;
  color: var(--white); text-align: center;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.3;
}

@media (max-width: 900px) {
  .band-inner { grid-template-columns: 1fr; }
  .band-copy { text-align: center; }
  .band-copy h2 { max-width: 100%; margin-inline: auto; }
  .band-inner > .check-list { display: inline-grid; text-align: left; margin-inline: auto; }
}

/* =========================================================
   CLIENTES / LOGOS / SECTORES
   ========================================================= */
.clients { padding-top: clamp(3rem, 6vw, 5rem); }
.clients h2 { font-size: var(--step-2); margin-bottom: 2rem; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.logo-grid li { display: flex; align-items: center; justify-content: center; padding: .75rem; }
.logo-grid img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.logo-grid img[src$="norit.png"] { max-height: 88px; }
.logo-grid img[src$="orion.png"] { max-height: 76px; }
.logo-grid .brand-tile-img { border-radius: 6px; }

.sectors { background: var(--lila-oscuro); color: var(--white); }
.sectors-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.sectors-copy h2 { font-size: var(--step-2); }
.sectors-copy .check-list--good li::before { color: var(--amarillo); }
.sectors-visual { display: flex; justify-content: center; }
.sectors-img { width: 100%; max-width: 340px; }

@media (max-width: 900px) {
  .sectors-inner { grid-template-columns: 1fr; }
  .sectors-copy { text-align: center; }
  .sectors-copy .check-list { display: inline-grid; text-align: left; }
}

/* =========================================================
   CASO DE ÉXITO
   ========================================================= */
.case-study-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2rem);
}
.case-study-copy { min-height: 530px; }
.case-study-copy h2 { font-size: var(--step-3); }
.case-study-copy.is-fading, .case-study-img.is-fading { opacity: 0; }
.case-study-copy, .case-study-img { transition: opacity .2s ease; }
.case-study-visual { display: flex; justify-content: center; }
.case-study-img { width: 100%; max-width: 480px; }

.case-study-dots { display: flex; justify-content: center; gap: .5rem; pointer-events: none; }
.case-study-dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--border-soft); cursor: default;
}
.case-study-dots button.is-active { background: var(--accent); }
.slider-nav--case-study { padding-bottom: clamp(2rem, 4vw, 3rem); }
#case-study-prev, #case-study-next, #testimonials-prev, #testimonials-next {
  color: var(--accent); border-color: var(--accent);
}
#case-study-prev:hover, #case-study-next:hover, #testimonials-prev:hover, #testimonials-next:hover {
  background: var(--surface-alt);
}

@media (max-width: 900px) {
  .case-study-inner { grid-template-columns: 1fr; }
  .case-study-copy { text-align: center; min-height: 770px; }
}

.band-cta { text-align: center; }
.band-cta-inner { max-width: 1100px; margin-inline: auto; }
.band-cta .btn { margin-top: 1rem; }

/* =========================================================
   QUÉ ENTREGAMOS
   ========================================================= */
.deliverables { padding-top: clamp(3rem, 6vw, 5rem); }
.deliverables h2 { font-size: var(--step-2); margin-bottom: 2.5rem; }

.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.deliverable-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 1rem;
  color: var(--accent);
}
.deliverable-icon svg { width: 100%; height: 100%; }

@media (max-width: 780px) {
  .deliverable-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Contacto ---------- */
.contact-band { text-align: center; }
.contact-inner { max-width: 560px; margin-inline: auto; }
.contact-inner h2 { font-size: var(--step-2); margin-bottom: 1.75rem; }

.contact-form { display: grid; gap: 1rem; text-align: left; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}
.contact-form .btn { justify-self: start; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-status { min-height: 1.2em; font-weight: 600; }
.form-status--success,
.form-status--error,
.form-status--info { padding: .65rem .9rem; border-radius: 8px; }
.form-status--success,
.form-status--error,
.form-status--info { color: var(--text-body); background: var(--surface-alt); }
.form-legal { font-size: .8rem; color: var(--gris-medio); }
.form-legal a { text-decoration: underline; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testimonials { padding-block: clamp(3rem, 6vw, 5rem); background: var(--surface-alt); }
.testimonials-inner { }
.testimonials h2 { margin-bottom: 2.5rem; }
.testimonials-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  transition: opacity .15s ease;
}
.testimonials-track.is-fading { opacity: 0; }
.testimonial-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 0;
}
.testimonial-card footer {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1.25rem; font-size: .95rem;
}
.avatar-img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.testimonials-dots { display: flex; gap: .5rem; justify-content: center; pointer-events: none; }
.testimonials-dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--border-soft); cursor: default;
}
.testimonials-dots button.is-active { background: var(--accent); }
.slider-nav--testimonials { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .testimonials-track { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .testimonials-track { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--lila-oscuro); color: var(--white); }

.footer-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--lila-vivido) 0%, var(--lila-oscuro) 80%);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.footer-band-main {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  gap: 4rem;
  min-height: clamp(200px, 24vw, 280px);
}

.footer-logo-col {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
}
.footer-logo-row { display: flex; align-items: center; gap: 1.25rem; }
.footer-bubble-logo { height: clamp(72px, 10vw, 130px); width: auto; display: block; }
.footer-logo-caption {
  font-size: .85rem; letter-spacing: .04em; color: var(--white); opacity: .8;
}
/* Logo de Arte Sin Final ("a brand by..."): incluye su propia línea
   divisoria vertical, por eso va pegado al logo de ChemiLabels sin
   borde ni separador añadido en CSS. Misma altura que footer-bubble-logo
   para que ambos logos tengan el mismo peso visual. */
.footer-credit-icon { height: clamp(72px, 10vw, 130px); width: auto; display: block; }

.footer-info {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center;
}
.social-links { display: flex; align-items: center; gap: 1.25rem; }
.social-links img { width: 56px; height: 56px; display: block; }

.footer-tagline { margin: 0; max-width: 34ch; color: var(--white); opacity: .85; font-size: .95rem; }

.footer-hablamos {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--white); color: var(--accent);
  padding: .75rem 1.75rem; border-radius: 999px; font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.footer-hablamos-icon { display: inline-flex; width: 20px; height: 20px; }
.footer-hablamos-icon svg { width: 100%; height: 100%; }
.footer-hablamos:hover { background: var(--gray-50); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

/* Los avisos legales viven sobre el mismo degradado, no en un bloque aparte */
.footer-legal {
  position: relative;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.15);
  text-align: center;
}
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .85rem; }
.footer-links a:hover { text-decoration: underline; }

.copyright { margin: 0; font-size: .8rem; color: var(--gris-medio); }

@media (max-width: 700px) {
  .footer-band-main { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; text-align: center; }
}

/* =========================================================
   PÁGINAS EN CONSTRUCCIÓN (catálogo, casos de éxito,
   contacto, solicitar diagnóstico)
   ========================================================= */
.coming-soon {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding-block: 4rem;
}
.coming-soon-inner { max-width: 480px; }
.coming-soon h1 { font-size: var(--step-3); margin-bottom: .75rem; }
.coming-soon p { color: var(--text-muted); margin-bottom: 1.75rem; }

.contact-page { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem); }
.contact-page-inner { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.contact-page h1 { font-size: var(--step-3); margin-bottom: .3rem; }
.contact-page > .contact-page-inner > p { color: var(--text-muted); margin-bottom: 0; }

.contact-options { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2rem; max-width: 1500px; align-items: start; margin-top: -35px; }
.contact-option { background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact-option--form { border-top: 4px solid var(--accent); }
.contact-option--call { border-top: 4px solid var(--amarillo); }
.contact-option h2 { font-size: var(--step-2); margin-bottom: .4rem; }
.contact-option > p { color: var(--text-muted); margin-bottom: 1.5rem;}
/* ---------- Calendario de reservas propio ---------- */
.booking-widget { margin-top: 1.25rem; }
.booking-step[hidden] { display: none; }

.booking-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.booking-month-label { font-weight: 700; text-transform: capitalize; color: var(--text-body); }
.booking-nav-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-soft); background: var(--surface);
  color: var(--accent); cursor: pointer;
}
.booking-nav-arrow svg { width: 14px; height: 14px; }
.booking-nav-arrow:disabled { opacity: .35; cursor: default; }
.booking-nav-arrow:not(:disabled):hover { border-color: var(--accent); }

.booking-cal-weekdays, .booking-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem;
}
.booking-cal-weekdays span {
  text-align: center; font-size: .75rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; padding-bottom: .35rem;
}
.booking-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  font-family: inherit; font-size: .9rem; color: var(--text-body); cursor: pointer;
}
.booking-day--empty { visibility: hidden; }
.booking-day.is-disabled { color: var(--text-muted); opacity: .35; cursor: default; }
.booking-day.is-available { background: var(--surface-alt); font-weight: 600; }
.booking-day.is-available:hover { background: var(--accent); color: var(--white); }

.booking-back {
  display: inline-block; margin-bottom: 1rem; border: none; background: none;
  color: var(--accent); font-family: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; padding: 0;
}
.booking-slots-date { margin-bottom: .25rem; }
.booking-tz-note { color: var(--text-muted); font-size: .8rem; margin-bottom: 1rem; }
.booking-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .6rem; }
.booking-slot {
  padding: .55rem .5rem; border-radius: 999px; border: 1.5px solid var(--accent);
  background: var(--surface); color: var(--accent); font-family: inherit;
  font-weight: 600; font-size: .9rem; cursor: pointer; line-height: 1.2;
}
.booking-slot small { display: block; font-weight: 500; font-size: .68rem; opacity: .75; text-transform: none; }
.booking-slot:hover { background: var(--accent); color: var(--white); }
.booking-empty { color: var(--text-muted); }

.booking-details-form { display: flex; flex-direction: column; gap: .85rem; }
.booking-summary {
  font-weight: 700; color: var(--text-body);
  background: var(--surface-alt); border-radius: 8px; padding: .65rem .9rem;
}
.booking-success { text-align: center; padding-block: 1rem; }
.booking-success-icon {
  width: 48px; height: 48px; margin: 0 auto .75rem; border-radius: 50%;
  background: var(--accent); color: var(--white); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}
.booking-success-note { color: var(--text-muted); font-size: .9rem; }

@media (max-width: 900px) {
  .booking-slots-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

@media (max-width: 900px) {
  .contact-options { grid-template-columns: 1fr; }
  .contact-option h2, .contact-option > p { text-align: center; }
}

/* =========================================================
   PÁGINAS LEGALES (aviso legal, política de privacidad, cookies)
   ========================================================= */
.legal-page h1 { margin-bottom: .2rem; }
.legal-updated { color: var(--text-muted); font-size: .9rem; margin-bottom: 2rem; }
.legal-page h2 { margin-top: 2rem; }
.legal-page h3 { margin-top: 1.25rem; font-size: 1.05rem; }
.legal-list { list-style: disc; padding-left: 1.3em; margin: 0 0 1.1em; }
.legal-list li { margin-bottom: .45em; }
.legal-back { margin-top: 2.5rem; }

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
.about-intro { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.about-intro-inner { max-width: 700px; margin-inline: auto; }
.about-intro h1 { font-size: var(--step-3); }
.about-intro .lead { color: var(--accent); font-weight: 600; }
.about-intro p:last-child { color: var(--text-muted); }

.team-member { padding-block: clamp(2.5rem, 6vw, 4rem); }
.team-member--dark { background: var(--lila-oscuro); color: var(--white); }
.team-member-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
}
.team-member--reverse .team-member-inner { grid-template-columns: 1fr 1.1fr; }
.team-member--reverse .team-copy { order: 2; }
.team-member--reverse .team-photo { order: 1; }
.team-copy h2 { font-size: var(--step-3); }
.team-member--dark .team-copy .eyebrow-free-label { color: var(--amarillo); }
.team-photo { display: flex; justify-content: center; }
.team-photo img { width: 100%; max-width: 360px; }
/* Foto de Jordi: recorte a color plano sobre fondo transparente, así que
   lleva un círculo de fondo con el degradado de marca para que tenga el
   mismo peso visual que la foto de Mireia (que ya trae su propio fondo). */
.team-photo--framed {
  border-radius: 50%;
  background: linear-gradient(115deg, var(--lila-oscuro) 0%, var(--lila-vivido) 100%);
  padding: clamp(1rem, 3vw, 1.75rem);
}

@media (max-width: 900px) {
  .team-member-inner,
  .team-member--reverse .team-member-inner { grid-template-columns: 1fr; }
  .team-member--reverse .team-copy,
  .team-member--reverse .team-photo { order: initial; }
  .team-photo { order: -1; }
  .team-photo img { max-width: 260px; }
  .team-copy { text-align: center; }
}

.about-stats { background: var(--surface-alt); padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.about-stats-inner { max-width: 640px; margin-inline: auto; }
.stat-number {
  font-size: clamp(3.5rem, 9vw, 6rem); font-weight: 800; line-height: 1;
  color: var(--accent); margin-bottom: .25rem;
}
.stat-label { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.about-stats p { color: var(--text-muted); }

/* =========================================================
   CASOS DE ÉXITO
   ========================================================= */
.cases-intro { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.cases-intro-inner { max-width: 700px; margin-inline: auto; }
.cases-intro h1 { font-size: var(--step-3); }
.cases-intro .lead { color: var(--accent); font-weight: 600; }
.cases-intro p:last-child { color: var(--text-muted); }

.case-row { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--border-soft); }
.case-row:first-of-type { border-top: none; }

.case-row-inner {
  max-width: 1520px; margin-inline: auto; padding-inline: 1.5rem;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.case-row--reverse .case-row-inner { grid-template-columns: 1.2fr 1fr; }
.case-row--reverse .case-copy { order: 2; }
.case-row--reverse .case-visual { order: 1; }

.case-copy .eyebrow-free-label { font-size: 1.05rem; }
.case-row--dark .case-copy .eyebrow-free-label { color: var(--amarillo); }
.case-copy h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); margin-bottom: .45rem; }
.case-copy .lead { font-size: var(--step-1); margin-bottom: 1.3rem; }
.case-row--dark .case-copy .lead { color: var(--white); }
.case-points p { margin-bottom: 1rem; font-size: 1.05rem; }
.case-points strong { color: var(--text-body); }
.case-row--dark .case-points p { color: var(--gris-medio); }
.case-row--dark .case-points strong { color: var(--white); }
.case-highlight {
  font-size: 1.1rem; font-weight: 700; margin-top: 1.3rem; padding-left: 1.1rem;
  border-left: 4px solid var(--amarillo);
}

.case-visual { display: flex; justify-content: center; }
.case-visual-frame {
  background: var(--surface-card); border-radius: var(--radius);
  width: 100%; padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
.case-visual-frame img { width: 100%; max-width: 620px; height: auto; object-fit: contain; }

@media (max-width: 900px) {
  .case-row-inner,
  .case-row--reverse .case-row-inner { grid-template-columns: 1fr; }
  .case-row--reverse .case-copy,
  .case-row--reverse .case-visual { order: initial; }
  .case-visual { order: -1; }
  .case-copy { text-align: center; }
  .case-highlight { text-align: left; }
}

/* =========================================================
   UN PRODUCTO, CADA MERCADO (selector de etiquetas por país)
   ========================================================= */
.markets { background: var(--surface); padding-block: clamp(2.5rem, 5vw, 4rem); }
.markets-header { max-width: 1000px; margin: 0 auto 2.25rem; text-align: center; }
.markets-header h2 { margin-bottom: .5rem; }

/* Titular grande, en una sola línea — se usa aquí y en la banda
   "¿Necesitas que revisemos..." para que ambos combinen. */
.statement-heading {
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  white-space: nowrap;
  margin-bottom: .5rem;
}
@media (max-width: 700px) {
  .statement-heading { white-space: normal; }
}
.markets-header .lead { color: var(--text-muted); font-weight: 400; }

.markets-showcase {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch; max-width: 1200px; margin-inline: auto;
}
.markets-visual { display: flex; justify-content: center; }
.markets-frame {
  width: 100%; padding: clamp(1rem, 2vw, 1.5rem);
  display: flex; align-items: center; justify-content: center;
}
.markets-frame img { width: 100%; max-width: 420px; height: auto; object-fit: contain; border-radius: 6px; }

.markets-selector { display: flex; flex-direction: column; justify-content: center; }
.markets-current-label { font-size: .85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: .15rem; }
.markets-current-name { font-size: var(--step-2); font-weight: 700; color: var(--text-body); margin-bottom: 1.25rem; }
.markets-flag { display: inline-flex; gap: .3rem; vertical-align: middle; }
.markets-flag img { height: 0.7em; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: middle; }

.markets-grid { display: flex; flex-wrap: wrap; gap: .7rem; }
.market-btn {
  padding: .6rem 1.15rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--accent);
  font-weight: 600;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.market-btn:hover { background: rgba(92,36,131,.08); }
.market-btn.is-active { background: var(--accent); color: var(--white); }

@media (max-width: 900px) {
  .markets { padding-block: clamp(2rem, 6vw, 3rem); }
  .markets-header { margin: 0 auto 1.25rem; }
  .markets-showcase { grid-template-columns: 1fr; gap: .5rem; }
  .markets-visual { order: -1; margin-bottom: 0; }
  .markets-frame { padding: .5rem; }
  .markets-frame img { max-width: 240px; }
  .markets-current-label { display: none; }
  .markets-current-name, .markets-current-name { text-align: center; }
  .markets-current-name {
    min-height: 96px;
    font-size: 1.4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: .35rem; margin-bottom: .5rem;
  }
  .markets-grid { justify-content: center; }
}