/* ============================================================
   VeneConnect · Tokens de diseño
   ------------------------------------------------------------
   Extraídos del home (index.html), que es la referencia visual
   del sitio. Toda página nueva debería empezar importando esto
   en vez de inventar colores o tamaños.

   Uso:
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="design-tokens.css">

   Referencia visual: /estilo
   ============================================================ */

:root {
  /* ── Tipografía ──────────────────────────────────────────
     Tres familias con un papel cada una. No se mezclan a gusto:
     Space Grotesk titula, Instrument Sans sostiene el texto,
     Instrument Serif solo aparece en cursiva para acentuar. */
  --vc-font-display: 'Space Grotesk', sans-serif;
  --vc-font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --vc-font-accent:  'Instrument Serif', Georgia, serif;

  /* ── Color: superficies ──────────────────────────────── */
  --vc-bg:            #F7F4EE;   /* fondo de página */
  --vc-surface:       #FFFDFA;   /* tarjetas. Blanco cálido, nunca #fff */
  --vc-surface-warm:  #FFF8EC;   /* inicio del degradado ámbar */
  --vc-surface-warm-2:#FDF1DE;   /* fin del degradado ámbar */

  /* ── Color: texto ────────────────────────────────────── */
  --vc-text:      #17191D;   /* titulares y texto fuerte */
  --vc-text-2:    #55575D;   /* cuerpo y descripciones */
  --vc-text-3:    #8A867E;   /* etiquetas, metadatos, pie */
  --vc-text-4:    #A8A49B;   /* texto de apoyo, flechas */
  --vc-text-warm: #3A2E1C;   /* texto sobre superficie ámbar */
  --vc-text-warm-2:#5C503C;  /* cuerpo sobre superficie ámbar */

  /* ── Color: líneas ───────────────────────────────────── */
  --vc-line:       #E2DCD1;  /* divisores entre secciones */
  --vc-line-card:  #E7E1D6;  /* borde de tarjeta */
  --vc-line-soft:  #D8D2C7;  /* bordes decorativos */

  /* ── Color: acentos ──────────────────────────────────── */
  --vc-accent:        #E05B27;  /* naranja de marca */
  --vc-accent-strong: #f5631e;  /* botones */
  --vc-accent-hover:  #d9550f;
  --vc-accent-ink:    #C24C1D;  /* naranja sobre fondo claro, legible */
  --vc-accent-bg:     rgba(224,91,39,0.08);
  --vc-accent-line:   rgba(224,91,39,0.22);

  --vc-amber:      #A16207;  /* segundo acento: terremoto, alertas */
  --vc-amber-line: rgba(161,98,7,0.18);

  /* ── Radios ──────────────────────────────────────────── */
  --vc-radius-card:  24px;   /* tarjetas grandes (20px en móvil) */
  --vc-radius-soft:  12px;   /* iconos, elementos medianos */
  --vc-radius-pill:  999px;  /* botones, chips, eyebrows */

  /* ── Sombras ─────────────────────────────────────────── */
  --vc-shadow-cta: 0 10px 26px rgba(245,99,30,0.30);

  /* ── Layout ──────────────────────────────────────────── */
  --vc-maxw: 1320px;
  --vc-pad:  48px;   /* margen lateral; baja en pantallas angostas */
}

@media (max-width:1180px){ :root{ --vc-pad:36px } }
@media (max-width:860px) { :root{ --vc-pad:26px } }
@media (max-width:560px) { :root{ --vc-pad:18px } }

/* ============================================================
   Escala tipográfica
   Los titulares son fluidos: crecen con la ventana entre un
   mínimo y un máximo, así no hacen falta saltos por breakpoint.
   ============================================================ */

.vc-h1 {
  font-family: var(--vc-font-display);
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--vc-text);
}
.vc-h2 {
  font-family: var(--vc-font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--vc-text);
}
.vc-h3 {
  font-family: var(--vc-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--vc-text);
}
/* La cursiva serif dentro de un titular: una por titular, sobre la
   palabra que carga el significado. Es la firma visual del sitio. */
.vc-h1 em, .vc-h2 em, .vc-h3 em {
  font-family: var(--vc-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--vc-accent);
  letter-spacing: -0.01em;
}

.vc-lede  { font-size:17px;   line-height:1.68; color:var(--vc-text-2); max-width:46ch; text-wrap:pretty }
.vc-body  { font-size:15.5px; line-height:1.65; color:var(--vc-text-2); text-wrap:pretty }
.vc-quote { font-family:var(--vc-font-accent); font-size:20px; line-height:1.55; color:#24262B; text-wrap:pretty }
.vc-label { font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--vc-text-3) }
.vc-micro { font-size:13.5px; color:var(--vc-text-3) }

/* ============================================================
   Componentes
   ============================================================ */

/* Eyebrow: la píldora que rotula una sección */
.vc-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  background: var(--vc-accent-bg);
  border: 1px solid var(--vc-accent-line);
  color: var(--vc-accent-ink);
  border-radius: var(--vc-radius-pill);
  padding: 6px 15px;
  font-family: var(--vc-font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}
.vc-eyebrow .d {
  width:6px; height:6px; border-radius:50%;
  background: var(--vc-accent);
  animation: vcLivePulse 1.6s infinite;
}

