/* ══════════════════════════════════════════════════════════════
   _base.css · AgroRadar Soluciones — Sistema de diseño compartido
   Usar en todas las micro-landings:
   <link rel="stylesheet" href="../_base.css">
   <link rel="stylesheet" href="../_components.css">
══════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* ── TOKENS ── */
:root{
  --g:#1D9E75;--glt:#C8EAD8;--gdk:#0A6B4B;--gxdk:#07472F;
  --a:#A06200;--alt:#F5E4C8;--adk:#7A4A00;
  --r:#A32D2D;--rlt:#F7DCDC;--rmd:#C94040;
  --bg:#EEF1EE;--surf:#FFFFFF;
  --tx:#0D1410;--tx2:#2C3A35;--tx3:#4A5C54;
  --bd:rgba(0,0,0,.13);--bd2:rgba(0,0,0,.20);
  --pad-x:clamp(1.25rem,5vw,4.5rem);
  --max:1100px;
  --ra:10px;--ra-lg:14px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.05);
  --shadow-md:0 4px 20px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);
  --shadow-lg:0 8px 36px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.07);
  --shadow-mock:0 12px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06);
}

/* ── BASE ── */
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--surf);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;
  font-size:16px;line-height:1.65;color:var(--tx);-webkit-font-smoothing:antialiased}

/* ── LAYOUT ── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x)}
.section{padding:7rem 0;border-bottom:1px solid var(--bd)}
.section:last-of-type{border-bottom:none}
.section--bg{background:var(--bg)}
.section--dark{background:var(--gxdk)}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bd);height:60px}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad-x);
  height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;flex-direction:column;line-height:1;gap:2px;text-decoration:none}
.nav-logo{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--tx)}
.nav-logo span{color:var(--g)}
.nav-division{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3)}
.nav-links{display:flex;align-items:center;gap:2.25rem}
.nav-links a{font-size:14px;color:var(--tx2);text-decoration:none;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--tx)}
.nav-breadcrumb{font-size:13px;color:var(--tx3);display:flex;align-items:center;gap:.4rem}
.nav-breadcrumb a{color:var(--tx3);text-decoration:none;transition:color .15s}
.nav-breadcrumb a:hover{color:var(--tx)}
.nav-breadcrumb-sep{color:var(--bd2)}
.nav-breadcrumb-cur{color:var(--tx2);font-weight:600}
.nav-cta{background:var(--g) !important;color:#fff !important;
  padding:.45rem 1.1rem;border-radius:var(--ra);
  font-size:13px;font-weight:700 !important;transition:background .15s !important;
  white-space:nowrap}
.nav-cta:hover{background:var(--gdk) !important}
@media(max-width:700px){.nav-links{display:none}}
@media(max-width:500px){.nav-breadcrumb{display:none}}

/* ── EYEBROW ── */
.ey{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g);margin-bottom:.875rem;display:flex;align-items:center;gap:.5rem}
.ey::before{content:'';width:16px;height:2px;background:var(--g);border-radius:1px;flex-shrink:0}

/* ── TYPE SCALE ── */
.h1{font-size:clamp(34px,4.5vw,52px);font-weight:800;letter-spacing:-.028em;
  line-height:1.08;color:var(--tx)}
.h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.022em;
  line-height:1.14;color:var(--tx)}
.h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--tx)}
.lead{font-size:18px;color:var(--tx2);line-height:1.7}
.body{font-size:15px;color:var(--tx2);line-height:1.7}
.small{font-size:13px;color:var(--tx3);line-height:1.6}

/* ── BUTTONS ── */
.btn-p{display:inline-flex;align-items:center;gap:.45rem;
  background:var(--g);color:#fff;border:none;
  padding:.85rem 1.75rem;border-radius:var(--ra);
  font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .15s,transform .1s;letter-spacing:-.01em}
.btn-p:hover{background:var(--gdk);transform:translateY(-1px)}
.btn-p:active{transform:none}
.btn-s{display:inline-flex;align-items:center;gap:.45rem;
  background:transparent;color:var(--tx);
  border:1.5px solid var(--bd2);padding:.85rem 1.75rem;border-radius:var(--ra);
  font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s}
.btn-s:hover{background:var(--bg);border-color:var(--tx3)}
.btn-wa{display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#fff;border:none;
  padding:.85rem 1.75rem;border-radius:var(--ra);
  font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .15s,transform .1s}
