/*
 * ODH Spacing Hotfix v1.3.8
 * Objetivo: quitar el hueco excesivo antes del H1 del hero y reducir espacios desproporcionados entre H2/secciones.
 * Se carga al final para corregir el sistema global sin modificar artículos importados.
 */

/* 1) Hero: menos aire muerto por arriba antes del H1 */
body.single-post .odh-article .odh-hero,
body.page .odh-article .odh-hero {
  margin-top: 0 !important;
  padding-top: clamp(18px, 2.2vw, 32px) !important;
  padding-bottom: clamp(26px, 3vw, 44px) !important;
}

body.single-post .odh-article .odh-hero .odh-wrap,
body.page .odh-article .odh-hero .odh-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.single-post .odh-article .odh-hero .odh-kicker,
body.page .odh-article .odh-hero .odh-kicker {
  margin-bottom: clamp(8px, 1vw, 12px) !important;
}

body.single-post .odh-article .odh-hero h1,
body.page .odh-article .odh-hero h1 {
  margin-top: 0 !important;
  margin-bottom: clamp(12px, 1.6vw, 20px) !important;
}

body.single-post .odh-article .odh-hero .odh-hero__intro,
body.page .odh-article .odh-hero .odh-hero__intro {
  margin-top: 0 !important;
  margin-bottom: clamp(12px, 1.5vw, 18px) !important;
}

body.single-post .odh-article .odh-hero .odh-hero__meta,
body.page .odh-article .odh-hero .odh-hero__meta {
  margin-top: clamp(10px, 1.2vw, 16px) !important;
}

