/* RESET GLOBAL BÁSICO */
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Soluciona el infame bug de WP Gutenberg (alignfull) en Windows */
}

*,
*::before,
*::after {
  box-sizing: border-box; /* Asegura que paddings y bordes no agranden los anchos */
}

:root {
  --max-width: 1440px;

  --content-side-padding: 32px;

  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: 72px;
  --space-section: 120px;
  --space-gap: 20px;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
}

@media (max-width: 720px) {
  /* TABLET */
  :root {
    --content-side-padding: 24px;

    --max-display: 720px;

    --space-m: 20px;
    --space-l: 40px;
    --space-xl: 56px;
    --space-section: 90px;
  }
}

@media (max-width: 360px) {
  /* MOBILE */
  :root {
    --content-side-padding: 16px;

    --max-display: 360px;

    --space-s: 14px;
    --space-m: 18px;
    --space-l: 32px;
    --space-xl: 48px;
    --space-section: 72px;
  }
}

.width-container {
  max-width: var(--max-width);
  height: fit-content;
  width: 100%;
  padding: 0 var(--content-side-padding);
  margin: 0 auto;
  box-sizing: border-box;
}

.vertical-stack {
  display: flex;
  flex-direction: column;
}

.horizontal-stack {
  display: flex;
  flex-direction: row;
}

section {
  padding: var(--space-section) 0;
}

section .section-title h2,
section .section-title p {
  display: block;
  width: 100%;
}
/*
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-footer {
  margin-top: auto;
}
*/
/* =========================================
   UTILITIES (Herramientas de maquetación)
   ========================================= */

/* Neutraliza el inner-container de WordPress para control total */
.u-unstyle-wp-group > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rompe los márgenes del contenedor en móviles (Full Bleed) */
@media (max-width: 480px) {
  .u-mobile-full-bleed {
    width: calc(100% + (var(--content-side-padding) * 2)) !important;
    margin-left: calc(-1 * var(--content-side-padding)) !important;
    margin-right: calc(-1 * var(--content-side-padding)) !important;
    max-width: 100vw !important;
  }
}
