/* ============================================================
   DistriGo · Sitio público
   Rediseño con lenguaje visual tipo Apple (limpio, tipografía
   grande y ligera, mucho aire, nav esmerilado, botones píldora).
   Se conservan TODAS las clases del HTML original.
   ============================================================ */

:root{
  /* Neutros tipo Apple */
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --ink-mute:#86868b;
  --paper:#ffffff;
  --gray:#f5f5f7;
  --gray-2:#ececef;
  --line:#d2d2d7;
  --dark:#132a4d;

  /* ---- Paleta derivada del LOGO DistriGo ---- */
  --brand-navy:#1f4880;   --brand-navy-2:#2a5a9c;  --brand-navy-d:#153663;  --brand-navy-soft:#e6ecf5;
  --brand-green:#3ba24f;  --brand-green-2:#4cb862; --brand-green-soft:#e5f3e8;
  --brand-orange:#e88838; --brand-orange-2:#f0a155;--brand-orange-d:#cf6f22; --brand-orange-soft:#fdecd9;

  /* Acento de acción = naranja del logo */
  --accent:var(--brand-orange);
  --accent-2:var(--brand-orange-d);
  --accent-soft:var(--brand-orange-soft);

  --radius:20px;
  --radius-sm:14px;
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 18px 50px rgba(0,0,0,.12);
  --nav-h:48px;
  --maxw:1120px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent-soft);color:var(--accent-2)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4,h5{letter-spacing:-.02em;font-weight:600;line-height:1.07;color:var(--ink)}

.section-tag{
  display:inline-block;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9rem;
}
.accent{color:var(--brand-green)}

/* ============================================================
   BOTONES  (píldora tipo Apple)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:inherit;font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  padding:.62rem 1.25rem;border-radius:980px;border:1px solid transparent;
  cursor:pointer;transition:all .25s cubic-bezier(.2,.7,.2,1);white-space:nowrap;
  line-height:1.2;
}
.btn i{font-size:1.05em}
.btn-lg{font-size:1.05rem;padding:.85rem 1.7rem}

.btn-primary,.btn-orange{background:var(--accent);color:#fff}
.btn-primary:hover,.btn-orange:hover{background:var(--accent-2);transform:scale(1.015)}

.btn-secondary{background:var(--gray-2);color:var(--ink)}
.btn-secondary:hover{background:#e1e1e5;transform:scale(1.015)}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ============================================================
   NAVBAR  (barra fija esmerilada)
   ============================================================ */
.navbar{
  position:sticky;top:0;z-index:1000;
  height:var(--nav-h);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .3s ease,background .3s ease;
}
.navbar-inner{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
}
.navbar-brand img{height:26px;width:auto;object-fit:contain}
.navbar-nav{display:flex;align-items:center;gap:34px}
.navbar-nav a{
  font-size:.8rem;font-weight:400;color:#1d1d1f;opacity:.82;
  letter-spacing:0;transition:opacity .2s;
}
.navbar-nav a:hover{opacity:1}
.navbar-actions{display:flex;align-items:center;gap:.6rem}
.navbar-actions .btn{padding:.42rem 1rem;font-size:.82rem}
.navbar-burger{
  display:none;background:none;border:none;font-size:1.4rem;color:var(--ink);
  cursor:pointer;padding:.2rem;line-height:1;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:5.5rem 0 4rem;overflow:hidden;position:relative;
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(59,162,79,.14),transparent 55%),
    radial-gradient(120% 90% at 10% 100%,rgba(232,136,56,.12),transparent 55%),
    linear-gradient(160deg,#1c3f73 0%,#132a4d 100%);
}
.hero > .container{position:relative;z-index:2}

