/* =========================================================
   +QUECLIMA — Site Styles (cleaned & deduplicated)
   ========================================================= */

/* ---------------------------
   Variables de tema
---------------------------- */
:root{
  /* Base */
  --main:#181b1e;
  --sub:#262a2e;
  --accent:#0074e8;
  --accent2:#25d366;
  --neutral:#fff;
  --grey:#f3f3f3;

  /* WhatsApp */
  --wa:#25d366;
  --wa-dark:#1fb158;
  --wa-bottom: max(16px, env(safe-area-inset-bottom));
  --wa-size:56px;
}

/* ---------------------------
   Reset básico
---------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"Montserrat",Arial,sans-serif;
  background:var(--grey);
  color:var(--main);
  line-height:1.6;
}

/* ---------------------------
   HEADER / NAVBAR
---------------------------- */
header{
  position:fixed;inset:0 auto auto 0;width:100%;z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  transition:all .3s ease;
}
.navbar-brand{font-size:1.8rem;font-weight:bold;color:#4a5568!important;}
.navbar-toggler{border:none;padding:.25rem .5rem;}
.navbar-toggler:focus{box-shadow:none;}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2874,85,104,.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-nav .nav-link{color:#4a5568!important;font-weight:500;margin:0 10px;transition:color .3s;}
.navbar-nav .nav-link:hover{color:var(--accent)!important;}
.main-menu{gap:.35rem;}
.main-menu .nav-link{padding:.5rem .75rem!important;font-weight:500;}

/* Selector de idioma */
.lang-switch{display:flex;gap:.35rem;align-items:center;margin-left:auto;}
.lang-switch .nav-item{display:inline-flex;}
.lang-link{display:inline-flex;align-items:center;padding:.25rem .35rem!important;line-height:1;}
.lang-link .lang-flag{
  width:16px;height:12px;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.lang-link.active,.lang-link:hover{color:var(--accent)!important;}

/* ---------------------------
   HERO
---------------------------- */
.hero{
  margin-top:42px; color:#fff; text-align:center;
  padding:8rem 0; position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:center; z-index:0;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-img,.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
/* Overlay único (deduplicado) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(8,10,12,0.14) 0%,
    rgba(8,10,12,0.34) 55%,
    rgba(8,10,12,0.72) 100%
  );
}
@media (max-width: 768px){
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(8,10,12,0.18) 0%,
      rgba(8,10,12,0.40) 55%,
      rgba(8,10,12,0.78) 100%
    );
  }
}
.hero .container{position:relative;z-index:2;}
.hero h1{
  color:#fff; font-weight:700; letter-spacing:.2px; margin-bottom:1rem;
  font-size:clamp(2rem,5vw,3.5rem);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.hero p{
  color:#e7edf5; opacity:.95; margin-bottom:2rem;
  font-size:clamp(1rem,1.6vw,1.3rem);
}
.hero-video{opacity:0;transition:opacity .35s ease;}
.hero-video.is-ready{opacity:1;}
@media (max-width: 991.98px){ .hero-video{ display:none !important; } }

/* CTAs del hero */
.cta-group{
  display:flex;justify-content:center;align-items:center;
  gap:1rem;flex-wrap:wrap;margin-top:1.25rem;
}
.hero .cta-group a,
a.cta-button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2.2rem;border:0;border-radius:40px;
  background:var(--accent);color:#fff !important;
  font-weight:700;font-size:1.05rem;text-decoration:none !important;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hero .cta-group a:hover,
a.cta-button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(0,0,0,.24);
  background:#ff953e;
}
.hero .cta-group a.cta-whatsapp,
a.cta-button.cta-whatsapp{
  background:var(--accent2);
  box-shadow:0 4px 20px #25d36644;
}
.hero .cta-group a.cta-whatsapp:hover,
a.cta-button.cta-whatsapp:hover{
  background:#23ba5f;
}

/* ---------------------------
   SECCIONES GENÉRICAS
---------------------------- */
.section-title{
  text-align:center;font-size:2.2rem;margin-bottom:2.5rem;color:var(--main);font-weight:700;
}

/* ---------------------------
   Servicios (versión clásica)
---------------------------- */
.services{padding:5.5rem 0 4rem;background:#fff;}
.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2.2rem;margin-top:2rem;
}
.service-card{
  background:var(--grey);padding:2.1rem 1.2rem 2rem;border-radius:16px;min-height:310px;
  box-shadow:0 3px 16px #181b1e0c;display:flex;flex-direction:column;align-items:center;
  transition:box-shadow .2s,transform .2s;
}
.service-card:hover{transform:translateY(-7px) scale(1.03);box-shadow:0 6px 24px #181b1e22;}
.service-card img{width:60px;height:60px;object-fit:contain;margin-bottom:.7rem;filter:grayscale(10%) contrast(1.2);}
.service-card h3{font-size:1.15rem;margin-bottom:.7rem;color:var(--main);font-weight:700;text-align:center;}
.service-card p{color:#444;font-size:1rem;text-align:center;}

/* ---------------------------
   Servicios (versión minimal v3)
---------------------------- */
.services--minimal{ background:#fff; padding:5rem 0 4rem; --ico-size:60px; --ico-size-sm:50px; }
.services--minimal .services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px; margin-top:2rem;
}
.services--minimal .service-card{
  background:#fff; border:1px solid #e9edf3; border-radius:16px;
  padding:26px 22px; box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.services--minimal .service-card:hover{
  transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.08); border-color:#dde3eb;
}
.services--minimal .service-ico{ color:var(--accent); margin-bottom:16px; line-height:0; }
.services--minimal .service-ico svg{ width:var(--ico-size); height:var(--ico-size); display:inline-block; }
.services--minimal .service-card h3{ font-size:1.06rem; font-weight:700; letter-spacing:.2px; margin:4px 0 10px; color:#111; }
.services--minimal .service-sep{ height:1px; background:linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.03)); margin:10px 0 14px; border-radius:1px; }
.services--minimal .service-card p{
  color:#445; font-size:.98rem; line-height:1.7; text-align:justify; text-justify:inter-word; hyphens:auto; margin:0; text-wrap:balance;
}
@media (max-width:600px){
  .services--minimal .service-ico svg{ width:var(--ico-size-sm); height:var(--ico-size-sm); }
  .services--minimal .service-card{ padding:22px 18px; }
}

/* ---------------------------
   Nosotros
---------------------------- */
.nosotros{
  background:linear-gradient(0deg,rgba(24,27,30,.68),rgba(24,27,30,.48)),
             url("../img/especialista-limpia-y-repara-el-aire-acondicionado-de-pared.jpg") center/cover no-repeat;
  padding:4rem 0 3rem;color:#fff;text-align:center;position:relative;
}
.nosotros-title{color:#fff;font-size:2.3rem;margin-bottom:1.3rem;}
.nosotros-desc{
  max-width:680px;margin:0 auto;background:rgba(24,27,30,.55);
  border-radius:12px;padding:2.4rem 1.3rem;font-size:1.08rem;box-shadow:0 4px 24px #181b1e22;
}

/* ---------------------------
   Zona
---------------------------- */
.zona{background:#fff;color:#000;padding:4.5rem 0 3.5rem;}
.zona-title{text-align:center;font-size:2rem;margin-bottom:1.6rem;color:#000;}
.zona-lista{text-align:center;font-size:1.1rem;margin-bottom:1.4rem;}
.zona-mapa{display:flex;justify-content:center;margin-top:1rem;}

/* ---------------------------
   FAQ
---------------------------- */
.faq{background:var(--sub);color:#fff;padding:4rem 0 2.5rem;}
.faq-title{text-align:center;font-size:2rem;color:#fff;margin-bottom:1.2rem;}

/* ---------------------------
   Marcas (Swiper + fallback)
---------------------------- */
.brand-logo{
  display:block; max-height:60px; width:auto;
  opacity:.95; filter:grayscale(100%) contrast(1.1);
  transition: filter .25s, opacity .25s, transform .25s;
}
.brand-logo:hover{ filter: grayscale(0%); opacity:1; transform: translateY(-1px); }
/* Fallback SOLO cuando Swiper NO está inicializado */
#brandSwiper:not(.swiper-initialized) .swiper-wrapper,
.brand-swiper:not(.swiper-initialized) .swiper-wrapper{
  display:flex;
  gap:28px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:6px 4px;
}
#brandSwiper:not(.swiper-initialized) .swiper-slide,
.brand-swiper:not(.swiper-initialized) .swiper-slide{
  flex:0 0 auto;
  scroll-snap-align:center;
}

/* Cuando Swiper está activo, asegura que NO salga scroll */
#brandSwiper.swiper-initialized,
.brand-swiper.swiper-initialized{
  overflow:hidden;           /* Swiper lo pone, lo reforzamos */
}
#brandSwiper.swiper-initialized .swiper-wrapper,
.brand-swiper.swiper-initialized .swiper-wrapper{
  overflow:visible;          /* evita barra extra en algunos temas */
}


/* ---------------------------
   Contacto
---------------------------- */
.contact{padding:5rem 0 3.5rem;background:#fff;}
.contact-content{
  display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:flex-start;
  max-width:950px;margin:0 auto;
}
.contact-info h3{font-size:1.3rem;margin-bottom:1.1rem;color:var(--main);}
.contact-item{display:flex;align-items:center;margin-bottom:1.1rem;background:var(--grey);padding:.85rem 1rem;border-radius:9px;}
.contact-item i{font-size:1.45rem;color:var(--accent);margin-right:1rem;}
.contact-form{background:var(--grey);padding:2rem 1.5rem;border-radius:13px;box-shadow:0 3px 16px #181b1e0d;}
.contact-form h3{font-size:1.15rem;margin-bottom:1rem;color:#000;}
.form-group{margin-bottom:1.3rem;}
.form-group label{display:block;margin-bottom:.4rem;font-weight:500;color:var(--main);}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:.7rem;border:2px solid #e2e8f0;border-radius:7px;font-size:1rem;transition:border-color .2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent);}
.submit-btn{
  background:var(--accent);color:#fff;padding:.9rem 2rem;border:none;border-radius:8px;
  font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;
}
.submit-btn:hover{background:#ff953e;transform:translateY(-2px);}

/* ---------------------------
   Opiniones / Footer
---------------------------- */
.opiniones{background:#fff;padding:4rem 0 3rem;}
footer{text-align:center;}

/* ---------------------------
   WhatsApp (único bloque)
---------------------------- */
.whatsapp-floating{
  position:fixed; right:1rem; bottom:var(--wa-bottom);
  z-index:2147483640; display:inline-flex; align-items:center; gap:.6rem;
  background:#fff; color:var(--wa) !important; border:2px solid var(--wa);
  border-radius:999px; padding:.85rem 1.2rem; font-weight:700; text-decoration:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18), 0 0 0 4px rgba(37,211,102,.10);
  will-change: transform;
}
.whatsapp-floating:hover{ background:var(--wa); color:#fff !important; box-shadow:0 12px 28px rgba(37,211,102,.28); }
.whatsapp-floating:focus-visible{ outline:3px solid rgba(255,255,255,.95); outline-offset:3px; }

/* Variante FAB compacta */
.whatsapp-floating.is-fab{
  right:16px; bottom:calc(var(--wa-bottom) + 16px);
  display:flex; align-items:center; overflow:hidden;
  width:var(--wa-size); height:var(--wa-size); padding:0;
  border-radius:999px; background:var(--wa); color:#fff !important;
  border:none; box-shadow:0 10px 24px rgba(0,0,0,.2);
  transition:width .2s ease, padding .2s ease, box-shadow .2s;
}
.whatsapp-floating.is-fab .wa-icon{ display:block; width:24px; height:24px; margin:auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.whatsapp-floating.is-fab .wa-label{ white-space:nowrap; margin-left:8px; font-weight:700; opacity:0; max-width:0; transition:max-width .2s, opacity .2s, margin-left .2s; color:#fff !important; }
@media (hover:hover) and (pointer:fine){
  .whatsapp-floating.is-fab:hover,
  .whatsapp-floating.is-fab:focus-visible{ width:auto; padding:8px 12px; box-shadow:0 12px 28px rgba(0,0,0,.25); }
  .whatsapp-floating.is-fab:hover .wa-label,
  .whatsapp-floating.is-fab:focus-visible .wa-label{ opacity:1; max-width:220px; margin-left:8px; }
}
@media (max-width:640px){ .whatsapp-floating.is-fab{ width:var(--wa-size); height:var(--wa-size); padding:0; } .whatsapp-floating.is-fab .wa-label{ display:none; } }

/* Pulso circular clásico (si lo usas con <a class="btn-whatsapp-pulse">) */
.btn-whatsapp-pulse{
  background: var(--wa); color: #fff; position: fixed; bottom: 20px; right: 20px;
  font-size: 40px; display: flex; justify-content: center; align-items: center;
  width: 0; height: 0; padding: 35px; text-decoration: none; border-radius: 50%;
  animation: pulse 1.5s ease-out infinite;
  z-index:2147483639;
}
.btn-whatsapp-pulse-border{ bottom:120px; right:20px; animation-play-state:paused; }
.btn-whatsapp-pulse-border::before{
  content:""; position:absolute; border-radius:50%; padding:25px; border:5px solid var(--wa);
  opacity:.75; animation: pulse-border 1.5s ease-out infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 80%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} }
@keyframes pulse-border{ 0%{ padding:25px; opacity:.75;} 75%{ padding:50px; opacity:0;} 100%{ opacity:0;} }

/* ---------------------------
   Modales (quote + feedback)
---------------------------- */
.quote-modal .modal-content,
#thanksModal .modal-content,
#errorModal .modal-content{
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  border:none; border-radius: 16px;
}
.quote-modal .form-control, .quote-modal .form-select{
  border: 2px solid #e9eef5; border-radius: 10px;
}
.quote-modal .form-control:focus, .quote-modal .form-select:focus{
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(0,116,232,.12);
}
@media (max-width:576px){ .quote-modal .btn-lg{ padding:.8rem 1rem; font-size:1rem; } }

/* ---------------------------
   Móvil (navbar bonita)
---------------------------- */
@media (max-width:991.98px){
  .navbar-collapse{position:absolute;top:100%;left:0;right:0;padding:0 1rem;z-index:1020;}
  .mobile-panel{
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border:1px solid #e9edf3;border-radius:16px;
    box-shadow:0 12px 32px rgba(0,0,0,.12);
    padding:.75rem;margin:.5rem 0 1rem;
    transform-origin:top center;transform:translateY(-6px) scale(.98);opacity:0;
    transition:transform .18s ease,opacity .18s ease;
  }
  .navbar-collapse.show .mobile-panel{transform:none;opacity:1;}

  .main-menu{flex-direction:column;gap:.25rem;}
  .main-menu .nav-link{ padding:.85rem 1rem!important; border-radius:12px; font-size:1.05rem; }
  .main-menu .nav-link:hover,.main-menu .nav-link:active{ background:#f6f9ff;color:var(--accent)!important; }

  .navbar-collapse .lang-switch{
    flex-direction:row!important;flex-wrap:nowrap;justify-content:center;
    gap:.5rem;margin-top:.4rem;padding-top:.5rem;border-top:1px dashed #e7ecf3;
  }
  .lang-link{padding:.4rem!important;border-radius:8px;}
  .lang-link:hover{background:#f7f9fc;}
}

/* ---------------------------
   Desktop tweaks
---------------------------- */
@media (min-width:992px){
  .navbar .navbar-brand{margin-right:.75rem;}
  .main-menu{gap:.5rem;}
  .navbar-collapse{display:flex!important;}
}

/* ---------------------------
   Grids responsivos
---------------------------- */
@media (max-width:850px){
  .services-grid{grid-template-columns:1fr 1fr;}
  .contact-content{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
  .section-title,.nosotros-title,.zona-title,.faq-title{font-size:1.5rem;}
}