/* =====================================================================
   dc360net-design-system.css  ·  v3.3 "Rojo + Cobalto" (2026-07-10)
   v3.2: CTA de conversión = ROJO corporativo (texto blanco); color de
   acción = AZUL COBALTO. Conserva neutros cálidos y hero editorial
   .dc-hero--left (+ variantes de media).
   v3.3: tablas re-hechas con el patrón del playbook probado — contenedor
   redondeado con scroll, encabezado suave, solo líneas horizontales,
   zebra sutil, hover cobalto y .dc-table--stack (tarjetas en móvil).
   Sistema de diseño único de DataCenter360.net (Colombia)
   Fuente de verdad: Propuesta-Colores-v3-Interactiva.html (dirección B)
   v2 anterior respaldada en dc360net-design-system.css.bak / DESIGN-minimax.md
   ---------------------------------------------------------------------
   ARQUITECTURA DE COLOR (3 roles):
   1. FIRMA — rojo corporativo #E52925 (--dc-red): filete superior del
      header, guion de .dc-eyebrow, keyline de .dc-card--featured,
      acentos del footer. Nunca en texto de cuerpo ni superficies.
   2. CONVERSIÓN — el MISMO rojo como CTA (--dc-cta #E42824, ajustado
      1 punto para AA con texto blanco 4.54:1). SOLO CTAs de
      cotización / búsqueda / submit / WhatsApp-acción.
   3. ACCIÓN — azul cobalto #1D4ED8 (--dc-primary, blanco encima AA
      6.7:1): botones primarios, enlaces, focus, badges informativos.
   Neutros CÁLIDOS (papel #FAF8F5, tinta #1F1B18); bandas oscuras #16211F.
   ---------------------------------------------------------------------
   REGLAS:
   - Esta es la ÚNICA hoja de estilos base. No crear CSS por página/familia.
   - Todo se construye con componentes .dc-*.
   - Tablas de specs: solo specs, NUNCA columna de precio. Imagen ENCIMA.
   ---------------------------------------------------------------------
   FUENTE: DM Sans se carga vía Elementor (Global Fonts), NO desde aquí.
   Pesos requeridos: 400, 500, 600, 700 (solo estilo normal, sin itálicas).
   ===================================================================== */

/* ========================= 1. TOKENS ================================= */
:root {
  /* --- ACCIÓN: azul cobalto (botones primarios, enlaces, focus) --- */
  --dc-primary: #1d4ed8;       /* blanco encima = 6.7:1 AA */
  --dc-on-primary: #ffffff;
  --dc-primary-soft: #1e40af;  /* hover del primario (blanco 8.7:1) */
  --dc-primary-tint: #e8eefc;  /* wash cobalto: badges info, hovers suaves */

  /* --- Superficies (neutros CÁLIDOS) --- */
  --dc-canvas: #ffffff;
  --dc-surface: #faf8f5;       /* papel cálido */
  --dc-surface-soft: #f5f1eb;
  --dc-hairline: #e7e2dc;
  --dc-hairline-soft: #efeae4;
  --dc-dark: #16211f;          /* banda oscura: topbar, footer, CTA strip */
  --dc-footer-bg: #16211f;
  --dc-table-head: #f4f6fa;    /* encabezado de tabla: gris frío muy claro */
  --dc-table-zebra: #fbfcfd;   /* zebra: apenas perceptible, tinte frío */

  /* --- CONVERSIÓN: rojo corporativo con texto blanco --- */
  --dc-cta: #e42824;           /* logo #E52925 ajustado 1pt: blanco = 4.54:1 AA */
  --dc-cta-pressed: #c21f1c;   /* hover */
  --dc-cta-ink: #ffffff;       /* color de texto/icono sobre el CTA */
  --dc-cta-soft: #fdecec;      /* wash tenue para bloques de CTA */

  /* --- FIRMA: rojo corporativo (identifica, nunca vende) --- */
  --dc-red: #e52925;
  --dc-red-soft: #fdecec;

  /* --- WhatsApp (canal de conversión, verde propio del canal) --- */
  --dc-wa: #075e54;            /* botón con texto blanco = 7.7:1 AA */
  --dc-wa-pressed: #054c44;
  --dc-wa-icon: #25d366;       /* solo iconografía/círculos, no texto */

  /* --- Acentos de sistema (NO son de acción) --- */
  --dc-info: #1456f0;
  --dc-info-deep: #1d4ed8;
  --dc-info-200: #bfdbfe;
  --dc-info-700: #17437d;
  --dc-success-bg: #e9f7ee;
  --dc-success-text: #166534;  /* AA sobre success-bg = 6.5:1 */
  --dc-warning-bg: #fff7e6;
  --dc-warning-text: #92600a;
  --dc-danger-bg: #fdeaea;
  --dc-danger-text: #b3261e;
  --dc-danger-border: #d45656;

  /* --- Texto (grises cálidos) --- */
  --dc-ink: #1f1b18;
  --dc-ink-strong: #000000;
  --dc-charcoal: #2b2724;
  --dc-slate: #57504a;
  --dc-steel: #6b6560;         /* AA 5.7:1 */
  --dc-stone: #948d86;         /* solo placeholders/decoración */
  --dc-muted: #6b6560;
  --dc-on-dark: #ffffff;

  /* --- Tipografía --- */
  --dc-font: 'DM Sans', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --dc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Radios --- */
  --dc-r-btn: 10px;   /* botones v3: rectangulares suaves, ya no pill */
  --dc-r-xs: 4px;
  --dc-r-sm: 6px;
  --dc-r-md: 8px;
  --dc-r-lg: 12px;
  --dc-r-xl: 16px;
  --dc-r-xxl: 20px;
  --dc-r-xxxl: 24px;
  --dc-r-hero: 32px;
  --dc-r-full: 9999px;

  /* --- Espaciado (base 4px) --- */
  --dc-s-xxs: 4px;
  --dc-s-xs: 8px;
  --dc-s-sm: 12px;
  --dc-s-md: 16px;
  --dc-s-lg: 20px;
  --dc-s-xl: 24px;
  --dc-s-xxl: 32px;
  --dc-s-xxxl: 40px;
  --dc-s-section-sm: 48px;
  --dc-s-section: 64px;
  --dc-s-section-lg: 80px;
  --dc-s-hero: 96px;

  /* --- Elevación --- */
  --dc-elev-1: 0 1px 2px 0 rgba(0,0,0,.04);
  --dc-elev-2: 0 4px 6px 0 rgba(0,0,0,.08);
  --dc-elev-3: 0 0 22px 0 rgba(0,0,0,.08);
  --dc-elev-4: 0 12px 16px -4px rgba(36,36,36,.08);

  /* --- Layout --- */
  --dc-container: 1280px;
  --dc-gutter: 32px;
}

/* ========================= 2. BASE ================================== */
.dc-scope,
.dc-scope * { box-sizing: border-box; }

