/* ============================================================================
 * SAI Water — Design System · COPIA VENDORIZADA (no editar tokens a mano)
 * Fuente:   github.com/sai-water/design-system
 * Versión:  tokens v1 — CONGELADA
 * Origen:   commit 1ccbce2 · 2026-08-11
 * Alcance:  única copia; la consumen el PANEL y el PÚBLICO (no duplicar).
 * Drift:    ante cambios en el DS, re-vendorizar desde el repo de origen.
 * Deploy:   la fuente de verdad única (submódulo o paso de build) se define
 *           en docs/DECISIONES-PENDIENTES.md.
 * ============================================================================ */

/* SAI Water — Color tokens
 * Estado: v1 — CONGELADA (decisión 2026-08-03).
 * Rampa azul anclada en el manual oficial (brillante=500, royal=700, navy=950)
 * y aterrizada en los darks reales de ./sitio-web (800=#123683, 900=#0D2147).
 * Acento secundario "aqua" derivado del cian más usado del sitio (#13B8C9).
 * Contraste WCAG 2.1 verificado (texto blanco sobre cada tono).
 */

:root {
  /* --- Escala azul SAI --- */
  --azul-50:  #EDF7FD; /* fondo de página */
  --azul-100: #D6EDFA; /* superficies / hover */
  --azul-200: #A3D7F5; /* bordes / chips */
  --azul-300: #6BBFEE; /* estados disabled */
  --azul-400: #33A7E8; /* hover de acento */
  --azul-500: #0091E2; /* OFICIAL — brillante · primario (fills; AA solo texto grande) */
  --azul-600: #0D6DD6; /* links / texto de acento sobre claro (AA 5.05) */
  --azul-700: #174FCC; /* OFICIAL — royal · CTA (AA 6.94) */
  --azul-800: #123683; /* texto fuerte sobre claro */
  --azul-900: #0D2147; /* fondos oscuros (del sitio) */
  --azul-950: #07152E; /* OFICIAL — navy · base de UI oscura */

  /* --- Acento secundario: aqua (firma de agua) --- */
  --aqua-400: #3DC5D3;
  --aqua-500: #13B8C9; /* acento agua · destellos, iconos, estados sobre navy */
  --aqua-600: #0F879A; /* aqua sobre fondo claro (AA sobre blanco) */

  /* --- Alias semánticos (usar estos en componentes) --- */
  --brand-primary:     var(--azul-500); /* fills, superficies de marca */
  --brand-primary-ink: var(--azul-600); /* texto/links de marca sobre claro (AA) */
  --brand-accent:      var(--azul-700); /* CTA principal */
  --brand-navy:        var(--azul-950); /* neutral funcional de UI (no color de marca) */
  --brand-aqua:        var(--aqua-500); /* acento secundario agua */
}

/* Guía de uso rápida:
 * · Texto/links de marca sobre blanco  -> --brand-primary-ink (azul-600) o azul-700. NO azul-500.
 * · Botón primario / fills             -> --brand-primary (azul-500) con texto blanco.
 * · CTA                                -> --brand-accent (azul-700) con texto blanco.
 * · Fondos oscuros / UI dark           -> azul-900 / azul-950.
 * · Acento agua sobre navy             -> aqua-400/500. Sobre blanco usar aqua-600.
 */
/* SAI Water — Neutral (slate) tokens
 * Estado: v1 — CONGELADA (2026-08-03).
 * Familia slate de 12 pasos con sesgo navy, armonizada con la escala azul.
 * neutral-950 == azul-950 (#07152E), cerrando el círculo con la escala de marca.
 * Contraste WCAG 2.1 AA verificado en todos los pares de texto.
 */

:root {
  /* --- Rampa slate --- */
  --neutral-0:   #FFFFFF; /* blanco puro */
  --neutral-50:  #F2F5F9; /* fondo de página */
  --neutral-100: #EBEFF3; /* superficie 2 / hover */
  --neutral-200: #DADFE4; /* bordes / divisores */
  --neutral-300: #BDC3CB; /* bordes fuertes */
  --neutral-400: #929AA6; /* texto disabled / hint */
  --neutral-500: #6C7585; /* texto muted (AA 4.64 sobre blanco) */
  --neutral-600: #4F5A6C; /* texto secundario (AA 7.0) */
  --neutral-700: #374357; /* iconos / labels */
  --neutral-800: #212E45; /* texto fuerte sobre claro */
  --neutral-900: #121F37; /* texto principal (AAA 16.4) */
  --neutral-950: #07152E; /* navy · == azul-950 */

  /* --- Superficies oscuras elevadas (familia navy) --- */
  --navy-surface:        #0D2147; /* == azul-900 */
  --navy-surface-2:      #14284F;
  --navy-border:         #26385C;
  --navy-border-strong:  #33456A;
  --navy-text-soft:      #B4C0D2;

  /* --- Semánticos: TEMA CLARO (default) --- */
  --bg:            var(--neutral-50);
  --surface:       var(--neutral-0);
  --surface-2:     var(--neutral-100);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text:          var(--neutral-900);
  --text-soft:     var(--neutral-600);
  --text-muted:    var(--neutral-500);
  --text-disabled: var(--neutral-400);
}

