/* components.css — header/footer compartidos y secciones de página.
Las clases de header/footer corresponden a partials/header.html y footer.html. */
/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.skip-link:focus{left:8px;top:8px}
/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:90px}
.brand{display:inline-flex;align-items:center}
/* El asset rxt-logo-nav.png es un lienzo 600x600 con ~62% de relleno transparente vertical
(la marca real ocupa solo 38% del alto). Por eso subimos mucho la altura del ![]()
y
absorbemos el sobrante con margenes negativos: la marca renderiza ~2x mas grande sin
inflar la barra ni recortar el asset. (Idealmente el dueno re-exporta el logo recortado.) */
.brand img{height:124px;width:auto;margin-top:-18px;margin-bottom:-18px;display:block}
.nav-menu{display:flex;align-items:center;gap:16px;list-style:none}
.nav-menu a{font-family:var(--util);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;font-weight:600;color:var(--muted);transition:color .2s;white-space:nowrap}
.nav-cta{margin-left:4px}
.nav-cta .btn{padding:12px 18px;font-size:.74rem;white-space:nowrap}
@media(min-width:1100px){.nav-menu{gap:22px}}
.nav-menu a:hover,.nav-menu a.is-active{color:var(--txt)}
.nav-cta a{color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--silver-hi);transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-shade{position:absolute;inset:0;z-index:1;background:
linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.78) 34%, rgba(10,10,10,.18) 62%, rgba(10,10,10,.55) 100%),
linear-gradient(0deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,0) 42%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:54px;padding-top:120px}
.hero h1{font-size:clamp(3.4rem,8vw,7rem);font-weight:900;margin:16px 0 0;line-height:1.02;padding-right:.30em;overflow:visible}
/* Saira Condensed italic + -webkit-background-clip:text pinta SOLO dentro de la caja del span.
Con line-height comprimido, el voladizo itálico del último glifo se sale por ARRIBA y a la
DERECHA y queda sin pintar (se ve "cortado"). Damos padding arriba/derecha para que la caja
de pintado contenga toda la tinta, y compensamos con margen negativo para no mover el layout. */
.hero h1 .metal{display:inline-block;padding:.22em .26em .04em 0;margin-top:-.22em;margin-bottom:-.04em}
.hero h1 .em{display:inline-block;padding:.22em .16em .04em 0;margin-top:-.22em;margin-bottom:-.04em;color:var(--accent);-webkit-text-stroke:1.6px var(--accent);font-style:italic}
.hero .lede{color:#D6D6D6;font-size:1.12rem;max-width:33em;margin:22px 0 0}
.hero .cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.12);max-width:680px}
.hero-stats .s{padding:18px 30px 0 0;margin-right:30px;border-right:1px solid rgba(255,255,255,.10)}
.hero-stats .s:last-child{border-right:none}
.hero-stats .n{font-family:var(--display);font-style:italic;font-size:1.9rem;color:var(--silver-hi)}
.hero-stats .l{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;color:var(--muted)}
.hero-note{margin-top:16px;font-size:.70rem;color:var(--muted-2);font-style:italic}
/* ---------- Section shell ---------- */
section.block{padding:96px 0;border-top:1px solid var(--line-2)}
.head{max-width:48em}
.head h2{font-size:clamp(2.3rem,4.8vw,3.6rem);margin:12px 0 0}
.head .lede{color:var(--muted);margin-top:16px;max-width:40em}
/* ---------- Featured product ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:46px}
.feature .shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;position:relative}
.feature .shot img{width:100%;height:100%;object-fit:cover}
.feature h3{font-size:2.6rem;margin-bottom:4px}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-hi));border-radius:99px;padding:6px 13px;margin-bottom:16px}
.specs{list-style:none;margin:24px 0 12px}
.specs li{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.specs li span:first-child{color:var(--muted);font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:.76rem}
.specs li span:last-child{font-weight:600}
.specs-note{font-size:.72rem;color:var(--muted-2);font-style:italic;margin:0 0 24px}
/* ---------- RGB showcase ---------- */
.rgb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:46px}
.rgb{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4.4;border:1px solid var(--line);cursor:pointer}
.rgb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.rgb:hover img{transform:scale(1.06)}
.rgb .cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-family:var(--display);font-style:italic;text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em}
.rgb .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;box-shadow:0 0 10px currentColor;vertical-align:middle}
/* ---------- Category tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.cat{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:border-color .2s,transform .15s}
.cat:hover{border-color:var(--accent);transform:translateY(-4px)}
.cat .bgimg{position:absolute;inset:0;z-index:0}
.cat .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,10,10,.92),rgba(10,10,10,.25))}
.cat>*{position:relative;z-index:2}
.cat .num{position:absolute;top:16px;right:18px;font-family:var(--display);font-style:italic;font-size:2.2rem;color:rgba(255,255,255,.14);z-index:2}
.cat h3{font-size:1.55rem}
.cat p{color:var(--muted);font-size:.83rem;margin-top:4px}
.cat .go{margin-top:14px;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--accent)}
/* ---------- Product-line category bands (Home) ----------
Full-bleed background image + dimmed scrim + overlaid text, like the lighting
hero (.hero/.hero-bg/.hero-shade). Text alternates left/right per band. */
/* Banda agrupadora: ritmo vertical + fondo oscuro de marca en los márgenes. */
.cat-lines{padding:72px 0}
/* Cada banda se CENTRA y se limita al ancho de contenido del sitio (.wrap = 1280px),
con canaletas de 28px como .wrap; en pantallas anchas/ultrawide quedan márgenes
oscuros a los lados (no se extiende de borde a borde). Aspect 2:1 enmarca bien la
imagen casi cuadrada del producto. */
.cat-feat{position:relative;width:min(100% - 56px, 1280px);margin-inline:auto;
aspect-ratio:2 / 1;min-height:440px;display:flex;align-items:center}
.cat-feat + .cat-feat{margin-top:32px} /* separación entre banners */
/* Imagen de fondo. Una MÁSCARA difumina solo la imagen en sus bordes (L/R fuerte,
arriba/abajo sutil) para que se disuelva en el fondo oscuro en vez de verse como
una caja. La máscara es simétrica L/R -> sirve para ambas orientaciones. El texto
(.cat-feat-inner) va en otra capa y queda nítido. */
.cat-feat-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%;
mask-image:linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-composite:intersect;mask-repeat:no-repeat;mask-size:100% 100%}
.cat-feat-bg picture{display:block}
.cat-feat-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Scrim. El oscurecido horizontal es SIMÉTRICO (igual en 0% y 100%), así el
desvanecido del mask lee idéntico en ambos bordes sin importar de qué lado va el
texto. El centro queda claro para que el producto se vea. El glow de acento va
detrás del texto (su lado) y es muy sutil: no altera la simetría de los bordes. */
.cat-feat-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
radial-gradient(56% 120% at 15% 50%, var(--cat-glow,transparent), transparent 55%),
linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.64) 16%, rgba(10,10,10,0) 36%, rgba(10,10,10,0) 64%, rgba(10,10,10,.64) 84%, rgba(10,10,10,.82) 100%),
linear-gradient(0deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,0) 60%, rgba(10,10,10,.5) 100%),
rgba(10,10,10,.10)}
/* Bandas alternas (texto a la DERECHA): MISMO oscurecido simétrico; solo se mueve
el glow de acento al lado derecho. Los bordes quedan idénticos a la versión normal. */
.cat-feat.reverse .cat-feat-scrim{background:
radial-gradient(56% 120% at 85% 50%, var(--cat-glow,transparent), transparent 55%),
linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.64) 16%, rgba(10,10,10,0) 36%, rgba(10,10,10,0) 64%, rgba(10,10,10,.64) 84%, rgba(10,10,10,.82) 100%),
linear-gradient(0deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,0) 60%, rgba(10,10,10,.5) 100%),
rgba(10,10,10,.10)}
.cat-feat-inner{position:relative;z-index:2;width:100%}
.cat-feat-content{max-width:34em}
.cat-feat.reverse .cat-feat-content{margin-left:auto} /* empuja el texto a la derecha */
.cat-feat-content .eyebrow{color:var(--cat-accent,var(--accent))}
.cat-feat-content h2{font-size:clamp(2.2rem,4.8vw,4rem);margin:12px 0 0}
.cat-feat-content .lede{color:#E6E6E6;font-size:1.1rem;max-width:32em;margin:18px 0 28px}
@media(max-width:760px){
.cat-lines{padding:0}
/* En móvil: a sangre completa, apiladas, con hairline entre ellas. */
.cat-feat{width:100%;margin-inline:0;aspect-ratio:auto;min-height:clamp(420px,72vh,560px);
border-radius:0;border-left:0;border-right:0;border-top:1px solid var(--line-2);align-items:flex-end}
.cat-feat + .cat-feat{margin-top:0}
/* A sangre completa en móvil: sin desvanecido L/R en el borde de la pantalla;
solo un feather vertical sutil para suavizar la unión entre banners apilados. */
.cat-feat-bg{
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-composite:source-over;
mask-image:linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-composite:add}
.cat-feat-inner{padding-top:40px;padding-bottom:44px}
/* El texto ocupa casi todo el ancho: scrim más uniforme para legibilidad. */
.cat-feat-scrim,.cat-feat.reverse .cat-feat-scrim{background:
radial-gradient(120% 80% at 50% 100%, var(--cat-glow,transparent), transparent 60%),
linear-gradient(0deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.4) 55%, rgba(10,10,10,.6) 100%),
rgba(10,10,10,.28)}
.cat-feat.reverse .cat-feat-content{margin-left:0}
}
/* ---------- Quality band ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px}
.pillar{border-top:2px solid var(--accent);padding-top:20px}
.pillar h3{font-size:1.4rem}
.pillar p{color:var(--muted);font-size:.9rem;margin-top:8px}
.qband{margin-top:70px;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:340px;display:flex;align-items:center}
.qband .qbg{position:absolute;inset:0}
.qband .qbg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.qband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.94),rgba(10,10,10,.45) 70%,rgba(10,10,10,.2))}
.qband .qin{position:relative;z-index:2;padding:48px}
.qband h2{font-size:clamp(2rem,4vw,3rem)}
.qband p{color:#CFCFCF;max-width:30em;margin:14px 0 24px}
/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line-2);padding:60px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.footer-brand-link{display:inline-block}
/* El asset del logo (rxt-logo-nav, 600x600) lleva ~62% de relleno transparente
vertical (la marca ocupa ~38% del alto). Por eso subimos mucho la altura del
![]()
y absorbemos el sobrante con márgenes negativos: la marca renderiza
~46px en vez de ~15px, sin inflar el footer ni recortar el asset. */
.footer-brand img{height:120px;width:auto;object-fit:contain;display:block;margin:-28px 0 -22px}
.footer-tag{color:var(--muted);font-size:.86rem;max-width:24em}
.footer-col h3{font-family:var(--util);font-style:normal;text-transform:uppercase;letter-spacing:.16em;line-height:1.2;font-size:.70rem;color:var(--muted);margin-bottom:15px}
.footer-col ul{list-style:none;display:grid;gap:10px}
.footer-col a{color:var(--muted);font-size:.88rem}
.footer-col a:hover{color:var(--txt)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:22px;border-top:1px solid var(--line-2);color:var(--muted-2);font-size:.78rem;flex-wrap:wrap;gap:10px}
.footer-fine{color:var(--muted-2)}
/* ---------- Responsive ---------- */
@media(max-width:980px){
.feature{grid-template-columns:1fr}
.rgb-grid{grid-template-columns:repeat(3,1fr)}
.cats,.pillars{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr}
/* Nav móvil */
.nav-toggle{display:flex}
.nav-menu{position:absolute;top:84px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:rgba(10,10,10,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);padding:8px 28px 22px}
.nav-menu.is-open{display:flex}
.nav-menu li{width:100%}
.nav-menu li a{display:block;padding:14px 0}
.nav-cta{padding-top:12px}
.nav-cta a{display:inline-flex;width:auto}
}
@media(max-width:560px){
.rgb-grid{grid-template-columns:repeat(2,1fr)}
.cats,.pillars,.footer-grid{grid-template-columns:1fr}
.hero-stats{flex-wrap:wrap;gap:0}
.hero-stats .s{padding:14px 18px 0 0;margin-right:18px}
.brand img{height:52px}
}