/* Divariatto - diseño plano. Blanco, líneas finas, tipografía geométrica. Tema claro único. */
:root {
  --bg: #ffffff;
  --grey: #f5f5f5;
  --grey-2: #ececec;
  --line: #e2e2e2;
  --ink: #141414;
  --ink-2: #444444;
  --muted: #7a7a7a;
  --primary: #1f5fd6;
  --primary-2: #164ab0;
  --primary-soft: #eaf0fb;
  --accent: #ea4b2c;
  --ok: #1f7a3a;
  --font-head: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --r: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
/* Líneas verticales de retícula a los bordes del contenedor */
body::before, body::after { content: ""; position: fixed; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 0; pointer-events: none; }
body::before { left: max(var(--gutter), calc(50% - var(--wrap) / 2)); }
body::after { right: max(var(--gutter), calc(50% - var(--wrap) / 2)); }
main, .site-footer { position: relative; z-index: 1; }
.site-header { position: relative; z-index: 100; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a, .prose li a, .legal li a, .acc-body a, .faq-intro a, .empty a { color: var(--primary); text-decoration: underline; text-underline-offset: .18em; }
p a:hover, .prose li a:hover, .legal li a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.05; margin: 0 0 .5em; color: var(--ink); text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.1rem; letter-spacing: .03em; }
p { margin: 0 0 1em; }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 40rem; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.section-head h2, .section-head-row h2 { margin: 0; }
.section-head p { margin: .25rem 0 0; color: var(--muted); width: 100%; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.eyebrow { display: inline-block; font-family: var(--font-head); font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .6rem; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico-xs { width: .85em; height: .85em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Enlaces de acción: texto en mayúsculas con flecha */
.cta { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.cta .ico { color: var(--accent); width: 1.1em; height: 1.1em; transition: transform .25s; }
.cta:hover .ico { transform: translate(3px, 3px); }
.cta-muted { color: var(--muted); }
.cta-muted:hover { color: var(--ink); }
.cta-sm { font-size: .8rem; margin-top: .9rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 600; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.link-arrow .ico { color: var(--accent); transition: transform .25s; }
.link-arrow:hover .ico { transform: translate(3px, 3px); }

/* Botones planos (formularios y pie) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; white-space: nowrap; padding: .95rem 1.6rem; font: 600 .88rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; border-radius: 0; border: 1px solid var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-accent, .btn-dark { background: var(--ink); color: #fff; }
.btn-primary:hover, .btn-accent:hover, .btn-dark:hover { background: var(--primary); border-color: var(--primary); }
.btn-primary .ico, .btn-accent .ico { color: var(--accent); }
.btn-white { background: #fff; color: var(--ink); border-color: #fff; }
.btn-outline, .btn-ghost { background: transparent; color: var(--ink); }
.btn-outline:hover, .btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: .65rem 1rem; font-size: .78rem; }
.btn-block { width: 100%; margin-top: .75rem; }
.btn[disabled], .btn.is-loading { opacity: .6; cursor: progress; }

/* Cabecera de una línea */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 2rem; min-height: 104px; }
.brand { padding-right: 2rem; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.brand img { height: 24px; width: auto; }
.nav { margin-inline: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav-list > li { position: relative; }
.nav-list > li > a { display: inline-flex; align-items: center; gap: .35rem; padding: .6rem .9rem; font-family: var(--font-head); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; color: var(--ink); border-bottom: 2px solid transparent; }
.nav-list > li > a:hover, .nav-list > li > a[aria-current] { border-bottom-color: var(--ink); }
.nav-list > li > a .ico-xs { color: var(--muted); }
.sub { position: absolute; top: calc(100% + .6rem); left: 0; width: 20rem; list-style: none; margin: 0; padding: .5rem 0; background: #fff; border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 50; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: flex; flex-direction: column; padding: .6rem 1.1rem; }
.sub a:hover { background: var(--grey); }
.sub a span { font-family: var(--font-head); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.sub a small { color: var(--muted); font-size: .8rem; }
.sub-all { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; }
.sub-all a { flex-direction: row; align-items: center; justify-content: space-between; }
.sub-all .ico { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 1.75rem; }
.header-phone { font-family: var(--font-head); font-weight: 500; font-size: .95rem; color: var(--ink-2); white-space: nowrap; }
.header-phone:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle .ico { width: 24px; height: 24px; }
.nav-toggle .ico-close, body.nav-open .nav-toggle .ico-open { display: none; }
body.nav-open .nav-toggle .ico-close { display: block; }
.nav-mobile-extra { display: none; }

/* Héroe: texto a la izquierda, foto a sangre por la derecha */
.hero { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--wrap) * .40)) minmax(0, calc(var(--wrap) * .60)) minmax(0, 1fr); align-items: end; }
.hero-copy { grid-column: 2; padding: clamp(3rem, 8vw, 8rem) 3rem clamp(2.5rem, 5vw, 4rem) 0; align-self: center; }
.hero-copy h1 { font-size: clamp(2.4rem, 4.3vw, 3.9rem); font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; line-height: 1; margin-bottom: 1.5rem; }
.hero-copy p { color: var(--ink-2); max-width: 26rem; font-size: 1rem; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 2.25rem; flex-wrap: wrap; align-items: center; }
.hero-media { grid-column: 3 / 5; margin: clamp(2rem, 5vw, 5rem) 0 0; }
.hero-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Ventajas: cuatro columnas separadas por líneas */
.usp { border-top: 1px solid var(--line); }
.usp-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp-row > div { display: flex; flex-direction: column; gap: .2rem; padding: 1.6rem 1.5rem 1.6rem 0; border-right: 1px solid var(--line); margin-right: 1.5rem; }
.usp-row > div:last-child { border-right: 0; margin-right: 0; }
.usp-n { font-family: var(--font-head); font-size: .8rem; color: var(--accent); font-weight: 600; letter-spacing: .1em; margin-bottom: .5rem; }
.usp-row strong { font-family: var(--font-head); font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.usp-row span { font-size: .88rem; color: var(--muted); }

/* Categorías: retícula con líneas */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cat-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; min-height: 220px; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-body { padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.cat-card strong { display: flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.cat-card strong .ico { display: none; }
.cat-card span { font-size: .88rem; color: var(--muted); }
.cat-card small { margin-top: auto; padding-top: .8rem; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cat-card small::after { content: " \2198"; color: var(--accent); }
.cat-card:hover img { filter: brightness(.95); }

/* Tarjetas de producto */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }
.pcard { display: flex; flex-direction: column; }
.pcard-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--grey); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .4s; }
.pcard:hover .pcard-media img { transform: scale(1.03); }
.badge { position: absolute; top: .8rem; left: .8rem; background: #fff; color: var(--ink); font-family: var(--font-head); font-size: .68rem; font-weight: 600; padding: .3rem .6rem; text-transform: uppercase; letter-spacing: .08em; }
.pcard-body { padding: 1rem 0 0; display: flex; flex-direction: column; flex: 1; }
.pcard-brand { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pcard-body h3 { font-size: .98rem; margin: .35rem 0 .3rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.pcard-body h3 a:hover { color: var(--primary); }
.pcard-spec { font-size: .82rem; color: var(--muted); margin: 0 0 .8rem; }
.pcard-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.price { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; display: flex; flex-direction: column; line-height: 1.1; }
.price small { font-size: .68rem; color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.stock { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: right; }
.stock.ok { color: var(--ok); }

/* Banner servicios */
.banner-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.banner-copy p { color: var(--ink-2); max-width: 32rem; }
.banner-media { margin: 0; }
.banner-media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.check-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list .ico { color: var(--accent); margin-top: .3rem; }

/* Proyectos */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.project-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.project-card div { padding: 1rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.project-card span { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.project-card strong { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.project-card:hover strong { color: var(--primary); }

/* Presupuesto */
.lead-section, .lead-block { background: var(--grey); }
.lead-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 6rem); }
.lead-copy > p { color: var(--ink-2); font-size: 1.05rem; max-width: 30rem; }
.steps { list-style: none; counter-reset: s; margin: 2rem 0; padding: 0; display: grid; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: .1rem .8rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--line); }
.steps li::before { content: "0" counter(s); grid-row: 1 / 3; font-family: var(--font-head); font-weight: 600; color: var(--accent); letter-spacing: .08em; padding-top: .1rem; }
.steps strong { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
.steps span { color: var(--muted); font-size: .92rem; }
.lead-contact { display: flex; flex-wrap: wrap; gap: .8rem 1.75rem; font-family: var(--font-head); font-weight: 500; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.lead-contact a, .lead-contact span { display: inline-flex; align-items: center; gap: .45rem; }
.lead-contact a:hover { color: var(--primary); }
.lead-contact .ico { color: var(--accent); }
.lead-form-wrap { background: #fff; border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); }
.lead-form-wrap > h3 { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }

/* Formularios */
.lead-form .hp { position: absolute; left: -9999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.5rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea { font: inherit; font-size: .98rem; color: var(--ink); background: #fff; border: 0; border-bottom: 1px solid #b5b5b5; padding: .65rem 0; width: 100%; transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); border-bottom-width: 2px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23141414'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .2rem center; background-size: .9rem; padding-right: 2rem; }
.help { font-size: .8rem; color: var(--muted); }
.error-msg { font-size: .83rem; color: #b3261e; font-weight: 500; }
.has-error input, .has-error select, .has-error textarea { border-bottom-color: #b3261e; }
.field-check label { display: flex; gap: .6rem; align-items: flex-start; font-family: var(--font-body); font-weight: 400; font-size: .88rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.field-check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--ink); flex: none; }
.form-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.75rem; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-alert { display: flex; gap: .5rem; align-items: center; background: #fdecea; border: 1px solid #e5b2ad; color: #8c1d16; padding: .75rem 1rem; font-size: .93rem; margin-bottom: 1rem; }

/* Marcas */
.brands { padding: 2rem 0; border-top: 1px solid var(--line); }
.brands-title { font-family: var(--font-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 1.2rem; font-weight: 500; }
.brands-row { display: grid; grid-template-columns: repeat(8, 1fr); }
.brand-mark { font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: #9a9a9a; padding: .6rem 0; border-left: 1px solid var(--line); padding-left: 1rem; }
.brand-mark:first-child { border-left: 0; padding-left: 0; }
.brand-mark:hover { color: var(--ink); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 6rem); }
.faq-intro p { color: var(--ink-2); }
.accordion { display: grid; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { color: var(--primary); }
.acc-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent); transition: transform .25s; }
.acc-ico.is-open { transform: rotate(180deg); }
.acc-body { padding: 0 3rem 1.2rem 0; color: var(--ink-2); }
.acc-body p { margin: 0; }

/* Guías */
.guide-grid, .guide-list, .guide-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.guide-list { padding-block: clamp(2rem, 4vw, 3rem); }
.gcard, .guide-row { display: flex; flex-direction: column; }
.gcard img, .guide-row img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gcard-body, .guide-row-body { padding: 1rem 0 0; }
.gcard h2, .gcard h3, .guide-row h3 { font-size: 1.05rem; margin: .4rem 0; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.gcard:hover h2, .gcard:hover h3, .guide-row:hover h3 { color: var(--primary); }
.gcard p, .guide-row p { color: var(--muted); font-size: .9rem; margin: 0; }
.guide-meta { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.guide-arrow { display: none; }

/* Pie */
.site-footer { border-top: 1px solid var(--line); padding: clamp(3rem, 5vw, 4.5rem) 0 1.5rem; color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.footer-brand p { margin-top: 1.25rem; max-width: 28rem; font-size: .93rem; }
.footer-brand address { font-style: normal; line-height: 1.7; font-size: .93rem; }
.footer-brand address a:hover, .footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-hours { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; margin-top: .5rem; }
.footer-hours .ico { color: var(--accent); }
.footer-col h2 { font-size: .8rem; margin-bottom: 1rem; letter-spacing: .12em; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.footer-bottom p { margin: 0; }

/* Cookies */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--ink); padding: 1rem var(--gutter); display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: .88rem; max-width: 60rem; }
.cookie-bar .btn { flex: none; }

/* Cabecera de página interior */
.page-head { border-bottom: 1px solid var(--line); padding: clamp(2rem, 4vw, 3.5rem) 0; }
.crumbs { font-size: .78rem; color: var(--muted); margin: 0 0 1rem; display: flex; gap: .5rem; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .08em; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.page-head h1 { margin-bottom: .6rem; }
.page-head p { color: var(--ink-2); font-size: 1.05rem; max-width: 44rem; margin: 0; }
.page-head-split { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }

/* Búsqueda (catálogo) */
.search { display: flex; width: 22rem; max-width: 100%; border-bottom: 1px solid var(--ink); }
.search input { flex: 1; border: 0; padding: .6rem 0; font: inherit; font-size: .95rem; color: var(--ink); min-width: 0; background: transparent; }
.search input:focus { outline: none; }
.search button { border: 0; background: none; color: var(--ink); width: 40px; display: grid; place-items: center; cursor: pointer; }
.search button:hover { color: var(--accent); }
.search .ico { width: 20px; height: 20px; }

/* Catálogo */
.chips { display: flex; gap: 0; flex-wrap: wrap; margin-top: 1.75rem; border-top: 1px solid var(--line); }
.chip { padding: .8rem 1.1rem .8rem 0; margin-right: 1.1rem; font-family: var(--font-head); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.chip:hover { color: var(--ink); }
.chip.active { color: var(--ink); border-bottom-color: var(--ink); }
.catalog-layout { display: grid; grid-template-columns: 1fr 280px; gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2rem, 4vw, 3.5rem); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; }
.results-count { font-size: .78rem; color: var(--muted); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: .08em; }
.empty { border: 1px solid var(--line); padding: 1.5rem; margin-bottom: 1.5rem; }
.empty p { margin: 0; }
.aside-box { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.aside-box h3 { font-size: .85rem; margin-bottom: .6rem; letter-spacing: .1em; }
.aside-box p { font-size: .9rem; color: var(--ink-2); margin: 0 0 .5em; }
.aside-box p:last-child { margin: 0; }
.aside-box.dark { background: var(--grey); padding: 1.4rem; border-top: 0; }
.aside-box .btn { margin-top: .9rem; }
.cat-desc { margin-top: 3rem; columns: 2; column-gap: 3rem; font-size: .95rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 1.5rem; }
.cat-desc p { break-inside: avoid; }

/* Producto */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(2rem, 4vw, 3.5rem); }
.gallery-main { aspect-ratio: 1; overflow: hidden; background: var(--grey); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .5rem; }
.gallery-thumb { width: 76px; height: 76px; border: 1px solid var(--line); background: var(--grey); padding: 0; cursor: pointer; overflow: hidden; }
.gallery-thumb.active { border-color: var(--ink); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.product-info .brand { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.product-info h1 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: .4rem 0 .8rem; }
.product-info .spec-line { color: var(--ink-2); font-size: .92rem; border-block: 1px solid var(--line); padding: .7rem 0; margin-bottom: 1.2rem; }
.price-box { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.price-box .price { font-size: 2rem; }
.price-box .price small { font-size: .74rem; }
.price-box .stock { font-size: .8rem; }
.product-cta { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.product-desc { color: var(--ink-2); }
.mini-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1rem; border: 1px solid var(--line); }
.mini-strip span { display: flex; align-items: center; gap: .5rem; font-size: .84rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.mini-strip span:nth-child(odd) { border-right: 1px solid var(--line); }
.mini-strip span:nth-last-child(-n+2) { border-bottom: 0; }
.mini-strip .ico { color: var(--accent); }
.tabs { margin-top: 1.25rem; }
.tablist { display: flex; border-bottom: 1px solid var(--line); }
.tablist [role=tab] { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .7rem 0; margin-right: 1.5rem; font: 600 .8rem var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); cursor: pointer; }
.tablist [role=tab][aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }
[role=tabpanel] { padding: 1.2rem 0; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec-grid div { padding: .7rem .9rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.spec-grid dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.spec-grid dd { margin: 0; font-weight: 600; font-size: .95rem; }
.related { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }

/* Servicios */
.service-blocks { display: grid; }
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--line); align-items: start; scroll-margin-top: 1rem; }
.service-block:nth-child(even) figure { order: -1; }
.service-block h2 { font-size: 1.5rem; }
.service-block .num { display: inline-block; font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: var(--accent); margin-bottom: .6rem; }
.service-block figure { margin: 0; }
.service-block figure img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.service-block figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; }
.service-block ul { padding-left: 1.2rem; color: var(--ink-2); }
.service-block li { margin-bottom: .3rem; }
.tarifa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 1.5rem; border: 1px solid var(--line); }
.tarifa div { padding: .9rem 1rem; border-right: 1px solid var(--line); }
.tarifa div:last-child { border-right: 0; }
.tarifa strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }
.tarifa span { font-size: .82rem; color: var(--muted); }

/* Proyectos (página) */
.project { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.project:nth-child(even) figure { order: 2; }
.project figure { margin: 0; }
.project figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.project h2 { font-size: 1.5rem; }
.project .kind { display: inline-block; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-size: .9rem; margin: 1.2rem 0 1.4rem; border-top: 1px solid var(--line); }
.project-meta div { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.project-meta dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.project-meta dd { margin: 0; font-weight: 600; }
.project ul { padding-left: 1.2rem; color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-block: clamp(2rem, 4vw, 3.5rem); }
.stats div { padding: 1.8rem 1.5rem 1.8rem 0; margin-right: 1.5rem; }
.stats div + div { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.stats strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 2.6rem; line-height: 1; margin-bottom: .4rem; }
.stats span { color: var(--muted); font-size: .9rem; }

/* Nosotros */
.about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.about-hero figure { margin: 0; }
.about-hero img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.prose { max-width: 68ch; color: var(--ink-2); }
.prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .35rem; }
.timeline { list-style: none; margin: 1.5rem 0; padding: 0; border-left: 1px solid var(--ink); }
.timeline li { padding: 0 0 1.2rem 1.4rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .55rem; width: 9px; height: 9px; background: var(--accent); }
.timeline strong { display: block; font-family: var(--font-head); font-weight: 600; }
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 1rem; border-top: 1px solid var(--line); }
.team div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.team strong { display: block; font-family: var(--font-head); font-weight: 600; }
.team span { font-size: .86rem; color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.servicios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.servicios-media { margin: 0; }
.servicios-media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.servicios-media figcaption { font-size: .85rem; color: var(--muted); margin-top: .6rem; }

/* Artículo */
.article { display: grid; grid-template-columns: 1fr 300px; gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.article-body { max-width: 70ch; }
.article-body > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1.5rem; }
.article-body h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.article-body p { color: var(--ink-2); }
.article-aside { position: sticky; top: 1rem; align-self: start; }
.toc { border-top: 1px solid var(--ink); padding: 1.1rem 0; margin-bottom: 1.1rem; }
.toc h3 { font-size: .8rem; letter-spacing: .12em; }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.toc li { margin-bottom: .35rem; }
.toc a:hover { color: var(--primary); }

/* Contacto */
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.contact-card { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.contact-card h2 { font-size: .85rem; letter-spacing: .12em; margin-bottom: 1rem; }
.contact-card dl { margin: 0; display: grid; gap: .8rem; }
.contact-card dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.contact-card dd { margin: 0; }
.contact-card dd a { font-weight: 600; }
.contact-card dd a:hover { color: var(--primary); }
.contact-card address { font-style: normal; }
.map-fig { margin: 0; }
.map-fig img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.map-fig figcaption { padding: .7rem 0; font-size: .85rem; color: var(--muted); }
.contact-form-wrap { background: #fff; border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.5rem); scroll-margin-top: 1rem; }

/* Legal */
.legal { max-width: 78ch; padding-block: clamp(2.5rem, 5vw, 4.5rem); color: var(--ink-2); }
.legal h2 { font-size: 1.3rem; margin-top: 2.2rem; }
.legal h3 { font-size: 1rem; margin-top: 1.4rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0 1.5rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .6rem .75rem; border: 1px solid var(--line); }
.legal th { background: var(--grey); font-weight: 600; width: 32%; }
.updated { font-size: .82rem; color: var(--muted); }

/* Gracias / 404 */
.center-block { min-height: 55vh; display: grid; place-items: center; text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.center-block .inner { max-width: 40rem; }
.center-block .mark { width: 64px; height: 64px; border: 1px solid var(--ink); display: grid; place-items: center; margin: 0 auto 1.5rem; color: var(--accent); }
.center-block .mark .ico { width: 32px; height: 32px; }
.center-block .hero-actions { justify-content: center; margin-top: 1.5rem; }

/* Responsive */
@media (max-width: 1180px) {
  .product-grid, .related-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .header-phone { display: none; }
  .brands-row { grid-template-columns: repeat(4, 1fr); row-gap: .5rem; }
  .brand-mark:nth-child(5) { border-left: 0; padding-left: 0; }
}
@media (max-width: 1023px) {
  .header-row { min-height: 76px; gap: 1rem; }
  .brand { border-right: 0; padding-right: 0; }
  .header-actions { margin-left: auto; }
  .header-actions .cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: #fff; border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .35s; z-index: 60; }
  body.nav-open .nav { max-height: 100vh; overflow-y: auto; }
  .nav-list { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 0; }
  .nav-list > li > a { display: flex; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
  .nav-list > li > a:hover, .nav-list > li > a[aria-current] { border-bottom-color: var(--line); color: var(--primary); }
  .sub { position: static; width: auto; opacity: 1; visibility: visible; transform: none; border: 0; padding: 0 0 .5rem 1rem; display: none; }
  .has-sub.open .sub { display: block; }
  .sub a { padding: .5rem 0; }
  .nav-mobile-extra { display: grid; gap: .8rem; padding: 1.25rem var(--gutter) 1.5rem; font-family: var(--font-head); font-weight: 500; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { grid-column: 1; padding: 3rem var(--gutter) 2.5rem; }
  .hero-media { grid-column: 1; margin: 0; }
  .usp-row { grid-template-columns: 1fr 1fr; }
  .usp-row > div:nth-child(2) { border-right: 0; margin-right: 0; }
  .usp-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .banner-split, .lead-grid, .faq-grid, .catalog-layout, .product-layout, .service-block, .project, .about-hero, .two-col, .article, .contact-layout, .servicios-grid { grid-template-columns: 1fr; }
  .service-block:nth-child(even) figure, .project:nth-child(even) figure { order: 0; }
  .project-grid, .guide-grid, .guide-list, .guide-rows, .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .article-aside { position: static; }
  .cat-desc { columns: 1; }
  .page-head-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body::before, body::after { display: none; }
  .product-grid, .related-grid, .cat-grid, .catalog-grid, .project-grid, .guide-grid, .guide-list, .guide-rows, .usp-row, .form-grid, .spec-grid, .mini-strip, .tarifa, .team, .stats, .project-meta, .footer-grid { grid-template-columns: 1fr; }
  .usp-row > div { border-right: 0; margin-right: 0; border-top: 1px solid var(--line); }
  .usp-row > div:first-child { border-top: 0; }
  .brands-row { grid-template-columns: repeat(2, 1fr); }
  .brand-mark:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mini-strip span:nth-child(odd) { border-right: 0; }
  .tarifa div { border-right: 0; border-bottom: 1px solid var(--line); }
  .tarifa div:last-child { border-bottom: 0; }
  .stats div { border-left: 0 !important; padding-left: 0 !important; }
  .cat-card { grid-template-columns: 1fr; }
  .cat-card img { aspect-ratio: 3 / 2; }
  .hero-copy h1 { font-size: 2.4rem; }
  .hero-actions { gap: 1.25rem; }
  .cookie-bar { flex-direction: column; align-items: flex-start; }
  .tablist { overflow-x: auto; }
}