/* Tema oscuro por preferencia del SO */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            var(--neutral-950);
    --surface:       var(--navy-surface);
    --surface-2:     var(--navy-surface-2);
    --border:        var(--navy-border);
    --border-strong: var(--navy-border-strong);
    --text:          var(--neutral-100);
    --text-soft:     var(--navy-text-soft);
    --text-muted:    var(--neutral-400);
    --text-disabled: var(--neutral-500);
  }
}

/* Override explícito por atributo — el toggle del usuario gana en ambos sentidos */
:root[data-theme="light"] {
  --bg: var(--neutral-50);   --surface: var(--neutral-0); --surface-2: var(--neutral-100);
  --border: var(--neutral-200); --border-strong: var(--neutral-300);
  --text: var(--neutral-900); --text-soft: var(--neutral-600);
  --text-muted: var(--neutral-500); --text-disabled: var(--neutral-400);
}
:root[data-theme="dark"] {
  --bg: var(--neutral-950); --surface: var(--navy-surface); --surface-2: var(--navy-surface-2);
  --border: var(--navy-border); --border-strong: var(--navy-border-strong);
  --text: var(--neutral-100); --text-soft: var(--navy-text-soft);
  --text-muted: var(--neutral-400); --text-disabled: var(--neutral-500);
}
/* SAI Water — Spacing & radii tokens
 * Estado: v1 — CONGELADA (2026-08-03).
 * Escala de espaciado base 4px + radios (alineados con dali) + ritmo de layout.
 */

:root {
  /* --- Escala de espaciado (base 4px) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* base · padding estándar */
  --space-5:  20px;
  --space-6:  24px;   /* card padding · gap por defecto */
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;   /* sección (mobile) */
  --space-24: 96px;
  --space-32: 128px;  /* sección (desktop grande) */

  /* --- Radios (alineados con dali) --- */
  --radius-xs:   4px;    /* tags, inputs chicos */
  --radius-sm:   8px;    /* botones, inputs */
  --radius-md:   16px;   /* tarjetas */
  --radius-lg:   24px;   /* paneles, modales */
  --radius-full: 9999px; /* pills, avatares */

  /* --- Ritmo de layout --- */
  --section-y:     clamp(82px, 9vw, 110px); /* padding vertical de sección */
  --container-max: 1200px;                  /* ancho máximo de contenido */
  --gutter:        clamp(20px, 4vw, 40px);  /* margen lateral del contenedor */
  --gap:           var(--space-6);          /* gap por defecto de grids/flex */
}
/* SAI Water — Typography tokens
 * Estado: v1 — CONGELADA (2026-08-03). Fuente oficial: QUESTRIAL.
 * Questrial es de peso ÚNICO (400): no trae bold real.
 * Regla de marca: los TÍTULOS van en bold sintético (700) y en color NAVY sobre
 * fondos claros, cuando aplica — para darle presencia a una geométrica regular.
 * Producción: self-hostear el woff2 (recomendado) o Google Fonts.
 */

/* Ejemplo de self-hosting (reemplazar la ruta por el asset real):
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/questrial.woff2') format('woff2');
}
*/

:root {
  --font-primary: 'Questrial', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-primary);

  /* Pesos — Questrial single-weight; títulos en bold sintético */
  --weight-body:    400;
  --weight-heading: 700;

  /* Color de título: navy sobre claro (regla de marca). En dark, usar texto claro. */
  --heading-color: var(--brand-navy, #07152E);

  /* Escala fluida */
  --fs-h1:    clamp(40px, 5.2vw, 68px);
  --fs-h2:    clamp(28px, 3.2vw, 44px);
  --fs-h3:    clamp(20px, 2vw, 28px);
  --fs-body:  clamp(15px, 1.1vw, 18px);
  --fs-small: 13px;

  --leading-heading: 1.12;
  --leading-body:    1.6;
  --tracking-heading: -0.01em;
  --tracking-caps:    0.09em; /* eyebrows / labels en mayúsculas */
  --measure: 65ch;
}

