/* ==========================================================================
   ELECDOCOR — Sistema de diseño
   Distribución mayorista de electrodomésticos · Ecuador
   Paleta derivada del logotipo (teal #0EAEA4) sobre base grafito.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca */
  --teal-400: #2FD6C8;
  --teal-500: #0EAEA4;
  --teal-600: #0A8C84;
  --teal-700: #076B65;
  --teal-800: #065C57;
  --teal-50:  #E8F8F6;

  /* Grafito */
  --ink-900: #06100F;
  --ink-800: #0B1A1C;
  --ink-700: #12262A;
  --ink-600: #1B363B;
  --ink-500: #2A4A50;

  /* Superficies */
  --paper:      #FFFFFF;
  --paper-alt:  #F5F8F8;
  --paper-warm: #EDF3F3;
  --line:       #E3EAEA;
  --line-dark:  rgba(255,255,255,.10);

  /* Texto */
  --text:        #0B1A1C;
  --text-muted:  #55686B;
  --text-on-dark:       #FFFFFF;
  --text-muted-on-dark: #A8BFC1;

  /* Señal */
  --amber: #F0A22E;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala de espacio (densidad estándar) */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* Radios y elevación */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(6,16,15,.06), 0 2px 8px rgba(6,16,15,.04);
  --shadow-md: 0 2px 4px rgba(6,16,15,.06), 0 12px 28px rgba(6,16,15,.08);

  /* Layout */
  --container: 1200px;
  --container-narrow: 860px;
  --header-h: 76px;

  /* Movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  200ms;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Tipografía ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
h4, .h4 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-700);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--teal-500);
  flex: none;
}
.on-dark .eyebrow, .eyebrow--light { color: var(--teal-400); }

.lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
}
.on-dark .lead { color: var(--text-muted-on-dark); }

.muted { color: var(--text-muted); }
.on-dark .muted { color: var(--text-muted-on-dark); }

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(56px, 8vw, var(--space-2xl)); }
.section--tight { padding-block: clamp(40px, 5vw, var(--space-xl)); }
.section--alt  { background: var(--paper-alt); }
.section--dark {
  background: var(--ink-900);
  color: var(--text-on-dark);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--text-on-dark); }

.section-head { max-width: 640px; margin-bottom: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--teal-500);
  color: var(--ink-900);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--teal-500);
  color: var(--ink-900);
  border: 1px solid var(--teal-500);
}
.btn--primary:hover { background: var(--teal-400); border-color: var(--teal-400); }
.btn--primary:active { transform: translateY(1px); }

.btn--dark {
  background: var(--ink-800);
  color: #fff;
  border: 1px solid var(--ink-800);
}
.btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink-800); background: var(--paper-alt); }

.on-dark .btn--ghost, .btn--ghost-light {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
}
.on-dark .btn--ghost:hover, .btn--ghost-light:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
}

.btn--sm { min-height: 40px; padding: 8px 18px; font-size: .9rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--teal-700);
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--teal-400); }

/* ---------- 6. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--line-dark);
  isolation: isolate;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6,16,15,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav__link[aria-current="page"] { color: var(--teal-400); }

.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.header__nav > .btn { display: none; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: #fff;
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(14,174,164,.20), transparent 62%),
    radial-gradient(620px 420px at 8% 92%, rgba(14,174,164,.10), transparent 68%);
  z-index: -2;
}
/* Trama de líneas — guiño al rayado del logotipo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -18deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
  z-index: -1;
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 104px);
}
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--teal-400); }
.hero__lead {
  margin-top: var(--space-md);
  max-width: 52ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: var(--text-muted-on-dark);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-lg);
}

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  padding: clamp(20px, 3vw, 36px);
}
.hero__media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.hero__media-grid figure {
  background: #fff;
  border-radius: var(--radius);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 12px;
}
.hero__media-grid img { max-height: 100%; width: auto; object-fit: contain; }
.hero__media-grid figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* Barra de credenciales bajo el hero */
.credbar {
  border-top: 1px solid var(--line-dark);
  background: rgba(255,255,255,.03);
}
.credbar__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.credbar__item { display: flex; align-items: center; gap: 12px; }
.credbar__item svg { width: 22px; height: 22px; color: var(--teal-400); flex: none; }
.credbar__item span { font-size: .92rem; color: var(--text-muted-on-dark); }

