/* Color firma: "Verde Chupillon" (#8FD3A4) */
:root{
  --firma:#8FD3A4; --firma-ink:#12301F;
  --deep:#1C3A2B; --deep-ink:#E9F4E5; --deep-muted:#A9C4AE; --deep-line:#2F5341;
  --bg:#EEF5EC; --surface:#FBFDF9; --ink:#17291E; --muted:#4B6352; --line:#D3E3D0;
  --strong:#2F6B45;
  --leaf:#D4ECCB; --maiz:#F5E8AB; --rio:#C8E4E7;
  --display:"Bricolage Grotesque", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --sans:"Figtree", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --deep:#0F2119; --deep-line:#24402F;
    --bg:#13201A; --surface:#1A2B22; --ink:#E3EFE0; --muted:#A6BBA8; --line:#2A3F32;
    --strong:#9FDDB1; --leaf:#26402D; --maiz:#433F22; --rio:#1F3C3C;
  }
}
:root[data-theme="dark"]{
  --deep:#0F2119; --deep-line:#24402F;
  --bg:#13201A; --surface:#1A2B22; --ink:#E3EFE0; --muted:#A6BBA8; --line:#2A3F32;
  --strong:#9FDDB1; --leaf:#26402D; --maiz:#433F22; --rio:#1F3C3C;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none !important}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.6; transition:background .3s,color .3s}
a{color:var(--strong)}
:focus-visible{outline:3px solid var(--firma); outline-offset:3px; border-radius:6px}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}

/* ---------- Barra superior ---------- */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:1.5rem; height:76px}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
.brand svg{width:42px; height:42px; flex-shrink:0}
.brand b{font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; white-space:nowrap}
.links{display:flex; gap:1.75rem; margin:0 auto}
.links a{color:var(--muted); text-decoration:none; font-weight:500; white-space:nowrap}
.links a:hover{color:var(--ink)}
.right{display:flex; align-items:center; gap:.6rem}
.wa{display:inline-flex; align-items:center; gap:.45rem; background:var(--firma); color:var(--firma-ink); font-weight:600; text-decoration:none; padding:.65rem 1.1rem; border-radius:999px; white-space:nowrap}
.wa svg{width:18px; height:18px}
.icon-btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; width:42px; height:42px; cursor:pointer; font-size:1.05rem; display:inline-grid; place-items:center}
.menu-btn{display:none}
@media (max-width:900px){
  .links{display:none; position:absolute; left:0; right:0; top:76px; flex-direction:column; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:.5rem clamp(1.25rem,4vw,2.5rem) 1rem}
  .links.open{display:flex}
  .links a{padding:.8rem 0; border-bottom:1px solid var(--line); font-size:1.05rem}
  .menu-btn{display:inline-grid}
  .right{margin-left:auto}
  .wa-text{display:none}
  .wa{padding:.65rem}
}

/* Botón flotante de WhatsApp (solo celular) */
.wa-float{display:none; position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); z-index:30; width:56px; height:56px; border-radius:50%; background:var(--firma); color:var(--firma-ink); place-items:center; box-shadow:0 6px 18px rgba(18,48,31,.25)}
.wa-float svg{width:26px; height:26px}
@media (max-width:900px){.wa-float{display:grid}}

/* ---------- Portada ---------- */
.hero{padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(2rem,5vw,3.5rem)}
.hero > div{max-width:760px}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 1.1rem}
.hero .lead{font-size:1.15rem; max-width:50ch; margin:0 0 1rem; color:var(--muted)}
.hero .who{margin:0 0 2rem; font-weight:500}
.actions{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{display:inline-block; padding:.9rem 1.4rem; border-radius:14px; font-weight:600; text-decoration:none; border:2px solid var(--ink); color:var(--ink)}
.btn.primary{background:var(--ink); color:var(--bg)}
.portrait{margin:0; justify-self:end; max-width:320px; width:100%}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 40%; border-radius:28px; border:1px solid var(--line)}
.portrait figcaption{margin-top:.75rem; font-size:.9rem; color:var(--muted)}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .portrait{justify-self:start; max-width:240px; order:-1}
}

/* ---------- Secciones ---------- */
section{padding:3.5rem 0; border-top:1px solid var(--line)}
h2{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1; letter-spacing:-.025em; margin:0 0 .75rem}
.intro{color:var(--muted); max-width:60ch; margin:0 0 2rem}

