/* ===========================================================
   Modula — Sistema de diseño compartido
   Logística modular para e-commerce
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Mulish:wght@400;500;600;700&display=swap');

:root{
  /* Brand — SendingBay teal */
  --green-900:#063d30;
  --green-800:#075d48;
  --green-700:#00795e;   /* deep / hover */
  --green-600:#009070;   /* PRIMARY brand */
  --green-500:#0aa182;   /* primary light */
  --green-300:#5cc4ab;
  --green-100:#cfeee4;
  --green-50:#e8f7f1;
  --mint:#e4f6ef;

  --yellow:#f5c543;
  --yellow-600:#e9b424;

  --ink:#10202f;         /* headings */
  --ink-soft:#2c3e4f;
  --slate:#566370;       /* body */
  --slate-soft:#7c8893;
  --line:#e6ece9;
  --line-soft:#eef2f0;

  --bg:#ffffff;
  --bg-tint:#f3faf6;
  --footer:#161d28;
  --footer-soft:#202836;

  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --radius-xl:32px;

  --shadow-s:0 1px 2px rgba(16,32,47,.04), 0 1px 1px rgba(16,32,47,.03);
  --shadow:0 12px 30px -12px rgba(16,32,47,.12), 0 4px 10px -6px rgba(16,32,47,.08);
  --shadow-l:0 30px 60px -24px rgba(16,32,47,.18);

  --maxw:1180px;
  --gutter:24px;

  --font-head:'Sora', system-ui, sans-serif;
  --font-body:'Mulish', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:700;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

/* Layout helpers ------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.section{padding:68px 0;}
.section.tight{padding:48px 0;}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;}

/* Eyebrow ------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-head);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-600);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-500);}
.eyebrow.plain::before{display:none;}

/* Headings scale ------------------------------------------------ */
.h-hero{font-size:clamp(40px,5.4vw,62px);font-weight:800;line-height:1.04;}
.h1{font-size:clamp(32px,4vw,46px);font-weight:800;}
.h2{font-size:clamp(26px,3vw,36px);font-weight:700;}
.h3{font-size:21px;font-weight:700;}
.lead{font-size:19px;color:var(--slate);max-width:62ch;}
.muted{color:var(--slate-soft);}
.kicker{color:var(--green-600);}

/* Buttons ------------------------------------------------------- */
.btn{
  font-family:var(--font-head);
  font-weight:600;font-size:14.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--green-600);color:#fff;box-shadow:0 10px 22px -12px rgba(17,138,100,.85);}
