/* =============================================================================
   DERVICH — Design System
   -----------------------------------------------------------------------------
   Todos los valores de este archivo salen MEDIDOS de los PDFs del Figma
   (export de 1911px de ancho, escala 1:1 → 1pt del PDF = 1px de diseño).
   Lo que no está en los PDFs va marcado con  [A CONFIRMAR]  o se deriva
   con color-mix() para no inventar hexadecimales.

   Prefijo de todos los tokens y clases: dv-
   Orden de carga: este archivo primero, después el CSS de cada plantilla.
   Ubicación sugerida en el theme: assets/css/dervich-design-system.css
============================================================================= */


/* =============================================================================
   1. TOKENS BASE
============================================================================= */

:root {

  /* --- 1.1 Layout -------------------------------------------------------- */
  --dv-frame:            1911px;  /* ancho del frame de Figma (referencia) */
  --dv-container:        1488px;  /* medido: texto de 212 a 1698 */
  --dv-gutter:             24px;  /* medido: 4 cards de 354 + 3 gaps de 24 */
  --dv-container-pad:     24px;   /* padding lateral en pantallas chicas */
  --dv-header-h:           62px;  /* medido: banda blanca 2→63 */
  --dv-hero-h:            632px;  /* hero de categoría: 63→695 */
  --dv-hero-h-dark:       773px;  /* hero de solución: 63→836 */

  /* --- Banners (webp de 1905px de ancho, entregados aparte) --------------
     Rutas relativas a assets/css/. Si el theme los guarda en otro lado,
     se pisan estas 5 variables y no hay que tocar nada más.
     Alturas nativas medidas: categorías 902 · marcas 801 · producto 746
     soluciones 738 · problemas 653. La grilla de los banners tiene un paso
     de 56,5px (no 96px, como estaba en el placeholder anterior).           */
  --dv-banner-categorias: url("../img/banners/hero-categorias.webp");
  --dv-banner-marcas:     url("../img/banners/hero-marcas.webp");
  --dv-banner-producto:   url("../img/banners/hero-producto.webp");
  --dv-banner-soluciones: url("../img/banners/hero-soluciones.webp");
  --dv-banner-problemas:  url("../img/banners/hero-problemas.webp");
  --dv-drawer-w:          460px;  /* medido en Cotizar.pdf: 460x1191 @ x=1448 */
  --dv-footer-h:          437px;  /* medido: banda #003366 de 437 en todas */

  /* --- 1.2 Escala de espaciado ------------------------------------------ */
  --dv-space-1:   4px;
  --dv-space-2:   8px;
  --dv-space-3:  12px;
  --dv-space-4:  16px;
  --dv-space-5:  20px;   /* padding interno de card (medido) */
  --dv-space-6:  24px;   /* gap de grilla (medido) */
  --dv-space-8:  32px;
  --dv-space-10: 40px;
  --dv-space-12: 48px;
  --dv-space-16: 64px;   /* padding vertical de sección (medido: 65) */
  --dv-space-20: 80px;
  --dv-section-y: var(--dv-space-16);

  /* --- 1.3 Marca --------------------------------------------------------- */
  --dv-blue:        #003366;  /* azul institucional: hero, footer, botón nav */
  --dv-blue-ink:    #0A1830;  /* azul oscuro oficial de marca */
  --dv-cyan:        #00B0F0;  /* celeste: CTA principal, eyebrows, links */
  --dv-cyan-light:  #4DB8FF;  /* medido: variante clara sobre fondo oscuro */
  --dv-green:       #00C950;  /* verde WhatsApp */

  /* Oscuros de las páginas de solución (medidos, distintos del azul oficial) */
  --dv-ink:         #0A1E3D;  /* cards y bloques oscuros */
  --dv-ink-deep:    #060D1C;  /* fondo de sección oscura */

  /* --- 1.4 Texto --------------------------------------------------------- */
  --dv-text:            #333333;                /* texto principal */
  --dv-text-muted:      rgba(51, 51, 51, .60);  /* medido: #333 al 60% */
  --dv-text-muted-safe: #5C5C5C;                /* alternativa accesible, ver §1.9 */
  --dv-text-strong:     var(--dv-blue);         /* títulos de card, valores de tabla */
  --dv-text-invert:     #FFFFFF;
  --dv-text-on-dark:    rgba(255, 255, 255, .72);  /* [A CONFIRMAR] */

  /* --- 1.5 Superficies --------------------------------------------------- */
  --dv-surface:      #FFFFFF;
  --dv-surface-2:    #F8FAFC;  /* filas alternadas de tabla de especificaciones */
  --dv-surface-3:    #F0F5FB;  /* fondo de sección clara / fondo de imagen de producto */
  --dv-surface-4:    #F4F7FB;  /* fondo de página en plantillas de solución */

  /* --- 1.6 Bordes -------------------------------------------------------- */
  --dv-border:          #DDE4EE;  /* categorías / producto */
  --dv-border-alt:      #E2E8F0;  /* soluciones (ver nota en §1.9) */
  --dv-border-on-dark:  rgba(255, 255, 255, .25);
  --dv-fill-on-dark:    rgba(255, 255, 255, .10);
  --dv-overlay:         rgba(0, 0, 0, .50);  /* medido: overlay del cotizador */

  /* --- 1.7 Radios (medidos sobre las curvas de los paths) ---------------- */
  --dv-r-btn:    6px;   /* botones */
  --dv-r-sm:     8px;   /* bloques internos, tabla de especificaciones, botón de card */
  --dv-r-md:    12px;   /* cards, cuadrados de ícono */
  --dv-r-pill:  999px;  /* chips, badges, tags */

  /* --- 1.8 Tipografía ---------------------------------------------------- */
  --dv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Los PDFs traen la tipografía convertida a Type3 (contornos), así que los
     PESOS no se pueden leer del archivo: estos son los que se ven a ojo.  [A CONFIRMAR] */
  --dv-w-regular:  400;
  --dv-w-medium:   500;
  --dv-w-semibold: 600;
  --dv-w-bold:     700;
  --dv-w-extra:    800;

  /* Escala medida: 48 / 30 / 24 / 18 / 16 / 14 / 12 / 11 / 10 / 9 */
  --dv-fs-h1:    48px;  --dv-lh-h1:    60px;  /* medido 216→276 */
  --dv-fs-h2:    30px;  --dv-lh-h2:    40px;
  --dv-fs-h3:    24px;  --dv-lh-h3:    32px;
  --dv-fs-lead:  18px;  --dv-lh-lead:  29px;  /* medido 365/394/423 */
  --dv-fs-md:    16px;  --dv-lh-md:    24px;
  --dv-fs-body:  14px;  --dv-lh-body:  22px;
  --dv-fs-sm:    12px;  --dv-lh-sm:    18px;
  --dv-fs-xs:    11px;  --dv-lh-xs:    16px;
  --dv-fs-2xs:   10px;  --dv-lh-2xs:   14px;
  --dv-fs-3xs:    9px;  --dv-lh-3xs:   12px;

  --dv-track-eyebrow: .12em;  /* eyebrows en mayúscula */
  --dv-track-badge:   .06em;

  /* --- 1.9 Notas de accesibilidad ---------------------------------------
     --dv-text-muted (#333 al 60%) resuelve #858585 sobre blanco → 3.7:1.
     No pasa WCAG AA (4.5:1) para texto chico. Está tal cual el Figma, pero
     para 11/12px conviene --dv-text-muted-safe (#5C5C5C, 6.7:1), que también
     aparece en los PDFs. Ver la nota de bordes: el Figma usa #DDE4EE en
     categorías y #E2E8F0 en soluciones; hay que unificar o dejarlo por
     plantilla a propósito.
  ---------------------------------------------------------------------- */

  /* --- 1.10 Sombras ------------------------------------------------------
     Los PDFs no exportan sombras. Estas son mínimas y funcionales
     (hover de card). [A CONFIRMAR con la diseñadora]                     */
  --dv-shadow-sm: 0 1px 2px rgba(10, 24, 48, .06);
  --dv-shadow-md: 0 8px 24px rgba(10, 24, 48, .10);
  --dv-shadow-drawer: -8px 0 32px rgba(10, 24, 48, .18);

  /* --- 1.11 Transiciones y z-index --------------------------------------- */
  --dv-ease: cubic-bezier(.4, 0, .2, 1);
  --dv-dur:  .18s;
  --dv-z-header: 100;
  --dv-z-overlay: 200;
  --dv-z-drawer: 210;

  /* --- 1.12 Capa de acento (la pisan las páginas de solución) ----------- */
  --dv-accent:      var(--dv-cyan);
  --dv-accent-300:  #74D4FF;
  --dv-accent-400:  var(--dv-cyan-light);
  --dv-accent-500:  #00BCFF;
  --dv-accent-600:  var(--dv-cyan);
  --dv-accent-700:  #0069A8;
  --dv-accent-900:  #024A70;
  --dv-accent-tint: color-mix(in srgb, var(--dv-accent) 12%, transparent);
}


/* =============================================================================
   2. TEMAS POR INDUSTRIA (plantillas de solución)
   -----------------------------------------------------------------------------
   Acentos medidos uno por uno en los 13 PDFs de la carpeta 5.
   Son rampas de la paleta de Tailwind, así que si falta un tono se puede
   completar con el resto de la rampa oficial sin inventar nada.
   Uso:  <body class="dv-theme-dark" data-dv-industria="hoteleria">
============================================================================= */

[data-dv-industria="osmosis-comercial"],
[data-dv-industria="osmosis-compacta"],
[data-dv-industria="osmosis-industrial"],
[data-dv-industria="hemodialisis"],
[data-dv-industria="laboratorios"] {           /* sky */
  --dv-accent-300: #74D4FF; --dv-accent-400: #4DB8FF; --dv-accent-500: #00BCFF;
  --dv-accent-600: #0084D1; --dv-accent-700: #0069A8; --dv-accent-900: #024A70;
  --dv-accent: #0084D1;
}

[data-dv-industria="hoteleria"],
[data-dv-industria="frigorificos"] {           /* emerald */
  --dv-accent-300: #5EE9B5; --dv-accent-400: #00D492; --dv-accent-500: #00BC7D;
  --dv-accent-600: #009966; --dv-accent-700: #007A55; --dv-accent-900: #004F3B;
  --dv-accent: #009966;
}

[data-dv-industria="embotelladoras"] {         /* teal */
  --dv-accent-300: #46ECD5; --dv-accent-400: #00D5BE; --dv-accent-500: #00BBA7;
  --dv-accent-600: #009689; --dv-accent-700: #00786F; --dv-accent-900: #0B4F4A;
  --dv-accent: #009689;
}

[data-dv-industria="lavadero"] {               /* cyan */
  --dv-accent-300: #53EAFD; --dv-accent-400: #00D3F2; --dv-accent-500: #00B8DB;
  --dv-accent-600: #0092B8; --dv-accent-700: #007595; --dv-accent-900: #104E64;
  --dv-accent: #0092B8;
}

[data-dv-industria="agricultura"] {            /* lime */
  --dv-accent-300: #BBF451; --dv-accent-400: #9AE600; --dv-accent-500: #7CCF00;
  --dv-accent-600: #5EA500; --dv-accent-700: #497D00; --dv-accent-900: #35530E;
  --dv-accent: #5EA500;
}