/* Herramientas */
.tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem}
.tab{font:inherit; font-weight:600; padding:.65rem 1.1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.tab[aria-selected="true"]{background:var(--firma); border-color:var(--firma); color:var(--firma-ink)}
.tool{display:grid; grid-template-columns:1fr 1fr; gap:2rem; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:2rem}
.tool[hidden]{display:none}
@media (max-width:700px){.tool{grid-template-columns:1fr; padding:1.4rem}}
.tool h3{grid-column:1/-1; font-family:var(--display); font-weight:700; font-size:1.5rem; margin:0; line-height:1.2}
.tool .what{grid-column:1/-1; margin:-1.25rem 0 0; color:var(--muted)}
label{display:block; font-weight:600; font-size:.95rem; margin:0 0 .35rem}
.hint{display:block; font-weight:400; color:var(--muted); font-size:.85rem}
input{width:100%; font:inherit; padding:.7rem .85rem; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); margin-bottom:1rem}
.results{display:grid; gap:.8rem; align-content:start}
.res{padding:1rem 1.2rem; border-radius:16px; background:var(--bg); border:1px solid var(--line)}
.res span{display:block; color:var(--muted); font-size:.9rem}
.res strong{font-family:var(--display); font-size:1.75rem; font-weight:700; letter-spacing:-.01em}
.verdict{font-size:.95rem; color:var(--muted); margin:0}
.error{color:#B24A34} :root[data-theme="dark"] .error{color:#F2A590}
.after{font-size:.95rem; color:var(--muted); margin:1rem 0 0}

/* Servicios */
.band{display:grid; grid-template-columns:minmax(200px,1fr) 1.8fr; gap:1.75rem; padding:2rem; border-radius:24px; margin-bottom:1rem}
.band.agro{background:var(--leaf)} .band.proy{background:var(--maiz)} .band.inv{background:var(--rio)}
.band h3{font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.1; margin:0 0 .5rem}
.band p{margin:0; opacity:.85}
.band ul{margin:0; padding-left:1.1rem; display:grid; gap:.45rem}
.note{margin-top:1rem !important; font-size:.95rem; border-left:3px solid var(--strong); padding-left:.75rem}
@media (max-width:700px){.band{grid-template-columns:1fr; padding:1.5rem; gap:1rem}}

/* Sobre mí */
.about{display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:760px){.about{grid-template-columns:1fr; gap:1.5rem}}
.about p{max-width:62ch}
.facts{list-style:none; padding:0; margin:0; display:grid; gap:1rem; align-content:start}
.facts li{padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
.facts b{display:block; font-family:var(--display); font-weight:700}
.facts span{color:var(--muted); font-size:.95rem}

/* Contacto */
.contact{background:var(--leaf); border-radius:28px; padding:clamp(2rem,5vw,3rem); display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center}
@media (max-width:760px){.contact{grid-template-columns:1fr}}
.contact p{margin:0}

/* ---------- Pie: redes y ubicación ---------- */
footer{background:var(--deep); color:var(--deep-ink); margin-top:4rem; padding:3.5rem 0 calc(2.5rem + env(safe-area-inset-bottom,0px))}
.foot{display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
footer h2{font-size:1.8rem; color:var(--deep-ink)}
.social{list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem}
.social a{display:inline-block; padding:.45rem .85rem; border:1px solid var(--deep-line); border-radius:999px; color:var(--deep-ink); text-decoration:none; font-size:.92rem}
.social a:hover{border-color:var(--firma); color:var(--firma)}
.place b{display:block; font-family:var(--display); font-size:1.2rem}
.place p{margin:.35rem 0 0; color:var(--deep-muted)}
.legal{grid-column:1/-1; border-top:1px solid var(--deep-line); padding-top:1.5rem; color:var(--deep-muted); font-size:.88rem}

/* ---------- Tarjetas de herramientas ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; display:flex; flex-direction:column; gap:.6rem; padding:1.5rem; border-radius:22px; background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--ink); transition:transform .15s,border-color .15s}
.card:hover,.card:focus-visible{transform:translateY(-3px); border-color:var(--firma); box-shadow:0 12px 28px rgba(18,48,31,.10)}
.card:hover .go{text-decoration:underline; text-underline-offset:3px}
.card.star{background:var(--leaf); border-color:transparent}
.card .num{font-family:var(--display); font-weight:800; font-size:.95rem; color:var(--strong)}
.card h3{font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.15; margin:0}
.card p{margin:0; color:var(--muted); font-size:.98rem}
.card .go{margin-top:auto; font-weight:600; color:var(--strong)}
.crumb{font-size:.92rem; color:var(--muted); margin:0 0 1rem}
.crumb a{color:var(--muted)}
.page-head{padding:3rem 0 1.5rem}
.page-head h1{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1; letter-spacing:-.03em; margin:0 0 .75rem}
.page-head p{color:var(--muted); max-width:62ch; margin:0}
.tool-sec{padding:1rem 0 4rem; border-top:0}
.tool .dl{grid-column:1/-1; display:flex; justify-content:flex-end}
.more{padding:3rem 0 4rem}

/* ---------- Retrato en arco ---------- */
.arco{position:relative; margin:0 0 0 0; isolation:isolate; max-width:300px}
.arco img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:50% 50% 14px 14px / 40% 40% 14px 14px}
.arco::before{content:""; position:absolute; inset:0; transform:translate(12px,12px); border:2px solid var(--firma); border-radius:50% 50% 14px 14px / 40% 40% 14px 14px; z-index:-1}
.arco figcaption{margin-top:1.1rem; font-size:.88rem; color:var(--muted)}
.about .facts{margin-top:1.5rem}
@media (max-width:760px){.arco{max-width:230px}}
/* ---------- Pie de herramientas ---------- */
.tool-foot{margin-top:2.5rem; padding:1.5rem; border:1px solid var(--line); border-radius:18px; background:var(--surface); display:grid; gap:.9rem; font-size:.95rem}
.tool-foot h3{font-family:var(--display); font-weight:700; font-size:1.05rem; margin:0}
.tool-foot p{margin:0; color:var(--muted)}
.tool-foot .cita{font-family:Georgia,"Times New Roman",serif; color:var(--ink); padding-left:1.5rem; text-indent:-1.5rem}