/* ==========================================================================
   EFITaller — Sistema de diseño
   - Tipografía: Outfit (display+UI) + JetBrains Mono (data)
   - Paleta zinc + accent verde lima
   - Sin emojis. Sin Inter. Sin neón. Sin negros puros.
   - Animación: GSAP-driven, hardware-accelerated (transform/opacity only)
========================================================================== */

/* ---------- Variables ---------- */
:root {
  /* Tipografía oficial EFITaller — Figtree (sustituye a Source Sans 3) */
  --font-display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Color base — fondo claro con tono verdoso para personalidad y mejor combinación con el verde */
  --bg:           #f4f7f0;   /* fondo verdoso (era #fafafa) */
  --bg-soft:      #ebf0e3;   /* variante un poco más saturada para hover/active */
  --bg-card:      #ffffff;
  --text:         #1f1f1f;   /* gris oscuro corporativo */
  --text-soft:    #4a4a4a;
  --text-muted:   #6b6b6b;
  --border:       #e0e0e0;
  --border-soft:  #f0f0f0;

  /* Color oscuro (para secciones inversas y fondos) */
  --dark:         #1f1f1f;   /* corporativo */
  --dark-2:       #2a2a2a;
  --dark-3:       #383838;
  --dark-border:  #2e2e2e;

  /* Accent verde oficial EFITaller (#c2d500) */
  --accent:       #c2d500;   /* verde principal */
  --accent-2:     #d2e62d;   /* verde claro para hover */
  --accent-soft:  rgba(194, 213, 0, .14);
  --accent-ink:   #1f1f1f;   /* texto sobre accent (gris oscuro corporativo) */
  --accent-dark:  #5b6400;   /* verde oscuro para destacados sobre blanco (párrafos, bordes) */

  /* Sombras */
  --shadow-sm:    0 1px 0 rgba(15,15,17,.04), 0 1px 2px rgba(15,15,17,.04);
  --shadow-md:    0 8px 22px -10px rgba(15,15,17,.10);
  --shadow-lg:    0 20px 40px -22px rgba(15,15,17,.20);

  /* Geometría — radius jerárquico: 14 inputs/chips, 24 cards, 32 hero panels */
  --radius:       14px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --container:    1440px;

  /* Tokens de espaciado modular (escala 8pt) */
  --space-1:      8px;
  --space-2:      16px;
  --space-3:      24px;
  --space-4:      32px;
  --space-5:      48px;
  --space-6:      64px;
  --space-7:      96px;

  /* Easing premium */
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --ease-in-out:  cubic-bezier(.7,0,.2,1);

  /* Misc */
  --header-h:     72px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reset suave ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Scroll suave solo si el usuario no pide motion reducido */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Foco visible global — accesibilidad por teclado (WCAG 2.1) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Para elementos sobre fondo lima (botón primary) usamos contraste oscuro */
.btn--primary:focus-visible {
  outline-color: var(--accent-ink);
  outline-offset: 4px;
}
body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Red de seguridad: ningún elemento puede provocar scroll horizontal.
     'clip' (no 'hidden') no crea contenedor de scroll → no rompe el header fixed
     ni el scroll vertical. */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease-out); }
a:hover { color: var(--text); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

.mono { font-family: var(--font-mono); letter-spacing: -.02em; }
.hp   { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container--prose { max-width: 760px; }
.container--prose h2 {
  margin: 2.5rem 0 .75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.container--prose h3 {
  margin: 1.75rem 0 .5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.container--prose p { color: var(--text-soft); margin: .75rem 0 0; line-height: 1.65; }
.container--prose ul { color: var(--text-soft); margin: .75rem 0 0; padding-left: 1.4rem; line-height: 1.65; }
.container--prose ul li { margin-bottom: .35rem; }
.container--prose ul li + li { margin-top: 0; }
.container--prose a { color: var(--accent-dark); text-decoration: underline; }
.container--prose a:hover { color: var(--text); }
.container--prose strong { color: var(--text); font-weight: 600; }
.container--prose code {
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
  font-family: 'JetBrains Mono', monospace;
}
.container--prose .legal-updated {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: .88rem;
}

.section { padding: 88px 0; position: relative; }
.section--lite { background: var(--bg-soft); }
.section--dark {
  background: var(--dark);
  color: #e4e4e7;
}
.section--dark .section__title,
.section--dark .eyebrow { color: #fff; }

.section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.section__header--centered {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.section__title {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);
  font-weight: 700;          /* antes 600 — más peso para mejor jerarquía */
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 12px 0 0;
}
.section__title--md { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.section__title--invert { color: #ffffff; }
.section__lede,
.section__body {
  color: var(--text-soft);
  font-size: 1.025rem;
  max-width: 56ch;
}
.section__body { font-size: 1rem; }
.section__footer { margin-top: 48px; display: flex; justify-content: center; }

/* Variante: título a la izquierda + link "Ver todos →" alineado a la derecha */
.section__header--with-link {
  grid-template-columns: 1fr auto;
  align-items: end;
}
.section__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), gap .25s var(--ease-out);
}
.section__link svg { transition: transform .25s var(--ease-out); }
.section__link:hover { color: var(--accent); border-bottom-color: var(--accent); gap: 12px; }
.section__link:hover svg { transform: translateX(2px); }
@media (max-width: 720px) {
  .section__header--with-link { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-soft);
}
.eyebrow--invert { color: rgba(255,255,255,.7); }
.eyebrow--accent { color: var(--accent-ink); background: var(--accent); padding: 8px 14px; border-radius: 100px; }
.eyebrow--accent .eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-ink); animation: pulse 2s infinite var(--ease-in-out);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.6); }
}

/* ---------- Dots ---------- */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; display: inline-block; vertical-align: middle;
}
.dot--accent { background: var(--accent); }
.dot--live   { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: live 1.6s infinite; }
@keyframes live {
  70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- Botones ---------- */
.btn {
  --b-bg: var(--text);
  --b-fg: #fff;
  --b-bd: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 100px;
  font-weight: 500;
  font-size: .96rem;
  letter-spacing: -0.005em;
  background: var(--b-bg);
  color: var(--b-fg);
  border: 1px solid var(--b-bd);
  transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
  will-change: transform;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
/* Forzar color del botón en todos los estados — anula a:hover global y
   cualquier herencia del header que pondría las letras en blanco/negro
   indeseados durante hover/focus. */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited { color: var(--b-fg); }
.btn--lg    { padding: 16px 26px; font-size: 1rem; }
.btn--sm    { padding: 8px 14px; font-size: .85rem; }
.btn--block { display: flex; width: 100%; }
.btn--primary {
  --b-bg: var(--accent);
  --b-fg: var(--accent-ink);
  --b-bd: var(--accent);
}
.btn--primary:hover { --b-bg: var(--accent-2); }
.btn--ghost {
  --b-bg: transparent;
  --b-fg: currentColor;
  --b-bd: transparent;
}
.btn--ghost:hover { --b-bg: rgba(0,0,0,.04); }
.section--dark .btn--ghost:hover { --b-bg: rgba(255,255,255,.06); }
.btn--outline {
  --b-bg: transparent;
  --b-fg: var(--text);
  --b-bd: var(--border);
}
.btn--outline:hover { --b-bd: var(--text); }
/* Outline para fondos oscuros (hero) */
.btn--ghost-light {
  --b-bg: transparent;
  --b-fg: #fff;
  --b-bd: rgba(255,255,255,.22);
}
.btn--ghost-light:hover {
  --b-bg: rgba(255,255,255,.08);
  --b-bd: rgba(255,255,255,.4);
}
.btn__loading {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: none;
  animation: spin .9s linear infinite;
}
.btn.is-loading .btn__label { opacity: .55; }
.btn.is-loading .btn__loading { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Header / Nav ---------- */
/* === SITE HEADER ===
   - position: fixed para que se SUPERPONGA sobre el hero
     (la foto del fondo se ve atravesando el header, no debajo)
   - Top (no scroll): casi transparente con sutil gradient
   - Stuck (con scroll): glass premium claro u oscuro según sección
*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  /* Tema oscuro forzado: logo blanco, links blancos, gradient dark detrás */
  color: #fff;
  transition:
    background .35s var(--ease-out),
    backdrop-filter .35s var(--ease-out),
    border-color .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
/* Para anclas internas (#contacto, etc.) no quedan bajo el header */
html { scroll-padding-top: var(--header-h); }

/* Gradient dark detrás del header SIEMPRE — garantiza legibilidad del logo blanco
   sobre cualquier fondo (hero oscuro, página clara, productos, etc.).
   Mantenemos al menos .60 en toda la altura del header para que en páginas claras
   (productos, contacto, legales) el header arriba del todo se vea bien oscuro. */
.site-header:not(.is-stuck)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(7, 13, 18, .88) 0%,
    rgba(7, 13, 18, .78) 60%,
    rgba(7, 13, 18, .60) 100%);
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
}

/* Con scroll (is-stuck): glass oscuro premium con blur */
.site-header.is-stuck {
  background: rgba(7, 13, 18, .82);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
          backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.55);
}

