/* ==========================================================================
   ECSO EXTERIOR SPECIALIST - PERFECT MATCH RUNTIME CSS
   Precision overrides to guarantee 1:1 identical layout, animations and behavior
   ========================================================================== */

/* 1. Prevent default body/HTML margin and lateral overflow */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  background-color: #ffffff;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Top-level containers */
#page, #content, #main, .site-main, .elementor, .ct-container-full {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Stretched Sections (Blocksy + Elementor) - stretch seamlessly 100vw without JS latency */
.elementor-section.elementor-section-stretched,
.elementor-section.elementor-section-full_width,
section.ct-section-stretched {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  position: relative !important;
}

/* 4. Boxed Containers inside sections follow Blocksy default 1290px */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--normal-container-max-width, 1290px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Full-width sections (Header, Top bar, etc.) stretch across full container */
.elementor-section.elementor-section-full_width > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* 5. Header: Location & Transparency Overlays */
header.elementor-location-header {
  width: 100% !important;
  position: relative;
  z-index: 999;
  display: block;
}

/* Top bar (Section 3a662b7) styling */
.elementor-element-3a662b7 {
  background-color: #00000000 !important;
}

/* Main Nav (Section ef9d3ad) styling */
.elementor-element-ef9d3ad {
  background-color: #00000000 !important;
}

/* 6. Hero Section overlap under transparent header */
.elementor-element.elementor-element-70ea546 {
  margin-top: -118px !important;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .elementor-element.elementor-element-70ea546 {
    margin-top: -118px !important;
  }
}

@media (max-width: 767px) {
  .elementor-element.elementor-element-70ea546 {
    margin-top: -235px !important;
  }
}

/* 7. Footer: Location */
footer.elementor-location-footer {
  display: block;
  width: 100% !important;
}

/* 8. Elementor Invisible Animations: ensure content is rendered clean if JS is waiting for scroll */
.elementor-invisible {
  visibility: visible !important;
}

/* 9. JoinChat button floating styling: Clean circular WhatsApp icon without auto-popups */
.joinchat__chat,
.joinchat__button__sendtext {
  display: none !important;
}

.joinchat__button {
  background-color: #25d366 !important;
  border-radius: 50% !important;
}

.joinchat {
  --bottom: 20px;
  --right: 20px;
  z-index: 9999;
}

/* 10. Forms and Feedback */
.form-feedback {
  margin-top: 15px;
  padding: 12px 15px;
  border-radius: 6px;
  display: none;
  font-weight: 600;
  font-size: 14px;
}

.form-feedback.success {
  display: block;
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-feedback.error {
  display: block;
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* 11. Gallery Grid - 100% Rigid Geometry (Zero layout shifts) */
.elementor-gallery__container,
.e-gallery-container,
.e-gallery-grid,
.e-gallery-grid.e-gallery--animated {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  padding-bottom: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .elementor-gallery__container,
  .e-gallery-container,
  .e-gallery-grid,
  .e-gallery-grid.e-gallery--animated {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 767px) {
  .elementor-gallery__container,
  .e-gallery-container,
  .e-gallery-grid,
  .e-gallery-grid.e-gallery--animated {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 10px !important;
  }
}

/* Las tarjetas del grid tienen posición y geometría fija inmutable */
.e-gallery-item,
.e-gallery-grid .e-gallery-item,
.e-gallery-grid.e-gallery--animated .e-gallery-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  display: block !important;
  background-color: #f2f2f2 !important;
}

/* La imagen interna maneja el aspect ratio y la suave aparición al scrollear */
.e-gallery-image {
  display: block !important;
  width: 100% !important;
  padding-bottom: 66.66% !important; /* Ratio 3:2 exacto */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out !important;
  will-change: opacity, transform;
}

/* Revelación suave al entrar al viewport al hacer scroll */
.e-gallery-item.e-revealed .e-gallery-image,
.e-gallery-image.e-revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.e-gallery-item:hover .e-gallery-image {
  transform: scale(1.05) !important;
}

.elementor-gallery-item__overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

.e-gallery-item:hover .elementor-gallery-item__overlay {
  opacity: 1 !important;
}