.dc-scope {
  font-family: var(--dc-font);
  color: var(--dc-charcoal);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.dc-container {
  max-width: var(--dc-container);
  margin-inline: auto;
  padding-inline: var(--dc-gutter);
}

.dc-section { padding-block: var(--dc-s-section-lg); }
.dc-section--tight { padding-block: var(--dc-s-section); }

/* ========================= 3. TIPOGRAFÍA =========================== */
.dc-hero-display {
  font-weight: 600; font-size: 80px; line-height: 1.10;
  letter-spacing: -2px; color: var(--dc-ink); margin: 0;
}
.dc-display {
  font-weight: 600; font-size: 56px; line-height: 1.10;
  letter-spacing: -1.5px; color: var(--dc-ink); margin: 0;
}
.dc-h1 {
  font-weight: 600; font-size: 40px; line-height: 1.20;
  letter-spacing: -1px; color: var(--dc-ink); margin: 0;
}
.dc-h2 {
  font-weight: 600; font-size: 32px; line-height: 1.25;
  letter-spacing: -.5px; color: var(--dc-ink); margin: 0;
}
.dc-h3 {
  font-weight: 600; font-size: 24px; line-height: 1.30;
  color: var(--dc-ink); margin: 0;
}
.dc-h4 {
  font-weight: 600; font-size: 20px; line-height: 1.40;
  color: var(--dc-ink); margin: 0;
}
.dc-subtitle {
  font-weight: 500; font-size: 18px; line-height: 1.50;
  color: var(--dc-steel); margin: 0;
}
.dc-body   { font-size: 16px; line-height: 1.50; color: var(--dc-charcoal); }
.dc-body-strong { font-size: 16px; font-weight: 700; line-height: 1.50; }
.dc-small  { font-size: 14px; line-height: 1.50; color: var(--dc-slate); }
.dc-caption{ font-size: 13px; line-height: 1.70; color: var(--dc-steel); }
.dc-micro  { font-size: 12px; line-height: 1.50; color: var(--dc-muted); }
.dc-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dc-steel);
}
/* Guion rojo de firma: ritual de apertura de cada sección */
.dc-eyebrow::before{
  content: ""; width: 22px; height: 3px; flex: none;
  background: var(--dc-red); border-radius: 2px;
}

/* ========================= 4. BOTONES ============================== */
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--dc-s-xs);
  font-family: var(--dc-font); font-size: 14px; font-weight: 600;
  line-height: 1.40; text-decoration: none; cursor: pointer;
  padding: 11px 24px; border-radius: var(--dc-r-btn);
  border: 1px solid transparent; transition: background-color .15s ease,
  color .15s ease, border-color .15s ease; white-space: nowrap;
}
.dc-btn:focus-visible { outline: 2px solid var(--dc-primary); outline-offset: 2px; }

/* Primario general = esmeralda (acción/navegación) */
.dc-btn--primary { background: var(--dc-primary); color: var(--dc-on-primary); }
.dc-btn--primary:hover { background: var(--dc-primary-soft); }
.dc-btn--primary[disabled],
.dc-btn--primary:disabled { background: var(--dc-hairline); color: var(--dc-stone); cursor: not-allowed; }

/* Secundario = pill outline */
.dc-btn--secondary { background: transparent; color: var(--dc-ink); border-color: var(--dc-ink); }
.dc-btn--secondary:hover { background: var(--dc-ink); color: var(--dc-on-primary); }

/* Terciario = pill blanco borde tenue */
.dc-btn--tertiary { background: var(--dc-canvas); color: var(--dc-ink); border-color: var(--dc-hairline); }
.dc-btn--tertiary:hover { border-color: var(--dc-ink); }

/* Link */
.dc-btn--link { background: transparent; color: var(--dc-ink); padding: 8px 0; border-radius: 0; }
.dc-btn--link:hover { text-decoration: underline; }

/* === CTA de CONVERSIÓN — naranja con texto oscuro (cotización) === */
.dc-btn--cta { background: var(--dc-cta); color: var(--dc-cta-ink); }
.dc-btn--cta:hover { background: var(--dc-cta-pressed); color: var(--dc-cta-ink); }

/* WhatsApp — verde del canal, texto blanco (AA 7.7:1) */
.dc-btn--whatsapp { background: var(--dc-wa); color: #fff; }
.dc-btn--whatsapp:hover { background: var(--dc-wa-pressed); color: #fff; }

/* Tamaños */
.dc-btn--lg { padding: 14px 28px; font-size: 15px; }
.dc-btn--sm { padding: 8px 16px; font-size: 13px; }
.dc-btn--block { display: flex; width: 100%; }

/* Icono circular */
.dc-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--dc-r-full);
  background: var(--dc-canvas); color: var(--dc-ink);
  border: 1px solid var(--dc-hairline); cursor: pointer;
}

/* ========================= 5. TARJETAS ============================= */
.dc-card {
  background: var(--dc-canvas); border: 1px solid var(--dc-hairline);
  border-radius: var(--dc-r-xl); padding: var(--dc-s-xl);
  box-shadow: var(--dc-elev-1);
}
/* Destacada: keyline roja de firma (ej. "Más cotizado") */
.dc-card--featured { border-top: 3px solid var(--dc-red); }
.dc-card--feature { background: var(--dc-surface); border: 0; padding: var(--dc-s-xxl); border-radius: var(--dc-r-xl); }
.dc-card--rec { border-radius: var(--dc-r-lg); padding: var(--dc-s-lg); box-shadow: var(--dc-elev-1); }
.dc-card__title { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--dc-ink); margin: 0 0 var(--dc-s-xs); }
.dc-card__text  { font-size: 14px; line-height: 1.5; color: var(--dc-steel); margin: 0; }

/* Bloque CTA destacado (cotización) — usa wash rojo tenue, borde acento */
.dc-cta-block {
  background: var(--dc-cta-soft); border: 1px solid var(--dc-cta);
  border-radius: var(--dc-r-hero); padding: var(--dc-s-section);
  text-align: center;
}
.dc-cta-block .dc-h2 { margin-bottom: var(--dc-s-md); }

/* ========================= 6. BADGES ============================== */
.dc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  padding: 4px 10px; border-radius: var(--dc-r-full);
  background: var(--dc-surface); color: var(--dc-slate);
}
.dc-badge--success { background: var(--dc-success-bg); color: var(--dc-success-text); }
.dc-badge--info    { background: var(--dc-primary-tint); color: var(--dc-primary-soft); }
.dc-badge--new     { background: var(--dc-primary); color: var(--dc-on-primary); } /* esmeralda, NO rojo */
.dc-badge--featured{ background: var(--dc-red-soft); color: #b3261e; } /* firma: "Destacado / Más cotizado" */
.dc-badge--warning { background: var(--dc-warning-bg); color: var(--dc-warning-text); }
/* v3.1: SKU en mono plano, sin chip de color (menos ruido en tablas) */
.dc-badge--code {
  font-family: var(--dc-font-mono); font-size: 13.5px; font-weight: 600;
  background: transparent; color: var(--dc-ink);
  border-radius: 0; padding: 0;
}

/* ========================= 7. ALERTAS ============================= */
.dc-alert {
  display: flex; gap: var(--dc-s-sm);
  padding: var(--dc-s-md) var(--dc-s-lg); border-radius: var(--dc-r-md);
  border: 1px solid var(--dc-hairline); background: var(--dc-surface);
  font-size: 14px; line-height: 1.5; color: var(--dc-charcoal);
}
.dc-alert__title { font-weight: 700; display: block; margin-bottom: 2px; }
.dc-alert--info    { background: #eef4ff; border-color: var(--dc-info-200); }
.dc-alert--success { background: var(--dc-success-bg); border-color: #b7f0cf; }
.dc-alert--warning { background: var(--dc-warning-bg); border-color: #ffe2a8; }
.dc-alert--danger  { background: var(--dc-danger-bg); border-color: var(--dc-danger-border); }

/* ========================= 8. TABLAS DE SPECS ===================== */
/* Regla: solo specs, NUNCA columna de precio. Imagen ENCIMA de la tabla. */
.dc-table-figure { margin: 0 0 var(--dc-s-md); }
.dc-table-figure img { max-width: 100%; height: auto; display: block; border-radius: var(--dc-r-lg); }

/* v3.3 — patrón de tablas del playbook probado, adaptado a tokens cálidos:
   contenedor con scroll y ESQUINAS REDONDEADAS, encabezado suave (sin
   uppercase ni filo), SOLO líneas horizontales (nunca verticales), zebra
   sutil, hover en tinte cobalto, y patrón --stack para móvil (cada fila
   se vuelve tarjeta). */
.dc-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; width: 100%;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-lg);
  background: var(--dc-canvas); }
.dc-table {
  width: 100%; border-collapse: collapse; background: var(--dc-canvas);
  font-size: 14.5px; color: var(--dc-ink); min-width: 640px;
}
.dc-table thead th {
  background: var(--dc-table-head); color: var(--dc-ink);
  font-size: 13px; font-weight: 600; text-align: left;
  padding: 12px 14px; border: 0; border-bottom: 1px solid var(--dc-hairline);
  white-space: nowrap;
}
.dc-table tbody td {
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--dc-hairline-soft);
  vertical-align: top;
}
.dc-table tbody tr:last-child td { border-bottom: 0; }
/* Blindaje: mata bordes verticales Y superiores que inyecta el tema/kit
   (el kit pone border-top gris en th/td → doble línea contra el wrap) */
.dc-scope .dc-table th, .dc-scope .dc-table td { border-left: 0; border-right: 0; border-top: 0; }
/* Fondos con blindaje de especificidad: base, zebra apenas perceptible, hover cobalto */
.dc-scope .dc-table tbody tr td { background: var(--dc-canvas); }
.dc-scope .dc-table tbody tr:nth-child(even) td { background: var(--dc-table-zebra); }
.dc-scope .dc-table tbody tr:hover td { background: var(--dc-primary-tint); }
.dc-table th[scope="row"] { font-weight: 600; color: var(--dc-charcoal); }
/* Cotizar → SIEMPRE en cobalto (especificidad 0,3,0: gana al blindaje
   genérico de .dc-scope .dc-btn--link de la sección 16) */
.dc-scope .dc-table .dc-btn--link { color: var(--dc-primary); font-weight: 600; font-size: 13.5px; }
.dc-scope .dc-table .dc-btn--link:hover { color: var(--dc-primary-soft); text-decoration: underline; }
/* Alineación numérica / celdas de término (SKU + Cotizar) */
.dc-table th.dc-num, .dc-table td.dc-num { text-align: right; font-variant-numeric: tabular-nums; }
.dc-table .dc-term-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dc-table .dc-val { font-family: var(--dc-font-mono); font-size: 13.5px; color: var(--dc-ink); }
/* Fila divisoria de grupo (ej. "Legacy") */
.dc-table__divider td { background: var(--dc-table-head); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dc-slate); padding: 8px 14px; }

