/* =========================================================
   PROAGRICO S.A. — Sistema de diseño
   Marca: Azul marino #11233C · Mostaza #DE8B0C
   Tipografías: Archivo (display) · Public Sans (texto) · IBM Plex Mono (labels)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Marca (constantes en ambos temas) */
  --navy:#11233C;
  --navy-800:#0C1A2E;
  --navy-700:#1B3358;
  --navy-600:#274469;
  --mustard:#DE8B0C;
  --mustard-600:#C67B08;
  --mustard-200:#F6D9A3;
  --mustard-050:#FBF1DE;

  /* Superficies — TEMA CLARO */
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F2EC;
  --ink:#14202E;
  --muted:#5C6775;
  --line:#E7E3D8;
  --line-strong:#D8D3C4;

  --ok:#2E7D53;

  --container:1200px;
  --radius:16px;
  --radius-sm:11px;
  --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(17,35,60,.05), 0 4px 14px rgba(17,35,60,.05);
  --shadow-md:0 2px 6px rgba(17,35,60,.06), 0 18px 44px rgba(17,35,60,.09);
  --shadow-lg:0 30px 70px rgba(12,26,46,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;

  --font-display:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B131E;
    --surface:#111E2E;
    --surface-2:#16273B;
    --ink:#EAF0F7;
    --muted:#93A2B4;
    --line:#213349;
    --line-strong:#2C4059;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
    --shadow-md:0 2px 8px rgba(0,0,0,.34), 0 20px 46px rgba(0,0,0,.42);
    --shadow-lg:0 34px 74px rgba(0,0,0,.55);
    --ok:#57B98A;
  }
}
:root[data-theme="dark"]{
  --paper:#0B131E;
  --surface:#111E2E;
  --surface-2:#16273B;
  --ink:#EAF0F7;
  --muted:#93A2B4;
  --line:#213349;
  --line-strong:#2C4059;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.28);
  --shadow-md:0 2px 8px rgba(0,0,0,.34), 0 20px 46px rgba(0,0,0,.42);
  --shadow-lg:0 34px 74px rgba(0,0,0,.55);
  --ok:#57B98A;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
html{overflow-x:clip}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:var(--mustard-200); color:var(--navy)}
:focus-visible{outline:2.5px solid var(--mustard); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.02em; margin:0; color:var(--ink); text-wrap:balance}
p{margin:0}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px}
.section{padding:clamp(64px,9vw,120px) 0; position:relative}
.section--tight{padding:clamp(48px,6vw,80px) 0}

