/* ============================================================
   Casa Vidrios — estilos propios del proyecto autohospedado.
   Complementan a casavidrios.css (hoja base heredada de Webflow,
   ya autoservida y con sus URLs apuntando a /assets/img).
   Aquí vive todo lo que en el sitio original inyectaban scripts
   registrados de Webflow (navbar scroll, hover de nav, hover de
   iconos) reescrito como CSS/JS propios, más utilidades de reveal.
   ============================================================ */

/* ---------- Navbar: estado scrolleado (desktop) ----------
   Reemplaza a NavbarScrollV5. En >=992px, al scrollear el navbar
   pasa a fondo navy con links en blanco y logo blanco. */
@media (min-width: 992px) {
  .section.js-navbar.is-scrolled {
    background-color: #29176d;
    box-shadow: 0 1px 8px rgba(5, 2, 13, 0.15);
  }
  .section.js-navbar.is-scrolled .fbl-nav-link-1 { color: #ffffff; }
  .section.js-navbar.is-scrolled .fbl-nav-link-1:hover { color: rgba(255, 255, 255, 0.72); }
  .section.js-navbar.is-scrolled .fbl-nav-link-1.w--current { color: #ffffff; }
  .section.js-navbar.is-scrolled .fbl-logo-1 { opacity: 0; }
  .section.js-navbar.is-scrolled .w-nav-brand {
    background-image: url('../assets/img/6a7c88e29a912b623a113cb1_Logo-casavidrios-blanco.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 56px;
  }
  .section.js-navbar.is-scrolled .btn-cta-nav-bar {
    background-color: #e8401e;
    border-color: #e8401e;
  }
}

/* Transición suave del navbar y ligero shrink de padding al scrollear */
.section.js-navbar { transition: background-color 250ms ease; }
.section.js-navbar .fbl-navbar-1 { transition: padding-top 250ms ease, padding-bottom 250ms ease; }
.section.js-navbar.is-scrolled .fbl-navbar-1 { padding-top: 6px; padding-bottom: 6px; }

/* Fix transición del CTA del nav (antes lo pisaba NavHoverStylesV2) */
.hero_cta.hero_cta--primary.btn-cta-nav-bar {
  transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 150ms ease-out,
    background-color 0.3s ease, border-color 0.3s ease;
}
.hero_cta.hero_cta--primary.btn-cta-nav-bar:hover { transform: translateY(-2px); }

/* ---------- Subrayado animado de los links del nav ----------
   Reemplaza a NavHoverStylesV2. El texto de cada link se envuelve
   en .cv-nav-text por JS. */
.cv-nav-text { position: relative; display: inline-block; }
.cv-nav-text::after {
  content: ""; position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease; border-radius: 2px;
}
.w-nav-link:hover .cv-nav-text::after,
.w-nav-link.w--current .cv-nav-text::after { transform: scaleX(1); }

/* ---------- Menú móvil (<=991px) ----------
   Reemplaza el overlay que armaba el runtime de Webflow. */
@media (max-width: 991px) {
  .fbl-nav-wrap-1 { position: relative; }
  .fbl-navbar-1.w-nav .fbl-nav-menu-1.w-nav-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background-color: #29176d;
    padding: 12px 20px 18px;
    box-shadow: 0 12px 24px rgba(5, 2, 13, 0.25);
    border-radius: 0 0 12px 12px;
    z-index: 60;
  }
  .js-navbar.cv-nav-open .fbl-nav-menu-1.w-nav-menu { display: flex; }
  .fbl-navbar-1.w-nav .fbl-nav-menu-1.w-nav-menu .fbl-nav-link-1 {
    color: #ffffff;
    padding: 10px 4px;
  }
  .fbl-navbar-1.w-nav .fbl-nav-menu-1.w-nav-menu .nav-link--cta { color: #ffffff; }
}

/* ---------- Hover de iconos de "features" (home) ----------
   Reemplaza a FeaturesIconsHover. */
.features_item .ico-hover { display: none; }
.features_item:hover .ico-default,
.features_item.is-active .ico-default { display: none; }
.features_item:hover .ico-hover,
.features_item.is-active .ico-hover { display: block; }

/* ---------- Barra de progreso de scroll (elemento .progress-bar del navbar) ---------- */
.section.js-navbar .progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: #e8401e;
  z-index: 70;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ---------- Marquee de la home ----------
   El track .master-moving-text traía opacity:0 inline (estado inicial de una
   interacción IX2 huérfana que nunca se importó, sin script que la revelara).
   Lo forzamos visible; la animación la maneja el <style> embebido de la sección. */
.moving-text-section .master-moving-text { opacity: 1 !important; }

/* ---------- Utilidades de reveal on-scroll ----------
   Reemplazan las animaciones GSAP/ScrollTrigger de cada página.
   Las clases .cv-reveal las agrega main.js SOLO si hay JS, así que
   sin JS todo el contenido queda visible. */
.cv-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.cv-reveal.cv-reveal--left  { transform: translateX(-50px); }
.cv-reveal.cv-reveal--right { transform: translateX(50px); }
.cv-reveal.cv-reveal--in    { transform: translateX(40px); }
.cv-reveal.cv-reveal--scale { transform: translateY(24px) scale(.93); }
.cv-reveal.cv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Slider (reemplazo del runtime de Webflow) ----------
   main.js reorganiza los .w-slide dentro de un track flex. */
.cv-slider-track {
  display: flex;
  height: 100%;
  transition: transform .5s ease;
  will-change: transform;
}
.cv-slider-track > .w-slide {
  flex: 0 0 100%;
  width: 100%;
  white-space: normal;
}
.w-slider-mask { overflow: hidden; }
.w-slider-arrow-left, .w-slider-arrow-right { cursor: pointer; user-select: none; }

/* ---------- Carrusel de galería (Glass Building) ----------
   Banner tipo carrusel que muestra varias imágenes a la vez con
   autoplay y loop continuo. main.js (initGalleryCarousel) arma un
   track flex de slides clonados; aquí van layout y transición. */
.fbl-slider-3 .w-slider-mask,
.fbl-slider-3-mask,
.fbl-testimonial-1-slider .w-slider-mask,
.fbl-testimonial-1-mask { width: 100%; max-width: none; overflow: hidden; }
.cv-carousel-track {
  display: flex;
  gap: 24px;
  align-items: stretch;
  will-change: transform;
}
.cv-carousel-track.is-anim {
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.cv-carousel-track > .cv-cslide {
  flex: 0 0 auto;
  display: flex;
  margin: 0;
  white-space: normal;
}
/* Galería Glass Building (imágenes) */
.cv-carousel-track > .cv-cslide .fbl-slider-3-image {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
@media (max-width: 700px) {
  .cv-carousel-track > .cv-cslide .fbl-slider-3-image { height: 260px; }
}
/* Testimonios Nosotros (tarjetas de igual altura) */
.cv-carousel-track > .cv-cslide > .nt-tst_card {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Feedback del formulario de contacto (sin backend) */
.w-form-done, .w-form-fail { display: none; }
.w-form-done.cv-show, .w-form-fail.cv-show { display: block; }