[data-dv-industria="calderas"] {               /* orange */
  --dv-accent-300: #FFB86A; --dv-accent-400: #FF8904; --dv-accent-500: #FF6900;
  --dv-accent-600: #F54900; --dv-accent-700: #CA3500; --dv-accent-900: #7E2A0C;
  --dv-accent: #FF6900;
}

[data-dv-industria="cerveceria"] {             /* amber */
  --dv-accent-300: #FFD230; --dv-accent-400: #FFBA00; --dv-accent-500: #FE9A00;
  --dv-accent-600: #E17100; --dv-accent-700: #BB4D00; --dv-accent-900: #7B3306;
  --dv-accent: #E17100;
}

[data-dv-industria="countries"] {              /* violet */
  --dv-accent-300: #C4B4FF; --dv-accent-400: #A684FF; --dv-accent-500: #8E51FF;
  --dv-accent-600: #7F22FE; --dv-accent-700: #7008E7; --dv-accent-900: #4D179A;
  --dv-accent: #7F22FE;
}


/* =============================================================================
   3. RESET Y BASE
============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body.dv {
  margin: 0;
  background: var(--dv-surface);
  color: var(--dv-text);
  font-family: var(--dv-font);
  font-size: var(--dv-fs-body);
  line-height: var(--dv-lh-body);
  font-weight: var(--dv-w-regular);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--dv-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* =============================================================================
   4. TIPOGRAFÍA
============================================================================= */

.dv-h1, .dv-h2, .dv-h3, .dv-h4 { margin: 0; color: var(--dv-text-strong); }

.dv-h1 { font-size: var(--dv-fs-h1);   line-height: var(--dv-lh-h1);   font-weight: var(--dv-w-extra); letter-spacing: -.01em; }
.dv-h2 { font-size: var(--dv-fs-h2);   line-height: var(--dv-lh-h2);   font-weight: var(--dv-w-bold); }
.dv-h3 { font-size: var(--dv-fs-h3);   line-height: var(--dv-lh-h3);   font-weight: var(--dv-w-bold); }
.dv-h4 { font-size: var(--dv-fs-md);   line-height: var(--dv-lh-md);   font-weight: var(--dv-w-semibold); }

.dv-lead      { font-size: var(--dv-fs-lead); line-height: var(--dv-lh-lead); color: var(--dv-text-muted); margin: 0; }
.dv-text      { font-size: var(--dv-fs-body); line-height: var(--dv-lh-body); margin: 0; }
.dv-text-sm   { font-size: var(--dv-fs-sm);   line-height: var(--dv-lh-sm);   margin: 0; }
.dv-muted     { color: var(--dv-text-muted); }
.dv-fine      { font-size: var(--dv-fs-xs); line-height: var(--dv-lh-xs); color: var(--dv-text-muted-safe); margin: 0; }

/* Eyebrow: label en mayúscula arriba del título (medido 12px / 10px) */
.dv-eyebrow {
  display: inline-block;
  font-size: var(--dv-fs-sm);
  line-height: var(--dv-lh-sm);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-eyebrow);
  text-transform: uppercase;
  color: var(--dv-accent);
}
.dv-eyebrow--micro { font-size: var(--dv-fs-2xs); line-height: var(--dv-lh-2xs); }

/* Eyebrow en pastilla, como en los heros de solución */
.dv-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--dv-accent) 45%, transparent);
  border-radius: var(--dv-r-pill);
  background: var(--dv-accent-tint);
  color: var(--dv-accent-300);
  font-size: var(--dv-fs-2xs);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-eyebrow);
  text-transform: uppercase;
}
.dv-eyebrow-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}


/* =============================================================================
   5. LAYOUT
============================================================================= */

.dv-container {
  /* El container del Figma no es fijo: es proporcional. 1486 sobre un frame de
     1911 da 77,76% de ancho y 11,09% de margen a cada lado. Con un max-width
     fijo de 1488px se ve igual en un monitor de 1920, pero en uno de 2560 el
     margen se va a 536px cuando el diseño pide 284, y el contenido queda
     visiblemente más angosto que el Figma. Por eso va en porcentaje, con el
     padding fijo mandando recién en pantallas chicas. */
  width: min(100% - (var(--dv-container-pad) * 2), 77.76%);
  margin-inline: auto;
}

/* Debajo de 1100px el 77,76% deja el contenido demasiado angosto: ahí manda
   el padding lateral. */
@media (max-width: 1100px) {
  .dv-container { width: calc(100% - (var(--dv-container-pad) * 2)); }
}

.dv-section { padding-block: var(--dv-section-y); background: var(--dv-surface); }
.dv-section.dv-section--tint  { background: var(--dv-surface-3); }
.dv-section.dv-section--page  { background: var(--dv-surface-4); }
.dv-section.dv-section--blue  { background: var(--dv-blue);     color: var(--dv-text-invert); }
.dv-section.dv-section--dark  { background: var(--dv-ink-deep); color: var(--dv-text-invert); }
.dv-section.dv-section--flush { padding-block: 0; }

/* Título de sección + bajada (medido: H 24px, bajada 14px a 7px de distancia) */
.dv-section-head { margin-bottom: var(--dv-space-8); }
.dv-section-head > .dv-h3 + .dv-text { margin-top: var(--dv-space-2); color: var(--dv-text-muted); }

.dv-section--blue .dv-h1, .dv-section--blue .dv-h2, .dv-section--blue .dv-h3,
.dv-section--dark .dv-h1, .dv-section--dark .dv-h2, .dv-section--dark .dv-h3 { color: var(--dv-text-invert); }
.dv-section--blue .dv-lead, .dv-section--dark .dv-lead { color: var(--dv-text-on-dark); }

/* Grillas: 4 columnas de 354px con gap de 24px en el frame de 1911 */
.dv-grid { display: grid; gap: var(--dv-gutter); }
.dv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dv-stack   { display: flex; flex-direction: column; gap: var(--dv-space-4); }
.dv-row     { display: flex; align-items: center; gap: var(--dv-space-3); flex-wrap: wrap; }
.dv-row--center { justify-content: center; }


/* =============================================================================
   6. BOTONES
   Medido: alto 46, radio 6, texto 14, ícono a 8px del label.
   Los estados hover/focus no están en el Figma: se derivan con color-mix
   para no inventar hexadecimales.  [A CONFIRMAR]
============================================================================= */

.dv-btn {
  --dv-btn-bg: transparent;
  --dv-btn-fg: var(--dv-text-invert);
  --dv-btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-space-2);
  height: 46px;
  padding-inline: 28px;
  border: 1px solid var(--dv-btn-bd);
  border-radius: var(--dv-r-btn);
  background: var(--dv-btn-bg);
  color: var(--dv-btn-fg);
  font: inherit;
  font-size: var(--dv-fs-body);
  font-weight: var(--dv-w-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dv-dur) var(--dv-ease),
              border-color var(--dv-dur) var(--dv-ease),
              color var(--dv-dur) var(--dv-ease);
}
.dv-btn:hover { text-decoration: none; }
.dv-btn[disabled], .dv-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.dv-btn.dv-btn--primary { --dv-btn-bg: var(--dv-accent); }
.dv-btn.dv-btn--primary:hover { --dv-btn-bg: color-mix(in srgb, var(--dv-accent) 86%, #000); }

.dv-btn.dv-btn--blue { --dv-btn-bg: var(--dv-blue); }
.dv-btn.dv-btn--blue:hover { --dv-btn-bg: color-mix(in srgb, var(--dv-blue) 86%, #000); }

.dv-btn.dv-btn--whatsapp { --dv-btn-bg: var(--dv-green); }
.dv-btn.dv-btn--whatsapp:hover { --dv-btn-bg: color-mix(in srgb, var(--dv-green) 88%, #000); }

/* Secundario sobre fondo oscuro: medido blanco 10% + borde blanco 25% */
.dv-btn.dv-btn--ghost-dark { --dv-btn-bg: var(--dv-fill-on-dark); --dv-btn-bd: var(--dv-border-on-dark); }
.dv-btn.dv-btn--ghost-dark:hover { --dv-btn-bg: rgba(255, 255, 255, .18); }

/* Secundario sobre fondo claro */
.dv-btn.dv-btn--outline { --dv-btn-bg: var(--dv-surface); --dv-btn-fg: var(--dv-blue); --dv-btn-bd: var(--dv-border); }
.dv-btn.dv-btn--outline:hover { --dv-btn-bg: var(--dv-surface-3); }

/* Terciario: el "Ver producto" al pie de las cards */
.dv-btn.dv-btn--quiet { --dv-btn-fg: var(--dv-text-muted-safe); height: 36px; padding-inline: 12px; font-size: var(--dv-fs-sm); font-weight: var(--dv-w-medium); }
.dv-btn.dv-btn--quiet:hover { --dv-btn-fg: var(--dv-blue); }

.dv-btn.dv-btn--sm    { height: 36px; padding-inline: 16px; font-size: var(--dv-fs-sm); border-radius: var(--dv-r-btn); }
.dv-btn.dv-btn--card  { height: 40px; width: 100%; border-radius: var(--dv-r-sm); font-size: var(--dv-fs-sm); }
.dv-btn.dv-btn--block { width: 100%; }


/* =============================================================================
   7. CHIPS, BADGES Y TAGS
============================================================================= */

/* Badge de card: 9px en mayúscula, pastilla con tinte del acento */
.dv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--dv-r-pill);
  background: var(--dv-accent-tint);
  color: var(--dv-accent-700);
  font-size: var(--dv-fs-3xs);
  line-height: var(--dv-lh-3xs);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-badge);
  text-transform: uppercase;
  white-space: nowrap;
}
.dv-badge.dv-badge--solid { background: var(--dv-accent); color: var(--dv-text-invert); }
.dv-badge.dv-badge--on-dark { background: var(--dv-accent-tint); color: var(--dv-accent-300); }

/* Chip de filtro con contador (categorías) */
.dv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  height: 34px;
  padding-inline: 16px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-pill);
  background: var(--dv-surface);
  color: var(--dv-text);
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-medium);
  cursor: pointer;
  transition: background var(--dv-dur) var(--dv-ease), border-color var(--dv-dur) var(--dv-ease), color var(--dv-dur) var(--dv-ease);
}
.dv-chip:hover { border-color: var(--dv-accent); color: var(--dv-blue); }
.dv-chip[aria-pressed="true"], .dv-chip.is-active {
  background: var(--dv-blue);
  border-color: var(--dv-blue);
  color: var(--dv-text-invert);
}
.dv-chip__count { font-size: var(--dv-fs-xs); opacity: .7; }

/* Tag de hero oscuro (lista de aplicaciones de una solución) */
.dv-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--dv-accent) 35%, transparent);
  border-radius: var(--dv-r-pill);
  background: var(--dv-accent-tint);
  color: var(--dv-accent-300);
  font-size: var(--dv-fs-3xs);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-badge);
  text-transform: uppercase;
}


/* =============================================================================
   8. CARDS
   Medido: 354x635 (y 354x651), borde 1px #DDE4EE, radio 12,
   media de 352x264 sobre #F0F5FB, cuerpo con padding 20.
============================================================================= */

