/*
 * Theme Name:  Transfor Packaging
 * Description: Tema hijo de GeneratePress — Diseño industrial B2B. UI inspirado en shadcn/ui.
 * Author:      Creacom
 * Template:    generatepress
 * Version:     2.0.0
 * Text Domain: transfor-packaging
 */

/* ============================================================
   0. A11Y — Skip link + screen-reader utility
   ============================================================ */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link.screen-reader-text:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #FFFFFF;
  color: #323946;
  font-family: var(--font-body, sans-serif);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 100000;
  text-decoration: none;
}

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Brand — paleta reducida: accent + oscuro pizarra (#323946) */
  --accent:        #009DE2;
  --accent-hover:  #008DD4;  /* hover: pelín más oscuro dentro de la familia azul */
  --accent-subtle: #EFF9FF;
  --accent-ring:   rgba(0, 157, 226, 0.35);
  --dark:          #323946;  /* único color oscuro de marca (secciones, hover ghost) */

  /* Backgrounds — blanco + un solo gris claro + un solo oscuro */
  --bg:        #FFFFFF;
  --bg-alt:    #F2F5F8;      /* gris claro único (también zona imagen de cards) */
  --bg-dark:   #323946;      /* oscuro único: header sticky, dropdown, cards, CTA, footer */
  --bg-dark-2: #323946;      /* alias (consolidado, antes negro alternativo) */
  --bg-footer: #323946;      /* alias (consolidado) */

  /* Text — unificado: headings oscuros = --dark, un solo gris de body */
  --txt-heading:   #323946;
  --txt-body:      #52525B;
  --txt-secondary: #5E5E67; /* darkened: #71717A was 4.24:1 → now ~5.6:1 WCAG AA */
  --txt-muted:     #8E8E98; /* darkened: placeholder #A1A1AA was 2.3:1 → now 4.0:1 */
  --txt-on-dark:   #DFE6EC; /* único claro para texto sobre oscuro (headings: #fff) */

  /* shadcn-inspired border + shadow tokens */
  --border:   #E4E4E7;
  --border-2: #D4D4D8;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-accent: 0 4px 16px rgba(0,157,226,0.22);

  /* Radius — regla global: máximo 8px en todo el sitio.
     r-sm 4px para nested (elementos dentro de otro con r-md); r-md 8px
     para el resto. Los tokens 'lg/xl/2xl' quedan alias del r-md para
     que los usos legacy sigan funcionando pero al mismo valor. */
  --r-sm:   4px;
  --r-md:   8px;    /* buttons, cards, paneles, contenedores */
  --r-lg:   8px;    /* alias — antes 12px */
  --r-xl:   8px;    /* alias — antes 16px */
  --r-2xl:  8px;    /* alias — antes 20px */
  --r-pill: 9999px; /* badges/pills / dot pulsante — mantener */

  /* Typography */
  --font-display: 'Ubuntu', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;

  /* Layout — un solo ancho de contenido en toda la web (home + interiores + header).
     Ancho generoso al estilo functionhealth.com; el padding lateral crece
     con la ventana pero se caps a 48px. 3vw (no 4vw) para que el contenido
     llene más pantalla en tamaños medios. Tanto la navbar flotante como el
     .hr-wrap de las secciones se apoyan en --pad-x → ancho idéntico. */
  --container:  1440px;
  --pad-x:      clamp(20px, 3vw, 48px);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease;
}


/* ============================================================
   2. RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--txt-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Kill GeneratePress layout artifacts */
.site, .site-content, .entry, .hentry,
.entry-content, .site-inner, .content-area {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

ul, ol { list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--txt-heading);
  text-wrap: balance;
}

h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.02em; }
h3, h4 { letter-spacing: -0.01em; }

p {
  line-height: 1.7;
  max-width: 72ch;
  text-wrap: pretty;
}

/* Reset max-width for layout containers where text fills columns */
.home-hero p, .cta-banner p, .section-hd-center p,
.ficha-desc, .product-card__desc, .process-step__desc,
.footer-col p { max-width: none; }

.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;
}


/* ============================================================
   3. LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}


/* ============================================================
   4. BUTTONS  (shadcn-inspired)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    opacity var(--t-fast);
  outline: none;
  user-select: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

.btn:disabled { pointer-events: none; opacity: 0.5; }

/* Variants */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* Botón secundario para secciones de fondo blanco/claro:
   borde gris (--border) + texto azul oscuro corporativo (--txt-heading).
   Hover: el borde pasa a oscuro, sin relleno (discreto). Mismo criterio que
   el CTA de las product-card. En fondos OSCUROS usar .btn-ghost-dark. */
.btn-outline {
  background: transparent;
  color: var(--txt-heading);
  border-color: var(--border);
}
.btn-outline:hover {
  background: transparent;
  color: var(--txt-heading);
  border-color: var(--txt-heading);
}

.btn-ghost {
  background: transparent;
  color: var(--txt-heading);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg-alt);
  color: var(--txt-heading);
}

/* Ghost on dark backgrounds */
.btn-ghost-dark {
  background: transparent;
  color: var(--txt-on-dark);
  border: 1px solid rgba(255,255,255,0.2);
}
.btn-ghost-dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.btn-secondary {
  background: var(--bg-alt);
  color: var(--txt-heading);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--border);
  color: var(--txt-heading);
}

/* Sizes — sólo 2 variantes para coherencia global */
/* base .btn = 40px  → header CTA, formularios                */
/* .btn-lg   = 48px  → hero, secciones, banners CTA           */
.btn-lg  { height: 48px; padding: 0 28px; font-size: 15px; }


/* ============================================================
   5. BADGES  (shadcn pill style)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.6;
}

.badge-accent  { background: var(--accent);        color: #fff; }
.badge-subtle  { background: var(--accent-subtle);  color: var(--accent);      border-color: rgba(0,157,226,0.2); }
.badge-muted   { background: var(--bg-alt);          color: var(--txt-secondary); border-color: var(--border); }
.badge-dark    { background: var(--txt-heading);     color: #fff; }
.badge-outline { background: transparent;            color: var(--txt-secondary); border-color: var(--border); }


/* ============================================================
   6. CARDS  (shadcn card)
   ============================================================ */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}


/* ============================================================
   7. FORMS  (shadcn input)
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-heading);
  letter-spacing: 0.01em;
}

.form-label .req { color: var(--accent); margin-left: 2px; }

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--txt-heading);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--txt-muted); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg);
}

.form-textarea {
  height: auto;
  min-height: 128px;
  padding: 12px;
  resize: vertical;
  line-height: 1.6;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-check label {
  font-size: 13px;
  color: var(--txt-secondary);
  line-height: 1.55;
  cursor: pointer;
}

.form-check label a { color: var(--accent); }


/* ============================================================
   8. TABLE  (shadcn table)
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 480px;
  text-align: left;
}

.data-table thead th {
  height: 40px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt-secondary);
  background: var(--bg-alt);
  border: none;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--txt-heading);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-alt); }

/* Specs table section header */
.data-table .tbl-section td {
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid rgba(0,157,226,0.15);
}

.data-table .tbl-field { color: var(--txt-secondary); font-weight: 400; width: 42%; }
.data-table .tbl-value { color: var(--txt-heading);   font-weight: 500; }


/* ============================================================
   9. BREADCRUMB
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--txt-secondary);
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--txt-muted);
}

.breadcrumb a { color: var(--txt-secondary); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li[aria-current="page"] { color: var(--txt-heading); }

.breadcrumb--dark { color: rgba(255,255,255,0.4); }
.breadcrumb--dark li + li::before { color: rgba(255,255,255,0.2); }
.breadcrumb--dark a { color: rgba(255,255,255,0.4); }
.breadcrumb--dark a:hover { color: var(--accent); }
.breadcrumb--dark li[aria-current="page"] { color: rgba(255,255,255,0.8); }


/* ============================================================
   10. HEADER
   ============================================================ */

