/* ============================================================================
   Dr. Verde — PALETA DE MARCA
   Este es el ÚNICO archivo que hay que tocar para vestir el sitio con los
   colores de Dr. Verde. Las 4 páginas leen de aquí.

   Los verdes de abajo son los REALES de Dr. Verde: se sacaron pixel por pixel
   del logo oficial que mandó el cliente. Si algún día cambian su marca, con
   tocar --brand-accent y --brand-accent-deep se re-viste todo: wordmark,
   enlaces, botones, barra superior y la sección del manifiesto, en las 4
   páginas.

   Dirección de diseño: "su marca sobre Le Labo" — la misma disciplina de
   tipografía y aire, pero mandando el verde de Dr. Verde.
   ============================================================================ */

:root {
  /* --- Base --- */
  --brand-paper: #F6F8F6;        /* fondo hueso */
  --brand-ink: #1A1A1A;          /* texto principal */
  --brand-on-accent: #F6F8F6;    /* texto sobre el color de acento */

  /* --- VERDES REALES DE DR. VERDE ---
     Extraídos pixel por pixel del logo oficial que mandó el cliente
     (logo.jpg): son los tres colores dominantes de la marca. */
  --brand-accent: #00A050;       /* verde esmeralda: el del wordmark y el marco */
  --brand-lime: #A0C040;         /* verde lima: la hoja */
  --brand-olive: #708040;        /* verde olivo: el cuadro de fondo */

  /* Verde profundo, derivado del esmeralda: barra superior y sección
     oscura del manifiesto. Contraste alto con el texto hueso. */
  --brand-accent-deep: #04502A;

  /* Aún más oscuro, para hover de botones. */
  --brand-accent-darker: #033A1F;
}

/* ----------------------------------------------------------------------------
   APLICACIÓN DE LA MARCA
   Qué toma el color de acento. Hoy, con el acento en negro, se ve idéntico al
   diseño de referencia; al poner el verde, todo esto se viste solo.
   ---------------------------------------------------------------------------- */

/* El wordmark "DR. VERDE" del header y del pie. */
.brand b { color: var(--brand-accent); }

/* ----------------------------------------------------------------------------
   HUECO DEL LOGO
   Para usar el logo real: guarda el archivo en esta misma carpeta como
   "logo.svg" (o logo.png) y listo — aparece en lugar del texto, en las 4
   páginas. Si el archivo no existe, el <img> se quita solo y se queda el
   wordmark en texto, así el sitio nunca se ve roto.
   ---------------------------------------------------------------------------- */
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  /* El logo viene en JPEG con fondo blanco; multiply lo funde con el papel
     del sitio para que no se vea el recuadro blanco. */
  mix-blend-mode: multiply;
}
/* Cuando el logo cargó, se oculta el wordmark de texto. */
.brand:has(.brand-logo) b,
.brand:has(.brand-logo) span { display: none; }

@media (max-width: 820px) {
  .brand-logo { height: 28px; }
}