/* ---- Fondo autónomo (degradado vivo, versión oscura) ---- */
.hero-aurora{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
/* velo oscuro suave sobre el lado del texto para máxima nitidez */
.hero-aurora::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(19,42,77,.72) 4%,rgba(19,42,77,.35) 34%,rgba(19,42,77,0) 64%);
}
.aurora-blob{
  position:absolute;border-radius:50%;
  filter:blur(80px);
  will-change:transform,opacity;
}
.aurora-blob.ab1{
  width:46vw;height:46vw;max-width:620px;max-height:620px;top:-14%;left:-12%;
  background:radial-gradient(circle at 50% 50%,rgba(90,140,210,.5),transparent 68%);
  animation:auroraFloat1 18s ease-in-out infinite;
}
.aurora-blob.ab2{
  width:40vw;height:40vw;max-width:540px;max-height:540px;top:8%;right:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(76,200,110,.5),transparent 68%);
  animation:auroraFloat2 21s ease-in-out infinite;
}
.aurora-blob.ab3{
  width:38vw;height:38vw;max-width:500px;max-height:500px;bottom:-18%;left:26%;
  background:radial-gradient(circle at 50% 50%,rgba(240,150,70,.5),transparent 68%);
  animation:auroraFloat3 19s ease-in-out infinite;
}
.aurora-blob.ab4{
  width:26vw;height:26vw;max-width:360px;max-height:360px;top:34%;left:40%;
  background:radial-gradient(circle at 50% 50%,rgba(96,150,220,.42),transparent 66%);
  animation:auroraFloat4 24s ease-in-out infinite;
}

/* Órbitas amplias + respiración (escala) + pulso de opacidad.
   Duraciones distintas y no múltiplos → nunca se sincronizan.
   La capa además rota lento (auroraSpin) para movimiento constante. */
@keyframes auroraFloat1{
  0%{transform:translate(0,0) scale(1);opacity:.44}
  33%{transform:translate(16%,12%) scale(1.16);opacity:.52}
  66%{transform:translate(7%,20%) scale(1.06);opacity:.4}
  100%{transform:translate(0,0) scale(1);opacity:.44}
}
@keyframes auroraFloat2{
  0%{transform:translate(0,0) scale(1);opacity:.42}
  30%{transform:translate(-15%,10%) scale(1.18);opacity:.52}
  70%{transform:translate(-6%,-12%) scale(1.05);opacity:.38}
  100%{transform:translate(0,0) scale(1);opacity:.42}
}
@keyframes auroraFloat3{
  0%{transform:translate(0,0) scale(1);opacity:.42}
  40%{transform:translate(13%,-16%) scale(1.14);opacity:.5}
  75%{transform:translate(-9%,-7%) scale(1.03);opacity:.36}
  100%{transform:translate(0,0) scale(1);opacity:.42}
}
@keyframes auroraFloat4{
  0%{transform:translate(0,0) scale(1);opacity:.32}
  50%{transform:translate(-18%,14%) scale(1.22);opacity:.44}
  100%{transform:translate(0,0) scale(1);opacity:.32}
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}

.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--line);
  padding:.4rem .85rem;border-radius:980px;
  font-size:.78rem;font-weight:500;color:var(--ink-soft);margin-bottom:1.6rem;
}
.hero-badge .dot{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:var(--brand-green);flex-shrink:0;
}
/* halo pulsante tipo indicador "en vivo" */
.hero-badge .dot::before,
.hero-badge .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--brand-green);
}
.hero-badge .dot::before{animation:dotPulse 2.4s ease-out infinite}
.hero-badge .dot::after{animation:dotPulse 2.4s ease-out infinite 1.2s}
@keyframes dotPulse{
  0%{transform:scale(1);opacity:.55}
  70%{opacity:0}
  100%{transform:scale(3.4);opacity:0}
}

.hero-content h1{
  font-size:clamp(2.6rem,5.2vw,4rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;margin-bottom:1.3rem;
}
.hero-content .lead{
  font-size:1.2rem;line-height:1.45;color:var(--ink-soft);font-weight:400;
  max-width:34rem;margin-bottom:2rem;letter-spacing:0;
}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:3rem}