.site-header {
  background: var(--bg-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--t-base);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 32px rgba(9,22,31,0.35);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  height: 68px;
}

@media (min-width: 1024px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}

.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .header-logo { justify-self: start; }
}

/* Logo — definido arriba junto a header-inner */

.header-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Móvil: logo un punto más pequeño (coherente con la navbar de la home) */
@media (max-width: 1023px) {
  .header-logo img { height: 31px; }
}

.header-logo-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

/* Nav — desktop (componente único: centrado, separadores `|`, sin pill).
   Mismo look en toda la web que la navbar de la home. */
.header-nav {
  display: none;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1024px) {
  .header-nav { display: flex; }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-list > li {
  position: relative;
  display: flex;
  align-items: center;
}

/* Separador `|` entre items de nav */
.nav-list > li + li::before {
  content: "";
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 4px;
}

/* has-mega: contenedor del dropdown flotante (anclado bajo el botón) */
/* has-mega en static: el panel se ancla al .site-header (ancho completo)
   para poder centrarlo en la barra, no al <li> "Productos". */
.nav-list > li.has-mega { position: static; }

/* Estado abierto del dropdown: solo cambio de color (sin pill) */
.nav-list > li.has-mega.is-open > button.nav-link {
  color: #fff;
  background: transparent;
}

/* Links de nav (componente único, sin pill ni subrayado): color 88% → blanco */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  transition: color 180ms ease-out;
  white-space: nowrap;
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: #fff;
}

.nav-chevron {
  opacity: 0.55;
  transition: transform var(--t-base);
  flex-shrink: 0;
}

/* ── Dropdown flotante: Productos ─────────────────────
   Panel anclado bajo el botón (no full-width). 2 columnas
   × 3 filas de categorías + columna de preview a la derecha. */

.has-mega { position: static; }

.mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(1040px, 94vw);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(9,22,31,0.18);
  z-index: 998;
  padding: 0;
  overflow: hidden;
  /* Oculto por defecto; animación de entrada suave */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

/* Puente invisible para que el hover no se corte entre botón y panel */
.mega-panel::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.mega-inner {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
}

.mega-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.mega-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.mega-card:hover,
.mega-card:focus-visible {
  background: var(--bg-alt);
  border-color: var(--border);
}

.mega-card__ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent-subtle, #EFF9FF);
  color: var(--accent);
}

.mega-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--txt-heading);
  line-height: 1.2;
}

/* Columna de preview (imagen de la categoría en hover) */
.mega-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.mega-preview__frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-dark, #323946);
}

.mega-preview__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .18s ease;
}

.mega-preview__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--txt-heading);
  text-align: center;
}

.mega-preview__desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--txt-secondary);
  text-align: center;
}

.mega-footer-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.mega-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--t-fast);
}

.mega-all-link:hover { gap: 10px; }

/* Backdrop: solo captura el click fuera; sin oscurecer (dropdown ligero) */
.mega-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: transparent;
}

.mega-backdrop.is-visible { display: block; }

/* Desktops estrechos (nav visible ≥1024): estrecha algo el panel para
   que no toque el borde derecho del viewport. */
@media (max-width: 1160px) {
  .mega-panel { width: min(940px, 94vw); }
  .mega-panel__grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .mega-cols { gap: 4px 28px; }
  .mega-panel__left { padding: 26px 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel { transition: opacity .01s, visibility .01s; transform: translateX(-50%); }
}

/* Search icon button */

/* CTA compacto: se muestra siempre. En mobile es icono-only cuadrado
   justo a la izquierda del burger (mismo alto); en desktop con texto. */
.header-cta {
  flex-shrink: 0;
  display: inline-flex;
  justify-self: end;
  align-self: center;
  width: auto;
  font-size: 14px;
  margin-left: auto;   /* empuja al burger al final en flex row */
}
.header-cta__text--desktop { display: inline; }
.header-cta__text--mobile  { display: none; }

@media (max-width: 1023px) {
  .header-cta {
    padding: 0 12px;
    height: 36px;
    font-size: 12.5px;
    gap: 0;
    margin-left: auto;
    margin-right: 8px;   /* separación del burger */
  }
  /* En móvil mantenemos el icono (paper-plane) — solo cambia el label.
     Icono a la DERECHA del texto (row-reverse) + un poco más de gap. */
  .header-cta {
    flex-direction: row-reverse;
    gap: 10px;
  }
  .header-cta__text--desktop { display: none; }
  .header-cta__text--mobile  { display: inline; }
  /* Cuando el mobile-menu esta abierto, ocultar el CTA del header —
     ya hay un CTA 'Solicitar informacion' dentro del propio menu. */
  .site-header:has(.header-burger.is-open) .header-cta { display: none; }
}

/* Hamburger */
.header-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
  outline: none;
  transition: border-color var(--t-fast);
}
.header-burger:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,157,226,.25);
}

@media (min-width: 1024px) { .header-burger { display: none; } }

.burger-line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
  transform-origin: center;
}

.header-burger.is-open .burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.header-burger.is-open .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header-burger.is-open .burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav — overlay full-screen, entra desde la derecha (280ms ease-out).
   Siempre en flujo, oculto con transform/visibility para poder animar.
   top acomoda el header flotante (top:48px + height:56px = 104px) más un
   pequeño respiro. En scroll (.is-scrolled) el header baja a top:0 y el
   inner sube a 68px → total 68px, así que damos un valor intermedio con
   safe-area-inset para iOS. */
.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-dark);
  z-index: 999;
  overflow-y: auto;
  padding: 24px var(--pad-x) 40px;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,0.07);
  visibility: hidden;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 280ms ease-out, visibility 0s linear 280ms;
}
/* Cuando el header está en modo scrolled o cuando el mobile-nav está
   abierto (fuerza el mismo estado sólido), el .mobile-nav sube a 68px. */
.site-header.is-scrolled ~ .mobile-nav,
body:has(.site-header.is-scrolled) .mobile-nav,
body:has(.header-burger.is-open) .mobile-nav { top: 68px; }

.mobile-nav.is-open {
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: transform 280ms ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
}

/* Nivel 1 (Inicio, Todos los productos, Nosotros) — display grande y
   blanco brillante. Uppercase para reforzar la jerarquía. */
.mobile-nav-link {
  display: block;
  padding: 14px 12px;
  /* Texto alineado con logo, separadores y CTA (borde de --pad-x); el fondo
     de hover sobresale 12px a cada lado sin mover el texto. */
  margin-inline: -12px;
  border-radius: var(--r-md);
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #ffffff;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
  line-height: 1.15;
}

.mobile-nav-link:hover { background: rgba(255,255,255,0.06); color: var(--accent, #009DE2); }

/* Nivel 2 (Bidones T.M, Cuadrados, BTR, IPE, Jerrycans, Accesorios) —
   más pequeño, mucho más apagado, sans body, indentado (sin guía izquierda). */
.mobile-nav-sub {
  padding-left: 12px;
  margin: 4px 0 8px;
}
.mobile-nav-sub .mobile-nav-link {
  font-family: var(--font-body, inherit);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.65);
  padding: 10px 12px;
}
.mobile-nav-sub .mobile-nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }

.mobile-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 18px 0 10px;
}

.mobile-nav-cta { margin-top: 16px; }
.mobile-nav-cta .btn { width: 100%; justify-content: center; }


/* ============================================================
   11. FOOTER — Dell-inspired
   ============================================================ */