.dv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
  overflow: hidden;
  transition: border-color var(--dv-dur) var(--dv-ease), box-shadow var(--dv-dur) var(--dv-ease);
}
.dv-card:hover { border-color: color-mix(in srgb, var(--dv-accent) 50%, var(--dv-border)); box-shadow: var(--dv-shadow-md); }

.dv-card__media {
  aspect-ratio: 352 / 264;
  background: var(--dv-surface-3);
  display: grid;
  place-items: center;
  padding: var(--dv-space-4);
}
.dv-card__media > img { max-height: 100%; width: auto; object-fit: contain; }

.dv-card__body { padding: var(--dv-space-5); display: flex; flex-direction: column; gap: var(--dv-space-3); flex: 1; }

.dv-card__title {
  margin: 0;
  font-size: var(--dv-fs-body);
  line-height: var(--dv-lh-body);
  font-weight: var(--dv-w-bold);
  color: var(--dv-text-strong);
}
.dv-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dv-space-2); }
.dv-card__desc { margin: 0; font-size: var(--dv-fs-sm); line-height: var(--dv-lh-sm); color: var(--dv-text-muted-safe); }
.dv-card__actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--dv-space-1); }

/* Card oscura (bloques de las plantillas de solución) */
.dv-card.dv-card--dark { background: var(--dv-ink); border-color: rgba(255, 255, 255, .10); color: var(--dv-text-invert); }
.dv-card.dv-card--dark .dv-card__title { color: var(--dv-text-invert); }
.dv-card.dv-card--dark .dv-card__desc  { color: var(--dv-text-on-dark); }


/* =============================================================================
   9. TABLA DE ESPECIFICACIONES
   Medido: bloque de 312x114 con radio 8, filas de 48 alternadas #F8FAFC,
   label 12px gris, valor 12px bold azul.
============================================================================= */

.dv-specs {
  width: 100%;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-sm);
  overflow: hidden;
  font-size: var(--dv-fs-sm);
  line-height: var(--dv-lh-sm);
}
.dv-specs__row {
  display: grid;
  grid-template-columns: minmax(90px, 40%) 1fr;
  gap: var(--dv-space-3);
  padding: var(--dv-space-3) var(--dv-space-4);
}
.dv-specs__row:nth-child(odd)  { background: var(--dv-surface); }
.dv-specs__row:nth-child(even) { background: var(--dv-surface-2); }
.dv-specs__label { color: var(--dv-text-muted-safe); }
.dv-specs__value { color: var(--dv-text-strong); font-weight: var(--dv-w-bold); }

/* Variante tabla real (Modelos disponibles, con checkbox por fila) */
.dv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--dv-fs-sm); }
.dv-table th {
  text-align: left;
  padding: var(--dv-space-3) var(--dv-space-4);
  background: var(--dv-surface-3);
  color: var(--dv-blue);
  font-size: var(--dv-fs-xs);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-badge);
  text-transform: uppercase;
  border-bottom: 1px solid var(--dv-border);
}
.dv-table td { padding: var(--dv-space-3) var(--dv-space-4); border-bottom: 1px solid var(--dv-border); }
.dv-table tbody tr:last-child td { border-bottom: 0; }
.dv-table__wrap { border: 1px solid var(--dv-border); border-radius: var(--dv-r-sm); overflow: hidden; }


/* =============================================================================
   10. BREADCRUMB
   Medido: 12px, arranca a 67px del borde del hero.
============================================================================= */

.dv-breadcrumb { display: flex; align-items: center; gap: var(--dv-space-2); font-size: var(--dv-fs-sm); flex-wrap: wrap; }
.dv-breadcrumb a { color: var(--dv-text-muted-safe); }
.dv-breadcrumb a:hover { color: var(--dv-blue); text-decoration: none; }
.dv-breadcrumb__sep { color: var(--dv-border); }
.dv-breadcrumb [aria-current="page"] { color: var(--dv-text); }

/* Sobre fondo oscuro: el hero también, que era donde quedaba ilegible
   (el gris del ítem actual sobre el azul no se leía). */
.dv-section--blue .dv-breadcrumb a,
.dv-section--dark .dv-breadcrumb a,
.dv-hero .dv-breadcrumb a { color: rgba(255, 255, 255, .65); }

.dv-section--blue .dv-breadcrumb a:hover,
.dv-section--dark .dv-breadcrumb a:hover,
.dv-hero .dv-breadcrumb a:hover { color: #fff; }

.dv-section--blue .dv-breadcrumb [aria-current="page"],
.dv-section--dark .dv-breadcrumb [aria-current="page"],
.dv-hero .dv-breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, .92); }

.dv-section--blue .dv-breadcrumb__sep,
.dv-section--dark .dv-breadcrumb__sep,
.dv-hero .dv-breadcrumb__sep { color: rgba(255, 255, 255, .38); }


/* =============================================================================
   11. HERO
   -----------------------------------------------------------------------------
   Cada plantilla tiene su banner propio (webp de 1905px). El color de fondo va
   igual abajo del banner: es el fallback mientras carga y lo que se ve si el
   viewport es más ancho que el asset.

   Cómo está en el Figma cada uno:
     categorías  banner de 902 recortado a 694 (la caja arranca en y=-153,
                 o sea que la franja de arriba del banner queda cortada)
     marcas      1905x801, se usa completo y 1:1
     problemas   1905x653, se usa completo y 1:1
     producto    el export de la ficha tiene el hero en #003366 plano, sin
                 raster: el banner de producto es más nuevo que ese PDF
                 [A CONFIRMAR con la diseñadora]
     soluciones  el export dibuja el hero como vector #060D1C de 834 de alto
                 con el corte diagonal en path; el banner trae la diagonal
                 quemada y mide 738. Son dos versiones distintas del mismo
                 hero [A CONFIRMAR cuál manda]
============================================================================= */

.dv-hero {
  position: relative;
  min-height: var(--dv-hero-h);
  padding-block: var(--dv-space-16);
  background-color: var(--dv-blue);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  color: var(--dv-text-invert);
  display: flex;
  flex-direction: column;
}
.dv-hero > .dv-container { position: relative; z-index: 1; }
.dv-hero .dv-h1 { color: var(--dv-text-invert); }
.dv-hero .dv-lead { color: rgba(255, 255, 255, .8); max-width: 760px; }

/* Variantes por plantilla */
.dv-hero.dv-hero--categorias { background-image: var(--dv-banner-categorias); }
.dv-hero.dv-hero--marcas     { background-image: var(--dv-banner-marcas);     background-color: var(--dv-ink); min-height: 801px; }
.dv-hero.dv-hero--producto   { background-image: var(--dv-banner-producto);   background-color: var(--dv-ink); min-height: 746px; }
.dv-hero.dv-hero--problemas  { background-image: var(--dv-banner-problemas);  background-color: var(--dv-ink); min-height: 653px; }
.dv-hero.dv-hero--soluciones { background-image: var(--dv-banner-soluciones); background-color: var(--dv-ink-deep); min-height: 738px; padding-bottom: 120px; }

/* Fidelidad al Figma en el hero de categorías: el banner sube 153px.
   Se activa aparte porque solo tiene sentido a partir del ancho del asset. */
@media (min-width: 1905px) {
  .dv-hero.dv-hero--categorias.dv-hero--exacto {
    background-size: 1905px 902px;
    background-position: center -153px;
  }
}

/* Grilla vectorial: fallback si algún hero no lleva banner.
   Paso 56,5px, medido sobre los webp. */
.dv-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56.5px 56.5px;
  pointer-events: none;
}

.dv-hero.dv-hero--center { text-align: center; align-items: center; }
.dv-hero.dv-hero--center .dv-lead { margin-inline: auto; }
.dv-hero.dv-hero--center .dv-breadcrumb { justify-content: flex-start; width: 100%; }

.dv-hero.dv-hero--dark { background-color: var(--dv-ink-deep); min-height: var(--dv-hero-h-dark); }
.dv-hero.dv-hero--dark .dv-h1 .dv-accent-line { color: var(--dv-accent-400); display: block; }

.dv-hero__actions { display: flex; gap: var(--dv-space-3); flex-wrap: wrap; }
.dv-hero.dv-hero--center .dv-hero__actions { justify-content: center; }


/* =============================================================================
   12. COTIZADOR (drawer lateral)
   Medido: panel de 460px de ancho, overlay negro al 50%.
============================================================================= */

.dv-overlay {
  position: fixed;
  inset: 0;
  background: var(--dv-overlay);
  z-index: var(--dv-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dv-dur) var(--dv-ease), visibility var(--dv-dur) var(--dv-ease);
}
.dv-overlay.is-open { opacity: 1; visibility: visible; }

.dv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(var(--dv-drawer-w), 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--dv-surface);
  box-shadow: var(--dv-shadow-drawer);
  z-index: var(--dv-z-drawer);
  transform: translateX(100%);
  transition: transform var(--dv-dur) var(--dv-ease);
}
.dv-drawer.is-open { transform: translateX(0); }

.dv-drawer__head {
  display: flex;
  align-items: center;
  gap: var(--dv-space-3);
  padding: var(--dv-space-4) var(--dv-space-5);
  border-bottom: 1px solid var(--dv-border);
}
.dv-drawer__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--dv-r-md);
  background: var(--dv-accent-tint);
  color: var(--dv-accent);
  flex: 0 0 auto;
}
.dv-drawer__title { margin: 0; font-size: var(--dv-fs-md); font-weight: var(--dv-w-bold); color: var(--dv-blue); }
.dv-drawer__count { font-size: var(--dv-fs-sm); color: var(--dv-text-muted-safe); }
.dv-drawer__close { margin-left: auto; background: none; border: 0; padding: var(--dv-space-2); cursor: pointer; color: var(--dv-text-muted-safe); }
.dv-drawer__toolbar { display: flex; justify-content: flex-end; padding: var(--dv-space-3) var(--dv-space-5); }
.dv-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--dv-space-5) var(--dv-space-5); display: flex; flex-direction: column; gap: var(--dv-space-3); }
.dv-drawer__foot { border-top: 1px solid var(--dv-border); padding: var(--dv-space-5); display: flex; flex-direction: column; gap: var(--dv-space-3); }

/* Ítem del cotizador */
.dv-quote-item { display: flex; gap: var(--dv-space-3); padding: var(--dv-space-3); border: 1px solid var(--dv-border); border-radius: var(--dv-r-md); }
.dv-quote-item__thumb { width: 64px; height: 64px; border-radius: var(--dv-r-sm); background: var(--dv-surface-3); flex: 0 0 auto; }
.dv-quote-item__title { margin: 0; font-size: var(--dv-fs-sm); font-weight: var(--dv-w-bold); color: var(--dv-blue); }
.dv-quote-item__meta { margin: 0; font-size: var(--dv-fs-xs); color: var(--dv-text-muted-safe); }

/* Stepper de cantidad */
.dv-stepper { display: inline-flex; align-items: center; border: 1px solid var(--dv-border); border-radius: var(--dv-r-sm); overflow: hidden; }
.dv-stepper button { width: 28px; height: 28px; border: 0; background: var(--dv-surface); color: var(--dv-blue); cursor: pointer; font-size: var(--dv-fs-body); line-height: 1; }
.dv-stepper button:hover { background: var(--dv-surface-3); }
.dv-stepper__value { min-width: 32px; text-align: center; font-size: var(--dv-fs-sm); font-weight: var(--dv-w-bold); color: var(--dv-blue); border-inline: 1px solid var(--dv-border); height: 28px; line-height: 28px; }