.btn-wa:hover{background:#1ebe5a;transform:translateY(-1px)}
.btn-row{display:flex;gap:.875rem;flex-wrap:wrap}

/* ── BADGES & PILLS ── */
.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:20px;letter-spacing:.04em}
.badge-g{background:var(--glt);color:var(--gdk)}
.badge-a{background:var(--alt);color:var(--adk)}
.badge-r{background:var(--rlt);color:var(--r)}
.badge-gy{background:#D8DDD8;color:var(--tx2)}

/* ── HERO BASE ── */
.hero{padding:5.5rem 0 4.5rem}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.hero-left .ey{margin-bottom:1.25rem}
.hero-left .h1{margin-bottom:1.25rem}
.hero-left .lead{margin-bottom:1.5rem;max-width:480px}
.btn-row{display:flex;gap:.875rem;flex-wrap:wrap}
.hero-trust{display:flex;flex-wrap:wrap;gap:1.5rem;
  margin-top:2rem;padding-top:2rem;border-top:1px solid var(--bd)}
.trust-item{font-size:14px;color:var(--tx3);display:flex;align-items:center;gap:.45rem;font-weight:500}
.trust-dot{width:5px;height:5px;border-radius:50%;background:var(--g);flex-shrink:0}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
@media(max-width:860px){.hero{padding:4rem 0 3rem}}

/* ── PROBLEMA CARDS ── */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem}
@media(max-width:700px){.prob-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.prob-grid{grid-template-columns:1fr}}
.prob-card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--ra-lg);
  padding:1.75rem;transition:box-shadow .15s,transform .15s}
.prob-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.prob-icon{font-size:22px;margin-bottom:1rem;display:block}
.prob-title{font-size:15px;font-weight:700;color:var(--tx);margin-bottom:.5rem;line-height:1.35}
.prob-desc{font-size:14px;color:var(--tx2);line-height:1.6}

