/* ============================================================
   VAXA — Capa de rediseño "Trust & Authority" (sobre marca verde)
   Generado con ui-ux-pro-max · no modifica styles.css
   ============================================================ */

/* ============================================================
   LOADER — gota bicolor (Fumigación + Tanques de agua)
   ============================================================ */
html.loading, html.loading body { overflow: hidden; }
#vaxa-loader {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--green-deeper) 0%, var(--ink) 100%);
  opacity: 1; transition: opacity .5s ease, visibility .5s ease;
}
#vaxa-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#vaxa-loader .vl-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(86vw, 280px); }

/* escena: gota bicolor */
.vl-scene { position: relative; width: 96px; height: 120px; }
.vl-drop { width: 100%; height: 100%; display: block; filter: drop-shadow(0 14px 34px oklch(0.1 0.02 230 / 0.45)); animation: vl-bob 2.6s var(--ease) infinite; }
@keyframes vl-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.vd-outline { fill: oklch(0.985 0 0 / 0.06); stroke: oklch(0.985 0 0 / 0.35); stroke-width: 2; }
.vd-fill-fumi { fill: var(--green); }
.vd-fill-tank { fill: var(--blue); }
.vd-fill-fumi, .vd-fill-tank { animation: vl-rise 2.6s var(--ease) infinite; }
@keyframes vl-rise { 0%,100% { transform: translateY(8px); } 50% { transform: translateY(0); } }
.vd-shine { fill: oklch(0.985 0 0 / 0.55); }

.vl-brand { display: flex; color: #fff; }
.vl-brand svg { width: auto; height: 28px; display: block; }
.vl-text { font-family: var(--font-body), system-ui, sans-serif; font-size: 14px; color: oklch(0.985 0 0 / 0.7); min-height: 1.4em; text-align: center; }
.vl-tags { display: flex; gap: 10px; }
.vl-tag { font-family: var(--font-display), system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px; background: oklch(0.985 0 0 / 0.10); }
.vl-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.vl-tag-fumi { color: var(--green-glow); }
.vl-tag-fumi::before { background: var(--green-bright); }
.vl-tag-tank { color: var(--blue-bright); }
.vl-tag-tank::before { background: var(--blue-bright); }
.vl-bar { width: 100%; height: 5px; border-radius: 100px; background: oklch(0.985 0 0 / 0.12); overflow: hidden; }
.vl-bar i { display: block; height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, var(--green-bright), var(--blue-bright)); transition: width .25s linear; }

@media (prefers-reduced-motion: reduce) {
  .vl-drop, .vd-fill-fumi, .vd-fill-tank { animation: none; }
}

/* ---------- Tipografía nueva (Lexend / Source Sans 3) ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.018em; }
h1 { font-weight: 700; }

/* ---------- Accesibilidad: foco visible (WCAG) ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.btn:focus-visible, .cli-tab:focus-visible, .quiz-opt:focus-visible,
.faq-q:focus-visible, .vpd-btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--green-forest);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- cursor:pointer en todo lo clickeable ---------- */
a, button, summary, label[for], [role="button"],
.btn, .cli-tab, .quiz-opt, .faq-q, .camp-dot, .camp-arrow,
.vpd-btn, .ta-badge { cursor: pointer; }

/* ---------- Refinamientos sutiles ---------- */
:where(.btn) { transition: transform .2s var(--ease, ease), box-shadow .2s ease, background .2s ease, opacity .2s ease; }
:where(.btn):hover { transform: translateY(-2px); }
:where(.btn):active { transform: translateY(0); }

/* ============================================================
   BANDA DE CONFIANZA (Trust & Authority)
   ============================================================ */
.hero {
  margin-bottom: -1px;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(160px, 18vw, 260px);
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, oklch(0.08 0.025 160 / 0.72) 64%, oklch(0.08 0.025 160 / 0.96) 100%),
    radial-gradient(90% 100% at 50% 100%, color-mix(in oklab, var(--green-forest) 24%, transparent) 0%, transparent 70%);
}
.ta-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, oklch(0.08 0.025 160 / 0.96) 0%, oklch(0.10 0.035 160 / 0.90) 46%, oklch(0.12 0.04 166 / 0.96) 100%),
    radial-gradient(110% 120% at 16% -15%, color-mix(in oklab, var(--green-forest) 42%, transparent) 0%, transparent 55%),
    url("../assets/img/2de2f842-d937-4302-a620-aad9b21cdec1.png") center top / cover no-repeat,
    linear-gradient(180deg, var(--green-deeper) 0%, var(--green-deep) 100%);
  color: var(--tx);
  border-top: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--green-bright) 22%, transparent);
}
.ta-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, oklch(0.07 0.02 160 / 0.2), oklch(0.09 0.03 160 / 0.62));
}
.ta-trust .ta-wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 5vw, 56px) clamp(20px, 5vw, 40px); }
.ta-trust .section-head h2 { color: #fff; }
.ta-trust .eyebrow { color: var(--green-glow); }
.ta-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 34px); }
.ta-stat { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 2px solid color-mix(in oklab, var(--green-bright) 38%, transparent); }
.ta-stat .ta-ico { width: 26px; height: 26px; color: var(--green-bright); margin-bottom: 4px; }
.ta-stat .ta-ico svg { width: 100%; height: 100%; }
.ta-stat .ta-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); line-height: 1.05; color: #fff; letter-spacing: -0.02em; }
.ta-stat .ta-lbl { font-size: .92rem; line-height: 1.45; color: var(--tx-dim); max-width: 26ch; }
.ta-badges { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(24px, 3vw, 34px); padding-top: clamp(20px, 2.5vw, 28px); border-top: 1px solid color-mix(in oklab, var(--green-bright) 18%, transparent); }
.ta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: color-mix(in oklab, #fff 8%, transparent); border: 1px solid color-mix(in oklab, var(--green-bright) 26%, transparent); color: #fff; font-size: .9rem; font-weight: 600; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.ta-badge:hover { background: color-mix(in oklab, var(--green-bright) 18%, transparent); border-color: color-mix(in oklab, var(--green-bright) 55%, transparent); transform: translateY(-2px); }
.ta-badge svg { width: 17px; height: 17px; color: var(--green-bright); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ta-stat { animation: ta-rise .6s cubic-bezier(.22,1,.36,1) both; }
  .ta-stat:nth-child(2) { animation-delay: .08s; }
  .ta-stat:nth-child(3) { animation-delay: .16s; }
  .ta-stat:nth-child(4) { animation-delay: .24s; }
  @keyframes ta-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) { .ta-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; } }