/* Aviso de precios */
.dv-notice {
  padding: var(--dv-space-3) var(--dv-space-4);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface-3);
  color: var(--dv-text-muted-safe);
  font-size: var(--dv-fs-xs);
  line-height: var(--dv-lh-xs);
}

/* Estado vacío */
.dv-empty { text-align: center; padding: var(--dv-space-12) var(--dv-space-5); display: flex; flex-direction: column; gap: var(--dv-space-4); align-items: center; }


/* =============================================================================
   13. HEADER
   Medido: 62px de alto, fondo blanco, nav 14px, botón azul a la derecha.
============================================================================= */

.dv-header {
  position: sticky;
  /* el mega menú se cuelga de acá */
  top: 0;
  z-index: var(--dv-z-header);
  height: var(--dv-header-h);
  background: var(--dv-surface);
  border-bottom: 1px solid var(--dv-border);
}
.dv-header__inner { height: 100%; display: flex; align-items: center; gap: var(--dv-space-8); }
.dv-header__logo img { max-height: 34px; }
.dv-nav { display: flex; align-items: center; gap: var(--dv-space-6); margin-inline: auto; }
.dv-nav a { color: var(--dv-text); font-size: var(--dv-fs-body); font-weight: var(--dv-w-medium); }
.dv-nav a:hover { color: var(--dv-accent); text-decoration: none; }
.dv-nav a[aria-current] { color: var(--dv-accent); font-weight: var(--dv-w-semibold); }
.dv-header .dv-btn { height: 38px; padding-inline: 20px; font-size: var(--dv-fs-sm); }


/* =============================================================================
   14. RESPONSIVE
   -----------------------------------------------------------------------------
   OJO: en los 111 PDFs no hay ni un frame de mobile o tablet, así que esto es
   una degradación conservadora hecha por nosotros, no el diseño de la
   diseñadora. Cuando lleguen los frames hay que revisarlo entero.
============================================================================= */

@media (max-width: 1200px) {
  .dv-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root {
    --dv-fs-h1: 36px;  --dv-lh-h1: 44px;
    --dv-fs-h2: 26px;  --dv-lh-h2: 34px;
    --dv-fs-h3: 20px;  --dv-lh-h3: 28px;
    --dv-fs-lead: 16px; --dv-lh-lead: 26px;
    --dv-section-y: 48px;
    --dv-hero-h: auto;
    --dv-hero-h-dark: auto;
  }
  .dv-grid--4, .dv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-nav { display: none; }
}

@media (max-width: 600px) {
  :root { --dv-fs-h1: 30px; --dv-lh-h1: 38px; --dv-container-pad: 20px; }
  .dv-grid--4, .dv-grid--3, .dv-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .dv-btn { padding-inline: 20px; }
  .dv-hero__actions .dv-btn { width: 100%; }
}


/* =============================================================================
   15. INTEGRACIÓN CON WORDPRESS Y WOOCOMMERCE
   -----------------------------------------------------------------------------
   Esta sección no sale del Figma: es la cola que pega los componentes de arriba
   con el markup que imprimen WordPress y WooCommerce.
============================================================================= */

/* --- Accesibilidad estándar de WP -------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  clip-path: none;
  z-index: 999;
  padding: 12px 20px;
}

/* --- Menú generado por wp_nav_menu ------------------------------------- */
.dv-nav__list,
.dv-nav-footer__list { list-style: none; margin: 0; padding: 0; }

.dv-nav__list { display: flex; align-items: center; gap: var(--dv-space-6); }
.dv-nav__list > li { position: relative; }
.dv-nav__list a { color: var(--dv-text); font-size: var(--dv-fs-body); font-weight: var(--dv-w-medium); }
.dv-nav__list a:hover { color: var(--dv-accent); text-decoration: none; }
.dv-nav__list > li.current-menu-item > a,
.dv-nav__list > li.current_page_item > a { color: var(--dv-accent); font-weight: var(--dv-w-semibold); }

/* Submenú simple. El mega menú de las 7 familias se arma aparte. */
.dv-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: var(--dv-space-2);
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  box-shadow: var(--dv-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dv-dur) var(--dv-ease), transform var(--dv-dur) var(--dv-ease), visibility var(--dv-dur);
}
.dv-nav__list > li:hover > .sub-menu,
.dv-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dv-nav__list .sub-menu a { display: block; padding: 8px 12px; border-radius: var(--dv-r-btn); font-size: var(--dv-fs-sm); }
.dv-nav__list .sub-menu a:hover { background: var(--dv-surface-3); }

.dv-nav-footer__list { display: flex; flex-direction: column; gap: var(--dv-space-2); margin-top: var(--dv-space-3); }
.dv-nav-footer__list a { color: rgba(255, 255, 255, .7); font-size: var(--dv-fs-sm); }
.dv-nav-footer__list a:hover { color: var(--dv-text-invert); text-decoration: none; }

/* --- Contenido editado en el admin (the_content) ------------------------ */
.dv-contenido { font-size: var(--dv-fs-md); line-height: var(--dv-lh-lead); color: var(--dv-text); }
.dv-contenido > * + * { margin-top: var(--dv-space-5); }
.dv-contenido h2 { font-size: var(--dv-fs-h3); line-height: var(--dv-lh-h3); font-weight: var(--dv-w-bold); color: var(--dv-text-strong); margin-top: var(--dv-space-10); }
.dv-contenido h3 { font-size: var(--dv-fs-lead); line-height: var(--dv-lh-lead); font-weight: var(--dv-w-semibold); color: var(--dv-text-strong); margin-top: var(--dv-space-8); }
.dv-contenido ul, .dv-contenido ol { padding-left: 20px; }
.dv-contenido li + li { margin-top: var(--dv-space-2); }
.dv-contenido img { border-radius: var(--dv-r-md); }
.dv-contenido blockquote {
  margin: 0;
  padding: var(--dv-space-4) var(--dv-space-5);
  border-left: 3px solid var(--dv-accent);
  background: var(--dv-surface-3);
  border-radius: 0 var(--dv-r-sm) var(--dv-r-sm) 0;
}
.dv-contenido table { width: 100%; border-collapse: collapse; font-size: var(--dv-fs-sm); }
.dv-contenido th, .dv-contenido td { padding: var(--dv-space-3) var(--dv-space-4); border-bottom: 1px solid var(--dv-border); text-align: left; }

/* --- Paginación de WP --------------------------------------------------- */
.dv .nav-links { display: flex; gap: var(--dv-space-2); flex-wrap: wrap; justify-content: center; }
.dv .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: 12px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-btn);
  color: var(--dv-text);
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-medium);
}
.dv .page-numbers:hover { border-color: var(--dv-accent); text-decoration: none; }
.dv .page-numbers.current { background: var(--dv-blue); border-color: var(--dv-blue); color: var(--dv-text-invert); }

/* --- Grilla de productos de WooCommerce --------------------------------
   Woo imprime <ul class="products columns-4"><li class="product">.
   Los estilos propios de Woo están desactivados desde inc/woocommerce.php,
   así que la grilla se arma acá con los mismos 24px del Figma.            */
.dv ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--dv-gutter);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dv ul.products > li.product { margin: 0; width: auto; float: none; }

/* Woo mete su propia paginación y el "mostrando X resultados" */
.dv .woocommerce-result-count { font-size: var(--dv-fs-sm); color: var(--dv-text-muted-safe); }
.dv .woocommerce-ordering select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-btn);
  font: inherit;
  font-size: var(--dv-fs-sm);
  background: var(--dv-surface);
}
.dv .woocommerce-notices-wrapper > * {
  padding: var(--dv-space-3) var(--dv-space-4);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface-3);
  font-size: var(--dv-fs-sm);
  list-style: none;
}

@media (max-width: 1200px) { .dv ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .dv ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .dv-nav__list { display: none; } }
@media (max-width: 600px)  { .dv ul.products { grid-template-columns: minmax(0, 1fr); } }


/* =============================================================================
   16. HEADER RESPONSIVE Y MENÚ MÓVIL
   -----------------------------------------------------------------------------
   Sigue sin haber frames de mobile en el Figma. Esto es criterio nuestro:
   se respetan los tokens, los componentes y las proporciones del desktop, y
   se degradan los tamaños que no entran. Cuando lleguen los frames, se revisa.
============================================================================= */

.dv-header__acciones { display: flex; align-items: center; gap: var(--dv-space-3); }

/* Hamburguesa */
.dv-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-btn);
  background: var(--dv-surface);
  cursor: pointer;
}
.dv-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--dv-blue);
  border-radius: 2px;
  transition: transform var(--dv-dur) var(--dv-ease), opacity var(--dv-dur) var(--dv-ease);
}
.dv-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dv-burger.is-open span:nth-child(2) { opacity: 0; }
.dv-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel del menú */
.dv-menu-movil {
  position: fixed;
  inset: var(--dv-header-h) 0 0 0;
  z-index: calc(var(--dv-z-header) - 1);
  background: var(--dv-surface);
  padding: var(--dv-space-5) var(--dv-container-pad) var(--dv-space-10);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dv-dur) var(--dv-ease), transform var(--dv-dur) var(--dv-ease);
}
.dv-menu-movil.is-open { opacity: 1; transform: translateY(0); }

.dv-menu-movil__list, .dv-menu-movil__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.dv-menu-movil__list > li { border-bottom: 1px solid var(--dv-border); }
.dv-menu-movil__list a {
  display: block;
  padding: 16px 4px;
  color: var(--dv-blue);
  font-size: var(--dv-fs-md);
  font-weight: var(--dv-w-semibold);
}
.dv-menu-movil__list .sub-menu { padding: 0 0 12px 12px; }
.dv-menu-movil__list .sub-menu a {
  padding: 10px 4px;
  font-size: var(--dv-fs-body);
  font-weight: var(--dv-w-regular);
  color: var(--dv-text);
  border: 0;
}
.dv-menu-movil__pie { margin-top: var(--dv-space-8); }

@media (max-width: 900px) {
  .dv-burger { display: flex; }
  .dv-header__inner { gap: var(--dv-space-4); }
  .dv-header__logo img { max-height: 28px; }
  /* En pantalla chica el botón del header se queda solo con el contador */
  .dv-header .dv-btn { padding-inline: 14px; font-size: var(--dv-fs-sm); }
}

@media (min-width: 901px) {
  .dv-menu-movil { display: none; }
}


/* =============================================================================
   17. AJUSTES RESPONSIVE DEL RESTO
============================================================================= */

