/* ============================================================
   BIOSANITAS · sistema de color "de la raíz a los frutos"
   El azul es la química y el registro. El verde es el cultivo.
   El negro sale por completo: lo oscuro es azul profundo.
   ============================================================ */
:root{
  --azul:#0B3B5C;
  --azul-900:#072A42;
  --azul-700:#12507A;
  --teal:#0E7C86;
  --verde:#2E8B3D;
  --brote:#A8D46A;

  --fondo:#F2F6F4;
  --papel:#FFFFFF;
  --tinta:#12303F;
  --gris:#5C7180;
  --gris-claro:#8A9AA6;
  --borde:#D8E4DE;
  --borde-fuerte:#B9CCC4;
  --rojo:#C81E24;

  /* --- capa semántica: lo que cambia con el tema ---
     Los seis de arriba son la marca y no se tocan. Estos dicen
     qué papel cumple cada color, y el tema oscuro los reescribe. */
  color-scheme:light;
  --azul-sec:#0B3B5C;      /* fondo de las secciones azules, kits y pilares */
  --azul-sec-hov:#12507A;
  --azul-hondo:#072A42;    /* pie y tarjetas de servicio */
  --azul-txt:#0B3B5C;      /* el azul cuando es texto sobre papel */
  --azul-txt-2:#12507A;
  --teal-txt:#0E7C86;      /* teal y verde cuando son texto, ícono o filo */
  --verde-txt:#2E8B3D;
  --btn-azul:#0B3B5C;
  --btn-azul-hov:#12507A;
  --rojo-txt:#C81E24;   /* la advertencia legal; el rojo de marca no se toca */

  --foto:#C9D8DF;          /* caja donde descansa el envase: oscura para que el envase blanco se recorte */
  --svc-hov:#FAFDFB;
  --mapa-off:#B8CAD2;      /* país sin mercado: se tiene que leer contra el fondo */
  --raya:rgba(11,59,92,.045);
  --hueco-1:#F4F8F6;
  --hueco-2:#E7EFEB;
  --velo:rgba(7,42,66,.72);
  --sombra:rgba(11,59,92,.11);
  --mapa-filtro:saturate(.92);

  /* rampa de líneas · sanidad vegetal y fisiología */
  --l-nut:#7FB93F;
  --l-fit:#2E8B3D;

  --wrap:1280px;
  --pad:32px;

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ---------- tema oscuro ----------
   Se enciende sólo con el switcher del header (data-tema="oscuro"
   en <html>), nunca por la preferencia del sistema: el sitio abre
   siempre en claro y la elección queda guardada en el navegador.
   La regla de la marca sigue valiendo: lo oscuro es azul profundo,
   no negro. El azul y el verde se aclaran cuando son texto; como
   fondo se oscurecen para que el papel siga siendo lo más claro. */
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --fondo:#071B28;
  --papel:#0C2634;
  --tinta:#E4EFF4;
  --gris:#9CB3C0;
  --gris-claro:#7B94A3;
  --borde:#1B3B4D;
  --borde-fuerte:#2B5468;

  --azul-sec:#0A2E46;
  --azul-sec-hov:#10425F;
  --azul-hondo:#05141F;
  --azul-txt:#6FB8DC;
  --azul-txt-2:#8AC7E6;
  --teal-txt:#3FC0CC;
  --verde-txt:#6FCB7C;
  --btn-azul:#12507A;
  --btn-azul-hov:#1A6A9B;
  --rojo-txt:#FF8A8F;

  --foto:#0A202C;
  --svc-hov:#11303F;
  --mapa-off:#2B5569;
  --raya:rgba(255,255,255,.05);
  --hueco-1:#0E2A38;
  --hueco-2:#0A2130;
  --velo:rgba(2,12,19,.82);
  --sombra:rgba(0,0,0,.55);
  --mapa-filtro:invert(.9) hue-rotate(180deg) saturate(.72) brightness(.94);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--teal-txt);text-decoration:none}
a:hover{color:var(--verde-txt)}

:focus-visible{outline:3px solid var(--brote);outline-offset:3px;border-radius:2px}

/* ---------- tipografía ---------- */
/* El display usa el eje de ancho de Archivo: expandido, como la
   rotulación de un silo o de un bidón. El logo es una grotesca
   pesada; esto le contesta. */
.d1,.d2,.d3{
  font-family:var(--sans);
  font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;
  letter-spacing:-0.015em;line-height:0.96;margin:0;
  text-wrap:balance;
}
.d1{font-size:clamp(36px,4.8vw,66px)}
.d2{font-size:clamp(30px,3.8vw,50px)}
.d3{font-size:clamp(22px,2.4vw,30px)}

.ojo{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--teal-txt);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
.ojo::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.ojo--sol{color:var(--brote)}

.dato{font-family:var(--mono);font-size:13px;letter-spacing:0.02em;color:var(--gris)}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--gris);max-width:62ch;margin:0}