@media (max-width: 560px) {
  .ta-trust {
    background-position: center top, center top, 58% bottom, center top;
  }
}
@media (max-width: 380px) { .ta-stats { grid-template-columns: 1fr; } }

/* ============================================================
   NAV — link activo (página actual)
   ============================================================ */
.nav-links a.active { color: var(--green-forest); font-weight: 700; }
.nav.on-hero:not(.scrolled) .nav-links a.active { color: var(--green-glow); }
.mnav-links a.active { color: var(--green-glow); }

/* ============================================================
   DOCK switcher (2 ejes: Color + Fondo)
   ============================================================ */
.vpd-cap-ico { width: 16px; height: 16px; color: var(--green-bright); flex: none; }
#vaxa-palette-dock {
  left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 15px; border-radius: 18px;
  max-width: min(94vw, 430px); row-gap: 9px;
  background: oklch(0.17 0.02 230 / 0.86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid oklch(1 0 0 / 0.14); box-shadow: 0 14px 50px oklch(0.08 0.02 230 / 0.5);
}
#vaxa-palette-dock .vpd-title { display: flex; align-items: center; gap: 7px; color: #fff; font-family: var(--font-display), system-ui, sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .2px; padding-bottom: 2px; }
#vaxa-palette-dock .vpd-title svg.vpd-cap-ico { width: 16px; height: 16px; color: var(--green-bright); flex: none; }
#vaxa-palette-dock .vpd-title-text { flex: 1; }
#vaxa-palette-dock .vpd-row { display: flex; align-items: center; gap: 10px; }
#vaxa-palette-dock .vpd-cap { flex: none; width: 46px; padding: 0; border: 0; margin: 0; color: oklch(0.86 0.01 230); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
#vaxa-palette-dock .vpd-swatches { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; }
#vaxa-palette-dock .vpd-btn { width: 23px; height: 23px; }

