/* =========================================================
   KUATRO | Logo por dispositivo (DESKTOP + MOBILE)
   Usa:
   - Desktop: .kuatro-logo--white / .kuatro-logo--dark
   - Mobile:  .kuatro-logo-mobile--white / .kuatro-logo-mobile--dark
========================================================= */

/* Default: mostrar oscuro (desktop y mobile) */
.kuatro-logo--white,
.kuatro-logo-mobile--white{ display:none !important; }

.kuatro-logo--dark,
.kuatro-logo-mobile--dark{ display:block !important; }

/* ---------------- DESKTOP ---------------- */
@media (min-width: 992px){

  /* Desktop logo blanco */
  body.desk-light .kuatro-logo--white{ display:block !important; }
  body.desk-light .kuatro-logo--dark{ display:none !important; }

  /* Desktop logo oscuro */
  body.desk-dark .kuatro-logo--dark{ display:block !important; }
  body.desk-dark .kuatro-logo--white{ display:none !important; }

  /* En desktop ocultamos logos mobile */
  .kuatro-logo-mobile--white,
  .kuatro-logo-mobile--dark{ display:none !important; }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 991.98px){

  /* En móvil ocultamos logos desktop */
  .kuatro-logo--white,
  .kuatro-logo--dark{ display:none !important; }

  /* Mobile logo blanco */
  body.mob-light .kuatro-logo-mobile--white{ display:block !important; }
  body.mob-light .kuatro-logo-mobile--dark{ display:none !important; }

  /* Mobile logo oscuro */
  body.mob-dark .kuatro-logo-mobile--dark{ display:block !important; }
  body.mob-dark .kuatro-logo-mobile--white{ display:none !important; }
}


/* =========================================================
   NAV DESKTOP (pill) + Estructura
========================================================= */
.pill-nav{
  position: fixed;
  top: calc(16px * var(--ui-scale));
  left: 0; right: 0;
  width: 100%;
  z-index: 20001;
  padding: 0;
}

.pill-nav .container{
  max-width: var(--nav-max);
  position: relative;
}


/* =========================================================
   PILL SURFACE (Control Center look)
========================================================= */
.pill-surface{
  position: relative; /* necesario para ::before */
  background: var(--glass-dark-bg);
  border: .1px solid var(--glass-dark-border);
  border-radius: 999px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* resplandor interno + sombra */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.24),
    inset 0 9px 24px rgba(255,255,255,.80),
    inset 0 -9px 22px rgba(255,255,255,.80),
    var(--shadow-nav);

  padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
  overflow: visible;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* brillo superior (sheen iOS) */
.pill-surface::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.34),
    rgba(255,255,255,0) 55%
  );
  pointer-events:none;
  opacity: .7;
}


/* =========================================================
   Brand + logo (DESKTOP)
========================================================= */
.kuatro-brand{
  display: flex;
  align-items: center;
  padding-left: calc(22px * var(--ui-scale));
}

.kuatro-logo{
  height: calc(37px * var(--ui-scale));
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* Si tu logo oscuro no debe tener sombra */
.kuatro-logo--dark{
  filter: none;
}


/* =========================================================
   LINKS (pill) + CTA
   (✅ aquí se arregla tu problema de hover/letra negra en dark)
========================================================= */
.pill-link{
  color: rgba(255,255,255,.88) !important;
  padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale)) !important;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
  transition: all .20s cubic-bezier(.4,0,.2,1);
  font-size: calc(16px * var(--ui-scale));
  line-height: 1;
}

.pill-link:hover,
.nav-item.dropdown.show > .pill-link{
  background: var(--accent) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
}

.pill-link:focus,
.pill-link:active,
.pill-link:focus-visible,
.nav-link.dropdown-toggle:focus,
.nav-link.dropdown-toggle:active,
.nav-link.dropdown-toggle:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* CTA (Cotizar) */
.pill-cta{
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700;
  padding: calc(10px * var(--ui-scale)) calc(18px * var(--ui-scale)) !important;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.pill-cta:hover{
  background: rgba(255,255,255,.95) !important;
  color: var(--accent) !important;
}


/* =========================================================
   MEGA MENU base (Productos, etc.)
========================================================= */
.pill-nav .dropdown-menu.mega-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  overflow: hidden;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);

  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;

  z-index: 20000;
  padding: 0;
}

.pill-nav .dropdown-menu.mega-menu.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* PRODUCT CARDS */
.product-card{
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.70);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.82);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
}
.product-media{ padding: calc(16px * var(--ui-scale)) calc(16px * var(--ui-scale)) 0; }
.product-media img{
  width: 100%;
  height: calc(220px * var(--ui-scale));
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.product-body{ padding: calc(16px * var(--ui-scale)); }
.product-title{
  font-size: calc(20px * var(--ui-scale));
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.product-desc{
  font-size: calc(14px * var(--ui-scale));
  color: rgba(30,41,59,.85);
  line-height: 1.35;
  min-height: 38px;
}
.product-bottom{
  margin-top: calc(12px * var(--ui-scale));
  padding-top: calc(12px * var(--ui-scale));
  border-top: 1px solid rgba(0,0,0,.08);
}
.product-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
  color: var(--text-dark);
  font-weight: 700;
  text-decoration: none;
}
.product-pill:hover{
  background: var(--accent);
  color: #fff;
}


/* =========================================================
   MEGA MENU - ACERCA DE KUATRO (aislado)
========================================================= */
.mega-acerca-menu{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.20);
  padding: 0;
}