/* ---------- estructura ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:clamp(64px,8vw,112px) 0}
.sec--azul{background:var(--azul-sec);color:#fff}
.sec--azul .lead{color:#B4CBDA}
.sec--papel{background:var(--papel)}

.cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:48px}
.cabecera .lead{max-width:44ch}

/* ---------- botones ----------
   Píldora dinámica: brillo que cruza al hover, elevación y
   sombra de color. A pedido del cliente (2026-09-15). */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:15px 28px;border-radius:999px;
  position:relative;overflow:hidden;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn--verde{background:var(--verde);color:#fff;box-shadow:0 8px 18px -8px rgba(46,125,68,.55)}
.btn--verde::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg)}
.btn--verde:hover{background:#256F31;color:#fff;transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 26px -10px rgba(46,125,68,.65)}
.btn--verde:hover::after{animation:btn-brillo .7s ease}
.btn--verde:active{transform:translateY(0) scale(.99)}
.btn--azul{background:var(--btn-azul);color:#fff;box-shadow:0 8px 18px -8px rgba(11,59,92,.5)}
.btn--azul:hover{background:var(--btn-azul-hov);color:#fff;transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 26px -10px rgba(11,59,92,.6)}
.btn--linea{border:1.5px solid var(--borde-fuerte);color:var(--tinta)}
.btn--linea:hover{border-color:var(--teal-txt);color:var(--teal-txt);transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 20px -10px rgba(14,124,134,.35)}
.btn--fantasma{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn--fantasma:hover{border-color:var(--brote);color:var(--brote);background:rgba(168,212,106,.08);
  transform:translateY(-2px) scale(1.03);box-shadow:0 10px 22px -10px rgba(168,212,106,.35)}
@keyframes btn-brillo{to{left:135%}}

/* ---------- header ---------- */
/* Fondo blanco sólido e integrado (acordado con el cliente el
   2026-09-17, con referencia visual a tecnomyl.com.py). */
.top{
  position:sticky;top:0;z-index:60;
  background:var(--papel);
  border-bottom:1px solid var(--borde);
  box-shadow:0 1px 0 rgba(11,59,92,.05);
}
.top__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:80px;
  display:flex;align-items:center;justify-content:space-between;gap:32px}
.top__logo{height:clamp(54px, 6.2vw, 72px);width:auto;cursor:pointer}
/* En oscuro entra la variante monocromática blanca, la misma del pie:
   el logo a color tiene el "BIO" y la bajada en negro y se perdería. */
.top__logo--oscuro{display:none}
:root[data-tema="oscuro"] .top__logo--claro{display:none}
:root[data-tema="oscuro"] .top__logo--oscuro{display:block}
.top__nav{display:flex;align-items:center;gap:4px}
.nav__b{
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:9px 14px;border-radius:2px;color:var(--tinta);
  transition:color .15s ease,background .15s ease;
}
.nav__b:hover{color:var(--teal-txt);background:rgba(14,124,134,.1)}
.nav__b.is-on{color:var(--teal-txt);background:rgba(14,124,134,.14)}
.top__cta{margin-left:12px}
.top__burger{display:none}
.top__soc{display:flex;align-items:center;gap:8px;margin-left:16px;flex:none}
.top__soc a{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1.5px solid var(--borde-fuerte);border-radius:999px;
  color:var(--gris);transition:color .18s ease,border-color .18s ease,transform .18s ease}
.top__soc a:hover{color:var(--teal-txt);border-color:var(--teal-txt);transform:translateY(-2px)}
.top__soc svg{width:16px;height:16px;display:block}
/* Switcher de tema: mismo anillo que las redes, al final de la fila.
   Muestra la luna cuando estás en claro y el sol cuando estás en oscuro:
   el ícono es a dónde vas, no dónde estás. */
.tema{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border:1.5px solid var(--borde-fuerte);border-radius:999px;
  color:var(--gris);margin-left:6px;
  transition:color .18s ease,border-color .18s ease,transform .18s ease}
.tema:hover{color:var(--teal-txt);border-color:var(--teal-txt);transform:translateY(-2px)}
.tema svg{width:16px;height:16px;display:block}
.tema__sol{display:none}
:root[data-tema="oscuro"] .tema__luna{display:none}
:root[data-tema="oscuro"] .tema__sol{display:block}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(115% 75% at 78% 12%, rgba(168,212,106,.20), transparent 62%),
    linear-gradient(178deg,#0B3B5C 0%,#0C5570 46%,#0E7C86 72%,#2E7B44 100%)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* Carrusel del hero: las fotos corren hacia la izquierda.
   Se cargan desde el bloque Hero (Páginas → Inicio). */
.hero__slider{display:flex;height:100%;
  transition:transform .9s cubic-bezier(.65,0,.35,1)}
.hero__slider img{width:100%;height:100%;object-fit:cover;flex:0 0 100%}
/* Manchas de luz que flotan sobre la foto: movimiento de fondo
   a pedido del cliente (2026-09-15). */
.hero__glow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__glow i{position:absolute;border-radius:50%;filter:blur(64px);
  mix-blend-mode:screen;opacity:.5;will-change:transform}
.hero__glow i:nth-child(1){width:44vw;height:44vw;min-width:340px;min-height:340px;
  top:-18%;left:-10%;background:radial-gradient(circle,rgba(168,212,106,.55),transparent 70%);
  animation:glow-vaga 17s ease-in-out infinite alternate}
.hero__glow i:nth-child(2){width:38vw;height:38vw;min-width:300px;min-height:300px;
  bottom:-22%;right:-6%;background:radial-gradient(circle,rgba(14,124,134,.6),transparent 70%);
  animation:glow-vaga 21s ease-in-out infinite alternate-reverse}
.hero__glow i:nth-child(3){width:26vw;height:26vw;min-width:220px;min-height:220px;
  top:30%;left:52%;background:radial-gradient(circle,rgba(46,125,68,.5),transparent 70%);
  animation:glow-vaga 14s ease-in-out infinite alternate}
@keyframes glow-vaga{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(6vw,4vh) scale(1.18)}
  100%{transform:translate(-4vw,7vh) scale(.94)}
}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(7,42,66,.94) 0%,
    rgba(7,42,66,.88) 34%,
    rgba(11,59,92,.62) 60%,
    rgba(14,124,134,.34) 100%);
}
/* Los envases del hero: escalonados, el del medio adelante.
   Si algún día llega la foto de campo, se carga detrás y esto
   sigue funcionando igual. */
.hero__envases{position:absolute;right:clamp(16px,4vw,80px);bottom:0;z-index:-1;
  display:flex;align-items:flex-end;gap:clamp(4px,1.4vw,22px);pointer-events:none;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.42))}
