/* ============================================================
   Air Life Cleaning — hoja de estilos única para este sitio.

   Dirección de diseño: "aire limpio". El logo es vector limpio sobre blanco,
   así que el sitio es blanco, muy aireado y con las curvas de la ráfaga del
   logo como único motivo gráfico recurrente. La paleta sale del logo por
   código (PIL): azul #136f9a, verde #a6d166, azul marino #39525f.
   El verde se usa con cuentagotas — solo cheques, acentos y el subrayado —
   igual que en el logo, donde es el detalle y no el cuerpo.
   ============================================================ */

:root{
  --blue:#136f9a;
  --blue-dark:#0d5675;
  --sky:#4fa8cf;
  --sky-soft:#a9d6e8;
  --green:#a6d166;
  --green-deep:#7bb03c;
  --navy:#39525f;
  --ink:#16262e;
  --muted:#5f7681;
  --line:#e2ecf1;
  --mist:#f3f8fb;
  --white:#fff;

  --wrap:1160px;
  --r:18px;
  --r-lg:26px;
  --shadow:0 18px 50px -28px rgba(19,111,154,.45);
  --shadow-lg:0 34px 90px -46px rgba(19,111,154,.6);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:"Outfit",system-ui,sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem,6.2vw,4.1rem); }
h2{ font-size:clamp(1.85rem,3.9vw,2.9rem); }
h3{ font-size:clamp(1.12rem,1.5vw,1.28rem); }
p{ margin:0; }
em{ font-style:normal; color:var(--blue); }
::selection{ background:var(--green); color:#14320a; }

.wrap{ width:min(100% - 2.4rem,var(--wrap)); margin-inline:auto; }

/* ---- Etiqueta de sección ---- */
.tag{
  font-family:"Outfit",sans-serif;
  font-weight:600; font-size:.76rem;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--blue);
  display:inline-flex; align-items:center; gap:.55rem;
  margin-bottom:1.1rem;
}
.tag::before{ content:""; width:26px; height:2px; background:var(--green); border-radius:2px; }
.tag--light{ color:#cdeaf7; }
.tag--light::before{ background:var(--green); }

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:1rem;
  padding:.95rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  background:var(--blue); color:#fff; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  box-shadow:0 12px 26px -16px rgba(13,86,117,.9);
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -18px rgba(13,86,117,.95); }
.btn:active{ transform:translateY(0); }
.btn--wa{ background:var(--green-deep); box-shadow:0 12px 26px -16px rgba(123,176,60,.95); }
.btn--wa:hover{ background:#6ea034; }
.btn--ghost{ background:#fff; color:var(--blue-dark); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ border-color:var(--sky); background:var(--mist); }
.btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); box-shadow:none; }
.btn--line:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--sm{ padding:.62rem 1.1rem; font-size:.92rem; }
.btn--full{ width:100%; padding:1.05rem 1.5rem; font-size:1.05rem; }

.link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Outfit",sans-serif; font-weight:600; color:var(--blue);
  text-decoration:none; border-bottom:2px solid var(--green); padding-bottom:.15rem;
}
.link svg{ width:18px; height:18px; transition:transform .2s ease; }
.link:hover svg{ transform:translateX(4px); }

:where(a,button,input,textarea):focus-visible{
  outline:3px solid var(--sky); outline-offset:3px; border-radius:6px;
}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(13,86,117,.8); }
.nav__inner{ display:flex; align-items:center; gap:1rem; min-height:70px; }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.brand img{ width:42px; height:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; font-family:"Outfit",sans-serif; }
.brand__txt b{ font-size:1.06rem; font-weight:700; color:var(--blue); letter-spacing:-.01em; }
.brand__txt span{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); }

.nav__links{ display:flex; align-items:center; gap:1.6rem; }
.nav__links a{
  font-size:.94rem; font-weight:600; text-decoration:none; color:var(--navy);
  position:relative; padding:.2rem 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--green); border-radius:2px; transition:right .22s ease;
}
.nav__links a:hover::after{ right:0; }
.nav__menu-cta{ display:none; }