/* Tabla de SKUs (modelo → CTA cotización, sin precio) */
.dc-sku-table td:last-child { white-space: nowrap; }

/* --- Móvil: .dc-table--stack — cada fila se reorganiza como tarjeta.
   Requiere: primera celda = descripción; celdas de término con
   class="dc-num" + data-label="1 año" y contenido en .dc-term-cell;
   términos no ofrecidos = <span class="dc-no">—</span> (se ocultan). --- */
@media (max-width: 600px) {
  .dc-table-wrap:has(.dc-table--stack) { overflow-x: visible; border: none; border-radius: 0; background: transparent; }
  .dc-table--stack { min-width: 0; }
  .dc-table--stack thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .dc-table--stack tbody, .dc-table--stack tr, .dc-table--stack td { display: block; width: 100%; }
  .dc-table--stack tr { border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-lg);
    margin: 0 0 12px; background: var(--dc-canvas); overflow: hidden; box-shadow: var(--dc-elev-1); }
  .dc-scope .dc-table--stack tbody tr td { background: var(--dc-canvas); border-bottom: 1px solid var(--dc-hairline-soft); padding: 11px 14px; text-align: left; }
  .dc-scope .dc-table--stack tbody tr:nth-child(even) td { background: var(--dc-canvas); }
  .dc-table--stack tr td:last-child { border-bottom: 0; }
  .dc-scope .dc-table--stack tbody tr td:first-child { background: var(--dc-table-head); }
  .dc-table--stack td.dc-num { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; text-align: right; }
  .dc-table--stack td.dc-num::before { content: attr(data-label); font-weight: 600; font-size: 12.5px;
    color: var(--dc-muted); flex: none; text-align: left; padding-top: 3px; }
  .dc-table--stack td.dc-num:has(.dc-no) { display: none; }
}

/* ========================= 9. FAQ / ACORDEÓN ===================== */
/* Sin JS: usa <details>/<summary>. El JS del sitio NO es necesario. */
.dc-faq { border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-lg); overflow: hidden; }
.dc-faq__item { border-bottom: 1px solid var(--dc-hairline-soft); }
.dc-faq__item:last-child { border-bottom: 0; }
.dc-faq__item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--dc-s-md);
  padding: var(--dc-s-md) var(--dc-s-lg);
  font-size: 16px; font-weight: 600; color: var(--dc-ink);
}
.dc-faq__item > summary::-webkit-details-marker { display: none; }
.dc-faq__item > summary::after {
  content: "+"; font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--dc-steel); transition: transform .2s ease;
}
.dc-faq__item[open] > summary::after { content: "\2212"; } /* − */
.dc-faq__item > summary:focus-visible { outline: 2px solid var(--dc-primary); outline-offset: -2px; }
.dc-faq__answer {
  padding: 0 var(--dc-s-lg) var(--dc-s-md);
  font-size: 15px; line-height: 1.6; color: var(--dc-charcoal);
}

/* ========================= 10. FORMULARIOS ======================= */
.dc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--dc-s-md); }
.dc-label { font-size: 14px; font-weight: 500; color: var(--dc-charcoal); }
.dc-input, .dc-textarea, .dc-select {
  font-family: var(--dc-font); font-size: 16px; color: var(--dc-ink);
  background: var(--dc-canvas); border: 1px solid var(--dc-hairline);
  border-radius: var(--dc-r-md); padding: 10px 16px; width: 100%;
}
.dc-input { height: 44px; }
.dc-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.dc-input:focus, .dc-textarea:focus, .dc-select:focus {
  outline: none; border: 2px solid var(--dc-primary); padding: 9px 15px;
}
.dc-field--error .dc-input,
.dc-field--error .dc-textarea { border-color: var(--dc-danger-border); }
.dc-field__error { font-size: 13px; color: var(--dc-danger-text); }
.dc-help { font-size: 13px; color: var(--dc-steel); }

/* ========================= 11. HERO ============================== */
.dc-hero { text-align: center; padding-block: var(--dc-s-hero); }
.dc-hero__title { margin: 0 auto var(--dc-s-md); max-width: 16ch; }
.dc-hero__subtitle { margin: 0 auto var(--dc-s-xl); max-width: 60ch; }
.dc-hero__actions { display: flex; gap: var(--dc-s-sm); justify-content: center; flex-wrap: wrap; }

/* --- Variante v3.1: hero editorial a la izquierda (páginas de modelo).
   Banda de papel cálido con brillos esmeralda/rojo muy sutiles; titular
   a escala editorial (48px, no display). Mismo markup + clase --left. --- */
.dc-hero--left {
  text-align: left; padding-block: var(--dc-s-section) var(--dc-s-section-sm);
  background:
    radial-gradient(760px 340px at 88% -12%, rgba(29,78,216,.07), transparent 60%),
    radial-gradient(560px 300px at -6% 112%, rgba(229,41,37,.06), transparent 55%),
    var(--dc-surface);
  border-bottom: 1px solid var(--dc-hairline);
}
.dc-hero--left .dc-hero__title {
  font-size: 48px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.12;
  max-width: 20ch; margin: 12px 0 10px;
}
.dc-hero--left .dc-hero__subtitle { font-size: 17.5px; max-width: 58ch; margin: 0 0 var(--dc-s-lg); }
.dc-hero--left .dc-hero__actions { justify-content: flex-start; }
.dc-hero__avail { margin: 0 0 var(--dc-s-sm); }

/* --- Variantes de media del hero editorial (regla Fito 2026-07-10):
   1) Solo información a la izquierda → .dc-hero--left a secas (base).
   2) Imagen a la derecha → .dc-hero--left + .dc-hero__grid con
      .dc-hero__media al final (la imagen cae DEBAJO del texto en móvil).
   3) Banner de fondo → .dc-hero--left .dc-hero--banner + la imagen como
      CSS var inline en la sección: style="--dc-hero-img:url('…')".
      Lleva scrim oscuro (texto blanco AA); no usar con fotos muy claras. --- */