.hero__envases img{width:auto;display:block}
.hero__envases img:nth-child(1){height:clamp(180px,25vw,330px);opacity:.92}
.hero__envases img:nth-child(2){height:clamp(215px,30vw,400px)}
.hero__envases img:nth-child(3){height:clamp(180px,25vw,330px);opacity:.92}
@media (max-width:1000px){.hero__envases{display:none}}

.hero__in{max-width:var(--wrap);margin:0 auto;padding:clamp(72px,8.5vw,116px) var(--pad) clamp(72px,9vw,116px)}
.hero__txt{max-width:620px;color:#fff;position:relative;z-index:1}
.hero .d1{color:#fff}
.hero .d1 em{font-style:normal;color:var(--brote);white-space:nowrap}
.hero__p{margin:26px 0 36px;font-size:clamp(16px,1.4vw,19px);color:#C6DCEA;max-width:52ch}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}
/* Entrada del hero con impacto: los elementos suben escalonados. */
.hero__txt>*{opacity:0;transform:translateY(28px);
  animation:hero-subir .85s cubic-bezier(.22,1,.36,1) forwards}
.hero__txt>*:nth-child(1){animation-delay:.1s}
.hero__txt>*:nth-child(2){animation-delay:.25s}
.hero__txt>*:nth-child(3){animation-delay:.4s}
.hero__txt>*:nth-child(4){animation-delay:.55s}
@keyframes hero-subir{to{opacity:1;transform:none}}

/* Un texto por foto: los textos se apilan en la misma celda y se ve
   el de la foto actual; al cambiar, sus elementos vuelven a subir. */
.hero__txts{display:grid}
.hero__txts>.hero__txt{grid-area:1/1}
.hero--por-foto .hero__txt{transition:opacity .5s ease,visibility .5s}
.hero--por-foto .hero__txt:not(.es-actual){opacity:0;visibility:hidden}
.hero--por-foto .hero__txt:not(.es-actual)>*{animation:none}
.hero--por-foto .hero__envases{transition:opacity .7s ease}
.hero--por-foto .hero__envases:not(.es-actual){opacity:0}

/* Sólo fotos: sin velo ni texto, y el alto lo pone la foto actual
   (el script lo ajusta al cambiar; sin script, manda la más alta). */
.hero--fotos{background:var(--azul-hondo)}
.hero--fotos .hero__media{position:relative;inset:auto;z-index:auto;transition:height .6s ease}
.hero--fotos .hero__slider{align-items:flex-start;height:auto}
.hero__slide{flex:0 0 100%;display:block}
.hero--fotos .hero__slider img{width:100%;height:auto;object-fit:fill;display:block}

/* Puntos para pasar de foto. */
.hero__puntos{position:absolute;left:0;right:0;bottom:clamp(10px,2vw,22px);z-index:2;
  display:flex;justify-content:center;gap:4px}
.hero__puntos button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.hero__puntos button::before{content:"";width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.18);transition:background .2s ease,transform .2s ease}
.hero__puntos button:hover::before{background:rgba(255,255,255,.8)}
.hero__puntos button[aria-current="true"]::before{background:#fff;transform:scale(1.3)}
.hero__puntos button:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:50%}

@media (prefers-reduced-motion:reduce){
  .hero__slider,.hero__glow i,.hero__txt>*,.hero__txt,.hero__envases,.hero--fotos .hero__media{animation:none!important;transition:none!important}
  .hero__txt>*{opacity:1;transform:none}
}

/* ---------- LA RAMPA · elemento firma ----------
   Una sola barra verde partida en las líneas del
   catálogo (hoy tres: fitosanitarios, coadyuvantes y
   nutrición vegetal). No es decoración: el color de cada segmento es
   el que identifica a esa línea en todo el sitio — en los
   chips del catálogo, en el filo de cada ficha y en el
   modal. */
.rampa{background:var(--papel);border-bottom:1px solid var(--borde)}
.rampa__escala{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);max-width:var(--wrap);margin:0 auto;
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gris-claro);padding-top:26px;padding-bottom:12px;
}
.rampa__grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) 8px;gap:0}
.ln{
  position:relative;text-align:left;padding:0 26px 34px 0;
  border-right:1px solid var(--borde);transition:background .2s ease;
}
.ln:last-child{border-right:0}
.ln:not(:first-child){padding-left:26px}
.ln__barra{height:7px;border-radius:1px;background:var(--c);margin-bottom:22px;
  transition:height .2s ease}