/* Nav links blancos siempre, con accent al hover */
.site-header .nav__link {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.site-header .nav__link:hover { color: var(--accent); background: transparent; }
/* El botón "Soporte técnico" (relleno) no lleva sombra de texto.
   Hover/focus con la MISMA especificidad que .nav__link:hover (0,3,0) para
   que conserve su fondo verde y texto oscuro — el hover genérico del nav lo
   dejaba con fondo transparente y texto verde sobre verde → invisible. */
.site-header .nav__link--btn-primary { text-shadow: none; }
/* Hover del botón Soporte en TODOS los contextos: header normal, pegado
   (is-stuck) y sobre hero oscuro. El último selector iguala la especificidad
   (0,5,0) de la regla del hero oscuro que dejaba el botón sin fondo. */
.site-header .nav__link--btn-primary:hover,
.site-header .nav__link--btn-primary:focus-visible,
.page--has-dark-hero .site-header:not(.is-stuck) .nav__link--btn-primary:hover,
.page--has-dark-hero .site-header:not(.is-stuck) .nav__link--btn-primary:focus-visible {
  background: var(--accent-2, var(--accent));
  color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(194, 213, 0, .6);
}
.site-header .nav__link svg { color: rgba(255,255,255,.9); }
.site-header .hamburger span { background: #fff; }
.site-header__inner {
  height: var(--header-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.brand__img {
  height: 44px;
  width: auto;
  max-width: none;     /* anula el img{max-width:100%} global: el logo NO se encoge al estrecharse su columna */
  flex-shrink: 0;
  display: block;
  user-select: none;
}
/* Logo siempre blanco (versión "dark" = verde-blanco), independientemente del fondo.
   Las reglas de swap quedan deshabilitadas — el header tendrá su propio fondo si hace falta. */
.brand__img--light { display: none !important; }
.brand__img--dark  { display: block !important; }

.nav {
  display: flex;
  gap: 2px;
  justify-self: center;
  align-items: center;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  margin: 0 14px;
  border-radius: 0;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;        /* evita que "Soporte técnico"/"Aire acondicionado" partan en 2 líneas */
  color: var(--text-soft);
  transition: color .2s var(--ease-out);
  background: transparent;
  border: none;
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 38px;
  height: 4px;
  border-radius: 6px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link.is-active { color: var(--accent); }
.nav__link.is-active::after { transform: scaleX(1); opacity: 1; }
/* Cuando el header está sobre dark hero */
.page--has-dark-hero .site-header:not(.is-stuck) .nav__link { color: #f2f2f2; }
.page--has-dark-hero .site-header:not(.is-stuck) .nav__link:hover { color: var(--accent); background: transparent; }
.page--has-dark-hero .site-header:not(.is-stuck) .nav__link.is-active { color: var(--accent); }

.nav__group { position: relative; }

/* === Nav denso de categorías (Diagnosis, ADAS, … como items de 1er nivel) === */
.nav--cats { gap: 0; }
.nav--cats .nav__link { margin: 0 9px; font-size: .9rem; }
.nav--cats .nav__link--has-menu { cursor: pointer; }
/* Apretado graduado para que las 7 categorías + 2 botones quepan en 1 línea
   en los anchos intermedios antes de pasar a hamburguesa (≤1280px). */
@media (max-width: 1500px) {
  .nav--cats .nav__link { margin: 0 7px; font-size: .85rem; }
}
@media (max-width: 1360px) {
  .nav--cats .nav__link { margin: 0 5px; font-size: .82rem; }
  .nav--cats .nav__link--btn { padding: 8px 13px; }
  .site-header__inner { gap: 20px; }
}
/* Botones Contacto / Soporte al final del nav */
.nav__link--btn {
  padding: 8px 16px;
  margin: 0 0 0 8px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  transition: transform .2s var(--ease-out, ease), box-shadow .2s var(--ease-out, ease), background .2s var(--ease-out, ease);
}
.nav__link--btn::after { display: none !important; }
.nav__link--btn-outline { border: 1px solid var(--border); color: var(--text); }
.nav__link--btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.nav__link--btn-primary { background: var(--accent); color: var(--accent-ink); }
.nav__link--btn-primary:hover { background: var(--accent-2, var(--accent)); color: var(--accent-ink); filter: brightness(.96); }
/* FIX: cuando estás EN /soporte, el botón recibe .is-active y la regla
   .nav__link.is-active forzaba color verde sobre fondo verde. Mantener tinta
   oscura en el botón primario en cualquier estado (activo, hero oscuro, etc.). */
.nav--cats .nav__link--btn-primary,
.nav--cats .nav__link--btn-primary.is-active,
.page--has-dark-hero .site-header:not(.is-stuck) .nav--cats .nav__link--btn-primary,
.page--has-dark-hero .site-header:not(.is-stuck) .nav--cats .nav__link--btn-primary.is-active {
  color: var(--accent-ink);
}
.nav--cats .nav__link--btn-primary.is-active::after,
.nav--cats .nav__link--btn-outline.is-active::after { display: none !important; }
/* Botones legibles sobre hero oscuro */
.page--has-dark-hero .site-header:not(.is-stuck) .nav__link--btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }

/* Desplegable individual de cada categoría (estrecho, una columna).
   Especificidad .megamenu.megamenu--cat para ganar a la base .megamenu
   (que está definida más abajo con min-width:580px y padding:24px). */
.megamenu.megamenu--cat {
  min-width: 264px;
  max-width: 340px;
  padding: 14px 14px 12px;
}
.megamenu.megamenu--cat .megamenu__cat-head { margin-bottom: 6px; }

.megamenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.25);
  min-width: 580px;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.megamenu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.megamenu__inner { display: grid; grid-template-columns: 1fr 2.2fr; gap: 28px; }
.megamenu__inner--single { grid-template-columns: 1fr; }
.megamenu--small { min-width: 320px; }
.megamenu--small .megamenu__col--wide { border-left: 0; padding-left: 0; }
.megamenu__col { display: flex; flex-direction: column; gap: 6px; }
.megamenu__col--wide { border-left: 1px solid var(--border-soft); padding-left: 28px; }
.megamenu__title { text-transform: uppercase; font-size: .7rem; letter-spacing: .14em; color: var(--text-muted); margin: 0 0 8px; }
.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.megamenu__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .95rem;
  color: var(--text);
  transition: background .2s var(--ease-out);
}
.megamenu__link:hover { background: var(--bg-soft); }
.megamenu__link small { font-size: .78rem; color: var(--text-muted); }

/* === Megamenú de Productos (categorías + productos, multi-columna) === */
.megamenu--products {
  min-width: 720px;
  max-width: min(92vw, 940px);
  /* Alinea el borde izquierdo al trigger en vez de centrar (evita desbordar a la izquierda) */
  left: 0;
  transform: translateX(0) translateY(-6px);
  padding: 22px 24px 18px;
}
.megamenu--products.is-open { transform: translateX(0) translateY(0); }
.megamenu__products {
  column-count: 4;
  column-gap: 26px;
}
@media (max-width: 1100px) { .megamenu__products { column-count: 3; } }
.megamenu__cat-block {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 16px;
}
.megamenu__cat-head {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
  text-decoration: none;
  padding: 5px 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--border-soft);
  transition: color .15s var(--ease-out);
}
.megamenu__cat-head:hover { color: var(--accent-ink); }
/* Subcategoría dentro de un desplegable: bloque con borde lateral lima +
   indentación, para que se lea claramente como un grupo de productos. */
.megamenu__subgroup {
  position: relative;
  margin: 8px 0 4px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--accent);
}
.megamenu__subgroup:first-child { margin-top: 2px; }
.megamenu__subgroup + .megamenu__subgroup { margin-top: 10px; }
.megamenu__sublabel {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-ink);
  padding: 2px 8px 5px 4px;
}
.megamenu__prod {
  display: block;
  padding: 6px 8px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s var(--ease-out);
}
.megamenu__prod:hover { background: var(--bg-soft); }
.megamenu__prod strong { display: block; font-weight: 600; font-size: .86rem; line-height: 1.2; }
.megamenu__prod small { display: block; font-size: .74rem; color: var(--text-muted); line-height: 1.25; margin-top: 1px; }
.megamenu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.megamenu__viewall {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.megamenu__viewall::after { content: '→'; transition: transform .15s var(--ease-out); }
.megamenu__viewall:hover::after { transform: translateX(3px); }
.megamenu__footer-actions { display: inline-flex; gap: 8px; }

.header-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }

/* === Lang switcher === */
.lang-switcher { position: relative; }
.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 100px;
  /* Texto blanco siempre — coherente con header dark forzado */
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.lang-switcher__btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.lang-switcher__btn svg { color: rgba(255,255,255,.9); }
.lang-switcher__flag {
  display: inline-flex;
  width: 22px; height: 15px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.lang-switcher__flag svg { width: 100%; height: 100%; display: block; }
.lang-switcher__code { letter-spacing: .06em; }
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(20, 26, 35, .92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.5);
  min-width: 180px;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .25s var(--ease-out);
}
.lang-switcher__menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-switcher__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #f2f2f2;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}

/* HOVER — fuerza color blanco sobre menú oscuro */
.lang-switcher__item:hover {
  background: rgba(255,255,255,.10);
  color: #fff !important;
}

/* ITEM ACTIVO (el idioma actual): siempre en lima */
.lang-switcher__item.is-active,
.lang-switcher__item.is-active:hover {
  background: var(--accent-soft);
  color: var(--accent) !important;
}

