/*
 * 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.
 *
 * Paleta (2026-09-23): la del logo y el brochure del cliente.
 *   --ps-primario   #272264  azul del logo. Fondos oscuros (pie, barra superior).
 *   --ps-turquesa   #29B6C0  turquesa del logo. Solo decorativo (iconos) o texto
 *                            sobre azul: 2.46:1 sobre blanco no sirve para texto,
 *                            5.70:1 sobre #272264 si.
 *   --ps-acento     #137A83  turquesa oscurecido para lo que lleva texto: botones
 *                            con texto blanco (5.07:1) y enlaces sobre blanco
 *                            (5.07:1) o sobre el gris de seccion (4.72:1). Todos
 *                            cumplen WCAG AA (4.5:1).
 * --primary-color del template controla a la vez fondos con texto blanco y texto
 * sobre fondo claro, por eso se resuelve al acento accesible y no al turquesa.
 */

:root {
   --ps-primario:       #272264;
   --ps-turquesa:       #29B6C0;
   --ps-acento:         #137A83;
   --ps-neutro:         #F4F7FA;
   --ps-texto:          #444444;

   /* Alias que usan los estilos en linea de las paginas. */
   --ps-primario-claro: var(--ps-acento);
   --ps-secundario:     var(--ps-turquesa);

   /* El template resuelve su color de marca casi por completo a traves de
      estas variables (definidas en css/style.css). */
   --primary-color: var(--ps-acento);
   --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)
   usan el acento accesible. Son graficos sin texto encima: el minimo
   aplicable es 3:1 (WCAG 1.4.11). */
.pq-fancy-box.pq-style-2 .pq-fancy-box-icon {
   background-color: var(--ps-acento); /* icono blanco encima: 5.07:1 */
}

.pq-fancy-box.pq-style-3 .pq-fancy-box-icon i {
   color: var(--ps-acento); /* el turquesa (2.46:1) no llega al 3:1 de WCAG 1.4.11 */
}

/* 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;
   }
}

/* ---------------------------------------------------------------
   Logo definitivo (horizontal, proporcion ~6:1)
   El template fija la altura del logo y en movil lo fuerza a 150px
   de ancho: con este logo el nombre quedaba en ~8px. En movil se
   dimensiona por ancho dejando sitio al boton del menu (~110px).
   El preloader tenia altura fija y en pantallas estrechas se deformaba.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
   header#pq-header.pq-header-style-2 .pq-header-diff-block .navbar-brand img {
      height: auto;
      width: min(245px, calc(100vw - 110px));
   }
}

#pq-loading-center img {
   height: auto;
   width: min(368px, 80vw);
}

/* Bloque del logo en el header: el template lo pinta con --primary-color y
   espera un logo claro encima. Con el acento turquesa el logo quedaba sin
   contraste; se usa el azul de marca (igual que la barra superior) y la
   version en negativo del logo (images/logo-negativo.png). */
header#pq-header.pq-header-style-2 .navbar-brand {
   background: var(--ps-primario);
}

/* Movil: el bloque del logo ocupa toda su fila en vez de dejar una esquina
   blanca a la derecha. */
@media (max-width: 767px) {
   header#pq-header.pq-header-style-2 .navbar-brand {
      display: block;
      text-align: left;
   }
}

/* Tablet: con WhatsApp, fijo y correo la barra superior partia en dos
   lineas. El correo sigue en el pie y en la pagina de contacto. */
@media (min-width: 576px) and (max-width: 991px) {
   header#pq-header.pq-header-style-2 .pq-top-header .pq-header-contact ul li:nth-child(n+3) {
      display: none;
   }
}

/* ===============================================================
   Correcciones de secciones del template usadas fuera de su contexto
   (auditoria 2026-09-23). style.css y responsive.css siguen intactos.
   =============================================================== */

/* Titulos: el template aplica text-transform:capitalize a h1-h6, que es una
   convencion del ingles ("Consultoría En Seguridad Y Salud"). En espanol solo
   va mayuscula inicial. */
h1, h2, h3, h4, h5, h6 {
   text-transform: none;
}

/* Esta tarjeta repite el capitalize con un selector mas especifico. */
.pq-fancy-box.pq-style-3 .pq-fancy-box-title {
   text-transform: none;
}

/* CTA (.pq-form-bg-white): el template da padding:0 240px a todo encabezado
   .pq-section centrado, pensado para ancho completo. Dentro de la columna del
   CTA dejaba ~300px para el titulo y lo partia en seis lineas. */
.pq-form-bg-white .pq-section.pq-style-1.text-center {
   padding-left: 0;
   padding-right: 0;
}

/* .pq-home2-about reserva 370px arriba para las tarjetas de servicio que en el
   Inicio se montan sobre ella. En Nosotros no hay tarjetas encima y quedaba un
   hueco en blanco bajo el banner. El template lo fija con !important. */
@media (min-width: 1200px) {
   .pq-home2-about.ps-sin-solape {
      padding-top: 130px !important;
   }
}

/* Listas dentro de .pq-info-box1: el template las diseno para un <p>. Como <ul>
   heredaban sangria de 25px sin vinieta y se leian como texto suelto. */
.pq-info-box1 ul.pq-infobox-description {
   padding-left: 0;
   margin-top: 10px;
}

.pq-info-box1 ul.pq-infobox-description li {
   position: relative;
   padding-left: 18px;
   margin-bottom: 4px;
}

.pq-info-box1 ul.pq-infobox-description li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.75em;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background-color: var(--ps-acento);
}

/* Fotos de las tarjetas de Servicios: vienen en proporciones distintas y
   desalineaban las filas. Se recortan a la misma proporcion sin deformarse. */
.pq-info-box1-info > img.img-fluid {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

/* Boton del menu lateral (.pq-header-info-box). En el template comparte caja
   con el buscador, cuyo line-height:77px estira la caja a toda la altura del
   menu y la separa de los enlaces. Sin buscador la caja quedaba de 46px,
   flotando, pegada a "Contacto" y con las rayas del icono saliendose. */
/* Solo en escritorio: por debajo de 1024px el template oculta este boton
   (display:none) y el menu pasa al boton hamburguesa. */
@media (min-width: 1024px) {
   header#pq-header.pq-header-style-2 .pq-header-info-box {
      align-self: stretch;
      margin-left: 30px;
   }

   header#pq-header.pq-header-style-2 .pq-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      padding-top: 0;
      padding-bottom: 0;
   }

   /* Las rayas se dibujan con ::before/::after a +-10px de la central: se
      centra la central en vez de empujarla con top:15px. */
   header#pq-header.pq-header-style-2 .pq-toggle-btn a {
      top: 0;
   }

   /* Header fijo: el template lo lleva a 87px con el line-height del buscador. */
   header#pq-header.pq-header-style-2.pq-header-sticky .pq-toggle-btn {
      min-height: 87px;
   }
}