/* ---------- Botón minimizar / pill colapsado ---------- */
.vpd-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; padding: 0;
  border: 1px solid oklch(1 0 0 / 0.18); border-radius: 50%;
  background: oklch(1 0 0 / 0.07); color: #fff;
  transition: background .2s ease;
}
.vpd-toggle:hover { background: oklch(1 0 0 / 0.16); }
.vpd-toggle svg { width: 13px; height: 13px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
#vaxa-palette-dock.is-collapsed { padding: 10px 12px; border-radius: 999px; gap: 0; cursor: pointer; }
#vaxa-palette-dock.is-collapsed .vpd-row { display: none; }
#vaxa-palette-dock.is-collapsed .vpd-title { padding-bottom: 0; }
#vaxa-palette-dock.is-collapsed .vpd-title-text { display: none; }
#vaxa-palette-dock.is-collapsed .vpd-toggle svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  #vaxa-palette-dock:not(.is-collapsed) { animation: vpd-attn 1.3s cubic-bezier(.22,1,.36,1) 1.8s 3; }
  @keyframes vpd-attn { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); box-shadow: 0 14px 55px oklch(0.62 0.18 160 / 0.6); } }
}
@media (max-width: 520px) { #vaxa-palette-dock { bottom: 74px; max-width: 94vw; } }

/* ====================================================
   DEMO v4 — ejes desacoplados
   COLOR (data-accent) = marca · FONDO (data-bg) = fondo de la pagina
   ==================================================== */

/* --- COLOR (acento de marca) --- */
/* Paleta oficial VAXA v2 (presentación de marca): verde #03CE13 + azul #0066E0 sobre navy #011A38 */
:root[data-accent="emerald"]{--green-forest:oklch(0.60 0.20 143);--green:oklch(0.738 0.248 143);--green-bright:oklch(0.80 0.235 140);--green-glow:oklch(0.87 0.20 138);--green-wash:oklch(0.965 0.025 143);--shadow-green:0 22px 60px oklch(0.738 0.15 143/0.30);}
:root[data-accent="ocean"]{--green-forest:oklch(0.47 0.135 232);--green:oklch(0.6 0.155 232);--green-bright:oklch(0.72 0.175 232);--green-glow:oklch(0.84 0.165 232);--green-wash:oklch(0.965 0.014 232);--shadow-green:0 22px 60px oklch(0.60 0.105 228/0.28);}
:root[data-accent="copper"]{--green-forest:oklch(0.47 0.135 52);--green:oklch(0.6 0.155 52);--green-bright:oklch(0.72 0.175 52);--green-glow:oklch(0.84 0.165 52);--green-wash:oklch(0.965 0.014 52);--shadow-green:0 22px 60px oklch(0.60 0.105 50/0.28);}
:root[data-accent="violet"]{--green-forest:oklch(0.47 0.135 292);--green:oklch(0.6 0.155 292);--green-bright:oklch(0.72 0.175 292);--green-glow:oklch(0.84 0.165 292);--green-wash:oklch(0.965 0.014 292);--shadow-green:0 22px 60px oklch(0.60 0.105 295/0.28);}
:root[data-accent="teal"]{--green-forest:oklch(0.47 0.135 192);--green:oklch(0.6 0.155 192);--green-bright:oklch(0.72 0.175 192);--green-glow:oklch(0.84 0.165 192);--green-wash:oklch(0.965 0.014 192);--shadow-green:0 22px 60px oklch(0.60 0.105 190/0.28);}
:root[data-accent="sky"]{--green-forest:oklch(0.47 0.135 250);--green:oklch(0.6 0.155 250);--green-bright:oklch(0.72 0.175 250);--green-glow:oklch(0.84 0.165 250);--green-wash:oklch(0.965 0.014 250);--shadow-green:0 22px 60px oklch(0.60 0.105 248/0.28);}
:root[data-accent="amber"]{--green-forest:oklch(0.47 0.135 75);--green:oklch(0.6 0.155 75);--green-bright:oklch(0.72 0.175 75);--green-glow:oklch(0.84 0.165 75);--green-wash:oklch(0.965 0.014 75);--shadow-green:0 22px 60px oklch(0.60 0.105 75/0.28);}
:root[data-accent="rose"]{--green-forest:oklch(0.47 0.135 350);--green:oklch(0.6 0.155 350);--green-bright:oklch(0.72 0.175 350);--green-glow:oklch(0.84 0.165 350);--green-wash:oklch(0.965 0.014 350);--shadow-green:0 22px 60px oklch(0.60 0.105 350/0.28);}
:root[data-accent="crimson"]{--green-forest:oklch(0.47 0.135 25);--green:oklch(0.6 0.155 25);--green-bright:oklch(0.72 0.175 25);--green-glow:oklch(0.84 0.165 25);--green-wash:oklch(0.965 0.014 25);--shadow-green:0 22px 60px oklch(0.60 0.105 25/0.28);}
:root[data-accent="slate"]{--green-forest:oklch(0.47 0.022 250);--green:oklch(0.6 0.025 250);--green-bright:oklch(0.72 0.028 250);--green-glow:oklch(0.84 0.026 250);--green-wash:oklch(0.965 0.002 250);--shadow-green:0 22px 60px oklch(0.60 0.017 250/0.28);}

/* --- FONDO (fondo oscuro de la pagina) --- */
/* Navy oficial de marca #011A38 = oklch(0.219 0.067 254) — tema por defecto */
:root[data-bg="navy"]{--surface-1:oklch(0.145 0.05 254);--surface-2:oklch(0.19 0.06 254);--card:oklch(0.19 0.06 254);--card-line:oklch(0.30 0.065 254);--green-deep:oklch(0.28 0.065 254);--green-deeper:oklch(0.21 0.06 254);--ink:oklch(0.175 0.055 254);--carbon:oklch(0.245 0.06 254);}
:root[data-bg="verde"]{--surface-1:oklch(0.17 0.03 160);--surface-2:oklch(0.215 0.03 160);--card:oklch(0.215 0.03 160);--card-line:oklch(0.31 0.03 160);--green-deep:oklch(0.3 0.03 160);--green-deeper:oklch(0.225 0.03 160);--ink:oklch(0.18 0.03 160);--carbon:oklch(0.26 0.03 160);}
:root[data-bg="carbon"]{--surface-1:oklch(0.17 0.008 250);--surface-2:oklch(0.215 0.008 250);--card:oklch(0.215 0.008 250);--card-line:oklch(0.31 0.008 250);--green-deep:oklch(0.3 0.008 250);--green-deeper:oklch(0.225 0.008 250);--ink:oklch(0.18 0.008 250);--carbon:oklch(0.26 0.008 250);}
:root[data-bg="azul"]{--surface-1:oklch(0.17 0.05 255);--surface-2:oklch(0.215 0.05 255);--card:oklch(0.215 0.05 255);--card-line:oklch(0.31 0.05 255);--green-deep:oklch(0.3 0.05 255);--green-deeper:oklch(0.225 0.05 255);--ink:oklch(0.18 0.05 255);--carbon:oklch(0.26 0.05 255);}
:root[data-bg="negro"]{--surface-1:oklch(0.099 0.006 250);--surface-2:oklch(0.125 0.006 250);--card:oklch(0.125 0.006 250);--card-line:oklch(0.18 0.006 250);--green-deep:oklch(0.174 0.006 250);--green-deeper:oklch(0.131 0.006 250);--ink:oklch(0.104 0.006 250);--carbon:oklch(0.151 0.006 250);}
:root[data-bg="calido"]{--surface-1:oklch(0.17 0.035 55);--surface-2:oklch(0.215 0.035 55);--card:oklch(0.215 0.035 55);--card-line:oklch(0.31 0.035 55);--green-deep:oklch(0.3 0.035 55);--green-deeper:oklch(0.225 0.035 55);--ink:oklch(0.18 0.035 55);--carbon:oklch(0.26 0.035 55);}

/* ============================================================
   AJUSTES v5
   ============================================================ */

/* ---- (1+) Línea de escaneo del hero: UNA sola línea con glow ---- */
.hero-scan { opacity: 1; mix-blend-mode: screen; }
.hero-scan::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: 0;
  height: 2px;
  background: oklch(0.95 0.19 167 / 0.95);
  border: none;
  box-shadow:
    0 0 24px 4px oklch(0.88 0.17 167 / 0.5),
    0 0 8px 1px oklch(0.96 0.14 167 / 0.85);
  transform: translateY(-12px);   /* en reposo: fuera de vista, arriba */
  opacity: 0;
  animation: none;                 /* anula la animación auto del styles.css base (redesign carga después) */
}
/* se dispara al CERRAR el popup (clase via JS) y baja hasta el fondo del hero */
.hero-scan.scan-run::before {
  animation: heroScan 4.8s cubic-bezier(.55,0,.3,1) 1 forwards;
}
.hero-scan::after { content: none; }
@keyframes heroScan {
  0%   { transform: translateY(-12px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(var(--scan-end, 760px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-scan { display: none; } }

/* capa de bichos DENTRO del hero (sobreescribe la global fija) */
.bug-layer.bug-hero { position: absolute; inset: 0; z-index: 2; }
.hero .wrap { z-index: 3; }   /* contenido del hero por encima de los bichos */
.hero-scroll { z-index: 4; }

/* ---- (2+) Bichos de fondo en TODA la web, detrás del contenido ---- */
html { background: var(--surface-1); }
body { background: transparent; }
.bug-layer {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  opacity: 1;
}
/* secciones translúcidas para que los bichos se vean de fondo.
   El fondo base (html) es igual de oscuro que las secciones, así que
   bajar la opacidad casi no cambia el color ni la legibilidad: solo
   deja ver los bichos por detrás. */
.diag, .gallery, .services, .coverage, .why {
  background: color-mix(in oklab, var(--surface-1) 58%, transparent);
}
.clients, .faq, .tanques, .brands {
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
}
.campaigns, .quiz, .footer {
  background: color-mix(in oklab, var(--green-deeper) 70%, transparent);
}
.consorcios {
  background: color-mix(in oklab, var(--ink) 70%, transparent);
}
.mailsec { background: transparent; }

/* ---- (4) Menú responsive full-screen ---- */
.mnav {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--green-deeper) 0%, var(--ink) 100%);
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s;
}
.mnav.open { opacity: 1; visibility: visible; transform: none; transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1); }
.mnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 40px); height: var(--nav-h, 76px); flex: none;
  border-bottom: 1px solid oklch(1 0 0 / 0.10);
}
.mnav-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.mnav-brand b { color: var(--green-glow); }
.mnav-close {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid oklch(1 0 0 / 0.18); background: oklch(1 0 0 / 0.06);
  color: #fff; transition: background .2s ease, transform .2s ease;
}
.mnav-close:hover { background: oklch(1 0 0 / 0.16); transform: rotate(90deg); }
.mnav-close svg { width: 22px; height: 22px; }
.mnav-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: clamp(12px, 3vh, 32px) clamp(20px, 5vw, 40px); overflow-y: auto; }
.mnav-links a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 0.8rem + 3vw, 1.85rem); line-height: 1.15;
  color: #fff; padding: clamp(7px, 1.3vh, 13px) 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
  opacity: 0; transform: translateX(-14px);
}
.mnav.open .mnav-links a { animation: mnavIn .42s cubic-bezier(.22,1,.36,1) forwards; }
.mnav-links a::after { content: "→"; color: var(--green-bright); font-size: .7em; opacity: .6; transition: transform .2s ease, opacity .2s ease; }
.mnav-links a:hover { color: var(--green-glow); }
.mnav-links a:hover::after { transform: translateX(6px); opacity: 1; }
.mnav-cta { padding: 0 clamp(20px, 5vw, 40px) clamp(24px, 5vh, 44px); flex: none; }
.mnav-cta .btn { width: 100%; justify-content: center; font-size: 1.05rem; padding: 16px; }
@keyframes mnavIn { to { opacity: 1; transform: none; } }
.mnav.open .mnav-links a:nth-child(1) { animation-delay: .06s; }
.mnav.open .mnav-links a:nth-child(2) { animation-delay: .11s; }
.mnav.open .mnav-links a:nth-child(3) { animation-delay: .16s; }
.mnav.open .mnav-links a:nth-child(4) { animation-delay: .21s; }
.mnav.open .mnav-links a:nth-child(5) { animation-delay: .26s; }
.mnav.open .mnav-links a:nth-child(6) { animation-delay: .31s; }
.mnav.open .mnav-links a:nth-child(7) { animation-delay: .36s; }
.mnav.open .mnav-links a:nth-child(8) { animation-delay: .41s; }
body.mnav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav.open .mnav-links a { transition: opacity .15s ease; animation: none; transform: none; opacity: 1; }
}

