:root {
  --zgz-bg: #ffffff;
  --zgz-bg-soft: #f6f8fc;
  --zgz-dark: #101828;
  --zgz-text: #182230;
  --zgz-muted: #667085;
  --zgz-primary: #145cff;
  --zgz-primary-dark: #0f45c8;
  --zgz-border: #e5e7eb;
  --zgz-radius-sm: 12px;
  --zgz-radius-md: 18px;
  --zgz-radius-lg: 28px;
  --zgz-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
  --zgz-container: 1180px;
}

.zgz-container {
  width: min(100% - 32px, var(--zgz-container));
  margin-inline: auto;
}

.zgz-section {
  padding: clamp(56px, 7vw, 96px) 0;
}

.zgz-section-soft {
  background: var(--zgz-bg-soft);
}

.zgz-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  color: var(--zgz-primary);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.zgz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.zgz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.zgz-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.zgz-btn-primary {
  background: var(--zgz-primary);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(20, 92, 255, 0.22);
}

.zgz-btn-primary:hover {
  background: var(--zgz-primary-dark);
  color: #ffffff;
}

.zgz-btn-secondary {
  background: #ffffff;
  color: var(--zgz-dark);
  border: 1px solid var(--zgz-border);
}

.zgz-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.zgz-card {
  padding: 28px;
  border: 1px solid var(--zgz-border);
  border-radius: var(--zgz-radius-md);
  background: #ffffff;
  box-shadow: var(--zgz-shadow);
}

.zgz-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--zgz-dark);
}

.zgz-card p {
  margin-bottom: 0;
  color: var(--zgz-muted);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .zgz-grid-3 {
    grid-template-columns: 1fr;
  }

  .zgz-actions {
    flex-direction: column;
  }

  .zgz-btn {
    width: 100%;
  }
}
/* Pegar en Apariencia > Personalizar > CSS adicional si el home.css no gana al contenedor del tema */
body.home,
body.home #page,
body.home .site,
body.home .site.grid-container,
body.home .container.grid-container,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home main#main,
body.home .site-main,
body.home article.page,
body.home .inside-article,
body.home .entry-content,
body.home .entry-content > *,
body.home .elementor,
body.home .elementor-section-wrap,
body.home .elementor-section,
body.home .elementor-container,
body.home .elementor-column,
body.home .elementor-widget,
body.home .elementor-widget-wrap,
body.home .elementor-widget-container,
body.home .e-con,
body.home .e-con-inner {
  max-width: none !important;
  width: 100% !important;
}

