/*
  SISTEMA DE DISEÑO — Fumi Express

  Tema      Oscuro, único en toda la página.
  Color     Un acento: azul derivado del logo. El amarillo del logo es la firma de marca y solo marca énfasis.
  Tipo      Geist para todo, Geist Mono para cifras. Escala modular fluida.
  Retícula  Contenedor de 1200px con margen elástico; espaciado sobre base de 4px.
  Forma     Controles 10px · superficies 20px · etiquetas en píldora.
  Luz       Filo superior claro, borde de 1px y sombra en dos tramos. El resplandor azul se reserva
            para lo que pide acción o está activo.

  Cada sección tiene su propia composición:
  hero con foto de fondo · servicios con foto fija que cambia al avanzar · plagas como índice con escenario ·
  declaración + foto panorámica + cifras · línea de tiempo con galería vertical · afiche inclinado +
  provincias tipográficas · preguntas en columna · WhatsApp en franja + formulario ancho.
*/
:root{
  --bg:#05070f;--bg-solid:#0a0e1c;--cell:#080b17;
  --surface:rgba(255,255,255,.035);--surface-2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.09);--stroke-2:rgba(255,255,255,.17);
  --text:#eef1f8;--muted:#a2abc0;--dim:#7f8aa3;
  --blue:#3c63f5;--blue-2:#1f43d6;--blue-ink:#9bb6ff;--blue-glow:61,104,255;
  --yellow:#ffe600;--ok:#5fd0a4;--err:#ff9c8a;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,'SF Mono',monospace;
  --fs-xs:13px;--fs-sm:14.5px;--fs-base:16px;--fs-md:18px;
  --fs-lg:clamp(19px,1.6vw,22px);--fs-xl:clamp(23px,2.2vw,30px);
  --fs-2xl:clamp(30px,3.5vw,46px);--fs-3xl:clamp(32px,3.85vw,54px);--fs-4xl:clamp(40px,6.4vw,92px);
  --pad:clamp(20px,4vw,48px);--container:1200px;--gap:clamp(12px,1.4vw,16px);
  --sec:clamp(88px,10vw,152px);
  --r-ctl:10px;--r-in:12px;--r-card:20px;
  --hi:inset 0 1px 0 rgba(255,255,255,.07);
  --e1:var(--hi),0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  --e2:var(--hi),0 2px 4px rgba(0,0,0,.4),0 34px 70px -34px rgba(0,0,0,.9);
  --glow:0 0 0 1px rgba(var(--blue-glow),.3),0 24px 70px -24px rgba(var(--blue-glow),.55);
  --ease-out:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,figure{margin:0}
ul{list-style:none;margin:0;padding:0}
img{display:block}
a{color:var(--blue-ink);text-decoration:none}
button{font-family:inherit}
p{text-wrap:pretty}
::selection{background:var(--yellow);color:#05070f}
:focus-visible{outline:2px solid var(--blue-ink);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:88px}
.wrap{max-width:calc(var(--container) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-weight:600;color:var(--text);letter-spacing:-.035em;text-wrap:balance}
h2{font-size:var(--fs-2xl);line-height:1.08}
.h-xl{font-size:var(--fs-4xl);line-height:.98;letter-spacing:-.05em}
.lead{font-size:var(--fs-md);color:var(--muted);max-width:60ch}
.eyebrow{font-size:var(--fs-sm);font-weight:500;color:var(--blue-ink);margin-bottom:14px}
.mono-num{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:44px;padding:0 18px;border-radius:var(--r-ctl);border:1px solid transparent;font-family:inherit;font-size:var(--fs-sm);font-weight:500;line-height:1;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,filter 180ms ease}
/* Todo lo presionable responde al instante: se comprime al pulsar (CSS, fuera del hilo principal) */
.btn:active,.round:active,.chip:active,.fab:active,.menu-x:active,.svc-tab:active{transform:scale(.97)}.btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.btn-lg{min-height:52px;padding:0 24px;font-size:var(--fs-base)}
.btn-block{width:100%}
.btn svg{flex-shrink:0}
.btn-wa,.btn-ink{background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.5),0 10px 28px -10px rgba(var(--blue-glow),.7)}
.btn-line,.btn-ghost{background:var(--surface-2);border-color:var(--stroke);color:var(--text);box-shadow:var(--hi)}
.btn-white{background:linear-gradient(180deg,#fff,#dfe5f5);color:#0a1230;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.4),0 14px 30px -14px rgba(0,0,0,.7)}
.arr{display:inline-block;transition:transform 200ms var(--ease-out)}
.btn:disabled{cursor:progress;filter:saturate(.7) brightness(.9)}
.btn.is-loading::before{content:"";width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeOnly{from{opacity:0}}
.round{width:44px;height:44px;border-radius:var(--r-ctl);border:1px solid var(--stroke);background:var(--surface-2);color:var(--text);font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--hi);will-change:transform;transition:background-color 180ms ease,border-color 180ms ease}

/* ---------- Superficies con foco de luz ---------- */
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-60%),rgba(155,182,255,.85),transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity 300ms ease;pointer-events:none;z-index:3}
.spot>*{position:relative;z-index:1}

/* ---------- Navegación ---------- */
.nav{position:fixed;top:14px;left:12px;right:12px;z-index:60;display:flex;justify-content:center;pointer-events:none}
.nav-in{pointer-events:auto;width:100%;max-width:1160px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 7px 7px 18px;border-radius:16px;background:rgba(10,14,28,.62);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--stroke);box-shadow:var(--e1);transition:background-color 250ms ease,border-color 250ms ease}
.nav.is-scrolled .nav-in{background:rgba(10,14,28,.86);border-color:var(--stroke-2)}
.logo{display:flex;align-items:center;flex-shrink:0;min-height:40px}
.logo img{height:34px;width:auto}
.nav-links{position:relative;display:flex;gap:2px}
.nav-links a{position:relative;z-index:1;display:block;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);transition:color 150ms ease}
.nav-hl{position:absolute;left:0;top:0;height:100%;width:0;border-radius:8px;background:var(--surface-2);box-shadow:var(--hi);opacity:0;pointer-events:none}
.nav-cta{display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;border:none;border-radius:var(--r-ctl);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{width:20px;height:1.5px;background:var(--text);display:block}

/* ---------- Menú móvil ---------- */
.menu{position:fixed;inset:0;z-index:100;background:rgba(5,7,15,.9);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:21px var(--pad) 28px;display:flex;flex-direction:column;visibility:hidden;opacity:0}
.menu.on{visibility:visible;opacity:1}
.menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.menu-top img{height:34px;width:auto}
.menu-x{width:44px;height:44px;border:1px solid var(--stroke);border-radius:var(--r-ctl);background:var(--surface-2);color:var(--text);font-size:22px;cursor:pointer}
.menu-link{color:var(--text);font-weight:600;letter-spacing:-.03em;font-size:30px;padding:12px 0;border-bottom:1px solid var(--stroke)}
.menu-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}