.site-footer {
  background: var(--bg-footer);
}

/* Main footer body — 4 cols */
.footer-main {
  padding: 56px 0 48px;
}

/* minmax(0, 1fr): columnas iguales aunque un contenido largo (el email)
   pida más ancho; así la 2.ª columna arranca igual en todas las filas. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2x2 por defecto en movil */
  gap: 28px 24px;
}

/* Móvil + tablet <1024px: CTA a ancho completo, luego Contacto|Productos
   en fila, luego Empresa|Legal en fila (side-by-side dentro de --stacked).
   Además liberamos el max-width del titular y descripción del CTA para que
   puedan usar toda la anchura de la fila.
   OJO: la regla base .footer-col--stacked (flex column) está declarada
   MÁS ABAJO en este archivo — para ganar sin !important elevamos la
   especificidad con .footer-cols .footer-col--stacked. */
@media (max-width: 1023px) {
  .footer-col--cta {
    grid-column: 1 / -1;
    /* Filete separador: divide visualmente el CTA superior del bloque
       de links/contacto de abajo. Solo aplica cuando el CTA es
       full-width (móvil + tablet). */
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 4px;
  }
  .footer-col--cta .footer-cta-title { max-width: none; }
  .footer-col--cta .footer-cta-desc  { max-width: none; }
  .footer-cols .footer-col--stacked {
    grid-column: 1 / -1;
    display: grid;
    /* Mismas columnas y mismo gap horizontal que .footer-cols → Legal
       arranca en la misma vertical que Productos. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-direction: initial;
    gap: 28px 24px;
  }
  /* Teléfono y email: área táctil como la de los enlaces del footer. */
  .footer-contact__link { padding: 4px 0; }
}

@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (min-width: 1024px) {
  /* CTA + 4 cols de info del mismo ancho: Contacto | Productos | Empresa | Legal.
     display: contents saca Empresa y Legal del contenedor apilado (que se
     mantiene en móvil/tablet) y los convierte en columnas del grid. */
  .footer-cols { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 52px; }
  .footer-cols .footer-col--stacked { display: contents; }
}
/* Desktops estrechos (mismo corte que el mega menú): gap de tablet para que
   los enlaces largos («Bidones T.M Cuadrados») no partan en 2 líneas. */
@media (min-width: 1024px) and (max-width: 1160px) {
  .footer-cols { gap: 32px; }
}

/* Col 1 — CTA hero (título + descripción + botón) */
.footer-col--cta { min-width: 0; }
.footer-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); /* mismo tamaño que los H2 de sección (.hr-section-title) */
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 14ch;
  margin: 0 0 16px;
}
.footer-cta-desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  max-width: 40ch;
  margin: 0 0 24px;
}
/* Idéntico al CTA "Solicitar presupuesto" de la navbar (.header-cta):
   color (#009DE2) y hover (#008DD4) ya se heredan de .btn-primary; aquí solo
   igualamos el radio de la DS (--r-sm 4px, no el 8px del .btn base → deja de
   verse "más redondeado") y el mismo padding horizontal. */
.footer-cta-btn {
  align-self: flex-start;
  padding: 0 18px;
  border-radius: var(--r-sm);
}

/* Col 4 — Empresa + Legal apilados verticalmente */
.footer-col--stacked {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Footer typography — mismo font-size (14px) en todo el footer.
   Solo cambia opacidad: labels/headings al 44%; datos y links al 100%. */
/* padding-top 4px + interlineado 1.6 en la etiqueta: la 1.ª línea de Contacto
   arranca a la misma altura que el 1.er enlace de Productos/Empresa
   (que llevan padding 4px 0 y heredan 1.6). */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 4px;
}
.footer-contact__group { display: flex; flex-direction: column; gap: 6px; }
.footer-contact__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
  line-height: 1.6;
}
.footer-contact__link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #FFFFFF;
  transition: color var(--t-fast);
}
.footer-contact__link:hover { color: var(--accent); }
.footer-contact__address {
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.5;
}

/* Column headings — mismo tamaño (14px) pero opacidad reducida. */
.footer-col-heading {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 18px;
}

/* Nav links: mismo tamaño (14px), blanco puro. */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--accent); }

/* Certification badges */
.footer-cert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}

.footer-cert__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0,157,226,0.12);
  border: 1px solid rgba(0,157,226,0.25);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.footer-cert__badge--sm { font-size: 10px; }

.footer-cert__text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.36);
  margin: 0;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.42);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.footer-social__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Bottom bar */
.footer-bottom {
  padding: 16px 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Crédito de agencia: una línea; mensaje con la opacidad del copyright y la
   firma separada por color (blanco, como los enlaces del footer), sin signos. */
.footer-credit {
  font-size: 12px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
/* El a:hover global del tema padre oscurece el texto: el mensaje se queda
   igual en todos los estados y solo la firma pasa a accent. */
.footer-credit:hover,
.footer-credit:focus,
.footer-credit:active { color: rgba(255, 255, 255, 0.55); }
.footer-credit__by { color: #fff; transition: color var(--t-fast); }
.footer-credit:hover .footer-credit__by { color: var(--accent); }

.footer-legal {
  display: flex;
  gap: 0;
  list-style: none;
}

.footer-legal li + li::before {
  content: '·';
  padding: 0 10px;
  color: rgba(255,255,255,0.12);
}

.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  transition: color var(--t-fast);
}

.footer-legal a:hover { color: #fff; }


/* ============================================================
   12. SECTION PATTERNS
   ============================================================ */

.section { padding: 96px 0; }
.section--sm  { padding: 64px 0; }
.section--lg  { padding: 128px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); }

@media (max-width: 767px) {
  .section    { padding: 60px 0; }
  .section--sm { padding: 44px 0; }
  .section--lg { padding: 72px 0; }
}

/* Eyebrow label */
/* .eyebrow legacy — alineado con .hr-eyebrow.hr-eyebrow--accent de la home
   para que interiores y home compartan la misma estética de eyebrow. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* Headings */
/* Escala unificada con la home: h1 / h2 / h3 idénticos en toda la web */
.heading-xl { font-size: clamp(2.6rem, 4.4vw, 3.6rem); letter-spacing: -0.02em; }
.heading-lg { font-size: clamp(2.2rem, 3.4vw, 2.9rem); letter-spacing: -0.02em; }
.heading-md { font-size: clamp(1.5rem, 2.4vw, 2rem);   letter-spacing: -0.01em; }
.heading-sm { font-size: clamp(20px, 2.5vw, 26px); letter-spacing: -0.01em; }

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--txt-secondary);
  max-width: 560px;
}

/* Page hero dark — patrón editorial unificado para páginas interiores.
   Eyebrow accent + H1 display + sub. Comparte estética con .nos-hero pero
   compacto (no full-viewport). */
/* Arriba 8rem + 30px, como la ficha de producto en móvil: el menú es fijo y
   flota sobre el hero, y la miga de pan quedaba debajo (antes 36–112 px). */
.page-hero {
  background: var(--bg-dark);
  padding: calc(8rem + 30px) 0 clamp(48px, 7vw, 88px);
  position: relative;
  overflow: hidden;
}

.page-hero > .container { position: relative; z-index: 1; }

/* Breadcrumb spacing dentro del hero */
.page-hero .breadcrumb--dark { margin-bottom: 24px; }

.page-hero__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt-on-dark);
  margin-bottom: 20px;
  line-height: 1.05;
  max-width: 22ch;
}

.page-hero__sub {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
  max-width: 58ch;
  margin: 0;
}
/* Botones del hero (404): mismos valores que .nos-hero__actions. */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.75rem;
}