.ln:hover .ln__barra{height:12px}
.ln__n{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--c);margin-bottom:8px;font-weight:600}
.ln__t{font-family:var(--sans);font-variation-settings:'wdth' 108,'wght' 700;
  font-size:19px;line-height:1.2;margin:0 0 10px}
.ln__d{font-size:14.5px;color:var(--gris);margin:0 0 16px;line-height:1.55}
.ln__v{font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--c);font-weight:600}
.ln:hover .ln__v{text-decoration:underline;text-underline-offset:4px}

/* ---------- banda de cifras ---------- */
.cifras{background:var(--azul-sec);color:#fff}
.cifras__grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.cifra{padding:34px 28px 34px 0;border-right:1px solid rgba(255,255,255,.14)}
.cifra:not(:first-child){padding-left:28px}
.cifra:last-child{border-right:0}
.cifra__n{font-family:var(--sans);font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(26px,2.7vw,36px);line-height:1;letter-spacing:-0.01em}
.cifra__l{font-family:var(--mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:#8FB3C9;margin-top:9px}

  /* ---------- servicios ---------- */
/* Siete servicios: tres por fila; la última fila lleva una. */
.svc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--borde);
  border:1px solid var(--borde)}
.svc{background:var(--papel);padding:34px 28px 30px;display:flex;flex-direction:column;
  transition:background .2s ease}
.svc:hover{background:var(--svc-hov)}
.svc__ico{width:40px;height:40px;color:var(--teal-txt);margin-bottom:22px}
.svc__ico svg{width:100%;height:100%;display:block}
/* Ilustración de cada servicio (img/servicios/*.svg), generadas para
   acompañar al título de cada tarjeta. */
.svc__img{border:1px solid var(--borde);border-radius:6px;overflow:hidden;
  margin-bottom:22px;background:var(--papel)}
.svc__img img{width:100%;display:block}
.svc__t{font-family:var(--sans);font-variation-settings:'wdth' 108,'wght' 700;
  font-size:18px;line-height:1.25;margin:0 0 12px}
.svc__d{font-size:14.5px;color:var(--gris);margin:0;line-height:1.6;flex:1}

/* servicios · pantalla propia.
   Estilo de tarjeta oscura con imagen a la izquierda y captura de
   consulta por servicio (referencia visual: agrofuturo.com.py/servicios,
   acordada el 2026-09-22), en la paleta de Biosanitas. */
.svcx{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3vw,44px);
  align-items:start;background:var(--azul-hondo);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:clamp(24px,3.2vw,40px);margin-bottom:28px;color:#fff}
.svcx__ico{width:52px;height:52px;color:var(--brote);margin-bottom:20px}
.svcx__ico svg{width:100%;height:100%}
.svcx__media{border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden;
  background:var(--papel)}
.svcx__media img{width:100%;display:block}
.svcx .d3{color:#fff}
.svcx__d{font-size:15.5px;color:#B4CBDA;margin:14px 0 0;line-height:1.65}
/* Llamado a la acción por servicio: identifica la categoría. */
.svcx__cta{margin:20px 0 0;font-size:15.5px;font-variation-settings:'wght' 600;
  color:var(--brote);line-height:1.5}
.svcx__lista{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:12px 28px}
.svcx__lista li{position:relative;padding-left:22px;font-size:15px;color:#B4CBDA;line-height:1.5}
.svcx__lista li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--verde-txt)}
/* La frase de cierre del bloque de registros va sin viñeta,
   como en la tarjeta del cliente. */
.svcx__cierre{margin:16px 0 0;font-size:15px;color:#B4CBDA;line-height:1.5}
/* Formulario de captura: cada consulta sale con la categoría del
   servicio en el asunto y llega a info@biosanitasparaguay.com. */
.svcx__form{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:14px}
.svcx__fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svcx__form label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:#7FA5BE;display:block;margin-bottom:7px}
.svcx__form input,.svcx__form textarea{
  width:100%;padding:12px 14px;border:1.5px solid rgba(255,255,255,.28);border-radius:2px;
  font-size:15px;font-family:var(--sans);color:#fff;background:rgba(255,255,255,.07);
}
.svcx__form input::placeholder,.svcx__form textarea::placeholder{color:#7FA5BE}
.svcx__form input:focus,.svcx__form textarea:focus{
  border-color:var(--brote);outline:none;box-shadow:0 0 0 3px rgba(168,212,106,.18)}
.svcx__form textarea{resize:vertical;min-height:74px}
.svcx__enviar{background:var(--brote);color:var(--azul-900);border-radius:999px;
  padding:14px 30px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;justify-self:start;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.svcx__enviar:hover{background:#BCE382;transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(168,212,106,.5)}

/* Frase de cierre institucional: lo que hace Biosanitas
   (del archivo del cliente). */
.verbos{font-family:var(--mono);font-size:clamp(13px,1.6vw,17px);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-txt);margin:0;line-height:1.9;text-wrap:balance}

/* ---------- productos ---------- */
.prod__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#catalogo{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prod{
  background:var(--papel);border:1px solid var(--borde);border-top:4px solid var(--c);
  text-align:left;display:flex;flex-direction:column;width:100%;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.prod:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--sombra);border-color:var(--borde-fuerte);border-top-color:var(--c)}
.prod__foto{position:relative;aspect-ratio:4/3;background:var(--foto);overflow:hidden;flex:none}
.prod__foto img{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .3s ease}
.prod:hover .prod__foto img{transform:scale(1.04)}
/* Sin foto de envase: el nombre del producto y la droga, en el
   color de su categoría. Se pinta debajo de la imagen, así también
   cubre el caso de una foto que no carga. */
.prod__hueco{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:20px 22px;text-align:center;
  background:var(--foto);z-index:0;
}
.prod__marca{font-family:var(--sans);font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(19px,1.9vw,25px);line-height:1.08;letter-spacing:-0.01em;
  color:var(--c);text-wrap:balance;overflow-wrap:break-word;max-width:100%}
.prod__droga{font-family:var(--sans);font-style:italic;font-size:12.5px;line-height:1.35;
  color:var(--gris);max-width:30ch;text-wrap:balance}
.prod__foto img{position:relative;z-index:1}
.con-foto .prod__hueco{display:none}
.prod__tag{position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:#fff;background:var(--c);padding:5px 9px;border-radius:2px}
.prod__cuerpo{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.prod__t{font-family:var(--sans);font-variation-settings:'wdth' 108,'wght' 700;
  font-size:18px;line-height:1.22;margin:0 0 7px}
.prod__pa{font-family:var(--mono);font-size:12px;color:var(--c);margin-bottom:12px;font-weight:500}
.prod__d{font-size:14px;color:var(--gris);margin:0 0 auto;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.prod__v{font-family:var(--mono);font-size:11px;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--teal-txt);padding-top:18px;font-weight:600}
.prod:hover .prod__v{color:var(--verde-txt)}

/* catálogo */
.cat__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:40px;
  align-items:end;margin-bottom:30px}
.buscar{position:relative}
.buscar input{
  width:100%;padding:15px 16px 15px 44px;border:1.5px solid var(--borde-fuerte);
  border-radius:2px;background:var(--papel);font-size:15px;color:var(--tinta);
  font-family:var(--sans);
}
.buscar input::placeholder{color:var(--gris-claro)}
.buscar input:focus{border-color:var(--teal-txt);outline:none;box-shadow:0 0 0 3px rgba(14,124,134,.13)}
.buscar__lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--gris-claro);pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.chip{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.09em;
  text-transform:uppercase;padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--borde-fuerte);color:var(--gris);background:transparent;
  transition:all .18s ease;display:inline-flex;align-items:center;gap:8px;
  position:relative;overflow:hidden;
}
.chip:hover{border-color:var(--c,var(--teal-txt));color:var(--c,var(--teal-txt));
  transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(14,124,134,.4)}
.chip:active{transform:translateY(0) scale(.97)}
.chip.is-on{background:var(--c,var(--teal-txt));border-color:var(--c,var(--teal-txt));color:#fff;
  box-shadow:0 8px 18px -8px rgba(14,124,134,.5)}
.chip.is-on .chip__p{background:#fff}
.chip__p{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;
  transition:transform .18s ease}
.chip:hover .chip__p{transform:scale(1.35)}
.chip:hover{border-color:var(--c,var(--teal-txt));color:var(--c,var(--teal-txt))}
.chip.is-on{background:var(--c,var(--azul));border-color:var(--c,var(--azul));color:#fff}
.chip.is-on .chip__p{background:rgba(255,255,255,.85)}
.vacio{padding:70px 0;text-align:center;color:var(--gris)}

/* ---------- kits por cultivo ---------- */
.kit__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.17)}
.kit{background:var(--azul-sec);padding:28px 22px 26px;display:flex;flex-direction:column;
  transition:background .2s ease}
.kit:hover{background:var(--azul-sec-hov)}
.kit__promesa{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--azul-900);background:var(--brote);
  align-self:flex-start;padding:5px 10px;border-radius:2px;margin-bottom:20px}
.kit__t{font-family:var(--sans);font-variation-settings:'wdth' 110,'wght' 700;
  font-size:19px;line-height:1.2;margin:0 0 11px;color:#fff}
.kit__d{font-size:14px;color:#B4CBDA;margin:0 0 18px;line-height:1.55;flex:1}
.kit__items{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.kit__items li{font-family:var(--mono);font-size:11.5px;letter-spacing:0.02em;color:var(--brote);
  padding:4px 0;line-height:1.45}
/* La fila de kits queda impar: esta celda la cierra a lo ancho
   en vez de dejar huecos sueltos. */
.kit--cta{grid-column:1/-1;flex-direction:row;align-items:center;
  justify-content:space-between;gap:28px;flex-wrap:wrap;padding:24px 22px}
.kit--cta:hover{background:var(--azul-sec)}
.kit--cta .kit__t{margin:0;flex:none}
.kit--cta .kit__d{flex:1;min-width:220px;margin:0}
.kit__pend{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:#6E93AC;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}

/* hueco de logo de marca representada */
.marca__ph{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  color:rgba(255,255,255,.34);border:1px dashed rgba(255,255,255,.22);
  padding:9px 20px;border-radius:2px}

/* ---------- institucional ---------- */
.inst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:start}
.inst__pilares{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16)}
.pilar{background:var(--azul-sec);padding:26px 24px}
.pilar__t{font-family:var(--mono);font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--brote);margin-bottom:11px;font-weight:600}
.pilar__d{font-size:14px;color:#B4CBDA;margin:0;line-height:1.6}

/* ---------- mapa ---------- */
.mapa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:64px;align-items:center}
.mapa__svg{width:100%;height:auto;max-height:560px}
.mp{fill:var(--mapa-off);stroke:var(--papel);stroke-width:1.4;transition:fill .2s ease;
  opacity:0;animation:mp-aparece .6s ease forwards}
.mapa__svg .mp:nth-child(2){animation-delay:.05s}
.mapa__svg .mp:nth-child(3){animation-delay:.1s}
.mapa__svg .mp:nth-child(4){animation-delay:.15s}
.mapa__svg .mp:nth-child(5){animation-delay:.2s}
.mapa__svg .mp:nth-child(6){animation-delay:.25s}
.mapa__svg .mp:nth-child(7){animation-delay:.3s}
.mapa__svg .mp:nth-child(8){animation-delay:.35s}
.mapa__svg .mp:nth-child(9){animation-delay:.4s}
.mapa__svg .mp:nth-child(10){animation-delay:.45s}
.mapa__svg .mp:nth-child(11){animation-delay:.5s}
.mapa__svg .mp:nth-child(12){animation-delay:.55s}
.mapa__svg .mp:nth-child(13){animation-delay:.6s}
.mapa__svg .mp:nth-child(14){animation-delay:.65s}
@keyframes mp-aparece{to{opacity:1}}
.mp--on{fill:var(--teal-txt);animation:mp-aparece .6s ease forwards,mp-pulso 3.2s ease-in-out 1.2s infinite}
.mp--on:hover{fill:var(--verde-txt);animation-play-state:paused,paused}
@keyframes mp-pulso{0%,100%{fill:var(--teal-txt)}50%{fill:var(--verde-txt)}}
@media (prefers-reduced-motion:reduce){
  .mp,.mp--on{animation:none!important;opacity:1}
}
.mapa__leyenda{display:flex;gap:26px;flex-wrap:wrap;margin:26px 0 0;padding:0;list-style:none}
.mapa__leyenda li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--gris)}
.mapa__sw{width:14px;height:14px;border-radius:2px;flex:none}
.mapa__cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--borde);
  border:1px solid var(--borde);margin-top:34px}
