/* styles.css — Industrial Depot (Spanish site) */

/* ===== CSS Variables (Theme) ===== */
:root{
  --bg: #0b1020;
  --card: #121a33;
  --ink: #e6edf6;
  --muted: #9fb0d3;
  --accent: #4A90E2;      /* Cyber Blue */
  --accent-2:#efb03d;     /* Axiom Caramel */
  --ok:#70aa40;           /* Botanical Green */
  --soft:#111628;
  --border: #223055;
  --shadow: 0 8px 28px rgba(0,0,0,.25);
  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1200px;
}

/* ===== Base / Reset ===== */
*{ box-sizing:border-box }
html, body{ height:100% }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #1b2a55 0%, rgba(27,42,85,0) 60%),
    radial-gradient(900px 500px at -10% 20%, #17305a 0%, rgba(23,48,90,0) 60%),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.55;
}
img, picture, video, canvas, svg{ display:block; max-width:100% }
a{ color:var(--ink); text-decoration:none }
a:hover{ color:var(--accent) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 16px }

/* ===== Header / Nav ===== */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(to bottom, rgba(11,16,32,.9), rgba(11,16,32,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px }
.brand .logo{
  width:40px; height:40px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:inline-grid; place-items:center; color:#0b1020; font-weight:900;
  box-shadow: var(--shadow);
}
.brand span{ font-size:18px }

.links{ display:flex; flex-wrap:wrap; gap:10px }
.links a{ padding:8px 12px; border-radius:10px; border:1px solid transparent }
.links a[aria-current="page"]{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.04) }

.cta{ display:flex; gap:8px }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(180deg, #15203c, #0f1830);
  color:var(--ink); box-shadow: var(--shadow);
  transition: transform .06s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn--accent{
  border-color:transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#0b1020; font-weight:700;
}

/* ===== Hero (Home) ===== */
.hero{ padding:64px 0 36px }
.hero__wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
}
.hero__card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow);
}
h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.05; margin:0 0 12px }
.lead{ font-size: clamp(16px, 2.1vw, 18px); color:var(--muted); margin:0 0 18px }
.hero__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:10px }
.pill{
  border:1px solid var(--border); padding:10px 12px; border-radius:12px; background:var(--soft);
  display:flex; align-items:center; gap:10px; color:var(--muted)
}
.stat{
  display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
}
.stat b{ font-size:22px }
.illu{
  aspect-ratio: 16/11;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120px 120px at 20% 40%, rgba(239,176,61,.35), transparent 60%),
    radial-gradient(120px 120px at 70% 30%, rgba(74,144,226,.35), transparent 60%),
    linear-gradient(180deg, #0e1730, #0b1124);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  display:grid; place-items:center; color:var(--muted); font-size:14px;
}

/* ===== Sections / Cards / Grids ===== */
.section{ padding:26px 0 60px }
.grid-3{ display:grid; gap:16px; grid-template-columns:repeat(3, minmax(0,1fr)) }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px; min-height:160px;
}
.card h3{ margin:2px 0 6px; font-size:18px }
.card p{ margin:0; color:var(--muted) }
.card .go{ margin-top:auto; display:inline-flex; gap:8px; align-items:center }

/* ===== Catalog (Cobots & Robots) ===== */
main{ padding:32px 0 60px }
h1.page{ font-size: clamp(26px, 4vw, 40px); line-height:1.1; margin:0 0 6px }
.lead-page{ color:var(--muted); margin:0 0 20px }

.thumb{
  width:100%; aspect-ratio: 4/3; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center;
  background:
    radial-gradient(120px 120px at 20% 40%, rgba(239,176,61,.35), transparent 60%),
    radial-gradient(120px 120px at 70% 30%, rgba(74,144,226,.35), transparent 60%),
    linear-gradient(180deg, #0e1730, #0b1124);
  color:var(--muted); font-size:12px;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }

.title{ font-weight:700; font-size:18px; letter-spacing:.2px }
.params{ display:grid; grid-template-columns: 1fr 1fr; gap:8px }
.param{ background:var(--soft); border:1px solid var(--border); border-radius:10px; padding:8px }
.param b{ display:block; font-size:12px; color:var(--muted); margin-bottom:2px }
.param span{ font-size:14px }
.note{ color:var(--muted); font-size:12px }

/* ===== Footer ===== */
footer{
  border-top:1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:24px 0; color:var(--muted); font-size:14px;
}
footer a{ color:var(--muted) }
footer a:hover{ color:var(--ink) }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero__wrap{ grid-template-columns:1fr; gap:16px }
  .grid-3{ grid-template-columns:1fr }
  .links{ display:none } /* simplify header on mobile */
}
@media (max-width: 600px){
  .params{ grid-template-columns:1fr }
}