/* ============================================================
   MVP GROUP LATINOAMÉRICA — Landing de conversión
   Sistema visual: "Infraestructura"
   Documentación técnica + lanzamiento de producto premium
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Superficies */
  --ink:        #0A0B0D;
  --ink-2:      #101216;
  --ink-3:      #15181E;
  --ink-4:      #1C2028;
  --paper:      #F2F1ED;
  --paper-2:    #E6E4DE;
  --paper-3:    #D8D5CD;

  /* Texto */
  --on-ink:     #F4F4F2;
  --on-ink-mut: #C2C7CE;   /* 11.6:1 sobre --ink */
  --on-ink-dim: #98A0AB;   /* 7.5:1 — las etiquetas mono son texto pequeño, necesitan holgura */
  --on-paper:   #14161A;
  --on-paper-mut:#4B515B;  /* 7.1:1 sobre --paper */

  /* Líneas */
  --line:       rgba(255,255,255,.12);
  --line-2:     rgba(255,255,255,.22);
  --line-dark:  rgba(10,11,13,.12);
  --line-dark-2:rgba(10,11,13,.22);

  /* Acento único = acción */
  --green:      #0E7A44;
  --green-hi:   #12A15A;
  --green-dim:  rgba(14,122,68,.16);
  --wa:         #25D366;

  /* Categoría (solo filetes de 2px) */
  --heat:       #C8551F;
  --cold:       #2E7FA6;
  --steel:      #7F8896;

  /* Métrica */
  --maxw:       1360px;
  --gut:        clamp(20px, 5vw, 64px);
  --sec:        clamp(84px, 11vw, 152px);

  /* Tipografía */
  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    '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}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.04}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--green); color:#fff}
:focus-visible{outline:2px solid var(--green-hi); 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}

/* Grano: elimina el negro digital plano, da textura de impresión */
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sec > .wrap{position:relative; z-index:2}

/* Eyebrow editorial: 01 ——— ETIQUETA */
.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-ink-dim); margin-bottom:28px;
}
.eyebrow .num{color:var(--on-ink-mut)}
.eyebrow .rule{flex:0 0 56px; height:1px; background:var(--line-2)}
.on-paper .eyebrow{color:var(--on-paper-mut)}
.on-paper .eyebrow .num{color:var(--on-paper)}
.on-paper .eyebrow .rule{background:var(--line-dark-2)}

.h-sec{font-size:clamp(2rem,4.1vw,3.5rem); max-width:20ch; text-wrap:balance}
.lead{
  margin-top:22px; max-width:62ch; font-size:clamp(1rem,1.35vw,1.175rem);
  line-height:1.7; color:var(--on-ink-mut);
}
.on-paper{background:var(--paper); color:var(--on-paper)}
.on-paper .lead{color:var(--on-paper-mut)}