/* Regla base de títulos:
 *   font-family: var(--font-heading);
 *   font-weight: var(--weight-heading);   (700, sintético)
 *   color: var(--heading-color);          (navy sobre claro; texto claro sobre navy)
 *   line-height: var(--leading-heading);
 *   letter-spacing: var(--tracking-heading);
 */
/* SAI Water — Motion & elevation tokens
 * Estado: v1 (2026-08-11). ADITIVO — no altera los tokens congelados.
 * Define el "piso" de motion (duraciones, curvas, distancias) y las elevaciones
 * que el design system usa en componentes. La firma de motion es el AGUA:
 * curvas suaves tipo ease-out, entradas cortas, nada brusco ni rebotes de juguete.
 */

:root {
  /* --- Duraciones --- */
  --dur-1: 120ms;   /* feedback inmediato: press, focus, switch */
  --dur-2: 200ms;   /* hover de controles, cambios de color/borde */
  --dur-3: 320ms;   /* reveals de tarjetas, acordeones, tabs */
  --dur-4: 500ms;   /* entrada de secciones, hero */
  --dur-5: 900ms;   /* count-up de métricas */

  /* --- Curvas (easing) --- */
  --ease-standard: cubic-bezier(0.20, 0.60, 0.20, 1.00); /* salida suave "agua" (default) */
  --ease-emphasized: cubic-bezier(0.16, 1.00, 0.30, 1.00); /* expo-out para reveals con presencia */
  --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00);   /* transiciones simétricas */
  --ease-exit: cubic-bezier(0.40, 0.00, 1.00, 1.00);     /* salidas (elemento que se va) */

  /* --- Distancias de reveal --- */
  --reveal-y: 16px;      /* desplazamiento por defecto de un reveal */
  --reveal-y-lg: 28px;   /* reveal de sección / hero */
  --stagger-step: 70ms;  /* retardo entre hijos de un grupo escalonado */

  /* --- Lift / hover --- */
  --lift-y: -4px;        /* translateY de una card interactiva en hover */
  --lift-y-lg: -6px;

  /* --- Elevaciones (sombras) — sesgo navy, no gris neutro --- */
  --shadow-xs: 0 1px 2px rgba(7, 21, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(7, 21, 46, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 21, 46, 0.10);
  --shadow-lg: 0 18px 48px rgba(7, 21, 46, 0.14);
  --shadow-focus: 0 0 0 3px rgba(0, 145, 226, 0.35); /* anillo de foco (azul-500 @35%) */

  /* --- Sombra de lift al hacer hover (más presencia + tinte de marca) --- */
  --shadow-lift: 0 16px 40px rgba(7, 21, 46, 0.16);
}

/* En dark, las sombras pesan menos (el contraste lo da el borde) */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.55);
    --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* Piso de accesibilidad del motion: si el usuario pide menos movimiento,
 * anulamos transform/animation en todo el sistema. Los reveals se muestran
 * en su estado final (ver components.css / motion.js). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================================
 * SAI Water — Librería de componentes tokenizados  ·  v1 (2026-08-11)
 * ----------------------------------------------------------------------------
 * Requiere, en este orden, los tokens congelados + motion:
 *   tokens/colors.css · tokens/neutrals.css · tokens/spacing.css
 *   tokens/typography.css · tokens/motion.css
 * TODO valor sale de un token. Cero hex/px sueltos fuera de esta cabecera.
 * Sirve para interfaces internas (app, dashboards) y para Cotizaciones HTML.
 * Accesibilidad: contraste AA, :focus-visible explícito, prefers-reduced-motion.
 * ==========================================================================*/

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

.ds-root, body.ds-root {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Foco visible unificado (piso no negociable) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ---------- Tipografía ---------- */
.h1, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--heading-color);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-4);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: 0; }
.lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--text-soft); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--space-4); }
.text-muted { color: var(--text-muted); }
.measure { max-width: var(--measure); }

/* Sobre superficies navy, los títulos usan texto claro (regla de marca) */
.on-navy .h1, .on-navy .h2, .on-navy .h3 { color: var(--neutral-0); }
.on-navy { color: var(--navy-text-soft); }