.mega-acerca-menu .mega-shell{ padding: 22px; }

.mega-acerca-menu .mega-split{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: stretch;
}

.mega-acerca-menu .mega-list{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.mega-acerca-menu .mega-list-title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(15,23,42,.70);
  margin: 6px 8px 10px;
}

.mega-acerca-menu .mega-option{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--text-dark) !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .18s ease, transform .18s ease, color .18s ease;
  cursor: pointer;
}

.mega-acerca-menu .mega-option small{
  display: block;
  font-weight: 500;
  color: rgba(30,41,59,.75);
  margin-top: 2px;
}

.mega-acerca-menu .mega-option:hover{
  background: rgba(243,81,9,.10);
  transform: translateY(-1px);
}

.mega-acerca-menu .mega-option.is-active{
  background: var(--accent);
  color: #fff !important;
}

.mega-acerca-menu .mega-option.is-active small{
  color: rgba(255,255,255,.88);
}

.mega-acerca-menu .mega-preview{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  min-height: 320px;
}

.mega-acerca-menu .mega-preview-stack{
  position: absolute;
  inset: 0;
}

.mega-acerca-menu .mega-preview-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .22s ease, transform .22s ease;
}

.mega-acerca-menu .mega-preview-img.is-active{
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   NAV dinámico blanco (si lo usas con JS)
   (✅ aquí se blinda también el CTA)
========================================================= */
.nav-dynamic.show-white .pill-surface{
  background: var(--glass-light-bg) !important;
  border-color: var(--glass-light-border) !important;
  box-shadow: var(--shadow-nav-white) !important;
}

.nav-dynamic.show-white .pill-link{
  color: var(--text-dark) !important;
}

.nav-dynamic.show-white .pill-link:hover,
.nav-dynamic.show-white .nav-item.dropdown.show > .pill-link{
  background: var(--accent) !important;
  color: #fff !important;
}

.nav-dynamic.show-white .pill-cta{
  background: var(--accent) !important;
  color: #fff !important;
}

.nav-dynamic.show-white .pill-cta:hover{
  background: rgba(255,255,255,.95) !important;
  color: var(--accent) !important;
}


/* =========================================================
   MOBILE NAV
========================================================= */
.kuatro-mobile-nav{
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 21000;
}

.kuatro-mobile-bar{
  max-width: var(--nav-max);
  margin: 0 auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kuatro-logo-mobile{
  height: 28px;
  width: auto;
  display: block;
}

/* Botón Menú (material) */
.kuatro-mobile-menu-btn{
  background: rgba(180, 180, 180, .22) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;

  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  box-shadow:
    0 14px 40px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24) !important;

  border-radius: 14px !important;
  padding: 10px 12px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Theme light (mobile + surface + links) */
body.theme-light .pill-surface{
  background: rgba(245,245,245,.55) !important;
  border-color: rgba(0,0,0,.08) !important;
}

body.theme-light .pill-link{
  color: rgba(15,23,42,.82) !important;
}

body.theme-light .kuatro-mobile-menu-btn{
  background: rgba(245,245,245,.55) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: rgba(15,23,42,.90) !important;
}


/* OFFCANVAS arriba de TODO */
.pill-offcanvas.offcanvas{
  width: min(92vw, 380px);
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  z-index: 22000 !important;
}
.offcanvas-backdrop{ z-index: 21999 !important; }


/* HERO overlay (si lo ocupas en páginas) */
.kuatro-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,.08) 70%,
    rgba(0,0,0,.28) 100%
  );
}


/* =========================================================
   Responsive
========================================================= */
@media (max-width: 991.98px){
  :root{ --ui-scale: 1; }
  .pill-nav{ top: 10px; }
  .kuatro-logo{ height: 32px; }
}