/* Datos: cifras tabulares, siempre mono */
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- 4. BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 26px; border-radius:2px; border:1px solid transparent; background:none;
  font-family:var(--body); font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  cursor:pointer; transition:background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
  text-align:center;
}
.btn svg{flex:0 0 auto}
.btn-wa{background:var(--green); color:#fff}
.btn-wa:hover{background:var(--green-hi); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--on-ink)}
.btn-ghost:hover{border-color:var(--on-ink); background:rgba(255,255,255,.04)}
.on-paper .btn-ghost{border-color:var(--line-dark-2); color:var(--on-paper)}
.on-paper .btn-ghost:hover{border-color:var(--on-paper); background:rgba(10,11,13,.04)}
.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;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px}
.brand{display:flex; align-items:center; gap:13px; flex:0 0 auto}
.brand img{height:30px; width:auto; filter:brightness(1.5) contrast(1.06)}
.brand-tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-ink-mut); padding-left:13px; border-left:1px solid var(--line-2); line-height:1.35; white-space:nowrap;
}
.nav-links{display:flex; gap:34px}
.nav-links a{
  font-size:.875rem; color:var(--on-ink-mut); position:relative; padding-block:6px;
  transition:color .4s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--on-ink);
  transition:width .5s var(--ease);
}
.nav-links a:hover{color:var(--on-ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:14px}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); border-radius:2px; cursor:pointer}
.burger span{display:block; width:18px; height:1px; background:var(--on-ink); position:relative}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:18px; height:1px; background:var(--on-ink); 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(--line); background:rgba(10,11,13,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.nav.open .mobile-menu{display:block}
.mobile-menu a{display:block; padding:17px 0; border-bottom:1px solid var(--line); font-size:1rem}
.mobile-menu a:last-of-type{border-bottom:none}

/* ---------- 6. HERO ---------- */
.hero{position:relative; padding-top:76px; background:var(--ink); overflow:hidden}
.hero-grid{
  display:grid; grid-template-columns:1.08fr .92fr; align-items:stretch;
  min-height:min(92vh, 880px);
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,7vw,104px) clamp(28px,4.5vw,72px) clamp(56px,7vw,104px) var(--gut);
  max-width:calc(var(--maxw) * .58 + var(--gut));
  margin-left:auto; width:100%;
}
.hero h1{
  font-size:clamp(2.5rem, 5.4vw, 4.75rem); text-wrap:balance;
  letter-spacing:-.038em; line-height:.99; margin-bottom:26px;
}
.hero h1 .thin{font-weight:400; color:var(--on-ink-mut); display:block}
.hero-sub{font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.62; color:var(--on-ink-mut); max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

/* Tira de credenciales: hairlines, mono, sin iconos */
.creds{
  display:flex; flex-wrap:wrap; gap:0; margin-top:52px;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.creds li{
  flex:1 1 140px; padding:16px 18px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.creds .n{font-family:var(--mono); font-size:1.375rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--on-ink)}
.creds .t{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-dim); margin-top:5px; line-height:1.4}

.hero-media{position:relative; overflow:hidden; background:var(--ink-2)}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 0%, rgba(10,11,13,.55) 22%, rgba(10,11,13,0) 58%);
}
.hero-caption{
  position:absolute; left:0; bottom:0; z-index:3;
  padding:14px 18px; background:rgba(10,11,13,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-mut);
}
.scroll-hint{
  position:absolute; left:var(--gut); bottom:30px; z-index:4;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-ink-dim); display:flex; align-items:center; gap:12px;
}
.scroll-hint .bar{width:1px; height:34px; background:linear-gradient(var(--line-2), transparent); display:block}

/* ---------- 7. DOLORES (papel) ---------- */
.pain-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  margin-top:64px; border-top:1px solid var(--line-dark-2);
}
.pain{
  padding:44px clamp(24px,3.4vw,52px) 48px 0;
  border-bottom:1px solid var(--line-dark);
  position:relative;
}
.pain:nth-child(odd){padding-right:clamp(32px,4vw,64px); border-right:1px solid var(--line-dark)}
.pain:nth-child(even){padding-left:clamp(32px,4vw,64px)}
.pain-n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--on-paper-mut);
  margin-bottom:18px; display:block;
}
.pain h3{font-size:1.3125rem; letter-spacing:-.02em; margin-bottom:14px; max-width:24ch}
.pain .problem{color:var(--on-paper-mut); font-size:.9688rem; line-height:1.68; max-width:46ch}
.pain .sol{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line-dark);
  font-size:.9375rem; line-height:1.68; max-width:48ch;
}
.pain .sol .k{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--green); margin-bottom:9px;
}

/* ---------- 8. PORTAFOLIO ---------- */
.port{background:var(--ink); position:relative}
.port-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap}
.port-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:64px; background:var(--line); border:1px solid var(--line);
}
.card{
  background:var(--ink); padding:0; display:flex; flex-direction:column;
  position:relative; transition:background .6s var(--ease);
}
.card:hover{background:var(--ink-2)}
.card.feature{grid-column:span 2}

/* "Pozo de estudio": radial detrás del producto, disciplina de iluminación única */
.card-media{
  position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.card.feature .card-media{aspect-ratio:16/8}
.card-media::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(58% 74% at 50% 58%, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 68%);
}
.card-media img{
  position:relative; z-index:2; width:100%; height:100%; object-fit:contain; padding:9%;
  transition:transform .9s var(--ease);
}
.card-media.cover img{object-fit:cover; padding:0}
.card:hover .card-media img{transform:scale(1.035)}
.card-rule{position:absolute; top:0; left:0; height:2px; width:44px; z-index:3}
.card-rule.heat{background:var(--heat)}
.card-rule.cold{background:var(--cold)}
.card-rule.util{background:var(--steel)}