/* Eyebrow: píldora en mayúsculas con dot de estado (patrón SAI) */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand-primary-ink);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--brand-aqua); box-shadow: 0 0 0 3px rgba(19, 184, 201, 0.20);
}
.on-navy .eyebrow { color: var(--brand-aqua); background: rgba(255,255,255,0.04); border-color: var(--navy-border); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--space-6); }
.stack-sm > * + * { margin-top: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--space-8); }

/* ============================================================================
 * BOTONES
 * ==========================================================================*/
.btn {
  --_bg: var(--brand-primary);
  --_fg: var(--neutral-0);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-primary); font-size: var(--fs-body); font-weight: var(--weight-heading);
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: var(--space-3) var(--space-5); min-height: 44px; /* target táctil AA */
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd); border-radius: var(--radius-sm);
  transition: transform var(--dur-1) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard);
}
.btn:hover { filter: brightness(0.96); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); filter: brightness(0.92); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; filter: none; }
.btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; animation: ds-spin 0.6s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

.btn--primary { --_bg: var(--brand-primary); --_fg: #fff; }
.btn--accent  { --_bg: var(--brand-accent);  --_fg: #fff; }   /* CTA · azul royal */
.btn--aqua    { --_bg: var(--brand-aqua);     --_fg: var(--brand-navy); }
.btn--secondary { --_bg: transparent; --_fg: var(--brand-primary-ink); --_bd: var(--border-strong); }
.btn--secondary:hover { --_bg: var(--surface-2); }
.btn--ghost { --_bg: transparent; --_fg: var(--text); --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--surface-2); box-shadow: none; }
.on-navy .btn--secondary { --_fg: #fff; --_bd: var(--navy-border-strong); }
.on-navy .btn--secondary:hover { --_bg: rgba(255,255,255,0.06); }
.btn--sm { padding: var(--space-2) var(--space-4); min-height: 36px; font-size: var(--fs-small); }
.btn--lg { padding: var(--space-4) var(--space-8); min-height: 52px; font-size: clamp(16px,1.2vw,19px); }
.btn--block { display: flex; width: 100%; }

/* ---------- Enlaces ---------- */
.link {
  color: var(--brand-primary-ink); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-standard), color var(--dur-2);
}
.link:hover { border-bottom-color: currentColor; }
.link--muted { color: var(--text-soft); }
.on-navy .link { color: var(--brand-aqua); }

/* ============================================================================
 * FORMULARIOS  (input, select, textarea, checkbox, radio)
 * ==========================================================================*/
.field { display: block; margin-bottom: var(--space-4); }
.label { display: block; font-size: var(--fs-small); font-weight: var(--weight-heading);
  color: var(--text-soft); margin-bottom: var(--space-2); letter-spacing: 0.01em; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-primary); font-size: var(--fs-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); min-height: 44px;
  transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand-primary); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-body); }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230D6DD6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10);
}
.field__hint { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-2); }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--c-danger, #C0392B); }
.field--error .field__hint { color: var(--c-danger, #C0392B); }

.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--fs-body); }
.checkbox input, .radio input { width: 20px; height: 20px; accent-color: var(--brand-primary); }

