/*
 * Marca Proyect Salud. Se carga despues de style.css y responsive.css.
 * El template original no se modifica: todo override vive aqui.
 *
 * Paso 1 (identificacion del acento): un conteo de colores hex literales en
 * style.css no delata el acento real, porque el template lo aplica casi
 * siempre a traves de variables CSS. La variable --primary-color (#2490eb,
 * un azul brillante que el catalogo del template llama "turquesa") aparece
 * 182 veces via var(--primary-color) en botones, enlaces, iconos, insignias
 * y bordes: ese es el acento a reemplazar. --primary-dark-color (#14457b)
 * es el azul marino que usan el pie de pagina, la barra superior del header
 * y las secciones oscuras.
 *
 * Estrategia: redefinir esas dos variables en :root basta para reemplazar
 * el acento en todo el sitio (confirmado con getComputedStyle en las
 * secciones reales del template) sin tener que perseguir cada selector uno
 * por uno ni tocar style.css.
 *
 * Contraste (WCAG AA): el verde de marca (#2E9E4F) da 3.43:1 sobre blanco,
 * insuficiente para texto normal (se exige 4.5:1). --primary-color controla
 * tanto fondos con texto blanco encima (botones, tarjetas en hover) como
 * texto sobre fondo claro (enlaces, insignias) -- ambos casos fallarian con
 * verde. Por eso --primary-color se resuelve al azul marino claro de marca,
 * no al verde. El verde queda reservado para los pocos elementos puramente
 * decorativos (iconos) donde solo aplica el minimo de contraste no textual
 * (3:1, WCAG 1.4.11), confirmados abajo con sus selectores reales.
 */

:root {
   --ps-primario:       #1B3A6B;
   --ps-primario-claro: #2C5AA0;
   --ps-secundario:     #2E9E4F;
   --ps-neutro:         #F4F7FA;
   --ps-texto:          #444444;

   /* El template resuelve su color de marca casi por completo a traves de
      estas variables (definidas en css/style.css). Redefinirlas aqui
      sustituye el turquesa por la paleta de Proyect Salud en botones,
      enlaces, iconos, insignias, bordes y fondos oscuros. */
   --primary-color: var(--ps-primario-claro);
   --primary-dark-color: var(--ps-primario);
   --grey-color: var(--ps-neutro);
}

/* Cuerpo de texto: el template usa --secondary-color (gris) por defecto. */
body {
   color: var(--ps-texto);
}

/* Pie de pagina: la etiqueta <footer id="pq-footer"> no tiene fondo propio
   (lo pinta su hijo .pq-footer-style-1, ya cubierto por --primary-dark-color
   arriba). Se fija aqui tambien para que el elemento #pq-footer en si
   quede azul marino. */
#pq-footer {
   background-color: var(--ps-primario);
}

/* Iconos: las unicas placas/glifos decorativos del template presentes en
   este sitio (fancy-box estilos 2 y 3, usados en index/nosotros/servicios)
   heredan el verde de marca. Son graficos sin texto de parrafo encima, por
   lo que el minimo de contraste aplicable es 3:1, no 4.5:1. */
.pq-fancy-box.pq-style-2 .pq-fancy-box-icon {
   background-color: var(--ps-secundario);
}

.pq-fancy-box.pq-style-3 .pq-fancy-box-icon i {
   color: var(--ps-secundario);
}

/* Honeypot: fuera de la vista sin usar display:none, que algunos bots detectan. */
.ps-honeypot {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

/* ---------------------------------------------------------------
   Barra superior en movil
   El template la oculta por debajo de 979px y con ella desaparecen
   el telefono y el correo, que en un sitio de servicios son el dato
   mas util. Se muestra en formato compacto y centrado.
   --------------------------------------------------------------- */
@media (max-width: 979px) {
   header#pq-header.pq-header-style-2 .pq-top-header {
      display: block;
   }

   header#pq-header.pq-header-style-2 .pq-top-header .pq-header-contact ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 2px 20px;
      margin: 0;
      padding: 6px 12px;
   }

   header#pq-header.pq-header-style-2 .pq-top-header .pq-header-contact ul li {
      margin: 0;
      float: none;
      font-size: 13px;
   }
}

/* En pantallas estrechas el correo no cabe junto al telefono y la barra
   crecia hasta 106px. Se deja solo el telefono, que es la accion util;
   el correo sigue en el pie y en la pagina de contacto. */
@media (max-width: 575px) {
   header#pq-header.pq-header-style-2 .pq-top-header .pq-header-contact ul li:not(:first-child) {
      display: none;
   }
}