.card-body{padding:28px clamp(22px,2.2vw,32px) 30px; display:flex; flex-direction:column; flex:1}
.card-brand{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-ink-dim); margin-bottom:12px;
}
.card h3{font-size:1.25rem; letter-spacing:-.022em; margin-bottom:12px}
.card.feature h3{font-size:1.5rem}
.card-spec{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.02em; color:var(--on-ink);
  padding:9px 0; margin-bottom:14px;
  border-block:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.card p{font-size:.9063rem; line-height:1.66; color:var(--on-ink-mut); margin-bottom:22px}
.card-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.badge{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ink-mut); border:1px solid var(--line-2); padding:6px 10px; border-radius:2px;
}
.card-link{
  font-size:.8438rem; font-weight:600; color:var(--on-ink);
  display:inline-flex; align-items:center; gap:8px; transition:gap .4s var(--ease), color .4s var(--ease);
}
.card-link:hover{gap:13px; color:var(--green-hi)}
.pending{
  position:absolute; top:12px; right:12px; z-index:4;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(200,85,31,.16); border:1px solid rgba(200,85,31,.4); color:#E8875A;
  padding:5px 9px; border-radius:2px;
}

.port-cta{
  margin-top:1px; border:1px solid var(--line); border-top:none;
  padding:clamp(32px,4vw,52px); display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; background:var(--ink-2);
}
.port-cta h3{font-size:1.375rem; margin-bottom:8px}
.port-cta p{color:var(--on-ink-mut); font-size:.9375rem; max-width:56ch}

/* ---------- 9. AUTORIDAD (papel) ---------- */
.counters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:60px; border-top:1px solid var(--line-dark-2); border-left:1px solid var(--line-dark);
}
.counter{padding:34px clamp(18px,2.2vw,32px) 36px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark)}
.counter .n{
  font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,4.6vw,3.9rem);
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.counter .t{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--on-paper-mut); margin-top:14px; line-height:1.5;
}

.certs{margin-top:clamp(64px,8vw,104px)}
.cert-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:36px; border-top:1px solid var(--line-dark-2); border-left:1px solid var(--line-dark);
}
.cert{padding:30px clamp(18px,2.2vw,30px) 32px; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark)}
.cert .mark{
  font-family:var(--display); font-weight:700; font-size:1.75rem; letter-spacing:.01em;
  padding-bottom:14px; border-bottom:1px solid var(--line-dark); margin-bottom:14px;
}
.cert .d{font-size:.875rem; line-height:1.6; color:var(--on-paper-mut)}

.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,44px); margin-top:clamp(64px,8vw,104px)}
.pillar{padding-top:22px; border-top:2px solid var(--on-paper)}
.pillar h4{font-size:1.0625rem; letter-spacing:-.018em; margin-bottom:11px}
.pillar p{font-size:.8938rem; line-height:1.65; color:var(--on-paper-mut)}

/* Marcas del portafolio */
.brands{margin-top:clamp(64px,8vw,104px); padding-top:40px; border-top:1px solid var(--line-dark-2)}
.brand-row{display:grid; grid-template-columns:repeat(4,1fr); align-items:center;
  gap:clamp(22px,3vw,44px) clamp(28px,4vw,56px); margin-top:32px; justify-items:start}
.brand-row img{height:24px; width:auto; opacity:.72; transition:opacity .5s var(--ease), transform .5s var(--ease)}
.brand-row img:hover{opacity:1; transform:translateY(-2px)}
/* Balance óptico: cada marca tiene proporción distinta, no la misma altura */
.b-koolit{height:23px !important}
.b-hydrakool{height:17px !important}
.b-ikon{height:25px !important}
.b-sierra{height:27px !important}
.b-vortex{height:22px !important}
.b-jettech{height:15px !important}
.b-axis{height:24px !important}
.b-primo{height:28px !important}

/* ---------- 10. INDUSTRIAS ---------- */
.ind{background:var(--ink-2)}
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:60px; background:var(--line); border:1px solid var(--line)}
.ind-card{position:relative; aspect-ratio:3/3.5; overflow:hidden; background:var(--ink); display:block}
.ind-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), opacity .6s var(--ease); opacity:.72}
.ind-card::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(10,11,13,.95) 4%, rgba(10,11,13,.5) 40%, rgba(10,11,13,.12) 100%);
  transition:background .6s var(--ease);
}
.ind-card:hover img{transform:scale(1.06); opacity:.92}
.ind-body{position:absolute; inset:auto 0 0 0; z-index:3; padding:26px clamp(18px,1.8vw,26px) 28px}
.ind-body h3{font-size:1.0625rem; letter-spacing:-.018em; margin-bottom:9px}
.ind-body p{
  font-size:.8125rem; line-height:1.6; color:var(--on-ink-mut);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .7s var(--ease), opacity .5s var(--ease);
}
.ind-card:hover .ind-body p{max-height:160px; opacity:1}