/* ============================================================================
 * BADGES / CHIPS
 * ==========================================================================*/
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-small); font-weight: var(--weight-heading); line-height: 1;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
}
.badge--primary { background: var(--azul-100); color: var(--azul-800); border-color: transparent; }
.badge--aqua    { background: rgba(19,184,201,0.14); color: #0A6B7A; border-color: transparent; } /* aqua oscuro: AA 5.45 sobre el tinte */
.badge--success { background: rgba(31,157,107,0.14); color: #1a7d55; border-color: transparent; }
.badge--warn    { background: rgba(224,142,11,0.16); color: #9a6206; border-color: transparent; }
.badge--danger  { background: rgba(192,57,43,0.12); color: #a5322a; border-color: transparent; }
.badge--dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ============================================================================
 * ALERTS
 * ==========================================================================*/
.alert {
  display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  border-left: 3px solid var(--brand-primary);
}
.alert__title { font-weight: var(--weight-heading); color: var(--heading-color); margin: 0 0 var(--space-1); }
.alert__body { margin: 0; color: var(--text-soft); font-size: var(--fs-body); }
.alert--info    { border-left-color: var(--brand-primary); background: var(--azul-50); }
.alert--success { border-left-color: #1f9d6b; background: rgba(31,157,107,0.07); }
.alert--warn    { border-left-color: #e08e0b; background: rgba(224,142,11,0.08); }
.alert--danger  { border-left-color: #C0392B; background: rgba(192,57,43,0.06); }

/* ============================================================================
 * CARDS
 * ==========================================================================*/
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.card__media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: var(--space-6); }
.card__title { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--heading-color);
  font-size: var(--fs-h3); line-height: var(--leading-heading); margin: 0 0 var(--space-2); }
.card__text { color: var(--text-soft); margin: 0; }
.card--interactive { transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) var(--ease-standard), border-color var(--dur-3); cursor: pointer; }
.card--interactive:hover { transform: translateY(var(--lift-y)); box-shadow: var(--shadow-lift); border-color: var(--azul-200); }
.card--navy { background: var(--navy-surface); border-color: var(--navy-border); color: var(--navy-text-soft); }
.card--navy .card__title { color: #fff; }
.card--pad-lg .card__body { padding: var(--space-8); }

/* ============================================================================
 * TABLAS
 * ==========================================================================*/
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.table thead th {
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); background: var(--surface-2); font-weight: var(--weight-heading); white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color var(--dur-2) var(--ease-standard); }
.table tbody tr:hover { background: var(--azul-50); }
.table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tfoot td { padding: var(--space-3) var(--space-4); font-weight: var(--weight-heading); color: var(--heading-color); background: var(--surface-2); }

/* ============================================================================
 * NAVEGACIÓN (topbar + glass)
 * ==========================================================================*/
.nav { position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-4) var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-standard), background-color var(--dur-3), padding var(--dur-3);
}
.nav.is-scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); padding-block: var(--space-3); box-shadow: var(--shadow-xs); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.nav__brand img { height: 30px; width: auto; display: block; }
.nav__links { display: flex; gap: var(--space-2); align-items: center; }
.nav__link { color: var(--text-soft); text-decoration: none; font-weight: var(--weight-heading);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  transition: color var(--dur-2), background-color var(--dur-2); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--brand-primary-ink); background: var(--surface-2); }
/* Nav navy: SÓLIDA siempre (no translúcida) para que los títulos claros no se
 * pierdan al hacer scroll sobre secciones claras. Gana en scroll por especificidad. */
.nav--navy { background: var(--brand-navy); border-bottom-color: var(--navy-border); }
.nav--navy.is-scrolled { background: var(--brand-navy); border-bottom-color: var(--navy-border-strong); box-shadow: var(--shadow-md); }
.nav--navy .nav__link { color: var(--navy-text-soft); }
.nav--navy .nav__link:hover, .nav--navy .nav__link[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.06); }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ============================================================================
 * TABS
 * ==========================================================================*/
.tabs__list { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-primary); font-size: var(--fs-body); font-weight: var(--weight-heading);
  color: var(--text-soft); padding: var(--space-3) var(--space-4); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--brand-primary-ink); border-bottom-color: var(--brand-primary); }
.tabs__panel { padding-top: var(--space-6); }
.tabs__panel[hidden] { display: none; }
/* entrada suave del panel activo */
.tabs__panel:not([hidden]) { animation: ds-fade-in var(--dur-3) var(--ease-standard); }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================================
 * ACORDEÓN  (progressive disclosure)
 * ==========================================================================*/
