/* ============================================================
   MVP GROUP LATINOAMÉRICA
   Sistema visual: "Sala de Frío" — claro, sin fondos oscuros
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Superficies — todas claras. El neutro tira a frío: viene de la categoría. */
  --ice:        #F0F2F2;
  --porcelain:  #FAFBFB;
  --mist:       #E7EAEA;
  --pad:        #E3E7E8;

  /* Texto */
  --graphite:   #14171A;
  --slate:      #4B535C;   /* 7,4:1 sobre --ice */
  --slate-2:    #5C6570;   /* 5,3:1 sobre --ice — etiquetas mono a 10 px */

  /* Líneas */
  --rule:       rgba(20,23,26,.13);
  --rule-2:     rgba(20,23,26,.24);

  /* Acentos */
  --frost:      #0E5E76;   /* frío — el argumento del sitio */
  --green:      #0C6B3D;   /* acción, y solo acción */
  --green-hi:   #0F8149;

  /* Categoría — filetes de 2px */
  --c-cold:     #0E5E76;
  --c-heat:     #9A4819;
  --c-util:     #6B747D;

  --maxw:1280px; --gut:clamp(20px,5vw,68px); --sec:clamp(76px,9vw,136px);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
/* overflow-x:clip en html, NUNCA overflow-x:hidden en body: hidden convierte al body
   en contenedor de scroll y el IntersectionObserver deja de disparar. */
body{
  margin:0; background:var(--ice); color:var(--graphite);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.012em; line-height:1.03; text-wrap:balance}
h4{margin:0; font-family:var(--sans); font-weight:600}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--frost); color:#fff}
:focus-visible{outline:2px solid var(--frost); outline-offset:3px}

/* ---------- 3. UTILIDADES ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec); position:relative}
.alt{background:var(--porcelain)}
.mist{background:var(--mist)}

/* Filete metálico: el "metalizado", en 1px */
.metal{height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--rule-2) 12%,#F6F8F8 38%,var(--rule-2) 62%,transparent)}

.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--slate-2); display:block}
.h-sec{font-size:clamp(2.1rem,4.4vw,3.5rem); max-width:18ch; margin-top:20px}
.lede{margin-top:20px; max-width:52ch; font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.65; color:var(--slate)}
.spec{font-family:var(--mono); font-size:.75rem; letter-spacing:.03em; font-variant-numeric:tabular-nums; color:var(--frost)}

/* ---------- 4. BOTONES ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border:1px solid transparent; border-radius:1px; background:none;
  font-family:var(--sans); font-size:.9063rem; font-weight:600; cursor:pointer; text-align:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease)}
.btn svg{flex:0 0 auto}
.btn-wa{background:var(--green); color:#fff}
.btn-wa:hover{background:var(--green-hi)}
.btn-ghost{border-color:var(--rule-2); color:var(--graphite)}
.btn-ghost:hover{border-color:var(--graphite)}
.btn-sm{padding:11px 18px; font-size:.8125rem}
.btn-block{width:100%}

/* ---------- 5. NAVEGACIÓN ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease)}
.nav.solid{background:rgba(240,242,242,.88); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--rule)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand img{height:28px!important; width:auto}
.brand-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate-2); padding-left:12px; border-left:1px solid var(--rule-2); white-space:nowrap}
.nav-links{display:flex; gap:30px}
.nav-links a{font-size:.875rem; color:var(--slate); padding-block:6px; position:relative; transition:color .4s var(--ease)}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--graphite); transition:width .5s var(--ease)}
.nav-links a:hover{color:var(--graphite)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:12px}
.burger{display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--rule-2); border-radius:1px; cursor:pointer}
.burger span{display:block; width:18px; height:1px; background:var(--graphite); position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:18px; height:1px; background:var(--graphite); transition:transform .4s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none; border-top:1px solid var(--rule); background:rgba(240,242,242,.98); backdrop-filter:blur(16px)}
.nav.open .mobile-menu{display:block}
.mobile-menu a{display:block; padding:16px 0; border-bottom:1px solid var(--rule); font-size:1rem}
.mobile-menu a:last-of-type{border-bottom:none}

/* ---------- 6. HERO ---------- */
.hero{padding-top:calc(74px + clamp(40px,6vw,80px)); padding-bottom:clamp(56px,7vw,96px)}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,76px); align-items:center}
.hero h1{font-size:clamp(2.9rem,7vw,5.6rem); line-height:.95; letter-spacing:-.02em; margin-top:22px}
.hero h1 em{font-style:italic; color:var(--frost)}
.hero .lede{max-width:46ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero-fig{margin:0; position:relative}
.hero-fig img{width:100%; height:auto; aspect-ratio:4/3.15; object-fit:cover; border-radius:1px}
.hero-cap{margin-top:11px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2)}