.eyebrow{
  font-family:var(--font-display);
  font-size:14.5px; font-weight:700; letter-spacing:-.005em; text-transform:none;
  color:var(--mustard-600); margin:0 0 14px;
  display:inline-block;
}
.section-head{max-width:64ch; margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{font-size:clamp(30px,4.4vw,50px)}
.section-head .lead{margin-top:18px; color:var(--muted); font-size:clamp(17px,2vw,20px); max-width:56ch}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--navy); --fg:#fff; --bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:.005em;
  padding:14px 24px; border-radius:999px; border:1.5px solid var(--bd);
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.97); transition-duration:.09s}
.btn--gold{--bg:var(--mustard); --fg:var(--navy); --bd:var(--mustard)}
.btn--gold:hover{--bg:var(--mustard-600)}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line-strong)}
.btn--ghost:hover{--bd:var(--navy); --fg:var(--navy)}
:root[data-theme="dark"] .btn--ghost:hover, :root:not([data-theme="light"]) .btn--ghost:hover{--fg:var(--mustard); --bd:var(--mustard)}
.btn--light{--bg:#fff; --fg:var(--navy); --bd:#fff}
.btn--on-navy-ghost{--bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.4)}
.btn--on-navy-ghost:hover{--bd:#fff}
.btn .ico{width:18px; height:18px; flex:0 0 auto}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled{height:64px; border-color:var(--line); box-shadow:var(--shadow-sm)}
.site-header .container{display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand img{height:34px; width:auto; transition:height .3s var(--ease)}
.is-scrolled .brand img{height:30px}
.brand .sr-tag{display:none}

/* Logo / isotipo: versión positiva en claro, negativa en oscuro */
.logo-dark, .iso-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
  :root:not([data-theme="light"]) .iso-light{display:none}
  :root:not([data-theme="light"]) .iso-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .iso-light{display:none}
:root[data-theme="dark"] .iso-dark{display:block}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  font-size:15px; font-weight:500; color:var(--ink);
  padding:9px 13px; border-radius:9px; position:relative; transition:color .2s, background .2s;
}
.nav a:hover{color:var(--navy); background:var(--surface-2)}
:root[data-theme="dark"] .nav a:hover, :root:not([data-theme="light"]) .nav a:hover{color:var(--mustard)}
.nav a.is-active{color:var(--mustard-600)}

.header-tools{display:flex; align-items:center; gap:10px}
.lang-switch{display:inline-flex; border:1.5px solid var(--line-strong); border-radius:999px; overflow:hidden; font-family:var(--font-mono); font-size:12px; font-weight:500}
.lang-switch a{padding:7px 11px; color:var(--muted); letter-spacing:.05em; transition:.2s}
.lang-switch a.is-active{background:var(--navy); color:#fff}
:root[data-theme="dark"] .lang-switch a.is-active, :root:not([data-theme="light"]) .lang-switch a.is-active{background:var(--mustard); color:var(--navy)}

.theme-toggle,.nav-toggle{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:.2s;
}
.theme-toggle:hover,.nav-toggle:hover{border-color:var(--navy); color:var(--navy)}
.theme-toggle .ico{width:19px; height:19px}
.theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun, :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ico-moon, :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none}
.nav-toggle{display:none}
.nav-toggle span{position:relative; width:18px; height:2px; background:currentColor; border-radius:2px; transition:.25s}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; transition:.25s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{top:0; transform:rotate(45deg)}
body.nav-open .nav-toggle span::after{top:0; transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative; padding-top:calc(var(--header-h) + clamp(48px,7vw,86px)); padding-bottom:clamp(56px,8vw,110px); overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(222,139,12,.12), transparent 55%),
    radial-gradient(90% 80% at -10% 110%, rgba(17,35,60,.06), transparent 60%);
}
.hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero-copy{max-width:36ch}
.hero h1{font-size:clamp(38px,6.2vw,72px); letter-spacing:-.03em}
.hero h1 .accent{color:var(--mustard)}
.hero .hero-sub{margin-top:22px; font-size:clamp(17px,2.1vw,21px); color:var(--muted); max-width:44ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.hero-trust .item{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--muted)}
.hero-trust .item svg{width:17px; height:17px; color:var(--mustard-600); flex:0 0 auto}

.hero-media{position:relative}
.hero-media .frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--shadow-lg); background:var(--surface-2);
}
.hero-media .frame img{width:100%; height:100%; object-fit:cover; will-change:transform; transform:translateY(var(--py,0px)) scale(1.06)}
@media (prefers-reduced-motion:reduce){.hero-media .frame img{transform:none}}
.hero-media .frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(17,35,60,.28))}
.hero-badge{
  position:absolute; left:-22px; bottom:34px; z-index:2;
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:16px 20px; display:flex; align-items:center; gap:14px;
  max-width:250px;
}
@media (prefers-reduced-transparency: reduce){
  .hero-badge{background:var(--surface); backdrop-filter:none}
}
.hero-badge .iso{width:44px; height:44px; flex:0 0 auto}
.hero-badge .t{font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; color:var(--ink)}
.hero-badge .s{font-size:12.5px; color:var(--muted)}