@media (max-width: 900px) {
  .dv-hero { padding-block: var(--dv-space-12); background-attachment: scroll; }
  .dv-hero.dv-hero--marcas,
  .dv-hero.dv-hero--producto,
  .dv-hero.dv-hero--problemas,
  .dv-hero.dv-hero--soluciones { min-height: auto; }
  .dv-hero.dv-hero--soluciones { padding-bottom: var(--dv-space-16); }

  /* La ficha de producto pasa a una columna, con la imagen primero */
  .dv-grid--2 { grid-template-columns: minmax(0, 1fr); }

  .dv-drawer { width: 100vw; }
  .dv-section-head { margin-bottom: var(--dv-space-6); }

  /* Los chips de filtro se desplazan en horizontal en vez de amontonarse */
  .dv-row[data-dv-filtros] {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--dv-space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dv-row[data-dv-filtros]::-webkit-scrollbar { display: none; }
  .dv-row[data-dv-filtros] .dv-chip { flex: 0 0 auto; }
}

@media (max-width: 600px) {
  .dv-card__media { aspect-ratio: 4 / 3; }
  .dv-specs__row { grid-template-columns: minmax(80px, 45%) 1fr; }
  .dv-table th, .dv-table td { padding: var(--dv-space-2) var(--dv-space-3); }
  .dv-table__wrap { overflow-x: auto; }
}

/* Áreas táctiles: nada por debajo de 44px de alto en pantallas chicas */
@media (max-width: 900px) and (pointer: coarse) {
  .dv-btn { min-height: 44px; }
  .dv-chip { height: 40px; }
  .dv-breadcrumb a { padding-block: 4px; }
}


/* =============================================================================
   18. FOOTER
   -----------------------------------------------------------------------------
   Medido en el PDF: banda #003366 de 437px, borde celeste de 2px arriba,
   4 columnas a x=212 / 596 / 980 / 1364 (paso de 384px), títulos de 18px y
   enlaces de 14px al 70%. Barra inferior de 12px separada por una línea.
============================================================================= */

.dv-footer {
  background: var(--dv-blue);
  border-top: 2px solid var(--dv-cyan);
  color: var(--dv-text-invert);
  padding-block: var(--dv-space-16) var(--dv-space-8);
}

.dv-footer__cols {
  display: grid;
  grid-template-columns: 384px repeat(3, minmax(0, 1fr));
  gap: var(--dv-space-6);
}

.dv-footer__marca img { max-width: 180px; height: auto; }
.dv-footer__bajada {
  margin: var(--dv-space-4) 0 0;
  max-width: 300px;
  font-size: var(--dv-fs-body);
  line-height: var(--dv-lh-body);
  color: rgba(255, 255, 255, .7);
}

.dv-footer__titulo {
  margin: 0 0 var(--dv-space-6);
  font-size: var(--dv-fs-lead);
  line-height: var(--dv-lh-lead);
  font-weight: var(--dv-w-bold);
  color: var(--dv-text-invert);
}

.dv-footer__list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.dv-footer__list li { margin: 0; }
.dv-footer__nav a,
.dv-footer__dato a,
.dv-footer__dato span {
  color: rgba(255, 255, 255, .7);
  font-size: var(--dv-fs-body);
  line-height: var(--dv-lh-body);
  text-decoration: none;
}
.dv-footer__nav a { display: block; }
.dv-footer__nav a:hover,
.dv-footer__dato a:hover { color: var(--dv-text-invert); text-decoration: none; }

.dv-footer__vertodas {
  display: inline-block;
  margin-top: var(--dv-space-5);
  color: var(--dv-cyan);
  font-size: var(--dv-fs-body);
  font-weight: var(--dv-w-medium);
}
.dv-footer__vertodas:hover { text-decoration: none; color: var(--dv-cyan-light); }

.dv-footer__dato { display: flex; gap: var(--dv-space-3); margin-bottom: var(--dv-space-5); }
.dv-footer__dato > div { display: flex; flex-direction: column; gap: 4px; }
.dv-footer__dato a { text-decoration: underline; text-underline-offset: 3px; }
.dv-footer__icono { color: var(--dv-cyan); flex: 0 0 auto; margin-top: 2px; }

.dv-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--dv-space-4);
  flex-wrap: wrap;
  margin-top: var(--dv-space-16);
  padding-top: var(--dv-space-5);
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.dv-footer__legal p { margin: 0; font-size: var(--dv-fs-sm); color: rgba(255, 255, 255, .45); }
.dv-footer__legales-list { display: flex; gap: var(--dv-space-6); list-style: none; margin: 0; padding: 0; }
.dv-footer__legales-list a { font-size: var(--dv-fs-sm); color: rgba(255, 255, 255, .45); }
.dv-footer__legales-list a:hover { color: var(--dv-text-invert); text-decoration: none; }

@media (max-width: 1200px) {
  .dv-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dv-space-10); }
}
@media (max-width: 700px) {
  .dv-footer { padding-block: var(--dv-space-12) var(--dv-space-6); }
  .dv-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--dv-space-8); }
  .dv-footer__legal { margin-top: var(--dv-space-10); }
}


/* =============================================================================
   19. LISTADO DE CATEGORÍAS
   -----------------------------------------------------------------------------
   Del frame del listado: panel blanco con buscador y dos grupos de chips,
   contador de resultados y cards con ícono (sin foto).
============================================================================= */

/* --- Panel de búsqueda y filtros --------------------------------------- */
.dv-panel {
  background: var(--dv-surface);
  border: 1px solid var(--dv-border-alt);
  border-radius: var(--dv-r-md);
  padding: var(--dv-space-5);
  margin-bottom: var(--dv-space-6);
}

.dv-buscador { position: relative; margin-bottom: var(--dv-space-5); }
.dv-buscador__icono {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dv-text-muted-safe);
  display: flex;
}
.dv-buscador input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--dv-border-alt);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface);
  font: inherit;
  font-size: var(--dv-fs-body);
  color: var(--dv-text);
}
.dv-buscador input::placeholder { color: var(--dv-text-muted-safe); }
.dv-buscador input:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 1px; border-color: transparent; }

.dv-grupo-filtro + .dv-grupo-filtro { margin-top: var(--dv-space-4); }
.dv-grupo-filtro__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--dv-space-3);
  font-size: var(--dv-fs-2xs);
  font-weight: var(--dv-w-semibold);
  letter-spacing: var(--dv-track-eyebrow);
  text-transform: uppercase;
  color: var(--dv-text-muted-safe);
}
.dv-grupo-filtro__chips { display: flex; flex-wrap: wrap; gap: var(--dv-space-2); }

/* Chip del panel: más chico y liviano que el chip de marca */
.dv-chip.dv-chip--filtro {
  height: 30px;
  padding-inline: 14px;
  border-color: var(--dv-border-alt);
  font-size: var(--dv-fs-xs);
  font-weight: var(--dv-w-regular);
  color: var(--dv-text);
}
.dv-chip.dv-chip--filtro:hover { border-color: var(--dv-accent); color: var(--dv-blue); }
.dv-chip.dv-chip--filtro.is-active {
  background: var(--dv-blue);
  border-color: var(--dv-blue);
  color: var(--dv-text-invert);
}

/* --- Contador ----------------------------------------------------------- */
.dv-resultados {
  margin: 0 0 var(--dv-space-5);
  font-size: var(--dv-fs-sm);
  color: var(--dv-text-muted-safe);
}
.dv-resultados strong { color: var(--dv-blue); font-weight: var(--dv-w-bold); }

.dv-vacio {
  margin: var(--dv-space-10) 0 0;
  text-align: center;
  font-size: var(--dv-fs-body);
  color: var(--dv-text-muted-safe);
}

/* --- Card de categoría --------------------------------------------------- */
.dv-cat {
  display: flex;
  flex-direction: column;
  padding: var(--dv-space-5);
  border: 1px solid var(--dv-border-alt);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
  transition: border-color var(--dv-dur) var(--dv-ease), box-shadow var(--dv-dur) var(--dv-ease);
}
.dv-cat:hover { border-color: color-mix(in srgb, var(--dv-accent) 45%, var(--dv-border-alt)); box-shadow: var(--dv-shadow-md); }

.dv-cat__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--dv-space-4);
  border-radius: 10px;
  background: var(--dv-surface-2);
  color: var(--dv-accent);
}

.dv-cat__titulo {
  margin: 0 0 var(--dv-space-2);
  font-size: var(--dv-fs-body);
  line-height: var(--dv-lh-body);
  font-weight: var(--dv-w-bold);
}
.dv-cat__titulo a { color: var(--dv-text-strong); }
.dv-cat__titulo a:hover { color: var(--dv-accent); text-decoration: none; }

.dv-cat__desc {
  margin: 0 0 var(--dv-space-4);
  font-size: var(--dv-fs-sm);
  line-height: var(--dv-lh-sm);
  color: var(--dv-text-muted-safe);
}

.dv-cat__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--dv-space-4); }
.dv-cat__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--dv-r-pill);
  background: var(--dv-surface-2);
  color: var(--dv-text-muted-safe);
  font-size: var(--dv-fs-3xs);
  line-height: var(--dv-lh-3xs);
  white-space: nowrap;
}

.dv-cat__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dv-accent);
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-medium);
}
.dv-cat__link:hover { text-decoration: none; color: var(--dv-accent-700); }

@media (max-width: 900px) {
  .dv-panel { padding: var(--dv-space-4); }
  .dv-grupo-filtro__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--dv-space-2);
    scrollbar-width: none;
  }
  .dv-grupo-filtro__chips::-webkit-scrollbar { display: none; }
  .dv-grupo-filtro__chips .dv-chip { flex: 0 0 auto; }
}


/* =============================================================================
   19. HERO DE LA PORTADA
   -----------------------------------------------------------------------------
   Del frame de la home solo tenemos la captura del hero, así que estas medidas
   están tomadas de ahí y llevadas al ancho de 1911: título de 60px en tres
   líneas, contenido a la izquierda, un botón celeste claro y la fila de items.
============================================================================= */

.dv-hero.dv-hero--home {
  min-height: 700px;
  justify-content: center;
  text-align: left;
  padding-block: var(--dv-space-20);
}

.dv-h1--home {
  max-width: 15ch;          /* fuerza el quiebre en tres líneas, como el frame */
  font-size: 60px;
  line-height: 72px;
  font-weight: var(--dv-w-extra);
  letter-spacing: -.02em;
}

.dv-hero--home .dv-hero__bajada {
  margin-top: var(--dv-space-6);
  max-width: 52ch;
  color: rgba(255, 255, 255, .78);
  font-size: var(--dv-fs-md);
  line-height: 26px;
}

.dv-hero--home .dv-hero__actions { margin-top: var(--dv-space-10); }

/* Botón celeste claro del hero de la portada */
.dv-btn.dv-btn--cielo { --dv-btn-bg: var(--dv-cyan-light); --dv-btn-fg: var(--dv-text-invert); }
.dv-btn.dv-btn--cielo:hover { --dv-btn-bg: color-mix(in srgb, var(--dv-cyan-light) 88%, #000); }

/* Fila de items con tilde */
.dv-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-space-6);
  list-style: none;
  margin: var(--dv-space-16) 0 0;
  padding: 0;
}
.dv-features li {
  display: flex;
  align-items: center;
  gap: var(--dv-space-2);
  color: rgba(255, 255, 255, .82);
  font-size: var(--dv-fs-body);
}
.dv-features svg { color: var(--dv-cyan-light); flex: 0 0 auto; }

@media (max-width: 900px) {
  .dv-hero.dv-hero--home { min-height: auto; padding-block: var(--dv-space-12); }
  .dv-h1--home { font-size: 34px; line-height: 42px; max-width: none; }
  .dv-hero--home .dv-hero__bajada { font-size: var(--dv-fs-body); line-height: 24px; }
  .dv-features { margin-top: var(--dv-space-10); gap: var(--dv-space-3); }
  .dv-features li { width: 100%; }
}