/* ---------- 8. Page hero (interiores) ---------- */
.page-hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  padding-block: clamp(48px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(720px 420px at 82% 0%, rgba(14,174,164,.18), transparent 64%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,.04) 0 1px, transparent 1px 9px);
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { margin-top: var(--space-sm); max-width: 62ch; color: var(--text-muted-on-dark); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-md);
  font-size: .85rem;
  font-family: var(--font-mono);
  color: var(--text-muted-on-dark);
}
.breadcrumb a { color: var(--text-muted-on-dark); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb svg { width: 12px; height: 12px; opacity: .5; }
.breadcrumb [aria-current] { color: var(--teal-400); }

/* ---------- 9. Tarjetas ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: .96rem; }

a.card, .card--link { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card--link:hover {
  border-color: var(--teal-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--teal-50);
  color: var(--teal-700);
  margin-bottom: var(--space-sm);
}
.card__icon svg { width: 24px; height: 24px; }

.on-dark .card, .card--dark {
  background: rgba(255,255,255,.04);
  border-color: var(--line-dark);
}
.on-dark .card p, .card--dark p { color: var(--text-muted-on-dark); }
.on-dark .card__icon, .card--dark .card__icon {
  background: rgba(14,174,164,.14);
  color: var(--teal-400);
}

/* Tarjeta numerada (pilares) */
.pillar { position: relative; padding-top: var(--space-lg); }
.pillar__num {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--teal-500);
  opacity: .55;
}

/* ---------- 10. Estadísticas ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: var(--paper); padding: var(--space-md); }
/* En la columna de «Quiénes somos» no caben cuatro cifras en fila: con «100+»
   las etiquetas se partían letra a letra. Ahí van dos por dos. */
.split .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--teal-700);
}
.stat__label {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.on-dark .stats, .stats--dark { background: var(--line-dark); border-color: var(--line-dark); }
.on-dark .stat, .stats--dark .stat { background: var(--ink-800); }
.on-dark .stat__value, .stats--dark .stat__value { color: var(--teal-400); }
.on-dark .stat__label, .stats--dark .stat__label { color: var(--text-muted-on-dark); }

/* ---------- 11. Logos (marcas y clientes) ---------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 18 clientes: tres filas llenas */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.logo-grid--brands { grid-template-columns: repeat(5, 1fr); }   /* 10 marcas: 5 × 2 */
@media (max-width: 768px) { .logo-grid--brands { grid-template-columns: repeat(2, 1fr); } }

.logo-grid__cell {
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: var(--space-md) var(--space-sm);
  min-height: 140px;
}
.logo-grid__cell img {
  height: 60px;
  width: 100%;
  max-width: 172px;
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.logo-grid__cell:hover img { transform: scale(1.05); }

/* Marquesina de clientes */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(52px, 7vw, 104px);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Los logotipos de los clientes van a su color y a buen tamaño: son la prueba
   social más fuerte de la página, no un adorno de fondo. */
/* Caja de tamaño fijo con `contain`: los logotipos tienen proporciones muy
   distintas (unos anchos, otros casi cuadrados) y así ninguno domina. */
.marquee img {
  height: clamp(46px, 4.6vw, 62px);
  width: clamp(130px, 14vw, 186px);
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.marquee img:hover { transform: scale(1.06); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 12. Marcas (fichas) ---------- */
.brand-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}
.brand-row:first-of-type { border-top: 0; padding-top: var(--space-md); }
.brand-row__logo {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--space-md);
  min-height: 150px;
}
.brand-row__logo img { max-height: 54px; width: auto; }
.brand-row__body h3 { margin-bottom: 12px; }
.brand-row__body > p { color: var(--text-muted); max-width: 62ch; }

.taglist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }
.tag {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--teal-50);
  color: var(--teal-800);
  border: 1px solid rgba(7,107,101,.16);
}
.on-dark .tag {
  background: rgba(14,174,164,.12);
  color: var(--teal-400);
  border-color: rgba(47,214,200,.24);
}