/* ---- (3) Formulario de contacto por mail ---- */
.mailform { max-width: 760px; margin: 0 auto; }
.mf-card {
  background: oklch(0.245 0.05 254); border: 1px solid var(--card-line);
  border-radius: 20px; padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 24px 60px oklch(0.08 0.02 230 / 0.35);
}
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mf-field { display: flex; flex-direction: column; gap: 7px; }
.mf-field.full { grid-column: 1 / -1; }
.mf-field label { font-size: .82rem; font-weight: 700; color: var(--tx-dim); font-family: var(--font-display); }
.mf-field label .req { color: var(--green-bright); }
.mf-field input, .mf-field select, .mf-field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--tx);
  background: var(--surface-1); border: 1.5px solid var(--card-line);
  border-radius: 11px; padding: 13px 15px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mf-field textarea { resize: vertical; min-height: 120px; }
.mf-field input::placeholder, .mf-field textarea::placeholder { color: oklch(0.6 0.02 230); }
.mf-field input:focus, .mf-field select:focus, .mf-field textarea:focus {
  outline: none; border-color: var(--green-bright);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--green-bright) 22%, transparent);
}
.mf-field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.mf-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mf-submit .btn { font-size: 1.02rem; padding: 15px 26px; }
.mf-note { font-size: .82rem; color: var(--tx-dim); }
.mf-error { color: oklch(0.7 0.18 25); font-size: .85rem; font-weight: 600; display: none; grid-column: 1 / -1; }
.mf-error.show { display: block; }
@media (max-width: 620px) { .mf-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AJUSTES v7 — Testimonios + Barra fija mobile
   ============================================================ */

/* ---- Testimonios (prueba social) ---- */
.testimonials { background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
.tst-rating { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tst-stars { color: oklch(0.82 0.16 85); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.tst-rating-txt { color: var(--tx-dim); font-size: .95rem; }
.tst-rating-txt b { color: var(--tx); }
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.tst-card {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 18px;
  padding: 26px 24px; margin: 0; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 14px 40px oklch(0.08 0.02 230 / 0.25);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tst-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--green-bright) 42%, var(--card-line));
  box-shadow: 0 22px 54px oklch(0.08 0.02 230 / 0.42);
}
.tst-card .tst-stars { font-size: 1rem; }
.tst-card blockquote { margin: 0; color: var(--tx); font-size: 1.02rem; line-height: 1.6; }
.tst-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.tst-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; color: #fff; font-size: .95rem; background: var(--c, var(--green));
}
.tst-meta { display: flex; flex-direction: column; line-height: 1.3; }
.tst-meta b { color: var(--tx); font-size: .96rem; }
.tst-meta span { color: var(--tx-dim); font-size: .82rem; }
.tst-cta { text-align: center; margin-top: 42px; }
@media (max-width: 980px) { .tst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tst-grid { grid-template-columns: 1fr; } }

/* ---- Barra fija mobile (WhatsApp + Llamar) ---- */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 92;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: oklch(0.13 0.02 230 / 0.94);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-top: 1px solid oklch(1 0 0 / 0.10);
  }
  .mcta {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 50px; border-radius: 13px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
    transition: transform .15s ease, filter .2s ease;
  }
  .mcta:active { transform: scale(.97); }
  .mcta svg { width: 21px; height: 21px; }
  .mcta-call { background: oklch(1 0 0 / 0.08); color: #fff; border: 1px solid oklch(1 0 0 / 0.18); }
  .mcta-wa { background: oklch(0.60 0.16 150); color: #fff; }
  .wa-float { display: none !important; }   /* la barra reemplaza al float en mobile */
  #vaxa-palette-dock { bottom: 82px; }       /* dock por encima de la barra */
  body { padding-bottom: 74px; }             /* que la barra no tape el footer */
}

/* ============================================================
   MARCAS / CLIENTES — carrusel de logos (placeholder)
   ============================================================ */
.brand-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-track { display: flex; gap: 22px; width: max-content; animation: brandScroll 36s linear infinite; }
.brand-track:hover { animation-play-state: paused; }
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  width: 200px; height: 92px; padding: 16px 26px; flex: none;
  border-radius: 14px; background: oklch(0.99 0.002 254); border: 1px solid var(--card-line);
  transition: transform .3s var(--ease);
}
.brand-chip:hover { transform: translateY(-4px); }
.brand-chip img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@keyframes brandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* ============================================================
   TANQUES — chips de audiencia + lista de riesgos
   ============================================================ */