.btn-primary:hover{background:var(--green-700);box-shadow:0 14px 26px -10px rgba(15,107,80,.9);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--green-300);color:var(--green-700);background:var(--green-50);}
.btn-yellow{background:var(--yellow);color:#3a2e07;}
.btn-yellow:hover{background:var(--yellow-600);}
.btn-white{background:#fff;color:var(--green-700);}
.btn-white:hover{background:#f2fbf7;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;}
.btn-lg{padding:13px 26px;font-size:15.5px;}
.btn-block{width:100%;}
.btn .arr{transition:transform .2s ease;}
.btn:hover .arr{transform:translateX(3px);}

/* Pills / chips ------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:14px;font-weight:600;color:var(--ink-soft);
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--green-500);}
.tag{
  display:inline-block;font-family:var(--font-head);font-weight:600;
  font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
  background:var(--green-100);color:var(--green-700);
}
.tag.yellow{background:#fdf1cd;color:#8a6a06;}

/* Cards --------------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:30px;box-shadow:var(--shadow-s);
}
.card.flat{box-shadow:none;}
.card.pad-s{padding:22px;}
.card-hover{transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-100);}

.icon-badge{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--green-50);color:var(--green-600);border:1px solid var(--green-100);
  margin-bottom:18px;
}
.icon-badge svg{width:23px;height:23px;}
.num-badge{
  font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--green-600);
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--green-50);border:1px solid var(--green-100);margin-bottom:16px;
}

/* Grids --------------------------------------------------------- */
.grid{display:grid;gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.lean{grid-template-columns:1.05fr .95fr;}

/* Feature list -------------------------------------------------- */
.flist{display:flex;flex-direction:column;gap:14px;}
.flist li{display:flex;gap:13px;align-items:flex-start;color:var(--ink-soft);font-weight:500;}
.flist .tick{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--green-50);color:var(--green-600);display:grid;place-items:center;
  border:1px solid var(--green-100);
}
.flist .tick svg{width:13px;height:13px;}

/* Stats --------------------------------------------------------- */
.stat-row{display:flex;gap:40px;flex-wrap:wrap;}
.stat .n{font-family:var(--font-head);font-weight:800;font-size:34px;color:var(--ink);line-height:1;}
.stat .l{font-size:13.5px;color:var(--slate-soft);margin-top:6px;}

/* Placeholder media -------------------------------------------- */
.ph{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  background-color:var(--green-50);
  background-image:repeating-linear-gradient(135deg,rgba(17,138,100,.07) 0 12px,rgba(17,138,100,.02) 12px 24px);
  border:1px solid var(--green-100);
  display:grid;place-items:center;min-height:220px;
}
.ph .lbl{
  font-family:'SFMono-Regular',ui-monospace,Menlo,monospace;font-size:12px;
  color:var(--green-700);background:rgba(255,255,255,.78);padding:6px 12px;border-radius:8px;
  border:1px solid var(--green-100);letter-spacing:.02em;
}

/* Sections with tint (transparent so the body wash shows through) */
.tint{background:transparent;}
.tint-soft{background:transparent;}
.tint-full{background:transparent;}

/* FAQ ----------------------------------------------------------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.faq-item + .faq-item{border-top:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--ink);
}
.faq-q .ic{flex:0 0 auto;width:24px;height:24px;color:var(--green-600);transition:transform .25s ease;}
.faq-item.open .faq-q .ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a .inner{padding:0 26px 24px;color:var(--slate);max-width:70ch;}

/* CTA band ------------------------------------------------------ */
.cta-band{background:var(--green-700);color:#fff;border-radius:0;}
.cta-band h2{color:#fff;}
.cta-card{
  background:linear-gradient(165deg,var(--green-600),var(--green-800));
  border-radius:var(--radius-xl);padding:64px;text-align:center;color:#fff;
  box-shadow:var(--shadow-l);position:relative;overflow:hidden;
}
.cta-card::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(600px 300px at 80% -10%, rgba(255,255,255,.14), transparent 60%);
}
.cta-card h2,.cta-card p{position:relative;}
.cta-card .lead{color:rgba(255,255,255,.86);margin-inline:auto;}

/* Navbar -------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-soft);}
.nav-in{display:flex;align-items:center;gap:28px;height:72px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em;}
.brand img{height:40px;width:auto;display:block;}
.brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--green-500),var(--green-700));display:grid;place-items:center;}
.brand .mark svg{width:18px;height:18px;color:#fff;}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:14px;}
.nav-link{
  font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink-soft);
  padding:9px 14px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;transition:background .15s ease,color .15s ease;
}
.nav-link:hover{background:var(--green-50);color:var(--green-700);}
.nav-link.active{color:var(--green-700);}
.nav-link .caret{width:15px;height:15px;transition:transform .2s ease;}
.nav-item{position:relative;}
.nav-item.open .caret{transform:rotate(180deg);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;}

/* Dropdown ------------------------------------------------------ */
.dd{
  position:absolute;top:calc(100% + 10px);left:0;width:440px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);padding:14px;display:none;
}
/* puente invisible que cubre el hueco botón→menú para que no se cierre al pasar el ratón */
.dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
.nav-item.open .dd{display:block;}
.dd-item{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;transition:background .15s ease;}
.dd-item:hover{background:var(--green-50);}
.dd-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--green-50);color:var(--green-600);border:1px solid var(--green-100);}
.dd-ic svg{width:21px;height:21px;}
.dd-item:hover .dd-ic{background:#fff;}
.dd-t{display:block;font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:2px;}
.dd-d{font-size:13.5px;color:var(--slate-soft);margin-top:2px;line-height:1.45;}

/* Footer -------------------------------------------------------- */
.foot{background:var(--footer);color:#aeb8c4;padding:64px 0 30px;}
/* Footer sellos — tamaños replicados de la landing Bestmile (cumplimiento) */
.foot-seals{margin:34px 0 26px;}
.foot-seals-l{display:block;font-family:var(--font-head);font-weight:800;font-size:18px;color:#45c4a0;margin:0 0 28px;}
.foot-seals-grid{display:grid;grid-template-columns:260px 1fr 300px;gap:40px;align-items:center;}
.fs-pyme img{max-height:220px;width:auto;object-fit:contain;display:block;}
.fs-center{display:flex;flex-direction:column;align-items:center;gap:14px;}
.fs-center img{max-height:70px;width:100%;max-width:560px;object-fit:contain;display:block;}
.fs-right{display:flex;flex-direction:column;align-items:flex-end;gap:24px;}
.fs-right img{max-height:54px;width:auto;object-fit:contain;display:block;}
@media(max-width:1100px){
  .foot-seals-grid{grid-template-columns:1fr;justify-items:center;gap:32px;}
  .fs-right{align-items:center;}
}
.foot a{color:#aeb8c4;transition:color .15s ease;}
.foot a:hover{color:#fff;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;}
.foot .brand{color:#fff;}
.foot .brand img{height:30px;filter:brightness(0) invert(1);opacity:.95;}
.foot-h{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.foot-col li{margin-bottom:11px;font-size:14.5px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:48px;padding-top:24px;border-top:1px solid var(--footer-soft);font-size:13.5px;color:#75808d;flex-wrap:wrap;}
.foot-blurb{font-size:14.5px;line-height:1.6;margin-top:16px;max-width:30ch;color:#8a94a1;}

/* Page hero (módulos) ------------------------------------------ */
.phero{background:transparent;overflow:hidden;}
.phero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;padding:70px var(--gutter) 84px;}
.phero h1{margin:18px 0 18px;}
.phero .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px;}
@media(max-width:760px){.phero-in{grid-template-columns:1fr;gap:32px;padding:44px var(--gutter) 56px;}}

/* Section header ------------------------------------------------ */
.shead{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;margin-bottom:46px;}
.shead .lead{margin-inline:auto;}

/* Steps --------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:28px;box-shadow:var(--shadow-s);}
@media(max-width:780px){.steps{grid-template-columns:1fr;}}

/* Carrier strip ------------------------------------------------- */
.carriers{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.carrier{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:var(--font-head);font-weight:700;color:var(--ink-soft);font-size:15px;box-shadow:var(--shadow-s);}
.carrier .sq{width:20px;height:20px;border-radius:6px;background:var(--green-100);}

/* Pricing ------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:30px;display:flex;flex-direction:column;box-shadow:var(--shadow-s);}
.plan.feat{background:var(--yellow);border-color:var(--yellow-600);box-shadow:var(--shadow);transform:translateY(-8px);}
.plan .pname{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--green-700);}
.plan.feat .pname{color:#8a6a06;}
.plan .price{font-family:var(--font-head);font-weight:800;font-size:46px;color:var(--ink);line-height:1;margin:14px 0 4px;}
.plan .price small{font-size:16px;font-weight:600;color:var(--slate-soft);}
.plan .pdesc{font-size:14.5px;color:var(--slate);min-height:42px;}
.plan.feat .pdesc{color:#5a4a12;}
.plan .pfeat{display:flex;flex-direction:column;gap:11px;margin:22px 0 26px;}
.plan .pfeat li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);font-weight:500;}
.plan.feat .pfeat li{color:#3a2e07;}
.plan .pfeat .tk{flex:0 0 auto;width:18px;height:18px;color:var(--green-600);margin-top:2px;}
.plan.feat .pfeat .tk{color:#3a2e07;}
.plan .btn{margin-top:auto;}
.plan-badge{display:inline-block;align-self:flex-start;background:#3a2e07;color:var(--yellow);font-family:var(--font-head);font-weight:700;font-size:11.5px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;margin-bottom:8px;}
@media(max-width:880px){.pricing{grid-template-columns:1fr;}.plan.feat{transform:none;}}

/* Testimonial --------------------------------------------------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:36px;box-shadow:var(--shadow-s);}
.quote p{font-family:var(--font-head);font-weight:600;font-size:22px;color:var(--ink);line-height:1.4;letter-spacing:-.01em;}
.quote .by{display:flex;align-items:center;gap:13px;margin-top:22px;}
.quote .av{width:46px;height:46px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;}

/* Tab nav (anchors) -------------------------------------------- */
.tabnav{background:#fff;border-bottom:1px solid var(--line-soft);}
.tabnav-in{display:flex;gap:6px;height:58px;align-items:center;justify-content:center;flex-wrap:wrap;}
.tabnav a{font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--slate);padding:8px 16px;border-radius:999px;transition:background .15s,color .15s;}
.tabnav a:hover{background:var(--green-50);color:var(--green-700);}
@media(max-width:680px){.tabnav{display:none;}}

/* Phone mockups ------------------------------------------------- */
.phone{width:230px;border-radius:34px;background:#11181f;padding:10px;box-shadow:var(--shadow-l);}
.phone .scr{border-radius:26px;overflow:hidden;background:#fff;}
.phone .scr img{display:block;width:100%;height:auto;}
.phone .pbar{height:22px;background:#fff;}

/* Photos --------------------------------------------------------- */
.photo{border-radius:var(--radius-l);overflow:hidden;position:relative;background:var(--green-50);}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo.cover-tall img{min-height:340px;}

/* Misc ---------------------------------------------------------- */
.divider{height:1px;background:var(--line);border:0;margin:0;}
.reveal{transform:translateY(14px);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal.in{transform:none;}

/* Responsive ---------------------------------------------------- */
/* Utilidades responsive: mostrar/ocultar por dispositivo --------- */
.only-mob{display:none;}
.only-desk{display:inline;}

@media (max-width:980px){
  .split,.split.lean{grid-template-columns:1fr;gap:36px;}
  .g4{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .nav-links{display:none;}
  .nav-right{display:none;}            /* CTAs viven en el menú móvil → evita desbordamiento */
  .section{padding:44px 0;}            /* tablet: antes 72px (más que desktop, era un bug) */
}
@media (max-width:680px){
  body{font-size:16px;}
  .g2,.g3{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr;}
  .cta-card{padding:40px 22px;}
  .stat-row{gap:26px;}
  .dd{width:min(86vw,440px);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}

  /* Tipografía móvil — desktop intacto, aquí se baja a tamaño legible */
  .section{padding:34px 0;}          /* móvil: menos aire vertical, menos scroll (antes 52px) */
  .section.tight{padding:26px 0;}    /* antes 40px */
  .h-hero{font-size:27px;line-height:1.16;letter-spacing:-.015em;}
  .h1{font-size:21px;}
  .h2{font-size:18.5px;}
  .h3{font-size:16px;}
  .lead{font-size:16px;line-height:1.55;}
  .eyebrow{font-size:11.5px;letter-spacing:.1em;}
  .btn{padding:11px 18px;font-size:14px;}
  .btn-lg{padding:12px 20px;font-size:14.5px;}
  .plan .price{font-size:34px;}   /* móvil: precio más contenido (antes 46px) pero sigue llamativo */
  .shead{margin-bottom:32px;}

  /* Conmutador de copy desktop/móvil */
  .only-desk{display:none;}
  .only-mob{display:inline;}
  .only-mob.block{display:block;}
}

/* ===========================================================
   SISTEMA VISUAL UNIFICADO — 2026-07-21
   Nació en About us y Blog. Se sube aquí para que TODAS las
   páginas compartan la misma línea gráfica en vez de tener
   cada una su <style> por libre.
   Va al final a propósito: sobrescribe lo anterior.
   =========================================================== */

:root{
  /* Mostaza de marca (brandbook). OJO: --yellow (#f5c543) es otro
     amarillo que ya usaba la hoja; no se toca para no romper nada. */
  --mustard:#ffd75c;
  --mustard-soft:#fff3cc;
  --mustard-ink:#9a6b00;
}

/* --- Acentos en titulares -------------------------------------
   Máximo DOS por titular: uno en teal y otro subrayado en mostaza.
   El mostaza va DETRÁS del texto, no en la letra: así no se pierde
   contraste (texto mostaza sobre blanco es ilegible). */
.hl{color:var(--green-600);}
.hl-mark{background:linear-gradient(180deg,transparent 60%,var(--mustard) 60%);padding:0 3px;}

/* --- Badges de icono ------------------------------------------
   Círculo relleno en vez del cuadrado con borde. La alternancia
   teal/mostaza se hace por posición, sin tocar el HTML. */
.icon-badge,.vb{
  width:54px;height:54px;border-radius:50%;border:0;
  display:grid;place-items:center;margin-bottom:18px;
  background:var(--green-50);color:var(--green-600);
}
.icon-badge svg,.vb svg{width:25px;height:25px;}
.grid > *:nth-child(even) .icon-badge{background:var(--mustard-soft);color:var(--mustard-ink);}
.vb-teal{background:var(--green-50);color:var(--green-600);}
.vb-mustard{background:var(--mustard-soft);color:var(--mustard-ink);}
.chip-row{display:flex;gap:12px;justify-content:center;margin-bottom:6px;}
.chip-row .vb{margin-bottom:0;}

/* --- Frase de impacto -----------------------------------------
   Rompe un bloque de prosa y se lee sola. Se usa UNA por sección. */
.pull{
  font-family:var(--font-head,Poppins,system-ui,sans-serif);font-weight:800;
  font-size:clamp(23px,3.4vw,32px);line-height:1.22;text-align:center;
  max-width:21ch;margin:34px auto;
}
.pull strong{color:var(--green-600);}
.pull.left{text-align:left;margin:26px 0 0;max-width:24ch;font-size:clamp(21px,2.4vw,27px);}

/* --- Tira de cifras -------------------------------------------- */
.stat-strip{
  display:flex;gap:44px;flex-wrap:wrap;justify-content:center;
  margin-top:34px;padding-top:30px;border-top:1px solid rgba(13,43,43,.1);
}
.stat-strip .n{
  font-family:var(--font-head,Poppins,system-ui,sans-serif);font-weight:800;
  font-size:38px;line-height:1;color:var(--green-600);
}
.stat-strip .l{font-size:14px;margin-top:8px;opacity:.75;}
.stat-strip.left{justify-content:flex-start;gap:34px;}

/* --- Split texto + imagen -------------------------------------
   La página no se centra entera: alterna texto e imagen. */
.split-media{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.split-media .eyebrow{justify-content:flex-start;}
.split-media img{width:100%;height:auto;display:block;}
@media (max-width:880px){
  .split-media{grid-template-columns:1fr;gap:32px;}
  .split-media .media{order:-1;}
}

/* --- Titular dentro del cta-card ------------------------------
   .h1 trae color propio (tinta oscura) y NO hereda el blanco del cta-card,
   que va sobre degradado teal. Sin esto el titular sale oscuro sobre oscuro.
   .lead ya estaba resuelto mas arriba; a .h1 le faltaba, y por eso el CTA del
   Blog llevaba el titular ilegible. Se arregla aqui, en la hoja compartida,
   para que valga en todas las paginas y no haya que parchearlo pagina a pagina
   (aboutus lo tenia parcheado inline; ese parche ya es redundante). */
.cta-card .h1{color:#fff;}

/* ===========================================================
   Chrome: menú móvil y conmutador de idioma.
   2026-07-22 — estas reglas las inyectaba site.js en un <style> en
   tiempo de ejecución. Al pasar el navbar y el footer a HTML estático
   se traen aquí: si no, el menú se pinta sin estilos hasta que carga el JS.
   =========================================================== */
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);}
.nav-toggle svg{width:22px;height:22px;}
.lang-switch{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:600;font-size:14px;}
.lang-switch a{color:var(--slate-soft);text-decoration:none;}
.lang-switch a:hover{color:var(--green-700);}
.lang-switch .lang-active{color:var(--ink);}
.lang-switch .sep{color:var(--line);font-weight:400;}
.mobile-menu{display:none;border-top:1px solid var(--line-soft);background:#fff;padding:14px var(--gutter) 22px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:13px 6px;font-family:var(--font-head);font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--line-soft);}
.mobile-menu .mm-cta{display:flex;gap:10px;margin-top:16px;}
.mobile-menu .mm-cta .btn{flex:1;border-bottom:0;}
.mobile-menu .mm-lang{display:flex;gap:14px;margin-top:16px;border-bottom:0;padding:0 6px;}
.mobile-menu .mm-lang a,.mobile-menu .mm-lang span{display:inline;border-bottom:0;padding:0;}
@media(max-width:980px){.nav-toggle{display:inline-flex;}.nav-right{display:none;}.mobile-menu .mm-prod{padding-left:18px;font-weight:500;color:var(--slate);}}