/* ---------- Logos / marquee franja ---------- */
.strip{background:var(--navy); color:#fff; padding:20px 0; overflow:hidden}
.strip .track{display:flex; gap:56px; align-items:center; width:max-content; animation:marquee 34s linear infinite}
.strip .track span{font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.78); white-space:nowrap; display:inline-flex; gap:12px; align-items:center}
.strip .track span::after{content:"◆"; color:var(--mustard); font-size:9px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip .track{animation:none; flex-wrap:wrap; justify-content:center}}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm)}
.stat .num{font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,54px); color:var(--navy); line-height:1; letter-spacing:-.03em}
:root[data-theme="dark"] .stat .num, :root:not([data-theme="light"]) .stat .num{color:var(--mustard)}
.stat .num .suf{color:var(--mustard)}
:root[data-theme="dark"] .stat .num .suf, :root:not([data-theme="light"]) .stat .num .suf{color:#fff}
.stat .lbl{margin-top:10px; font-size:14.5px; color:var(--muted)}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.about-media{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow-md)}
.about-media img{width:100%; height:100%; object-fit:cover}
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px}
.mv{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--mustard); border-radius:var(--radius-sm); padding:22px}
.mv h3{font-size:15px; font-family:var(--font-mono); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--mustard-600); margin-bottom:10px}
.mv p{font-size:15px; color:var(--muted); line-height:1.6}

/* ---------- Cards genéricas ---------- */
.grid{display:grid; gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong)}
.card:active{transform:translateY(-1px) scale(.994); transition-duration:.1s}
.card .card-ico{width:52px; height:52px; border-radius:13px; background:var(--mustard-050); color:var(--mustard-600); display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px}
:root[data-theme="dark"] .card .card-ico, :root:not([data-theme="light"]) .card .card-ico{background:var(--surface-2)}
.card .card-ico svg{width:26px; height:26px}
.card h3{font-size:20px; margin-bottom:10px}
.card p{color:var(--muted); font-size:15.5px}

/* ---------- Productos ---------- */
.product{display:grid; grid-template-columns:.9fr 1.1fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md)}
.product .p-media{position:relative; min-height:340px; background:var(--surface-2)}
.product .p-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.product .p-body{padding:clamp(28px,4vw,48px)}
.product .p-body h3{font-size:clamp(26px,3.4vw,38px)}
.product .p-body .p-desc{margin-top:16px; color:var(--muted)}
.spec-table{margin-top:26px; border-top:1px solid var(--line)}
.spec-table .row{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.spec-table .k{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.spec-table .v{font-weight:600; color:var(--ink); text-align:right}
.brand-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.chip{font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.05em; padding:8px 14px; border-radius:999px; background:var(--navy); color:#fff}
.chip.alt{background:var(--mustard); color:var(--navy)}

/* ---------- Proceso / Trazabilidad ---------- */
.process{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.timeline{position:relative; margin:0; padding:0; list-style:none}
.timeline::before{content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--mustard), var(--line))}
.timeline li{position:relative; padding:0 0 30px 58px}
.timeline li:last-child{padding-bottom:0}
.timeline .dot{position:absolute; left:8px; top:2px; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:600; box-shadow:0 0 0 5px var(--paper)}
:root[data-theme="dark"] .timeline .dot, :root:not([data-theme="light"]) .timeline .dot{box-shadow:0 0 0 5px var(--paper)}
.timeline h3{font-size:19px; margin-bottom:6px}
.timeline p{color:var(--muted); font-size:15px}
.process-media{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg)}
.process-media img{width:100%; height:100%; object-fit:cover}

/* ---------- Certificaciones ---------- */
.certs{display:flex; flex-wrap:wrap; gap:16px}
.cert{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-sm); min-width:210px; flex:1 1 210px}
.cert .badge{width:46px; height:46px; border-radius:12px; background:var(--navy); color:var(--mustard); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.cert .badge svg{width:24px;height:24px}
.cert .t{font-family:var(--font-display); font-weight:700; font-size:16px}
.cert .s{font-size:13px; color:var(--muted)}

/* ---------- Mercados ---------- */
.markets{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px); align-items:center}
.market-list{display:flex; flex-direction:column; gap:2px}
.market-list .m{display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--line)}
.market-list .m .flag{font-size:26px; line-height:1}
.market-list .m .mn{font-family:var(--font-display); font-weight:600; font-size:18px}
.market-list .m .tag{margin-left:auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mustard-600); border:1px solid var(--mustard-200); padding:4px 9px; border-radius:999px}
.market-list .m .tag.future{color:var(--muted); border-color:var(--line-strong)}
.market-media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3}
.market-media img{width:100%;height:100%;object-fit:cover}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:clamp(40px,6vw,72px); position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; right:-40px; top:-40px; width:280px; height:280px; background:radial-gradient(circle, rgba(222,139,12,.28), transparent 70%)}
.iso-motif{
  position:absolute; z-index:0; pointer-events:none;
  -webkit-mask:url('/assets/img/isotipo.svg') no-repeat center/contain;
  mask:url('/assets/img/isotipo.svg') no-repeat center/contain;
}
.cta-band .iso-motif{background:#fff; opacity:.08; width:min(360px,46vw); aspect-ratio:103/91; right:-36px; bottom:-70px; transform:rotate(-6deg)}
.cta-band .inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.cta-band h2{color:#fff; font-size:clamp(26px,3.8vw,42px); max-width:20ch}
.cta-band p{color:rgba(255,255,255,.8); margin-top:12px; max-width:48ch}
.cta-band .actions{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- Contacto / Form ---------- */
.contact{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,56px)}
.contact-info .ci{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.contact-info .ci svg{width:22px; height:22px; color:var(--mustard-600); flex:0 0 auto; margin-top:3px}
.contact-info .ci .k{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.contact-info .ci .v{font-weight:600; font-size:15.5px}
.contact-info .ci a.v{color:var(--ink)}
.contact-info .ci a.v:hover{color:var(--mustard-600)}
.socials{display:flex; gap:10px; margin-top:22px}
.socials a{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:.2s}
.socials a:hover{background:var(--navy); border-color:var(--navy); color:#fff; transform:translateY(-2px)}
.socials a svg{width:20px;height:20px}

.form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,40px); box-shadow:var(--shadow-md)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:16px}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink)}
.field .req{color:var(--mustard-600)}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line-strong); border-radius:11px; padding:12px 14px; transition:border-color .18s, box-shadow .18s, background .18s;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--mustard); box-shadow:0 0 0 3px rgba(222,139,12,.18); background:var(--surface)}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.form-note{font-size:12.5px; color:var(--muted); margin-top:6px}
.form-card .btn{width:100%; margin-top:8px}
.form-status{margin-top:14px; font-size:14px; padding:12px 15px; border-radius:11px; display:none}
.form-status.ok{display:block; background:var(--mustard-050); color:var(--navy); border:1px solid var(--mustard-200)}

