/* =====================================================================
   Catálogo de maquinaria de jardín — hoja de estilo única
   Sin dependencias externas: carga rápida y nada que se rompa.
   ===================================================================== */

:root{
  --green-900:#14301f;
  --green-700:#1f5637;
  --green-600:#2a7048;
  --green-100:#e4efe7;
  --green-50:#f2f7f3;

  --ink:#1a1f1c;
  --ink-2:#4c5750;
  --ink-3:#78837c;
  --rule:#dfe2dc;
  --rule-2:#edefe9;
  --paper:#ffffff;
  --ground:#f6f7f3;

  --amber:#a8621d;
  --red:#a32828;
  --red-bg:#fbeceb;

  --radius:6px;
  --shadow:0 1px 2px rgba(20,48,31,.06), 0 4px 14px rgba(20,48,31,.06);
  --wrap:1180px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--green-700)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(1.75rem,3.6vw,2.5rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
h3{font-size:1.05rem}
p{margin:0 0 1em}

:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:720px}
.section{padding:44px 20px 56px}
.sec-title{margin-bottom:22px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--paper);padding:10px 14px;border-radius:var(--radius)}

/* ---------- botones ---------- */
.btn{
  display:inline-block;
  background:var(--green-700);
  color:#fff;
  padding:11px 20px;
  border:1px solid var(--green-700);
  border-radius:var(--radius);
  font-size:.94rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--green-900);border-color:var(--green-900)}
.btn-ghost{background:transparent;color:var(--green-700)}
.btn-ghost:hover{background:var(--green-100);color:var(--green-900)}
.btn-sm{padding:8px 14px;font-size:.86rem}