body.home .site,
body.home .site.grid-container,
body.home .container.grid-container,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home main#main,
body.home .site-main,
body.home article.page,
body.home .inside-article,
body.home .entry-content,
body.home .elementor,
body.home .elementor-section,
body.home .elementor-container,
body.home .elementor-column,
body.home .elementor-widget,
body.home .elementor-widget-wrap,
body.home .elementor-widget-container,
body.home .e-con,
body.home .e-con-inner {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home .elementor-section.elementor-section-boxed > .elementor-container,
body.home .e-con > .e-con-inner {
  max-width: none !important;
}

body.home .site,
body.home .site-content,
body.home .content-area,
body.home #primary,
body.home main#main,
body.home .site-main,
body.home article.page,
body.home .inside-article,
body.home .entry-content,
body.home .elementor-widget-container {
  overflow: visible !important;
}

html,
body.home {
  overflow-x: clip !important;
}

body.home .zgz-home-v7 {
  position: relative;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

body.home .elementor-widget-html,
body.home .elementor-widget-html > .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   ZGZWEB - TITULARES MAS COMPACTOS
   Pegar al final de global.css o cargar despues de los CSS de pagina
   ========================================================= */

:root {
  --zgz-h1-fluid: clamp(2.85rem, 5.8vw, 4.85rem);
  --zgz-h2-fluid: clamp(2.05rem, 3.9vw, 3.25rem);
  --zgz-h3-fluid: clamp(1.15rem, 1.55vw, 1.48rem);
  --zgz-h4-fluid: clamp(1.02rem, 1.18vw, 1.18rem);
  --zgz-title-tight: 0.90;
  --zgz-title-normal: 1.04;
}

/* Titulares principales dentro del contenido real de WordPress/Elementor */
body .entry-content h1,
body .elementor-widget-container h1,
body main[class^="zgz-"] h1,
body main[class*=" zgz-"] h1 {
  font-size: var(--zgz-h1-fluid) !important;
  line-height: var(--zgz-title-tight) !important;
  letter-spacing: -0.065em;
}

body .entry-content h2,
body .elementor-widget-container h2,
body main[class^="zgz-"] h2,
body main[class*=" zgz-"] h2 {
  font-size: var(--zgz-h2-fluid) !important;
  line-height: var(--zgz-title-normal) !important;
  letter-spacing: -0.052em;
}

body .entry-content h3,
body .elementor-widget-container h3,
body main[class^="zgz-"] h3,
body main[class*=" zgz-"] h3 {
  font-size: var(--zgz-h3-fluid) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.026em;
}

body .entry-content h4,
body .elementor-widget-container h4,
body main[class^="zgz-"] h4,
body main[class*=" zgz-"] h4 {
  font-size: var(--zgz-h4-fluid) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.018em;
}

/* Textos grandes tipo lead para que acompasen con titulares mas pequenos */
body .entry-content [class*="lead"],
body .elementor-widget-container [class*="lead"] {
  font-size: clamp(1.02rem, 1.35vw, 1.20rem) !important;
  line-height: 1.62 !important;
}

/* Ajuste especifico para heroes: mantienen impacto, pero ya no se comen la pantalla */
body .entry-content [class*="hero"] h1,
body .elementor-widget-container [class*="hero"] h1 {
  max-width: 12.5em;
}

body .entry-content [class*="section-head"] h2,
body .elementor-widget-container [class*="section-head"] h2 {
  max-width: 13.5em;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --zgz-h1-fluid: clamp(2.65rem, 7.2vw, 4.25rem);
    --zgz-h2-fluid: clamp(2.00rem, 5vw, 2.95rem);
  }
}

/* Movil: titulares mas respirables y menos saltos feos */
@media (max-width: 760px) {
  :root {
    --zgz-h1-fluid: clamp(2.28rem, 10vw, 3.25rem);
    --zgz-h2-fluid: clamp(1.82rem, 7.4vw, 2.35rem);
    --zgz-h3-fluid: clamp(1.08rem, 4.4vw, 1.32rem);
    --zgz-title-tight: 0.95;
    --zgz-title-normal: 1.08;
  }

  body .entry-content h1,
  body .elementor-widget-container h1,
  body main[class^="zgz-"] h1,
  body main[class*=" zgz-"] h1 {
    letter-spacing: -0.052em;
  }

  body .entry-content h2,
  body .elementor-widget-container h2,
  body main[class^="zgz-"] h2,
  body main[class*=" zgz-"] h2 {
    letter-spacing: -0.042em;
  }

  body .entry-content [class*="hero"] h1,
  body .entry-content [class*="section-head"] h2,
  body .elementor-widget-container [class*="hero"] h1,
  body .elementor-widget-container [class*="section-head"] h2 {
    max-width: 100%;
  }
}

/* Movil pequeno */
@media (max-width: 420px) {
  :root {
    --zgz-h1-fluid: clamp(2.12rem, 11vw, 2.86rem);
    --zgz-h2-fluid: clamp(1.68rem, 8vw, 2.12rem);
  }
}
/* =========================================================
   ZGZWEB - FIX MENU MOVIL LIQUID GLASS
   Corrige que el menu se quede abierto y que los submenus
   creen huecos aunque esten cerrados.
   Pegar AL FINAL de CSS adicional.
   ========================================================= */

@media (max-width: 768px) {
  /* 1) Cerrado real: si GeneratePress no tiene .toggled,
     el menu no puede quedarse visible. */
  .main-navigation:not(.toggled) .main-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .main-navigation:not(.toggled) .main-nav > ul {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 2) Abierto: mantiene el estilo liquid glass, pero solo cuando toca. */
  .main-navigation.toggled .main-nav {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
  }

  .main-navigation.toggled .main-nav > ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: min(100% - 34px, 560px) !important;
    margin: 12px auto 20px !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 3) Evita los huecos grandes: los submenus cerrados no ocupan espacio. */
  .main-navigation .main-nav > ul > li > ul,
  .slideout-navigation .main-nav > ul > li > ul {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  /* 4) Submenu abierto en movil. Cubrimos las clases habituales de GeneratePress. */
  .main-navigation .main-nav > ul > li.sfHover > ul,
  .main-navigation .main-nav > ul > li.dropdown-open > ul,
  .main-navigation .main-nav > ul > li.toggled-on > ul,
  .main-navigation .main-nav > ul > li.current-menu-ancestor > ul,
  .slideout-navigation .main-nav > ul > li.sfHover > ul,
  .slideout-navigation .main-nav > ul > li.dropdown-open > ul,
  .slideout-navigation .main-nav > ul > li.toggled-on > ul,
  .slideout-navigation .main-nav > ul > li.current-menu-ancestor > ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    height: auto !important;
    max-height: none !important;
    margin: 8px 0 2px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;

    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow:
      inset 1px 1px 1px rgba(255, 255, 255, 0.55),
      0 12px 28px rgba(11, 27, 58, 0.045) !important;

    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  }

  /* 5) Items uniformes, sin espacios raros. */
  .main-navigation.toggled .main-nav > ul > li,
  .slideout-navigation .main-nav > ul > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-navigation.toggled .main-nav > ul > li > a,
  .slideout-navigation .main-nav > ul > li > a {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border-radius: 22px !important;
  }

  /* 6) El boton hamburguesa queda limpio y por encima. */
  .menu-toggle {
    position: relative !important;
    z-index: 10050 !important;
  }
}