/* ---------- Map ---------- */
.map-wrap{margin-top:22px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm)}
.map-wrap iframe{width:100%; height:260px; border:0; display:block; filter:saturate(.9)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:rgba(255,255,255,.72); padding:clamp(56px,7vw,84px) 0 28px; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
.site-footer .f-logo{height:38px; width:auto; margin-bottom:20px}
.site-footer p{font-size:14.5px; line-height:1.6; max-width:34ch}
.site-footer h4{color:#fff; font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.site-footer ul a{font-size:14.5px; color:rgba(255,255,255,.72); transition:.2s}
.site-footer ul a:hover{color:var(--mustard)}
.f-contact div{font-size:14.5px; margin-bottom:10px}
.f-contact a{color:rgba(255,255,255,.72)} .f-contact a:hover{color:#fff}
.footer-bottom{margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.55)}
.footer-bottom a:hover{color:var(--mustard)}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed; right:20px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,.4); transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px; height:30px}

/* ---------- Reveal animations ---------- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1 !important; transform:none !important; transition:none}}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- Immersive + acordeón (lenguaje tipo Alethia) ---------- */
.immersive{position:relative; overflow:hidden; color:#fff; padding:clamp(84px,11vw,150px) 0; background:var(--navy-800)}
.immersive .bg{position:absolute; inset:0; z-index:0}
.immersive .bg img{width:100%; height:122%; object-fit:cover}
.immersive .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,19,30,.62) 0%, rgba(11,19,30,.80) 55%, rgba(11,19,30,.90) 100%)}
.immersive .container{position:relative; z-index:2}