/* ---------- 11. PRUEBA SOCIAL ---------- */
.proof{background:var(--ink); border-block:1px solid var(--line)}
.proof-in{padding-block:clamp(60px,7vw,92px); text-align:center}
.proof q{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,2.5vw,1.9rem); letter-spacing:-.024em; line-height:1.42;
  max-width:34ch; margin-inline:auto; quotes:none;
}
.proof q::before,.proof q::after{content:''}
.proof .who{
  margin-top:26px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-ink-dim);
}

/* ---------- 12. COBERTURA ---------- */
.cover-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,88px); align-items:center; margin-top:20px}
.map-shell{position:relative; border:1px solid var(--line); background:var(--ink-2); padding:clamp(20px,3vw,40px); border-radius:2px}
.map-shell svg{width:100%; height:auto; display:block}
.node{fill:var(--green-hi)}
.node-ring{fill:none; stroke:var(--green-hi); stroke-width:1; opacity:.45;
  transform-box:fill-box; transform-origin:center; animation:breathe 4s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.45} 50%{transform:scale(1.45); opacity:.08}}
.map-dots circle{fill:rgba(255,255,255,.155)}
.node{fill:var(--green-hi); filter:drop-shadow(0 0 5px rgba(18,161,90,.75))}
.country-list{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:40px; border-top:1px solid var(--line); border-left:1px solid var(--line)}
.country-list li{
  padding:13px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-mut);
}

/* ---------- 13. CONVERSIÓN ---------- */
.conv{background:var(--paper); color:var(--on-paper)}
.conv-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(44px,6vw,96px); margin-top:56px}
.field{margin-bottom:22px}
.field label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--on-paper-mut); margin-bottom:9px;
}
.field .req{color:var(--green)}
.field input,.field select,.field textarea{
  width:100%; padding:14px 0; background:transparent; border:none;
  border-bottom:1px solid var(--line-dark-2); border-radius:0;
  font-size:1rem; color:var(--on-paper); transition:border-color .45s 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='%23565C66' 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:82px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--green)}
.field input::placeholder,.field textarea::placeholder{color:#A5A9B0}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px)}
.privacy{font-size:.8125rem; color:var(--on-paper-mut); margin-top:16px; line-height:1.6}

.contact-panel{background:var(--ink); color:var(--on-ink); padding:clamp(30px,3.6vw,44px); border-radius:2px; position:relative; overflow:hidden}
.contact-panel h3{font-size:1.25rem; margin-bottom:8px}
.contact-panel .sub{font-size:.9063rem; color:var(--on-ink-mut); line-height:1.65}
.contact-num{
  font-family:var(--mono); font-size:1.375rem; letter-spacing:-.01em; margin-block:22px 6px;
  font-variant-numeric:tabular-nums; display:block;
}
.contact-list{margin-top:32px; padding-top:26px; border-top:1px solid var(--line)}
.contact-list li{padding-block:11px; font-size:.9063rem; display:flex; gap:14px; align-items:baseline}
.contact-list .k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-ink-dim); flex:0 0 62px;
}
.contact-list a{color:var(--on-ink-mut); transition:color .4s var(--ease)}
.contact-list a:hover{color:var(--on-ink)}
.urgent{margin-top:30px; padding-top:24px; border-top:1px solid var(--line); font-size:.9063rem; line-height:1.65; color:var(--on-ink-mut)}

/* ---------- 14. FOOTER ---------- */
.foot{background:var(--ink); padding-block:clamp(52px,6vw,76px) 34px; border-top:1px solid var(--line)}
.foot-top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding-bottom:38px; border-bottom:1px solid var(--line)}
.foot-brand img{height:34px; margin-bottom:16px; filter:brightness(1.5) contrast(1.06)}
.foot-brand p{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink-dim); line-height:1.7}
.foot-nav{display:flex; gap:clamp(24px,3.6vw,52px); flex-wrap:wrap}
.foot-nav a{font-size:.875rem; color:var(--on-ink-mut); transition:color .4s var(--ease)}
.foot-nav a:hover{color:var(--on-ink)}
.foot-certs{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.foot-certs span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--on-ink-dim);
  border:1px solid var(--line); padding:5px 9px; border-radius:2px;
}
.foot-bot{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-dim);
}

