/* =====================================================================
   ProHygiene — Sistema de diseño (design tokens)
   Fuente: MANUAL DE MARCA - PROHYGIENE.pdf
   Slogan: "Expertos al servicio de tu bienestar"
   Importar en cualquier página del portal:  <link rel="stylesheet" href="marca/brand.css">
   ===================================================================== */

/* Montserrat (tipografía principal) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root {
  /* -------- Color corporativo (primario) --------
     OJO: el manual tiene una inconsistencia interna. El texto declara
     "RGB 18-62-140 / #123E8C" (que es la conversión de CMYK 100-79-0-9),
     pero TANTO el artwork del isologotipo COMO la muestra de la página
     "Color corporativo" son #001B72 — verificado muestreando los píxeles.
     Para pantalla usamos #001B72: es el navy real del logo, así se funde
     sin costura sobre fondos de marca. #123E8C queda para impresión CMYK. */
  --ph-azul:            #001B72;   /* PANTONE 2747 C · navy real del isologotipo (pantalla) */
  --ph-azul-cmyk:       #123E8C;   /* valor declarado en el manual · CMYK 100-79-0-9 (impresión) */
  --ph-azul-oscuro:     #001450;   /* matiz para hovers / fondos profundos */
  --ph-azul-claro:      #1e3f9e;   /* matiz claro */

  /* -------- Bienestares (color principal / secundario) -------- */
  --ph-banos:           #00AEEF;   /* Bienestar en Baños  (Cyan 100%)  */
  --ph-banos-2:         #6DCFF6;
  --ph-ambientes:       #8DC63F;   /* Bienestar en Ambientes (PANTONE 360) */
  --ph-ambientes-2:     #00AB4E;
  --ph-pisos:           #F47521;   /* Bienestar en Pisos (PANTONE 1375) */
  --ph-pisos-2:         #FAA61A;

  /* -------- Soluciones (principal / secundario) -------- */
  --ph-desodorizacion:      #654180;  --ph-desodorizacion-2:  #C7B2D6;  /* Desodorización de baños */
  --ph-aromatizacion:       #00AE8E;  --ph-aromatizacion-2:   #21604F;  /* Aromatización de ambientes */
  --ph-residuos:            #9A3393;  --ph-residuos-2:        #F496BF;  /* Residuos higiénicos femeninos */
  --ph-purificacion:        #3155A6;  --ph-purificacion-2:    #3777BC;  /* Purificación de aire */
  --ph-polvo:               #790003;  --ph-polvo-2:           #A51724;  /* Control de polvo y suciedad */
  --ph-insumos:             #030032;  --ph-insumos-2:         #002D54;  /* Provisión de insumos */
  --ph-manos:               #451D73;  --ph-manos-2:           #662D91;  /* Higiene y secado de manos */

  /* -------- Neutros de apoyo -------- */
  --ph-gris:            #B1B3B3;   /* PANTONE Cool Gray 4C (activo marcario) */
  --ph-blanco:          #ffffff;
  --ph-texto:           #1a2540;

  /* -------- Tipografía -------- */
  --ph-font:            'Montserrat', 'Calibri', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ph-font-deco:       'Amertha', cursive; /* solo frases cortas / decorativo */

  /* -------- Radios / sombras coherentes con la marca -------- */
  --ph-radio:           14px;
  --ph-sombra:          0 6px 24px rgba(0,27,114,.12);
}

/* -------- Base -------- */
body.ph {
  font-family: var(--ph-font);
  color: var(--ph-texto);
  margin: 0;
  line-height: 1.5;
}

/* Títulos: bold, azul o combinación light+bold (estilo de fondos corporativos) */
.ph h1, .ph h2, .ph h3 { font-weight: 800; color: var(--ph-azul); line-height: 1.15; }
.ph h1 { font-size: clamp(2rem, 5vw, 3.4rem); }

/* -------- Botón de marca -------- */
.ph-btn {
  display: inline-block;
  font-family: var(--ph-font);
  font-weight: 700;
  background: var(--ph-azul);
  color: #fff;
  border: 0;
  padding: .8em 1.6em;
  border-radius: 999px;      /* píldora, como el isologotipo */
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}
.ph-btn:hover { background: var(--ph-azul-oscuro); }
.ph-btn--linea { background: transparent; color: var(--ph-azul); box-shadow: inset 0 0 0 2px var(--ph-azul); }

/* -------- Onda / activo marcario (decorador SVG reutilizable) --------
   Uso:  <div class="ph-onda"></div>   (o de fondo con la imagen graficos/onda-activo-marcario.png) */
.ph-onda {
  height: 60px;
  background: url("graficos/onda-activo-marcario.png") center/contain no-repeat;
}

/* -------- Utilidades de color -------- */
.ph-bg-azul   { background: var(--ph-azul);   color:#fff; }
.ph-bg-banos  { background: var(--ph-banos); }
.ph-bg-amb    { background: var(--ph-ambientes); }
.ph-bg-pisos  { background: var(--ph-pisos); }
.ph-text-azul { color: var(--ph-azul); }