/* =========================================================
   BARGO STUDIO — RESPONSIVE GUARD
   v1.0.0
   Objetivo: sistema responsive global y seguro para móvil/tablet.
   ========================================================= */

:root {
  --bargo-mobile-gutter: 24px;
  --bargo-tablet-gutter: 36px;
  --bargo-logo-mobile: 135px;
  --bargo-h1-mobile-min: 42px;
  --bargo-h1-mobile-max: 50px;
  --bargo-h2-mobile-min: 32px;
  --bargo-h2-mobile-max: 38px;
  --bargo-h3-mobile-min: 25px;
  --bargo-h3-mobile-max: 30px;
  --bargo-body-mobile: 18px;
  --bargo-lead-mobile: 21px;
}

/* ---------------------------------------------------------
   BASE: seguridad ante overflow horizontal
   --------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1024px) {

  /* Títulos dentro del contenido, nunca dentro del header. */
  :where(main, #content, .site-main, .elementor-location-single, .elementor-location-archive)
  :where(h1, .entry-title, .page-title, .post-title, .elementor-widget-heading h1.elementor-heading-title) {
    font-size: clamp(48px, 7vw, 72px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 767px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  /* -------------------------------------------------------
     HEADER / LOGO
     Mantiene el logo visible y proporcionado en móvil.
     ------------------------------------------------------- */
  :where(header, .site-header, .elementor-location-header)
  :where(.custom-logo, .site-logo img, .elementor-widget-theme-site-logo img, .elementor-widget-image.logo img) {
    width: var(--bargo-logo-mobile) !important;
    max-width: var(--bargo-logo-mobile) !important;
    height: auto !important;
  }

  /* -------------------------------------------------------
     CONTENEDORES
     ------------------------------------------------------- */
  :where(main, #content, .site-main, article, .elementor-location-single, .elementor-location-archive),
  :where(main, #content, .site-main) :where(.e-con, .elementor-section, .elementor-container) {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     H1 GLOBAL DEL CONTENIDO
     Evita títulos gigantes o desproporcionados en páginas,
     entradas, servicios, proyectos, prensa y blog.
     ------------------------------------------------------- */
  :where(main, #content, .site-main, .elementor-location-single, .elementor-location-archive)
  :where(h1, .entry-title, .page-title, .post-title, .elementor-widget-heading h1.elementor-heading-title) {
    font-size: clamp(var(--bargo-h1-mobile-min), 11.5vw, var(--bargo-h1-mobile-max)) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* -------------------------------------------------------
     H2 / H3 GLOBAL
     ------------------------------------------------------- */
  :where(main, #content, .site-main, .elementor-location-single, .elementor-location-archive)
  :where(h2, .elementor-widget-heading h2.elementor-heading-title) {
    font-size: clamp(var(--bargo-h2-mobile-min), 8.5vw, var(--bargo-h2-mobile-max)) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.03em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  :where(main, #content, .site-main, .elementor-location-single, .elementor-location-archive)
  :where(h3, .elementor-widget-heading h3.elementor-heading-title) {
    font-size: clamp(var(--bargo-h3-mobile-min), 6.5vw, var(--bargo-h3-mobile-max)) !important;
    line-height: 1.08 !important;
  }

  /* -------------------------------------------------------
     TEXTO Y ENTRADILLAS
     Solo en contenido para no alterar navegación/botones.
     ------------------------------------------------------- */
  :where(main, #content, .site-main, .elementor-location-single, .elementor-location-archive)
  :where(p, .elementor-widget-text-editor) {
    font-size: var(--bargo-body-mobile);
    line-height: 1.55;
  }

  :where(main, #content, .site-main, .elementor-location-single, .elementor-location-archive)
  :where(.post-excerpt, .entry-excerpt, .intro, .lead, .hero-intro, .page-intro) {
    font-size: var(--bargo-lead-mobile) !important;
    line-height: 1.45 !important;
  }

  /* -------------------------------------------------------
     PRIMER BLOQUE / HERO
     Neutraliza desplazamientos negativos heredados de desktop
     que pueden hacer que "Prensa" invada visualmente el logo.
     ------------------------------------------------------- */
  :where(main, #content, .site-main) > :where(.elementor, .e-con, .elementor-section, .page-header, .page-hero, .hero, .blog-hero, .press-hero):first-child {
    margin-top: 0 !important;
    transform: none !important;
  }

  :where(main, #content, .site-main)
  :where(.page-header, .page-hero, .hero, .blog-hero, .press-hero) {
    padding-top: clamp(36px, 8vw, 52px) !important;
  }

  :where(main, #content, .site-main)
  :where(.page-header, .page-hero, .hero, .blog-hero, .press-hero)
  :where(h1, .page-title, .entry-title) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* -------------------------------------------------------
     ELEMENTOR: elimina anchuras fijas problemáticas en móvil
     sin tocar controles que necesiten ancho propio.
     ------------------------------------------------------- */
  :where(main, #content, .site-main) .elementor-widget-heading,
  :where(main, #content, .site-main) .elementor-widget-text-editor,
  :where(main, #content, .site-main) .elementor-widget-image {
    max-width: 100%;
  }

  /* Evita que palabras largas creen scroll horizontal. */
  :where(main, #content, .site-main) :where(p, li, a:not(.elementor-button), span) {
    overflow-wrap: break-word;
  }
}

/* =========================================================
   MÓVILES MUY ESTRECHOS
   ========================================================= */
@media (max-width: 390px) {
  :root {
    --bargo-logo-mobile: 128px;
    --bargo-h1-mobile-min: 39px;
    --bargo-h1-mobile-max: 46px;
    --bargo-body-mobile: 17px;
    --bargo-lead-mobile: 20px;
  }
}