.tank-audience { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; }
.tank-aud-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--blue-bright); background: oklch(0.56 0.125 242 / 0.10);
  border: 1px solid oklch(0.56 0.125 242 / 0.25); padding: 10px 18px; border-radius: 100px;
}
.tank-aud-chip svg { width: 18px; height: 18px; }
.cons-benefit.risk svg { color: var(--alert); }

/* ============================================================
   FOOTER — sub-encabezados de contacto separado (fumigación / tanques)
   ============================================================ */
.foot-col .foot-sub {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-glow); margin: 18px 0 6px;
}
.foot-col .foot-sub:first-of-type { margin-top: 0; }

/* ============================================================
   CAMPAÑAS — variante "destacado" para Tanques (azul, no rojo)
   ============================================================ */
.camp-card.hot-tank { background: linear-gradient(160deg, oklch(0.40 0.10 235), var(--green-deeper)); }
.camp-card.hot-tank::before { background: radial-gradient(circle, oklch(0.62 0.14 235 / 0.35), transparent 70%); }
.camp-card.hot-tank .camp-season { color: var(--blue-bright); }

/* ============================================================
   COBERTURA — mapa real (OpenStreetMap) de fondo
   ============================================================ */
.cov-map-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; z-index: 0; filter: saturate(0.95) contrast(1.02);
}
.cov-map-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(150deg, oklch(0.30 0.08 162 / 0.42), oklch(0.16 0.05 200 / 0.30));
}
.cov-map .cov-pulse,
.cov-map .cov-center-label { z-index: 3; }
.cov-map .map-readout {
  z-index: 3; background: oklch(0.14 0.02 168 / 0.78);
  padding: 5px 11px; border-radius: 100px; backdrop-filter: blur(4px);
}