/* ---------- 13. Categorías de producto ---------- */
.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cat-card__media {
  background: var(--paper-warm);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.cat-card__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.cat-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cat-card__body h3 { font-size: 1.2rem; }
.cat-card__body p { color: var(--text-muted); font-size: .94rem; flex: 1; }
.cat-card__meta {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-700);
}

/* Rejilla de productos con filtro */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.filterbar__btn {
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.filterbar__btn:hover { border-color: var(--ink-800); color: var(--text); }
.filterbar__btn[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.product {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product:hover { border-color: var(--teal-500); box-shadow: var(--shadow-sm); }
.product__media {
  background: var(--paper-warm);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--space-sm);
}
.product__media { position: relative; overflow: hidden; }
/* La foto se ajusta a la caja: las recortadas en alto (una aspiradora
   vertical) ya no estiran su tarjeta. */
.product__media img {
  position: absolute; inset: var(--space-sm);
  width: calc(100% - 2 * var(--space-sm)); height: calc(100% - 2 * var(--space-sm));
  object-fit: contain; mix-blend-mode: multiply;
}
.product__body { padding: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.product__brand {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.product__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.product__desc { font-size: .88rem; color: var(--text-muted); }
.is-hidden { display: none !important; }

/* ---------- 14. Timeline ---------- */
.timeline { display: grid; gap: 0; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-left: 2px solid var(--line);
  padding-left: var(--space-lg);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -7px; top: calc(var(--space-md) + 10px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal-500);
  border: 3px solid var(--paper);
}
.timeline__year {
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--teal-700);
}
.timeline__body .h4 { margin-bottom: 6px; }
.timeline__body p { color: var(--text-muted); font-size: .95rem; }

/* ---------- 15. Acordeón ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: 64px;
  padding: var(--space-sm) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.accordion__trigger:hover { color: var(--teal-700); }
.accordion__trigger svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--teal-700);
  transition: transform var(--dur) var(--ease);
}
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.accordion__panel { padding-bottom: var(--space-md); max-width: 72ch; }
.accordion__panel p { color: var(--text-muted); }
.accordion__panel[hidden] { display: none; }

/* ---------- 16. Formulario ---------- */
.form { display: grid; gap: var(--space-sm); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: .9rem; font-weight: 600; }
.field .req { color: var(--teal-700); }
.field__help { font-size: .82rem; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(14,174,164,.18);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #C0392B; }
.field__error { font-size: .82rem; color: #C0392B; font-weight: 500; }
.field__error[hidden] { display: none; }

.form__note { font-size: .85rem; color: var(--text-muted); }
.form-status {
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: .94rem;
  font-weight: 500;
  border: 1px solid;
}
.form-status[hidden] { display: none; }
.form-status--ok { background: var(--teal-50); border-color: rgba(7,107,101,.25); color: var(--teal-800); }

/* ---------- 17. Bloque de contacto / CTA ---------- */
.contact-list { display: grid; gap: var(--space-md); }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item svg { width: 22px; height: 22px; color: var(--teal-500); flex: none; margin-top: 3px; }
.contact-item__label {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  margin-bottom: 2px;
}
.contact-item a { color: #fff; text-decoration: none; font-weight: 500; }
.contact-item a:hover { color: var(--teal-400); text-decoration: underline; }

.cta-band {
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 320px at 88% 10%, rgba(14,174,164,.24), transparent 62%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: var(--text-muted-on-dark); max-width: 54ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.map-embed {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  filter: grayscale(.35);
}

/* ---------- 18. Footer ---------- */
.footer {
  background: var(--ink-900);
  color: var(--text-muted-on-dark);
  padding-top: var(--space-xl);
  border-top: 3px solid var(--teal-500);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}
.footer__logo img { height: 36px; width: auto; margin-bottom: var(--space-sm); }
.footer__about { font-size: .92rem; max-width: 38ch; }
.footer .h4 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.footer__links { display: grid; gap: 10px; }
.footer__links a {
  color: var(--text-muted-on-dark);
  text-decoration: none;
  font-size: .93rem;
  transition: color var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--teal-400); }
.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  font-size: .86rem;
}
.footer__bottom a { color: var(--text-muted-on-dark); }

/* WhatsApp flotante */
.wa-fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #1FA855;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(6,16,15,.28);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wa-fab:hover { transform: scale(1.06); background: #17924a; }
.wa-fab svg { width: 30px; height: 30px; }

/* ---------- 19. Revelado al hacer scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 20. Responsive ---------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { max-width: 560px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .header__nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    display: block;
    background: var(--ink-900);
    padding: var(--space-md);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms var(--ease), visibility 260ms;
  }
  .header__nav.is-open { transform: none; visibility: visible; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link {
    min-height: 56px;
    padding: 0 16px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
  }
  .header__nav > .btn { display: inline-flex; margin-top: var(--space-md); width: 100%; }
  .header__actions .btn { display: none; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .split, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats, .credbar__list { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-row { grid-template-columns: 1fr; padding-block: var(--space-lg); }
  .form__row { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .timeline__item { grid-template-columns: 1fr; gap: 6px; padding-left: var(--space-md); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero__media-grid figure:first-child { grid-column: span 3; grid-row: auto; aspect-ratio: 16/10; }
}

@media (max-width: 420px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- 21. Preferencias del usuario ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

@media print {
  .header, .footer, .wa-fab, .hero::after { display: none; }
  body { color: #000; background: #fff; }
}

/* ---------- 23. Fichas de marca con color e insignia ---------- */
.brand-row__logo {
  position: relative;
  background: var(--band, var(--paper-alt));
  border: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-md);
  place-items: center;
  padding: var(--space-lg) var(--space-md);
  min-height: 230px;
  overflow: hidden;
}
.brand-row__mark { max-height: 58px; width: auto; max-width: 78%; object-fit: contain; }
.brand-row__logo[data-ink="light"] .brand-row__mark { filter: brightness(0) invert(1); }
.brand-row__logo[data-ink="dark"]  .brand-row__mark { filter: brightness(0); }

.brand-row__wordmark {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--band-ink);
  line-height: 1;
}

.brand-row__flagship {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--band-ink);
}
.brand-row__flagship svg { width: 92px; height: 92px; opacity: .9; }
.brand-row__flagship em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .78;
}

.brand-row__role {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 10px;
}

.logo-grid__wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.logo-grid__cell:hover .logo-grid__wordmark { opacity: 1; }

@media (max-width: 768px) {
  .brand-row__logo { min-height: 190px; }
  .brand-row__flagship svg { width: 74px; height: 74px; }
}

/* ---------- 24. Fichas de línea de producto ---------- */
/* Flex en vez de rejilla: con siete líneas, la última fila (3 de 4) queda
   centrada en lugar de cargada a la izquierda. */
.line-grid {
  --por-fila: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}
.line-grid > * {
  flex: 0 0 calc((100% - (var(--por-fila) - 1) * var(--space-md)) / var(--por-fila));
  min-width: 0;
}

.line-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.line-card:hover { border-color: var(--band); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.line-card__art {
  background: var(--band);
  color: var(--band-ink);
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--space-md);
  min-height: 168px;
  position: relative;
  overflow: hidden;
}
.line-card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-18deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px);
}
.line-card__art svg { width: 84px; height: 84px; position: relative; }