/* =============================================================================
   20. FRANJA DE MARCAS DE LA PORTADA
   -----------------------------------------------------------------------------
   Del frame: banda clara, título chico centrado en mayúscula y los logos en
   pastillas blancas con borde, centradas y con wrap.
============================================================================= */

.dv-marcas-franja { padding-block: var(--dv-space-10); background: var(--dv-surface-4); }

.dv-marcas-franja__titulo {
  margin: 0 0 var(--dv-space-6);
  text-align: center;
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-semibold);
  letter-spacing: var(--dv-track-eyebrow);
  text-transform: uppercase;
  color: var(--dv-text-muted-safe);
}

.dv-marcas-franja__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dv-space-3);
}

.dv-marca-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 44px;
  padding-inline: var(--dv-space-5);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-pill);
  background: var(--dv-surface);
  color: var(--dv-blue);
  font-size: var(--dv-fs-body);
  font-weight: var(--dv-w-bold);
  letter-spacing: .02em;
  transition: border-color var(--dv-dur) var(--dv-ease), box-shadow var(--dv-dur) var(--dv-ease);
}
.dv-marca-pill:hover { border-color: var(--dv-cyan); text-decoration: none; box-shadow: var(--dv-shadow-sm); }
.dv-marca-pill img { max-height: 24px; width: auto; object-fit: contain; }

@media (max-width: 600px) {
  .dv-marca-pill { min-width: 0; height: 38px; padding-inline: var(--dv-space-4); font-size: var(--dv-fs-sm); }
}


/* =============================================================================
   21. MEGA MENÚ DE CATEGORÍAS
   -----------------------------------------------------------------------------
   Del frame: panel blanco de esquinas redondeadas colgado del header, cabecera
   gris con "Todas las categorías" y "Ver todos", y seis grupos en tres columnas
   por dos filas, cada ítem con su ícono de línea.
============================================================================= */

.dv-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--dv-z-header);
  padding: var(--dv-space-2) 0 var(--dv-space-6);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dv-dur) var(--dv-ease), transform var(--dv-dur) var(--dv-ease);
  pointer-events: none;
}
.dv-mega.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.dv-mega__panel {
  width: min(100% - 48px, 77.76%);
  margin-inline: auto;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  box-shadow: var(--dv-shadow-md);
  overflow: hidden;
}

.dv-mega__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-4);
  padding: var(--dv-space-4) var(--dv-space-6);
  background: var(--dv-surface-2);
  border-bottom: 1px solid var(--dv-border);
}
.dv-mega__titulo {
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-semibold);
  letter-spacing: var(--dv-track-eyebrow);
  text-transform: uppercase;
  color: var(--dv-text-muted-safe);
}
.dv-mega__vertodos {
  font-size: var(--dv-fs-body);
  font-weight: var(--dv-w-medium);
  color: var(--dv-cyan);
}
.dv-mega__vertodos:hover { text-decoration: none; color: var(--dv-blue); }

.dv-mega__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--dv-space-6) 0;
}
.dv-mega__col {
  padding: var(--dv-space-2) var(--dv-space-6) var(--dv-space-6);
  border-right: 1px solid var(--dv-border);
}
.dv-mega__col:nth-child(3n) { border-right: 0; }
.dv-mega__col:nth-child(-n+3) { padding-bottom: var(--dv-space-10); }

.dv-mega__grupo {
  margin: 0 0 var(--dv-space-4);
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-semibold);
  letter-spacing: var(--dv-track-eyebrow);
  text-transform: uppercase;
  color: var(--dv-cyan);
}

.dv-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dv-mega__list a {
  display: flex;
  align-items: center;
  gap: var(--dv-space-3);
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: var(--dv-r-btn);
  color: var(--dv-text);
  font-size: var(--dv-fs-body);
}
.dv-mega__list a:hover { background: var(--dv-surface-3); color: var(--dv-blue); text-decoration: none; }
.dv-mega__icono { display: inline-flex; color: var(--dv-cyan); flex: 0 0 auto; }
.dv-mega__icono svg { width: 18px; height: 18px; }

/* En pantallas donde el header ya pasó a hamburguesa, el mega menú no aplica:
   las categorías se despliegan dentro del menú móvil. */
@media (max-width: 900px) {
  .dv-mega { display: none; }
}


/* =============================================================================
   22. FORMULARIOS
============================================================================= */

.dv-form { display: flex; flex-direction: column; gap: var(--dv-space-5); margin-top: var(--dv-space-6); }
.dv-form__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dv-space-4); }
.dv-form__fila { display: flex; flex-direction: column; gap: 6px; }
.dv-form label { font-size: var(--dv-fs-sm); font-weight: var(--dv-w-semibold); color: var(--dv-blue); }
.dv-form input, .dv-form select, .dv-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-btn);
  background: var(--dv-surface);
  font: inherit;
  font-size: var(--dv-fs-body);
  color: var(--dv-text);
}
.dv-form input:focus, .dv-form select:focus, .dv-form textarea:focus {
  outline: 2px solid var(--dv-cyan);
  outline-offset: 1px;
  border-color: var(--dv-cyan);
}
.dv-form textarea { resize: vertical; }
.dv-form .dv-btn { align-self: flex-start; }

.dv-datos { margin-top: var(--dv-space-6); }
.dv-datos p { margin: 0 0 var(--dv-space-5); font-size: var(--dv-fs-body); line-height: var(--dv-lh-lead); color: var(--dv-text); }
.dv-datos strong { color: var(--dv-blue); }

@media (max-width: 700px) { .dv-form__cols { grid-template-columns: minmax(0, 1fr); } }


/* =============================================================================
   23. CONTACTO
   -----------------------------------------------------------------------------
   Del frame: dos columnas asimétricas (datos a la izquierda, card de formulario
   a la derecha), tarjetas de dato con ícono cuadrado y la de WhatsApp en verde.
============================================================================= */

.dv-hero.dv-hero--contacto { min-height: 420px; text-align: left; justify-content: center; }

.dv-contacto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--dv-space-10);
  align-items: start;
}

/* --- Tarjetas de dato ---------------------------------------------------- */
.dv-dato {
  display: flex;
  gap: var(--dv-space-4);
  align-items: flex-start;
  margin-top: var(--dv-space-4);
  padding: var(--dv-space-4) var(--dv-space-5);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface-2);
  color: var(--dv-text);
  text-decoration: none;
  transition: border-color var(--dv-dur) var(--dv-ease), background var(--dv-dur) var(--dv-ease);
}
a.dv-dato:hover { text-decoration: none; border-color: var(--dv-cyan); }

.dv-dato__icono {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--dv-r-sm);
  background: var(--dv-cyan);
  color: #fff;
}
.dv-dato > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.dv-dato strong { font-size: var(--dv-fs-body); color: var(--dv-blue); }
.dv-dato em { font-style: normal; font-size: var(--dv-fs-body); color: var(--dv-text); }
.dv-dato small { font-size: var(--dv-fs-xs); color: var(--dv-text-muted-safe); }
.dv-dato .dv-dato__link { color: var(--dv-cyan); }

.dv-dato.dv-dato--verde {
  background: color-mix(in srgb, var(--dv-green) 8%, #fff);
  border-color: color-mix(in srgb, var(--dv-green) 25%, transparent);
}
.dv-dato.dv-dato--verde .dv-dato__icono { background: var(--dv-green); }

/* --- Card del formulario ------------------------------------------------- */
.dv-contacto__form {
  padding: var(--dv-space-8);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
  box-shadow: var(--dv-shadow-sm);
}

.dv-form label span { color: #D63638; }
.dv-form input::placeholder, .dv-form textarea::placeholder { color: #9AA6B2; }

.dv-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--dv-space-2);
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-regular);
  color: var(--dv-text-muted-safe);
}
.dv-form__check input { width: auto; margin-top: 2px; }

.dv-form__o {
  display: block;
  text-align: center;
  font-size: var(--dv-fs-sm);
  color: var(--dv-text-muted-safe);
  margin-block: calc(var(--dv-space-2) * -1);
}
.dv-form__nota {
  margin: 0;
  text-align: center;
  font-size: var(--dv-fs-xs);
  color: var(--dv-text-muted-safe);
}