.accordion { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.accordion__item + .accordion__item { border-top: 1px solid var(--border); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  appearance: none; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-primary); font-size: var(--fs-body); font-weight: var(--weight-heading); color: var(--heading-color);
  padding: var(--space-4) var(--space-5); transition: background-color var(--dur-2);
}
.accordion__trigger:hover { background: var(--surface-2); }
.accordion__icon { flex: none; width: 20px; height: 20px; position: relative; transition: transform var(--dur-3) var(--ease-emphasized); }
.accordion__icon::before, .accordion__icon::after { content:""; position:absolute; inset:0; margin:auto; background: var(--brand-primary); border-radius: 2px; }
.accordion__icon::before { width: 12px; height: 2px; }
.accordion__icon::after { width: 2px; height: 12px; transition: opacity var(--dur-2); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { opacity: 0; }
.accordion__panel { overflow: hidden; height: 0; transition: height var(--dur-3) var(--ease-emphasized); }
.accordion__panel-inner { padding: 0 var(--space-5) var(--space-5); color: var(--text-soft); }

/* ============================================================================
 * MÉTRICAS / STATS BAND
 * ==========================================================================*/
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6); }
.stat { text-align: left; }
.stat__value { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--heading-color);
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat__value .unit { color: var(--brand-aqua); }
.stat__label { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.on-navy .stat__value { color: #fff; }
.on-navy .stat__label { color: var(--navy-text-soft); }

/* ============================================================================
 * BLOQUES DE COTIZACIÓN  (para Cotizaciones HTML)
 * ==========================================================================*/
.quote { display: grid; gap: var(--space-6); }

/* -- Resumen ejecutivo (key-facts) -- */
.quote-summary { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.quote-summary__head { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: flex-start;
  padding: var(--space-6); background: var(--navy-surface); color: var(--navy-text-soft); }
.quote-summary__head .h3 { color: #fff; margin: 0; }
.quote-summary__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-5); padding: var(--space-6); }
.fact__k { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }
.fact__v { font-weight: var(--weight-heading); color: var(--heading-color); font-size: clamp(16px,1.4vw,20px); margin-top: var(--space-1); }

/* -- Bloque de inversión (precio + tabla + totales) -- */
.investment { border: 1px solid var(--azul-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.investment__head { padding: var(--space-6); background: linear-gradient(120deg, var(--azul-950), var(--azul-800)); color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.investment__price { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: clamp(28px,4vw,44px); line-height: 1; letter-spacing: -0.02em; }
.investment__price small { font-size: 0.5em; color: var(--brand-aqua); font-weight: var(--weight-heading); letter-spacing: var(--tracking-caps); text-transform: uppercase; display:block; margin-top: var(--space-2); }
.investment__note { padding: var(--space-3) var(--space-6); font-size: var(--fs-small); color: var(--text-muted); background: var(--surface-2); border-top: 1px solid var(--border); }

/* -- Alcance / Exclusiones / Condiciones: listas de check / cross -- */
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.spec-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-soft); }
.spec-list li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); background-repeat: no-repeat; background-position: center; }
.spec-list--in li::before  { background-color: rgba(31,157,107,0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%231a7d55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
.spec-list--out li::before { background-color: rgba(192,57,43,0.10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23a5322a' stroke-width='2' stroke-linecap='round' d='M4 4l6 6M10 4l-6 6'/%3E%3C/svg%3E"); }
.spec-list--terms li::before { background-color: var(--azul-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%230D6DD6' stroke-width='1.6'/%3E%3Cpath stroke='%230D6DD6' stroke-width='1.6' stroke-linecap='round' d='M7 6.2v3.2M7 4.4v.02'/%3E%3C/svg%3E"); }
.spec-list strong { color: var(--text); font-weight: var(--weight-heading); }

/* -- Bloque técnico expandible: reutiliza .accordion, con acento aqua -- */
.tech .accordion__icon::before, .tech .accordion__icon::after { background: var(--aqua-600); }

/* -- Estado de aprobación (feedback + estados) -- */
.approval { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-heading);
  font-size: var(--fs-small); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
  transition: background-color var(--dur-3) var(--ease-standard), color var(--dur-3); }
.approval__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); transition: background-color var(--dur-3); }
.approval.is-pending  { color: #9a6206; background: rgba(224,142,11,0.12); border-color: transparent; }
.approval.is-pending .approval__dot { background: #e08e0b; }
.approval.is-approved { color: #1a7d55; background: rgba(31,157,107,0.14); border-color: transparent; }
.approval.is-approved .approval__dot { background: #1f9d6b; }

/* -- Marca "EJEMPLO" para datos no reales -- */
.sample-tag { position: relative; }
.sample-flag { display:inline-flex; align-items:center; gap: var(--space-1); font-size: 11px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; font-weight: var(--weight-heading); color: #9a6206; background: rgba(224,142,11,0.14);
  padding: 2px var(--space-2); border-radius: var(--radius-xs); }

/* ============================================================================
 * UTILIDADES DE MEDIA / FONDOS  (dirección de arte)
 * ==========================================================================*/
.media-frame { border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--navy-surface); }
.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Velo navy para texto sobre foto (legibilidad AA) */
.media-scrim::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,21,46,0.15) 0%, rgba(7,21,46,0.78) 100%); }
.media-scrim > .scrim-content { position: relative; z-index: 1; }
/* Superficie navy con textura sutil de "ondas" (firma de agua, no decorativa) */
.surface-navy { background:
    radial-gradient(1200px 400px at 80% -10%, rgba(19,184,201,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(13,109,214,0.12), transparent 55%),
    var(--brand-navy);
  color: var(--navy-text-soft); }
.aqua-rule { height: 3px; width: 48px; border: 0; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-aqua), var(--brand-primary)); margin: 0 0 var(--space-4); }