.dc-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--dc-s-xxl); align-items: center; }
.dc-hero__media { margin: 0; }
.dc-hero__media img {
  width: 100%; height: auto; display: block;
  background: var(--dc-canvas); border: 1px solid var(--dc-hairline);
  border-radius: var(--dc-r-xl); padding: var(--dc-s-md);
}
@media (max-width: 900px) {
  .dc-hero__grid { grid-template-columns: 1fr; gap: var(--dc-s-lg); }
}

.dc-hero--banner {
  background:
    linear-gradient(90deg, rgba(22,33,31,.94) 0%, rgba(22,33,31,.78) 48%, rgba(22,33,31,.42) 100%),
    var(--dc-hero-img) center / cover no-repeat, var(--dc-dark);
  border-bottom: 0;
}
.dc-hero--banner .dc-hero__title { color: var(--dc-on-dark); }
.dc-hero--banner .dc-hero__subtitle { color: rgba(255,255,255,.85); }
.dc-hero--banner .dc-eyebrow { color: rgba(255,255,255,.78); }
.dc-hero--banner .dc-small { color: rgba(255,255,255,.72); }
@media (max-width: 768px) {
  .dc-hero--banner {
    background:
      linear-gradient(180deg, rgba(22,33,31,.94) 0%, rgba(22,33,31,.86) 100%),
      var(--dc-hero-img) center / cover no-repeat, var(--dc-dark);
  }
}
@media (max-width: 768px) {
  .dc-hero--left { padding-block: var(--dc-s-xxxl) var(--dc-s-xxl); }
  .dc-hero--left .dc-hero__title { font-size: 34px; letter-spacing: -.8px; }
}
@media (max-width: 480px) {
  .dc-hero--left .dc-hero__title { font-size: 29px; }
}

/* ========================= 12. JUMP-NAV ========================== */
.dc-jumpnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: var(--dc-s-xs); flex-wrap: wrap;
  padding: var(--dc-s-sm) 0; background: var(--dc-canvas);
  border-bottom: 1px solid var(--dc-hairline-soft);
}
.dc-jumpnav__link {
  font-size: 14px; font-weight: 500; color: var(--dc-steel);
  text-decoration: none; padding: 8px 14px; border-radius: var(--dc-r-full);
  border: 1px solid var(--dc-hairline); background: var(--dc-canvas);
}
.dc-jumpnav__link:hover { border-color: var(--dc-ink); color: var(--dc-ink); }
.dc-jumpnav__link.is-active { background: var(--dc-primary); color: var(--dc-on-primary); border-color: var(--dc-primary); }

/* ========================= 13. UTILIDADES ======================= */
.dc-grid { display: grid; gap: var(--dc-s-xl); }
.dc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dc-stack > * + * { margin-top: var(--dc-s-md); }
.dc-divider { border: 0; border-top: 1px solid var(--dc-hairline); margin: var(--dc-s-xl) 0; }
.dc-text-center { text-align: center; }

/* Anclas bajo header sticky: evita que el destino del jump-nav quede tapado */
.dc-scope [id] { scroll-margin-top: 120px; }
@media (max-width: 1024px) { .dc-scope [id] { scroll-margin-top: 80px; } }

/* ========================= 14. RESPONSIVE ======================= */
/* Puntos de control: 360 / 768 / 1280. Compuerta bloqueante de publicación. */
@media (max-width: 1024px) {
  .dc-hero-display { font-size: 56px; letter-spacing: -1.5px; }
  .dc-display { font-size: 44px; }
  .dc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --dc-gutter: 20px; }
  .dc-hero-display { font-size: 40px; letter-spacing: -1px; }
  .dc-display { font-size: 34px; letter-spacing: -1px; }
  .dc-h1 { font-size: 30px; }
  .dc-h2 { font-size: 26px; }
  .dc-section { padding-block: var(--dc-s-section); }
  .dc-grid--2, .dc-grid--3, .dc-grid--4 { grid-template-columns: 1fr; }
  .dc-cta-block { padding: var(--dc-s-xxl); }
  /* Áreas táctiles ≥44px */
  .dc-btn { padding: 13px 24px; }
  .dc-btn-icon { width: 44px; height: 44px; }
  .dc-jumpnav__link { padding: 11px 16px; }
}
@media (max-width: 480px) {
  .dc-hero-display { font-size: 32px; }
  .dc-jumpnav { overflow-x: auto; flex-wrap: nowrap; }
  .dc-btn--block-mobile { display: flex; width: 100%; }
}

/* ========================= 15. ADAPTADOR FORM ELEMENTOR ==========
   Único puente entre el widget Form de Elementor Pro y el design system.
   USO: en el widget Form → Avanzado → CSS Classes, agregar  dc-elementor-form
   No crear CSS por página: este adaptador vive SOLO aquí y se reutiliza.
   Mapea el markup de Elementor (.elementor-field*) a los tokens .dc-*.
   ================================================================= */
.dc-elementor-form .elementor-form-fields-wrapper { row-gap: var(--dc-s-md); }

/* Etiquetas → .dc-label */
.dc-elementor-form .elementor-field-group > .elementor-field-label {
  font-family: var(--dc-font); font-size: 14px; font-weight: 500;
  color: var(--dc-charcoal); line-height: 1.4; margin-bottom: 6px; padding: 0;
}
.dc-elementor-form .elementor-mark-required .elementor-field-label:after,
.dc-elementor-form .elementor-field-required .elementor-field-label:after { color: var(--dc-red); }

/* Inputs / textarea / select → .dc-input / .dc-textarea */
.dc-elementor-form .elementor-field-textual {
  font-family: var(--dc-font); font-size: 16px; color: var(--dc-ink);
  background: var(--dc-canvas); border: 1px solid var(--dc-hairline);
  border-radius: var(--dc-r-md); padding: 10px 16px; width: 100%;
  box-shadow: none; transition: border-color .15s ease;
}
.dc-elementor-form input.elementor-field-textual,
.dc-elementor-form select.elementor-field-textual { height: 44px; }
.dc-elementor-form textarea.elementor-field-textual { min-height: 120px; resize: vertical; line-height: 1.5; }
.dc-elementor-form .elementor-field-textual::placeholder { color: var(--dc-stone); opacity: 1; }
.dc-elementor-form .elementor-field-textual:focus {
  outline: none; border: 2px solid var(--dc-primary); padding: 9px 15px; box-shadow: none;
}
.dc-elementor-form select.elementor-field-textual:focus,
.dc-elementor-form input.elementor-field-textual:focus { padding-block: 0; }

/* Estado de error nativo de Elementor */
.dc-elementor-form .elementor-field-group.elementor-error .elementor-field-textual { border-color: var(--dc-danger-border); }
.dc-elementor-form .elementor-message.elementor-help-inline { color: var(--dc-danger-text); font-size: 13px; }

/* Botón submit → .dc-btn--cta (naranja de conversión, texto oscuro) */
.dc-elementor-form .elementor-field-type-submit { margin-top: var(--dc-s-xs); }
.dc-elementor-form .elementor-button[type="submit"],
.dc-elementor-form button.elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-s-xs);
  font-family: var(--dc-font); font-size: 15px; font-weight: 600; line-height: 1.4;
  background: var(--dc-cta); color: var(--dc-cta-ink); border: 1px solid transparent;
  border-radius: var(--dc-r-btn); padding: 14px 28px; min-height: 48px;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease;
}
.dc-elementor-form .elementor-button[type="submit"]:hover,
.dc-elementor-form button.elementor-button:hover { background: var(--dc-cta-pressed); color: var(--dc-cta-ink); }
.dc-elementor-form .elementor-button:focus-visible { outline: 2px solid var(--dc-primary); outline-offset: 2px; }

/* Mensajes de éxito/error del envío */
.dc-elementor-form + .elementor-message-success,
.dc-elementor-form .elementor-message-success {
  background: var(--dc-success-bg); color: var(--dc-success-text);
  border-radius: var(--dc-r-md); padding: 12px 16px; font-size: 14px; font-weight: 600;
}
.dc-elementor-form .elementor-message-danger {
  background: var(--dc-danger-bg); color: var(--dc-danger-text);
  border-radius: var(--dc-r-md); padding: 12px 16px; font-size: 14px;
}