.mapa__c{background:var(--papel);padding:22px 20px}

/* ---------- cierre ---------- */
.cierre{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--papel);border:1px solid var(--borde);overflow:hidden}
.cierre__txt{padding:clamp(38px,5vw,64px)}
.cierre__foto{position:relative;min-height:320px;background:
  repeating-linear-gradient(-45deg,transparent 0 13px,var(--raya) 13px 26px),
  linear-gradient(160deg,var(--hueco-1),var(--hueco-2));
  display:flex;align-items:flex-end;padding:22px}
.cierre__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cierre__foto span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--gris-claro)}

/* ---------- contacto ---------- */
.cto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.cto__datos{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:1px;
  background:var(--borde);border:1px solid var(--borde)}
.cto__datos li{background:var(--papel);padding:20px 22px}
.cto__k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--gris-claro);margin-bottom:6px}
.cto__v{font-size:16px;font-variation-settings:'wght' 600}
.form{background:var(--papel);border:1px solid var(--borde);padding:clamp(28px,3.4vw,40px);
  display:grid;gap:20px}
.campo{display:grid;gap:8px}
.campo__l{font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--gris)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--borde-fuerte);border-radius:2px;
  font-size:15px;font-family:var(--sans);color:var(--tinta);background:var(--papel);
}
.campo textarea{resize:vertical;min-height:112px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--teal-txt);outline:none;box-shadow:0 0 0 3px rgba(14,124,134,.13)}
.form__par{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---------- ficha (modal) ---------- */
.velo{position:fixed;inset:0;z-index:90;background:var(--velo);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.velo[hidden]{display:none}
.ficha{background:var(--papel);max-width:900px;width:100%;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-top:5px solid var(--c);
  max-height:min(88vh,760px)}
.ficha__foto{position:relative;background:var(--foto);min-height:280px}
.ficha__foto .prod__marca{font-size:clamp(26px,3vw,38px)}
.ficha__foto .prod__droga{font-size:14px}
.ficha__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:26px;z-index:1}
.ficha__mas{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  background:var(--c);color:#fff;padding:7px 12px;border-radius:2px;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.ficha__mas:hover{filter:brightness(1.08)}
.ficha__mas:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ficha__cuerpo{padding:32px;overflow-y:auto}
.ficha__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.ficha__tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.13em;
  text-transform:uppercase;color:#fff;background:var(--c);padding:6px 11px;border-radius:2px}
.ficha__x{width:34px;height:34px;border-radius:2px;display:grid;place-items:center;
  color:var(--gris);font-size:19px;line-height:1}
.ficha__x:hover{background:var(--fondo);color:var(--tinta)}
.ficha__pa{font-family:var(--mono);font-size:13.5px;color:var(--c);margin:8px 0 16px;font-weight:500}
.ficha__specs{list-style:none;margin:24px 0;padding:0;display:grid;gap:1px;
  background:var(--borde);border:1px solid var(--borde)}
.ficha__specs li{background:var(--papel);padding:13px 16px;display:flex;justify-content:space-between;
  gap:18px;font-size:14px;flex-wrap:wrap}
.ficha__specs b{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gris-claro);font-weight:500}
.ficha__btns{display:flex;gap:12px;flex-wrap:wrap}
.ficha__aviso{margin-top:22px;padding-top:18px;border-top:1px solid var(--borde);
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--rojo-txt);line-height:1.6}