/* Red de seguridad: plantillas del tema padre (búsqueda, archivos, páginas sin
   plantilla propia) no tienen hero y el menú fijo pisaba el título. Mismo
   espacio superior que .page-hero. Las plantillas del tema hijo no usan #primary. */
#primary > .site-main { padding-top: calc(8rem + 30px); }

/* CTA Banner — editorial dark, comparte estética con .page-hero y .nos-values.
   Acepta .hr-eyebrow--accent como opción moderna y .eyebrow como legacy. */
.cta-banner {
  background: var(--bg-dark);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 100%),
    url('assets/images/cta-bg-2.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: clamp(64px, 9vw, 112px) 0;
  text-align: center;
  color: #fff;
}

@media (max-width: 767px) {
  .cta-banner { padding: 56px 0; }
}

.cta-banner .container { position: relative; z-index: 1; }

/* Eyebrow accent centrado dentro del CTA (legacy .eyebrow + moderno .hr-eyebrow) */
.cta-banner .eyebrow,
.cta-banner .hr-eyebrow {
  justify-content: center;
  color: var(--accent);
  margin-bottom: 18px;
}

.cta-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 auto 20px;
  line-height: 1.1;
  max-width: 22ch;
}

.cta-banner__sub {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  color: rgba(255,255,255,0.72);
  max-width: 52ch;
  margin: 0 auto 36px;
  line-height: 1.65;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}


/* ============================================================
   13. PRODUCT CARDS
   ============================================================ */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: none;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
  position: relative;
}


.product-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Hover discreto (handoff 2B): borde algo más oscuro + sombra suave elevada.
   Sin lift ni acento — la card no debe "saltar". */
.product-card:hover {
  box-shadow: 0 14px 34px rgba(50, 57, 70, 0.10);
  border-color: #C4CCD6;
  color: inherit;
}

/* Image area — fondo gris casi blanco. Antes usábamos --bg-alt (#F2F5F8)
   + overlay 0.02, pero al combinarse con el mix-blend-mode: multiply de
   la <img> el resultado quedaba visiblemente más oscuro que en la ficha.
   Aquí usamos un gris mucho más claro (#F8FAFC) y sin overlay, para
   igualar el tono nearly-white de la ficha una vez el multiply funde. */
.product-card__img {
  position: relative;
  background: #F8FAFC;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__img img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  padding: 12px;
  /* Funde fondos blancos de las fotos con el gris del media (--bg-alt);
     neutro sobre PNG transparentes. Evita la "ventana blanca". */
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .product-card__img img { transition: none; }
  .product-card:hover .product-card__img img { transform: none; }
}

.product-card__img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(0,157,226,0.15);
}

/* Chip (badge sobre imagen) */
.product-card__chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(4px);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.6;
}

/* Badge "Próximamente" — esquina superior izquierda (misma posición que el
   chip). Se usa con .badge-dark: sobre el fondo de la imagen el muted apenas
   se distingue. Aquí y no en site-v2.css porque la home no carga ese archivo. */
.product-card__soon {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* Badge UN — esquina superior derecha */
.product-card__un-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  background: var(--accent);
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.6;
}

/* Body */
.product-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Fila superior: título + chip de capacidad */
.product-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.product-card__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--txt-heading);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}

/* Capacidad como chip rectangular outline: borde y texto en azul de acento,
   sin relleno. */
.product-card__capacity {
  display: inline-block;
  flex-shrink: 0;
  padding: 4px 9px;
  background: transparent;
  color: var(--accent);
  /* Borde al 50% de opacidad; el texto se mantiene en accent puro. */
  border: 1px solid rgba(0, 157, 226, 0.5);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.product-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--txt-secondary);
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA discreto a todo el ancho — enlaza a la ficha (toda la card es clicable) */
.product-card__cta {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-heading);
  transition: border-color var(--t-fast);
}

.product-card:hover .product-card__cta { border-color: var(--txt-heading); }


/* ============================================================
   14. GRIDS
   ============================================================ */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 cols en movil por defecto */
  gap: 12px;
  align-items: stretch;
}

@media (min-width: 640px)  { .grid-3 { gap: 24px; } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

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


/* ============================================================
   15. HOME SECTIONS
   ============================================================ */

/* Hero */
.home-hero {
  background: var(--bg-dark);
  min-height: 62vh;
  display: flex;
  align-items: center;
  position: relative;
}

@media (max-width: 767px) {
  .home-hero { min-height: 52vh; }
}

/* Imagen de fondo dinámica */
.home-hero--has-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay oscuro sobre la imagen */
.home-hero--has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    rgba(0,0,0,0.86) 0%,
    rgba(0,0,0,0.68) 52%,
    rgba(0,0,0,0.32) 100%
  );
  pointer-events: none;
}

/* El contenedor queda por encima del overlay */
.home-hero--has-img .container {
  position: relative;
  z-index: 1;
}

.home-hero__inner {
  padding: 72px 0 64px;
}

@media (max-width: 767px) {
  .home-hero__inner { padding: 44px 0 40px; }
}

/* Layout 50/50 — título izquierda, subtítulo + CTAs derecha alineados al fondo */
@media (min-width: 1024px) {
  .home-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
    min-height: 52vh;
  }
}

.home-hero__col-right {
  display: flex;
  flex-direction: column;
}

/* Título */
.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 0.96;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.home-hero__title span { color: inherit; }

/* Tagline — <span> dentro del H1 */
.home-hero__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .home-hero__tagline { margin-bottom: 8px; }
}

/* Subtítulo largo (ya no se usa en hero, mantenemos por compatibilidad) */
.home-hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin-bottom: 40px;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Trust bar */
.trust-bar {
  background: var(--bg-alt);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}

.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (min-width: 768px) { .trust-bar__grid { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
  padding: 20px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  gap: 16px;
}

.trust-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.trust-item__icon i { width: 18px; height: 18px; }

.trust-item__body { display: flex; flex-direction: column; gap: 2px; }

.trust-item__val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--txt-heading);
  display: block;
  line-height: 1.1;
}

.trust-item__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt-muted);
  display: block;
}

/* Process steps */
.process-step {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 32px 28px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.process-step:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.process-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.process-step__icon {
  width: 44px;
  height: 44px;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.process-step__icon i { width: 22px; height: 22px; }

.process-step__num {
  display: none;
}

.process-step__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--txt-heading);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.process-step__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-secondary);
  margin: 0;
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 4px;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.gallery-main { grid-row: 1 / 3; overflow: hidden; }

.gallery-main img,
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}

.gallery-main:hover img,
.gallery-item:hover img { transform: scale(1.04); }

.gallery-item { overflow: hidden; }

@media (max-width: 639px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px 180px;
  }
  .gallery-main {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
}


/* ============================================================
   16. CATALOG PAGE
   ============================================================ */

/* Cabecera integrada del catálogo — H2 a la izquierda (ocupa su ancho
   natural), chips de filtrar a la derecha llenando el resto del ancho.
   El grid 50/50 anterior cortaba los pills por la izquierda porque el
   H2 se comía la mitad del ancho aunque no la usara.
   Stack en móvil. Reemplaza al antiguo .filter-bar sticky. */
.catalog-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px 40px;
  align-items: center;
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.catalog-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--txt-heading);
  margin: 0 0 12px;
}

.catalog-header__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--txt-secondary);
  margin: 0;
  max-width: 46ch;
}

/* Chips de familia — 1 línea si caben, wrap si no. Sin scroll oculto
   (que acaba cortándolos en desktop). */
.catalog-header__chips-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.catalog-header__filter-icon {
  color: var(--txt-muted);
  flex-shrink: 0;
  margin-right: 4px;
}