.im-kicker{font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--mustard); margin:0 0 14px}
.im-head{display:flex; align-items:flex-start; gap:14px; color:#fff;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,4.4vw,52px); line-height:1.04; letter-spacing:-.025em; margin:0 0 20px; max-width:22ch; text-wrap:balance}
.im-head .arrow{color:var(--mustard); font-size:.66em; line-height:1.5; flex:0 0 auto}
.im-lead{color:rgba(255,255,255,.82); max-width:58ch; font-size:clamp(16px,1.9vw,19px); line-height:1.6; margin:0 0 clamp(32px,4.5vw,52px)}

.accordion{border:1px solid rgba(255,255,255,.16); border-radius:16px; overflow:hidden; max-width:920px; box-shadow:var(--shadow-lg)}
.acc-item{border-top:1px solid rgba(255,255,255,.12); transition:background .4s var(--ease)}
.acc-item:first-child{border-top:0}
.acc-head{display:flex; align-items:center; gap:18px; width:100%; text-align:left; cursor:pointer;
  padding:20px 24px; background:rgba(11,19,30,.52); color:#fff; border:0; font:inherit;
  transition:background .4s var(--ease), color .4s var(--ease)}
.acc-head:hover{background:rgba(11,19,30,.54)}
.acc-head:focus-visible{outline:2px solid var(--mustard); outline-offset:-2px}
.acc-num{font-family:var(--font-mono); font-size:14px; color:var(--mustard); flex:0 0 auto; transition:color .4s}
.acc-title{flex:1; font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; text-transform:uppercase; font-weight:500}
.acc-toggle{position:relative; width:18px; height:18px; flex:0 0 auto}
.acc-toggle::before,.acc-toggle::after{content:""; position:absolute; background:currentColor; border-radius:2px; transition:transform .4s var(--ease), opacity .3s}
.acc-toggle::before{top:8px; left:0; width:18px; height:2px}
.acc-toggle::after{left:8px; top:0; width:2px; height:18px}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .5s var(--ease); background:var(--mustard)}
.acc-panel .inner{padding:2px 24px 22px 58px; color:var(--navy); font-family:var(--font-body); font-size:15.5px; line-height:1.6; max-width:60ch}
.acc-item.open{background:var(--mustard)}
.acc-item.open .acc-head{background:var(--mustard); color:var(--navy)}
.acc-item.open .acc-head:hover{background:var(--mustard)}
.acc-item.open .acc-num{color:color-mix(in srgb, var(--navy) 55%, transparent)}
.acc-item.open .acc-toggle::after{transform:scaleY(0); opacity:0}
.acc-item.open .acc-panel{max-height:280px}
@media (prefers-reduced-transparency:reduce){
  .acc-head{background:rgba(11,19,30,.9); backdrop-filter:none}
}
@media (max-width:560px){
  .acc-head{padding:16px 16px; gap:12px}
  .acc-title{font-size:12.5px; letter-spacing:.02em}
  .acc-panel .inner{padding-left:16px; padding-right:16px; font-size:15px}
  .im-head{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .immersive .bg img{transform:none !important}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr; gap:44px}
  .hero-media{max-width:460px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about-grid,.process,.markets,.contact{grid-template-columns:1fr}
  .about-media{aspect-ratio:16/10}
  .process-media{aspect-ratio:16/11; order:-1}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav, .header-tools .lang-switch{display:none}
  .nav-toggle{display:inline-flex}
  .nav.is-open{display:flex}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .product .p-media{min-height:260px}
  .mv-grid{grid-template-columns:1fr}
  .cta-band .inner{flex-direction:column; align-items:flex-start}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  /* Mobile nav panel */
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--line); padding:16px 24px 24px;
    box-shadow:var(--shadow-md); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.25s;
  }
  body.nav-open .nav{transform:none; opacity:1; pointer-events:auto; display:flex}
  .nav a{padding:13px 12px; font-size:16px; border-radius:10px; width:100%}
  .nav a + a{border-top:1px solid var(--line)}
}
@media (max-width:440px){
  .stats{grid-template-columns:1fr 1fr; gap:14px}
  .hero-badge{left:12px; right:12px; max-width:none}
  .container{padding-inline:18px}
}