.creds{display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(44px,5.5vw,76px); border-top:1px solid var(--rule)}
.creds li{padding:20px 18px 0 0}
.creds .n{font-family:var(--serif); font-size:clamp(1.8rem,2.9vw,2.5rem); line-height:1; font-variant-numeric:tabular-nums}
.creds .t{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-2); margin-top:9px; line-height:1.45}

/* ---------- 7. FRÍO (el argumento) ---------- */
.cold-head{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); align-items:end}
.cold-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px); margin-top:clamp(40px,5vw,68px)}
.cold-item{padding-top:18px; border-top:2px solid var(--frost)}
.cold-item h4{font-size:1.0313rem; letter-spacing:-.01em; line-height:1.32; margin-block:11px 8px}
.cold-item p{font-size:.9063rem; line-height:1.58; color:var(--slate)}

/* ---------- 8. PORTAFOLIO ---------- */
.port-head{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end}
.port-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(40px,5vw,68px);
  background:var(--rule); border:1px solid var(--rule)}
.card{background:var(--ice); display:flex; flex-direction:column; transition:background .5s var(--ease)}
.card:hover{background:var(--porcelain)}
.card.feature{grid-column:span 2}

/* Pad claro: el producto se apoya en una superficie, no flota en el vacío */
.card-media{position:relative; aspect-ratio:16/11; overflow:hidden;
  background:radial-gradient(72% 88% at 50% 62%, var(--porcelain) 0%, var(--pad) 100%)}
.card.feature .card-media{aspect-ratio:16/7.6}
.card-media img{width:100%; height:100%!important; object-fit:contain; padding:8%; transition:transform .8s var(--ease)}
.card-media.cover img{object-fit:cover; padding:0}
.card:hover .card-media img{transform:scale(1.03)}
.card-rule{position:absolute; top:0; left:0; height:2px; width:42px; z-index:2}
.card-rule.cold{background:var(--c-cold)} .card-rule.heat{background:var(--c-heat)} .card-rule.util{background:var(--c-util)}

.card-body{padding:24px clamp(20px,2.1vw,30px) 26px; display:flex; flex-direction:column; flex:1}
.card-brand{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-2)}
.card h3{font-family:var(--serif); font-size:1.375rem; margin-block:9px 12px; letter-spacing:-.008em}
.card.feature h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.card .line{font-size:.9063rem; line-height:1.55; color:var(--slate); margin-bottom:14px}
.card .spec{padding-top:12px; border-top:1px solid var(--rule)}
.card-foot{margin-top:auto; padding-top:18px}
.card-link{font-size:.8438rem; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:gap .4s var(--ease), color .4s var(--ease)}
.card-link:hover{gap:13px; color:var(--frost)}

/* ---------- 9. AUTORIDAD ---------- */
.counters{display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--rule-2)}
.counter{padding:26px 20px 0 0}
.counter .n{font-family:var(--serif); font-size:clamp(2.2rem,4.2vw,3.4rem); line-height:1; font-variant-numeric:tabular-nums}
.counter .t{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-2); margin-top:11px; line-height:1.45}

.certs{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px); margin-top:clamp(48px,6vw,80px)}
.cert{padding-top:16px; border-top:1px solid var(--rule-2)}
.cert .mark{font-family:var(--serif); font-size:1.625rem; margin-bottom:8px}
.cert p{font-size:.8438rem; line-height:1.5; color:var(--slate)}

.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px); margin-top:clamp(48px,6vw,80px)}
.pillar{padding-top:18px; border-top:2px solid var(--graphite)}
.pillar h4{font-size:1rem; letter-spacing:-.01em; margin-bottom:9px}
.pillar p{font-size:.875rem; line-height:1.55; color:var(--slate)}

.brands{margin-top:clamp(48px,6vw,80px); padding-top:32px; border-top:1px solid var(--rule)}
.brand-row{display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:clamp(20px,3vw,44px); margin-top:26px; justify-items:start}
.brand-row img{width:auto; opacity:.78; transition:opacity .4s var(--ease)}
.brand-row img:hover{opacity:1}
.b-koolit{height:23px} .b-hydrakool{height:17px} .b-ikon{height:25px} .b-sierra{height:27px}
.b-vortex{height:22px} .b-jettech{height:15px} .b-axis{height:24px} .b-primo{height:28px}