/* Desktop: se oculta el icono de filtros (los pills ya son autoexplicativos
   junto al H2). Solo se muestra en móvil/tablet. */
@media (min-width: 900px) {
  .catalog-header__filter-icon { display: none; }
}

/* Variante compacta del chip para que caben los 6 + Todos en 1 línea. */
.filter-btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Móvil / tablet: stack — H2 arriba, chips debajo alineados a la izquierda.
   Los chips vuelven a envolver (flex-wrap: wrap) para que TODOS sean
   visibles sin scroll horizontal, y se quita el filete inferior de la
   cabecera para que la sección respire. */
@media (max-width: 899px) {
  .catalog-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    padding-bottom: 0;
    margin-bottom: 24px;
    border-bottom: 0;
  }
  .catalog-header__chips-wrap {
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.filter-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--txt-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,157,226,0.28);
}

.catalog-item[hidden] { display: none; }


/* ============================================================
   17. CATEGORY HERO
   ============================================================ */

.cat-hero {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  background: var(--bg-dark);
}

.cat-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cat-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.62;
}

.cat-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(50,57,70,0.85) 38%, rgba(50,57,70,0) 78%);
  z-index: 1;
}

.cat-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0 36px;
  width: 100%;
  max-width: 680px;
}

.cat-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cat-hero__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-on-dark);
  line-height: 1.1;
  margin: 0;
}

.cat-hero__desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin: 0;
}


/* ============================================================
   18. SINGLE PRODUCT — Ficha de producto
   ============================================================ */

/* 1. Breadcrumb wrapper (fondo oscuro) — el breadcrumb usa .breadcrumb--dark global */
/* ── Ficha de producto ────────────────────────────────── */

/* 1. Breadcrumb — fino, fondo claro */
.ficha-breadcrumb {
  background: var(--bg-dark-2);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 12px 0;
}

.ficha-breadcrumb .breadcrumb { margin: 0; }

/* 2. Sección principal */
.ficha-main {
  background: #fff;
  padding: 72px 0 56px;
}

/* Grid imagen | info+specs */
.ficha-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 768px) {
  .ficha-grid { grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
}

/* Imagen — sticky, cuadrada, imagen a sangre + overlay sutil
   + esquinas ligeramente redondeadas (design system --r-md). */
.ficha-img-wrap {
  background: var(--bg-alt);
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  position: relative;
  border-radius: var(--r-md);
}

.ficha-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.02);
  pointer-events: none;
  border-radius: inherit;
}

@media (min-width: 768px) {
  .ficha-img-wrap {
    position: sticky;
    /* Padding-top respecto al menu flotante — reducido un 20% (160 -> 128). */
    top: 128px;
  }
}

.ficha-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

.ficha-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,157,226,0.15);
}

/* Info — columna derecha */
.ficha-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Link de familia encima del título */
.ficha-familia-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 10px;
}

.ficha-familia-link:hover { text-decoration: underline; }

/* Título H1 */
.ficha-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-heading);
  margin: 0 0 6px;
  line-height: 1.1;
}

/* Capacidad · Peso */
.ficha-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--txt-body);
  margin: 0 0 20px;
  line-height: 1.4;
}

.ficha-meta__capacidad { font-weight: 600; color: var(--txt-heading); }
.ficha-meta__sep       { color: var(--txt-muted); }
.ficha-meta__peso      { font-weight: 400; }

/* Badges técnicos */
.ficha-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.ficha-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt-secondary);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  line-height: 1.6;
}

.ficha-badge--accent {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: rgba(0,157,226,0.25);
}

/* Descripción */
.ficha-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--txt-body);
  margin: 0 0 28px;
}

/* CTAs */
.ficha-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 3. Bloque de specs — dentro de la columna derecha.
   Sin margen superior: el título arranca al mismo nivel que la imagen. */
.ficha-specs-block {
  background: transparent;
  padding: 0;
  margin-top: 0;
}

/* Título "Especificaciones técnicas" con estilo H2 de sección
   (mismo tamaño y peso que .hr-section-title del resto de la web). */
.ficha-specs-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--txt-heading);
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}

/* Tabla de specs — cabeceras de grupo en accent con top-border, sin
   fondo; sin dividers verticales ni horizontales entre filas de datos.
   Selectores incluyen tanto <td> como <th>. */
.ficha-specs-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  font-family: var(--font-body);
  /* Base +10%: 15 -> 17px */
  font-size: 17px;
  background: transparent;
}
.ficha-specs-table td,
.ficha-specs-table th { border: 0; text-align: left; }

/* Cabecera de grupo — texto azul accent + divider accent posicionado con
   ::before para poder controlar el espacio ARRIBA del divider (separa
   secciones) y el espacio ABAJO (linea pegada al titulo). */
.ficha-specs-section > th,
.ficha-specs-section > td {
  position: relative;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  /* Cabecera +10%: 16 -> 18px */
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  padding: 34px 0 6px;
  border-top: 0;
}
.ficha-specs-section > th::before,
.ficha-specs-section > td::before {
  content: '';
  position: absolute;
  top: 26px;              /* 26px de aire por encima -> separador entre categorias */
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
}
/* Primera cabecera: menos aire arriba (no viene de una seccion previa). */
.ficha-specs-table tr.ficha-specs-section:first-child > th,
.ficha-specs-table tr.ficha-specs-section:first-child > td { padding-top: 8px; }
.ficha-specs-table tr.ficha-specs-section:first-child > th::before,
.ficha-specs-table tr.ficha-specs-section:first-child > td::before { top: 0; }

/* Filas de datos: padding vertical uniforme + divider inferior gris muy
   claro entre filas (patrón del mock). */
.ficha-specs-table tr:not(.ficha-specs-section) > th,
.ficha-specs-table tr:not(.ficha-specs-section) > td {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  vertical-align: baseline;
  background: transparent;
}
.ficha-specs-table tr:not(.ficha-specs-section):hover > th,
.ficha-specs-table tr:not(.ficha-specs-section):hover > td { background: transparent; }

/* Campo (etiqueta) — corporativa oscura, peso 600. */
.ficha-specs-field {
  color: var(--txt-heading);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  width: 55%;
  padding-right: 16px;
}
/* Valor — corporativa gris, peso 400. */
.ficha-specs-value {
  color: var(--txt-secondary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
}

/* Check (booleano) — icono lucide en accent blue. */
.ficha-specs-check { color: var(--accent); display: inline-block; vertical-align: middle; }



/* ============================================================
   19. NOSOTROS
   ============================================================ */

.nos-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 72px;
  align-items: stretch;
}

@media (min-width: 768px) { .nos-intro { grid-template-columns: 2fr 3fr; } }

.nos-intro__img {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 1/1;
  min-height: 320px;
}

.nos-intro__img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.nos-intro__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt-heading);
  margin-bottom: 20px;
  line-height: 1.2;
}

.nos-intro__text {
  font-size: 17px;
  line-height: 1.85;
  color: var(--txt-body);
  margin-bottom: 0;
}

.nos-quote {
  padding: 20px 24px;
  margin: 24px 0 0;
  background: var(--accent-subtle);
}

.nos-quote p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--txt-secondary);
  font-style: italic;
}

/* Metrics (dark strip) */
.metrics-dark {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-dark);
}

@media (min-width: 640px) {
  .metrics-dark { grid-template-columns: repeat(3, 1fr); }
  .metrics-dark .metric-item + .metric-item {
    border-left: 1px solid rgba(255,255,255,0.07);
  }
}

.metric-item {
  text-align: center;
  padding: 56px 32px;
}

.metric-item__val {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: 12px;
}

.metric-item__lbl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