.dv-aviso {
  margin-top: var(--dv-space-5);
  padding: var(--dv-space-3) var(--dv-space-4);
  border-radius: var(--dv-r-sm);
  font-size: var(--dv-fs-sm);
}
.dv-aviso--ok    { background: color-mix(in srgb, var(--dv-green) 14%, #fff); color: #08602C; }
.dv-aviso--error { background: #FDECEC; color: #8A1C1C; }

@media (max-width: 1000px) {
  .dv-contacto { grid-template-columns: minmax(0, 1fr); gap: var(--dv-space-8); }
  .dv-contacto__form { padding: var(--dv-space-5); }
}


/* =============================================================================
   24. CHIP ACTIVO — corrección de contraste
   -----------------------------------------------------------------------------
   El chip seleccionado quedaba con fondo azul y texto azul, ilegible: la regla
   de .dv-chip--filtro define el color del texto y venía después de la del
   estado activo, con la misma especificidad, así que le ganaba. Se resuelve
   fijando el color en el propio elemento con una variable, en vez de depender
   del orden de las reglas.
============================================================================= */

.dv-chip { color: var(--dv-chip-fg, var(--dv-text)); background: var(--dv-chip-bg, var(--dv-surface)); }

.dv-chip.is-active,
.dv-chip[aria-pressed="true"],
.dv-chip.dv-chip--filtro.is-active,
.dv-chip.dv-chip--filtro[aria-pressed="true"] {
  --dv-chip-bg: var(--dv-blue);
  --dv-chip-fg: #FFFFFF;
  border-color: var(--dv-blue);
}

/* Chip que no daría ningún resultado con lo ya elegido */
.dv-chip[disabled],
.dv-chip.is-vacio {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}


/* Tarjeta de artículo en preparación: sin enlace y en gris, como en el Figma */
.dv-card.dv-card--proximo {
  background: var(--dv-surface-2);
  border-style: dashed;
}
.dv-card.dv-card--proximo:hover { box-shadow: none; border-color: var(--dv-border); }
.dv-card.dv-card--proximo .dv-card__title { color: var(--dv-text-muted-safe); }
.dv-card.dv-card--proximo .dv-badge { align-self: flex-start; background: var(--dv-surface-3); color: var(--dv-text-muted-safe); }


/* =============================================================================
   25. AJUSTES DE DENSIDAD
   -----------------------------------------------------------------------------
   La card se estaba estirando: el badge con el nombre completo de la categoría
   le comía el ancho al título y lo partía en una palabra por línea, y las filas
   de especificaciones tenían más aire que en el Figma. Acá se vuelve a la
   densidad del diseño.
============================================================================= */

/* El badge nunca empuja al título ni se sale de la card */
.dv-card__head { gap: var(--dv-space-2); }
.dv-card__head .dv-badge {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-card__title {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Cuerpo de card más compacto */
.dv-card__body { gap: var(--dv-space-2); padding: var(--dv-space-4); }
.dv-card__desc { line-height: 17px; }
.dv-card__actions { gap: 0; padding-top: var(--dv-space-2); }

/* Filas de especificaciones: alto de fila del Figma */
.dv-specs { line-height: 16px; }
.dv-specs__row { padding: 9px var(--dv-space-3); gap: var(--dv-space-2); align-items: start; }
.dv-specs__value { overflow-wrap: break-word; }

/* Botón interno de card un poco más bajo */
.dv-btn.dv-btn--card { height: 38px; }
.dv-btn.dv-btn--quiet { height: 32px; }

/* Media de card: en el Figma es 352x264 y no debe crecer más */
.dv-card__media { padding: var(--dv-space-3); }

/* --- Mega menú más compacto --------------------------------------------- */
.dv-mega { padding-top: 0; padding-bottom: var(--dv-space-5); }
.dv-mega__head { padding: 10px var(--dv-space-5); }
.dv-mega__cols { padding: var(--dv-space-4) 0; }
.dv-mega__col { padding: var(--dv-space-1) var(--dv-space-5) var(--dv-space-4); }
.dv-mega__col:nth-child(-n+3) { padding-bottom: var(--dv-space-6); }
.dv-mega__grupo { margin-bottom: var(--dv-space-3); font-size: var(--dv-fs-xs); }
.dv-mega__list a { padding: 6px 10px; font-size: var(--dv-fs-sm); }
.dv-mega__icono svg { width: 16px; height: 16px; }

/* --- Secciones un punto más ajustadas ------------------------------------ */
.dv-section-head { margin-bottom: var(--dv-space-6); }
.dv-section-head > .dv-h3 + .dv-text { margin-top: 6px; }


/* =============================================================================
   26. PÁGINA DE MARCA
   Hero a dos columnas: datos a la izquierda, logo en recuadro a la derecha.
============================================================================= */

.dv-hero.dv-hero--marca { min-height: auto; padding-block: var(--dv-space-12); text-align: left; }

.dv-marca-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--dv-space-10);
  align-items: center;
}
.dv-marca-hero__bajada {
  margin: 0;
  font-size: var(--dv-fs-md);
  line-height: var(--dv-lh-lead);
  color: rgba(255, 255, 255, .72);
  max-width: 60ch;
}
.dv-marca-hero__logo {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--dv-space-8);
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: var(--dv-r-md);
  background: rgba(255, 255, 255, .04);
}
.dv-marca-hero__logo img { max-height: 160px; width: auto; object-fit: contain; }
.dv-marca-hero__logo span {
  font-size: 34px;
  font-weight: var(--dv-w-extra);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .35);
}

.dv-marca-intro {
  max-width: 860px;
  padding: var(--dv-space-6);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
}

@media (max-width: 900px) {
  .dv-marca-hero { grid-template-columns: minmax(0, 1fr); gap: var(--dv-space-6); }
  .dv-marca-hero__logo { min-height: 160px; order: -1; }
}


/* =============================================================================
   27. ARTÍCULO DEL BLOG
   -----------------------------------------------------------------------------
   Del frame: hero compacto y cuerpo en una columna angosta de lectura, con
   títulos numerados, un bloque destacado, listas con viñeta celeste, una
   grilla de tecnologías y una caja de checklist.

   Cómo se usan los bloques desde el editor (pestaña HTML):
     <p class="dv-destacado">Dato útil: …</p>
     <ul class="dv-lista-check"> … </ul>
     <div class="dv-tecnologias"><div><strong>Filtración</strong><span>…</span></div>…</div>
     <div class="dv-checklist"><ul> … </ul></div>
============================================================================= */

.dv-hero.dv-hero--articulo { min-height: auto; padding-block: var(--dv-space-10); text-align: left; }
.dv-articulo__bajada {
  margin: var(--dv-space-4) 0 0;
  max-width: 62ch;
  font-size: var(--dv-fs-body);
  line-height: 22px;
  color: rgba(255, 255, 255, .74);
}
.dv-articulo__meta {
  margin: var(--dv-space-6) 0 0;
  display: flex;
  gap: var(--dv-space-2);
  font-size: var(--dv-fs-sm);
  color: rgba(255, 255, 255, .5);
}

.dv-articulo { max-width: 720px; margin-inline: auto; }
.dv-articulo h2 {
  margin-top: var(--dv-space-12);
  font-size: var(--dv-fs-md);
  line-height: 24px;
  font-weight: var(--dv-w-bold);
  color: var(--dv-blue);
}
.dv-articulo h3 { margin-top: var(--dv-space-8); font-size: var(--dv-fs-body); }
.dv-articulo p { font-size: var(--dv-fs-sm); line-height: 21px; color: var(--dv-text-muted-safe); }

/* Bloque destacado */
.dv-articulo .dv-destacado {
  padding: var(--dv-space-4) var(--dv-space-5);
  border-left: 3px solid var(--dv-cyan);
  border-radius: 0 var(--dv-r-sm) var(--dv-r-sm) 0;
  background: var(--dv-surface-3);
  color: var(--dv-text);
}
.dv-articulo .dv-destacado strong { color: var(--dv-blue); }

/* Lista con viñeta celeste */
.dv-articulo .dv-lista-check { list-style: none; padding: 0; }
.dv-articulo .dv-lista-check li {
  position: relative;
  padding-left: 18px;
  font-size: var(--dv-fs-sm);
  line-height: 20px;
  color: var(--dv-text-muted-safe);
}
.dv-articulo .dv-lista-check li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dv-cyan);
}
.dv-articulo .dv-lista-check strong { color: var(--dv-blue); }

/* Grilla de tecnologías */
.dv-articulo .dv-tecnologias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dv-space-3);
}
.dv-articulo .dv-tecnologias > div {
  padding: var(--dv-space-4);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface-2);
}
.dv-articulo .dv-tecnologias strong { display: block; font-size: var(--dv-fs-sm); color: var(--dv-blue); }
.dv-articulo .dv-tecnologias span { display: block; margin-top: 4px; font-size: var(--dv-fs-xs); line-height: 16px; color: var(--dv-text-muted-safe); }

/* Caja de checklist */
.dv-articulo .dv-checklist {
  padding: var(--dv-space-5);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface-3);
}
.dv-articulo .dv-checklist ul { list-style: none; padding: 0; margin: 0; }
.dv-articulo .dv-checklist li {
  position: relative;
  padding-left: 18px;
  font-size: var(--dv-fs-sm);
  line-height: 22px;
  color: var(--dv-text);
}
.dv-articulo .dv-checklist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dv-blue);
}

@media (max-width: 700px) {
  .dv-articulo .dv-tecnologias { grid-template-columns: minmax(0, 1fr); }
}

/* Foto de respaldo (la de la categoría): se atenúa apenas para diferenciarla
   de una foto real del producto. */
.dv-card__media img.dv-foto-respaldo { opacity: .82; mix-blend-mode: multiply; }


/* =============================================================================
   28. SECCIONES DE LA PORTADA
============================================================================= */

.dv-centrado { text-align: center; }

/* Enlace con flecha */
.dv-link-flecha {
  display: inline-block;
  font-size: var(--dv-fs-sm);
  font-weight: var(--dv-w-medium);
  color: var(--dv-cyan);
}
.dv-link-flecha:hover { text-decoration: none; color: var(--dv-blue); }
.dv-link-flecha.dv-link-flecha--claro { color: var(--dv-cyan-light); }
.dv-link-flecha.dv-link-flecha--claro:hover { color: #fff; }
.dv-link-flecha.dv-link-flecha--mayus {
  font-size: var(--dv-fs-xs);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-badge);
  text-transform: uppercase;
  color: var(--dv-blue);
}
.dv-link-flecha.dv-link-flecha--mayus:hover { color: var(--dv-cyan); }

/* --- Card de categoría de la portada ------------------------------------ */
.dv-cat-simple {
  display: flex;
  flex-direction: column;
  gap: var(--dv-space-3);
  padding: var(--dv-space-6);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
  transition: border-color var(--dv-dur) var(--dv-ease), box-shadow var(--dv-dur) var(--dv-ease);
}
.dv-cat-simple:hover { border-color: var(--dv-cyan); box-shadow: var(--dv-shadow-sm); }
.dv-cat-simple__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface-3);
  color: var(--dv-cyan);
}
.dv-cat-simple__icono svg { width: 20px; height: 20px; }
.dv-cat-simple__titulo { margin: 0; font-size: var(--dv-fs-md); font-weight: var(--dv-w-bold); }
.dv-cat-simple__titulo a { color: var(--dv-blue); }
.dv-cat-simple__titulo a:hover { text-decoration: none; color: var(--dv-cyan); }
.dv-cat-simple__desc {
  margin: 0;
  flex: 1;
  font-size: var(--dv-fs-sm);
  line-height: 19px;
  color: var(--dv-text-muted-safe);
}

/* --- Card de solución ---------------------------------------------------- */
.dv-sol-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--dv-space-2);
  padding: var(--dv-space-5);
  border-radius: var(--dv-r-sm);
  background: var(--dv-blue);
  color: var(--dv-text-invert);
  min-height: 150px;
}
.dv-sol-card__titulo { margin: 0; font-size: var(--dv-fs-md); font-weight: var(--dv-w-bold); color: #fff; }
.dv-sol-card__desc {
  margin: 0;
  flex: 1;
  font-size: var(--dv-fs-xs);
  line-height: 17px;
  color: rgba(255, 255, 255, .72);
  max-width: 30ch;
}
.dv-sol-card__deco {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(255, 255, 255, .12);
  pointer-events: none;
}

/* --- Barra de CTA -------------------------------------------------------- */
.dv-barra-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-5);
  flex-wrap: wrap;
  margin-top: var(--dv-space-8);
  padding: var(--dv-space-5) var(--dv-space-6);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
}
.dv-barra-cta strong { display: block; font-size: var(--dv-fs-md); color: var(--dv-blue); }
.dv-barra-cta span { display: block; margin-top: 4px; font-size: var(--dv-fs-sm); color: var(--dv-text-muted-safe); }

/* --- Card de problema ---------------------------------------------------- */
.dv-prob-card {
  display: flex;
  flex-direction: column;
  gap: var(--dv-space-3);
  padding: var(--dv-space-5);
  border: 1px solid var(--dv-border);
  border-left: 3px solid var(--dv-cyan);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface);
}
.dv-prob-card__icono { color: var(--dv-blue); }
.dv-prob-card__icono svg { width: 20px; height: 20px; }
.dv-prob-card__titulo { margin: 0; font-size: var(--dv-fs-md); font-weight: var(--dv-w-bold); color: var(--dv-blue); }
.dv-prob-card__desc { margin: 0; flex: 1; font-size: var(--dv-fs-sm); line-height: 19px; color: var(--dv-text-muted-safe); }

/* --- Testimonios --------------------------------------------------------- */
.dv-testimonios { display: grid; }
.dv-testimonio {
  grid-area: 1 / 1;
  margin: 0 auto;
  max-width: 610px;
  padding: var(--dv-space-8);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dv-dur) var(--dv-ease);
}
.dv-testimonio.is-active { opacity: 1; visibility: visible; }
.dv-testimonio__estrellas { color: var(--dv-cyan-light); letter-spacing: 3px; font-size: 15px; }
.dv-testimonio blockquote {
  margin: var(--dv-space-4) 0 var(--dv-space-5);
  font-size: var(--dv-fs-body);
  line-height: 22px;
  font-style: italic;
  color: var(--dv-blue);
}
.dv-testimonio figcaption strong { display: block; font-size: var(--dv-fs-sm); color: var(--dv-blue); }
.dv-testimonio figcaption span { display: block; margin-top: 2px; font-size: var(--dv-fs-xs); color: var(--dv-text-muted-safe); }

