/* ==========================================================================
   Helios by Congenia — THEME
   Única fuente de verdad de color, tipografía, espaciado y motion.
   --------------------------------------------------------------------------
   Los 5 colores y las 2 familias tipográficas de este archivo están tomados
   textualmente de docs/Manual de marca final Helios.pdf:
     · Paleta cromática (pág. "Paleta cromática", Propuesta 2)
     · "Tipografía para textos: Poppins" / "Tipografía para títulos: Oswald"
   No agregar colores fuera de esta familia: el manual lista "no usar colores
   que no son de la marca" como uso incorrecto explícito.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Paleta */
  /* Azul Petróleo — color base y eje del sistema (RGB 21/52/64) */
  --c-petroleo: #153440;
  /* Gris Azulado — fondos secundarios, bloques alternos, hover (54/79/89) */
  --c-gris-azulado: #364F59;
  /* Gris Acero Frío — íconos, bordes, elementos de soporte (112/132/140) */
  --c-gris-acero: #70848C;
  /* Gris Claro — fondos alternos, separadores, placeholders (180/188/191) */
  --c-gris-claro: #B4BCBF;
  /* Gris Casi Puro — fondo base de secciones claras (242/242/242) */
  --c-gris-casi-puro: #F2F2F2;
  /* Blanco puro — tarjetas y máxima legibilidad sobre azul petróleo */
  --c-blanco: #FFFFFF;

  /* ------------------------------------------------- Roles semánticos
     REGLAS DE CONTRASTE VERIFICADAS (WCAG 2.1, calculadas sobre esta paleta).
     Respetarlas no es opcional: el manual lista "no usar colores con poco
     contraste" como uso incorrecto.

       Blanco s/ petróleo .............. 13.15:1  AAA
       #F2F2F2 s/ petróleo ............. 11.75:1  AAA
       #153440 s/ blanco ............... 13.15:1  AAA
       #364F59 s/ blanco ...............  8.68:1  AAA
       #364F59 s/ #F2F2F2 ..............  7.75:1  AAA
       #B4BCBF s/ petróleo .............  6.82:1  AA
       #70848C s/ blanco ...............  3.91:1  ⚠ solo texto ≥24px o íconos
       #70848C s/ petróleo .............  3.36:1  ⚠ solo texto ≥24px o íconos
       #B4BCBF s/ blanco ...............  1.93:1  ✗ NUNCA como texto

     Por eso: --c-gris-acero es SOLO para íconos, bordes y trazos.
              --c-gris-claro es SOLO texto sobre fondo oscuro, o superficie.
  */
  --text-strong-light: var(--c-petroleo);        /* títulos sobre claro */
  --text-body-light: var(--c-gris-azulado);      /* cuerpo sobre claro */
  --text-strong-dark: var(--c-blanco);           /* títulos sobre petróleo */
  --text-body-dark: rgba(242, 242, 242, 0.90);   /* cuerpo sobre petróleo */
  --text-muted-dark: var(--c-gris-claro);        /* apoyo sobre petróleo */
  --stroke-icon: var(--c-gris-acero);            /* íconos y trazos */

  --surface-base: var(--c-blanco);
  --surface-alt: var(--c-gris-casi-puro);
  --surface-dark: var(--c-petroleo);
  --surface-dark-alt: var(--c-gris-azulado);
  --surface-card: var(--c-blanco);

  --border-subtle: rgba(21, 52, 64, 0.08);
  --border-subtle-dark: rgba(242, 242, 242, 0.14);

  /* Sombras suaves y difusas — el manual descarta la sombra dura */
  --shadow-card: 0 2px 12px rgba(21, 52, 64, 0.06), 0 8px 32px rgba(21, 52, 64, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(21, 52, 64, 0.10), 0 12px 40px rgba(21, 52, 64, 0.12);
  --shadow-cta: 0 4px 16px rgba(21, 52, 64, 0.25);
  --shadow-cta-hover: 0 6px 20px rgba(21, 52, 64, 0.30);

  /* ------------------------------------------------------------ Tipografía */
  --font-heading: "Oswald", "Arial Narrow", sans-serif;  /* títulos */
  --font-body: "Poppins", -apple-system, "Segoe UI", sans-serif;  /* textos */

  /* Pesos según el manual: Oswald Medium/Bold · Poppins Light→Black */
  --fw-title: 500;
  --fw-title-strong: 700;
  --fw-body-light: 300;
  --fw-body: 400;
  --fw-body-medium: 500;
  --fw-body-strong: 600;

  /* Escala fluida. Tracking neutro a -0.02em máximo (nunca -0.05em) */
  --fs-h1: clamp(2.25rem, 4.5vw + 0.9rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.4vw + 0.9rem, 2.6rem);
  --fs-h3: clamp(1.05rem, 0.5vw + 0.9rem, 1.2rem);
  --fs-lead: clamp(1.02rem, 0.7vw + 0.85rem, 1.2rem);
  --fs-body: clamp(0.95rem, 0.3vw + 0.88rem, 1.03rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  --lh-title: 1.1;
  --lh-body: 1.65;
  --ls-title: -0.015em;
  --ls-eyebrow: 0.08em;

  /* --------------------------------------------------------------- Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: 24px;
  --gutter-lg: 40px;
  --header-h: 76px;
  --section-py: clamp(64px, 8vw, 112px);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* --------------------------------------------------------------- Motion
     Contenidas, no espectaculares: transiciones breves, sin resortes. */
  --t-fast: 0.18s ease-out;
  --t-base: 0.3s ease-out;
  --reveal-y: 14px;

  /* -------------------------------------------------------- Marca externa
     Verde WhatsApp: NO es color de marca Helios. Se usa exclusivamente en la
     burbuja flotante porque es una convención de plataforma — pintarla de
     azul petróleo haría que el usuario no la reconozca como WhatsApp. El
     header del panel sí va en paleta Helios. */
  --c-whatsapp: #25D366;
}

/* Textura de líneas topográficas del manual: único recurso de "vida" de
   fondo permitido, a opacidad muy baja (2–4%). Nunca protagonista. */
.topo-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    repeating-radial-gradient(circle at 18% 28%, transparent 0 46px, currentColor 46px 47px, transparent 47px 94px),
    repeating-radial-gradient(circle at 82% 74%, transparent 0 58px, currentColor 58px 59px, transparent 59px 118px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --reveal-y: 0px;
  }
}