/* ============================================================ DUALTIC — INDUSTRIAS (industrias.php) · mismo lenguaje que home.css Página propia, sin Bootstrap (como el home). Reutiliza los tokens de brand.css (--coral, --ink, --bg, --dark, --line, --sh-*, fuentes) y los componentes de marca ya cargados en todas las páginas (.btn-primario/.btn-secundario, .site-header, .site-footer). Contenido: catálogo completo de industrias, agrupado por categoría en una grilla tipo bento (columnas de altura variable = masonry real, sin librería) para no repetir la misma fila una y otra vez. ============================================================ */ :root{ --tinta-70:rgba(20,20,20,.72); --tinta-45:rgba(20,20,20,.45); } /* Reset global (como home.css): sin Bootstrap en esta página, el header/footer compartidos (fuera de .industrias-page) también necesitan box-sizing:border-box para que su padding no rompa el ancho del nav/footer, y un reset de (margin:0 + background + font-family) — si no, el margen por defecto de 8px del navegador deja ver el blanco de fondo como un marco alrededor de toda la página, y elementos como .footer-col a (que en brand.css no fija su propia fuente) heredan el serif por defecto en vez de Hanken Grotesk. */ *{box-sizing:border-box} body.color{margin:0;background:var(--bg);font-family:var(--font-base);overflow-x:hidden} .industrias-page{background:var(--bg);color:var(--ink);font-family:var(--font-base);overflow-x:hidden} .industrias-page h1,.industrias-page h2{margin:0;font-family:var(--font-display)} .industrias-page p{margin:0} /* 1440px + clamp(16px,4vw,48px): mismo ancho y padding que .wrap del home y .shell-wrap del navbar/footer (brand.css) */ .ind-wrap{max-width:1440px;margin-inline:auto;padding-inline:clamp(1rem,4vw,3rem)} /* ---------- hero ---------- */ .ind-hero{padding:clamp(48px,7vw,84px) 0 clamp(28px,4vw,44px)} .ind-hero .pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono); font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink); background:var(--white);border:1px solid var(--line-strong);padding:.5rem .85rem; border-radius:var(--r-pill);box-shadow:var(--sh-sm);margin-bottom:1.4rem} .ind-hero .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--coral); box-shadow:0 0 0 0 rgba(237,111,92,.45);animation:ind-beat 2.4s var(--ease) infinite} @keyframes ind-beat{0%{box-shadow:0 0 0 0 rgba(237,111,92,.45)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} .ind-hero h1{font-weight:800;font-size:clamp(32px,5vw,58px);line-height:1.04;letter-spacing:-0.03em; max-width:16ch;text-wrap:balance;margin-bottom:1rem} .ind-hero p{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--tinta-70); max-width:56ch;text-wrap:pretty} /* ---------- salto rápido por categoría ---------- */ .ind-jump{padding:0 0 clamp(28px,4vw,40px)} .ind-jump-row{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:thin} .ind-jump-row::-webkit-scrollbar{height:5px} .ind-jump-row::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px} .ind-jump-pill{flex:none;display:inline-flex;align-items:center;gap:.4rem; font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink); background:var(--white);border:1px solid var(--line-strong);border-radius:var(--r-pill); padding:.5rem .95rem;text-decoration:none;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)} .ind-jump-pill:hover{background:var(--coral);transform:translateY(-2px);box-shadow:var(--sh-sm);color:var(--ink);text-decoration:none} .ind-jump-pill .n{font-family:var(--font-mono);font-size:.7rem;color:var(--tinta-45)} .ind-jump-pill:hover .n{color:var(--ink)} /* ---------- grilla bento (masonry por columnas, sin JS) ---------- */ .ind-grid-section{padding:0 0 clamp(48px,6vw,72px)} .ind-bento{column-count:4;column-gap:16px} .ind-card{break-inside:avoid;margin:0 0 16px;background:var(--white);border:1px solid var(--line); border-radius:var(--r-card);padding:22px 24px;box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} .ind-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)} .ind-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)} .ind-card-head h2{font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;line-height:1.25} .ind-count{flex:none;font-family:var(--font-mono);font-size:.72rem;color:var(--tinta-45)} .ind-tags{display:flex;flex-wrap:wrap;gap:.5rem} .ind-tag{font-family:var(--font-mono);font-size:.76rem;color:var(--ink);background:var(--bg); border:1px solid var(--line);border-radius:var(--r-pill);padding:.32rem .7rem;line-height:1.2} /* entrada al hacer scroll (usa .reveal + brand.js, que ya observa .reveal en todas las páginas) */ .industrias-page .reveal{opacity:0;transform:translateY(14px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .industrias-page .reveal.in{opacity:1;transform:none} @media(max-width:1300px){.ind-bento{column-count:3}} @media(max-width:1024px){.ind-bento{column-count:2}} @media(max-width:640px){ .ind-bento{column-count:1} .ind-hero h1{max-width:none} } /* ---------- CTA final (banda oscura, mismo patrón que el home) ---------- */ .ind-cta{background:var(--dark);position:relative;overflow:hidden;padding:clamp(48px,7vw,80px) 0; margin-top:clamp(8px,2vw,16px)} .ind-cta::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 120% at 50% 0%,rgba(237,111,92,.22),transparent 60%)} .ind-cta-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center; text-align:center;gap:14px} .ind-cta h2{color:var(--white);font-weight:800;font-size:clamp(26px,3.6vw,42px); letter-spacing:-0.02em;line-height:1.1;max-width:22ch;text-wrap:balance} .ind-cta p{color:var(--on-dark-muted);font-size:1rem;line-height:1.6;max-width:48ch;margin-bottom:8px} @media (prefers-reduced-motion:reduce){ .industrias-page *{animation:none!important;transition-duration:.01ms!important} }