/* Responsive del split de "Acerca" */
@media (max-width: 1199.98px){
  .mega-acerca-menu .mega-split{
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 991.98px){
  .mega-acerca-menu .mega-split{
    grid-template-columns: 1fr;
  }
  .mega-acerca-menu .mega-preview{
    min-height: 220px;
  }
}


/* =========================================================
   FIX: centrado del mega-acerca en desktop
========================================================= */
@media (min-width: 992px){
  .pill-surface{ overflow: visible !important; }
  .pill-nav, .pill-nav .container{ overflow: visible !important; }

  .pill-nav{ z-index: 20001 !important; }
  .pill-nav .dropdown-menu.mega-menu{ z-index: 20000 !important; }

  .pill-nav .navbar-nav,
  .pill-nav .nav-item.dropdown{
    position: static;
  }

  .pill-nav .mega-acerca .dropdown-menu.mega-acerca-menu{
    width: min(920px, calc(100vw - 48px)) !important;
    left: 50% !important;
    right: auto !important;
    top: calc(100% + 8px) !important;
    transform: translateX(-50%) translateY(6px) !important;
  }

  .pill-nav .mega-acerca .dropdown-menu.mega-acerca-menu.show{
    transform: translateX(-50%) translateY(0) !important;
  }
}



/* =========================================================
   FIX FINAL: links siempre oscuros + hover naranja/blanco
   CTA siempre naranja/blanco + hover blanco/naranja
   (Pegar al FINAL de header.css)
========================================================= */

/* 1) Links del nav SIEMPRE en gris oscuro (no blancos) */
.pill-nav .pill-link{
  color: rgba(15,23,42,.86) !important;  /* gris/negro */
}

/* Si hay íconos/flechita del dropdown, que también sea oscuro */
.pill-nav .pill-link,
.pill-nav .pill-link *{
  color: inherit !important;
}

/* 2) Hover / abierto: fondo naranja + letras blancas (SIEMPRE) */
.pill-nav .pill-link:hover,
.pill-nav .nav-item.dropdown.show > .pill-link{
  background: var(--accent) !important;
  color: #fff !important;
}

/* 3) CTA Cotizar: siempre naranja con letras blancas */
.pill-nav .pill-cta{
  background: var(--accent) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* 4) CTA hover: blanco con letras naranja */
.pill-nav .pill-cta:hover{
  background: rgba(255,255,255,.95) !important;
  color: var(--accent) !important;
}

/* Por si Bootstrap mete estilos raros en focus/active */
.pill-nav .pill-link:focus,
.pill-nav .pill-link:active,
.pill-nav .pill-cta:focus,
.pill-nav .pill-cta:active{
  box-shadow: none !important;
  outline: none !important;
}

/* =========================================================
   FIX DEFINITIVO CTA COTIZAR
========================================================= */

/* Siempre naranja + blanco */
.pill-nav .pill-cta{
  background: var(--accent) !important;
  color: #fff !important;
}

/* Hover blanco + naranja */
.pill-nav .pill-cta:hover{
  background: #ffffff !important;
  color: var(--accent) !important;
}

/* Evita que theme-light lo vuelva negro */
body.theme-light .pill-cta{
  color: #ffffff !important;
}


/* =========================================================
   MOBILE OFFCANVAS: links SIEMPRE gris/negro
========================================================= */

/* Dentro del offcanvas (menú móvil) el fondo es blanco,
   entonces el texto debe ser oscuro */
.pill-offcanvas .pill-link{
  color: rgba(15,23,42,.82) !important;
}

/* Hover en móvil: fondo naranja + texto blanco */
.pill-offcanvas .pill-link:hover{
  background: var(--accent) !important;
  color: #fff !important;
}

/* =========================================================
   MOBILE OFFCANVAS – Correcciones finales
========================================================= */

/* 1️⃣ Links normales en gris */
.pill-offcanvas .pill-link{
  color: rgba(15,23,42,.82) !important;
}

/* 2️⃣ Hover links normales */
.pill-offcanvas .pill-link:hover{
  background: var(--accent) !important;
  color: #fff !important;
}

/* 3️⃣ BOTÓN COTIZAR (SIEMPRE naranja con texto blanco) */
.pill-offcanvas .pill-cta{
  background: var(--accent) !important;
  color: #fff !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 4️⃣ Hover Cotizar */
.pill-offcanvas .pill-cta:hover{
  background: #fff !important;
  color: var(--accent) !important;
}



/* ===========================
   TYPEFORM: fullscreen
=========================== */
.tf-v1-popup,
.tf-v1-popover{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 999999 !important;

  /* blur real del sitio detrás */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* fondo oscuro */
  background: rgba(0,0,0,.65) !important;
}


/* elimina el fondo gris interno */
.tf-v1-popup-overlay,
.tf-v1-popover-overlay{
  background: transparent !important;
}







/* Fondo oscuro + blur */
.promo-modal{
  position: fixed;
  inset: 0;

  /* oscuro */
  background: rgba(0,0,0,.72);

  /* blur del fondo */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: none;
  place-items: center;
  z-index: 999999;
  padding: 22px;

  transition: opacity .3s ease;
}

/* cuando abre */
.promo-modal.is-open{
  display: grid;
}

/* caja del banner */
.promo-modal__box{
  width: min(980px, 92vw);
  max-height: 90vh;

  background: #fff;
  border-radius: 16px;
  overflow: hidden;

  position: relative;

  box-shadow: 0 40px 120px rgba(0,0,0,.45);
}

/* imagen */
.promo-modal__img{
  width: 100%;
  height: auto;
  display: block;
}

/* botón cerrar */
.promo-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 44px;
  height: 44px;

  border: none;
  border-radius: 12px;

  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);

  color: #fff;
  font-size: 26px;

  cursor: pointer;
}