/* Nota bajo el formulario (privacidad / tiempo de respuesta) */
.dc-form-note { font-size: 13px; line-height: 1.6; color: var(--dc-steel); margin-top: var(--dc-s-sm); }

/* Móvil: submit full-width y área táctil */
@media (max-width: 768px) {
  .dc-elementor-form .elementor-button[type="submit"],
  .dc-elementor-form button.elementor-button { width: 100%; }
}

/* ========================= 16. BLINDAJE vs ELEMENTOR GLOBAL KIT =====
   El Global Kit de Elementor aplica `.elementor-kit-NNNN button` (esp. 0,1,1),
   que PISA `.dc-btn` (0,1,0) en elementos <button>: lo vuelve azul, con padding
   enorme, sombra y fuente 18px. Re-declaramos el sistema de botones scoped bajo
   `.dc-scope` (esp. 0,2,0) para ganar SIEMPRE. Requiere el wrapper .dc-scope.
   =================================================================== */
.dc-scope .dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-s-xs);
  width: auto; min-height: 0; font-family: var(--dc-font); font-size: 14px; font-weight: 600;
  line-height: 1.40; letter-spacing: normal; text-transform: none; text-decoration: none;
  padding: 11px 24px; border-radius: var(--dc-r-btn); border: 1px solid transparent;
  background: transparent; color: var(--dc-ink); box-shadow: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap;
}
.dc-scope .dc-btn--primary { background: var(--dc-primary); color: var(--dc-on-primary); }
.dc-scope .dc-btn--primary:hover { background: var(--dc-primary-soft); }
.dc-scope .dc-btn--primary[disabled],
.dc-scope .dc-btn--primary:disabled { background: var(--dc-hairline); color: var(--dc-stone); cursor: not-allowed; }
.dc-scope .dc-btn--secondary { background: transparent; color: var(--dc-ink); border-color: var(--dc-ink); }
.dc-scope .dc-btn--secondary:hover { background: var(--dc-ink); color: var(--dc-on-primary); }
.dc-scope .dc-btn--tertiary { background: var(--dc-canvas); color: var(--dc-ink); border-color: var(--dc-hairline); }
.dc-scope .dc-btn--tertiary:hover { border-color: var(--dc-ink); }
.dc-scope .dc-btn--link { background: transparent; color: var(--dc-ink); padding: 8px 0; border-radius: 0; }
.dc-scope .dc-btn--link:hover { text-decoration: underline; }
.dc-scope .dc-btn--cta { background: var(--dc-cta); color: var(--dc-cta-ink); }
.dc-scope .dc-btn--cta:hover { background: var(--dc-cta-pressed); color: var(--dc-cta-ink); }
.dc-scope .dc-btn--whatsapp { background: var(--dc-wa); color: #fff; }
.dc-scope .dc-btn--whatsapp:hover { background: var(--dc-wa-pressed); color: #fff; }
.dc-scope .dc-btn--lg { padding: 14px 28px; font-size: 15px; }
.dc-scope .dc-btn--sm { padding: 8px 16px; font-size: 13px; }
.dc-scope .dc-btn--block { display: flex; width: 100%; }
.dc-scope .dc-btn-icon {
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  width: 36px; height: 36px; border-radius: var(--dc-r-full);
  background: var(--dc-canvas); color: var(--dc-ink); border: 1px solid var(--dc-hairline);
  box-shadow: none; cursor: pointer; font-size: inherit;
}
@media (max-width: 768px) {
  .dc-scope .dc-btn { padding: 13px 24px; }
  .dc-scope .dc-btn-icon { width: 44px; height: 44px; }
}

/* ========================= 17. HEADER / TIENDA ==================
   Header e-commerce. Fila 1: [hamburguesa móvil] logo · buscador
   amplio · moneda · cuenta.  Fila 2: menú (izq) · Cotiza + WhatsApp (der).
   Se sirve como fragmento 'header' (wp_body_open). Banderas y WhatsApp
   verde = iconografía; acento de acción = rojo --dc-cta.
   ================================================================= */
.dc-header {
  position: sticky; top: 0; z-index: 100000;
  background: var(--dc-canvas); border-bottom: 1px solid var(--dc-hairline); font-family: var(--dc-font);
}
/* Filete rojo de firma: primera señal de marca al abrir cualquier página */
.dc-header::before { content: ""; display: block; height: 4px; background: var(--dc-red); }
.dc-header *, .dc-header *::before, .dc-header *::after { box-sizing: border-box; }
.dc-header.is-scrolled { box-shadow: var(--dc-elev-3); }
body.admin-bar .dc-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .dc-header { top: 46px; } }

/* --- Fila 0: topbar --- */
.dc-topbar { background: var(--dc-dark); color: var(--dc-on-dark); font-size: 13px; line-height: 1.4; }
.dc-topbar__inner { max-width: var(--dc-container); margin-inline: auto; padding: 8px var(--dc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--dc-s-md); }
.dc-topbar__left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-topbar__partner { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--dc-r-full); background: rgba(255,255,255,.10); color: #fff; font-weight: 600; }
.dc-topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dc-red); }
.dc-topbar__muted { color: rgba(255,255,255,.65); }
.dc-topbar__right { display: inline-flex; align-items: center; gap: var(--dc-s-lg); white-space: nowrap; }
.dc-topbar__link { color: rgba(255,255,255,.82); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.dc-topbar__link:hover { color: #fff; }
.dc-topbar__link svg { width: 15px; height: 15px; flex: none; }

/* --- Fila 1: marca + buscador + moneda + cuenta --- */
.dc-header__main { max-width: var(--dc-container); margin-inline: auto; padding: 0 var(--dc-gutter);
  display: flex; align-items: center; gap: var(--dc-s-xl); min-height: 88px; }
.dc-header.is-scrolled .dc-header__main { min-height: 74px; }

.dc-brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.dc-brand__logo { height: 50px; width: auto; display: block; transition: height .2s ease; }
.dc-header.is-scrolled .dc-brand__logo { height: 42px; }

/* Buscador amplio */
.dc-search { flex: 1 1 auto; min-width: 220px; max-width: 720px; }
.dc-search__form { display: flex; align-items: stretch; width: 100%; height: 52px;
  border: 2px solid var(--dc-ink); border-radius: var(--dc-r-full); overflow: hidden; background: var(--dc-canvas);
  transition: box-shadow .15s ease; }
.dc-search__form:focus-within { box-shadow: 0 0 0 4px rgba(10,10,10,.08); }
.dc-search__input { flex: 1 1 auto; border: 0; outline: none; background: transparent; padding: 0 20px;
  font-family: var(--dc-font); font-size: 15px; color: var(--dc-ink); }
.dc-search__input::placeholder { color: var(--dc-stone); }
.dc-search__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--dc-cta); color: var(--dc-cta-ink); padding: 0 24px; font-family: var(--dc-font); font-size: 14px; font-weight: 600;
  transition: background-color .15s ease; }
.dc-search__btn:hover { background: var(--dc-cta-pressed); }
.dc-search__btn svg { width: 19px; height: 19px; }

/* Utilidades derecha (moneda + cuenta; whatsapp solo móvil) */
.dc-header__utils { display: flex; align-items: center; gap: var(--dc-s-sm); flex: none; }

.dc-currency { position: relative; flex: none; }
.dc-currency__toggle { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px;
  border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-full); background: var(--dc-canvas); color: var(--dc-ink);
  cursor: pointer; font-family: var(--dc-font); font-size: 14px; font-weight: 600; transition: border-color .15s ease; }