.nav__cta{ display:flex; align-items:center; gap:.8rem; margin-left:1.4rem; }
.nav__phone{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:.94rem;
  color:var(--blue-dark); text-decoration:none; white-space:nowrap;
}
.nav__phone svg{ width:17px; height:17px; color:var(--green-deep); }
.nav__toggle{ display:none; }

/* ============ HERO ============ */
.hero{ position:relative; overflow:hidden; padding:clamp(2.4rem,6vw,4.6rem) 0 clamp(3rem,7vw,5.4rem); text-align:center; }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto; height:120%;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(166,209,102,.16), transparent 70%),
    radial-gradient(70% 60% at 20% 30%, rgba(79,168,207,.16), transparent 70%),
    radial-gradient(70% 60% at 85% 20%, rgba(19,111,154,.13), transparent 70%);
  pointer-events:none;
}
.hero__air{ position:absolute; inset:0; opacity:.14; pointer-events:none; }
.hero__air svg{ width:100%; height:100%; }
.air{ opacity:.7; }
@media (prefers-reduced-motion:no-preference){
  .air{ animation:drift 18s ease-in-out infinite; }
  .air--2{ animation-duration:23s; animation-delay:-4s; }
  .air--3{ animation-duration:27s; animation-delay:-9s; }
  .air--4{ animation-duration:21s; animation-delay:-13s; }
}
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-26px,14px,0); }
}

.hero__inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.hero__logo{
  width:min(340px,72vw); height:auto; margin-bottom:clamp(1.4rem,3vw,2.2rem);
  filter:drop-shadow(0 22px 42px rgba(19,111,154,.16));
}
.hero h1{ max-width:22ch; }
.hero__sub{
  max-width:56ch; margin-top:1.25rem; font-size:clamp(1.02rem,1.2vw,1.16rem);
  color:var(--muted);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2rem; }
.hero__note{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.5rem;
  font-size:.94rem; color:var(--navy);
  background:var(--mist); border:1px solid var(--line);
  padding:.55rem 1.05rem; border-radius:999px;
}
.hero__note svg{ width:16px; height:16px; color:var(--green-deep); flex:none; }
.hero__note b{ color:var(--blue); }