/* Values grid */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px)  { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
  padding: 28px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.value-card__icon { color: var(--accent); margin-bottom: 16px; }
.value-card__icon i { width: 28px; height: 28px; }

.value-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--txt-heading);
  margin-bottom: 8px;
}

.value-card__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--txt-secondary);
  margin: 0;
}


/* ============================================================
   20. CONTACTO  (rediseño handoff · tokens del tema)
   ============================================================ */

/* Hero con imagen de fondo a todo el ancho + scrim para legibilidad */
.page-hero--contacto {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.page-hero--contacto .container { position: relative; z-index: 2; width: 100%; }
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(96deg,
    rgba(20, 24, 31, 0.95) 0%,
    rgba(20, 24, 31, 0.82) 42%,
    rgba(20, 24, 31, 0.50) 78%,
    rgba(20, 24, 31, 0.28) 100%);
}

/* Accesos rápidos del hero (chips tel/email) */
.page-hero__chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hero-chip:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--accent); }
.hero-chip i { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* Tira de 4 tarjetas de contacto (bordes internos vía top/left + right/bottom) */
.contacto-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.contacto-card {
  padding: 28px 26px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contacto-card__icon { width: 22px; height: 22px; color: var(--accent); margin-bottom: 14px; display: block; }
.contacto-card__lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--txt-secondary);
  margin-bottom: 8px;
}
.contacto-card__val { font-size: 14px; line-height: 1.55; color: var(--txt-body); }
.contacto-card__val--break { word-break: break-word; }
.contacto-card__val a { color: var(--txt-heading); font-weight: 600; transition: color var(--t-fast); }
.contacto-card__val a:hover { color: var(--accent); }

/* Mapa (izq) + formulario (der) a 2 columnas */
.contacto-mapform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}
.contacto-mapform__map { position: relative; min-height: 520px; }
.contacto-mapform__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(1.05);
}
.contacto-formcol { padding: clamp(28px, 3.5vw, 48px); }
.contacto-formcol__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.contacto-formcol__line { display: inline-block; width: 28px; height: 2px; background: var(--accent); }
.contacto-formcol__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.contacto-formcol__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--txt-heading);
  margin: 0 0 24px;
}
.contacto-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.contacto-form__grid .form-field--full { grid-column: 1 / -1; }

/* Responsive */
@media (max-width: 900px) {
  .contacto-cards { grid-template-columns: repeat(2, 1fr); }
  .contacto-mapform { grid-template-columns: 1fr; }
  .contacto-mapform__map { min-height: 320px; }
}
@media (max-width: 560px) {
  .contacto-cards { grid-template-columns: 1fr; }
  .contacto-form__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   21. PRODUCT NAV (familia ← → familia)
   ============================================================ */

.product-nav {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.product-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
}

.product-nav__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: background var(--t-fast);
}

.product-nav__link:hover { background: var(--bg); }

.product-nav__link--prev { align-items: flex-start; }
.product-nav__link--next { align-items: flex-end; }

.product-nav__dir {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.product-nav__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-heading);
}

.product-nav__all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-secondary);
  background: var(--bg);
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.product-nav__all:hover { border-color: var(--accent); color: var(--accent); }


/* ============================================================
   22. UTILITIES
   ============================================================ */

.text-center { text-align: center; }
.text-right  { text-align: right; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap   { flex-wrap: wrap; }
.gap-3       { gap: 12px; }
.gap-4       { gap: 16px; }

.mt-2  { margin-top: 8px; }
.mt-4  { margin-top: 16px; }
.mt-8  { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-auto { margin-top: auto; }
.mb-6  { margin-bottom: 24px; }
.mb-10 { margin-bottom: 40px; }

.no-products {
  text-align: center;
  padding: 80px 0;
  color: var(--txt-muted);
  font-size: 16px;
}

/* Section header util */
.section-hd        { margin-bottom: 56px; }
.section-hd-center { margin-bottom: 56px; text-align: center; }
.section-hd-center .lead { margin-inline: auto; }

/* ============================================================
   23. NOTICE BANNERS (form feedback)
   ============================================================ */

.notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 24px;
  border-left: 4px solid transparent;
  font-size: 15px;
  line-height: 1.6;
}

.notice-banner p { margin: 0; }
.notice-banner strong { font-weight: 600; }

.notice-banner--ok {
  background: #F0FFF4;
  border-left-color: var(--color-success, #2ECC71);
  color: #166534;
}

.notice-banner--ok i { color: #16a34a; margin-top: 2px; flex-shrink: 0; }

.notice-banner--error {
  background: #FFF5F5;
  border-left-color: #E74C3C;
  color: #991b1b;
}

.notice-banner--error i { color: #dc2626; margin-top: 2px; flex-shrink: 0; }

/* ============================================================
   24. FORM VALIDATION STATES
   ============================================================ */

.form-input.has-error,
.form-textarea.has-error {
  border-color: #E74C3C;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.15);
}

.form-error-msg {
  font-size: 12px;
  color: #E74C3C;
  margin-top: 4px;
  display: none;
}

.form-field.has-error .form-error-msg { display: block; }

/* ============================================================
   25. LEGAL PAGES (Aviso legal, Privacidad, Cookies)
   ============================================================ */

.legal-content {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-body);
}

.legal-content > * + * { margin-top: 16px; }

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--txt-heading);
  letter-spacing: -0.01em;
  margin-top: 48px;
  margin-bottom: 12px;
  line-height: 1.25;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--txt-heading);
  margin-top: 28px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--txt-body);
  margin: 0;
}

.legal-content p strong { color: var(--txt-heading); font-weight: 600; }

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover { color: var(--accent-hover); }

.legal-content ul,
.legal-content ol {
  margin: 8px 0 0;
  padding-left: 22px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--txt-body);
  margin-bottom: 6px;
  list-style-position: outside;
}

.legal-content ul li { list-style: disc; }
.legal-content ol li { list-style: decimal; }

/* Card de datos identificativos */
.legal-id-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 24px 28px;
  margin: 16px 0 8px;
}

.legal-id-card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

@media (min-width: 600px) {
  .legal-id-card dl { grid-template-columns: 180px 1fr; column-gap: 24px; row-gap: 8px; }
}

.legal-id-card dt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-secondary);
  letter-spacing: 0.02em;
}

.legal-id-card dd {
  font-size: 14px;
  color: var(--txt-heading);
  margin: 0;
  word-break: break-word;
}

/* Tabla de cookies */
.legal-content .table-wrap {
  overflow-x: auto;
  margin: 16px 0 0;
  border: 1px solid var(--border);
}

.legal-content .cookies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--font-body);
  min-width: 720px;
}

.legal-content .cookies-table thead th {
  background: var(--bg-alt);
  color: var(--txt-heading);
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.legal-content .cookies-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #E4E4E7);
  vertical-align: top;
  line-height: 1.5;
  color: var(--txt-body);
}

.legal-content .cookies-table tbody tr:last-child td { border-bottom: none; }