.dc-currency__toggle:hover { border-color: var(--dc-ink); }
.dc-flag { width: 22px; height: 15px; border-radius: 2px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.dc-currency__caret { width: 15px; height: 15px; color: var(--dc-stone); transition: transform .2s ease; }
.dc-currency.is-open .dc-currency__caret { transform: rotate(180deg); }
.dc-currency__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--dc-canvas);
  border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-lg); box-shadow: var(--dc-elev-4); padding: 6px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.dc-currency.is-open .dc-currency__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dc-currency__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: transparent;
  border-radius: var(--dc-r-md); cursor: pointer; font-family: var(--dc-font); font-size: 14px; font-weight: 600; color: var(--dc-charcoal); text-align: left; }
.dc-currency__opt:hover, .dc-currency__opt.is-active { background: var(--dc-surface); }
.dc-currency__opt .dc-check { margin-left: auto; width: 16px; height: 16px; color: var(--dc-success-text); opacity: 0; }
.dc-currency__opt.is-active .dc-check { opacity: 1; }

.dc-account { position: relative; flex: none; }
.dc-account__toggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 12px;
  border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-full); background: var(--dc-canvas); color: var(--dc-ink);
  cursor: pointer; font-family: var(--dc-font); font-size: 14px; font-weight: 600; transition: border-color .15s ease; }
.dc-account__toggle:hover { border-color: var(--dc-ink); }
.dc-account__toggle svg.dc-account__icon { width: 20px; height: 20px; }
.dc-account__label { display: inline; }
.dc-account__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--dc-canvas);
  border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-lg); box-shadow: var(--dc-elev-4); padding: 6px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.dc-account.is-open .dc-account__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dc-account__link { display: block; padding: 10px 12px; border-radius: var(--dc-r-md); font-size: 14px; font-weight: 500; color: var(--dc-charcoal); text-decoration: none; }
.dc-account__link:hover { background: var(--dc-surface); color: var(--dc-ink); }

/* WhatsApp icono (verde) — usado en fila 2 (desktop) y utils (móvil) */
.dc-header__wa { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--dc-r-full); background: #25D366; color: #fff; border: 0; text-decoration: none; flex: none;
  transition: background-color .15s ease, transform .1s ease; }
.dc-header__wa:hover { background: #1da851; }
.dc-header__wa:active { transform: scale(.96); }
.dc-header__wa svg { width: 23px; height: 23px; }
.dc-wa--mobile { display: none; }

/* Hamburguesa (móvil, izquierda) */
.dc-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: var(--dc-r-md); background: transparent; border: 1px solid var(--dc-hairline); cursor: pointer; flex: none; }
.dc-burger svg { width: 30px; height: 30px; color: var(--dc-ink); }
.dc-brand__mark { display: none; }

/* --- Fila 2: navegación + Cotiza + WhatsApp --- */
.dc-navbar { position: relative; border-top: 1px solid var(--dc-hairline-soft); background: var(--dc-canvas); }
.dc-navbar__inner { max-width: var(--dc-container); margin-inline: auto; padding: 0 var(--dc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--dc-s-md); }
.dc-navbar__cta { display: inline-flex; align-items: center; gap: var(--dc-s-sm); flex: none; }
.dc-nav__list { display: flex; align-items: center; gap: var(--dc-s-xs); list-style: none; margin: 0; padding: 0; }
.dc-nav__item { position: static; }
.dc-nav__link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--dc-charcoal);
  text-decoration: none; padding: 15px 16px; background: transparent; border: 0; cursor: pointer; font-family: var(--dc-font);
  transition: color .15s ease, box-shadow .15s ease; }
.dc-nav__link:hover { color: var(--dc-primary); }
.dc-nav__item--mega.is-open > .dc-nav__link { color: var(--dc-primary); box-shadow: inset 0 -2px 0 var(--dc-primary); }
.dc-nav__link .dc-caret { width: 16px; height: 16px; color: var(--dc-stone); transition: transform .2s ease; }
.dc-nav__item--mega:hover .dc-caret, .dc-nav__item--mega.is-open .dc-caret { transform: rotate(180deg); }

/* Mega-menú (full-width, anclado a .dc-navbar) */
.dc-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--dc-canvas);
  border-top: 1px solid var(--dc-hairline); border-bottom: 1px solid var(--dc-hairline); box-shadow: var(--dc-elev-4);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 55; }
.dc-nav__item--mega:hover .dc-mega, .dc-nav__item--mega:focus-within .dc-mega, .dc-nav__item--mega.is-open .dc-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.dc-mega__grid { max-width: var(--dc-container); margin-inline: auto; padding: var(--dc-s-xxl) var(--dc-gutter);
  display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: var(--dc-s-xxl); }
.dc-mega__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dc-primary); margin: 0 0 4px; }
.dc-mega__sub { font-size: 12.5px; color: var(--dc-muted); margin: 0 0 var(--dc-s-md); }
.dc-mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-mega__link { display: block; text-decoration: none; border-radius: var(--dc-r-md); padding: 9px 10px; margin-left: -10px; color: var(--dc-charcoal); transition: background-color .15s ease, color .15s ease; }
.dc-mega__link:hover { background: var(--dc-surface); color: var(--dc-ink); }
.dc-mega__link b { display: block; font-size: 15px; font-weight: 600; }
.dc-mega__link span { display: block; font-size: 13px; color: var(--dc-steel); margin-top: 1px; }
.dc-mega__all { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--dc-s-sm); font-size: 14px; font-weight: 600; color: var(--dc-ink); text-decoration: none; }
.dc-mega__all:hover { color: var(--dc-primary); }
.dc-mega__all svg { width: 15px; height: 15px; transition: transform .15s ease; }
.dc-mega__all:hover svg { transform: translateX(3px); }
.dc-mega__feature { background: var(--dc-surface); border-radius: var(--dc-r-xl); padding: var(--dc-s-lg); display: flex; flex-direction: column; gap: var(--dc-s-sm); }
.dc-mega__feature img { width: 100%; height: 132px; object-fit: contain; border-radius: var(--dc-r-md); background: var(--dc-canvas); }
.dc-mega__feature-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dc-red); margin: 0; }
.dc-mega__feature-title { font-size: 17px; font-weight: 600; color: var(--dc-ink); margin: 0; }
.dc-mega__feature-text { font-size: 13px; color: var(--dc-steel); margin: 0; }

/* --- Blindaje contra el Global Kit + reset de Elementor ----------------
   `.elementor-kit-NNNN button` (0,1,1) → fondo azul + padding a los <button>.
   `input[type="search"]` del reset (0,1,1) → borde gris dentro del buscador.
   Se re-declara con prefijo `.dc-header`/`.dc-navbar`/`.dc-drawer` (0,2,0). */