/* Mobile lang strip */
.mobile-drawer__lang {
  display: flex;
  gap: 10px;
  padding: 16px 8px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin: 8px 0;
}
.mobile-drawer__flag {
  width: 32px; height: 22px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-flex;
  border: 2px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.mobile-drawer__flag.is-active { border-color: var(--accent); }
.mobile-drawer__flag svg { width: 100%; height: 100%; }
/* Botón del header — coherente con el resto de .btn--primary
   (sin sombra dura que rompía la consistencia) */
.header-actions .btn--primary {
  padding: 12px 24px;
  font-weight: 600;
  font-size: .92rem;
}

.hamburger { display: none; background: transparent; border: none; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s var(--ease-out); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-drawer {
  display: none;
  padding: 16px 24px 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  gap: 4px;
  flex-direction: column;
  /* El drawer vive dentro del header fixed: sin esto la lista larga se sale de
     pantalla y no se puede hacer scroll. Limitamos a la altura visible y damos
     scroll interno propio. */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* color explícito: en páginas con hero oscuro el header hace el texto blanco y
   estos links (sin color propio) se volvían invisibles sobre el fondo claro del drawer */
.mobile-drawer__link { display: block; color: var(--text); padding: 12px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--border-soft); }
.mobile-drawer__sublink { padding: 8px 8px 6px 24px; font-size: .95rem; font-weight: 600; color: var(--text); }
.mobile-drawer__prod { padding: 5px 8px 5px 38px; font-size: .86rem; color: var(--text-soft); }
.mobile-drawer__prod:last-of-type { margin-bottom: 4px; }
.mobile-drawer__gaslabel { display: block; margin: 6px 0 2px 38px; padding: 4px 0 4px 10px; border-left: 2px solid var(--accent); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink); }

/* Acordeón del drawer móvil (plegado por defecto). Soporta anidamiento:
   "Productos" (1er nivel) → categorías (2º nivel) → productos. Usamos combinador
   HIJO (>) para que abrir un nivel no despliegue los de dentro. */
.mobile-acc { border-bottom: 1px solid var(--border-soft); }
.mobile-acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left;
  padding: 12px 8px; font-size: 1rem; font-weight: 700; color: var(--text);
}
.mobile-acc__chev { flex-shrink: 0; color: var(--text-muted); transition: transform .22s var(--ease-out); }
.mobile-acc.is-open > .mobile-acc__head .mobile-acc__chev { transform: rotate(180deg); }
/* ADAS / Alineación: categoría-enlace directa (mismo aspecto que las plegables) */
.mobile-acc__head--link { border-bottom: 1px solid var(--border-soft); text-decoration: none; }
.mobile-acc__body { display: none; flex-direction: column; padding: 0 0 8px; }
.mobile-acc.is-open > .mobile-acc__body { display: flex; }
.mobile-drawer__prod--all { font-weight: 700; color: var(--accent-ink) !important; }

/* "Productos" = acordeón de 1er nivel (más prominente). Las categorías de dentro
   van ligeramente indentadas para mostrar la jerarquía. */
.mobile-acc--top > .mobile-acc__head--top { font-size: 1.05rem; }
.mobile-acc__body--cats { padding-left: 6px; border-left: 2px solid var(--border-soft); margin-left: 6px; }
.mobile-acc__body--cats .mobile-acc:last-child,
.mobile-acc__body--cats .mobile-acc__head--link:last-child { border-bottom: 0; }

@media (max-width: 1280px) {
  /* Nav denso de 7 categorías + 2 botones → pasa a drawer móvil antes
     (subido de 1100→1280: el rango 1100-1280 quedaba demasiado apretado). */
  .nav { display: none; }
  .header-actions .btn { display: none; }
  .header-actions .btn--primary { display: inline-flex; }
  .hamburger { display: inline-block; }
  .mobile-drawer.is-open { display: flex; }
}

/* ===========================================================
   HERO (simple, fiel al mockup: foto fondo + texto + tablet + 3 features)
=========================================================== */
.hero {
  position: relative;
  /* min-height razonable: nunca menor a 560px, ideal 85dvh, máximo 820px
     — evita forzar scroll completo antes de ver productos */
  min-height: clamp(560px, 85dvh, 820px);
  background: #1f1f1f;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Capa 1: imagen de fondo del taller que ocupa todo el hero */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* ruta RELATIVA al propio .css: vale igual en /webefitaller/ que en la raíz */
    url("../img/brand/bg-header-home-adas.webp?v=2") center/cover no-repeat;
  pointer-events: none;
}

/* Capa 2: overlay oscuro horizontal — más fuerte a la izquierda (legibilidad)
   y más suave a la derecha (deja ver el taller del fondo) */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,13,18,.92) 0%, rgba(7,13,18,.78) 35%, rgba(7,13,18,.45) 65%, rgba(7,13,18,.25) 100%),
    radial-gradient(75% 60% at 75% 50%, rgba(194, 213, 0,.06), transparent 60%);
  pointer-events: none;
}

/* El copy ocupa la mitad izquierda; la derecha queda con la foto del taller a la vista */
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--header-h) + 32px) 24px 24px;
  display: flex;
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner {
    padding: calc(var(--header-h) + 16px) 24px 24px;
  }
}

/* === COPY (izquierda) === */
.hero__copy {
  max-width: 600px;
  width: 100%;
}

.hero__title {
  margin: 0 0 22px;
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
  font-weight: 800;            /* antes 900 — jerarquía equilibrada con los H2 */
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,0.55);
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__title br { display: block; }
/* Cada línea del título en su propio bloque y sin romperse internamente.
   Garantiza 2 líneas exactas: "Equipamos tu taller" / "para llevarlo más lejos". */
.hero__title-line {
  display: block;
  white-space: nowrap;
}
/* En móvil/tablet permitimos que el título se rompa: con nowrap "para llevarlo
   más lejos" (~441px) desbordaba en móviles de 390-540px. En desktop sigue en
   2 líneas exactas. */
@media (max-width: 768px) {
  .hero__title-line { white-space: normal; }
}

.hero__subtitle {
  margin: 0 0 36px;
  font-size: clamp(1rem, .9rem + .35vw, 1.25rem);
  font-weight: 500;
  color: rgba(240,242,243,.88);
  max-width: 540px;
  line-height: 1.55;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.hero__cta .btn {
  min-width: 180px;
  padding: 16px 26px;
  border-radius: 100px;
  font-weight: 800;
  font-size: .95rem;
}
.hero__cta .btn--primary {
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
.hero__cta .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 rgba(0,0,0,.5);
}
.hero__cta .btn--primary:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.hero__cta .btn--ghost-light {
  background: rgba(255,255,255,.06);
  border-width: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* === VISUAL derecha (tablet) === */
.hero__visual {
  position: relative;
  justify-self: end;
  width: clamp(320px, 48vw, 620px);
  aspect-ratio: 4 / 3;
}
.hero__visual::before {
  /* Glow lima detrás del tablet */
  content: "";
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  background:
    radial-gradient(55% 55% at 50% 50%, rgba(194, 213, 0,.22), transparent 65%),
    radial-gradient(80% 50% at 50% 90%, rgba(0,0,0,.45), transparent 70%);
  filter: blur(30px);
}
.hero__visual-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6));
  animation: heroDeviceFloat 6s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroDeviceFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}
@media (max-width: 900px) {
  .hero__visual { justify-self: center; width: clamp(280px, 80vw, 500px); }
}

/* === FEATURES inferiores (3 píldoras con icono circular lima) === */
.hero__features {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0 auto;
  padding: 24px;
  max-width: var(--container);
  width: 100%;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(7,13,18,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__features li {
  display: flex; align-items: center; gap: 14px;
  flex: 1;
  min-width: 200px;
}
.hero__features-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* Sin caja: el icono lima nativo se ve directamente sobre el hero oscuro.
     Sin hover effect — no son botones, son indicadores visuales. */
}
/* Iconos SVG inline (fallback) — mismo tamaño que el img */
.hero__features-icon svg {
  width: 56px; height: 56px;
  color: var(--accent);
  stroke-width: 1.8;
}
/* Iconos PNG/SVG cargados como <img> — lima nativo, sin filter ni caja */
.hero__features-icon img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.hero__features strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.hero__features span {
  display: block;
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 760px) {
  /* Mobile: 3 columnas compactas con icono ARRIBA y texto debajo, centrado.
     Patrón clásico de "trust badges" — más limpio que 3 tarjetas stacked. */
  .hero__features {
    flex-direction: row;
    justify-content: space-around;
    gap: 8px;
    padding: 18px 12px;
  }
  .hero__features li {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    flex: 1;
    text-align: center;
  }
  .hero__features-icon svg,
  .hero__features-icon img { width: 36px; height: 36px; }
  .hero__features strong {
    font-size: .82rem;
    line-height: 1.2;
    color: #fff;
  }
  .hero__features span {
    font-size: .68rem;
    line-height: 1.3;
    color: rgba(255,255,255,.65);
  }
}
@media (max-width: 380px) {
  /* En pantallas muy estrechas (iPhone SE) ocultamos el subtítulo
     para no apretar los 3 items en 320px de ancho */
  .hero__features span { display: none; }
  .hero__features strong { font-size: .76rem; }
}

/* ===========================================================
   PRODUCT GRID & CARDS
=========================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px)  { .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px)  { .product-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   CATEGORY GRID — usado en la home para mostrar 6 categorías
   (3 columnas × 2 filas en desktop, responsive abajo)
=========================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 960px) { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .category-grid { grid-template-columns: 1fr; } }

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -28px rgba(0,0,0,.18);
  border-color: var(--accent);
}
.category-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f7f0 0%, #ebf0e3 100%);
}
.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.category-card:hover .category-card__media img { transform: scale(1.05); }
.category-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.category-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.category-card__desc {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-soft);
  flex: 1;
}
.category-card__arrow {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  align-self: flex-start;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.category-card:hover .category-card__arrow {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateX(4px);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  /* Borde lima permanente — se intensifica al hacer hover */
  border: 1px solid rgba(194, 213, 0, .60);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .25s var(--ease-out), box-shadow .35s var(--ease-out);
  isolation: isolate;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px -22px rgba(194, 213, 0, .35);
}
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #f4f4f5 0%, #e7e7eb 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__media-fallback { color: var(--text-muted); }
.product-card__cat {
  position: absolute; top: 12px; left: 12px;
  background: rgba(15,15,17,.78);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}