/* ---------- 10. INDUSTRIAS ---------- */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(40px,5vw,64px); background:var(--rule); border:1px solid var(--rule)}
.ind-card{background:var(--ice); display:block}
.ind-card .ph{aspect-ratio:4/3; overflow:hidden; background:var(--pad)}
.ind-card img{width:100%; height:100%!important; object-fit:cover; transition:transform .9s var(--ease)}
.ind-card:hover img{transform:scale(1.04)}
.ind-body{padding:18px clamp(16px,1.6vw,22px) 22px}
.ind-body h4{font-size:.9688rem; letter-spacing:-.008em; line-height:1.3}
.ind-body p{font-size:.8125rem; line-height:1.5; color:var(--slate); margin-top:7px}
.also{display:flex; flex-wrap:wrap; gap:0 0; margin-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.also li{flex:1 1 160px; padding:13px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2)}

/* ---------- 11. PRUEBA SOCIAL ---------- */
.proof{border-block:1px solid var(--rule)}
.proof-in{padding-block:clamp(52px,6.5vw,84px); text-align:center}
.proof q{display:block; font-family:var(--serif); font-size:clamp(1.375rem,2.7vw,2.1rem);
  line-height:1.32; max-width:30ch; margin-inline:auto; quotes:none}
.proof q::before,.proof q::after{content:''}
.proof .who{margin-top:22px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-2)}

/* ---------- 12. COBERTURA ---------- */
.cover-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,80px); align-items:center}
.map-shell{border:1px solid var(--rule); background:var(--porcelain); padding:clamp(18px,2.6vw,36px); border-radius:1px}
.map-shell svg{width:100%; height:auto; display:block}
.map-dots circle{fill:rgba(20,23,26,.17)}
.map-rutas path{fill:none; stroke:var(--frost); stroke-width:.9; opacity:.32}
.map-nodos circle{fill:var(--frost)}
.map-origen circle{fill:var(--green)}
.map-origen .anillo{fill:none; stroke:var(--green); stroke-width:1; opacity:.45;
  transform-box:fill-box; transform-origin:center; animation:breathe 4.5s var(--ease) infinite}
.map-origen text{fill:var(--green); font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; font-weight:500}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.45} 50%{transform:scale(1.6); opacity:.05}}
@media (prefers-reduced-motion:reduce){.map-origen .anillo{animation:none}}
.map-cap{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--rule); font-family:var(--mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate-2)}
.map-cap span{display:inline-flex; align-items:center; gap:8px}
.map-cap i{width:7px; height:7px; border-radius:50%; flex:none}
.map-cap .k-origen{background:var(--green)}
.map-cap .k-mercado{background:var(--frost)}
.country-list{display:grid; grid-template-columns:repeat(5,1fr); margin-top:34px; border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.country-list li{padding:12px 14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate)}

/* ---------- 13. BIBLIOTECA ---------- */
.lib-gate{margin-top:clamp(36px,4.5vw,60px); border:1px solid var(--rule); background:var(--porcelain);
  padding:clamp(22px,2.8vw,34px) clamp(20px,2.8vw,36px);
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.lib-gate h4{font-size:1.125rem; margin-bottom:7px}
.lib-gate p{font-size:.875rem; line-height:1.55; color:var(--slate); max-width:48ch}
.lib-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:1px; background:var(--rule); border:1px solid var(--rule)}
.lib-card{background:var(--ice); display:flex; flex-direction:column; transition:background .5s var(--ease)}
.lib-card:hover{background:var(--porcelain)}
.lib-cover{padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) 0}
/* Caja de proporción fija: alinea las ocho fichas sin recortar ninguna portada. */
.lib-cover .marco{aspect-ratio:1/1.28; background:var(--porcelain); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden}
.lib-cover img{max-width:100%; max-height:100%; width:auto; height:auto;
  box-shadow:0 1px 0 var(--rule-2), 0 8px 22px -14px rgba(20,23,26,.5);
  transition:transform .7s var(--ease)}
.lib-card:hover .lib-cover img{transform:translateY(-3px)}
.lib-body{padding:18px clamp(18px,2.2vw,28px) 22px; display:flex; flex-direction:column; flex:1}
.lib-brand{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate-2)}
.lib-card h4{font-size:.9688rem; line-height:1.28; margin-block:8px 10px}
.lib-meta{font-family:var(--mono); font-size:.6875rem; color:var(--slate); font-variant-numeric:tabular-nums}
.lib-card .ask{margin-top:auto; padding-top:14px; font-size:.8125rem; font-weight:600; display:inline-flex; align-items:center; gap:7px; transition:gap .4s var(--ease), color .4s var(--ease)}
.lib-card .ask:hover{gap:12px; color:var(--frost)}

