/**
 * 03-cls-fixes.css - Reservaciones de espacio para evitar CLS.
 * Creado 2026-04-27T08:25:58+00:00
 */

/* === FIX 1: Imagen Javier - aspect ratio fallback ===
 * Si el atributo width/height del HTML aun no se actualizo,
 * el aspect ratio CSS evita el shift al cargar */
img[src*="JavierZentro"],
img[srcset*="JavierZentro"] {
  aspect-ratio: 800 / 1126 !important;
  height: auto !important;
}

/* === FIX 2: Chaty WhatsApp - tamano + posicion reservados ANTES del JS load ===
 * El widget Chaty se inicializa async y crea el button. Reservamos el espacio
 * para que cuando aparezca, no cause shift. */
.chaty-widget,
.chaty-channel,
[id^="chaty-channel"],
.chaty-on-channel,
div[class*="chaty"] {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9997 !important;
  contain: layout;
}
.chaty-widget,
.chaty-channel-list,
[id^="chaty-channel"] {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
}
@media (max-width: 768px) {
  .chaty-widget,
  .chaty-channel,
  [id^="chaty-channel"] {
    bottom: 70px !important;  /* arriba del sticky banner movil */
    right: 16px !important;
  }
  .chaty-widget,
  .chaty-channel-list,
  [id^="chaty-channel"] {
    width: 56px !important;
    height: 56px !important;
  }
}

/* === FIX 3: Header - min-height fijo SIEMPRE (defensivo) ===
 * Aunque ya esta definido, reforzamos con !important para evitar
 * que ningun overrride dinamico (sticky scroll JS) reduzca height
 * y cause shift en re-render. */
header.elementor-location-header,
header.elementor.elementor-location-header,
.elementor-element.elementor-element-270d6d4 {
  min-height: 110px !important;
  contain: layout;
}
@media (max-width: 1024px) {
  header.elementor-location-header,
  header.elementor.elementor-location-header,
  .elementor-element.elementor-element-270d6d4 {
    min-height: 92px !important;
  }
}
@media (max-width: 767px) {
  header.elementor-location-header,
  header.elementor.elementor-location-header,
  .elementor-element.elementor-element-270d6d4 {
    min-height: 64px !important;
  }
}

/* === FIX 4 BONUS: aspect-ratio para todas las imagenes con loading=lazy ===
 * Las lazy-loaded sin width/height son grandes generadores de CLS */
img[loading="lazy"]:not([width]):not([height]) {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

/* === FIX 5: Banner Guia gratuita - reservar padding del body ===
 * Ya esta definido pero refuerzo */
@media (min-width: 769px) {
  body { padding-bottom: 60px !important; }
}
@media (max-width: 768px) {
  body { padding-bottom: 56px !important; }
}


/* ============ HEADER CLS v2 - topbar+navbar total ============
 * Reserva espacio total del header (topbar + navbar) desde el primer paint
 * para que el contenido bajo el header no se reposicione cuando el topbar termina
 * de cargar. Topbar = 32px, Navbar = 110px (desktop) -> total 142px.
 * En mobile el topbar se oculta -> solo 64px.
 * ====================================================================== */

/* Topbar reservar altura desde el primer paint */
.elementor-element.elementor-element-898855e {
    min-height: 32px !important;
    height: 32px !important;
    contain: layout style;
}
@media (max-width: 767px) {
    .elementor-element.elementor-element-898855e {
        min-height: 0 !important;
        height: 0 !important;
        display: none !important;
    }
}

/* Header wrapper total: topbar (32) + navbar (110) = 142 */
header.elementor-location-header,
header.elementor.elementor-location-header {
    min-height: 142px !important;
    contain: layout style;
}
@media (max-width: 1024px) {
    header.elementor-location-header,
    header.elementor.elementor-location-header {
        min-height: 124px !important;
    }
}
@media (max-width: 767px) {
    header.elementor-location-header,
    header.elementor.elementor-location-header {
        min-height: 64px !important;
    }
}

/* Reserva fija para paginas sin pull-up: body padding-top global */
body:not(.page-id-3642):not(.page-id-3643):not(.page-id-3644):not(.page-id-3645):not(.page-id-3646):not(.page-id-3648):not(.page-id-4403):not(.page-id-2036) .site-main {
    /* el ancla del header fixed = 142px desktop / 124 tablet / 64 mobile */
    /* respetamos la regla original del tema, solo defendemos contra colapso */
    contain: layout;
}


/* ============ CHATY POSITION FIX v2 - cht prefix + top/left reset ============ */
/* Selectores ampliados: cubre prefijo chaty- y cht-, todos los IDs/widgets/buttons */
.chaty-widget, .cht-widget, #chaty-widget-0,
.chaty-channel, .cht-channel,
[id^="chaty-channel"], [id^="cht-channel"],
[id^="chaty-widget"], [id^="cht-widget"],
.cht-single-button, .cht-btn,
.cht-channel-list, .chaty-channel-list,
[class*="cht-trigger"] {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 9997 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .chaty-widget, .cht-widget, #chaty-widget-0,
    .chaty-channel, .cht-channel,
    [id^="chaty-channel"], [id^="cht-channel"],
    [id^="chaty-widget"], [id^="cht-widget"],
    .cht-single-button, .cht-btn,
    .cht-channel-list, .chaty-channel-list,
    [class*="cht-trigger"] {
        bottom: 95px !important;
        right: 12px !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
    /* Asegurar que la sticky CTA no monte el chaty */
    .cta-sticky-mobile {
        z-index: 9990 !important;
    }
}

/* Override defensivo: si el plugin pone style inline, lo neutralizamos a nivel de attribute */
[id^="chaty"][style*="top:"],
[id^="cht-"][style*="top:"] {
    top: auto !important;
}
[id^="chaty"][style*="left:"],
[id^="cht-"][style*="left:"] {
    left: auto !important;
}