/* ---------- footer ---------- */
.pie{background:var(--azul-hondo);color:#fff;padding:64px 0 0}
.pie__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px}
/* El logo del pie va en su variante monocromática blanca:
   sin caja, directo sobre el azul profundo. */
.pie__logo{height:54px;width:auto;margin-bottom:22px}
.pie__d{font-size:14px;color:#9EBACE;max-width:32ch;margin:0;line-height:1.65}
.pie__t{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--brote);margin-bottom:16px}
.pie__l{display:block;font-size:14.5px;color:#C6DCEA;padding:5px 0;text-align:left}
.pie__l:hover{color:var(--brote)}
.pie__soc{display:flex;gap:10px;margin:10px 0 18px}
.pie__soc a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  color:#C6DCEA;transition:color .18s ease,border-color .18s ease,transform .18s ease}
.pie__soc a:hover{color:var(--brote);border-color:var(--brote);transform:translateY(-2px)}
.pie__soc svg{width:17px;height:17px;display:block}
.pie__dir{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;
  color:#C6DCEA;line-height:1.45;transition:color .18s ease}
.pie__dir:hover{color:var(--brote)}
.pie__dir svg{width:19px;height:19px;flex:none}
.pie__dir em{font-style:normal;color:#7FA5BE;font-size:11.5px;
  font-family:var(--mono);letter-spacing:0.05em}

/* Mapa embebido de las Oficinas Administrativas */
.cto__mapa{margin-top:26px;border:1px solid var(--borde);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-lg)}
.cto__mapa iframe{display:block;width:100%;height:280px;border:0;filter:var(--mapa-filtro)}

/* Galería de la planta · mosaico dinámico.
   La grilla empaqueta sola las piezas grandes y chicas
   (grid-auto-flow: dense) para que nada quede desparramado. */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:215px;
  gap:14px;grid-auto-flow:dense}