.product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.product-card__title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.product-card__desc {
  margin: 0;
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Flecha siempre visible debajo del texto, negra fina, lima al hacer hover */
.product-card__arrow {
  position: static;
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  color: var(--text);
  background: transparent;
  width: auto; height: auto;
  border-radius: 0;
  opacity: 1;
  transform: none;
  transition: transform .35s var(--ease-out), color .25s var(--ease-out);
}
.product-card__arrow svg {
  stroke-width: 1.25;       /* flecha fina */
  width: 22px; height: 22px;
}
.product-card:hover .product-card__arrow {
  color: var(--accent);     /* al hover pasa a verde lima */
  transform: translateX(4px);
}

/* ===========================================================
   BENEFITS (card oscura grande con 4 ventajas limpias)
=========================================================== */
.benefits {
  /* la sección no aporta fondo — el wrap interior es el card */
  background: transparent;
  border: 0;
  padding: 64px 0;
}
.benefits .container { padding: 0 24px; }

/* Wrapper visual: card grande con fondo gris-azulado, padding amplio */
.benefits .section__header,
.benefits__grid {
  max-width: var(--container);
  margin: 0 auto;
}
.benefits__card {
  background: #1a212c;
  border-radius: 20px;
  padding: 56px 52px;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
}
.benefits__card .section__header {
  margin-bottom: 40px;
  text-align: left;
  align-items: flex-start;
  display: flex; flex-direction: column; gap: 8px;
}
.benefits__card .eyebrow {
  color: var(--accent);
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
}
.benefits__card .section__title {
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
  max-width: none;
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}
@media (max-width: 900px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 540px) { .benefits__grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 720px) { .benefits__card { padding: 36px 24px; } }

.benefit {
  background: transparent;
  padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.benefit__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(194, 213, 0,.10);
  border: 1px solid rgba(194, 213, 0,.18);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.benefit__icon svg { width: 26px; height: 26px; }
.benefit__title {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.benefit__body {
  margin: 0;
  color: rgba(220,228,238,.65);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.55;
}

/* ===========================================================
   EXPERIENCE (coche rotando)
=========================================================== */
.experience {
  background: var(--bg);
  position: relative;
  overflow: visible;     /* los iconos pueden salir del stage */
  padding: 240px 0;      /* mucho aire — los iconos no chocan con Ventajas ni Distribuidores */
}
.experience__container {
  display: grid;
  grid-template-columns: 1fr 1.3fr;   /* el stage del coche con más peso */
  gap: 48px;
  align-items: center;
}
@media (max-width: 960px) {
  .experience__container { grid-template-columns: 1fr; gap: 32px; }
}
.experience__copy {
  max-width: 600px;
  position: relative;
  z-index: 1;             /* texto a nivel bajo para que la órbita pueda pisarlo */
}
/* Stage entero por ENCIMA del texto — los iconos al orbitar pasan por delante
   del texto izquierdo creando sensación de profundidad. */
.experience__stage { z-index: 5; }
.experience__orbit { position: absolute; inset: 0; z-index: 6; }
/* Lista en GRID 3 columnas → el bloque queda compacto verticalmente.
   Así los iconos que orbitan por la izquierda pasan POR ENCIMA del texto
   dando sensación de profundidad (z-index). */
.experience__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.experience__list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.experience__list-num {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
}
.experience__list strong { display: block; font-size: .92rem; font-weight: 700; line-height: 1.25; }
.experience__list p { margin: 4px 0 0; color: var(--text-soft); font-size: .82rem; line-height: 1.45; }

/* En tablet/mobile vuelve a stack (vertical) */
@media (max-width: 960px) {
  .experience__list { grid-template-columns: 1fr; gap: 14px; }
  .experience__list li { flex-direction: row; align-items: start; gap: 14px; }
}

.experience__stage {
  position: relative;
  aspect-ratio: 1 / 1.04;
  max-width: 740px;        /* stage MÁS GRANDE → coche más grande */
  margin: 0 auto;
  justify-self: center;
  /* Truco: desplazamos el stage entero a la izquierda con transform
     (sin afectar al grid). Así los iconos del lado oeste de la órbita
     pasan sobre el texto izquierdo aunque la órbita esté cerrada. */
  transform: translateX(-80px);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(194, 213, 0,.12), transparent 65%),
    linear-gradient(180deg, #fafbfc 0%, #ebedf0 100%);
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  overflow: visible;
  isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  --intensity: 0;
  will-change: transform, opacity;
}
.experience__stage-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(194, 213, 0,.18), transparent 60%);
  filter: blur(20px);
  z-index: -1;
  /* La animación de "respiración" la maneja GSAP (glowAnim) que se pausa al
     salir del viewport. La keyframe-CSS infinita estaba duplicando trabajo. */
}
@keyframes stageBreath {
  0%   { transform: scale(.95); opacity: .55; }
  100% { transform: scale(1.06); opacity: 1; }
}
.experience__car {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  z-index: 1;
}
.experience__car img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.18));
  transform-origin: 50% 50%;
  will-change: transform;
}
.experience__stage-tag {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  letter-spacing: .14em;
  background: var(--text);
  color: #fff;
  padding: 6px 14px;
  border-radius: 100px;
  text-transform: uppercase;
  z-index: 5;
}

/* ===== Orbit con iconos ===== */
.experience__orbit {
  position: absolute;
  inset: 0;
  will-change: transform;
  pointer-events: none;
}
.experience__orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--ring-d, 940px);
  height: var(--ring-d, 940px);
  margin: calc(-1 * var(--ring-d, 940px) / 2) 0 0 calc(-1 * var(--ring-d, 940px) / 2);
  border-radius: 50%;
  border: 1.5px dashed rgba(91, 100, 0, .22);
  pointer-events: none;
  opacity: 0;
}
/* @property registra las CSS variables como animables por GSAP (spiral entrante).
   Sin este registro, animar custom properties no transiciona, solo salta. */
@property --r {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.experience__icon {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  /* Spiral entrante desde 580px → orbit-r final, --spin 720° → 0° */
  --r: 580px;
  --spin: 720deg;
  transform: translate3d(-50%, -50%, 0)
             rotate(calc(var(--angle, 0deg) + var(--spin)))
             translateY(calc(-1 * var(--r)));
  will-change: transform, opacity;
}
.experience__icon-inner {
  position: absolute;
  top: 50%; left: 50%;
  width: 78px; height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--border-soft);
  box-shadow: 0 16px 32px -14px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
  /* La rotación inversa la escribe el JS cada frame (combina orbit + angle + spin) */
  will-change: transform;
}
.experience__icon-inner svg,
.experience__icon-inner img { width: 36px; height: 36px; object-fit: contain; display: block; }
@media (max-width: 1100px) {
  .experience__icon-inner { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 18px; }
  .experience__icon-inner svg,
  .experience__icon-inner img { width: 32px; height: 32px; }
}
@media (max-width: 760px) {
  .experience__container { grid-template-columns: 1fr; gap: 32px; }
  /* En mobile el grid colapsa: stage centrado, sin translate */
  .experience__stage { max-width: 320px; transform: none; }
  /* Spiral start más cerca (no se sale del viewport) */
  .experience__icon { --r: 240px; }
  .experience__icon-inner { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 16px; }
  .experience__icon-inner svg,
  .experience__icon-inner img { width: 26px; height: 26px; }
}
/* Órbita: amplia en desktop (cruza texto izq), cerrada en mobile (cabe en viewport) */
.experience__stage { --orbit-r: 360px; --ring-d: 820px; }
@media (max-width: 1100px) {
  .experience__stage { --orbit-r: 310px; --ring-d: 700px; }
}
@media (max-width: 760px) {
  /* Órbita amplia en mobile — los iconos llegan casi al borde del viewport
     pero se mantienen visibles (overflow-x:hidden los recorta si pasan). */
  .experience__stage { --orbit-r: 175px; --ring-d: 400px; }
}

/* ===========================================================
   DISTRIBUTOR (card split: copy izquierda + imagen+features derecha)
=========================================================== */
.distributor {
  background: transparent;
  padding: 64px 0;
}
.distributor .container { padding: 0 24px; }

.distributor__card {
  position: relative;
  isolation: isolate;
  background: #1a212c;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
  min-height: 280px;
}
/* Imagen de fondo ocupando TODA la card */
.distributor__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/brand/bg-red-distribuidores.webp") center/cover no-repeat;
}
/* Overlay horizontal: muy oscuro a la izquierda (legibilidad copy) y suave a la derecha */
.distributor__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(26,33,44,.96) 0%,
      rgba(26,33,44,.88) 30%,
      rgba(26,33,44,.65) 55%,
      rgba(26,33,44,.45) 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .distributor__card { grid-template-columns: 1fr; }
  /* En móvil el overlay se vuelve vertical para legibilidad */
  .distributor__card::after {
    background:
      linear-gradient(180deg,
        rgba(26,33,44,.96) 0%,
        rgba(26,33,44,.88) 35%,
        rgba(26,33,44,.70) 65%,
        rgba(26,33,44,.55) 100%);
  }
}

/* === Copy izquierda === */
.distributor__copy {
  position: relative;
  z-index: 2;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
.distributor__copy .eyebrow {
  color: var(--accent);
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
}
.distributor__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.distributor__title em {
  font-style: normal;
  color: var(--accent);
}
.distributor__subtitle {
  margin: 0;
  color: rgba(220,228,238,.65);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 38ch;
}
.distributor__copy .btn--primary {
  margin-top: 8px;
  padding: 14px 26px;
  font-weight: 800;
}
@media (max-width: 720px) {
  .distributor__copy { padding: 36px 28px; align-items: stretch; }
  .distributor__copy .btn--primary {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 16px 22px;     /* área de toque mayor en mobile */
  }
  .distributor__subtitle { max-width: 100%; }
}

/* === Features (sobre la imagen+overlay de la card) === */
.distributor__features {
  position: relative;
  z-index: 2;
  min-height: 240px;
}
/* Los antiguos sub-fondos ya no se usan — la card entera lleva la imagen */
.distributor__features-bg,
.distributor__features-overlay { display: none; }
.distributor__features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100%;
  align-items: center;
}
.dist-feat {
  padding: 32px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-right: 1px solid rgba(194, 213, 0, .18);
  position: relative;
}
.dist-feat:last-child { border-right: 0; }
.dist-feat__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(194, 213, 0,.10);
  border: 1px solid rgba(194, 213, 0,.20);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dist-feat__title {
  margin: 0;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 18ch;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
@media (max-width: 720px) {
  .distributor__features-grid { grid-template-columns: 1fr; }
  .dist-feat {
    border-right: 0;
    border-bottom: 1px solid rgba(194, 213, 0,.15);
    padding: 22px;
  }
  .dist-feat:last-child { border-bottom: 0; }
}

/* ===========================================================
   PROCESS — 3 pasos con barra animada + cards snap-in + counter
=========================================================== */
.section.process { position: relative; overflow: hidden; }

/* Línea vertical de sombra que sigue el leading edge del fill (animada por JS) */
.process__bg-shadow {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent-dark) 25%,
    var(--accent) 50%,
    var(--accent-dark) 75%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
  filter: blur(1px);
  will-change: transform, opacity;
  z-index: 0;
}

