/* =============================================================
   theresa.es — la CABECERA y el PIE de la web, con la paleta de la app.

   Rubén, 2026-10-17: «en todas las páginas de theresa.es el header y el footer todavía tienen el
   color de la plantilla antigua; tienes que poner el gris que estás usando ahora para los cards»
   (el gris de las pantallas, `--c-bg`), y «las letras de Theresa en la cabecera, un pelín más
   pequeñas».

   Va APARTE de `home.css` a propósito: esa hoja también la cargan la app (legal, el quiosco de
   fichar) y un cambio de la web no toca la app (Biblia 10, «Un cambio de la web no toca la
   app»). La cargan, después de `home.css` y `paleta.css`, todas las páginas de la web con
   cabecera: la portada, Soluciones y sectores (`solutions/_base.html`), precios, «Elige tu
   sector», las legales (`legal/_base.html`) y las de después de pagar (`public/_public_base.html`).
   La cabecera es `partials/_web_cabecera.html` (la portada lleva la suya, idéntica) y el pie
   `partials/_web_pie.html`; las de después de pagar llevan la suya, sin menú.
   ============================================================= */

/* ── La cabecera: el gris de las tarjetas, un filo, y el logo ──
   EL TAMAÑO DEL LOGO DE LA WEB, AQUÍ Y EN NINGÚN OTRO SITIO (Rubén, 2026-10-18: «letras que hay
   en el header en theresa.es, más pequeñas en escritorio y móvil»; el 17-10 ya pidió «un pelín
   más pequeñas»). Lo que se VE: 15 px en el escritorio y 17 en el móvil. Había cuatro tamaños
   (27 en `home.css`, 23 aquí, 26 en «Elige tu sector», 22 en `public`) y las legales no
   cargaban esta hoja: el mismo logo se veía de 17, 19,5 o 27 px según la página.
   Las páginas de la web van con `zoom: 0.75` en el escritorio (la portada, precios, sectores,
   Soluciones; las legales, solo su cabecera): ahí 20 px son los 15 que se ven. Las de después de
   pagar no llevan zoom: 15 tal cual. */
.hm-header { background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
/* reserva la barra de scroll: sin ella, la cabecera cambia de ancho de una página a otra */
html:has(.hm-header) { scrollbar-gutter: stable; }
.hm-logo { height: 20px; width: auto; }
.pb-logo img { height: 15px; width: auto; }
/* el menú móvil cerrado asomaba su sombra por el borde izquierdo de la página */
.mobile-nav-drawer:not(.is-open) { box-shadow: none; }

/* ── El pie: el mismo gris, con el texto de la paleta (antes, negro con letra blanca) ── */
.hm-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); color: var(--c-text2); }
.hm-footer__brand-logo { filter: none; height: 20px; }
.hm-footer__copy { color: var(--c-text3); }
.hm-footer__h { color: var(--c-text); font-weight: 700; }
.hm-footer__links a { color: var(--c-text2); }
.hm-footer__links a:hover { color: var(--c-azul); }

@media (max-width: 1023px) {
  .hm-logo, .pb-logo img { height: 17px; }
}

/* ── El panel de Soluciones mide 640 px: centrado en su enlace se salía por la derecha en el iPad
   en vertical y la página entera se movía de lado, aun cerrado. Por debajo de 769 no hay menú. ── */
@media (min-width: 769px) and (max-width: 1023px) {
  .hm-drop--mega:has(.hm-mega--sol) { left: auto; right: -200px; transform: translateY(-4px); }
  .hm-nav__item--has-drop:hover .hm-drop--mega:has(.hm-mega--sol) { transform: translateY(0); }
}