.hero-stats{display:flex;gap:2.8rem}
.hero-stat-value{font-size:2rem;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.hero-stat-label{font-size:.82rem;color:var(--ink-mute);margin-top:.15rem}

/* Tarjetas flotantes del hero */
.hero-visual{position:relative;min-height:440px}
.hero-card{
  position:absolute;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:1.25rem;border:1px solid rgba(0,0,0,.04);
}
.hero-card-main{
  top:50%;left:50%;transform:translate(-50%,-50%);width:74%;padding:0;overflow:hidden;
  z-index:2;
}
.hero-card-main-img{
  aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#fef3d6,#fce1b0);color:var(--accent);font-size:4.5rem;
}
.hero-card-main-body{padding:1.15rem 1.25rem 1.35rem}
.hero-card-main-body h4{font-size:1.05rem;margin-bottom:.2rem}
.hero-card-main-body p{font-size:.82rem;color:var(--ink-mute);margin-bottom:.6rem}
.hero-card-main-body .price{font-size:1.25rem;font-weight:600;color:var(--accent)}

.hero-card-small1{
  top:6%;left:-2%;z-index:3;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.05rem;
}
.hero-card-small1 .icon{
  width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;
}
.hero-card-small1 .text strong{display:block;font-size:.85rem}
.hero-card-small1 .text small{font-size:.72rem;color:var(--ink-mute)}

.hero-card-small2{bottom:-6%;right:-12%;z-index:3;width:54%}
.hero-card-small2 .rating{color:#ffb100;font-size:.8rem;letter-spacing:.1em;margin-bottom:.4rem}
.hero-card-small2 .quote{font-size:.82rem;line-height:1.4;color:var(--ink);margin-bottom:.5rem}
.hero-card-small2 .author{font-size:.75rem;color:var(--ink-mute)}
.hero-card-small2 .author strong{color:var(--ink)}

/* ============================================================
   SECCIONES GENÉRICAS
   ============================================================ */
.section{padding:6rem 0}
.section-alt{background:var(--gray)}
.section-dark{
  background:
    radial-gradient(130% 100% at 85% 0%,rgba(59,162,79,.18),transparent 55%),
    radial-gradient(120% 100% at 0% 100%,rgba(232,136,56,.16),transparent 55%),
    linear-gradient(160deg,#1a3a6b,var(--dark));
  color:#eef2f8;
}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff}
.section-dark .section-tag{color:var(--brand-orange-2)}
.section-dark .section-header p{color:#b9c6dc}

.section-header{text-align:center;max-width:44rem;margin:0 auto 3.5rem}
.section-header h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:600;letter-spacing:-.03em;margin-bottom:1rem}
.section-header p{font-size:1.12rem;color:var(--ink-soft);font-weight:400;line-height:1.5}

/* ============================================================
   ORIGEN
   ============================================================ */
.origen-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.origen-image{
  position:relative;border-radius:26px;min-height:400px;
  background:
    radial-gradient(120% 90% at 20% 15%,rgba(59,162,79,.16),transparent 55%),
    radial-gradient(120% 90% at 90% 90%,rgba(31,72,128,.12),transparent 55%),
    linear-gradient(160deg,#f5f5f7,#e8e8ec);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
}
.origen-image-flag{
  position:absolute;top:1.4rem;left:1.4rem;display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  padding:.5rem .9rem;border-radius:980px;font-size:.8rem;font-weight:500;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.origen-image-flag .flag{
  width:20px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#d52b1e 33%,#f9e300 33% 66%,#007934 66%);
}
.origen-stats{display:flex;gap:2rem}
.origen-stat{text-align:center}
.origen-stat-value{font-size:2.3rem;font-weight:600;letter-spacing:-.03em;color:var(--brand-green)}
.origen-stat-label{font-size:.8rem;color:var(--ink-mute);margin-top:.2rem}

.origen-text h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1.2rem}
.origen-text p{color:var(--ink-soft);font-size:1.05rem;line-height:1.55;margin-bottom:1.1rem}
.origen-features{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
.origen-feature{display:flex;align-items:flex-start;gap:.8rem}
.origen-feature .icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:var(--brand-green-soft);color:var(--brand-green);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
}
.origen-feature strong{display:block;font-size:.95rem;margin-bottom:.1rem}
.origen-feature small{font-size:.8rem;color:var(--ink-mute)}

/* ============================================================
   PRODUCTOS  (tiles tipo Apple)
   ============================================================ */
.productos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.producto-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;display:flex;flex-direction:column;
}
.producto-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.producto-card-image{
  position:relative;aspect-ratio:1/.82;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--bg1,#f5f5f7),var(--bg2,#e8e8ec));
  color:var(--icon,var(--accent));font-size:3.4rem;
}
.producto-card-badge{
  position:absolute;top:.85rem;left:.85rem;background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);color:var(--ink);font-size:.68rem;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;padding:.28rem .6rem;border-radius:980px;
}
.producto-card-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.producto-card-marca{font-size:.72rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.producto-card-nombre{font-size:1.02rem;font-weight:600;line-height:1.25;margin-bottom:.5rem}
.producto-card-desc{font-size:.83rem;color:var(--ink-soft);line-height:1.45;margin-bottom:1rem;flex:1}
.producto-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.producto-card-precio{font-size:1.05rem;font-weight:600;color:var(--ink)}
.producto-card-precio small{font-size:.7rem;color:var(--ink-mute);font-weight:400}
.producto-card-cta{display:inline-flex;align-items:center;gap:.25rem;font-size:.85rem;font-weight:500;color:var(--accent)}
.producto-card:hover .producto-card-cta i{transform:translateX(3px)}
.producto-card-cta i{transition:transform .2s}

/* ============================================================
   MARCAS
   ============================================================ */
.marcas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.marca-card{
  background:#fff;border-radius:var(--radius-sm);padding:1.8rem 1rem;text-align:center;
  border:1px solid var(--line);transition:transform .3s,box-shadow .3s;
}
.marca-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.marca-card-logo{
  width:60px;height:60px;border-radius:16px;margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;font-weight:700;color:#fff;letter-spacing:-.02em;
  background:linear-gradient(145deg,var(--c1,#888),var(--c2,#aaa));
}
.marca-card h4{font-size:1rem;margin-bottom:.3rem}
.marca-card p{font-size:.8rem;color:var(--ink-mute);line-height:1.4}

/* ============================================================
   B2B  (sección oscura)
   ============================================================ */
.b2b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.b2b-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);padding:2rem 1.7rem;transition:transform .3s,background .3s;
}
.b2b-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.07)}
.b2b-card-icon{
  width:52px;height:52px;border-radius:14px;margin-bottom:1.2rem;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;
  background:linear-gradient(145deg,var(--accent,#c2691c),var(--accent2,#e0883f));
}
.b2b-card h3{font-size:1.15rem;margin-bottom:.6rem;color:#f5f5f7}
.b2b-card p{font-size:.9rem;color:#a1a1a6;line-height:1.5}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testimonio-card{
  background:#fff;border-radius:var(--radius);padding:2rem 1.8rem;position:relative;
  border:1px solid var(--line);
}
.testimonio-quote{
  font-size:3.5rem;font-weight:700;line-height:.6;color:var(--accent);opacity:.18;
  font-family:Georgia,serif;margin-bottom:.5rem;
}
.testimonio-rating{color:#ffb100;font-size:.9rem;letter-spacing:.12em;margin-bottom:.9rem}
.testimonio-text{font-size:.95rem;line-height:1.6;color:var(--ink);margin-bottom:1.5rem}
.testimonio-author{display:flex;align-items:center;gap:.8rem}
.testimonio-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:600;color:#fff;
  background:linear-gradient(145deg,var(--c1,#888),var(--c2,#aaa));
}
.testimonio-name{font-size:.92rem;font-weight:600}
.testimonio-role{font-size:.78rem;color:var(--ink-mute)}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:start}
.contacto-info h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1.1rem}
.contacto-info p{color:var(--ink-soft);font-size:1.05rem;line-height:1.55;margin-bottom:2rem}
.contacto-list{display:flex;flex-direction:column;gap:1.3rem}
.contacto-item{display:flex;align-items:center;gap:1rem}
.contacto-item-icon{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.contacto-item-label{font-size:.78rem;color:var(--ink-mute);margin-bottom:.1rem}
.contacto-item-value{font-size:1rem;font-weight:500;color:var(--ink)}
a.contacto-item-value:hover{color:var(--accent)}

.contacto-form{
  background:#fff;border-radius:24px;padding:2.2rem;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.contacto-form h3{font-size:1.4rem;margin-bottom:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:.82rem;font-weight:500;color:var(--ink-soft);margin-bottom:.4rem}
.form-control{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
  background:var(--gray);border:1px solid transparent;border-radius:12px;
  padding:.75rem .9rem;transition:border-color .2s,background .2s,box-shadow .2s;
}
.form-control::placeholder{color:var(--ink-mute)}
.form-control:focus{
  outline:none;background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(194,105,28,.14);
}
textarea.form-control{min-height:120px;resize:vertical}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-block{
  border-radius:30px;padding:4.5rem 2rem;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 130% at 12% 15%,rgba(232,136,56,.42),transparent 55%),
    radial-gradient(130% 120% at 88% 85%,rgba(59,162,79,.30),transparent 55%),
    linear-gradient(150deg,#1c3f73,var(--brand-navy-d));
}
.cta-block-content{position:relative;z-index:1;max-width:40rem;margin:0 auto}
.cta-block h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:#fff;margin-bottom:1rem}
.cta-block p{color:rgba(255,255,255,.8);font-size:1.1rem;margin-bottom:2rem;line-height:1.5}
.cta-block-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--gray);padding:4rem 0 2rem;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
.footer-brand img{height:30px;margin-bottom:1.1rem}
.footer-brand p{font-size:.88rem;color:var(--ink-soft);line-height:1.6;max-width:22rem;margin-bottom:1.3rem}
.footer-social{display:flex;gap:.6rem}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  font-size:1.05rem;transition:all .2s;
}
.footer-social a:hover{background:var(--brand-navy);color:#fff;border-color:var(--brand-navy);transform:translateY(-2px)}
.footer-col h5{font-size:.85rem;font-weight:600;margin-bottom:1rem;color:var(--ink)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.6rem}
.footer-col a{font-size:.85rem;color:var(--ink-soft);transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding-top:1.6rem;font-size:.8rem;color:var(--ink-mute);
}

/* ============================================================
   REVEAL AL HACER SCROLL  (usado por main.js)
   ============================================================ */
.fade-in{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.fade-in.visible{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-visual{min-height:380px;max-width:440px;margin:0 auto;width:100%}
  .origen-grid,.contacto-grid{grid-template-columns:1fr;gap:2.5rem}
  .productos-grid{grid-template-columns:repeat(2,1fr)}
  .marcas-grid{grid-template-columns:repeat(3,1fr)}
  .b2b-grid,.testimonios-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:768px){
  .navbar-nav{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;gap:0;background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);padding:.5rem 0;border-bottom:1px solid var(--line);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
  }
  .navbar-nav.open{display:flex}
  .navbar-nav a{padding:.85rem 22px;width:100%;opacity:1;font-size:.95rem;border-bottom:1px solid var(--gray)}
  .navbar-burger{display:block}
  .section{padding:4rem 0}
  .hero{padding:3.5rem 0 3rem}
  .hero-stats{gap:1.8rem}
  .productos-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .marcas-grid{grid-template-columns:repeat(2,1fr)}
  .b2b-grid,.testimonios-grid{grid-template-columns:1fr}
  .origen-features{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .hero-content h1{font-size:2.3rem}
  .productos-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap;gap:1.2rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .fade-in{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ============================================================
   MICRO-INTERACCIONES (sutiles, profesionales)
   ============================================================ */

/* 1) Entrada escalonada del hero al cargar */
@keyframes heroReveal{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.hero-content > *{animation:heroReveal .7s cubic-bezier(.2,.7,.2,1) both}
.hero-content > *:nth-child(1){animation-delay:.05s}
.hero-content > *:nth-child(2){animation-delay:.14s}
.hero-content > *:nth-child(3){animation-delay:.23s}
.hero-content > *:nth-child(4){animation-delay:.32s}
.hero-content > *:nth-child(5){animation-delay:.41s}
.hero-visual{animation:heroReveal .8s cubic-bezier(.2,.7,.2,1) both .3s}

/* 3) Brillo (sheen) que cruza los botones al pasar el cursor */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn:hover::after{animation:btnSheen .85s ease}
@keyframes btnSheen{to{left:150%}}

/* 4) Subrayado animado en el menú */
.navbar-nav a{position:relative}
.navbar-nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.navbar-nav a:hover::after{transform:scaleX(1)}

/* ============================================================
   HERO OSCURO (navy) — texto y componentes sobre fondo oscuro
   ============================================================ */
.hero-badge{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#e7edf6;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero-content h1{color:#fff}
.hero-content .accent{color:#5fd07a}   /* "Bolivia": verde más brillante para dark */
.hero-content .lead{color:#c2cfe2}
.hero-stat-value{color:#fff}
.hero-stat-label{color:#93a3bd}
/* botón "Soy mayorista" sobre oscuro */
.hero-actions .btn-secondary{background:rgba(255,255,255,.12);color:#fff}
.hero-actions .btn-secondary:hover{background:rgba(255,255,255,.2)}

/* Hero: en pantallas muy pequeñas, las tarjetas flotantes pasan a flujo
   normal (apiladas) para que nunca desborden ni tapen el texto. */
@media (max-width: 560px) {
  .hero-visual { min-height: auto; }
  .hero-card { position: static !important; transform: none !important;
    width: auto !important; margin: 0 0 1rem 0; }
  .hero-card-main { width: 100% !important; }
}