.section__header--centered .section__title { text-align: center; margin: 14px auto 0; max-width: 18ch; }
.section__title--centered { text-align: center; }

.process-rail {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  /* Cronograma vertical — sin gap entre items para que la barra "una" las cards */
  .process-rail { grid-template-columns: 1fr; gap: 0; }
}

.process-step {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px;
  max-width: 320px;
  margin: 0 auto;
  /* Estado inicial para la animación snap-in (revelado al hacer scroll).
     OJO: NO añadir aquí una regla `.anim-ready .process-step { opacity: 1 }`
     porque dispararía la visibilidad antes del scroll trigger. La animación
     ya usa gsap.fromTo() que controla el estado inicial vía JS. */
  opacity: 0;
  transform: translateY(40px) scale(.96);
  will-change: transform, opacity;
}
.no-js .process-step { opacity: 1; transform: none; }
.process-step__top {
  position: relative;
  margin-bottom: 22px;
}
.process-step__card {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--border-soft);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: box-shadow .35s var(--ease-out);
  transform-origin: center;
  will-change: transform;
}
.process-step__card:hover {
  box-shadow: 0 20px 36px -16px rgba(0,0,0,.22);
}
.process-step__icon svg {
  width: 38px; height: 38px;
}
.process-step__num {
  position: absolute;
  top: -12px; left: -12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--text);
  border: 0;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;  /* dígitos no saltan durante el counter 0→N */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.4);
}
.process-step__title {
  margin: 6px 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.process-step__body {
  margin: 0;
  color: var(--text-soft);
  font-size: .94rem;
  line-height: 1.55;
  max-width: 28ch;
}

/* Conector — usa CSS variable --fill (0→1) que JS actualiza durante el scroll.
   Desktop: barra HORIZONTAL que se llena de izquierda a derecha.
   Mobile:  barra VERTICAL (cronograma) que se llena de arriba a abajo. */
.process-connector {
  position: relative;
  align-self: center;
  margin-top: 38px;        /* alinear con el centro de los cards */
  display: flex;
  align-items: center;
  min-width: 100px;
  padding: 0 14px;
  width: 100%;
  --fill: 0;
}
.process-connector__bar {
  position: relative;
  flex: 1;
  height: 10px;
  /* puntitos grises horizontales */
  background-image: radial-gradient(circle, var(--border) 2.4px, transparent 2.6px);
  background-size: 12px 10px;
  background-position: 0 50%;
  background-repeat: repeat-x;
  overflow: hidden;
}
.process-connector__fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  right: calc((1 - var(--fill, 0)) * 100%);   /* se llena de izquierda a derecha */
  /* mismos puntitos pero en lima */
  background-image: radial-gradient(circle, var(--accent) 2.6px, transparent 2.8px);
  background-size: 12px 10px;
  background-position: 0 50%;
  background-repeat: repeat-x;
  will-change: right;
  filter: drop-shadow(0 0 4px rgba(194, 213, 0, .55));  /* glow sutil */
}
/* Cabezal brillante que viaja delante del fill — pequeño LED que recorre la barra */
.process-connector__head {
  position: absolute;
  top: 50%;
  right: calc((1 - var(--fill, 0)) * 100%);
  width: 14px; height: 14px;
  margin-top: -7px;
  margin-right: -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 12px var(--accent),
    0 0 24px rgba(194, 213, 0, .55),
    0 0 4px #fff inset;
  opacity: 0;
  will-change: right, opacity;
}

/* MOBILE: barra VERTICAL como cronograma (arriba → abajo).
   Diseño SÓLIDO (no puntitos) — mucho más visible en pantallas pequeñas. */
@media (max-width: 900px) {
  .process__bg-shadow { display: none; }

  .process-connector {
    width: 8px;              /* MÁS ancho para que sea visible */
    height: 90px;
    min-width: 0;
    margin: 8px auto;
    padding: 0;
    transform: none;
    display: block;
    overflow: visible;
    will-change: auto;
  }
  .process-connector__bar {
    position: relative;
    width: 100%;
    height: 100%;
    flex: none;
    /* Color oscuro/visible — #e0e0e0 (--border) era casi invisible sobre bg-soft */
    background: rgba(31, 31, 31, .12);    /* gris medio sobre fondo claro */
    background-image: none;
    border-radius: 4px;
    overflow: visible;
  }
  .process-connector__fill {
    position: absolute;
    top: 0;
    bottom: calc((1 - var(--fill, 0)) * 100%);
    left: 0; right: 0;
    /* Lima sólido con gradient + glow brillante */
    background: linear-gradient(180deg, var(--accent-dark) 0%, var(--accent) 100%);
    background-image: linear-gradient(180deg, var(--accent-dark) 0%, var(--accent) 100%);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(194, 213, 0, .65);
    will-change: bottom;
  }
  .process-connector__head {
    position: absolute;
    top: auto;
    left: 50%; right: auto;
    bottom: calc((1 - var(--fill, 0)) * 100%);
    width: 20px; height: 20px;       /* cabezal más grande */
    margin-left: -10px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -10px;
    will-change: bottom, opacity;
    box-shadow:
      0 0 14px var(--accent),
      0 0 28px rgba(194, 213, 0, .6),
      0 0 4px #fff inset;
  }

  /* Reducir GPU layers en mobile — solo lo que se mueve continuamente lo mantiene */
  .process-step,
  .process-step__card,
  .experience__car,
  .experience__stage { will-change: auto; }
}

/* ===========================================================
   HOME CONTACT
=========================================================== */
.home-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .home-contact__inner { grid-template-columns: 1fr; gap: 32px; } }

.home-contact__points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--text-soft);
}
.home-contact__points li { display: flex; align-items: center; gap: 10px; }

/* ===========================================================
   FORMS
=========================================================== */
.quote-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.20);
}
.quote-form--page { padding: 36px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .field--row { grid-template-columns: 1fr; } }

.field label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .96rem;
  color: var(--text);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--text);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.field__error {
  color: #b91c1c;
  font-size: .82rem;
  min-height: 1em;
}
.quote-form__legal {
  margin: 0;
  font-size: .78rem;
  color: var(--text-muted);
  text-align: center;
}
.quote-form__legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ===========================================================
   SPK FORM — Dark form (estándar único de la web)
   Patrón unificado para contacto, home, presupuesto y productos.
   Uso:
     <div class="spk-form-card">
       <form class="spk-form">...</form>
     </div>
=========================================================== */
.spk-form-card {
  position: relative;
  background: linear-gradient(135deg, #1f1f1f 0%, #1a2530 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 32px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px -36px rgba(0,0,0,.5);
}
.spk-form-card::before {
  content: '';
  position: absolute;
  bottom: -200px;
  right: -100px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 213, 0, .10) 0%, transparent 65%);
  pointer-events: none;
}
.spk-form-card > * { position: relative; z-index: 1; }

.spk-form { display: flex; flex-direction: column; gap: 16px; }
.spk-form .spk-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.spk-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  font-weight: 400;
}
.spk-form label > span {
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.spk-form input,
.spk-form textarea,
.spk-form select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
  box-sizing: border-box;
}
.spk-form textarea { resize: vertical; min-height: 110px; }
.spk-form input::placeholder,
.spk-form textarea::placeholder { color: rgba(255,255,255,.4); }
.spk-form input:focus-visible,
.spk-form textarea:focus-visible,
.spk-form select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 213, 0, .25);
}
/* Select normalizado para verse idéntico al input */
.spk-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.6'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.spk-form select:disabled { cursor: not-allowed; opacity: .55; }
.spk-form select option { background: #1f1f1f; color: #fff; }

.spk-form .spk-req { color: var(--accent); font-weight: 700; margin-left: 2px; }
.spk-form .spk-legend {
  text-align: right;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 4px;
}
.spk-form .spk-error {
  color: #fda4af;
  font-size: .82rem;
  margin-top: 2px;
}
.spk-form .spk-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  line-height: 1.4;
}
.spk-form .spk-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  padding: 0;
}
.spk-form .spk-submit {
  width: 100%;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.spk-form .spk-legal {
  margin: 0;
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.spk-form .spk-legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.spk-form-card__header {
  text-align: center;
  margin: 0 0 28px;
}
.spk-form-card__eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.spk-form-card__title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.spk-form-card__lede {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 1rem;
}

@media (max-width: 540px) {
  .spk-form-card { padding: 24px 20px; }
}

/* ===========================================================
   CONTACT PAGE
=========================================================== */
.contact-grid__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid__inner { grid-template-columns: 1fr; }
}
.contact-grid__aside { display: flex; flex-direction: column; gap: 12px; }
.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.contact-card:hover { border-color: var(--border); transform: translateY(-1px); }
.contact-card h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.contact-card p  { margin: 0 0 8px; color: var(--text-soft); font-size: .92rem; }
.contact-card__link {
  display: inline-block;
  font-size: .94rem;
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease-out);
}
.contact-card__link:hover { border-bottom-color: var(--accent); }
.contact-card--quiet { background: var(--bg-soft); border-style: dashed; }
.contact-card--quiet:hover { transform: none; }