.line-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.line-card__body h3 { font-size: 1.2rem; }
.line-card__body > p { color: var(--text-muted); font-size: .94rem; }

.line-card__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.line-card__brand {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-muted);
}

.line-card__note {
  font-size: .84rem;
  font-style: italic;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1024px) { .line-grid { --por-fila: 2; } }
@media (max-width: 640px)  { .line-grid { --por-fila: 1; } }

/* El texto de ayuda cambia según haya cursor o no. */
.solo-tactil { display: none; }
@media (hover: none) {
  .solo-cursor { display: none; }
  .solo-tactil { display: inline; }
}

/* ==========================================================================
   25. LABORATORIO DE MARCAS — portada
   Los ocho logotipos flotan en una escena 3D; al elegir uno aparece el modelo
   de su producto insignia. Todo el contenido existe también como rejilla
   estática: es lo que se ve sin WebGL y lo que leen los buscadores.
   ========================================================================== */

.lab {
  --marca: var(--teal-500);
  position: relative;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - var(--header-h)), 940px);
}
.lab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 50% 34%, color-mix(in srgb, var(--marca) 26%, transparent), transparent 68%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px);
  pointer-events: none;
}

/* Al abrir una marca, su color toma la pantalla entera. */
.lab.is-detail::before {
  background:
    radial-gradient(120% 90% at 72% 18%,
      color-mix(in srgb, var(--marca) var(--marca-luz, 86%), #ffffff) 0%,
      var(--marca) 38%,
      color-mix(in srgb, var(--marca) 62%, #05090b) 78%,
      color-mix(in srgb, var(--marca) 22%, #05090b) 100%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
}
/* El foco de luz se aclara sólo donde la tinta es oscura. Sobre las marcas de
   tinta blanca —ahora que el logotipo va suelto, sin placa— un foco demasiado
   claro dejaba el logotipo casi a ras del fondo. */
.lab.is-detail-dark::before { --marca-luz: 68%; }
.lab::before { transition: background 620ms var(--ease); }

/* El texto se lee sobre el color: blanco casi siempre, tinta sobre amarillo
   y naranja, que es lo que dice el campo `ink` de cada marca. */
.lab.is-detail .lab__detail-name,
.lab.is-detail .lab__detail-desc,
.lab.is-detail .lab__detail-role,
.lab.is-detail .lab__detail-flagship { color: var(--marca-ink); }
.lab.is-detail .lab__detail-desc { opacity: .88; }
.lab.is-detail .lab__detail-role { opacity: .72; }
.lab.is-detail .lab__detail .tag {
  background: color-mix(in srgb, var(--marca-ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--marca-ink) 34%, transparent);
  color: var(--marca-ink);
}
.lab.is-detail .lab__close {
  border-color: color-mix(in srgb, var(--marca-ink) 40%, transparent);
  background: color-mix(in srgb, var(--marca-ink) 10%, transparent);
  color: var(--marca-ink);
}
.lab.is-detail .lab__close:hover {
  background: color-mix(in srgb, var(--marca-ink) 22%, transparent);
}
/* Sobre amarillo o naranja, el botón principal invierte para no perderse. */
.lab.is-detail-dark .lab__detail .btn--primary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.lab.is-detail-dark .lab__detail .btn--primary:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
}

.lab__intro {
  position: relative;
  z-index: 3;
  padding: clamp(20px, 3.2vw, 44px) var(--space-md) clamp(8px, 1.4vw, 18px);
  text-align: center;
  pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.lab__intro .eyebrow { justify-content: center; color: var(--teal-400); }
/* Lo primero que se ve al entrar: el logotipo en grande y, debajo, el mensaje.
   Es un vector, así que se ve nítido a cualquier tamaño. */
.lab__logo {
  display: block;
  width: clamp(240px, 38vw, 580px);
  height: auto;
  margin: 0 auto clamp(14px, 1.8vw, 24px);
  animation: logoEntra 900ms var(--ease) both;
}
.lab__intro h1 { animation: logoEntra 900ms 180ms var(--ease) both; }
.lab__lema {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-400);
  animation: logoEntra 900ms 320ms var(--ease) both;
}
@keyframes logoEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lab__logo, .lab__intro h1, .lab__lema { animation: none; }
}
.lab__intro h1 {
  color: #fff;
  font-size: clamp(1.7rem, 1rem + 2.8vw, 3.05rem);
}
.lab__intro h1 em { font-style: normal; color: var(--teal-400); }
.lab.is-detail .lab__intro { opacity: 0; transform: translateY(-14px); }

/* --- Escenario --- */
.lab__stage {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lab__scene {
  position: absolute;
  inset: 0;
  display: none;         /* solo aparece cuando la escena arranca de verdad */
}
.lab__canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.lab--3d .lab__scene { display: block; }
.lab--3d .lab__fallback { display: none; }

/* --- Rejilla estática (respaldo y contenido indexable) --- */
.lab__fallback {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-md);
}
.lab__fallback-title {
  text-align: center;
  color: var(--text-muted-on-dark);
  margin-bottom: var(--space-lg);
  font-size: clamp(.98rem, .92rem + .3vw, 1.15rem);
}
.lab__chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.lab__chip {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  min-height: 150px;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  /* Baldosa clara: deja leer los logotipos negros con sus colores reales. */
  background: #F3F6F7;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lab__chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--band) 55%, rgba(0,0,0,.4));
}
.lab__chip-logo { max-height: 34px; max-width: 78%; width: auto; }
.lab__chip-wordmark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--band);
}
.lab__chip-role {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Ficha de la marca elegida --- */
.lab__details {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-md);
  pointer-events: none;
}
.lab__detail {
  width: 100%;
  max-width: 560px;
  text-align: center;
  pointer-events: auto;
  animation: labEntra 460ms var(--ease) both;
}

