/* ============================================================
   ARAUZA INDUSTRIAL — paginas.css
   Páginas de líneas, servicios, legales y 404 (v2).
   Complementa tokens.css + base.css; no redefine componentes.
   ============================================================ */

/* ---- Héroe interior ---- */
.page-hero{
  position:relative;overflow:hidden;
  padding:72px 0 54px;
  background:
    radial-gradient(860px 420px at 14% -12%,rgba(178,106,60,.16),transparent 62%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1b));
  border-bottom:1px solid var(--line-soft);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(211,138,85,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(211,138,85,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(720px 420px at 22% 0%,#000,transparent 78%);
  mask-image:radial-gradient(720px 420px at 22% 0%,#000,transparent 78%);
}
.page-hero__inner{position:relative;max-width:840px}
.page-hero h1{margin-bottom:.35em}
.page-hero .lead{color:var(--muted);font-size:1.12rem;max-width:680px}

/* Fila de anclas por categoría */
.anchor-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;position:relative}
.anchor-nav .chip{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;padding:8px 14px}
a.chip:hover{border-color:var(--copper-live);color:var(--copper-hot)}

/* ---- Secciones de categoría ---- */
.cat-section{padding:var(--sp-5) 0;scroll-margin-top:calc(var(--header-h) + 14px)}
.cat-section + .cat-section{border-top:1px solid var(--line-soft)}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.cat-head h2{margin:0}
.cat-head .intro{color:var(--muted);max-width:660px;margin:10px 0 0}
.cat-link{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;white-space:nowrap;padding-bottom:4px}

/* ---- Grid de producto ---- */
.pgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.pgrid .empty{grid-column:1/-1;font-family:var(--mono);color:var(--faint);font-size:.85rem}
.pcardx{
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.pcardx:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.pcardx__img{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:#F1ECE4;padding:16px;
}
.pcardx__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pcardx__img.noimg{background:linear-gradient(180deg,var(--bg-4),var(--bg-3))}
.pcardx__img.noimg::after{content:"⚡";font-size:1.7rem;opacity:.3}
.pcardx__body{display:flex;flex-direction:column;gap:7px;padding:16px 16px 18px;flex:1}
.pcardx__brand{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-live);margin:0}
.pcardx__name{font-size:.93rem;font-weight:600;line-height:1.4;margin:0;letter-spacing:0}
.pcardx__name a{
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pcardx__name a:hover{color:var(--copper-hot)}
.pcardx__meta{font-family:var(--mono);font-size:.7rem;color:var(--faint);margin:0}
.pcardx__price{font-family:var(--font-d);font-weight:800;font-size:1.14rem;color:var(--gold);margin:auto 0 0;padding-top:8px}
.pcardx__price .iva{font-family:var(--mono);font-weight:400;font-size:.62rem;color:var(--faint);letter-spacing:.08em}
.pcardx__price--locked{font-family:var(--font-b);font-weight:600;font-size:.84rem}
.pcardx__price--locked a{color:var(--amber)}
.pcardx__price--locked a:hover{color:var(--gold)}
.pcardx__actions{display:flex;gap:8px;margin-top:12px}
.pcardx__actions .btn{flex:1}

/* ---- Callout cruzado entre líneas ---- */
.crossline{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  border:1px dashed var(--line-strong);border-radius:var(--r-md);
  padding:20px 22px;background:rgba(178,106,60,.05);margin-top:36px;
}
.crossline p{margin:0;color:var(--ink-dim)}

/* ---- Franja de pasos (integración) ---- */
.mini-steps{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);counter-reset:ms}
@media(max-width:840px){.mini-steps{grid-template-columns:1fr}}
.mini-steps .card{counter-increment:ms;position:relative}
.mini-steps .card::before{
  content:"0" counter(ms);font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
  color:var(--copper-live);display:block;margin-bottom:10px;
}
.mini-steps .card h3{margin-top:0}

/* ---- Panel CTA final ---- */
.cta-panel{
  text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-xl);
  padding:52px 26px;box-shadow:var(--shadow-1);
  background:
    radial-gradient(620px 280px at 50% -30%,rgba(244,169,46,.13),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg-1b));
}
.cta-panel .lead{color:var(--muted);max-width:580px;margin:0 auto 8px}
.cta-panel__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ---- Servicios ---- */
.svc-card .mono-tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);display:block;margin-top:14px;
}
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:center}
.cmp td.ok{color:var(--green-bright);font-weight:700;font-size:1.02rem}
.cmp td.no{color:var(--faint)}
.cmp th .badge{margin-left:8px;vertical-align:middle}
.tbl-note{font-family:var(--mono);font-size:.76rem;color:var(--faint);margin-top:14px}
.wa-chip{cursor:default}
.wa-chip b{color:var(--ink);font-weight:600}

/* ---- Legales ---- */
.legal{max-width:72ch;margin:0 auto}
.legal .updated{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.legal p,.legal li{color:var(--ink-dim)}
.legal strong{color:var(--ink)}
.legal h2{font-size:1.26rem;margin-top:2.4em;scroll-margin-top:calc(var(--header-h) + 18px)}
.legal h2 .anc{
  font-family:var(--mono);font-weight:600;font-size:.85em;color:var(--faint);
  opacity:0;transition:opacity .15s;margin-left:6px;
}
.legal h2:hover .anc,.legal h2 .anc:focus-visible{opacity:1;color:var(--copper-live)}
.legal ul,.legal ol{padding-left:1.25em;margin:0 0 1em}
.legal li{margin:.4em 0}
.legal .box{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);padding:18px 22px;margin:1.5em 0}
.legal .box p:last-child{margin-bottom:0}
.legal .toc{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0 0;padding:0;list-style:none}
.legal .toc li{margin:0}
.legal .toc a{
  font-family:var(--mono);font-size:.74rem;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;color:var(--muted);display:inline-block;
}
.legal .toc a:hover{border-color:var(--copper-live);color:var(--copper-hot)}
.legal table{min-width:560px}

/* ---- 404 ---- */
.nf{min-height:calc(100vh - var(--header-h) - 260px);display:flex;align-items:center;text-align:center;padding:70px 0}
.nf__inner{margin:0 auto;max-width:580px}
.nf__code{
  font-family:var(--mono);font-weight:700;font-size:clamp(4.6rem,17vw,9rem);line-height:1;
  letter-spacing:.04em;margin:0 0 6px;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf__lbl{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-live);margin:0 0 18px}
.nf h1{font-size:clamp(1.6rem,4.2vw,2.3rem)}
.nf p{color:var(--muted)}
.nf__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

@media(max-width:640px){
  .page-hero{padding:56px 0 44px}
  .cat-head{flex-direction:column;align-items:flex-start}
}