.galeria figure{margin:0;border-radius:10px;overflow:hidden;position:relative;
  box-shadow:0 8px 20px var(--sombra)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s ease}
.galeria figure:hover img{transform:scale(1.06)}
.g--hero{grid-column:span 4;grid-row:span 2}
.g--big{grid-column:span 2;grid-row:span 2}
.g--wide{grid-column:span 2}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:10px 14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(7,42,66,.78))}
@media (max-width:760px){
  .galeria{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .g--hero{grid-column:span 2}
  .g--big{grid-column:span 2}
}
.pie__base{border-top:1px solid rgba(255,255,255,.13);padding:22px 0;display:flex;
  justify-content:space-between;gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:#7FA5BE}
.pie__base strong{color:var(--brote);font-weight:500}

/* ---------- whatsapp ---------- */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 6px 22px rgba(7,42,66,.28);
  transition:transform .2s ease,box-shadow .2s ease}
.wa:hover{transform:scale(1.07);box-shadow:0 10px 30px rgba(7,42,66,.36)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ---------- pantallas ---------- */
.pantalla[hidden]{display:none}
.enc{background:var(--papel);border-bottom:1px solid var(--borde);
  padding:clamp(48px,6vw,80px) 0 clamp(38px,4.5vw,56px)}

/* ---------- retoques del tema oscuro ----------
   Lo que no se resuelve cambiando un token: los colores de línea
   vienen del dato (LINEAS, en el script) y sobre fondo oscuro hay
   que aclararlos donde son texto. La barra, el filo y las etiquetas
   siguen con el color puro de la línea. */
:root[data-tema="oscuro"] .top{box-shadow:0 1px 0 rgba(0,0,0,.45)}
:root[data-tema="oscuro"] .ln__n,
:root[data-tema="oscuro"] .ln__v,
:root[data-tema="oscuro"] .prod__pa,
:root[data-tema="oscuro"] .prod__marca,
:root[data-tema="oscuro"] .ficha__pa{color:color-mix(in srgb,var(--c) 58%,#DDEFF8)}
:root[data-tema="oscuro"] .chip:hover{
  color:color-mix(in srgb,var(--c,var(--teal-txt)) 58%,#DDEFF8);
  border-color:color-mix(in srgb,var(--c,var(--teal-txt)) 58%,#DDEFF8)}
/* El brillo blanco que cruza el botón verde es demasiado sobre oscuro. */
:root[data-tema="oscuro"] .btn--verde::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .kit__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  .prod__grid{grid-template-columns:repeat(2,1fr)}
  .svc__grid{grid-template-columns:repeat(2,1fr)}
  .inst,.mapa,.cto,.cierre,.svcx{grid-template-columns:minmax(0,1fr);gap:40px}
  .cierre__foto{min-height:240px}
  .pie__grid{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:900px){
  /* Entre 761 y 900 px el nav no cabe junto al logo: el CTA se oculta
     (sigue el botón flotante de WhatsApp y el CTA del cierre) y el nav
     scrollea por dentro, como en móvil, para no desbordar la página. */
  .top__cta{display:none}
  .top__soc{margin-left:8px}
  .top__nav{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch}
  .kit__grid{grid-template-columns:repeat(2,1fr)}
  .cifras__grid{grid-template-columns:repeat(2,1fr)}
  .cifra{border-bottom:1px solid rgba(255,255,255,.14)}
  .cifra:nth-child(even){border-right:0}
  .cifra:not(:first-child){padding-left:0}
  .cifra:nth-child(even){padding-left:28px}
  .ficha{grid-template-columns:1fr}
  .ficha__foto{min-height:200px}
  .cat__top{grid-template-columns:1fr;gap:26px;align-items:start}
}
@media (max-width:760px){
  :root{--pad:20px}
  .svcx__fila{grid-template-columns:1fr}
  .top{position:static}
  .top__in{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:14px}
  .top__logo{height:54px}
  /* Las redes quedan centradas en su fila; el nav va abajo. */
  .top__soc{order:2;width:100%;justify-content:center;margin-left:0}
  .top__nav{order:3;width:100%;overflow-x:auto;gap:2px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .nav__b{white-space:nowrap;padding:8px 11px}
  .top__cta{display:none}
  .prod__grid,.svc__grid,.kit__grid{grid-template-columns:1fr}
  #catalogo{grid-template-columns:1fr}
  .rampa__grid{grid-template-columns:1fr}
  .ln,.ln:nth-child(odd){border-right:0;padding-left:0;padding-right:0}
  .ln:nth-child(even){padding-left:0}
  .ln:last-child{border-bottom:0}
  .cifras__grid{grid-template-columns:1fr}
  .cifra,.cifra:nth-child(even){padding-left:0;padding-right:0;border-right:0}
  .form__par{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr}
  .wa{right:14px;bottom:14px;width:52px;height:52px}
  .velo{padding:0;align-items:flex-start}
  .ficha{max-height:100vh;min-height:100vh}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .prod:hover{transform:none}
  .wa:hover{transform:none}
}