/* ---------- 15. FAB WHATSAPP ---------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.9);
  width:56px; height:56px; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(0,0,0,.42);
  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.06); background:var(--green-hi)}
.fab::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--green-hi); animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1); opacity:.7} 70%{transform:scale(1.5); opacity:0} 100%{opacity:0}}

/* ---------- 16. REVELADO ---------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:1100px){
  .brand-row{grid-template-columns:repeat(3,1fr)}
  .country-list{grid-template-columns:repeat(3,1fr)}
  .port-grid{grid-template-columns:repeat(2,1fr)}
  .card.feature{grid-column:span 2}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr); gap:36px}
  .cover-grid{grid-template-columns:1fr; gap:48px}
}
@media (max-width:920px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .btn-wa{display:none}
  .hero-grid{grid-template-columns:1fr; min-height:0}
  .hero-copy{max-width:none; padding-inline:var(--gut); padding-block:clamp(56px,10vw,88px) 48px}
  .hero-media{aspect-ratio:4/3; order:2}
  .hero-media::after{background:linear-gradient(to top, rgba(10,11,13,.9) 0%, rgba(10,11,13,0) 55%)}
  .scroll-hint{display:none}
  .counters{grid-template-columns:repeat(2,1fr)}
  .cert-row{grid-template-columns:repeat(2,1fr)}
  .conv-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .brand-row{grid-template-columns:repeat(2,1fr)}
  .country-list{grid-template-columns:repeat(2,1fr)}
  .pain-grid{grid-template-columns:1fr}
  .pain,.pain:nth-child(odd),.pain:nth-child(even){padding-inline:0; border-right:none}
  .port-grid,.ind-grid{grid-template-columns:1fr}
  .card.feature{grid-column:span 1}
  .ind-card{aspect-ratio:4/3}
  .ind-body p{max-height:160px; opacity:1}
  .pillars{grid-template-columns:1fr; gap:30px}
  .counters,.cert-row{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr; gap:0}
  .hero-actions .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}
}

/* ---------- 18. BIBLIOTECA DE CATÁLOGOS ---------- */
.lib{background:var(--ink-2)}
.lib-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap}

/* Banda de acceso: una sola puerta para toda la biblioteca, no una por archivo */
.lib-gate{
  margin-top:52px; border:1px solid var(--line); background:var(--ink);
  padding:clamp(26px,3vw,38px) clamp(24px,3vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.lib-gate .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-hi); display:block; margin-bottom:12px;
}
.lib-gate h3{font-size:1.3125rem; letter-spacing:-.022em; margin-bottom:9px; max-width:24ch}
.lib-gate p{font-size:.9063rem; line-height:1.62; color:var(--on-ink-mut); max-width:52ch}
.lib-gate-actions{display:flex; gap:12px; flex-wrap:wrap; flex:0 0 auto}

.lib-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:1px; background:var(--line); border:1px solid var(--line);
}
.lib-card{background:var(--ink); display:flex; flex-direction:column; transition:background .6s var(--ease)}
.lib-card:hover{background:var(--ink-3)}

/* La portada es un documento: se presenta plana, con filete, no como tarjeta flotante */
.lib-cover{
  position:relative; padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) 0;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 72%);
}
.lib-cover img{
  width:100%; height:auto; border:1px solid var(--line-2); display:block;
  transition:transform .8s var(--ease), border-color .6s var(--ease);
}
.lib-card:hover .lib-cover img{transform:translateY(-4px); border-color:rgba(255,255,255,.34)}
.lib-body{padding:22px clamp(22px,2.4vw,32px) 26px; 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(--on-ink-dim); margin-bottom:9px;
}
.lib-card h4{font-size:1.0313rem; letter-spacing:-.018em; line-height:1.28; margin-bottom:12px; min-height:2.56em}
.lib-meta{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; color:var(--on-ink-mut);
  font-variant-numeric:tabular-nums; padding:8px 0; border-block:1px solid var(--line); margin-bottom:16px;
}
.lib-card .ask{
  margin-top:auto; font-size:.8125rem; font-weight:600; color:var(--on-ink);
  display:inline-flex; align-items:center; gap:8px; transition:gap .4s var(--ease), color .4s var(--ease);
}
.lib-card .ask:hover{gap:13px; color:var(--green-hi)}
.lib-card.soon .lib-cover img{border-style:dashed; opacity:.85}
.lib-card.soon .ask{color:var(--on-ink-mut)}
.lib-card.soon .ask:hover{color:var(--on-ink)}

.lib-note{
  margin-top:28px; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-ink-dim); line-height:1.8;
}

@media (max-width:1100px){ .lib-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){
  .lib-grid{grid-template-columns:1fr}
  .lib-gate{flex-direction:column; align-items:flex-start}
  .lib-gate-actions{width:100%}
  .lib-gate-actions .btn{width:100%}
}