/* ---------- barra de sugerencia de idioma ---------- */
.suggest{
  background:var(--green-900);
  color:#e8f0ea;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 20px;
  font-size:.9rem;
}
.suggest p{margin:0;flex:1 1 auto;min-width:200px}
.suggest-go{
  color:#fff;text-decoration:underline;font-weight:600;
}
.suggest-close{
  background:none;border:1px solid rgba(255,255,255,.35);
  color:#cfdcd3;border-radius:4px;padding:4px 10px;
  font:inherit;font-size:.84rem;cursor:pointer;
}
.suggest-close:hover{border-color:#fff;color:#fff}

/* ---------- cabecera ---------- */
.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:40;
}
.bar{
  max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:18px;min-height:66px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.logo-mark{
  width:24px;height:24px;flex:none;border-radius:5px;
  background:linear-gradient(140deg,var(--green-600),var(--green-900));
}
.logo-text{font-size:1.02rem;letter-spacing:-.01em}

.nav{display:flex;align-items:center;gap:16px;margin-left:auto;flex-wrap:wrap}
.nav-list{list-style:none;display:flex;gap:16px;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{
  text-decoration:none;color:var(--ink-2);font-size:.9rem;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav-list a:hover{color:var(--green-700);border-bottom-color:var(--green-600)}

.nav-search{display:flex;align-items:center;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.nav-search input{border:0;padding:7px 10px;font:inherit;font-size:.87rem;width:170px;background:var(--ground)}
.nav-search input:focus{outline:none;background:#fff}
.nav-search button{
  border:0;background:var(--ground);color:var(--ink-2);
  padding:7px 10px;cursor:pointer;display:flex;align-items:center;
}
.nav-search button:hover{color:var(--green-700)}

.nav-toggle,.nav-burger{display:none}

/* ---------- selector de idioma ---------- */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--rule);border-radius:var(--radius);
  padding:7px 10px;font:inherit;font-size:.84rem;font-weight:600;
  color:var(--ink-2);cursor:pointer;
}
.lang-btn:hover{border-color:var(--green-600);color:var(--green-700)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:50;
  list-style:none;margin:0;padding:6px;min-width:170px;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.lang-menu a{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:4px;
  text-decoration:none;color:var(--ink);font-size:.9rem;
}
.lang-menu a:hover{background:var(--green-50)}
.lang-menu a[aria-current]{background:var(--green-100);font-weight:600}
.lang-code{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink-3);width:22px;flex:none;
}

/* ---------- hero ---------- */
.hero{
  background:var(--green-900);
  color:#e9f1ec;
  padding:64px 0 68px;
}
.hero-in{max-width:820px}
.hero h1{color:#fff;margin-bottom:.4em}
.hero-text{font-size:1.1rem;color:#c3d4c9;max-width:60ch;margin-bottom:1.6em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.hero .btn-ghost{color:#e9f1ec;border-color:rgba(255,255,255,.4)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- categorías ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.cat{
  display:block;padding:20px;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);transition:border-color .15s,box-shadow .15s;
}
.cat:hover{border-color:var(--green-600);box-shadow:var(--shadow)}
.cat h3{margin-bottom:.35em;color:var(--green-900)}
.cat p{font-size:.9rem;color:var(--ink-2);margin-bottom:.7em}
.cat-count{font-size:.8rem;color:var(--ink-3);font-weight:600}

/* ---------- rejilla de productos ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.card:hover{border-color:var(--green-600);box-shadow:var(--shadow)}
.card-img{display:block;aspect-ratio:4/3;background:var(--ground);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#b7c2ba;background:var(--ground);
}
.ph-lg{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--rule)}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-brand{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.card-title{margin:0;font-size:1rem}
.card-title a{color:var(--ink);text-decoration:none}
.card-title a:hover{color:var(--green-700)}
.card-text{font-size:.86rem;color:var(--ink-2);margin:0;flex:1}
.card-price{margin:0;font-weight:700;color:var(--green-700);font-size:.95rem}

/* ---------- páginas internas ---------- */
.crumbs{font-size:.85rem;color:var(--ink-3);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--green-700);text-decoration:underline}

.page-head{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.page-lead{font-size:1.05rem;color:var(--ink-2);max-width:62ch;margin-bottom:.5em}
.page-meta{font-size:.85rem;color:var(--ink-3);margin:0}
.empty{color:var(--ink-3);padding:34px 0}

/* ---------- ficha de producto ---------- */
.prod{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:14px}
@media (min-width:820px){.prod{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px}}
.prod-media img{border:1px solid var(--rule);border-radius:var(--radius);width:100%}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs img{width:84px;height:64px;object-fit:cover;border:1px solid var(--rule);border-radius:4px}
.prod-brand{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.prod-info h1{margin-top:.25em}
.prod-lead{font-size:1.05rem;color:var(--ink-2)}
.prod-price{font-size:1.5rem;font-weight:700;color:var(--green-700);margin:.6em 0 .1em}
.prod-pricenote{font-size:.82rem;color:var(--ink-3);margin-bottom:1.2em}
.prod-cta{margin:1.2em 0}
.prod-ref{display:flex;gap:8px;font-size:.85rem;color:var(--ink-3);margin:0;padding-top:14px;border-top:1px solid var(--rule-2)}
.prod-ref dt{font-weight:600}
.prod-ref dd{margin:0}

.prod-block{margin-top:44px}
.prod-block h2{padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.prose{max-width:70ch;color:var(--ink-2)}
.prose p{margin-bottom:1em}

.tablewrap{overflow-x:auto}
.specs{border-collapse:collapse;width:100%;max-width:640px;font-size:.92rem}
.specs th,.specs td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule-2)}
.specs th{font-weight:600;color:var(--ink-2);width:52%}
.specs td{font-variant-numeric:tabular-nums;color:var(--ink)}
.specs tr:nth-child(odd){background:var(--green-50)}

/* ---------- banda ---------- */
.band{background:var(--ground);border-top:1px solid var(--rule);padding:48px 0 54px;margin-top:20px}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.why-item h3{color:var(--green-900)}
.why-item p{font-size:.92rem;color:var(--ink-2);margin:0}

/* ---------- formularios ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
  width:100%;padding:10px 12px;font:inherit;font-size:.95rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100)}
.field [aria-invalid]{border-color:var(--red)}
.field textarea{resize:vertical;min-height:120px}
.row2{display:grid;grid-template-columns:1fr;gap:0 18px}
@media (min-width:620px){.row2{grid-template-columns:1fr 1fr}}
.req{color:var(--red)}
.hint{font-size:.82rem;color:var(--ink-3);margin:6px 0 0}
.err{font-size:.84rem;color:var(--red);margin:6px 0 0}
.check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--ink-2)}
.check input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--green-700)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{background:var(--red-bg);border:1px solid #e7c4c1;color:#7d1f1f;padding:12px 14px;border-radius:var(--radius);font-size:.92rem}
.ok-box{padding:36px 0}
.ok-box h1{color:var(--green-900)}

.quote-item{
  background:var(--green-50);border:1px solid var(--green-100);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:24px;
  display:flex;flex-direction:column;gap:2px;
}
.quote-item-label{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-700)}
.quote-item-sku{font-size:.82rem;color:var(--ink-3)}

.search-big{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.search-big input{
  flex:1 1 260px;padding:11px 14px;font:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);
}
.search-big input:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100)}

/* ---------- pie ---------- */
.site-foot{background:var(--green-900);color:#b9cabf;margin-top:20px;padding:34px 0}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:10px;color:#fff}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.foot-nav a{color:#b9cabf;text-decoration:none;font-size:.88rem}
.foot-nav a:hover{color:#fff;text-decoration:underline}
.foot-copy{width:100%;margin:0;font-size:.82rem;color:#8da09a}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .nav-burger{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-left:auto;cursor:pointer;
    border:1px solid var(--rule);border-radius:var(--radius);
  }
  .nav-burger span,.nav-burger span::before,.nav-burger span::after{
    content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;
  }
  .nav-burger span::before{position:absolute;top:-6px}
  .nav-burger span::after{position:absolute;top:6px}
  .nav{
    display:none;order:3;width:100%;
    flex-direction:column;align-items:stretch;gap:12px;
    padding:14px 0 20px;border-top:1px solid var(--rule);
  }
  .nav-toggle:checked ~ .nav{display:flex}
  .nav-list{flex-direction:column;gap:0}
  .nav-list a{display:block;padding:9px 0;border-bottom:1px solid var(--rule-2)}
  .nav-search input{width:100%}
  .nav-search{width:100%}
  .lang-menu{right:auto;left:0}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}