.dc-header .dc-search__input, .dc-header .dc-msearch__input {
  border: 0; background: transparent; box-shadow: none; outline: none; height: 100%;
  -webkit-appearance: none; appearance: none;
}
.dc-header .dc-search__btn { background: var(--dc-cta); color: var(--dc-cta-ink); padding: 0 24px; border: 0; border-radius: 0; box-shadow: none; }
.dc-header .dc-search__btn:hover { background: var(--dc-cta-pressed); }
.dc-header .dc-msearch__btn { background: var(--dc-cta); color: var(--dc-cta-ink); border: 0; border-radius: 0; box-shadow: none; }
.dc-navbar .dc-nav__link { background: transparent; color: var(--dc-charcoal); border: 0; padding: 15px 16px; font-size: 15px; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; }
.dc-navbar .dc-nav__link:hover { background: transparent; color: var(--dc-primary); }
.dc-navbar .dc-nav__item--mega.is-open > .dc-nav__link { color: var(--dc-primary); box-shadow: inset 0 -2px 0 var(--dc-primary); }
.dc-header .dc-currency__toggle { background: var(--dc-canvas); color: var(--dc-ink); height: 42px; padding: 0 12px; border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-full); box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; }
.dc-header .dc-currency__toggle:hover { border-color: var(--dc-ink); background: var(--dc-canvas); color: var(--dc-ink); }
.dc-header .dc-currency__opt { background: transparent; color: var(--dc-charcoal); border: 0; padding: 10px 12px; border-radius: var(--dc-r-md); box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; }
.dc-header .dc-currency__opt:hover, .dc-header .dc-currency__opt.is-active { background: var(--dc-surface); color: var(--dc-charcoal); }
.dc-header .dc-account__toggle { background: var(--dc-canvas); color: var(--dc-ink); height: 42px; padding: 0 14px 0 12px; border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-full); box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; }
.dc-header .dc-account__toggle:hover { border-color: var(--dc-ink); background: var(--dc-canvas); color: var(--dc-ink); }
.dc-header .dc-burger { background: transparent; width: 46px; height: 46px; padding: 0; border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-md); box-shadow: none; }
.dc-drawer .dc-drawer__close { background: transparent; width: 44px; height: 44px; padding: 0; border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-md); box-shadow: none; }
.dc-drawer .dc-drawer__cur { background: var(--dc-canvas); color: var(--dc-ink); border: 1px solid var(--dc-hairline); border-radius: var(--dc-r-md); padding: 0 10px; height: 46px; box-shadow: none; text-transform: none; letter-spacing: normal; min-height: 0; font-weight: 600; }
.dc-drawer .dc-drawer__cur.is-active { border-color: var(--dc-ink); background: var(--dc-surface); }
.dc-header a.dc-header__wa { background: #25D366; color: #fff; }
.dc-header a.dc-header__wa:hover { background: #1da851; }

/* --- Blindaje vs color de enlace del Global Kit -------------------------
   `.elementor-kit-NNNN a` (esp. 0,1,1) pisa cualquier selector de UNA sola
   clase sobre un <a> (nuestro CSS carga antes del kit, los empates pierden).
   Re-declaración a (0,2,0)+ para todos los enlaces de header, drawer,
   footer, jump-nav y contenido. Detectado 2026-07-10 (v3.2). */
.dc-header .dc-topbar__link { color: rgba(255,255,255,.82); }
.dc-header .dc-topbar__link:hover { color: #fff; }
.dc-header .dc-btn--cta, .dc-navbar__cta .dc-btn--cta { background: var(--dc-cta); color: var(--dc-cta-ink); }
.dc-header .dc-btn--cta:hover, .dc-navbar__cta .dc-btn--cta:hover { background: var(--dc-cta-pressed); color: var(--dc-cta-ink); }
.dc-header .dc-mega__link { color: var(--dc-charcoal); }
.dc-header .dc-mega__link:hover { background: var(--dc-surface); color: var(--dc-ink); }
.dc-header .dc-mega__link b { color: inherit; }
.dc-header .dc-mega__link span { color: var(--dc-steel); }
.dc-header .dc-mega__all { color: var(--dc-ink); }
.dc-header .dc-mega__all:hover { color: var(--dc-primary); }
.dc-header .dc-account__link { color: var(--dc-charcoal); }
.dc-header .dc-account__link:hover { background: var(--dc-surface); color: var(--dc-ink); }
.dc-drawer .dc-drawer__link { color: var(--dc-ink); }
.dc-drawer .dc-drawer__sublist a { color: var(--dc-slate); }
.dc-drawer .dc-drawer__sublist a:hover { color: var(--dc-primary); }
.dc-drawer .dc-drawer__wa { background: var(--dc-wa); color: #fff; }
.dc-scope .dc-jumpnav__link { color: var(--dc-steel); }
.dc-scope .dc-jumpnav__link:hover { color: var(--dc-ink); }
.dc-scope .dc-jumpnav__link.is-active { background: var(--dc-primary); color: var(--dc-on-primary); border-color: var(--dc-primary); }
.dc-footer .dc-footer__links a { color: rgba(255,255,255,.66); }
.dc-footer .dc-footer__links a:hover { color: #fff; }
.dc-footer .dc-footer__contact a { color: rgba(255,255,255,.72); }
.dc-footer .dc-footer__contact a:hover { color: #fff; }
.dc-footer .dc-footer__legal a { color: rgba(255,255,255,.5); }
.dc-footer .dc-footer__legal a:hover { color: #fff; }
.dc-footer .dc-footer__social a { color: rgba(255,255,255,.78); }
.dc-footer .dc-footer__social a:hover { color: #fff; }
/* Enlaces sueltos dentro del contenido → cobalto del sistema */
.dc-scope p a:not([class]), .dc-scope li a:not([class]), .dc-scope td a:not([class]) { color: var(--dc-primary); }

/* --- Overlay + Drawer móvil --- */
.dc-drawer-overlay { position: fixed; inset: 0; background: rgba(10,10,10,.5); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; z-index: 100100; }
.dc-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.dc-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(390px, 90vw); background: var(--dc-canvas); z-index: 100101; transform: translateX(100%); transition: transform .24s ease; display: flex; flex-direction: column; overflow-y: auto; }
.dc-drawer.is-open { transform: translateX(0); }
.dc-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--dc-s-md) var(--dc-s-lg); border-bottom: 1px solid var(--dc-hairline); position: sticky; top: 0; background: var(--dc-canvas); }
.dc-drawer__head img { height: 40px; width: auto; display: block; }
.dc-drawer__body { padding: var(--dc-s-md) var(--dc-s-lg) var(--dc-s-xl); }
.dc-drawer__curwrap { display: flex; gap: 8px; margin-bottom: var(--dc-s-md); }
.dc-drawer__cur { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dc-drawer__group { border-bottom: 1px solid var(--dc-hairline-soft); }
.dc-drawer__group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; font-size: 16px; font-weight: 600; color: var(--dc-ink); min-height: 44px; }
.dc-drawer__group > summary::-webkit-details-marker { display: none; }
.dc-drawer__group > summary::after { content: ""; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--dc-stone); border-bottom: 2px solid var(--dc-stone); transform: rotate(45deg); transition: transform .2s ease; }
.dc-drawer__group[open] > summary::after { transform: rotate(-135deg); }
.dc-drawer__sublist { list-style: none; margin: 0; padding: 0 0 var(--dc-s-sm); }
.dc-drawer__sublist a { display: block; padding: 11px 2px; font-size: 15px; color: var(--dc-slate); text-decoration: none; min-height: 44px; }
.dc-drawer__sublist a:hover { color: var(--dc-primary); }
.dc-drawer__link { display: block; padding: 15px 2px; font-size: 16px; font-weight: 600; color: var(--dc-ink); text-decoration: none; border-bottom: 1px solid var(--dc-hairline-soft); min-height: 44px; }
.dc-drawer__actions { display: flex; flex-direction: column; gap: var(--dc-s-sm); margin-top: var(--dc-s-xl); }
.dc-drawer__actions .dc-btn { width: 100%; }
.dc-drawer__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: var(--dc-r-btn); background: var(--dc-wa); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.dc-drawer__wa:hover { background: var(--dc-wa-pressed); }
.dc-drawer__wa svg { width: 20px; height: 20px; }

/* Búsqueda móvil */
.dc-msearch { display: none; padding: 0 var(--dc-gutter) 12px; }
.dc-msearch__form { display: flex; align-items: stretch; height: 48px; border: 2px solid var(--dc-ink); border-radius: var(--dc-r-full); overflow: hidden; background: var(--dc-canvas); }
.dc-msearch__input { flex: 1; border: 0; outline: none; padding: 0 16px; font-family: var(--dc-font); font-size: 15px; color: var(--dc-ink); background: transparent; }
.dc-msearch__btn { flex: none; border: 0; background: var(--dc-cta); color: var(--dc-cta-ink); padding: 0 18px; cursor: pointer; }
.dc-msearch__btn svg { width: 19px; height: 19px; }

/* Ocultar header legado del tema / Elementor cuando el dc-header está activo */
html.dc-header-active #site-header, html.dc-header-active .site-header.dynamic-header, html.dc-header-active header.elementor-location-header,
body.dc-has-custom-header #site-header, body.dc-has-custom-header .site-header.dynamic-header, body.dc-has-custom-header header.elementor-location-header { display: none !important; }

/* ========================= 18. HEADER RESPONSIVE ================= */
@media (max-width: 1160px) {
  .dc-search__btn span { display: none; }
  .dc-search__btn { padding: 0 18px; }
  .dc-account__label { display: none; }
  .dc-account__toggle { padding: 0 12px; }
}
@media (max-width: 1024px) {
  .dc-topbar, .dc-navbar, .dc-search { display: none; }
  .dc-burger { display: inline-flex; }
  .dc-wa--mobile { display: inline-flex; }
  .dc-header__main { min-height: 66px; gap: var(--dc-s-sm); }
  .dc-header.is-scrolled .dc-header__main { min-height: 62px; }
  /* Logo compacto (símbolo) centrado, equidistante entre hamburguesa y acciones */
  .dc-brand { margin-inline: auto; }
  .dc-brand__logo { display: none; }
  .dc-brand__mark { display: block; height: 40px; width: auto; }
  .dc-header.is-scrolled .dc-brand__mark { height: 36px; }
  .dc-msearch { display: block; }
  /* Currency + Mi cuenta visibles en móvil (compactos) */
  .dc-header__utils { gap: var(--dc-s-xs); }
  .dc-currency__toggle { height: 40px; padding: 0 8px; gap: 5px; }
  .dc-header .dc-currency__toggle { height: 40px; padding: 0 8px; }
  .dc-account__toggle { height: 40px; width: 40px; padding: 0; justify-content: center; }
  .dc-header .dc-account__toggle { height: 40px; width: 40px; padding: 0; justify-content: center; }
  .dc-currency__menu, .dc-account__menu { right: -8px; }
}
@media (min-width: 1025px) {
  .dc-drawer, .dc-drawer-overlay, .dc-burger, .dc-msearch, .dc-wa--mobile, .dc-brand__mark { display: none !important; }
}
@media (max-width: 768px) {
  :root { --dc-gutter: 20px; }
  .dc-mega__grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .dc-currency__code { display: none; }
}

/* ========================= 19. FOOTER / PIE DE PÁGINA ==============
   Se sirve dentro de la plantilla Elementor footer (id 19221,
   elementor-location-footer) como widget HTML envuelto en .dc-scope.
   Estructura: (A) banda CTA de conversión · (B) cuerpo oscuro con
   columnas de marca/enlaces/contacto · (C) tira de confianza ·
   (D) barra legal. v3: CTA naranja con texto oscuro; rojo --dc-red solo
   como firma (borde superior, eyebrow, dots, iconos de confianza);
   WhatsApp verde es iconografía del canal. Fondo --dc-footer-bg (#16211f).
   ================================================================= */
.dc-footer { font-family: var(--dc-font); background: var(--dc-footer-bg); color: rgba(255,255,255,.72); border-top: 4px solid var(--dc-red); }
.dc-footer *, .dc-footer *::before, .dc-footer *::after { box-sizing: border-box; }
.dc-footer__wrap { max-width: var(--dc-container); margin-inline: auto; padding-inline: var(--dc-gutter); }

/* --- A. Banda CTA de conversión --- */
.dc-footer-cta { background: linear-gradient(180deg, #1b2a27 0%, #16211f 100%); border-bottom: 1px solid rgba(255,255,255,.08); }
.dc-footer-cta__inner {
  max-width: var(--dc-container); margin-inline: auto; padding: var(--dc-s-xxxl) var(--dc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--dc-s-xxl); flex-wrap: wrap;
}
.dc-footer-cta__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-red);
}
.dc-footer-cta__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--dc-red); border-radius: 2px; }
.dc-footer-cta__title { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.5px; color: #fff; line-height: 1.15; }
.dc-footer-cta__text { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.65); max-width: 46ch; }
.dc-footer-cta__actions { display: inline-flex; align-items: center; gap: var(--dc-s-sm); flex-wrap: wrap; }
.dc-footer .dc-fbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--dc-r-btn); font-size: 15px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dc-footer .dc-fbtn i, .dc-footer .dc-fbtn svg { font-size: 17px; width: 18px; height: 18px; }
.dc-footer .dc-fbtn--cta { background: var(--dc-cta); color: var(--dc-cta-ink); }
.dc-footer .dc-fbtn--cta:hover { background: var(--dc-cta-pressed); color: var(--dc-cta-ink); }
.dc-footer .dc-fbtn--wa { background: #25D366; color: #06301b; }
.dc-footer .dc-fbtn--wa:hover { background: #1eb958; }

/* --- B. Cuerpo del footer --- */
.dc-footer__body { padding-block: var(--dc-s-section); }
.dc-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: var(--dc-s-xxl);
}
.dc-footer__brand-logo { height: 34px; width: auto; display: block; margin-bottom: var(--dc-s-md); }
.dc-footer__pitch { margin: 0 0 var(--dc-s-lg); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 34ch; }
.dc-footer__partner {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; margin-bottom: var(--dc-s-lg);
  border-radius: var(--dc-r-full); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px; font-weight: 600; color: #fff;
}
.dc-footer__partner .dc-footer__partner-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc-red); flex: none; }
.dc-footer__social { display: flex; gap: 10px; }
.dc-footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--dc-r-full); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78); text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dc-footer__social a:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }
.dc-footer__col-title {
  margin: 0 0 var(--dc-s-md); font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #fff;
}
.dc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dc-footer__links a { color: rgba(255,255,255,.66); text-decoration: none; font-size: 14px; line-height: 1.4; transition: color .15s ease; }
.dc-footer__links a:hover { color: #fff; }
.dc-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dc-s-md); }
.dc-footer__contact li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.dc-footer__contact a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .15s ease; }
.dc-footer__contact a:hover { color: #fff; }
.dc-footer__ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; margin-top: 1px; border-radius: var(--dc-r-full);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #fff; font-size: 14px;
}
.dc-footer__contact-label { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 2px; }