/* ============================================================
   v8 — Tanques arriba · celeste · slider antes/después · reseñas Google
   ============================================================ */
/* Celeste para "tanque(s) de agua" */
.tw { color: var(--blue-bright); }

/* Beneficios principales: 6 cards (3x2) */
.ta-stats.ta-6 { grid-template-columns: repeat(3, 1fr); }
.ta-stat:nth-child(5) { animation-delay: .32s; }
.ta-stat:nth-child(6) { animation-delay: .40s; }
@media (max-width: 980px){ .ta-stats.ta-6 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .ta-stats.ta-6 { grid-template-columns: 1fr; } }

/* Especialidades de tanques (lista de 7) */
.tank-cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
.tank-cta-note {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 8px 28px oklch(0 0 0 / 0.34);
}
.tank-spec { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 0; }
.tank-spec .ts-item { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; font-weight: 600; color: var(--tx); font-size: 15px; }
.tank-spec .ts-item svg { width: 20px; height: 20px; color: var(--blue-bright); flex: 0 0 auto; }
@media (max-width: 900px){ .tank-spec { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){
  .tank-cta-block { align-items: stretch; }
  .tank-cta-block .btn { width: 100%; white-space: normal; }
  .tank-spec { grid-template-columns: 1fr; }
}

.diag .diag-problem {
  margin: -2px 0 10px;
  color: var(--green-forest);
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.18;
  font-weight: 700;
}

/* Foto grupal del header de Quiénes somos */
.qs-header-photo { position: relative; aspect-ratio: 21/9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 24px 60px oklch(0.08 0.02 230 / 0.4); margin: 40px 0 0; }
.qs-header-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 700px) { .qs-header-photo { aspect-ratio: 4/3; margin-top: 28px; } }

/* Header de Servicios: foto a la izquierda del título */
.serv-head-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
.serv-head-photo { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 24px 60px oklch(0.08 0.02 230 / 0.4); margin: 0; }
.serv-head-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .serv-head-grid { grid-template-columns: 1fr; }
  .serv-head-photo { aspect-ratio: 16/10; max-width: 480px; margin: 0 auto; }
  .serv-head-grid .section-head { text-align: center; }
}

/* "Evolución y excelencia": stats + grid bento con fotos de fondo */
.evo-stats { display: flex; justify-content: center; gap: clamp(18px, 4vw, 56px); flex-wrap: wrap; margin: 34px 0 40px; }
.evo-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.evo-stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.2vw, 42px); line-height: 1; color: var(--green-bright); letter-spacing: -0.02em; }
.evo-stat span { font-size: 13.5px; color: var(--tx-dim); max-width: 20ch; }

.evo-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.evo-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); border: 1px solid var(--card-line);
  min-height: 240px; display: flex; align-items: flex-end;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.evo-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px oklch(0.08 0.02 230 / 0.45); }
.evo-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.evo-card:hover > img { transform: scale(1.05); }
.evo-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(0.13 0.05 254 / 0.96) 12%, oklch(0.15 0.05 254 / 0.55) 55%, oklch(0.17 0.05 254 / 0.22) 100%); }
.evo-body { padding: 24px; }
.evo-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; background: oklch(0.985 0 0 / 0.10); border: 1px solid oklch(0.985 0 0 / 0.18); backdrop-filter: blur(6px); }
.evo-ico svg { width: 21px; height: 21px; color: var(--green-bright); }
.evo-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; }
.evo-body p { margin: 0; color: oklch(0.985 0 0 / 0.78); font-size: 14.5px; line-height: 1.6; max-width: 52ch; }