/* ===========================================================
   PAGE HERO (sub-páginas)
=========================================================== */
.page-hero {
  padding: calc(var(--header-h) + 56px) 0 56px;
  background:
    radial-gradient(60% 80% at 70% 0%, rgba(194, 213, 0,.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.page-hero--compact { padding: calc(var(--header-h) + 24px) 0 24px; }
.page-hero__title {
  margin: 12px 0 14px;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.page-hero__lede { color: var(--text-soft); max-width: 64ch; }

.breadcrumbs { display: flex; gap: 8px; font-size: .82rem; color: var(--text-muted); align-items: center; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs__current { color: var(--text); }

/* ===========================================================
   CATALOG (listado)
=========================================================== */
.catalog {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .catalog { grid-template-columns: 1fr; }
}
.catalog__sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
.catalog__sidebar-title { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--text-muted); margin: 0 0 12px; }
.catalog__sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.catalog__sidebar a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .95rem;
  color: var(--text-soft);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.catalog__sidebar a:hover { background: rgba(0,0,0,.04); color: var(--text); }
.catalog__sidebar a.is-active { background: var(--text); color: #fff; }

/* Sidebar de categorías en HORIZONTAL (chips) cuando el catálogo se apila (≤900px).
   Va DESPUÉS de las reglas base para ganar en cascada (misma especificidad → manda
   el orden de origen); antes lo pisaba el flex-direction:column base. */
@media (max-width: 900px) {
  .catalog__sidebar { position: static; margin-bottom: 12px; }
  .catalog__sidebar ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .catalog__sidebar a { padding: 8px 14px; font-size: .85rem; border-radius: 100px; background: var(--bg-soft); color: var(--text-soft); }
  .catalog__sidebar a.is-active { background: var(--text); color: #fff; }
}

.catalog-filter { margin-top: 20px; }
.catalog-filter__search {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 6px 4px 16px;
  max-width: 520px;
}
.catalog-filter__search input { flex: 1; border: 0; outline: none; background: transparent; padding: 10px 0; font-size: .96rem; }
.catalog-filter__search svg { color: var(--text-muted); }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 16px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-soft);
}
.empty__art { display: inline-flex; padding: 16px; border-radius: 16px; background: var(--bg-soft); color: var(--text-muted); margin-bottom: 16px; }
.empty h3 { margin: 0 0 6px; color: var(--text); }
.empty a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================
   PRODUCT DETAIL
=========================================================== */
.product-detail__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .product-detail__grid { grid-template-columns: 1fr; }
}
.product-detail__main {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f4f4f5 0%, #e7e7eb 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.product-detail__main img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__main-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.product-detail__thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 0;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__thumb:hover { transform: translateY(-1px); }
.product-detail__thumb.is-active { border-color: var(--text); }

.product-detail__copy { padding-top: 8px; }
.product-detail__title {
  margin: 12px 0 14px;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  font-weight: 600;
}
.product-detail__lede { color: var(--text-soft); font-size: 1.05rem; margin: 0; }
.product-detail__body {
  margin-top: 20px;
  color: var(--text-soft);
  font-size: .98rem;
  line-height: 1.7;
}
.product-detail__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 24px; }
.product-detail__features {
  list-style: none; margin: 16px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px;
  color: var(--text-soft);
}
.product-detail__features li { display: flex; align-items: center; gap: 10px; font-size: .94rem; }

.product-detail__form-wrap { max-width: 760px; margin: 0 auto; }

/* ===========================================================
   FOOTER
=========================================================== */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.65);
  padding: 64px 0 24px;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* 5 columnas: Brand (más ancho) + Catálogo + Empresa + Contacto + ECO-RAEE */
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr 1.1fr;
  gap: 36px;
}
@media (max-width: 1100px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}
.site-footer__tagline { margin: 14px 0 0; max-width: 36ch; color: rgba(255,255,255,.5); font-size: .92rem; }
.site-footer__title { margin: 0 0 16px; color: #fff; font-size: .92rem; font-weight: 600; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
.site-footer__col a { color: rgba(255,255,255,.65); transition: color .2s var(--ease-out); }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom {
  max-width: var(--container);
  margin: 48px auto 0;
  padding: 24px 24px 0;
  border-top: 1px solid var(--dark-border);
  display: flex; justify-content: space-between; align-items: center;
  color: rgba(255,255,255,.4);
  font-size: .82rem;
}
.site-footer__credit { color: var(--accent); }

/* ===== Redes sociales del footer ===== */
.site-footer__social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.site-footer__social a:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px);
}

/* ===== ECO-RAEE's — columna del footer junto a "Contacto" =====
   Logo en blanco (filtro brightness/invert) para encajar con el footer oscuro,
   mismo aspecto que el resto de columnas — sin caja, sin fondo. */
.site-footer__col--eco { /* hereda estilos base de .site-footer__col */ }
.site-footer__eco-logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 0 12px;
  /* Logo original tal cual — el fondo blanco del PNG actúa como pequeña etiqueta sobre el footer */
}
.site-footer__eco-meta {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255,255,255,.5);
}

