/* ==========================================================================
   Vital Red — PALETA ALTERNA «institucional»
   ==========================================================================

   Segunda propuesta de color para que el cliente compare. Más cercana al tono
   de un sitio institucional de salud: azul médico, turquesa suave como acento
   y grises muy limpios. El rojo de marca no desaparece, pero baja a acento
   secundario: se reserva para urgencia y para el botón principal.

   CÓMO ACTIVARLA
   Añadir el atributo al <html> de la página:

       <html lang="es-MX" data-paleta="institucional">

   Y para volver a la paleta aprobada, quitarlo. Nada más. Este archivo solo
   redefine variables de color: no toca ni una sola regla de diseño, así que el
   cambio es reversible y no puede romper la maquetación.

   QUÉ NO SE TOCA
   Los verdes de WhatsApp y los colores de estado del formulario se quedan como
   están: son señales reconocibles, no color de marca.
   ========================================================================== */

[data-paleta="institucional"] {
  /* ---- Azules: el marino se vuelve más frío y menos morado ---- */
  --navy-950: #04213D;
  --navy-900: #073C63;
  --navy-800: #0A4E7E;
  --navy-700: #0E639C;

  /* ---- Azul médico como color de acción ----
     `--blue-600` se usa a la vez como color de texto sobre blanco (enlaces del
     menú) y como fondo de botón con texto blanco, así que tiene que alcanzar
     4.5:1 en los dos sentidos. #0C77AE da 4.92:1; el tono anterior, más claro,
     se quedaba en 4.02:1 y los enlaces del menú costaban de leer. */
  --blue-700: #095C86;
  --blue-600: #0C77AE;
  --blue-500: #1E93CC;

  /* ---- Turquesa suave para los acentos claros ---- */
  --blue-200: #9FD9EC;
  --blue-100: #DCF0F8;
  --blue-050: #F0F9FC;

  /* ---- Rojo, ahora acento secundario: más sobrio y menos saturado ----
     Se queda en las marcas de identidad —el guion del antetítulo, el filete
     superior de las fichas, los números de los pasos, la cita— y sale de los
     botones, que era donde resultaba invasivo. */
  --red-600: #C22026;
  --red-500: #D8353B;

  /* ---- Llamada a la acción en azul petróleo ----
     Con veinte botones principales repartidos por la página, el rojo saturado
     gritaba. El petróleo mantiene la jerarquía sin competir con la fotografía
     y sobra en contraste sobre blanco. */
  --cta: #095C86;
  --cta-hover: #0A4E7E;
  --cta-sombra: rgba(9, 92, 134, .6);
  --cta-sombra-fuerte: rgba(9, 92, 134, .75);

  /* ---- Grises con una gota de azul, para que no se vean sucios ---- */
  --gray-050: #F4F8FA;
  --gray-100: #E9F0F4;
  --gray-200: #D7E3EA;
  --gray-300: #BCCDD8;

  --text: #12252F;
  --text-2: #5B7180;
  --text-inv-2: #BCD8E6;

  --line: #E1EBF1;

  /* Las sombras siguen al azul nuevo para que no queden grises apagadas. */
  --shadow-xs: 0 1px 2px rgba(7, 45, 70, .05);
  --shadow-sm: 0 2px 10px rgba(7, 45, 70, .07);
  --shadow-md: 0 14px 34px -16px rgba(7, 45, 70, .28);
  --shadow-lg: 0 28px 60px -28px rgba(7, 45, 70, .42);
}

/* El color del navegador móvil y de la barra superior acompañan a la paleta. */
[data-paleta="institucional"] .topbar { background: #04213D; }