.evo-featured { grid-row: 1 / 3; min-height: 500px; border-color: color-mix(in oklab, var(--green-bright) 50%, var(--card-line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--green-bright) 35%, transparent), 0 20px 50px oklch(0.12 0.03 160 / 0.2); }
.evo-featured .evo-body h3 { font-size: clamp(22px, 2vw, 27px); }
.evo-featured .evo-body p { font-size: 15.5px; }
.evo-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; color: var(--green-deeper);
  background: linear-gradient(135deg, var(--green), var(--green-bright));
  box-shadow: 0 6px 20px oklch(0.738 0.2 143 / 0.4);
}
.evo-wide { grid-column: 1 / -1; min-height: 190px; }
.evo-wide .evo-body p { max-width: 70ch; }

.evo-note {
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 860px; margin: 34px auto 0; padding: 22px 26px;
  border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--card-line);
  border-left: 3px solid var(--green-bright);
}
.evo-note svg { width: 26px; height: 26px; flex: none; color: var(--green-bright); margin-top: 2px; }
.evo-note p { margin: 0; color: var(--tx-dim); font-size: 15.5px; line-height: 1.65; }
.evo-note b { color: var(--tx); font-weight: 700; }

@media (max-width: 860px) {
  .evo-grid { grid-template-columns: 1fr; }
  .evo-featured { grid-row: auto; min-height: 360px; }
  .evo-wide { grid-column: auto; }
}

/* Slider antes / después automático */
.ba-slider { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 24px 60px oklch(0.08 0.02 230 / 0.4); }
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ba-after { clip-path: inset(0 0 0 var(--rev, 50%)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--rev, 50%); width: 2px; background: var(--blue-bright); box-shadow: 0 0 14px var(--blue-bright); z-index: 3; }
.ba-line::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--blue-bright); color: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: 0 4px 16px oklch(0 0 0 / .4); }
.ba-tag { position: absolute; top: 14px; z-index: 4; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; color: #fff; backdrop-filter: blur(6px); }
.ba-tag-before { left: 14px; background: oklch(0.45 0.13 30 / .82); }
.ba-tag-after { right: 14px; background: oklch(0.55 0.13 242 / .85); }

/* Reseñas de Google */
.greviews-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.g-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--tx); }
.g-rating { display: inline-flex; align-items: center; gap: 9px; color: var(--tx-dim); font-size: 15px; }
.g-stars { color: #fbbc04; letter-spacing: 1px; font-size: 17px; }
.greview .tst-card { position: relative; }
.g-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12.5px; color: var(--tx-dim); font-weight: 600; }
.g-badge svg { width: 16px; height: 16px; }
.g-cta { text-align: center; margin-top: 30px; }

/* Sección chica "dedicados a" */
.dedicados .ded-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: 8px;
}
.dedicados .tank-aud-chip {
  min-height: 138px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
  border-radius: 16px;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.18;
  font-weight: 800;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.96), oklch(0.96 0.01 164 / 0.92));
  border-color: color-mix(in oklab, var(--green-forest) 20%, var(--card-line));
  box-shadow: 0 18px 46px oklch(0.12 0.03 160 / 0.08);
}
.dedicados .tank-aud-chip svg {
  width: 30px;
  height: 30px;
  color: var(--green-forest);
}
@media (max-width: 1100px) {
  .dedicados .ded-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .dedicados .ded-list { grid-template-columns: 1fr; }
  .dedicados .tank-aud-chip {
    min-height: 92px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 20px;
  }
}

/* ============================================================
   HERO — Póster de alerta de temporada (foto full-bleed + bold)
   ============================================================ */
.hero-grid-2 { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.82fr); }

.hero-monitor {
  --hm-accent: oklch(0.82 0.18 152);
  position: relative; align-self: center; isolation: isolate; width: 100%;
  aspect-ratio: 3 / 4; max-height: 540px;
  border-radius: 24px; overflow: hidden;
  border: 1px solid oklch(0.985 0 0 / 0.14);
  box-shadow: 0 34px 80px oklch(0 0 0 / 0.5), inset 0 1px 0 oklch(0.985 0 0 / 0.1);
  transform: perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition: transform .25s var(--ease, ease);
  animation: hmBreathe 3.6s ease-in-out infinite;
}
/* halo de luz que late en el color de la plaga */
@keyframes hmBreathe {
  0%, 100% { box-shadow: 0 34px 80px oklch(0 0 0 / 0.5), 0 0 0 0 transparent, inset 0 1px 0 oklch(0.985 0 0 / 0.1); }
  50%      { box-shadow: 0 34px 80px oklch(0 0 0 / 0.5), 0 0 56px -4px var(--hm-accent), inset 0 1px 0 oklch(0.985 0 0 / 0.1); }
}
/* marco de acento que cambia con la plaga */
.hero-monitor::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 24px;
  box-shadow: inset 0 0 0 2px var(--hm-accent);
  opacity: .6; transition: box-shadow .5s var(--ease, ease);
}
/* brillo diagonal que barre la tarjeta cada tantos segundos */
.hm-glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, oklch(1 0 0 / 0.30) 48%, transparent 64%);
  transform: translateX(-130%);
  animation: hmGlare 5.5s ease-in-out infinite;
}
@keyframes hmGlare { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

/* fotos full-bleed con ligero zoom (movimiento) */
.hm-photos { position: absolute; inset: 0; z-index: 0; }
.hm-ico {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.12);
  transition: opacity .8s var(--ease, ease), transform 7s linear;
}
.hm-ico.is-on { opacity: 1; transform: scale(1); }

