/* ============================================================
   MATERIALION — Sistema visual
   Marca: charcoal #272D31 · navy #203F58 · acero #4D7297
   Tipografía: Helvetica (marca) + IBM Plex Mono (datos técnicos)
   ============================================================ */

:root{
  --ink:#272D31;        /* charcoal principal del logo */
  --ink-80:#3a4147;
  --navy:#203F58;       /* azul acero profundo */
  --steel:#4D7297;      /* azul acero medio (acento) */
  --steel-12:rgba(77,114,151,.12);
  --steel-20:rgba(77,114,151,.22);
  --paper:#F1F2F4;      /* fondo frío industrial */
  --paper-2:#FBFBFC;
  --white:#FFFFFF;
  --line:rgba(39,45,49,.13);
  --line-2:rgba(39,45,49,.08);
  --muted:#6c747b;
  --ok:#2f7d54;
  --warn:#b4541f;
  --whats:#1f8a4c;

  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,monospace;

  --maxw:1240px;
  --r:3px;            /* esquinas casi rectas, lenguaje "acero" */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}

/* ---------- Tipografía utilitaria ---------- */
.mono{font-family:var(--mono)}
.kicker{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel);font-weight:500;
}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
h1,h2,h3,h4{font-weight:700;line-height:1.06;letter-spacing:-.01em}
.display{
  font-weight:700;letter-spacing:-.02em;line-height:1.0;
  font-size:clamp(38px,5.6vw,68px);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section{padding:84px 0}
.tight{padding:60px 0}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:14px 22px;border-radius:var(--r);
  transition:transform .12s ease, background .18s ease, color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#171b1f}
.btn-steel{background:var(--steel);color:#fff}
.btn-steel:hover{background:#3f628a}
.btn-whats{background:var(--whats);color:#fff}
.btn-whats:hover{background:#19763f}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-line{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn-sm{padding:10px 16px;font-size:13.5px}
.btn-lg{padding:17px 28px;font-size:16px}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(251,251,252,.86);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-bar{display:flex;align-items:center;gap:26px;height:72px}
.head-logo img{height:30px;width:auto}
.head-nav{display:flex;align-items:center;gap:28px;margin-left:8px}
.head-nav a{
  font-size:14px;font-weight:600;color:var(--ink-80);
  padding:6px 0;position:relative;
}
.head-nav a:hover{color:var(--ink)}
.head-nav a.active{color:var(--ink)}
.head-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--steel);
}
.head-spacer{flex:1}
.head-search{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:8px 12px;min-width:210px;color:var(--muted);
}
.head-search input{border:none;outline:none;font-size:14px;width:100%;color:var(--ink);background:transparent}
.head-cta{display:flex;align-items:center;gap:12px}
.head-burger{display:none}

/* topbar mini */
.topbar{
  background:var(--ink);color:#cfd4d8;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:34px}
.topbar a{color:#cfd4d8}
.topbar a:hover{color:#fff}
.topbar .tb-right{margin-left:auto;display:flex;gap:22px;align-items:center}
.tb-dot{width:6px;height:6px;border-radius:50%;background:var(--whats);display:inline-block;margin-right:7px;vertical-align:middle}

/* ---------- Fotos de producto reales (fondo blanco) ---------- */
.pimg{background:linear-gradient(165deg,#fafbfc,#eceef1);position:relative;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pimg.contain img{object-fit:contain;padding:6%}
.pimg .ph-label{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.forma-badge{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);padding:4px 8px;border-radius:2px;border:1px solid var(--line)}

/* ---------- Hexágono / placeholders ---------- */
.hex{clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%)}
.metal-ph{
  position:relative;overflow:hidden;background:#2b323a;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 11px),
    linear-gradient(160deg,#323a43,#222931);
}
.metal-ph .ph-label{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:rgba(255,255,255,.62);text-transform:lowercase;
}
.metal-light{
  background:#e7e9ec;
  background-image:
    repeating-linear-gradient(135deg, rgba(39,45,49,.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg,#eef0f2,#dfe3e7);
}
.metal-light .ph-label{color:var(--muted)}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:#aeb5bb;padding:64px 0 30px}
.site-foot a{color:#aeb5bb}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.foot-logo img{height:30px;margin-bottom:18px}
.foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#717a81;margin-bottom:16px}
.foot-list{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:11.5px;color:#717a81;
}
.foot-bottom .fb-right{margin-left:auto;display:flex;gap:22px}

/* ---------- Chips / tags ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);background:var(--steel-12);
  padding:5px 9px;border-radius:2px;font-weight:500;
}
.tag-ink{color:#cdd4da;background:rgba(255,255,255,.08)}

/* ---------- Cards genéricas ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .head-search{display:none}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  .section{padding:56px 0}
  .head-nav{display:none}
  .topbar{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}