/* --- C. Tira de confianza --- */
.dc-footer__trust { border-top: 1px solid rgba(255,255,255,.08); }
.dc-footer__trust-inner {
  max-width: var(--dc-container); margin-inline: auto; padding: var(--dc-s-xl) var(--dc-gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dc-s-lg);
}
.dc-footer__trust-item { display: flex; align-items: center; gap: 12px; }
.dc-footer__trust-item i { color: var(--dc-red); font-size: 20px; width: 22px; text-align: center; flex: none; }
.dc-footer__trust-item b { display: block; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.dc-footer__trust-item span { display: block; color: rgba(255,255,255,.55); font-size: 12.5px; line-height: 1.3; }

/* --- D. Barra legal --- */
.dc-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.dc-footer__bottom-inner {
  max-width: var(--dc-container); margin-inline: auto; padding: var(--dc-s-lg) var(--dc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--dc-s-md); flex-wrap: wrap;
}
.dc-footer__copy { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.5); margin: 0; }
.dc-footer__copy b { color: rgba(255,255,255,.75); font-weight: 600; }
.dc-footer__legal { display: inline-flex; align-items: center; gap: var(--dc-s-md); flex-wrap: wrap; }
.dc-footer__legal a { font-size: 12.5px; color: rgba(255,255,255,.5); text-decoration: none; transition: color .15s ease; }
.dc-footer__legal a:hover { color: #fff; }
.dc-footer__legal span { color: rgba(255,255,255,.22); }

/* --- Footer responsive --- */
@media (max-width: 1024px) {
  .dc-footer__grid { grid-template-columns: 1fr 1fr 1fr; row-gap: var(--dc-s-xxl); }
  .dc-footer__brand { grid-column: 1 / -1; }
  .dc-footer__contact-col { grid-column: 1 / -1; }
  .dc-footer__trust-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dc-footer-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--dc-s-lg); }
  .dc-footer-cta__actions { width: 100%; }
  .dc-footer .dc-fbtn { flex: 1 1 auto; }
  .dc-footer__grid { grid-template-columns: 1fr 1fr; }
  .dc-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 480px) {
  .dc-footer__grid { grid-template-columns: 1fr; }
  .dc-footer__trust-inner { grid-template-columns: 1fr; }
  .dc-footer .dc-fbtn { width: 100%; }
}