.legal-content .cookies-table tbody td:first-child {
  font-family: 'Courier New', monospace;
  color: var(--accent-hover, #008DD4);
  font-weight: 600;
  white-space: nowrap;
}

/* Updated date */
.legal-content__updated {
  display: block;
  font-size: 13px;
  color: var(--txt-muted);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}


/* ============================================================
   26. RESPONSIVE — Mobile-first corrections
   ============================================================ */

/* Specs table: scroll horizontal en móvil */
.ficha-specs-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ficha de producto en móvil */
@media (max-width: 767px) {
  .ficha-main { padding: 28px 0 36px; }
  .ficha-grid { gap: 28px; }
  .ficha-img-wrap { aspect-ratio: 1/1; }
  .ficha-img-wrap img { object-fit: contain; padding: 0; }
  /* Foto → "Especificaciones técnicas": solo el gap de la rejilla (28px).
     Antes sumaba 28 + 24 + 24 = 76px. */
  .ficha-specs-block { padding: 0; margin-top: 0; }
  /* Título en una línea: escala de .heading-md en móvil (20–28px). */
  .ficha-specs-title { font-size: clamp(20px, 5vw, 28px); }
}

/* H2 de sección en familia y ficha («Productos de la familia…», «Otros
   productos»). home.css no se carga aquí y el H2 heredaba los 35 px fijos del
   tema padre: por debajo de ~830 px superaba al H1 del hero (32 px). Hasta
   tablet: 24–28 px (24 = H2 de Contacto en móvil; 28 = techo de .heading-md),
   siempre por debajo del H1; en escritorio se mantiene (H1 60 / H2 35). */
@media (max-width: 1023px) {
  .nos-r .hr-section-title { font-size: clamp(24px, 5vw, 28px); }
}

/* Sección nosotros en móvil */
@media (max-width: 767px) {
  .nos-intro { gap: 32px; }
  .nos-intro__img { aspect-ratio: 3/2; min-height: auto; }
  .nos-intro__title { font-size: 26px; }
}

/* Trust bar: texto más pequeño en móvil */
@media (max-width: 480px) {
  .trust-item { padding: 14px 16px; gap: 12px; }
  .trust-item__number { font-size: 22px; }
}

/* Footer cols en móvil: Contacto a todo el ancho (el email no cabe en media
   columna) y debajo una sola rejilla: Productos | Empresa + Legal apilados.
   Así las dos columnas comparten vertical y arrancan a la misma altura. */
@media (max-width: 639px) {
  .footer-main { padding: 44px 0 36px; }
  .footer-cols { gap: 32px 24px; }
  .footer-cols .footer-col--contacto { grid-column: 1 / -1; }
  .footer-cols .footer-col--stacked {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

/* Page hero en móvil */
@media (max-width: 767px) {
  .page-hero { padding-bottom: 28px; }
  /* (sin override: el H1 queda en 32 px como el resto de heros; con 22 px
     igualaba a los H2 del texto legal) */
}

/* Category hero en móvil */
@media (max-width: 767px) {
  .cat-hero { min-height: 220px; }
  .cat-hero__inner { padding: 28px 0; }
  .cat-hero__overlay {
    background: linear-gradient(to bottom, rgba(50,57,70,0.85) 0%, rgba(50,57,70,0.45) 60%, rgba(50,57,70,0) 100%);
  }
}

/* Header CTA visible en todo tamaño (compacto icon-only en <1024). */

/* Product card en móvil */
@media (max-width: 479px) {
  .product-card__name { font-size: 18px; }
  .product-card__body { padding: 18px; }
}

/* grid-2 en móvil: separación razonable */
@media (max-width: 767px) {
  .grid-2 { gap: 32px; }
}

/* Product card en móvil (2 columnas): card compacta para caber en 2 col.
   - Aspect-ratio 1/1 (cuadrada) para el área de imagen.
   - Body con menos padding, title y CTA mas pequeños, descripción visible
     pero acotada a 3 líneas para no romper alturas.
   - Chip de capacidad DEBAJO del título (stack vertical) para no cortarse. */
@media (max-width: 599px) {
  .product-card__img { aspect-ratio: 1 / 1; }
  .product-card__body { padding: 12px; }
  .product-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
  }
  .product-card__name { font-size: 15px; line-height: 1.15; }
  /* 12 px mínimo legible; si no cabe en la card (p. ej. «Cierres y complementos»
     a 360 px) parte en 2 líneas en vez de recortarse. */
  .product-card__capacity { font-size: 12px; padding: 2px 6px; align-self: flex-start; white-space: normal; max-width: 100%; }
  .product-card__desc {
    font-size: 12.5px;
    line-height: 1.4;
    margin: 0 0 12px;
    -webkit-line-clamp: 3;
  }
  .product-card__cta { padding: 8px; font-size: 12px; }
}
/* Tablet portrait (600-767px): mantener grid actual y card algo mas
   compacta pero menos que en movil. */
@media (min-width: 600px) and (max-width: 767px) {
  .product-card__img { aspect-ratio: 5 / 4; }
}

/* Breadcrumb: evitar overflow en rutas largas */
.breadcrumb {
  flex-wrap: wrap;
}

/* Mega-panel y backdrop: ocultos en móvil explícitamente */
@media (max-width: 1023px) {
  .mega-panel,
  .mega-backdrop { display: none !important; }
}


/* Section headings en móvil */
@media (max-width: 767px) {
  .heading-xl { font-size: clamp(26px, 7vw, 38px); }
  .heading-lg { font-size: clamp(22px, 5.5vw, 32px); }
  .heading-md { font-size: clamp(20px, 5vw, 28px); }
}

/* Sección hd + lead en móvil */
@media (max-width: 767px) {
  .section-hd, .section-hd-center { margin-bottom: 36px; }
  .lead { font-size: 16px; }
}

/* Process steps en móvil: reducir icono */
@media (max-width: 479px) {
  .process-step__icon { width: 40px; height: 40px; }
}

/* Ficha CTA row en móvil: stack vertical */
@media (max-width: 479px) {
  .ficha-cta-row { flex-direction: column; }
  .ficha-cta-row .btn { width: 100%; justify-content: center; }
}

/* Botones lg en móvil: padding reducido */
@media (max-width: 479px) {
  .btn-lg { font-size: 14px; padding: 0 20px; }
}

/* Related products en móvil */
@media (max-width: 767px) {
  .related-products { padding: 40px 0; }
}

/* Product nav en móvil: Anterior | Siguiente a media anchura cada uno (antes
   el centro "Ver todos" los dejaba en columnas de ~90px y los nombres se
   partían en 3 líneas) y "Ver todos" centrado debajo. */
@media (max-width: 599px) {
  .product-nav__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .product-nav__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}




/* ============================================================
   HOME REDESIGN (handoff) — Global: marquee + header/menú
   Referencia: goodlifemeds.com (barra superior, header tripartito)
   ============================================================ */

:root { --blue-dark: #323946; } /* marquee: usa el oscuro único de marca */

/* ── 0. Marquee superior de métricas ─────────────────────────
   Loop CSS infinito: track = contenido ×2, translateX 0 → -50%.
   En flujo normal: desaparece con el propio scroll de la página. */
.tp-marquee {
  height: 30px;
  overflow: hidden;
  background: var(--marquee-bg, var(--blue-dark));
  color: #fff;
}

.tp-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  white-space: nowrap;
  animation: tp-marquee var(--marquee-dur, 40s) linear infinite;
}

/* Pausa al hover: permite leer las métricas */
.tp-marquee:hover .tp-marquee__track { animation-play-state: paused; }

.tp-marquee__group { display: inline-flex; align-items: center; }

.tp-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 12px; /* mínimo legible del sitio (antes 10.5px) */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tp-marquee__item strong { font-weight: 700; }

.tp-marquee__sep { margin: 0 2rem; opacity: 0.45; }

/* Dot pulsante perpetual (planta operativa) */
.tp-marquee__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 157, 226, 0.7);
  animation: tp-marquee-pulse 2.6s ease-out infinite;
}
@keyframes tp-marquee-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 157, 226, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 157, 226, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 157, 226, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-marquee__dot { animation: none; }
}

@keyframes tp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Móvil: velocidad ligeramente mayor (compensa el ancho menor) */
@media (max-width: 640px) {
  .tp-marquee__track { animation-duration: calc(var(--marquee-dur, 40s) * 0.75); }
}

