:root{
  --yellow:#FFCC00;--green:#2E8B57;--brown:#6B4C3B;--white:#fff;--text:#1f2937;--muted:#6b7280;--max:1200px;
  --ok-bg:#ecfeff;--ok-text:#134e4a;--ok-border:#99f6e4;
  --err-bg:#ffeeee;--err-text:#7f1d1d;--err-border:#fecaca;
  --focus:#0ea5e9;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#fafafa;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:var(--green);text-decoration:none}
a:hover{opacity:.9}
.wrap{max-width:var(--max);margin:0 auto;padding:16px}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header / Nav */
.header{background:var(--white);border-bottom:1px solid #eee;position:sticky;top:0;z-index:100}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;min-height:56px}
.brand img{height:44px;width:auto}
.company{font-weight:800;color:var(--green);letter-spacing:.2px;white-space:nowrap}

/* Botón hamburguesa (móvil) */
.menu-toggle{display:none;appearance:none;border:0;background:transparent;cursor:pointer;padding:8px;border-radius:8px}
.menu-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.menu-toggle .bar{display:block;width:24px;height:2px;background:#111;margin:5px 0;border-radius:2px;transition:transform .2s ease, opacity .2s ease}

/* Nav links */
.top-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top-links a{font-weight:600;color:var(--text);padding:6px 8px;border-radius:8px}
.top-links a:hover,.top-links a:focus-visible{background:#f1f5f9;outline:2px solid transparent}
.nav-cta{display:none}
.call{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.call a{color:var(--brown);font-weight:700}

/* Hero + Carousel */
.hero{background:linear-gradient(180deg,#fff,#f5fff6);padding:28px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
h1{font-size:clamp(28px,4vw,40px);margin:0 0 10px}
.lead{color:#334155;margin:0 0 18px}
.carousel{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.track{display:flex;will-change:transform;transition:transform .5s ease}
.slide{min-width:100%}
.carousel .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid #fff;cursor:pointer}
.dot.active{background:var(--yellow)}

/* Buttons */
.btn{display:inline-block;background:var(--yellow);color:var(--brown);padding:12px 16px;border-radius:10px;font-weight:800;border:2px solid transparent;transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn.ghost{background:transparent;border:2px solid var(--green);color:var(--green)}
.btn.ghost:hover{background:rgba(46,139,87,.08)}
.btn[disabled],.btn.disabled{opacity:.6;pointer-events:none}

/* Sections / Cards */
.section{padding:28px 0}
.section h2{margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.05);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card h3{margin:0 0 8px}
.card p{color:var(--muted);margin:0 0 10px}
.card .actions{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;background:#f1f5f9;color:#0f172a;padding:4px 8px;border-radius:6px}

/* Info blocks */
.info{background:#fffef6;border:1px solid #f3e8c2;border-radius:12px;padding:16px}
.info h3{margin:8px 0}
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.download{display:inline-flex;align-items:center;gap:8px;margin-top:8px}

/* CTA Highlight */
.cta-highlight{background:linear-gradient(180deg,var(--green),var(--brown));color:var(--white);padding:50px 20px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.15);margin:40px 0;text-align:center}
.cta-highlight h2{margin:0 0 10px;font-size:clamp(24px,3vw,34px);font-weight:800}
.cta-highlight .lead{font-size:1.1rem;margin-bottom:20px;color:#f1f5f9}
.cta-highlight .btn{margin:5px 10px}

/* Forms */
.form label{display:block;margin:8px 0;font-weight:600}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.form input,.form textarea,.form select{
  width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;transition:border-color .15s ease, box-shadow .15s ease
}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(14,165,233,.2)
}
.form input:invalid,.form textarea:invalid{border-color:#fca5a5}
.form .small{color:var(--muted);font-size:12px}
.form .actions{display:flex;gap:10px;align-items:center;margin-top:10px}

/* Inline feedback */
.alert{margin-top:10px;padding:10px;border-radius:8px;border:1px solid transparent;display:inline-block}
.alert.ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border)}
.alert.err{background:var(--err-bg);color:var(--err-text);border-color:var(--err-border)}

/* Gallery */
.grid-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px}
figure.card{margin:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.05);transition:transform .2s ease, box-shadow .2s ease}
figure.card:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
figure.card img{width:100%;height:220px;object-fit:cover;display:block}
figure.card figcaption{padding:10px 12px;font-size:.95rem;display:flex;justify-content:space-between;align-items:center;gap:8px}
.chip{background:#f1f5f9;border-radius:999px;padding:4px 10px;font-size:.75rem;color:#0f172a;white-space:nowrap;font-weight:600}
.fig-actions .btn{padding:6px 10px;font-size:.8rem;border-radius:8px}

/* Footer */
.footer{background:#0b0f0d;color:#d1d5db;padding:18px 0;margin-top:30px}
.footer a{color:#e5e7eb}
.footer .inner{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.footer .company{font-weight:800;color:#fff;text-align:center;width:100%;margin-top:8px}

/* ===== Responsive ===== */

/* Móvil primero: oculta nombre y teléfonos del header; muestra hamburguesa y nav como panel */
.show-desktop{display:none}
.menu-toggle{display:inline-flex}
.top-links{
  position:fixed; top:64px; right:12px; left:12px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:none; flex-direction:column; gap:8px;
}
.top-links[data-state="open"]{display:flex}
.top-links a{padding:10px 12px}
.nav-cta{display:block; margin-top:4px}
.call{display:none}

/* Tablet / Desktop */
@media (min-width:900px){
  .show-desktop{display:inline}
  .menu-toggle{display:none}
  .top-links{
    position:static; display:flex; background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; flex-direction:row; gap:14px;
  }
  .nav-cta{display:none}
  .call{display:flex}
  .hero-grid{grid-template-columns:1.1fr .9fr}
}

/* Ajustes grid y gallery en pantallas pequeñas */
@media (max-width:768px){
  .hero-grid{grid-template-columns:1fr}
  figure.card img{height:160px}
  figure.card figcaption{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Accesibilidad */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}