/* compat.css — neutraliza el layout que impone el tema padre.
   ===========================================================================
   Hello Elementor encola theme.css y header-footer.css DESPUÉS de global.css
   (se puede ver en el orden del <head>), y además usa selectores como
   `.site-footer:not(.dynamic-footer)`, más específicos que los nuestros. Como
   reutilizamos sus mismos nombres de clase —`.site-header`, `.site-footer`,
   `.header-inner`— sus reglas nos pisaban:

     · `.site-footer:not(.dynamic-footer){max-width:1140px}` dejaba el pie como
       una franja centrada de 1140px con blanco a los lados, en vez de una
       banda oscura de ancho completo.
     · `.site-header .header-inner{max-width:1140px}` encogía la cabecera a
       1140px mientras el nav usaba nuestros 1240px del `.container`: por eso
       "Servicios" quedaba corrido a la izquierda respecto del logo.
     · `header-footer.css` agrega `display:flex` y `padding-block:1rem` a
       `.site-header` y `.site-footer`, que pelean con nuestra altura fija y
       nuestro espaciado.

   Esta hoja se encola de última (prioridad 99 en functions.php) justamente
   para ganar por orden de cascada. Es el único lugar del tema donde se
   sobrescribe al padre; si aparece otra colisión, va acá y no repartida.
   ========================================================================= */

/* Ancho completo: el fondo del header y del footer debe cubrir la ventana.
   El ancho del CONTENIDO lo sigue definiendo .container por dentro. */
.site-header:not(.dynamic-header),
.site-footer:not(.dynamic-footer) {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

.site-header:not(.dynamic-header) {
  display: block;
  padding-block: 0;
  height: var(--header-h);
}

.site-footer:not(.dynamic-footer) {
  padding-block: var(--sp-6) var(--sp-3);
}

/* La cabecera vuelve al contenedor del sitio, para que el logo quede alineado
   con el nav de abajo (que usa el mismo ancho). */
.site-header .header-inner {
  max-width: var(--container-max);
  padding-inline: var(--sp-2);
}

/* Ninguna página del sitio debe poder desplazarse en horizontal. Si algún
   bloque se pasa de ancho, se recorta acá en vez de dejar una franja en
   blanco al costado de las secciones de ancho completo. */
html,
body {
  overflow-x: clip;
}