/* ===========================================================
   404
=========================================================== */
.error-page {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(194, 213, 0,.10), transparent 70%),
    var(--bg);
}
.error-page__inner { text-align: center; padding: 64px 24px; }
.error-page__code {
  display: inline-block; font-size: 3rem; padding: 6px 18px; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink); margin-bottom: 16px;
}
.error-page__title { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.error-page__lede  { color: var(--text-soft); max-width: 48ch; margin: 0 auto 24px; }
.error-page__cta   { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===========================================================
   TOAST + FLASH
=========================================================== */
.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--text);
  color: #fff;
  padding: 12px 18px;
  border-radius: 100px;
  font-size: .92rem;
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.4);
  z-index: 100;
  opacity: 0;
  animation: toastIn .4s var(--ease-out) forwards, toastOut .4s var(--ease-out) 4s forwards;
}
.toast--success { background: #16a34a; }
.toast--error   { background: #b91c1c; }
@keyframes toastIn  { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(10px); } }

/* ===========================================================
   ANIMATION HOOKS (set initial state for GSAP)
=========================================================== */
[data-anim] { opacity: 0; }
[data-anim="fade-up"]   { transform: translateY(28px); }
[data-anim="split-up"]  { transform: translateY(28px); }
[data-anim="zoom-in"]   { transform: scale(.94); }
.no-js [data-anim], .anim-ready [data-anim] { opacity: 1; transform: none; }

/* ===========================================================
   ADMIN — Shell
=========================================================== */
.admin-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100dvh;
}
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
}
.admin-sidebar {
  background: var(--dark);
  color: rgba(255,255,255,.7);
  padding: 24px 18px;
  display: flex; flex-direction: column; gap: 24px;
  position: sticky; top: 0; height: 100dvh;
}
.admin-sidebar__brand { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.admin-sidebar__brand .brand__mark { color: var(--accent); width: 24px; height: 24px; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar nav a {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .94rem;
  color: rgba(255,255,255,.65);
  display: flex; align-items: center; gap: 10px;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.admin-sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-sidebar nav a.is-active { background: var(--accent); color: var(--accent-ink); }
.admin-sidebar__footer { margin-top: auto; font-size: .82rem; color: rgba(255,255,255,.45); display: flex; flex-direction: column; gap: 8px; }
.admin-sidebar__footer form { display: inline; }

.admin-main { padding: 32px 40px 64px; background: var(--bg); }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.admin-topbar h1 { margin: 0; font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.admin-topbar__actions { display: flex; gap: 8px; }

.admin-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.admin-card + .admin-card { margin-top: 16px; }
.admin-card h2 { margin: 0 0 16px; font-size: 1rem; font-weight: 600; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2,1fr); } }
.stat {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
}
.stat__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.stat__value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
.stat__hint  { font-size: .82rem; color: var(--text-soft); margin-top: 4px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.admin-table th { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.admin-table tr:hover td { background: var(--bg-soft); }
.admin-table .pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: .75rem;
  background: var(--bg-soft);
  color: var(--text-soft);
}
.admin-table .pill--new      { background: rgba(194, 213, 0,.18); color: #4d6300; }
.admin-table .pill--read     { background: rgba(59,130,246,.10); color: #1e40af; }
.admin-table .pill--replied  { background: rgba(34,197,94,.12);  color: #166534; }
.admin-table .pill--archived { background: rgba(0,0,0,.05);      color: var(--text-muted); }

.admin-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn--danger { --b-bg: #b91c1c; --b-fg: #fff; --b-bd: #b91c1c; }
.btn--icon   { padding: 8px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.image-grid figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.image-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.image-grid form { position: absolute; top: 6px; right: 6px; }
.image-grid button { padding: 4px 8px; background: rgba(15,15,17,.85); color: #fff; border-radius: 100px; border: none; font-size: .72rem; }

.admin-login {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
  color: #fff;
  padding: 24px;
}
.admin-login__card {
  background: var(--dark-2);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
  padding: 36px;
  max-width: 420px;
  width: 100%;
}
.admin-login__brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #fff; font-weight: 700; }
.admin-login__brand .brand__mark { color: var(--accent); width: 28px; height: 28px; }
.admin-login__title { font-size: 1.4rem; font-weight: 600; margin: 4px 0 18px; }
.admin-login .field input {
  background: var(--dark-3);
  color: #fff;
  border-color: var(--dark-border);
}
.admin-login .field input:focus {
  background: var(--dark-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 213, 0,.15);
}
.admin-login .field label { color: rgba(255,255,255,.6); }

.content-section { border-top: 1px solid var(--border-soft); padding: 20px 0; }
.content-section:first-of-type { border-top: 0; }
.content-section h2 { margin: 0 0 14px; text-transform: capitalize; }


/* ==========================================================================
   RESPONSIVE MOBILE — Adaptaciones finas para tablet y móvil
   Tres tramos: tablet (≤900), mobile landscape (≤640), mobile portrait (≤480)
========================================================================== */

/* No-overflow horizontal global */
html, body { overflow-x: hidden; }

/* === TABLET (≤900px) === */
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .section { padding: 64px 0; }
  /* Experience: padding tablet con mucho aire */
  .experience { padding: 180px 0; }
  .section__header { margin-bottom: 36px; gap: 20px; }
  .container { padding: 0 20px; }
  .site-header__inner { padding: 0 20px; gap: 16px; }
  .brand__img { height: 38px; }
  .hero__inner { gap: 28px; }
  .hero__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
  .hero__subtitle { font-size: 1.05rem; margin-bottom: 28px; }
  .hero__cta { gap: 12px; }
  .hero__cta .btn { min-width: 0; flex: 1; }
  .benefits__card { padding: 40px 28px; }
}

/* === MOBILE LANDSCAPE (≤640px) === */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .container { padding: 0 18px; }
  .site-header__inner { padding: 0 18px; gap: 12px; }

  /* Logo más pequeño en móvil */
  .brand__img { height: 32px; }

  /* Hero: gradient vertical para asegurar legibilidad sobre la foto */
  .hero__inner { padding: calc(var(--header-h) + 24px) 18px 18px; }
  .hero__title {
    font-size: clamp(1.85rem, 1.2rem + 4vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 18px;
  }
  .hero__title br { display: none; }
  .hero__subtitle {
    font-size: .98rem;
    margin-bottom: 24px;
    max-width: 100%;
  }
  .hero__cta { gap: 10px; flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; min-width: 0; padding: 14px 22px; }

  /* Header: nav central oculto (queda hamburguesa) y switcher más compacto */
  .nav { display: none; }
  .header-actions .btn--primary {
    padding: 10px 16px;
    font-size: .82rem;
  }
  .header-actions { gap: 8px; }
  /* En móvil escondemos el switcher del header — está disponible dentro del drawer (hamburger) */
  .lang-switcher { display: none; }

  /* Section title scale */
  .section { padding: 48px 0; }
  .section__title { font-size: clamp(1.55rem, 1.1rem + 2.4vw, 2rem); }
  .section__header { margin-bottom: 28px; }
  .section__lede, .section__body { font-size: .98rem; }
  .section__footer { margin-top: 32px; }

  /* Eyebrow */
  .eyebrow { font-size: .68rem; }

  /* Product cards: 2 columnas exactas en este rango (más legible que 3) */
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .product-card__body { padding: 14px 14px 16px; }
  .product-card__title { font-size: .92rem; }
  .product-card__desc { font-size: .78rem; -webkit-line-clamp: 2; }

  /* Benefits card */
  .benefits { padding: 48px 0; }
  .benefits__card { padding: 28px 22px; border-radius: 16px; }
  .benefits__grid { gap: 22px; }

  /* Distributor card stacked en móvil */
  .distributor { padding: 48px 0; }
  .distributor__card { min-height: 0; }
  .distributor__copy { padding: 32px 24px; }
  .distributor__features { min-height: 220px; padding: 8px 12px; }
  .distributor__features-grid { padding: 16px 4px; }
  .dist-feat { padding: 18px 14px; }
  .dist-feat__title { font-size: .9rem; }

  /* Process en mobile pequeño: 1 columna con cronograma vertical visible.
     (Antes había `display:none` sobre el connector — bug que ocultaba la barra) */
  .process-rail { grid-template-columns: 1fr; gap: 0; }
  .process-step { padding: 0; }

  /* Experience: padding mobile (algo más que las otras secciones por el aro) */
  .experience { padding: 100px 0; }
  .experience__copy { max-width: 100%; }
  .experience__list { margin-top: 24px; gap: 14px; }
  .experience__list-num { width: 36px; height: 36px; font-size: .76rem; }

  /* Home contact */
  .home-contact__inner { gap: 24px; }
  .quote-form { padding: 22px; border-radius: 18px; }
  .quote-form--page { padding: 22px; }
  .field--row { grid-template-columns: 1fr; gap: 12px; }

  /* Footer */
  .site-footer { padding: 48px 0 18px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; padding: 0 18px; }
  .site-footer__bottom { padding: 18px 18px 0; flex-direction: column; gap: 6px; text-align: center; }

  /* Catalog (productos page) */
  .catalog { grid-template-columns: 1fr; gap: 24px; }
  .catalog__sidebar { position: static; }
  .catalog__sidebar ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .catalog__sidebar a { padding: 8px 14px; font-size: .85rem; border-radius: 100px; background: var(--bg-soft); }
  .catalog__sidebar a.is-active { background: var(--text); color: #fff; }
  .catalog-filter__search { padding: 4px 4px 4px 12px; }
  .catalog-filter__search input { padding: 8px 0; font-size: .9rem; }

  /* Product detail page */
  .product-detail__grid { gap: 28px; }
  .product-detail__title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .product-detail__cta { gap: 8px; }
  .product-detail__cta .btn { width: 100%; }
  .product-detail__thumbs { grid-template-columns: repeat(4, 1fr); }

  /* Page hero (sub-páginas) */
  .page-hero { padding: calc(var(--header-h) + 32px) 0 40px; }
  .page-hero__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }

  /* Contact page */
  .contact-grid__inner { grid-template-columns: 1fr; gap: 20px; }
  .contact-card { padding: 20px; }
}

/* === MOBILE PORTRAIT (≤480px) === */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .site-header__inner { padding: 0 14px; }
  .brand__img { height: 28px; }
  .brand__tagline { display: none; }   /* el tagline bajo el logo en móvil ocupa demasiado */

  .hero__inner { padding: calc(var(--header-h) + 20px) 14px 16px; }
  .hero__title { font-size: 1.7rem; line-height: 1.15; }
  .hero__subtitle { font-size: .92rem; margin-bottom: 22px; }

  /* Product grid → 1 columna */
  .product-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Benefits → 1 columna */
  .benefits__grid { grid-template-columns: 1fr; gap: 20px; }
  .benefits__card { padding: 24px 18px; }

  /* Distributor features en móvil ahora apiladas también */
  .distributor__features-grid { grid-template-columns: 1fr; }
  .dist-feat { border-right: 0; border-bottom: 1px solid rgba(194, 213, 0,.15); }
  .dist-feat:last-child { border-bottom: 0; }

  .hero__features { gap: 12px; padding: 18px 14px; }
  .hero__features li { gap: 10px; }
  /* Mobile: iconos un poco más visibles */
  .hero__features-icon svg,
  .hero__features-icon img { width: 52px; height: 52px; }
  .hero__features strong { font-size: .88rem; }
  .hero__features span { font-size: .78rem; }

  /* Header CTA: sólo icono o muy corto */
  .header-actions .btn--primary { padding: 8px 14px; font-size: .78rem; }

  /* Sticky offset para anchor scroll */
  html { scroll-padding-top: var(--header-h); }
}

/* ============================================================
   Widget de presupuesto en el HEADER (top-right, mejor UX)
   Visible solo cuando hay productos en el carrito.
============================================================ */
.header-budget {
  display: none;             /* oculto por defecto; budget.js lo muestra si count>0 */
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  /* Chip gris sólido (#454545) — icono (currentColor) siempre blanco y visible en
     cualquier página. Borde claro translúcido para consistencia con el selector
     de idioma de al lado. */
  background: #454545;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  position: relative;
}
.header-budget.is-visible { display: inline-flex; }
.header-budget:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.header-budget.is-just-added {
  animation: header-budget-pulse .5s ease;
}
@keyframes header-budget-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  100% { transform: scale(1); }
}
.header-budget__count {
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 540px) {
  .header-budget { padding: 6px 10px 6px 8px; font-size: .86rem; }
  .header-budget__count { min-width: 20px; height: 20px; font-size: .78rem; }
}

/* ============================================================
   Carrito de presupuesto (budget widget flotante + botones "Añadir")
============================================================ */
.efit-budget-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #1f1f1f;
  color: #fff;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.45);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.95);
  transition: opacity .25s ease, transform .25s ease, background .15s ease;
  z-index: 60;
}
.efit-budget-widget.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.efit-budget-widget:hover { background: var(--accent); color: var(--accent-ink); }
.efit-budget-widget__icon { line-height: 0; }
.efit-budget-widget__count {
  background: var(--accent);
  color: var(--accent-ink);
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 7px;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.efit-budget-widget__label { font-size: .85rem; letter-spacing: .02em; }

/* Botón "Añadir a presupuesto" — outline lima cuando no añadido, lima sólido cuando añadido */
.btn-budget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #1f1f1f;
  border: 1.5px solid #1f1f1f;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  font-family: inherit;
}
.btn-budget:hover { background: #1f1f1f; color: #fff; }
.btn-budget.is-added {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-budget.is-just-added { animation: btn-budget-pulse .4s ease; }
@keyframes btn-budget-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* "Ver ficha técnica" de cada modelo (outline blanco) — mismo hover que .btn-budget */
.spk-ficha-hover { transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out); }
.spk-ficha-hover:hover { background: #1f1f1f !important; color: #fff !important; border-color: #1f1f1f !important; }

/* ============================================================
   product-card-wrap — listado /productos: el wrap contiene
   la card como anchor + el botón "Añadir a presupuesto" como
   extensión visual con línea separadora superior.
============================================================ */
.product-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  /* Mismo borde lima permanente que la .product-card original */
  border: 1px solid rgba(194, 213, 0, .60);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .25s var(--ease-out), box-shadow .35s var(--ease-out);
  isolation: isolate;
}
.product-card-wrap:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px -22px rgba(194, 213, 0, .35);
}
/* La card interna (anchor) pierde sus propios estilos visuales — los lleva el wrap */
.product-card-wrap > .product-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-grow: 1;
}
.product-card-wrap > .product-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
/* Botón "Añadir" pegado abajo, sin radius, con línea fina arriba */
.product-card-wrap > .btn-budget {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-radius: 0;
  padding: 12px 16px;
  background: #f4f7f0;
  color: #1f1f1f;
  justify-content: center;
  font-size: .88rem;
  font-weight: 600;
}
.product-card-wrap > .btn-budget:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-top-color: rgba(0, 0, 0, .08);
}
.product-card-wrap > .btn-budget.is-added {
  background: var(--accent);
  color: var(--accent-ink);
  border-top-color: rgba(0, 0, 0, .08);
}
/* Cuando se hace hover en el wrap, la línea separadora se torna lima */
.product-card-wrap:hover > .btn-budget {
  border-top-color: rgba(194, 213, 0, .35);
}

/* ============================================================
   Cookie banner + modal (RGPD)
============================================================ */
.efit-cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 3px solid var(--accent);
  box-shadow: 0 -8px 24px -10px rgba(0,0,0,.18);
  padding: 20px 0;
  z-index: 100;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.efit-cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.efit-cookie-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.efit-cookie-banner__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f1f1f;
}
.efit-cookie-banner__text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #444;
  max-width: 70ch;
}
.efit-cookie-banner__link {
  color: var(--accent-ink, #1f1f1f);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
}
.efit-cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .efit-cookie-banner__inner { grid-template-columns: 1fr; }
  .efit-cookie-banner__actions { justify-content: stretch; }
  .efit-cookie-banner__actions .efit-cookie-btn { flex: 1; min-width: 0; }
}

.efit-cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.efit-cookie-btn--primary {
  background: var(--accent);
  color: var(--accent-ink, #1f1f1f);
  border-color: var(--accent);
}
.efit-cookie-btn--primary:hover { background: var(--accent-2, #d2e62d); }
.efit-cookie-btn--outline {
  background: transparent;
  color: #1f1f1f;
  border-color: #1f1f1f;
}
.efit-cookie-btn--outline:hover { background: #1f1f1f; color: #fff; }
.efit-cookie-btn--ghost {
  background: transparent;
  color: var(--text-muted, #6b6b6b);
  border-color: transparent;
}
.efit-cookie-btn--ghost:hover { color: #1f1f1f; background: rgba(0,0,0,.04); }

/* Modal de preferencias */
.efit-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.efit-cookie-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.efit-cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,13,18,.55);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.efit-cookie-modal__card {
  position: relative;
  max-width: 540px;
  margin: 5vh auto;
  background: #fff;
  border-radius: 16px;
  padding: 32px 32px 24px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.4);
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform .25s var(--ease-out);
}
.efit-cookie-modal.is-visible .efit-cookie-modal__card { transform: translateY(0); }
.efit-cookie-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
}
.efit-cookie-modal__close:hover { background: rgba(0,0,0,.06); color: #1f1f1f; }
.efit-cookie-modal__title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; color: #1f1f1f; }
.efit-cookie-modal__intro { margin: 0 0 22px; color: #555; font-size: .92rem; line-height: 1.55; }

.efit-cookie-cat {
  padding: 14px 0;
  border-top: 1px solid #eee;
}
.efit-cookie-cat:first-of-type { border-top: 0; }
.efit-cookie-cat__row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 600;
  color: #1f1f1f;
}
.efit-cookie-cat__row input { width: 18px; height: 18px; accent-color: var(--accent); }
.efit-cookie-cat__row small { color: var(--text-muted); font-weight: 400; font-size: .82rem; }
.efit-cookie-cat__title { font-size: .98rem; }
.efit-cookie-cat__desc {
  margin: 6px 0 0 30px;
  font-size: .85rem;
  color: #666;
  line-height: 1.5;
}

.efit-cookie-modal__actions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.efit-cookie-modal__policy {
  font-size: .85rem;
  color: var(--text-muted);
  text-decoration: underline;
}
.efit-cookie-modal__policy:hover { color: var(--accent-ink); }

/* ============================================================
   MOBILE QA FIXES (Tarea 5)
============================================================ */

/* Fix #1: cookie banner empuja widgets fijos cuando está visible */
body.has-cookie-banner .spk-sticky-cta,
body.has-cookie-banner .efit-budget-widget {
  bottom: calc(20px + var(--cookie-banner-h, 0px));
}

/* Fix #4: padding-bottom del body para no tapar el footer en mobile cuando widgets activos.
   Va condicionado a que haya algo flotando de verdad: si se aplica siempre, deja
   72px de fondo claro bajo el pie oscuro (la "franja blanca" en móvil), y en la
   corporativa esos widgets no aparecen nunca. */
@media (max-width: 640px) {
  body:has(.efit-budget-widget.is-visible),
  body:has(.spk-sticky-cta.is-visible) { padding-bottom: 72px; }
}

/* Fix #7: sticky CTA + budget widget compactos en pantallas muy pequeñas */
@media (max-width: 480px) {
  .efit-budget-widget {
    padding: 10px 14px 10px 12px;
    font-size: .82rem;
    gap: 8px;
  }
  .efit-budget-widget__label { display: none; }
  .spk-sticky-cta {
    padding: 10px 14px;
    font-size: .82rem;
    bottom: 16px;
    right: 16px;
  }
  .efit-budget-widget { bottom: 16px; left: 16px; }
}

/* Fix #2: ocultar CTA "Solicitar asesoría" del header en mobile (ya está en el drawer) */
@media (max-width: 480px) {
  .header-actions .btn--primary { display: none; }
}

/* Fix #8: cookie banner — breakpoint a 900px para que los botones quepan, y 480px stack */
@media (max-width: 900px) {
  .efit-cookie-banner__inner { grid-template-columns: 1fr; gap: 14px; }
  .efit-cookie-banner__actions { justify-content: stretch; flex-wrap: wrap; }
  .efit-cookie-banner__actions .efit-cookie-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
@media (max-width: 480px) {
  .efit-cookie-banner__actions .efit-cookie-btn { flex: 1 1 100%; }
}

/* Fix #9: modal cookies — actions stack en mobile */
@media (max-width: 480px) {
  .efit-cookie-modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .efit-cookie-modal__actions .efit-cookie-btn { width: 100%; }
  .efit-cookie-modal__policy { text-align: center; }
}

/* Fix #11: inputs del form de ficha producto — borde más visible sobre fondo oscuro */
.spk-form input,
.spk-form textarea,
.spk-form select { border: 1px solid rgba(255,255,255,.22); }

/* Fix #12: lang switcher escondido también a partir de 960px (no solo 640) */
@media (max-width: 960px) {
  .lang-switcher { display: none; }
}

/* Fix #13: footer __bottom flex column a 760px (no 640) */
@media (max-width: 760px) {
  .site-footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding-bottom: 24px;
  }
}

/* Fix #14: curvas de cards más sutiles en mobile (radio menor) */
@media (max-width: 540px) {
  .spk-card-curve-left { border-radius: 60px 22px 22px 22px; }
  .spk-card-curve-right { border-radius: 22px 60px 22px 22px; }
  .spk-hero-card { border-radius: 22px 70px 22px 22px; }
  .spk-card-curve-left::before { width: 60px; height: 60px; border-top-left-radius: 60px; border-width: 2.5px; }
  .spk-card-curve-right::before { width: 60px; height: 60px; border-top-right-radius: 60px; border-width: 2.5px; }
  .spk-hero-card::before { width: 70px; height: 70px; border-top-right-radius: 70px; border-width: 2.5px; }
}

/* Fix #15: field--row colapsa antes (720 en lugar de 540) — útil para país+región */
@media (max-width: 720px) {
  .field--row { grid-template-columns: 1fr; gap: 12px; }
}

/* Fix #16: typeahead dropdown más compacto en mobile */
@media (max-width: 540px) {
  #search-suggestions { max-height: 50vh; }
  .typeahead-item { grid-template-columns: 44px 1fr auto; padding: 10px 12px; gap: 10px; }
  .typeahead-item__media { width: 44px; height: 44px; }
}

/* Fix #19: hero card padding reducido en mobile */
@media (max-width: 540px) {
  .spk-hero-card { padding: 24px !important; }
  .spk-hero-card img { max-height: 240px !important; }
}

/* Fix #20: cards de features con minmax más agresivo en mobile */
@media (max-width: 540px) {
  .spk-section [style*="auto-fit"][style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  .spk-section [style*="auto-fit"][style*="minmax(220px"] {
    grid-template-columns: 1fr !important;
  }
}

/* AL990 — bloques alternados imagen↔texto + secuencia "3 min" + diagramas */
.spk-fblock { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 48px; }
.spk-fblock:last-child { margin-bottom: 0; }
.spk-fblock__media { order: 1; }
.spk-fblock__body { order: 2; }
.spk-fblock--rev .spk-fblock__media { order: 2; }
.spk-fblock--rev .spk-fblock__body { order: 1; }
@media (max-width: 820px) {
  .spk-fblock { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
  .spk-fblock__media, .spk-fblock--rev .spk-fblock__media { order: 1; }
  .spk-fblock__body, .spk-fblock--rev .spk-fblock__body { order: 2; }
  .spk-diagrams-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 620px) {
  .spk-steps-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .spk-step__num > span[aria-hidden] { display: none; } /* sin línea suelta al apilar */
}

/* Fix #23: mid-cta título más pequeño en mobile */
@media (max-width: 540px) {
  .spk-mid-cta h3 { font-size: 1.05rem !important; }
  .spk-mid-cta { padding: 20px !important; }
}