.dv-testimonios__nav { display: flex; align-items: center; justify-content: center; gap: var(--dv-space-4); margin-top: var(--dv-space-6); }
.dv-testimonios__nav > button {
  width: 32px; height: 32px;
  border: 1px solid var(--dv-border);
  border-radius: 50%;
  background: var(--dv-surface);
  color: var(--dv-blue);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.dv-testimonios__puntos { display: flex; gap: 6px; }
.dv-testimonios__puntos button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dv-border);
  cursor: pointer;
}
.dv-testimonios__puntos button.is-active { background: var(--dv-blue); }

/* --- Card de marca ------------------------------------------------------- */
.dv-marca-card {
  display: flex;
  flex-direction: column;
  gap: var(--dv-space-3);
  padding: var(--dv-space-5);
  border-radius: var(--dv-r-sm);
  background: var(--dv-surface-2);
}
.dv-marca-card__logo { display: flex; align-items: center; min-height: 30px; }
.dv-marca-card__logo img { max-height: 26px; width: auto; object-fit: contain; }
.dv-marca-card__logo strong { font-size: var(--dv-fs-md); color: var(--dv-blue); letter-spacing: .02em; }
.dv-marca-card__desc { margin: 0; flex: 1; font-size: var(--dv-fs-xs); line-height: 17px; color: var(--dv-text-muted-safe); }

/* --- Cómo trabajamos ----------------------------------------------------- */
.dv-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dv-space-6);
  margin: var(--dv-space-12) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.dv-pasos li { position: relative; text-align: center; }
/* la línea que une los círculos */
.dv-pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 1px;
  background: rgba(255, 255, 255, .22);
}
.dv-pasos__num {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin: 0 auto var(--dv-space-4);
  border-radius: 50%;
  background: var(--dv-cyan-light);
  color: #fff;
  font-size: var(--dv-fs-md);
  font-weight: var(--dv-w-bold);
  position: relative;
  z-index: 1;
}
.dv-pasos li strong { display: block; font-size: var(--dv-fs-md); color: #fff; }
.dv-pasos__desc {
  display: block;
  margin-top: var(--dv-space-2);
  font-size: var(--dv-fs-xs);
  line-height: 17px;
  color: rgba(255, 255, 255, .7);
}

/* --- ¿Empezamos? --------------------------------------------------------- */
.dv-empezamos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--dv-space-10);
  align-items: start;
  max-width: 980px;
  margin-inline: auto;
}
.dv-empezamos__datos { margin-top: var(--dv-space-8); display: flex; flex-direction: column; gap: var(--dv-space-5); }
.dv-dato-min { display: flex; gap: var(--dv-space-3); align-items: flex-start; }
.dv-dato-min > span {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dv-surface-3);
  color: var(--dv-cyan);
}
.dv-dato-min strong { display: block; font-size: var(--dv-fs-sm); color: var(--dv-blue); }
.dv-dato-min a, .dv-dato-min em {
  display: block;
  font-style: normal;
  font-size: var(--dv-fs-sm);
  color: var(--dv-text-muted-safe);
}

.dv-form.dv-form--caja {
  margin-top: 0;
  padding: var(--dv-space-6);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface-2);
  gap: var(--dv-space-4);
}

@media (max-width: 1000px) {
  .dv-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-pasos li:not(:last-child)::after { display: none; }
  .dv-empezamos { grid-template-columns: minmax(0, 1fr); gap: var(--dv-space-8); }
}
@media (max-width: 700px) {
  .dv-pasos { grid-template-columns: minmax(0, 1fr); }
  .dv-barra-cta { flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   29. BLOG
   Del frame: hero con dos botones, barra de chips por categoría, card azul de
   artículo destacado y grilla de dos columnas con cabecera oscura.
============================================================================= */

.dv-hero.dv-hero--blog { min-height: 380px; text-align: left; justify-content: center; }

/* --- Barra de filtros ---------------------------------------------------- */
.dv-blog-filtros { background: var(--dv-surface-4); border-bottom: 1px solid var(--dv-border); padding-block: var(--dv-space-4); }
.dv-blog-filtros__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dv-space-2); }
.dv-blog-filtros .dv-chip { gap: 6px; height: 32px; }
.dv-blog-filtros .dv-chip svg { width: 14px; height: 14px; }

/* --- Artículo destacado -------------------------------------------------- */
.dv-destacado-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-8);
  margin-top: var(--dv-space-4);
  padding: var(--dv-space-8);
  border-radius: var(--dv-r-md);
  background: var(--dv-blue);
  color: var(--dv-text-invert);
}
.dv-destacado-card__titulo {
  margin: var(--dv-space-3) 0 var(--dv-space-3);
  font-size: var(--dv-fs-h3);
  line-height: var(--dv-lh-h3);
  font-weight: var(--dv-w-bold);
  color: #fff;
  max-width: 26ch;
}
.dv-destacado-card__desc {
  margin: 0 0 var(--dv-space-5);
  max-width: 52ch;
  font-size: var(--dv-fs-sm);
  line-height: 19px;
  color: rgba(255, 255, 255, .72);
}
.dv-destacado-card__icono {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--dv-cyan-light);
}
.dv-destacado-card__icono svg { width: 26px; height: 26px; }

/* --- Card de nota -------------------------------------------------------- */
.dv-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-r-md);
  background: var(--dv-surface);
  overflow: hidden;
}
.dv-post-card__top {
  position: relative;
  min-height: 96px;
  background: var(--dv-ink);
  display: flex;
  align-items: flex-end;
  padding: var(--dv-space-3);
}
.dv-post-card__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.dv-post-card__cat, .dv-post-card__proximo {
  position: relative;
  padding: 3px 10px;
  border-radius: var(--dv-r-pill);
  font-size: var(--dv-fs-3xs);
  font-weight: var(--dv-w-bold);
  letter-spacing: var(--dv-track-badge);
  text-transform: uppercase;
}
.dv-post-card__cat { background: rgba(255, 255, 255, .12); color: var(--dv-cyan-light); }
.dv-post-card__proximo {
  position: absolute;
  top: var(--dv-space-3);
  right: var(--dv-space-3);
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
}

.dv-post-card__body { padding: var(--dv-space-5); display: flex; flex-direction: column; gap: var(--dv-space-2); flex: 1; }
.dv-post-card__titulo { margin: 0; font-size: var(--dv-fs-body); font-weight: var(--dv-w-bold); color: var(--dv-blue); }
.dv-post-card__titulo a { color: inherit; }
.dv-post-card__titulo a:hover { text-decoration: none; color: var(--dv-cyan); }
.dv-post-card__desc { margin: 0; flex: 1; font-size: var(--dv-fs-sm); line-height: 18px; color: var(--dv-text-muted-safe); }
.dv-post-card__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-3);
  padding-top: var(--dv-space-3);
  border-top: 1px solid var(--dv-border);
  font-size: var(--dv-fs-xs);
  color: var(--dv-text-muted-safe);
}
.dv-post-card__pie em { font-style: normal; }

.dv-vacio { text-align: center; color: var(--dv-text-muted-safe); font-size: var(--dv-fs-sm); }

@media (max-width: 800px) {
  .dv-destacado-card { flex-direction: column; align-items: flex-start; padding: var(--dv-space-6); }
  .dv-destacado-card__icono { display: none; }
}


/* =============================================================================
   30. SUBMENÚ DE MARCAS Y FLECHITA DEL NAV
============================================================================= */

.dv-nav__flecha { display: inline-block; vertical-align: middle; margin-left: 2px; opacity: .55; transition: transform var(--dv-dur) var(--dv-ease), opacity var(--dv-dur) var(--dv-ease); }
.dv-nav a:hover .dv-nav__flecha { opacity: 1; }
.dv-nav a.is-open .dv-nav__flecha { transform: rotate(180deg); opacity: 1; }

/* El panel de marcas es más angosto que el de categorías */
.dv-mega__panel.dv-mega__panel--angosto { max-width: 720px; margin-inline: auto; }

.dv-mega__marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-mega__marcas-col { padding: var(--dv-space-5) var(--dv-space-6); border-right: 1px solid var(--dv-border); }
.dv-mega__marcas-col:last-child { border-right: 0; }

.dv-mega-marca {
  display: block;
  padding: 10px;
  margin-inline: -10px;
  border-radius: var(--dv-r-btn);
  color: inherit;
}
.dv-mega-marca + .dv-mega-marca { margin-top: 2px; }
.dv-mega-marca:hover { background: var(--dv-surface-3); text-decoration: none; }
.dv-mega-marca strong { display: block; font-size: var(--dv-fs-md); font-weight: var(--dv-w-bold); color: var(--dv-blue); }
.dv-mega-marca span { display: block; margin-top: 2px; font-size: var(--dv-fs-sm); line-height: 18px; color: var(--dv-text-muted-safe); }

@media (max-width: 900px) { .dv-mega.dv-mega--marcas { display: none; } }
@media (max-width: 700px) { .dv-mega__marcas { grid-template-columns: minmax(0, 1fr); } }


/* =============================================================================
   31. PREGUNTAS FRECUENTES
   Acordeón nativo (<details>), sin JavaScript: en el diseño las preguntas están
   plegadas con una flecha a la derecha.
============================================================================= */

.dv-faq { border: 1px solid var(--dv-border); border-radius: var(--dv-r-md); overflow: hidden; background: var(--dv-surface); }
.dv-faq details + details { border-top: 1px solid var(--dv-border); }

.dv-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-4);
  padding: var(--dv-space-4) var(--dv-space-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--dv-fs-body);
  font-weight: var(--dv-w-semibold);
  color: var(--dv-blue);
}
.dv-faq summary::-webkit-details-marker { display: none; }
.dv-faq summary::after {
  content: "";
  width: 8px; height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--dv-text-muted-safe);
  border-bottom: 2px solid var(--dv-text-muted-safe);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dv-dur) var(--dv-ease);
}
.dv-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.dv-faq summary:hover { background: var(--dv-surface-2); }

.dv-faq details > p {
  margin: 0;
  padding: 0 var(--dv-space-5) var(--dv-space-5);
  font-size: var(--dv-fs-sm);
  line-height: 20px;
  color: var(--dv-text-muted-safe);
}

/* El contenido importado no debe salirse de la medida de lectura ni crecer de
   más: se limita el ancho y se fijan los tamaños del diseño. */
.dv-contenido > h2:first-child { margin-top: 0; }
.dv-contenido h2 { font-size: var(--dv-fs-h3); line-height: var(--dv-lh-h3); margin-top: var(--dv-space-10); }
.dv-contenido h3 { font-size: var(--dv-fs-md); line-height: var(--dv-lh-md); margin-top: var(--dv-space-8); }
.dv-contenido p  { font-size: var(--dv-fs-body); line-height: 22px; color: var(--dv-text-muted-safe); }
.dv-contenido .dv-faq { margin-top: var(--dv-space-4); }