/* Botón principal */
.vc-cta {
  display:inline-flex; align-items:center; gap:10px;
  background: var(--vc-accent-strong); color:#fff;
  padding: 15px 28px;
  border-radius: var(--vc-radius-pill);
  font-family: var(--vc-font-display);
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  box-shadow: var(--vc-shadow-cta);
  transition: background .15s, transform .15s;
}
.vc-cta:hover { background: var(--vc-accent-hover); transform: translateY(-1px) }

/* Botón secundario, sobre fondo oscuro */
.vc-cta-dark {
  display:inline-flex; align-items:center; gap:9px;
  background: var(--vc-text); color: var(--vc-surface);
  padding: 12px 22px;
  border-radius: var(--vc-radius-pill);
  font-family: var(--vc-font-display);
  font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.vc-cta-dark:hover { background:#2C2F35; transform: translateY(-1px) }

/* Tarjeta */
.vc-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-line-card);
  border-radius: var(--vc-radius-card);
  padding: 44px 44px 40px;
}
@media (max-width:860px){ .vc-card{ padding:32px 26px 30px; border-radius:20px } }

/* Tarjeta ámbar: emergencias y avisos */
.vc-card-warm {
  background: linear-gradient(160deg, var(--vc-surface-warm) 0%, var(--vc-surface-warm-2) 100%);
  border: 1px solid var(--vc-amber-line);
  border-radius: var(--vc-radius-card);
  color: var(--vc-text-warm);
  padding: 44px 40px 40px;
  transition: border-color .25s ease;
}
.vc-card-warm:hover { border-color: var(--vc-amber) }

/* Chip con inicial */
.vc-chip {
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--vc-line-card);
  border-radius: var(--vc-radius-pill);
  padding: 8px 18px 8px 10px;
  text-decoration:none; color:inherit;
  transition: border-color .2s ease;
}
.vc-chip:hover { border-color: var(--vc-accent) }
.vc-chip .ini {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--vc-font-display); font-weight:600; font-size:13.5px;
}

/* Cifra destacada */
.vc-stat .num {
  font-family: var(--vc-font-display);
  font-size:42px; font-weight:700; letter-spacing:-0.035em; line-height:1;
  color: var(--vc-text);
}
.vc-stat .lab { font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--vc-text-3) }

/* ============================================================
   Movimiento
   Dos animaciones, ambas discretas. El sitio no rebota ni gira.
   ============================================================ */
@keyframes vcLivePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes vcFloatUp   { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.vc-enter { animation: vcFloatUp .7s ease both }

/* Washes: manchas de color muy suaves detrás del contenido.
   Van en position:absolute dentro de un contenedor con overflow:hidden. */
.vc-wash   { position:absolute; border-radius:50%; pointer-events:none; z-index:0 }
.vc-wash-1 { background: radial-gradient(circle, rgba(224,91,39,0.10) 0%, rgba(224,91,39,0) 62%) }
.vc-wash-2 { background: radial-gradient(circle, rgba(161,98,7,0.07) 0%, rgba(161,98,7,0) 65%) }

/* ============================================================
   Capa de adopción
   ------------------------------------------------------------
   Las páginas de mapas heredan su look de style.css, que está
   escrito contra las variables --bg / --surface / --text / --sans.
   En vez de reescribir esas reglas, aquí se reapuntan esas
   variables a los tokens de arriba.

   Se activa por página:  <body data-theme="light" class="vc-ds">

   El home NO lleva la clase: ya define su propia paleta inline y
   se queda exactamente como está.
   ============================================================ */

body.vc-ds[data-theme="light"] {
  /* superficies */
  --bg:        var(--vc-bg);
  --bg-2:      #F2EEE6;
  --surface:   var(--vc-surface);
  --surface-2: #F5F1E9;
  --elev:      var(--vc-surface);

  /* líneas */
  --line:   var(--vc-line-card);
  --line-2: #EFEAE0;

  /* texto
     --text-3 y --text-4 se oscurecen respecto al home a proposito. El home
     los usa en etiquetas de 12.5px y textos sueltos; estas paginas los usan
     en categorias y metadatos de 10 a 11px, donde el tono del home cae a
     3.3:1 de contraste y deja de cumplir WCAG AA. Estos valores dan 4.8:1
     y 3.4:1 manteniendo el mismo caracter calido. */
  --text:   var(--vc-text);
  --text-2: var(--vc-text-2);
  --text-3: #6F6B62;
  --text-4: #8A867E;

  /* acento */
  --accent:      var(--vc-accent);
  --accent-2:    var(--vc-accent-hover);
  --accent-bg:   var(--vc-accent-bg);
  --accent-line: var(--vc-accent-line);
  --warn:        var(--vc-amber);
}

/* Tipografía: --sans para interfaz y cuerpo, --display para titulares.
   --mono conserva su papel de etiqueta pequeña, pero en la sans del
   sistema, porque el sitio no usa monoespaciada real. */
body.vc-ds {
  --sans:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', sans-serif;
  --mono:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-family: var(--sans);
}

/* Los titulares de style.css usan --display sin tracking propio.
   Space Grotesk lo necesita para no verse suelta. */
body.vc-ds .strip-head,
body.vc-ds .modal-title,
body.vc-ds .detail-name,
body.vc-ds .info-card .title {
  letter-spacing: -0.03em;
}
body.vc-ds .strip-head { font-weight: 600 }

/* La cursiva de acento: serif, como en el home */
body.vc-ds .strip-head em {
  font-family: var(--vc-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--vc-accent);
  letter-spacing: -0.01em;
}

/* El número grande de las bandas comparte la familia de titulares */
body.vc-ds .huge-num { font-family: var(--vc-font-display); font-weight: 700 }