/* 2) Secciones principales: ritmo editorial más compacto, sin mazacote */
body.single-post .odh-article > .odh-section,
body.page .odh-article > .odh-section {
  padding-top: clamp(34px, 4vw, 56px) !important;
  padding-bottom: clamp(34px, 4vw, 56px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* La sección inmediatamente posterior al hero debe acercarse más */
body.single-post .odh-article > .odh-hero + .odh-section,
body.page .odh-article > .odh-hero + .odh-section {
  padding-top: clamp(24px, 3vw, 40px) !important;
}

/* Si dos secciones claras/suaves van seguidas, evitar dobles colchones visuales */
body.single-post .odh-article > .odh-section--soft + .odh-section,
body.single-post .odh-article > .odh-section--light + .odh-section,
body.page .odh-article > .odh-section--soft + .odh-section,
body.page .odh-article > .odh-section--light + .odh-section {
  padding-top: clamp(28px, 3.5vw, 46px) !important;
}

/* 3) H2/H3: quitar margen superior duplicado cuando ya hay padding de sección */
body.single-post .odh-article .odh-wrap > h2:first-child,
body.single-post .odh-article .odh-card > h2:first-child,
body.single-post .odh-article .odh-quick > h2:first-child,
body.single-post .odh-article .odh-method > h2:first-child,
body.single-post .odh-article .odh-related > h2:first-child,
body.page .odh-article .odh-wrap > h2:first-child,
body.page .odh-article .odh-card > h2:first-child,
body.page .odh-article .odh-quick > h2:first-child,
body.page .odh-article .odh-method > h2:first-child,
body.page .odh-article .odh-related > h2:first-child {
  margin-top: 0 !important;
}

body.single-post .odh-article h2,
body.page .odh-article h2 {
  margin-top: clamp(22px, 3vw, 34px) !important;
  margin-bottom: clamp(12px, 1.8vw, 20px) !important;
}

body.single-post .odh-article h3,
body.page .odh-article h3 {
  margin-top: clamp(18px, 2.5vw, 28px) !important;
  margin-bottom: clamp(8px, 1.4vw, 14px) !important;
}

/* 4) Cards/tablas/figuras: evitar huecos enormes antes y después */
body.single-post .odh-article .odh-card,
body.single-post .odh-article .odh-quick,
body.single-post .odh-article .odh-method,
body.single-post .odh-article .odh-decision,
body.single-post .odh-article .odh-table-wrap,
body.page .odh-article .odh-card,
body.page .odh-article .odh-quick,
body.page .odh-article .odh-method,
body.page .odh-article .odh-decision,
body.page .odh-article .odh-table-wrap {
  margin-top: clamp(16px, 2.2vw, 26px) !important;
  margin-bottom: clamp(16px, 2.2vw, 26px) !important;
}

body.single-post .odh-article .odh-figure,
body.page .odh-article .odh-figure {
  margin-top: clamp(22px, 3vw, 38px) !important;
  margin-bottom: clamp(24px, 3vw, 42px) !important;
}

/* 5) Producto ancho: mantener separación premium, pero sin saltos exagerados */
body.single-post .odh-article .odh-product-wide,
body.page .odh-article .odh-product-wide {
  margin-top: clamp(22px, 3vw, 36px) !important;
  margin-bottom: clamp(22px, 3vw, 36px) !important;
}

body.single-post .odh-article .odh-product-wide + .odh-product-wide,
body.page .odh-article .odh-product-wide + .odh-product-wide {
  margin-top: clamp(24px, 3vw, 40px) !important;
}

/* 6) Listas: defensa adicional contra márgenes verticales raros del tema/plugins */
body.single-post .odh-article ul,
body.single-post .odh-article ol,
body.page .odh-article ul,
body.page .odh-article ol {
  margin-top: clamp(8px, 1vw, 12px) !important;
  margin-bottom: clamp(10px, 1.4vw, 18px) !important;
}

/* 7) Ajuste móvil: más compacto aún, porque el scroll se alarga mucho */
@media (max-width: 768px) {
  body.single-post .odh-article .odh-hero,
  body.page .odh-article .odh-hero {
    padding-top: 18px !important;
    padding-bottom: 30px !important;
  }

  body.single-post .odh-article > .odh-section,
  body.page .odh-article > .odh-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  body.single-post .odh-article > .odh-hero + .odh-section,
  body.page .odh-article > .odh-hero + .odh-section {
    padding-top: 22px !important;
  }

  body.single-post .odh-article h2,
  body.page .odh-article h2 {
    margin-top: 20px !important;
    margin-bottom: 12px !important;
  }

  body.single-post .odh-article .odh-product-wide,
  body.page .odh-article .odh-product-wide {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
  }
}


/* 8) Móvil full width: evita que footer, artículo y fichas queden encajonados en contenedores estrechos del tema */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip;
  }

  body.single-post .site-content,
  body.single-post .content-area,
  body.single-post .inside-article,
  body.page .site-content,
  body.page .content-area,
  body.page .inside-article {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.single-post .inside-article,
  body.page .inside-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.single-post .odh-article,
  body.page .odh-article,
  .odh-footer-premium {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
  }

  body.single-post .odh-article .odh-wrap,
  body.page .odh-article .odh-wrap,
  .odh-footer-premium .odh-footer-wrap {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: clamp(12px, 3.8vw, 18px) !important;
    padding-right: clamp(12px, 3.8vw, 18px) !important;
  }

  body.single-post .odh-article .odh-card,
  body.single-post .odh-article .odh-quick,
  body.single-post .odh-article .odh-method,
  body.single-post .odh-article .odh-decision,
  body.single-post .odh-article .odh-table-wrap,
  body.single-post .odh-article .odh-product-wide,
  body.page .odh-article .odh-card,
  body.page .odh-article .odh-quick,
  body.page .odh-article .odh-method,
  body.page .odh-article .odh-decision,
  body.page .odh-article .odh-table-wrap,
  body.page .odh-article .odh-product-wide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .odh-footer-premium .odh-footer-top,
  .odh-footer-premium .odh-footer-cat-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }

  .odh-footer-premium .odh-footer-cat,
  .odh-footer-premium .odh-footer-cat-main,
  .odh-footer-premium .odh-footer-subcats {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .odh-footer-premium .odh-footer-cat-main {
    justify-content: space-between !important;
  }

  .odh-footer-premium .odh-footer-subcats {
    left: 0 !important;
    right: 0 !important;
  }
}

@supports not (overflow: clip) {
  @media (max-width: 768px) {
    html,
    body {
      overflow-x: hidden !important;
    }
  }
}

/* 9) Teléfonos muy estrechos: aún menos margen lateral útil, sin tocar desktop */
@media (max-width: 420px) {
  body.single-post .odh-article .odh-wrap,
  body.page .odh-article .odh-wrap,
  .odh-footer-premium .odh-footer-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .odh-footer-premium .odh-footer-wrap {
    padding-top: 32px !important;
  }
}