/* ============ TIRA ============ */
.strip{ background:var(--blue); color:#fff; }
.strip__inner{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.4rem clamp(1.2rem,3.4vw,2.8rem);
  padding:1.05rem 0;
}
.strip span{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:.95rem;
  white-space:nowrap;
}
.strip svg{ width:22px; height:22px; color:var(--green); flex:none; }

/* ============ SERVICIOS ============ */
.services{ padding:clamp(3.6rem,8vw,6.4rem) 0; }
.services__inner{ display:grid; gap:clamp(2.2rem,5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){
  .services__inner{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); }
  .services__head{ position:sticky; top:100px; }
}
.services__lead{ margin-top:1.3rem; color:var(--muted); max-width:46ch; }
.badge{
  display:flex; width:fit-content; align-items:center; gap:.55rem; margin-top:1.6rem;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:.95rem; color:var(--blue-dark);
  background:linear-gradient(120deg,rgba(166,209,102,.24),rgba(79,168,207,.2));
  border-radius:999px; padding:.6rem 1.15rem;
}
.badge svg{ width:16px; height:16px; color:var(--green-deep); flex:none; }
.services__head .link{ margin-top:1.6rem; display:flex; width:fit-content; }

.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.checklist li{
  display:flex; gap:1.05rem; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem 1.35rem;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.checklist li:hover{ transform:translateY(-3px); border-color:var(--sky-soft); box-shadow:var(--shadow); }
.checklist__mark{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green); color:#20430a;
  box-shadow:0 8px 18px -10px rgba(123,176,60,.9);
}
.checklist__mark svg{ width:16px; height:16px; }
.checklist h3{ color:var(--blue-dark); }
.checklist p{ margin-top:.4rem; color:var(--muted); font-size:.97rem; }

/* ============ RESIDENCIAL / COMERCIAL ============ */
.split{ padding:0 0 clamp(3.6rem,8vw,6rem); }
.split__inner{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:760px){ .split__inner{ grid-template-columns:1fr 1fr; } }
.card{
  border-radius:var(--r-lg); overflow:hidden; background:var(--mist);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card__body{ padding:1.5rem 1.6rem 1.8rem; }
.card__body .tag{ margin-bottom:.7rem; }
.card h3{ font-size:clamp(1.3rem,2vw,1.6rem); color:var(--blue-dark); }
.card p{ margin-top:.7rem; color:var(--muted); font-size:.98rem; }

/* ============ VENTA ============ */
.sell{
  background:linear-gradient(150deg,var(--blue-dark) 0%,var(--blue) 55%,#1a86b0 100%);
  color:#fff; position:relative; overflow:hidden;
}
.sell::after{
  content:""; position:absolute; right:-14%; top:-40%; width:60%; height:180%;
  background:radial-gradient(circle at 50% 50%, rgba(166,209,102,.28), transparent 62%);
  pointer-events:none;
}
.sell__inner{
  position:relative; z-index:1;
  padding:clamp(3.2rem,7vw,5.4rem) 0;
  display:grid; gap:clamp(2rem,4vw,3.4rem); grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .sell__inner{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.sell h2{ max-width:20ch; }
.sell h2 em{ color:var(--green); }
.sell__copy > p{ margin-top:1.2rem; max-width:52ch; color:#d6ecf6; }
.sell__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }

.sell__points{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.sell__points li{
  display:flex; gap:1rem; align-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); padding:1.05rem 1.2rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sell__points svg{ width:28px; height:28px; color:var(--green); flex:none; }
.sell__points b{ display:block; font-family:"Outfit",sans-serif; font-size:1.02rem; }
.sell__points span{ display:block; font-size:.92rem; color:#cfe7f2; }

/* ============ COTIZACIÓN ============ */
.quote{ padding:clamp(3.6rem,8vw,6.4rem) 0; background:var(--mist); }
.quote__inner{ display:grid; gap:clamp(2rem,4vw,3.4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .quote__inner{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.quote__intro > p{ margin-top:1.2rem; color:var(--muted); max-width:46ch; }

.quote__alt{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.7rem; }
.quote__alt a{
  display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:.95rem 1.15rem; transition:border-color .2s ease, transform .2s ease;
}
.quote__alt a:hover{ border-color:var(--sky); transform:translateX(3px); }
.quote__alt svg{ width:22px; height:22px; color:var(--blue); flex:none; }
.quote__alt b{ display:block; font-family:"Outfit",sans-serif; font-size:.98rem; color:var(--ink); word-break:break-word; }
.quote__alt span{ display:block; font-size:.86rem; color:var(--muted); }

.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.1rem); box-shadow:var(--shadow);
  display:grid; gap:1.3rem;
}
.field{ border:0; margin:0; padding:0; display:grid; gap:.55rem; min-width:0; }
.field > label,.field legend{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:.95rem; color:var(--navy);
  padding:0;
}
.field i{ font-style:normal; font-weight:500; color:var(--muted); font-size:.86rem; }
.field input[type=text],.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--mist); border:1.5px solid var(--line); border-radius:12px;
  padding:.8rem .95rem; transition:border-color .18s ease, background-color .18s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:#9fb2bb; }
.field input:focus,.field textarea:focus{ background:#fff; border-color:var(--sky); outline:none; }
.field textarea{ resize:vertical; min-height:100px; }

.opts{ display:flex; flex-wrap:wrap; gap:.55rem; }
.opts--2 .opt{ flex:1 1 140px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:"Outfit",sans-serif; font-weight:600; font-size:.93rem;
  border:1.5px solid var(--line); border-radius:999px; padding:.6rem 1.05rem;
  color:var(--navy); background:#fff; cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, color .16s ease;
}
.opt:hover span{ border-color:var(--sky-soft); }
.opt input:checked + span{ background:var(--blue); border-color:var(--blue); color:#fff; }
.opt input:focus-visible + span{ outline:3px solid var(--sky); outline-offset:3px; }

.form__error{
  display:none; font-size:.93rem; font-weight:600; color:#b3341f;
  background:#fdeceb; border:1px solid #f6cec8; border-radius:12px; padding:.7rem .95rem;
}
.form__error.is-on{ display:block; }
.form__fine{ font-size:.85rem; color:var(--muted); text-align:center; }

/* ============ FOOTER ============ */
.foot{ background:var(--ink); color:#cfdde3; padding:clamp(3rem,6vw,4.4rem) 0 1.4rem; }
.foot__inner{ display:grid; gap:2.4rem; grid-template-columns:1fr; }
@media (min-width:760px){ .foot__inner{ grid-template-columns:1.3fr 1fr 1.2fr; gap:3rem; } }
.foot__brand img{ width:170px; background:#fff; border-radius:16px; padding:.9rem 1rem; }
.foot__brand p{ margin-top:1.1rem; font-size:.95rem; color:#9fb4bd; }
.foot__links h4{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-bottom:1rem; }
.foot__links a{
  display:flex; align-items:center; gap:.55rem; text-decoration:none;
  font-size:.95rem; padding:.3rem 0; color:#cfdde3; transition:color .18s ease;
}
.foot__links a:hover{ color:#fff; }
.foot__links svg{ width:17px; height:17px; color:var(--sky); flex:none; }
.foot__bar{
  margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
  font-size:.85rem; color:#88a0aa;
}
.foot__cta a{ color:var(--green); font-weight:600; text-decoration:none; }

/* ============ DOCK MÓVIL ============ */
.dock{ display:none; }

/* ============ REVELADO ============ */
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.85,.3,1);
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   MÓVIL / TABLET
   Regla fija de todos los builds: el botón de menú va pegado a la derecha.
   ============================================================ */
@media (max-width:920px){
  .nav__inner{ min-height:64px; }
  .nav__cta{ margin-left:auto; gap:.5rem; }
  .nav__phone span{ display:none; }
  .nav__phone{
    width:42px; height:42px; justify-content:center; border-radius:50%;
    background:var(--mist); border:1px solid var(--line);
  }
  .nav__phone svg{ width:19px; height:19px; color:var(--blue); }
  .btn--sm{ display:none; }

  .nav__toggle{
    display:inline-grid; place-items:center;
    width:42px; height:42px; padding:0; margin-right:0;
    border:1px solid var(--line); border-radius:12px;
    background:var(--mist); color:var(--blue-dark); cursor:pointer;
  }
  .nav__toggle svg{ width:22px; height:22px; }
  .nav__toggle-close{ display:none; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-open{ display:none; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-close{ display:block; }

  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 26px 50px -34px rgba(13,86,117,.7);
    padding:.4rem 1.2rem 1.2rem;
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:.9rem .2rem; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__links a::after{ display:none; }
  .nav__menu-cta{
    display:block; text-align:center; margin-top:1rem; border-bottom:0 !important;
    background:var(--blue); color:#fff; border-radius:999px; padding:.85rem 1rem !important;
    font-family:"Outfit",sans-serif;
  }
}

@media (max-width:640px){
  .hero{ padding-top:2rem; }
  .hero__ctas{ width:100%; }
  .hero__ctas .btn{ flex:1 1 100%; }
  .strip__inner{ justify-content:flex-start; gap:.5rem 1.3rem; }
  .strip span{ font-size:.88rem; }
  .checklist li{ padding:1.05rem 1.1rem; gap:.85rem; }
  .foot__bar{ justify-content:flex-start; }

  /* Dock: solo en móvil, y con espacio al final para que no tape el footer. */
  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
  .dock{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .dock a{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:"Outfit",sans-serif; font-weight:600; font-size:.95rem;
    text-decoration:none; padding:.75rem 1rem; border-radius:999px;
    background:var(--blue); color:#fff;
  }
  .dock__wa{ background:var(--green-deep); }
  .dock svg{ width:19px; height:19px; }
}