/* ── FUNCIONALIDADES GRID ── */
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:800px){.func-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.func-grid{grid-template-columns:1fr}}
.func-item{background:var(--bg);border:1px solid var(--bd2);border-radius:var(--ra);
  padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.func-icon{font-size:20px}
.func-name{font-size:14px;font-weight:700;color:var(--tx);line-height:1.3}
.func-desc{font-size:13px;color:var(--tx3);line-height:1.55}

/* ── BENEFICIOS ── */
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem 2rem}
@media(max-width:720px){.ben-grid{grid-template-columns:repeat(2,1fr);gap:2.25rem 1.5rem}}
.ben-item{display:flex;flex-direction:column;gap:.3rem}
.ben-mod{font-size:15px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:.03em}
.ben-noun{font-size:clamp(32px,4.5vw,54px);font-weight:800;
  color:#fff;letter-spacing:-.03em;line-height:1.0}

/* ── WINDOW CHROME (mockups) ── */
.wc{height:34px;background:#F0F3F0;border-bottom:1px solid #D4DAD4;
  display:flex;align-items:center;padding:0 .875rem;gap:.5rem;flex-shrink:0}
.wc-dots{display:flex;gap:5px}
.wc-dot{width:9px;height:9px;border-radius:50%}
.wc-title{font-size:12px;font-weight:600;color:var(--tx3);margin-left:.25rem;
  flex:1;text-align:center;letter-spacing:.01em}

/* ── MOCK WRAPPER (demo frame) ── */
.mock-wrap{background:#E2E8E4;border-radius:var(--ra-lg);
  position:relative;padding:1.25rem 1.125rem 1rem;
  border:2px solid var(--bd2)}
.mock-badge{position:absolute;top:.875rem;right:.875rem;
  background:rgba(7,71,47,.92);color:#fff;
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:5px;
  letter-spacing:.07em;text-transform:uppercase;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.mock-win{background:var(--surf);border-radius:8px;overflow:hidden;
  box-shadow:0 3px 16px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08)}

/* ── ROI SECTION ── */
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1.5px solid var(--bd2);border-radius:var(--ra-lg);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.roi-col{padding:2.75rem}
.roi-antes{background:var(--surf)}
.roi-despues{background:var(--surf);border-left:1.5px solid var(--bd2)}
.roi-badge{display:inline-block;font-size:12px;font-weight:700;
  padding:4px 14px;border-radius:20px;margin-bottom:1.75rem;letter-spacing:.05em}
.roi-badge-a{background:#E4E0D8;color:#4A3E35}
.roi-badge-d{background:var(--glt);color:var(--gdk)}
.roi-item{display:flex;align-items:flex-start;gap:.75rem;
  padding:.7rem 0;border-bottom:1px solid var(--bd);font-size:15px;line-height:1.55;color:var(--tx2)}
.roi-item:last-child{border-bottom:none}
.roi-ico-a{flex-shrink:0;color:#9A8F86;font-size:15px;margin-top:.1rem}
.roi-ico-d{flex-shrink:0;color:var(--g);font-size:15px;margin-top:.1rem}
@media(max-width:620px){
  .roi-grid{grid-template-columns:1fr}
  .roi-despues{border-left:none;border-top:1.5px solid var(--bd2)}
  .roi-col{padding:2rem}
}

/* ── CALLOUT ── */
.callout{background:var(--glt);border-radius:var(--ra-lg);
  border-left:4px solid var(--g);padding:1.75rem 2.25rem}
.callout--dark{background:var(--gxdk);border-left-color:var(--g)}
.callout p{font-size:17px;color:var(--gdk);line-height:1.75}
.callout--dark p{color:rgba(255,255,255,.88)}
.callout em{font-style:normal;font-weight:700;color:var(--gxdk)}
.callout--dark em{color:#fff}

/* ── HISTORIA REAL ── */
.historia{background:var(--gxdk);border-radius:var(--ra-lg);
  padding:2.25rem 2.75rem;display:grid;grid-template-columns:auto 1fr;
  gap:1.75rem;align-items:start}
.historia-bar{width:3px;background:var(--g);border-radius:2px;
  align-self:stretch;min-height:60px;flex-shrink:0}
.historia-quote{font-size:17px;color:rgba(255,255,255,.92);
  line-height:1.75;font-style:italic;margin-bottom:1rem}
.historia-attr{display:flex;align-items:center;gap:.625rem}
.historia-avatar{width:28px;height:28px;border-radius:50%;
  background:var(--g);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.historia-name{font-size:13px;color:rgba(255,255,255,.6);font-weight:500}

/* ── TIEMPO DE IMPLEMENTACIÓN ── */
.tiempo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
@media(max-width:580px){.tiempo-grid{grid-template-columns:1fr}}
.tiempo-step{background:var(--surf);border:1px solid var(--bd2);border-radius:var(--ra);
  padding:1.5rem;display:flex;flex-direction:column;gap:.625rem}
.tiempo-step--featured{border-color:var(--g);border-width:2px}
.tiempo-num{width:32px;height:32px;border-radius:50%;background:var(--g);
  color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tiempo-label{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tx3)}
.tiempo-dur{font-size:22px;font-weight:800;color:var(--tx);letter-spacing:-.02em;line-height:1}
.tiempo-desc{font-size:14px;color:var(--tx2);line-height:1.6}

/* ── LINKS INTERNOS (SEO) ── */
.internal-links{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(max-width:580px){.internal-links{grid-template-columns:1fr}}
.il-card{background:var(--bg);border:1px solid var(--bd2);border-radius:var(--ra);
  padding:1.25rem 1.5rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.25rem;transition:box-shadow .15s,transform .15s}
.il-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.il-title{font-size:15px;font-weight:700;color:var(--tx)}
.il-desc{font-size:13px;color:var(--tx3);line-height:1.55}
.il-arrow{font-size:13px;color:var(--g);font-weight:700;margin-top:.25rem}

/* ── CTA FINAL ── */
.cta-final{padding:7rem 0}
.cta-final-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
@media(max-width:860px){.cta-final-grid{grid-template-columns:1fr;gap:3rem}}
.cta-trust-item{display:flex;align-items:center;gap:.5rem;
  font-size:14px;color:var(--tx3);margin-bottom:.625rem;font-weight:500}
.cta-trust-dot{width:5px;height:5px;border-radius:50%;background:var(--g);flex-shrink:0}

/* ── FORM ── */
.form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tx2)}
.field input,.field textarea{
  background:var(--bg);border:1.5px solid var(--bd2);border-radius:var(--ra);
  padding:.75rem 1rem;font-size:15px;color:var(--tx);font-family:inherit;
  outline:none;transition:border-color .15s,box-shadow .15s;width:100%;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--tx3)}
.field input:focus,.field textarea:focus{
  border-color:var(--g);box-shadow:0 0 0 3px rgba(29,158,117,.12)}
.field textarea{resize:vertical;min-height:100px;line-height:1.6}
.form-btn{background:var(--g);color:#fff;border:none;padding:1.05rem 1.5rem;
  border-radius:var(--ra);font-size:16px;font-weight:700;cursor:pointer;
  width:100%;transition:background .15s;letter-spacing:-.01em;margin-top:.25rem}
.form-btn:hover{background:var(--gdk)}
.form-btn:disabled{opacity:.8;cursor:not-allowed}
.form-privacy{font-size:13px;color:var(--tx3);text-align:center;
  margin-top:.875rem;line-height:1.6}

/* ── FOOTER ── */
footer{background:var(--surf);border-top:1px solid var(--bd);padding:2.75rem 0}
.footer-inner{display:flex;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;gap:1.75rem}
.footer-brand-name{font-size:16px;font-weight:800;color:var(--tx);margin-bottom:5px}
.footer-brand-name span{color:var(--g)}
.footer-tagline{font-size:13px;color:var(--tx3);line-height:1.6}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap}
.footer-links a{font-size:14px;color:var(--tx2);text-decoration:none;
  font-weight:500;transition:color .15s}
.footer-links a:hover{color:var(--tx)}
.footer-copy{width:100%;font-size:13px;color:var(--tx3);
  padding-top:1.5rem;border-top:1px solid var(--bd);margin-top:.5rem}

/* ── HERO MOCK WRAP (3-layer mockup) ── */
.hero-mock-wrap{position:relative;height:400px;flex-shrink:0}
@media(max-width:860px){.hero-mock-wrap{display:none}}

/* ── ADAPTA GRID (callout checklist) ── */
.adapta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .875rem;margin-top:1rem}
.adapta-item{display:flex;align-items:center;gap:.5rem;font-size:14px;font-weight:600;color:var(--gdk)}
.adapta-check{color:var(--g);font-weight:800;font-size:15px}

/* ── STICKY CTA MOBILE ── */
#sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--bd);padding:.875rem 1.25rem;
  transform:translateY(100%);opacity:0;pointer-events:none;
  transition:transform .25s ease,opacity .25s ease}
@media(max-width:768px){
  #sticky-cta{display:block !important}
  body{padding-bottom:72px}
}