/* ---------- 14. CONVERSIÓN ---------- */
.conv-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,5.5vw,88px); margin-top:clamp(40px,5vw,60px)}
.field{margin-bottom:20px}
.field label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-2); margin-bottom:8px}
.field .req{color:var(--green)}
.field input,.field select,.field textarea{width:100%; padding:13px 0; background:transparent; border:none;
  border-bottom:1px solid var(--rule-2); border-radius:0; font-size:1rem; color:var(--graphite); transition:border-color .4s var(--ease)}
.field select{cursor:pointer; padding-right:24px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2369727B' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center}
.field textarea{resize:vertical; min-height:76px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--frost)}
.field input::placeholder,.field textarea::placeholder{color:#9AA2A9}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,30px)}
.privacy{font-size:.8125rem; color:var(--slate); margin-top:14px; line-height:1.55}

.contact-panel{background:var(--porcelain); border:1px solid var(--rule); padding:clamp(26px,3.2vw,40px); border-radius:1px}
.contact-panel h4{font-size:1.125rem; margin-bottom:7px}
.contact-panel .sub{font-size:.875rem; color:var(--slate); line-height:1.6}
.contact-num{font-family:var(--mono); font-size:1.25rem; margin-block:20px 4px; font-variant-numeric:tabular-nums; display:block}
.contact-list{margin-top:28px; padding-top:22px; border-top:1px solid var(--rule)}
.contact-list li{padding-block:9px; font-size:.875rem; display:flex; gap:12px; align-items:baseline}
.contact-list .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate-2); flex:0 0 58px}
.contact-list a{color:var(--slate); transition:color .4s var(--ease)}
.contact-list a:hover{color:var(--graphite)}

/* ---------- 15. FOOTER ---------- */
.foot{border-top:1px solid var(--rule); padding-block:clamp(44px,5vw,64px) 30px; background:var(--porcelain)}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid var(--rule)}
.foot-brand img{height:30px!important; margin-bottom:14px}
.foot-brand p{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-2); line-height:1.7}
.foot-certs{display:flex; gap:9px; flex-wrap:wrap; margin-top:16px}
.foot-certs span{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--slate-2); border:1px solid var(--rule-2); padding:4px 8px; border-radius:1px}
.foot-nav{display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap}
.foot-nav a{font-size:.875rem; color:var(--slate); transition:color .4s var(--ease)}
.foot-nav a:hover{color:var(--graphite)}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2)}

/* ---------- 16. FAB ---------- */
.fab{position:fixed; right:20px; bottom:20px; z-index:90; width:54px; height:54px; border-radius:50%;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(20,23,26,.22);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.9);
  transition:transform .5s var(--ease), background .4s var(--ease), opacity .5s var(--ease), visibility .5s}
.fab.show{opacity:1; visibility:visible; transform:none}
.fab.show:hover{transform:scale(1.05); background:var(--green-hi)}

/* ---------- 17. REVELADO ----------
   Visible por defecto. La animación solo se activa si el JS confirma que el
   observer funciona; cualquier fallo deja la página legible. */
.rv{opacity:1; transform:none}
html.js-anim .rv{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js-anim .rv.in{opacity:1; transform:none}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:1100px){
  .port-grid{grid-template-columns:repeat(2,1fr)}
  .card.feature{grid-column:span 2}
  .ind-grid,.lib-grid{grid-template-columns:repeat(2,1fr)}
  .cold-grid,.certs,.pillars{grid-template-columns:repeat(2,1fr)}
  .brand-row{grid-template-columns:repeat(3,1fr)}
  .cover-grid{grid-template-columns:1fr}
  .country-list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:920px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .btn-wa{display:none}
  .hero-grid,.cold-head,.port-head{grid-template-columns:1fr}
  .conv-grid{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{font-size:16px}
  .port-grid,.ind-grid,.lib-grid{grid-template-columns:1fr}
  .card.feature{grid-column:span 1}
  .cold-grid,.certs,.pillars{grid-template-columns:1fr}
  .brand-row{grid-template-columns:repeat(2,1fr)}
  .country-list{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr; gap:0}
  .hero-cta .btn{width:100%}
  .lib-gate{flex-direction:column; align-items:flex-start}
  .lib-gate .btn{width:100%}
  .fab{right:16px; bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}