/* .lab--wide la pone la escena, no una media query: así el texto y el modelo
   nunca discrepan sobre qué composición toca. */
.lab--3d.lab--wide .lab__details {
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(64px, 7vw, 130px);
  padding-right: var(--space-md);
}
.lab--3d.lab--wide .lab__detail { text-align: left; max-width: 430px; }
.lab--3d.lab--wide .lab__detail .taglist { justify-content: flex-start; }
.lab--3d.lab--wide .lab__detail-desc { margin-inline: 0; }

/* Apilado: la escena arriba con alto propio, el texto debajo en el flujo.
   Superponerlos en una pantalla estrecha solo produce choques. */
.lab--3d:not(.lab--wide) .lab__stage {
  display: block;
  min-height: 0;
}
.lab--3d:not(.lab--wide) .lab__scene {
  position: relative;
  inset: auto;
  height: clamp(290px, 42svh, 440px);
}
.lab--3d:not(.lab--wide) .lab__details {
  position: static;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}
/* En vertical el logotipo se centra arriba, justo donde estaría el botón. */
.lab--3d:not(.lab--wide) .lab__close {
  top: var(--space-sm);
  left: var(--space-sm);
  right: auto;
}
.lab__detail[hidden] { display: none; }
@keyframes labEntra {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.lab__detail-role {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--marca) 55%, #fff);
}
.lab__detail-name {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  color: #fff;
  margin-top: 6px;
}
.lab__detail-flagship {
  font-family: var(--font-display);
  font-size: clamp(1rem, .94rem + .4vw, 1.2rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--marca) 60%, #fff);
  margin-top: 4px;
}
.lab__detail-desc {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: .95rem;
  color: var(--text-muted-on-dark);
}
.lab__detail .taglist { justify-content: center; margin-top: 16px; }
.lab__detail .btn { margin-top: 20px; }