/* ── 1. Header — estados (transparente sobre hero / sólido sticky) ──
   El header es sticky global; en la home va transparente con margen
   negativo para que el hero se deslice por debajo. .is-scrolled
   (navigation.js, umbral 80px) le devuelve el fondo sólido #0D0D0D. */
.header-inner { transition: height 200ms ease-out; }

/* Home v3.5 — Header transparente sobre hero; al scroll, la barra entera
   (full-width, no una caja) se vuelve oscura. Fuera "cristal" flotante. */

body .site-header {
  position: fixed;
  top: 48px; /* marquee (30px) + 18px de aire */
  left: 0;
  right: 0;
  background: transparent;   /* el frost vive en .header-inner (isla flotante) */
  border: none;
  transition:
    top 200ms ease-out,
    background 200ms ease-out,
    box-shadow 200ms ease-out;
  z-index: 1000;
}
body.home .container {
  max-width: var(--container);
  padding-inline: var(--pad-x);
}
/* Inner como contenedor flotante con frost sobre el hero.
   Nested radii con la nueva regla max 8px: outer 8px + CTA interior 4px.
   .header-cta (40px, radius 4px) dentro de un inner de 56px deja
   8px de gap arriba/abajo; pad-right 8px mantiene el mismo aire
   horizontal → CTA "abrazado" por igual en los 4 lados.
   Al hacer scroll (.is-scrolled más abajo) pierde el frost y se estira
   a la barra full-width sólida. */
body .header-inner {
  height: 56px;
  padding: 0 8px 0 clamp(16px, 2vw, 22px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  background: rgba(13, 13, 13, 0.38);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition:
    height 200ms ease-out,
    background 200ms ease-out,
    backdrop-filter 200ms ease-out,
    border 200ms ease-out,
    border-radius 200ms ease-out,
    box-shadow 200ms ease-out,
    padding 200ms ease-out;
}

/* Estado sticky: marquee sale con el scroll, header pega al top y toda la
   barra pasa a fondo oscuro sólido full-width — el inner pierde la forma
   flotante y se funde con la barra.
   MISMO estilo cuando el mobile-nav está abierto (:has() sobre el burger)
   para que header y desplegable compartan fondo dark solido. */
body .site-header.is-scrolled,
body .site-header:has(.header-burger.is-open) {
  top: 0;
  background: var(--bg-dark, #323946);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
body .site-header.is-scrolled .header-inner,
body .site-header:has(.header-burger.is-open) .header-inner {
  height: 68px;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Menú móvil abierto: sin gap. Con el CTA oculto quedaba un hueco de 8px a la
   derecha de la X y no alineaba con separadores y CTA del menú. */
body .site-header:has(.header-burger.is-open) .header-inner { gap: 0; }

/* Móvil: la isla flotante de la home baja un poco de altura.
   Padding horizontal simétrico e igual al gap vertical implícito
   ((64 - 36 CTA) / 2 ≈ 14px) para que el CTA y el burger queden
   con el mismo aire arriba y a los lados del contenedor.
   gap reducido de 1rem a 0.5rem: CTA más pegado al burger. */
@media (max-width: 1023px) {
  body .header-inner {
    gap: 0.5rem;
    height: 64px;
    padding: 0 14px;
  }
}


/* Hamburguesa en blanco sobre el hero (todas las pags con header flotante) */
body .header-burger {
  border-color: rgba(255, 255, 255, 0.25);
  background: transparent;
}
body .burger-line { background: rgba(255, 255, 255, 0.9); }

/* Los estilos de .nav-link viven en el componente único de arriba
   (sección HEADER): color 88% → blanco en hover/activo, peso 500, sin pill.
   Se eliminaron aquí los overrides divergentes (peso 600 / opacity 0.72)
   que rompían la coherencia entre home e interiores. */

/* Colores propios del CTA global; el radius base (--r-md, 8px) ya está en .btn */
.btn-primary:hover { background: var(--accent-hover); }

/* CTA del header: azul sólido compacto (único elemento con color).
   Radio unificado a --r-sm (4px) vía .btn — sin override propio. */
.header-cta {
  padding: 0 20px;
  height: 40px;
}

/* ── Dropdown Productos v3 (ref: goodlife) ────────────────────────────────
   Layout: lista IZQ (thumbs blancos) + destacado DER (imagen grande que
   cambia en hover) + CTA full-width al pie. Cabecera con label editorial. */
.mega-panel { background: #FFFFFF; border-color: var(--border); }

.mega-panel__body { padding: 0; }

/* Grid: zona izquierda flexible (2 columnas + CTA) + destacado fijo a la derecha */
.mega-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: stretch;
}

/* ── Zona izquierda ── */
.mega-panel__left {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 26px;
}
.mega-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  gap: 4px 32px;
}
.mega-col__head {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-secondary);
  margin: 0 0 14px;
}
.mega-links { list-style: none; margin: 0; padding: 0; }
.mega-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Sin padding horizontal para que el nombre quede en línea con el head
     de sección. El hover se pinta con box-shadow y no descoloca el texto. */
  padding: 11px 0;
  border-radius: var(--r-sm);
  border-bottom: 1.5px dotted var(--border);
  text-decoration: none;
  transition: background 150ms ease-out, box-shadow 150ms ease-out;
}
.mega-links li:last-child .mega-link { border-bottom: 0; }
.mega-link__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--txt-heading);
}
.mega-link__cap {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-secondary);
  white-space: nowrap;
  transition: color 150ms ease-out;
}
.mega-link:hover,
.mega-link:focus-visible,
.mega-link.is-active {
  background: var(--accent-subtle);
  /* Extiende el tinte 12px a cada lado sin mover el texto (alineado al head). */
  box-shadow: 12px 0 0 var(--accent-subtle), -12px 0 0 var(--accent-subtle);
  border-bottom-color: transparent;
}
.mega-link:hover .mega-link__cap,
.mega-link:focus-visible .mega-link__cap,
.mega-link.is-active .mega-link__cap { color: var(--accent); }

/* ── Destacado (derecha) — imagen a sangre + título + descripción ── */
.mega-featured {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  min-height: 300px;
}
.mega-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 62%;
  /* Padding intermedio: bidón visible sin verse desmesurado y con
     hueco arriba para título+descripción. */
  padding: 115px 55px 34px;
  mix-blend-mode: multiply;
  transition: opacity 240ms ease;
}
.mega-featured__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244,246,249,0.94) 0%, rgba(244,246,249,0.5) 22%, transparent 46%),
    radial-gradient(115% 85% at 50% 38%, transparent 55%, rgba(50,57,70,0.08) 100%);
}
.mega-featured__meta {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding: 28px 30px;
}
.mega-featured__name {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--txt-heading);
  margin: 0 0 8px;
}
.mega-featured__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt-secondary);
  max-width: 290px;
  margin: 0;
  /* Máximo 2 líneas (recorta descripciones largas del CMS). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── CTA full-width ── */
/* CTA como el botón outline del catálogo (img2): fondo transparente,
   borde y texto oscuro; menos altura. La flecha va a la derecha. */
.mega-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--txt-heading);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.mega-cta:hover,
.mega-cta:focus-visible {
  background: transparent;
  color: var(--txt-heading);
  border-color: var(--txt-heading);
}
.mega-cta i,
.mega-cta svg { width: 16px; height: 16px; }

/* ── 8. Footer: iconos de contacto en azul ── */
.footer-address__line i[data-lucide],
.footer-address__line svg { color: var(--accent); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .tp-marquee__track { animation-play-state: paused; }
  .nav-link::after,
  .mega-item,
  .header-inner,
  body .site-header { transition: none; }
}