/* Endolifter — v1.15 Responsive Safety Net
 * Garantiza ZERO scroll horizontal en cualquier dispositivo.
 * Se carga el último para sobreescribir cualquier conflicto.
 */

/* ===== Bloqueo absoluto de scroll horizontal en html/body =====
 * IMPORTANTE: NO aplicamos overflow-x: hidden a contenedores intermedios
 * (.site-main, .front-page, .section) porque crea un scroll-container interno
 * que rompe position: sticky en Chromium/Firefox.
 * Para clipping interno usamos `overflow-x: clip` que NO crea scroll container
 * y por tanto NO afecta a sticky. Body/html son el único contenedor que
 * limita el overflow horizontal a nivel de página. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip; /* Mejor: no crea contexto de scroll, sticky sigue funcionando */
}

/* Contenedores principales NO usan overflow-x: hidden (rompe sticky).
 * Si en algún navegador antiguo aparece scroll horizontal, body lo absorberá. */
.site-main,
#main,
.front-page,
main,
.site-header,
.site-footer { max-width: 100%; }

/* Para evitar overflow visual sin romper sticky usamos overflow-x: clip
 * (soportado en Chrome 90+, Firefox 81+, Safari 16+). Si no se soporta,
 * el body absorbe el desbordamiento. */
.front-page > section,
.section,
.hero,
.trust-bar,
.site-footer {
    max-width: 100%;
    overflow-x: clip;
}

/* ===== Header siempre por encima — z-index reforzado (sin tocar position) ===== */
/* IMPORTANTE: NO sobreescribimos position aquí porque el header es position:fixed
   en main.css y queremos conservar ese comportamiento sticky-on-scroll. */
.site-header { z-index: 1000; }
.site-header.scrolled,
.site-header.sticky { z-index: 1000; }
.main-nav,
.main-nav__list,
.main-nav__list > li { position: relative; }
.main-nav__list .sub-menu {
    z-index: 1001;
    overflow: visible;
}
.mobile-nav { z-index: 1100; }
.cookie-banner { z-index: 1200; }
.wa-float, .mobile-bar { z-index: 1100; }

/* Las flechas/dots del hero conservan su z-index local sin escalar al stacking global.
   Evitamos isolation:isolate aquí porque corta el flujo natural de scroll/sticky. */
.hero-slider__arrow,
.hero-slider__dots { z-index: 6; }

/* ===== Container responsive ===== */
.container {
    max-width: min(var(--container, 1200px), calc(100% - 32px));
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100%; }
}
@media (max-width: 480px) {
    .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ===== Media — imágenes, videos, iframes, embeds, svg ===== */
img, svg, video, iframe, embed, object, picture {
    max-width: 100% !important;
    height: auto;
}
/* Iframes con aspecto fijo (mapas, embeds de plugins) */
.resenas-embed__inner iframe,
.contacto-map iframe,
.ig-block__feed iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== Texto largo (URLs, palabras sin espacios) ===== */
p, h1, h2, h3, h4, h5, li, a, span, strong, em, td, th {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
/* Excepción: títulos de la marca/logo deben mantenerse en línea */
.site-logo, .site-logo__mark, .btn, .eyebrow {
    overflow-wrap: normal;
    word-wrap: normal;
}

/* ===== Tablas: scroll horizontal solo dentro de tabla, no en página ===== */
table { width: 100%; max-width: 100%; }
.table-wrapper, .widefat { overflow-x: auto; max-width: 100%; }

/* ===== Hero — slider arrows y dots dentro del hero ===== */
.hero, .hero-slider {
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 480px) {
    .hero-slider__arrow--prev { left: 4px; }
    .hero-slider__arrow--next { right: 4px; }
    .hero-slider__dots { left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
}

/* ===== Mobile nav fixed panel ===== */
.mobile-nav {
    right: 0;
    max-width: min(360px, 100vw);
}

/* ===== Cookie banner — fix flex que rompe en móvil ===== */
.cookie-banner {
    max-width: 100vw;
    flex-wrap: wrap;
}
.cookie-banner__text { min-width: 0 !important; flex: 1 1 100%; }

/* ===== Footer grid — defensa final ===== */
.site-footer__grid,
.site-footer__bottom {
    max-width: 100%;
}
.site-footer__address a,
.site-footer__email,
.site-footer__menu a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===== Reseñas grid en móvil (scroll-snap intencional) ===== */
@media (max-width: 768px) {
    .resenas-grid {
        overflow-x: auto;
        scrollbar-width: thin;
        /* Evita que el scroll de la grid se propague al body */
        overscroll-behavior-x: contain;
        padding-left: 4px;
        padding-right: 4px;
    }
    .resenas-grid .resena-card { min-width: min(85vw, 320px); }
}

/* ===== Hero split: imagen y texto nunca exceden columna ===== */
.hero__media, .hero__text, .hero__inner { max-width: 100%; min-width: 0; }
.hero__media-img { max-width: 100%; }

/* ===== Cards: grid items nunca exceden ===== */
.cards-grid > *,
.posts-grid > *,
.resenas-grid > *,
.zonas-grid > *,
.resultados-grid > *,
.dif-grid > * {
    max-width: 100%;
    min-width: 0;
}

/* ===== Form inputs nunca exceden ===== */
input, textarea, select, button {
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== Embeds de plugins externos (Trustindex, Elfsight, etc.) ===== */
.resenas-embed__inner > div,
.resenas-embed__inner [class*="ti-widget"],
.resenas-embed__inner [class*="trustindex"],
.resenas-embed__inner [class*="elfsight"] {
    max-width: 100% !important;
}

/* ===== WhatsApp float / mobile bar nunca empujan ===== */
.wa-float, .mobile-bar { max-width: 100vw; box-sizing: border-box; }

/* ===== Headings muy grandes en móvil no rompen ===== */
@media (max-width: 480px) {
    h1, .hero__title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.15;
    }
    h2, .section-title {
        font-size: clamp(1.3rem, 5.5vw, 1.85rem) !important;
    }
}