/* ---------- HERO: la foto es el fondo; mensaje y cifras se apoyan en su fundido ---------- */
.hero{position:relative;padding:12px 12px 0}
.hero-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(640px,calc(100vh - 24px),900px);min-height:clamp(640px,calc(100svh - 24px),900px);border-radius:var(--r-card);overflow:hidden;background:var(--bg);isolation:isolate}
.hero-media{position:absolute;left:0;right:0;top:-10%;height:110%;z-index:0;overflow:hidden;background:var(--bg-solid);will-change:transform}
.hero-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--stroke),inset 0 1px 0 rgba(255,255,255,.16);background:radial-gradient(70% 55% at 10% 100%,rgba(var(--blue-glow),.4),transparent 70%),linear-gradient(180deg,rgba(5,7,15,.62) 0%,rgba(5,7,15,.08) 18%,rgba(5,7,15,0) 32%,rgba(5,7,15,.78) 60%,rgba(5,7,15,.96) 100%)}
.hero-body{position:relative;z-index:2;width:100%;max-width:calc(var(--container) + 2*var(--pad));margin:0 auto;padding:0 calc(var(--pad) - 12px) clamp(16px,2vw,24px)}
.hero .eyebrow{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(10,14,28,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--hi);font-size:13.5px;margin-bottom:20px}
.hero .btn-ghost{background:rgba(10,14,28,.5);border-color:var(--stroke-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
h1{font-size:var(--fs-3xl);line-height:1.08;letter-spacing:-.04em;margin-bottom:clamp(16px,2vw,24px)}
h1 em{font-style:normal;color:var(--yellow)}
.w,.w>span{display:inline-block}
.w>span{will-change:transform,opacity,filter}
.hero-row{display:flex;flex-wrap:wrap;gap:20px 64px;align-items:flex-end;justify-content:space-between}
.hero-row p{font-size:var(--fs-md);color:#c9d1e3;max-width:54ch}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
/* Las cifras cierran la tarjeta como una barra de vidrio */
.badges{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(24px,3vw,36px);border-radius:14px;border:1px solid var(--stroke-2);background:rgba(10,14,28,.55);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:var(--hi)}
.badge{padding:16px 22px;border-left:1px solid var(--stroke)}
.badge:first-child{border-left:none}
.badge strong{display:block;font-weight:600;letter-spacing:-.03em;font-size:var(--fs-lg);line-height:1.25;color:var(--text);font-variant-numeric:tabular-nums}
.badge span{font-size:var(--fs-xs);color:var(--muted)}
/* Entrada del hero en CSS: ocurre mientras la página aún carga, y las animaciones CSS siguen fluidas
   aunque el hilo principal esté ocupado. Escalonado corto (40 a 80 ms) y una sola vez. */
.anim [data-hero-title]{opacity:0}
.js .w>span{animation:wordIn 700ms var(--ease-out) backwards;animation-delay:calc(120ms + var(--i,0)*40ms)}
.js [data-hero]{animation:heroIn 700ms var(--ease-out) backwards}
.js .hero .eyebrow{animation-delay:80ms}
.js .hero-row p{animation-delay:560ms}
.js .hero-ctas{animation-delay:640ms}
.js .badges{animation-delay:720ms}
.js .hero-media{animation:heroZoom 1400ms var(--ease-out) backwards}
@keyframes wordIn{from{opacity:0;transform:translateY(18px);filter:blur(8px)}}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}}
@keyframes heroZoom{from{opacity:0;transform:scale(1.08)}}

/* ---------- Secciones ---------- */
.sec{position:relative;padding:var(--sec) 0}
.sec-glow::after{content:"";position:absolute;inset:0;background:radial-gradient(46% 40% at 10% 12%,rgba(var(--blue-glow),.14),transparent 70%);pointer-events:none}
#proceso.sec-glow::after{background:radial-gradient(50% 44% at 92% 30%,rgba(var(--blue-glow),.15),transparent 70%)}
#faq.sec-glow::after{background:radial-gradient(60% 40% at 50% 0%,rgba(var(--blue-glow),.13),transparent 70%)}
.sec>.wrap{position:relative;z-index:1}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{margin-bottom:16px}
.sec-head-wide{max-width:1100px}
.sec-head-center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head-center .lead{margin-left:auto;margin-right:auto}

/* ---------- SEGMENTACIÓN POR TIPO DE CLIENTE (Hogar · Negocio · Industria) ----------
   Tres controles sincronizados por aplicarSegmento() en script.js: el selector del encabezado,
   las tarjetas del hero y las pestañas de servicios. Nada bloquea la página: se puede recorrer sin elegir. */

/* Selector compacto del encabezado */
.seg{display:flex;gap:2px;padding:3px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);box-shadow:var(--hi);flex-shrink:0}
/* Con el selector, la barra necesita algo más de ancho y enlaces que no se partan en dos líneas */
.nav-in{max-width:1280px}
.nav-links a{white-space:nowrap;padding-left:11px;padding-right:11px}
@media (max-width:1320px){.nav .only-wide{display:none}}
@media (max-width:1200px){.nav-in{gap:12px}.nav-links a{padding-left:7px;padding-right:7px;font-size:13.5px}.seg-btn{padding:0 9px}}
.seg-btn{min-height:34px;padding:0 13px;border:none;border-radius:9px;background:transparent;color:var(--muted);font-size:13.5px;font-weight:500;line-height:1;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.seg-btn:active{transform:scale(.97)}
.seg-btn[aria-pressed=true]{background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 6px 16px -8px rgba(var(--blue-glow),.8)}

/* Pregunta y tarjetas del hero */
.pick{margin-top:clamp(20px,2.4vw,28px)}
.pick-q{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:12px}
.pick-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pick-card{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border-radius:14px;border:1px solid var(--stroke-2);background:rgba(10,14,28,.55);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:var(--hi);color:var(--text);transition:transform 160ms var(--ease-out),background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.pick-card:active{transform:scale(.98)}
.pick-ico{flex-shrink:0;width:30px;height:30px;fill:none;stroke:var(--blue-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 180ms ease}
.pick-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-txt strong{font-size:var(--fs-base);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pick-txt span{font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}
.pick-card[aria-current=true]{background:rgba(var(--blue-glow),.26);border-color:rgba(155,182,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 40px -18px rgba(var(--blue-glow),.9)}
.pick-card[aria-current=true] .pick-ico{stroke:var(--yellow)}
.js .pick{animation-delay:700ms}

/* Franja de logos de clientes: carrusel lento y continuo, en gris hasta que pasa el cursor */
.clients{padding:clamp(36px,4.4vw,56px) 0 0}
.clients-title{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;color:var(--muted);text-align:center;margin-bottom:18px}
.clients-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* Los logos son PNG blancos de 480 × 200 con su margen ya incluido: van directo sobre el fondo, todos a la
   misma altura y sin filtros de color. Por ese margen propio no hace falta separación entre ellos. */
/* Separación idéntica entre todos los logos (--logo-gap). El relleno derecho vale lo mismo que la separación,
   de modo que cada copia de la lista mide exactamente lo mismo, incluido su último espacio, y el bucle no salta. */
.clients-track{--logo-gap:56px;display:flex;align-items:center;gap:var(--logo-gap);width:max-content;padding:4px var(--logo-gap) 4px 0}
.clients-track li{flex:none;opacity:.6;transition:opacity 220ms ease}
.clients-track img{height:80px;width:auto}
/* El movimiento solo arranca cuando el script duplicó la fila (clase is-loop); sin eso la fila se desplaza a mano */
.clients-view:not(.is-loop){overflow-x:auto}
/* La fila está triplicada (copia · original · copia). El recorrido va de un tercio a dos tercios, desplazado
   el ancho del desvanecido (8% de la pantalla), y queda en pausa hasta que la cinta entra en pantalla. */
.clients-view.is-loop .clients-track{transform:translateX(calc(8vw - 33.3333%));animation:clientsLoop var(--loop,70s) linear infinite paused}
.clients-view.is-loop.is-seen .clients-track{animation-play-state:running}
@keyframes clientsLoop{from{transform:translateX(calc(8vw - 33.3333%))}to{transform:translateX(calc(8vw - 66.6667%))}}

/* Pestañas y paneles de servicios */
.segtabs{display:inline-flex;gap:2px;padding:4px;margin-bottom:clamp(20px,2.4vw,28px);border-radius:14px;border:1px solid var(--stroke);background:var(--surface);box-shadow:var(--hi)}
.segtab{min-height:44px;padding:0 22px;border:none;border-radius:var(--r-ctl);background:transparent;color:var(--muted);font-size:var(--fs-base);font-weight:500;line-height:1;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.segtab:active{transform:scale(.97)}
.segtab[aria-selected=true]{background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 20px -10px rgba(var(--blue-glow),.8)}
.segpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:8px;border-radius:var(--r-card);border:1px solid var(--stroke);background:var(--surface);box-shadow:var(--e1)}
.segpanel+.segpanel{margin-top:var(--gap)}
.segpanel[hidden]{display:none}
.segpanel-media{position:relative;height:clamp(300px,34vw,460px);border-radius:var(--r-in);overflow:hidden;background:var(--bg-solid)}
.segpanel-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.segpanel-body{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(16px,2vw,28px) clamp(16px,2.6vw,36px) clamp(16px,2vw,28px) 0}
.segpanel h3{font-size:clamp(26px,2.9vw,40px);line-height:1.08;letter-spacing:-.04em;margin-bottom:14px}
.segpanel p{font-size:var(--fs-md);color:var(--muted);margin-bottom:22px;max-width:48ch}
.checks{display:grid;gap:12px;margin-bottom:28px}
.checks li{position:relative;padding-left:32px;font-size:var(--fs-base);line-height:1.45;color:var(--text)}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(var(--blue-glow),.24) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239bb6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:inset 0 0 0 1px rgba(155,182,255,.4)}
/* El panel entra con un fundido corto; con teclado el cambio es instantáneo */
.segpanel.is-in{animation:panelIn 240ms var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- PLAGAS: escenario fijo que dibuja la plaga activa + índice ---------- */
.pest-lay{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.pest-stage{position:sticky;top:16vh;aspect-ratio:1/1;border-radius:var(--r-card);background:radial-gradient(70% 70% at 50% 40%,rgba(var(--blue-glow),.3),transparent 70%),var(--surface);border:1px solid var(--stroke);box-shadow:var(--e2);overflow:hidden}
.pest-stage-in{position:absolute;inset:0;display:grid;place-items:center}
.ico-xl{grid-area:1/1;width:56%;height:56%;stroke:currentColor;color:var(--yellow);stroke-width:.9;filter:drop-shadow(0 0 22px rgba(255,230,0,.35))}
.ico-xl [fill]:not([fill=none]){fill:currentColor}
.pest-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:0 16px 12px;border-bottom:1px solid var(--stroke)}
.pest-list+.pest-head{margin-top:clamp(36px,4vw,56px)}
.pest-head h3{font-size:var(--fs-lg)}
.tag{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.pest-list{display:grid;gap:2px;padding-top:8px}
.pest{display:grid;grid-template-columns:36px 1fr;column-gap:18px;align-content:start;padding:18px 16px;border-radius:14px;border:1px solid transparent;transition:background-color 220ms ease,border-color 220ms ease}
.ico{grid-row:1/3;display:block;width:36px;height:36px;margin-top:2px;stroke:currentColor;color:var(--dim);transition:color 220ms ease}
.ico [fill]:not([fill=none]){fill:currentColor}
.pest h4{font-size:var(--fs-lg);line-height:1.2;letter-spacing:-.025em;margin-bottom:6px;color:var(--muted);transition:color 220ms ease}
.pest p{font-size:15.5px;color:var(--dim);transition:color 220ms ease}
.pest.is-on{background:var(--surface);border-color:var(--stroke);box-shadow:var(--hi)}
.pest.is-on .ico{color:var(--yellow)}
.pest.is-on h4{color:var(--text)}
.pest.is-on p{color:var(--muted)}

/* ---------- POR QUÉ: declaración, foto panorámica y cifras montadas sobre su borde ---------- */
.why-fig{position:relative}
.why-media{position:relative;height:clamp(300px,42vw,560px);border-radius:var(--r-card);overflow:hidden;background:var(--bg-solid);box-shadow:0 0 0 1px var(--stroke-2),var(--e2)}
.why-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,15,0) 45%,rgba(5,7,15,.85) 100%);pointer-events:none}
.why-fig figcaption{position:absolute;left:clamp(16px,2.4vw,28px);top:clamp(16px,2.4vw,28px);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;max-width:calc(100% - 32px);padding:9px 14px;border-radius:999px;border:1px solid var(--stroke-2);background:rgba(10,14,28,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.why-fig strong{font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.why-fig figcaption span{font-size:var(--fs-xs);color:var(--muted)}
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:clamp(-96px,-7vw,-48px) clamp(12px,2.4vw,28px) 0;background:var(--stroke);border:1px solid var(--stroke-2);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--e2)}
.stat{background:rgba(8,11,23,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:24px 22px 26px}
.stat-n{display:block;font-weight:600;font-size:clamp(38px,4.2vw,60px);line-height:1;letter-spacing:-.05em;color:var(--text);margin-bottom:16px;font-variant-numeric:tabular-nums}
.stat:first-child .stat-n{color:var(--yellow)}
/* Cifra destacada que es texto (siglas): más pequeña, pero ocupa el mismo alto para que los títulos queden alineados */
.stat-n-text{display:flex;align-items:flex-end;height:clamp(38px,4.2vw,60px);font-size:clamp(24px,2.5vw,34px);letter-spacing:-.03em;white-space:nowrap}

.stat h3{font-size:var(--fs-base);font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.stat p{font-size:14.5px;color:var(--muted)}
/* Normas de referencia: sellos circulares, el formato del diseño Industrial (aro dorado, aro interior
   punteado, rótulo pequeño y nombre de la norma). El rótulo "NORMA" es decorativo y va en CSS. */
.norms{margin-top:clamp(40px,5vw,64px);padding:clamp(28px,3.6vw,44px) clamp(20px,3vw,40px);border-radius:var(--r-card);background:#0d2440;border:1px solid var(--stroke);box-shadow:var(--e1);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:flex-start}
.norms-label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.norm{position:relative;flex:none;width:clamp(108px,8.6vw,124px);aspect-ratio:1/1;border-radius:50%;border:1px solid #b68a4e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:18px;font-weight:700;font-size:16px;line-height:1.1;letter-spacing:-.01em;color:#fff;text-align:center;transition:transform 300ms var(--ease-out)}
.norm::before{content:"NORMA";font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;color:#e2c89f}
.norm:last-child::before{content:"Y MÁS"}
.norm::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(182,138,78,.6);pointer-events:none}
/* Los sellos van juntos a la derecha del rótulo; el contenedor que los agrupa es la propia fila */
.norms-label{flex:1 0 100%}
@media (max-width:640px){
  .norms{gap:12px}
  .norm{width:88px;padding:10px;font-size:13.5px}
  .norm::before{font-size:8px}
}

/* ---------- PROCESO: línea de tiempo vertical + galería vertical fija ---------- */
.proc{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,96px);align-items:start}
.proc .sec-head{margin-bottom:clamp(32px,4vw,48px)}
.steps-wrap{position:relative;padding-left:34px}
.steps-track{position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--stroke);border-radius:2px}
.steps-line{width:100%;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--blue-ink),var(--blue-2));box-shadow:0 0 18px 1px rgba(var(--blue-glow),.8);transform-origin:50% 0}
.steps{display:grid;gap:clamp(28px,3.4vw,44px)}
.step{position:relative}
.step::before{content:"";position:absolute;left:-34px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--blue-ink);box-shadow:0 0 0 4px var(--bg)}
.step-n{display:block;font-family:var(--mono);font-size:var(--fs-sm);color:var(--blue-ink);margin-bottom:8px;font-variant-numeric:tabular-nums}
.step h3{font-size:var(--fs-xl);line-height:1.15;margin-bottom:8px}
.step p{font-size:var(--fs-base);color:var(--muted);max-width:48ch}
.car{position:sticky;top:12vh}
.car-view{position:relative;aspect-ratio:4/5;max-height:70vh;width:100%;border-radius:var(--r-card);overflow:hidden;background:var(--bg-solid);box-shadow:0 0 0 1px var(--stroke-2),var(--e2);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.car-view.is-drag{cursor:grabbing}
.slide{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.slide.is-on{opacity:1}
.slide img{-webkit-user-drag:none;pointer-events:none}
.car-bar{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;padding:14px 2px 0}
.car-cap{display:flex;gap:4px 12px;align-items:baseline;min-width:0;flex-wrap:wrap}
.car-count{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.car-cap strong{font-weight:600;letter-spacing:-.02em;font-size:var(--fs-md);color:var(--text);white-space:nowrap}
#slide-sub{flex-basis:100%;font-size:var(--fs-sm);color:var(--muted)}
.car-ctl{display:flex;align-items:center;gap:8px}
.dots{display:flex;align-items:center;margin-right:4px}
.dots button{box-sizing:content-box;width:10px;height:4px;border:none;padding:18px 7px;cursor:pointer;background-color:var(--stroke-2);background-clip:content-box;transition:background-color 200ms ease}
.dots button.is-on{width:28px;background-color:var(--blue-ink)}

/* ---------- COBERTURA: afiche inclinado + provincias como línea tipográfica ---------- */
.cov{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,112px);align-items:center}
.cov h2{margin-bottom:16px}
/* El marco tiene exactamente la proporción del afiche (1773 × 2000), así que se ve completo, sin recortes.
   El ancho se limita para que tampoco supere el 76% del alto de la pantalla. */
.cov-map{position:relative;aspect-ratio:1773/2000;justify-self:center;width:min(100%,calc(76vh*1773/2000));background:#f6f5f1;border-radius:var(--r-card);overflow:hidden;box-shadow:0 0 0 1px var(--stroke-2),var(--e2),0 40px 120px -40px rgba(var(--blue-glow),.7);transform:rotate(-3deg);will-change:transform}
.prov{display:flex;flex-wrap:wrap;gap:2px 0;margin:clamp(24px,3vw,36px) 0}
.prov li{font-weight:600;font-size:clamp(26px,3.3vw,46px);line-height:1.12;letter-spacing:-.04em;color:var(--dim);transition:color 180ms ease}
.prov li:not(:last-child)::after{content:"/";margin:0 .32em;color:var(--stroke-2);font-weight:400}

/* ---------- PREGUNTAS: una sola columna, preguntas a gran tamaño ---------- */
.faq{max-width:calc(900px + 2*var(--pad))}
.faq-head{margin-bottom:clamp(32px,4vw,48px)}
.faq-item{border-top:1px solid var(--stroke)}
.faq-item:last-child{border-bottom:1px solid var(--stroke)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;background:none;border:none;cursor:pointer;text-align:left;font-weight:500;letter-spacing:-.03em;font-size:var(--fs-xl);line-height:1.2;color:var(--muted);transition:color 180ms ease}
.faq-q[aria-expanded=true]{color:var(--text)}
.faq-sign{flex-shrink:0;width:36px;height:36px;border-radius:var(--r-ctl);background:var(--surface-2);border:1px solid var(--stroke);box-shadow:var(--hi);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:19px;line-height:1;color:var(--muted);transition:transform 260ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.faq-q[aria-expanded=true] .faq-sign{transform:rotate(45deg);background:var(--blue);border-color:transparent;color:#fff}
.faq-a p{padding:0 60px 28px 0;font-size:var(--fs-md);color:var(--muted);max-width:66ch}
.js .faq-a{height:0;overflow:hidden;opacity:0}

/* ---------- COTIZAR: WhatsApp en franja de tres tiempos + formulario a todo el ancho ---------- */
.quote{display:grid;gap:var(--gap)}
.wa-card{display:grid;grid-template-columns:1.05fr 1fr 1.05fr;gap:clamp(24px,3.4vw,48px);align-items:center;border-radius:var(--r-card);padding:clamp(24px,3.2vw,40px);background:radial-gradient(90% 120% at 0% 0%,rgba(110,150,255,.5),transparent 60%),linear-gradient(120deg,#1f45d8,#0a1f7a);border:1px solid rgba(155,182,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px -40px rgba(var(--blue-glow),.8)}
.wa-tag{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:500;color:#fff;margin-bottom:18px}
.wa-card h3{font-size:var(--fs-xl);line-height:1.1;margin-bottom:10px;color:#fff}
.wa-lead{font-size:var(--fs-base);color:rgba(255,255,255,.86)}
.wa-q{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:10px}
.topics{position:relative;display:grid;gap:2px;margin:0 -10px}
.topic-hl{position:absolute;left:0;right:0;top:0;height:0;border-radius:var(--r-ctl);background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);opacity:0;pointer-events:none}
.topic{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;text-align:left;line-height:1.3;padding:11px 10px;border:none;border-radius:var(--r-ctl);background:transparent;color:#fff;font-size:15px;cursor:pointer}
.topic-mark{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.5);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;transition:background-color 150ms ease,border-color 150ms ease}
.topic-mark::before{content:"✓";opacity:0;transform:scale(.6);transition:opacity 150ms ease,transform 220ms var(--ease-out)}
.topic[aria-pressed=true] .topic-mark{background:var(--yellow);border-color:var(--yellow);color:#05070f}
.topic[aria-pressed=true] .topic-mark::before{opacity:1;transform:none}
.wa-send{display:flex;flex-direction:column}
.bubble{align-self:flex-end;max-width:100%;min-height:6.6em;background:#f4f6fb;color:#131a30;font-size:15px;line-height:1.45;padding:12px 15px;border-radius:14px 14px 4px 14px;margin-bottom:16px;box-shadow:0 14px 30px -16px rgba(0,0,0,.7)}
.wa-num{display:block;text-align:center;margin-top:12px;font-family:var(--mono);font-size:var(--fs-xs);color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.form-card{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,4vw,64px);align-items:start;background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-card);padding:clamp(24px,3.2vw,40px);box-shadow:var(--e2)}
.form-card h3{font-size:var(--fs-xl);line-height:1.1;margin-bottom:10px}
.form-lead{font-size:var(--fs-base);color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
form .full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;top:-9999px}
.field,.field-label{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:500;color:var(--text)}
.field-label{display:block;margin-bottom:12px}
.opt{font-weight:400;color:var(--dim)}
input,select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--stroke);border-radius:var(--r-ctl);background:rgba(255,255,255,.04);font-family:inherit;font-size:16px;font-weight:400;line-height:1.4;color:var(--text);outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.35);transition:border-color 150ms ease,background-color 150ms ease,box-shadow 150ms ease}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
select:invalid{color:var(--dim)}
select option{color:var(--text);background:var(--bg-solid)}
input:focus,select:focus,textarea:focus{border-color:var(--blue-ink);background:rgba(255,255,255,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 4px rgba(var(--blue-glow),.28)}
input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 100px #0e1326 inset}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a2abc0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
textarea{resize:vertical;min-height:104px}
.empresa{display:none}
.empresa.on{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--stroke);background:var(--surface);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;box-shadow:var(--hi);will-change:transform;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease}
.chip[aria-pressed=true]{border-color:rgba(155,182,255,.6);background:rgba(var(--blue-glow),.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -10px rgba(var(--blue-glow),.8)}
.chip[aria-pressed=true]::before{content:"✓ "}
.form-end{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
#form-status{flex:1 1 260px;font-size:13.5px;color:var(--muted);transition:color 200ms ease}
#form-status a{color:inherit}

/* ---------- Pie ---------- */
.foot{position:relative;padding:clamp(56px,7vw,88px) 0 20px}
.foot::before{content:"";position:absolute;top:0;left:50%;width:min(var(--container),calc(100% - 2*var(--pad)));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--stroke-2) 30%,var(--stroke-2) 70%,transparent)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid var(--stroke)}
.foot-brand img{height:42px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:15px;color:var(--muted);max-width:290px}
.foot h4{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:8px}
.foot ul{display:flex;flex-direction:column;align-items:flex-start}
.foot a{display:inline-block;padding:9.5px 0;font-size:15px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums;transition:color 150ms ease}
.foot .foot-wa{color:var(--blue-ink);font-weight:500}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding-top:14px;font-size:13.5px;color:var(--dim)}
.foot-bottom a{font-size:13.5px;padding:11px 0;text-decoration:underline;text-underline-offset:3px}

/* ---------- Botón flotante y aviso de cookies ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px rgba(0,0,0,.5),0 16px 40px -12px rgba(var(--blue-glow),.9);transition:bottom 300ms var(--ease-out),filter 180ms ease;will-change:transform}
.anim .fab{opacity:0;pointer-events:none}
.anim .fab.is-on{pointer-events:auto}
body.cookie-on .fab{bottom:calc(var(--cookie-h,94px) + 24px)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:95;max-width:1080px;margin:0 auto;background:rgba(10,14,28,.9);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:var(--text);border:1px solid var(--stroke-2);border-radius:var(--r-card);padding:16px 16px 16px 22px;box-shadow:var(--e2);display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;visibility:hidden;opacity:0}
.cookie.on{visibility:visible;opacity:1}
.cookie p{max-width:680px;font-size:14px;color:var(--muted)}
.cookie a{text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Fotos: encuadre por anclaje ----------
   --px/--py dicen qué parte de la foto queda pegada a cada borde y --s el zoom; el anclaje se conserva al cambiar
   la proporción del marco. --mpx/--mpy/--ms son el ajuste propio de móvil. Se editan con ?encuadre=1. */
.slot-frame{position:relative;width:100%;height:100%;overflow:hidden}
img.slot{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--px,50%) var(--py,50%);transform:scale(var(--s,1));transform-origin:var(--px,50%) var(--py,50%)}
img.slot[data-fit=contain]{object-fit:contain}
@media (max-width:900px){
  img.slot{object-position:var(--mpx,var(--px,50%)) var(--mpy,var(--py,50%));transform:scale(var(--ms,var(--s,1)));transform-origin:var(--mpx,var(--px,50%)) var(--mpy,var(--py,50%))}
}

/* ---------- Hover solo con puntero real ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover,.btn-ink:hover,.fab:hover{filter:brightness(1.12)}
  .btn-wa:hover,.btn-ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.5),0 16px 40px -10px rgba(var(--blue-glow),.95)}
  .btn-line:hover,.btn-ghost:hover,.round:hover{background:rgba(255,255,255,.1);border-color:var(--stroke-2)}
  .btn-white:hover{filter:brightness(1.06)}
  .nav-links a:hover{color:var(--text)}
  .svc-tab:hover{color:var(--text)}
  .btn:hover .arr{transform:translateX(4px)}
  .seg-btn:not([aria-pressed=true]):hover,.segtab:not([aria-selected=true]):hover{color:var(--text);background:var(--surface-2)}
  .pick-card:hover{border-color:rgba(155,182,255,.7);background:rgba(var(--blue-glow),.18)}
  .clients-track li:hover{opacity:1}
  .clients-view.is-loop:hover .clients-track{animation-play-state:paused}
  .faq-q:hover{color:var(--text)}
  .chip:hover{border-color:var(--stroke-2);color:var(--text)}
  .norm:hover{transform:rotate(-6deg) scale(1.04)}
  .prov li:hover{color:var(--text)}
  .foot a:hover{color:var(--text)}
  .spot:hover::before{opacity:1}
}

/* La compresión al pulsar necesita su propia transición en los controles que definen otra más arriba */
.round,.chip,.fab,.menu-x,.svc-tab{transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease,filter 160ms ease,bottom 300ms var(--ease-out)}

/* ---------- Colapso explícito por tamaño ---------- */
@media (max-width:1039px){
  .nav-links,.only-wide{display:none}
  .burger{display:flex}
  .nav-in{padding-left:14px;gap:8px}
  /* En pantallas estrechas el selector de perfil baja a una segunda fila delgada bajo el logo */
  .nav-in{flex-wrap:wrap;row-gap:6px;padding-bottom:6px}
  .seg{order:3;flex:1 0 100%;margin-right:7px;padding:2px}
  .seg-btn{flex:1;min-height:32px}
  .hero-card{padding-top:44px}
  .logo img{height:30px}
  .nav-cta{gap:4px}
  body.cookie-on .fab{bottom:calc(var(--cookie-h,186px) + 24px)}
  .foot-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .wa-card{grid-template-columns:1fr 1fr}
  .wa-intro{grid-column:1/-1}
}
@media (max-width:900px){
  /* Servicios: en pantallas estrechas cada panel pone la foto encima del texto */
  .segpanel{grid-template-columns:minmax(0,1fr);gap:4px}
  /* El botón más largo ("Solicitar programa para mi empresa") no cabe en una línea en celular: se le permite partir */
  .segpanel .btn{white-space:normal;text-align:center;max-width:100%;padding:12px 18px;line-height:1.25}
  .segpanel-media{height:auto;aspect-ratio:4/3}
  .segpanel-body{padding:18px 14px 16px}
  .pest-lay,.proc,.cov,.form-card{grid-template-columns:1fr}
  .pest-stage{display:none}
  .car{position:static}
  .car-view{aspect-ratio:4/3;max-height:none}
  .cov-map{max-width:440px;transform:rotate(-2deg)}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero-card{min-height:0}
  .hero-media{top:0;height:86vw}
  .hero-card::after{background:radial-gradient(90% 40% at 10% 62%,rgba(var(--blue-glow),.3),transparent 70%),linear-gradient(180deg,rgba(5,7,15,.6) 0,rgba(5,7,15,0) 16vw,rgba(5,7,15,0) 46vw,var(--bg) 84vw)}
  .hero-body{padding-top:62vw}
  .hero-ctas{width:100%}
  .hero-ctas .btn{flex:1 1 160px}
  .pick-cards{grid-template-columns:1fr;gap:8px}
  .pick-card{min-height:60px;padding:10px 14px}
  .segtabs{display:flex}
  .segtab{flex:1;padding:0 8px;font-size:var(--fs-sm)}
  .clients-track{--logo-gap:36px}
  .clients-track img{height:56px}
  .badges{grid-template-columns:1fr}
  .badge{border-left:none;border-top:1px solid var(--stroke);padding:12px 16px}
  .badge:first-child{border-top:none}
  .stats{grid-template-columns:1fr;margin:16px 0 0}
  /* En teléfono el pie de foto baja debajo de la imagen: encima la tapaba */
  .why-fig figcaption{position:static;max-width:none;padding:14px 0 0;border:none;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .wa-card{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .faq-a p{padding-right:0}
  .foot-grid{gap:28px}
  .foot-bottom{padding-right:72px}
}

/* ---------- Pantallas táctiles: área de toque mínima de 44 px y texto de lectura a 16 px ---------- */
@media (max-width:1039px){
  .logo,.btn-sm,.chip{min-height:44px}
  /* El selector de perfil conserva su tamaño visual; el área de toque crece hacia arriba y abajo */
  .seg-btn{position:relative}
  .seg-btn::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
  .dots button{padding-top:20px;padding-bottom:20px}
  .foot a{padding-top:11.5px;padding-bottom:11.5px}
  .foot-bottom a{padding-top:13px;padding-bottom:13px}
  .cookie p a{padding:11px 0}
}
@media (max-width:640px){
  .pest p,.stat p,#slide-sub,.topic,.bubble,#form-status,.foot-brand p,.foot a,.cookie p{font-size:16px}
  .foot a{padding-top:11px;padding-bottom:11px}
  .foot-bottom a{font-size:13.5px;padding-top:13px;padding-bottom:13px}
  /* Con el texto a 16 px el aviso crece: se compensa con menos relleno para que tape lo mínimo */
  .cookie{padding:14px 16px;gap:12px}
  .cookie p{line-height:1.45}
  .cookie-btns{width:100%}
  .cookie-btns .btn{flex:1}
}

/* ---------- Menos transparencia y menos movimiento cuando el sistema lo pide ---------- */
@media (prefers-reduced-transparency:reduce){
  .nav-in,.cookie,.menu,.badges,.stat{background:var(--bg-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Menos movimiento no es cero animación: se quedan los fundidos y se quita el desplazamiento */
  .faq-sign,.topic-mark::before,.spot::before{transition-duration:0s}
  .btn.is-loading::before{animation-duration:1.4s}
  .js .w>span,.js [data-hero],.js .hero-media{animation-name:fadeOnly}
  .btn:active,.round:active,.chip:active,.fab:active,.menu-x:active,.svc-tab:active{transform:none}
  .svc-tabs-on{transition:none}
  .js .svc,.js .svc.is-on{filter:none}
  .btn:hover .arr{transform:none}
  /* El carrusel de logos no se mueve solo: queda como fila que se desplaza a mano */
  .clients-view.is-loop .clients-track{animation:none;transform:none}
  .clients-view.is-loop{overflow-x:auto}
  .segpanel.is-in{animation-name:fadeOnly}
  .seg-btn:active,.segtab:active,.pick-card:active{transform:none}
}

/* ---------- Página legal (política de privacidad y cookies) ---------- */
.legal{padding:clamp(128px,14vw,176px) 0 clamp(56px,7vw,96px)}
.legal-in{max-width:760px}
.legal h1{font-size:var(--fs-2xl);margin-bottom:12px}
.legal-date{font-size:var(--fs-sm);color:var(--dim);margin-bottom:28px}
.legal-note{padding:16px 18px;border-radius:var(--r-in);border:1px solid rgba(255,230,0,.45);background:rgba(255,230,0,.08);color:var(--text);margin-bottom:8px}
.legal-note strong{color:var(--yellow)}
.legal h2{font-size:var(--fs-lg);line-height:1.25;letter-spacing:-.02em;margin:40px 0 12px}
.legal p,.legal li{color:var(--muted)}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px;padding-left:22px;list-style:disc}
.legal li{margin-bottom:8px}
.legal strong{color:var(--text);font-weight:600}
.legal a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.legal mark{background:rgba(255,230,0,.18);color:var(--yellow);padding:1px 6px;border-radius:6px}
.legal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.foot-legal{padding-top:28px}
.foot-legal::before{display:none}