/* Selector de productos de la marca, bajo la descripción. Sin tarjetas: cada
   producto va recortado sobre el color, como el grande. Solo un halo suave
   detrás, para que un parlante negro no se pierda sobre el negro de Sony. */
.lab-modelos {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 8px;
}
.lab-modelos__item {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  padding: 4px 4px 8px;
  border-radius: 12px;
  text-align: inherit;
  transition: background var(--dur) var(--ease);
}
.lab-modelos__item:focus-visible { outline: 2px solid var(--marca-ink, #fff); outline-offset: 2px; }
.lab-modelos__foto {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, #ffffff 16%, transparent), transparent);
}
.lab-modelos__foto img {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  transition: transform var(--dur) var(--ease);
}
.lab-modelos__item:hover .lab-modelos__foto img { transform: translateY(-3px) scale(1.04); }
/* El elegido se marca con una línea bajo el nombre y más opacidad. */
.lab-modelos__item[aria-pressed="false"] { opacity: .72; }
.lab-modelos__item[aria-pressed="true"] { background: color-mix(in srgb, var(--marca-ink, #fff) 10%, transparent); }
.lab-modelos__item:hover { opacity: 1; }
.lab-modelos__nombre {
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--marca-ink, #fff);
}
.lab-modelos__codigo {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--marca-ink, #fff);
  opacity: .7;
}

/* Los mismos modelos en las fichas de marcas.html. */
.modelos {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 620px;
}
.modelos__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modelos__foto {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.modelos__foto { position: relative; overflow: hidden; }
.modelos__foto img {
  position: absolute; inset: 14px;
  width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain;
}
.modelos__nombre { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.modelos__codigo { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }

/* Sin la escena 3D, la ficha se abre bajo la rejilla en vez de flotar. */
.lab:not(.lab--3d) .lab__stage {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.lab:not(.lab--3d) .lab__details {
  position: static;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.lab__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(6,16,15,.6);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lab__close:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.lab__close svg { width: 16px; height: 16px; }
.lab__close[hidden] { display: none; }

.lab__hint {
  position: relative;
  z-index: 3;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  text-align: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}
.lab__hint[hidden] { display: none; }
.lab:not(.lab--3d) .lab__hint { display: none; }

@media (max-width: 1024px) {
  .lab__chips { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .lab { min-height: 0; }
  .lab__stage { min-height: 62svh; }
}
@media (max-width: 640px) {
  .lab__chips { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lab__chip { min-height: 124px; padding: var(--space-sm); }
  .lab__chip-logo { max-height: 26px; }
  .lab__details { padding: var(--space-sm); }
}

/* ---------- 26. Navegación entre marcas ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lab__nav {
  position: absolute;
  z-index: 5;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lab__nav[hidden] { display: none; }

.lab__dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lab__dot {
  display: block;
  width: 26px; height: 26px;
  padding: 0;
  position: relative;
}
.lab__dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--marca-ink, #fff) 40%, transparent);
  transition: background-color var(--dur) var(--ease), height var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.lab__dot:hover::before { background: color-mix(in srgb, var(--marca-ink, #fff) 72%, transparent); }
.lab__dot[aria-current="true"]::before {
  background: var(--marca-ink, #fff);
  height: 20px;
  margin-top: -10px;
}

.lab__arrow {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  color: var(--marca-ink, #fff);
  opacity: .6;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lab__arrow:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--marca-ink, #fff) 14%, transparent);
}
.lab__arrow svg { width: 18px; height: 18px; }
.lab__arrow[data-paso="-1"] svg { transform: rotate(90deg); }
.lab__arrow[data-paso="1"] svg  { transform: rotate(90deg); }

/* En vertical los puntos se tumban bajo la escena. */
.lab--3d:not(.lab--wide) .lab__nav,
.lab:not(.lab--3d) .lab__nav {
  position: static;
  transform: none;
  flex-direction: row;
  justify-content: center;
  padding-top: var(--space-sm);
}
.lab--3d:not(.lab--wide) .lab__dots,
.lab:not(.lab--3d) .lab__dots { flex-direction: row; }
.lab--3d:not(.lab--wide) .lab__dot[aria-current="true"]::before,
.lab:not(.lab--3d) .lab__dot[aria-current="true"]::before {
  height: 7px;
  width: 20px;
  margin: -3.5px 0 0 -10px;
}
.lab--3d:not(.lab--wide) .lab__arrow svg,
.lab:not(.lab--3d) .lab__arrow svg { transform: none; }


/* ---------- Formulario previo a WhatsApp ---------- */
.wa-dialog {
  margin: auto;   /* el reinicio de estilos quita el centrado propio del <dialog> */
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink-900);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.wa-dialog::backdrop { background: rgba(6,16,15,.6); backdrop-filter: blur(3px); }
.wa-dialog[open] { animation: waEntra 260ms var(--ease); }
@keyframes waEntra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.wa-form { display: grid; gap: 14px; padding: 22px 22px 24px; }
.wa-form__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-form__head h2 { font-size: 1.25rem; }
.wa-form__cerrar {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
}
.wa-form__cerrar:hover { background: var(--paper-alt); color: var(--ink-900); }
.wa-form__cerrar svg { width: 20px; height: 20px; }
.wa-form__intro { font-size: .9rem; color: var(--text-muted); margin-top: -4px; }
.wa-form .field textarea { min-height: 96px; }
.wa-form__enviar { justify-content: center; gap: 10px; background: #117A3C; border-color: #117A3C; color: #fff; }
.wa-form__enviar:hover { background: #0D6531; border-color: #0D6531; }
.wa-form__enviar svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .wa-dialog[open] { animation: none; } }


/* ---------- Fichas de marcas.html: nombre, una línea y carrusel ---------- */
.brand-row { align-items: center; }
.brand-row__logo { min-height: 300px; align-content: space-between; }
.brand-row__producto {
  width: 100%;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.28));
}
.brand-row__nombre {
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.brand-row__breve { color: var(--text-muted); font-size: 1.05rem; }

.carrusel { position: relative; margin-top: var(--space-md); }
.carrusel__pista {
  list-style: none;
  margin: 0;
  padding: 4px 2px 12px;
  display: grid;
  grid-auto-flow: column;
  /* Se ven tres y asoma el cuarto: así se nota que hay más. */
  grid-auto-columns: calc((100% - 3 * 14px) / 3.35);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.carrusel.is-final .carrusel__pista { -webkit-mask-image: none; mask-image: none; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.carrusel__foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  overflow: hidden;
}
.carrusel__foto img {
  position: absolute; inset: 14px;
  width: calc(100% - 28px); height: calc(100% - 28px);
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}
.carrusel__item:hover .carrusel__foto img { transform: scale(1.05); }
.carrusel__nombre { font-size: .9rem; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.carrusel__codigo { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }
.carrusel__flecha {
  position: absolute;
  top: calc((100% - 60px) / 2);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.carrusel__flecha:hover { background: var(--teal-50); }
.carrusel__flecha svg { width: 20px; height: 20px; }
.carrusel__flecha--atras { left: -18px; }
.carrusel__flecha--adelante { right: -18px; }
.carrusel__flecha[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
  .carrusel__pista { grid-auto-columns: 42%; }
  .carrusel__flecha { display: none; }
  .brand-row__logo { min-height: 240px; }
  .brand-row__producto { height: 140px; }
}
.brand-row__body { min-width: 0; }

/* Clientes: los logotipos van de entrada, sin encabezado de página. */
.section--clientes { padding-top: clamp(32px, 4vw, 56px); }

/* ---------- Nosotros: misión y visión en grande ---------- */
.mv { padding-block: clamp(40px, 6vw, 88px) 0; }
.mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.mv__panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.mv__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(-18deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px);
}
.mv__panel--mision { background: var(--teal-700); color: #fff; }
.mv__panel--vision { background: var(--ink-900); color: #fff; }
.mv__etiqueta {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.mv__panel--vision .mv__etiqueta { color: var(--teal-400); }
.mv__texto {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, .95rem + .8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  max-width: 34ch;
}
@media (max-width: 768px) {
  .mv__grid { grid-template-columns: 1fr; }
  .mv__panel { min-height: 0; }
}
/* La columna de la tarjeta ocupa todo el ancho: sin esto, logotipo y producto
   se encogían al tamaño mínimo de su contenido. */
.brand-row__logo { grid-template-columns: 100%; justify-items: center; }
.brand-row__mark { width: min(72%, 230px); height: 64px; max-height: none; max-width: none; object-fit: contain; }
.brand-row__producto { width: 88%; height: 190px; max-height: none; }
/* Más específico que «.brand-row__logo img», que limita a 54 px de alto. */
.brand-row__logo .brand-row__producto { width: 88%; height: 190px; max-height: none; }
.brand-row__logo .brand-row__mark { width: min(72%, 230px); height: 64px; max-height: none; }
@media (max-width: 768px) { .brand-row__logo .brand-row__producto { height: 150px; } }

/* Tarjeta de marca: solo el logotipo, centrado. */
.brand-row__logo { grid-template-rows: 1fr; align-content: center; min-height: 260px; }
.brand-row__logo .brand-row__mark { width: min(76%, 250px); height: 80px; }
@media (max-width: 768px) { .brand-row__logo { min-height: 180px; } }