.hm-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.10 0.03 160 / 0.55) 0%, transparent 26%, oklch(0.08 0.02 160 / 0.30) 52%, oklch(0.05 0.015 160 / 0.94) 100%),
    radial-gradient(120% 70% at 50% 120%, var(--hm-accent) 0%, transparent 55%);
  background-blend-mode: normal, soft-light;
  transition: background .6s var(--ease, ease);
}
.hm-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 32%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--hm-accent) 0%, transparent 100%);
  opacity: .12; mix-blend-mode: screen;
  animation: hmScan 3.6s ease-in-out infinite;
}
@keyframes hmScan { 0%,100% { transform: translateY(-30%); } 50% { transform: translateY(240%); } }

.hm-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: flex-start; justify-content: space-between; padding: 16px;
}
.hm-alert {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--hm-accent); color: #08130d;
  font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em;
  padding: 9px 15px; border-radius: 100px;
  box-shadow: 0 8px 24px oklch(0.82 0.18 152 / .4);
  transition: background .5s var(--ease, ease);
}
.hm-alert .dot { width: 9px; height: 9px; border-radius: 50%; background: #08130d; animation: hmBlink 1.1s steps(1) infinite; }
@keyframes hmBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: .15; } }
.hm-caba {
  background: oklch(0.06 0 0 / 0.5); backdrop-filter: blur(8px);
  border: 1px solid oklch(0.985 0 0 / 0.18); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  padding: 8px 13px; border-radius: 100px;
}

.hm-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 20px;
}
.hm-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.985 0 0 / 0.72); }
.hm-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4vw, 52px); line-height: .92; letter-spacing: -0.015em; color: #fff;
  text-shadow: 0 6px 28px oklch(0 0 0 / 0.65);
  animation: hmNameIn .5s var(--ease, ease);
}
@keyframes hmNameIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.hm-meter { display: flex; flex-direction: column; gap: 7px; }
.hm-bar { display: block; height: 7px; border-radius: 100px; background: oklch(0.985 0 0 / 0.18); overflow: hidden; }
.hm-bar > i { position: relative; display: block; height: 100%; width: 50%; border-radius: 100px; background: var(--hm-accent); box-shadow: 0 0 12px var(--hm-accent); transition: width .6s var(--ease, ease); overflow: hidden; }
.hm-bar > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.55), transparent);
  transform: translateX(-100%); animation: hmShine 2.2s linear infinite;
}
@keyframes hmShine { to { transform: translateX(100%); } }
.hm-meter-top { font-size: 12.5px; color: oklch(0.985 0 0 / 0.78); font-weight: 600; }
.hm-meter-top b { color: var(--hm-accent); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; }

/* Tabs interactivas */
.hm-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.hm-tab {
  flex: 1 1 auto; cursor: pointer;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  padding: 8px 8px; border-radius: 100px;
  background: oklch(0.06 0 0 / 0.45); backdrop-filter: blur(6px); color: oklch(0.985 0 0 / 0.72);
  border: 1px solid oklch(0.985 0 0 / 0.16); transition: all .25s var(--ease, ease);
}
.hm-tab:hover { color: #fff; border-color: oklch(0.985 0 0 / 0.34); }
.hm-tab.is-on { color: #08130d; background: var(--hm-accent); border-color: var(--hm-accent); box-shadow: 0 6px 18px oklch(0.82 0.18 152 / .3); }

@media (max-width: 980px) {
  .hero-grid-2 { grid-template-columns: 1fr; }
  .hero-monitor { order: -1; max-width: 420px; margin: 0 auto; transform: none !important; aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-scan, .hm-alert .dot, .hm-glare, .hm-bar > i::after, .hero-monitor { animation: none; }
  .hm-ico { transition: opacity .4s ease; }
}

/* ============================================================
   ANÁLISIS DE AGUA — banner con foto difuminada + cards
   ============================================================ */
.aa-section { overflow: hidden; background: var(--ink); color: var(--white); }
.aa-bg { position: absolute; inset: 0; z-index: 0; }
.aa-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(7px) saturate(1.14) brightness(.72); transform: scale(1.04);
}
.aa-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, oklch(0.18 0.04 250 / 0.62), oklch(0.11 0.03 250 / 0.78)),
    radial-gradient(circle at 50% 18%, oklch(0.56 0.12 250 / 0.18), transparent 48%);
}
.aa-wrap { position: relative; z-index: 2; }
.aa-section .section-head h2 { color: var(--white); }
.aa-section .section-head p { color: oklch(0.985 0 0 / 0.82); margin-left: auto; margin-right: auto; }

.aa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto 40px; }
.aa-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 32px 22px; border-radius: var(--radius);
  background: oklch(0.985 0 0 / 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid oklch(0.985 0 0 / 0.18); font-weight: 600; font-size: 16.5px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.aa-card:hover { transform: translateY(-6px); border-color: var(--blue-bright); background: oklch(0.985 0 0 / 0.10); }
.aa-card svg { width: 30px; height: 30px; color: var(--blue-bright); }
.aa-cta { text-align: center; }

@media (max-width: 780px) {
  .aa-cards { grid-template-columns: 1fr; }
}