/* Archivo generado por scripts/build-css.mjs: edita scripts/css/*.css y vuelve a ejecutarlo */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spacegrotesk-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/spacegrotesk-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial"),local("Helvetica"),local("Arimo");font-weight:300 500;size-adjust:109.69%;ascent-override:89.71%;descent-override:26.62%;line-gap-override:0%;}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica-Bold"),local("Arimo Bold");font-weight:600 700;size-adjust:102.5%;ascent-override:96%;descent-override:28.5%;line-gap-override:0%;}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("Arimo");font-weight:100 500;size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica-Bold"),local("Arimo Bold");font-weight:600 900;size-adjust:100%;ascent-override:96.8%;descent-override:24.1%;line-gap-override:0%;}
/* ============ SISTEMA DE DISEÑO — compartido por todas las páginas ============
   Estética: automotriz premium / industrial moderno. Negro carbón, grafito, blanco roto y gris metálico,
   con el rojo automotriz solo como acento (botones de acción, indicadores y detalles).
   Títulos en Space Grotesk, texto en Inter. Esquinas moderadas, bordes finos, sombras suaves.
   Este bloque se copia a category.css y al <style> de index.html con: node scripts/build-css.mjs */

:root{
  --bg:#F3F1ED; --bg-2:#E8E7E3; --surface:#FFFFFF; --surface-2:#F8F7F4;
  --ink:#101113; --ink-soft:#50545B;
  --line:#DDDBD6; --line-strong:#B9B6AE;
  --red-text:#C4202A;
  --shadow-sm:0 1px 2px rgba(16,17,19,.05), 0 8px 20px -12px rgba(16,17,19,.2);
  --shadow-md:0 2px 4px rgba(16,17,19,.05), 0 22px 40px -18px rgba(16,17,19,.3);
  /* fijos (no cambian con el modo claro/oscuro) */
  --carbon:#0B0C0E; --graphite:#15171B; --graphite-2:#1D1F24; --steel:#8F949C; --steel-light:#C3C7CD;
  --on-dark:#F3F1ED; --on-dark-soft:#B6BAC1; --line-dark:rgba(255,255,255,.12);
  --red:#D6202B; --red-hover:#B91923; --red-bright:#FF5C64;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --ease:cubic-bezier(.22,.8,.22,1);
  --head:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --body:'Inter','Inter Fallback',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0F12; --bg-2:#0A0B0D; --surface:#16181C; --surface-2:#1B1D22;
    --ink:#F3F1ED; --ink-soft:#B2B6BD; --line:#272A30; --line-strong:#454951; --red-text:#FF6A71;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.6);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 22px 40px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0E0F12; --bg-2:#0A0B0D; --surface:#16181C; --surface-2:#1B1D22;
  --ink:#F3F1ED; --ink-soft:#B2B6BD; --line:#272A30; --line-strong:#454951; --red-text:#FF6A71;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.6);
  --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 22px 40px -18px rgba(0,0,0,.7);
}
/* Bloques oscuros (hero, franjas, pie): los componentes de adentro toman los valores oscuros */
.on-dark{
  --ink:#F3F1ED; --ink-soft:#B6BAC1; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.3);
  --surface:#181A1F; --surface-2:#1E2025; --red-text:#FF5C64;
  background:var(--carbon); color:var(--ink);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(88px + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%; interpolate-size:allow-keywords;}
body{
  margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--body);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased; font-variant-ligatures:none;
}
h1,h2,h3,h4{font-family:var(--head); font-weight:700; letter-spacing:-.025em; line-height:1.08; margin:0; color:var(--ink); text-wrap:balance;}
p{margin:0 0 1em;}
img{max-width:100%; height:auto;}
a{color:inherit;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.ico{width:1em; height:1em; flex:none; display:inline-block; vertical-align:middle;}

/* Aparición suave al desplazarse */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s var(--ease); transition-delay:var(--d,0s);}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* Transición suave al pasar de una página a otra (navegadores que la soportan; el resto navega normal).
   La cabecera y el botón de WhatsApp se quedan quietos mientras el contenido cambia. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  header{view-transition-name:site-header;}
  .wsp-float{view-transition-name:site-wsp;}
  ::view-transition-old(root), ::view-transition-new(root){animation-duration:.24s;}
}

/* ---------- Cabecera ---------- */
header{
  position:sticky; top:0; z-index:60; padding-top:env(safe-area-inset-top,0px);
  background:rgba(11,12,14,.97); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-dark); transition:background .25s, box-shadow .25s;
}
header.is-scrolled{background:rgba(11,12,14,.97); box-shadow:0 12px 32px -20px rgba(0,0,0,.85);}
.nav{display:flex; align-items:center; gap:28px; max-width:1200px; margin:0 auto; height:72px; padding:0 24px;}
.brand{display:inline-flex; align-items:center; gap:10px; font:700 20px/1 var(--head); letter-spacing:.03em; color:#fff; text-decoration:none; white-space:nowrap;}
.brand span{font-weight:500; color:var(--steel-light);}
.brand .brand-mark{width:30px; height:30px; flex:none;}
.nav-links{display:flex; gap:4px; list-style:none; margin:0 0 0 auto; padding:0;}
.nav-links a{
  position:relative; display:block; padding:10px 14px; border-radius:var(--r-sm); color:#C9CCD2; font:500 14.5px/1.2 var(--body);
  text-decoration:none; white-space:nowrap; transition:color .2s, background .2s;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.07);}
.nav-links a[aria-current]{color:#fff;}
.nav-links a[aria-current]::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--red);}
.cta-wsp{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 18px; border-radius:10px;
  background:var(--red); color:#fff; font:600 14px/1 var(--body); text-decoration:none; white-space:nowrap;
  transition:background .2s, transform .2s var(--ease), box-shadow .2s;
}
.cta-wsp .ico{width:18px; height:18px;}
.cta-wsp:hover{background:var(--red-hover); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(214,32,43,.75);}
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; color:#fff; border:1px solid var(--line-dark); border-radius:10px; transition:background .2s, border-color .2s;
}
.nav-toggle:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3);}
.nav-toggle .ico{width:22px; height:22px;}
.nav-toggle .i-close{display:none;}
.nav-toggle[aria-expanded="true"] .i-open{display:none;}
.nav-toggle[aria-expanded="true"] .i-close{display:block;}
@media (max-width:1100px){
  .nav{gap:12px;}
  .cta-wsp{margin-left:auto;}
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; gap:0; padding:8px 20px 24px;
    background:var(--carbon); border-bottom:1px solid var(--line-dark); box-shadow:0 30px 40px -24px rgba(0,0,0,.8);
    max-height:calc(100svh - 72px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .2s ease, transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-open .nav-links{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;}
  .nav-links li + li{border-top:1px solid var(--line-dark);}
  .nav-links a{padding:18px 6px; font-size:18px; border-radius:0; display:flex; align-items:center; justify-content:space-between;}
  .nav-links a:hover{background:transparent;}
  .nav-links a[aria-current]::after{left:6px; right:auto; width:28px; bottom:10px;}
}
@media (max-width:479px){
  .nav{padding:0 16px; height:64px;}
  .brand{font-size:18px;}
  .brand .brand-mark{width:26px; height:26px;}
  .cta-wsp{width:44px; padding:0;}
  .cta-wsp .cta-label{display:none;}
  .nav-links{max-height:calc(100svh - 64px);}
}
@media (max-width:340px){ .brand{font-size:16px; gap:7px;} .nav{gap:8px; padding:0 12px;} }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px;
  font:600 15.5px/1.2 var(--body); text-decoration:none; border:1.5px solid transparent; border-radius:var(--r); cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s, background .2s, color .2s, border-color .2s;
}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-hover); transform:translateY(-1px); box-shadow:0 14px 26px -14px rgba(214,32,43,.8);}
.btn-primary:active{transform:none; box-shadow:none;}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:transparent;}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface);}
.btn-light{border-color:rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.05);}
.btn-light:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.12);}
.btn-sm{min-height:44px; padding:0 18px; font-size:14.5px;}
.btn .ico{width:18px; height:18px; transition:transform .25s var(--ease);}
.btn:hover .ico{transform:translateX(3px);}

/* ---------- Títulos de sección ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px;
  font:600 12.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red-text);
}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor; flex:none;}
.section-head{margin:0 0 48px; max-width:62ch;}
.section-head h2{font-size:clamp(30px,4.2vw,50px); letter-spacing:-.035em; line-height:1.04; margin:0 0 16px;}
.section-head p{color:var(--ink-soft); font-size:18px; line-height:1.6; margin:0;}
.section{padding:104px 0;}
@media (max-width:760px){ .section{padding:68px 0;} .section-head{margin-bottom:34px;} .section-head p{font-size:17px;} }

.kicker{display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; font:600 12.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red-bright);}
.kicker::before{content:""; width:22px; height:2px; border-radius:2px; background:currentColor;}

/* Indicadores con visto */
.checks{list-style:none; display:flex; flex-wrap:wrap; gap:12px 26px; margin:0; padding:0;}
.checks li{display:inline-flex; align-items:center; gap:9px; font:500 14.5px/1.3 var(--body); color:var(--ink);}
.checks .ico{width:20px; height:20px; color:var(--red-text);}
.on-dark .checks li, .hero .checks li{color:#E4E6EA;}
.hero .checks .ico{color:var(--red-bright);}

/* ---------- Tarjetas de categoría (con foto) ---------- */
.cat-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;}
.cat-grid > li{display:flex;}
.cat-card{
  position:relative; flex:1; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cat-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--graphite);}
.cat-media img{display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.92); transition:transform .3s var(--ease), filter .3s;}
.cat-media::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,12,14,0) 50%, rgba(11,12,14,.5));}
.cat-num{
  position:absolute; top:12px; left:12px; z-index:2; padding:7px 11px; border-radius:999px; background:rgba(11,12,14,.7); color:#fff;
  font:600 12px/1 var(--head); letter-spacing:.1em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cat-body{display:flex; flex-direction:column; gap:8px; flex:1; padding:18px 18px 18px;}
.cat-name{font:700 19px/1.15 var(--head); letter-spacing:-.02em;}
.cat-name a{color:inherit; text-decoration:none;}
.cat-name a::after{content:""; position:absolute; inset:0; z-index:1;}
.cat-name a:focus-visible{outline:none;}
.cat-desc{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.cat-foot{margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cat-more{display:inline-flex; align-items:center; gap:6px; font:600 13.5px/1 var(--body); color:var(--ink-soft); transition:color .25s;}
.cat-more .ico{width:16px; height:16px; transition:transform .25s var(--ease);}
.cat-cta{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border-radius:10px;
  border:1.5px solid var(--line-strong); color:var(--ink); font:600 13.5px/1 var(--body); text-decoration:none;
  transition:background .25s, color .25s, border-color .25s;
}
.cat-cta .ico{width:16px; height:16px;}
.cat-card:hover{border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-3px);}
.cat-card:hover .cat-media img{transform:scale(1.06); filter:brightness(1.02);}
.cat-card:hover .cat-more{color:var(--ink);}
.cat-card:hover .cat-more .ico{transform:translateX(3px);}
.cat-card:hover .cat-cta, .cat-cta:hover, .cat-cta:focus-visible{background:var(--red); border-color:var(--red); color:#fff;}
.cat-card:has(.cat-name a:focus-visible){box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--red-text);}
/* Tarjeta final: invita a cotizar lo que no aparece */
.cat-tile{
  position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:28px 24px; border-radius:var(--r-lg);
  background:var(--graphite); color:#fff; border:1px solid var(--line-dark);
}
.cat-tile h3{font-size:22px; line-height:1.12; color:#fff;}
.cat-tile p{margin:0; font-size:14.5px; line-height:1.55; color:var(--on-dark-soft);}
.cat-tile .btn{align-self:flex-start; margin-top:4px;}
@media (max-width:1100px){ .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:820px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;} }
@media (max-width:560px){
  .cat-grid{grid-template-columns:1fr; gap:12px;}
  .cat-card{flex-direction:row; align-items:stretch;}
  .cat-media{flex:0 0 118px; aspect-ratio:auto; min-height:148px;}
  .cat-body{padding:14px 14px 14px 16px; gap:6px; min-width:0;}
  .cat-name{font-size:18px;}
  .cat-desc{font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .cat-foot{padding-top:8px;}
  .cat-more{display:none;}
  .cat-num{top:8px; left:8px; padding:5px 8px; font-size:11px;}
  .cat-card:hover{transform:none;}
}

/* ---------- Franja de confianza ---------- */
.trust-strip{position:relative; z-index:3; margin-top:-56px;}
.trust-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-md); overflow:hidden;}
.trust-item{display:flex; align-items:flex-start; gap:16px; padding:26px 24px; color:var(--ink); text-decoration:none; transition:background .2s;}
.trust-item + .trust-item{border-left:1px solid var(--line);}
a.trust-item:hover{background:var(--surface-2);}
.trust-ico{width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:var(--r); background:var(--bg); border:1px solid var(--line); color:var(--red-text);}
.trust-ico .ico{width:24px; height:24px;}
.trust-item strong{display:block; font:700 14px/1.2 var(--head); letter-spacing:.07em; text-transform:uppercase;}
.trust-item small{display:block; margin-top:6px; font-size:14.5px; line-height:1.45; color:var(--ink-soft);}
@media (max-width:980px){
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trust-item:nth-child(3){border-left:0;}
  .trust-item:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:560px){
  .trust-strip{margin-top:-36px;}
  .trust-row{grid-template-columns:1fr; border-radius:var(--r-lg);}
  .trust-item{padding:18px 18px; gap:14px;}
  .trust-item + .trust-item{border-left:0; border-top:1px solid var(--line);}
  .trust-item:nth-child(n+3){border-top:1px solid var(--line);}
}

/* ---------- Proceso en pasos (línea que conecta los pasos) ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid;}
.step{position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:20px; padding-bottom:30px;}
.step:last-child{padding-bottom:0;}
.step:not(:last-child)::before{content:""; position:absolute; left:27px; top:58px; bottom:2px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--red), var(--line-strong));}
.step-n{
  position:relative; z-index:1; width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:var(--step-bg,var(--graphite)); color:#fff; border:1.5px solid var(--red); font:700 17px/1 var(--head); letter-spacing:.04em;
}
.step > div > strong{display:block; font:700 20px/1.2 var(--head); letter-spacing:-.02em; margin:4px 0 6px; color:var(--ink);}
.step p strong{color:var(--ink); font-weight:600;}
.step p{margin:0; font-size:16px; line-height:1.55; color:var(--ink-soft);}
.step p a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:3px;}
.on-dark .step-n{--step-bg:var(--carbon);}

/* ---------- Marcas ---------- */
.brand-tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:12px;}
.brand-tiles > li{display:flex;}
.brand-tile{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; min-height:84px; padding:12px 8px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--ink-soft); text-decoration:none;
  font:700 clamp(13px,1.25vw,16px)/1.1 var(--head); letter-spacing:.07em; text-transform:uppercase;
  transition:color .25s, border-color .25s, background .25s;
}
.brand-tile::after{content:""; position:absolute; left:18%; right:18%; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--red); transform:scaleX(0); transition:transform .3s var(--ease);}
.brand-tile:hover, .brand-tile:focus-visible{color:var(--ink); border-color:var(--line-strong); background:var(--surface-2);}
.brand-tile:hover::after, .brand-tile:focus-visible::after{transform:scaleX(1);}
.brand-tile.more{color:var(--ink); border-style:dashed; border-color:var(--line-strong); gap:6px;}
.brand-tile.more .ico{width:16px; height:16px;}
@media (max-width:1100px){ .brand-tiles{grid-template-columns:repeat(3,minmax(0,1fr));} .brand-tile{min-height:76px; font-size:15px;} }
@media (max-width:420px){ .brand-tiles{gap:8px;} .brand-tile{font-size:12.5px; letter-spacing:.04em; padding:10px 4px; min-height:68px;} }

/* Etiqueta sobre imágenes */
.art-label{
  position:absolute; z-index:2; padding:8px 12px; border-radius:999px; background:rgba(11,12,14,.72); color:#fff;
  font:600 11.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.art-label.tl{top:16px; left:16px;} .art-label.tr{top:16px; right:16px;}
.art-label.bl{bottom:16px; left:16px;} .art-label.br{bottom:16px; right:16px;}

/* ---------- Pie de página ---------- */
footer{position:relative; background:var(--carbon); color:var(--on-dark-soft); padding:76px 0 0; border-top:1px solid var(--line-dark);}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1.35fr); gap:44px 32px; padding-bottom:52px;}
.foot-brand .brand{font-size:22px;}
.foot-brand p{color:var(--on-dark-soft); font-size:15px; line-height:1.65; max-width:36ch; margin:18px 0 22px;}
.foot-grid h3{
  color:#fff; font:700 12.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; margin:0 0 20px;
}
.foot-links{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.foot-links a, .foot-grid .yr-cookie-link{
  display:inline-block; padding:4px 0; font-size:14.5px; line-height:1.5; color:var(--on-dark-soft); text-decoration:none; transition:color .2s;
}
.foot-links a:hover, .foot-grid .yr-cookie-link:hover{color:#fff; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:4px;}
.foot-grid .yr-cookie-link{background:none; border:0; padding:4px 0; text-align:left; font-family:inherit; cursor:pointer;}
.foot-contact{display:grid; gap:10px; font-size:14.5px;}
.foot-contact a{display:flex; gap:10px; align-items:flex-start; padding:3px 0; color:var(--on-dark-soft); text-decoration:none; transition:color .2s; overflow-wrap:anywhere;}
.foot-contact a:hover{color:#fff;}
.foot-contact .ico{width:18px; height:18px; margin-top:2px; color:var(--red-bright);}
.foot-grid h3.foot-legal{margin-top:28px;}
.foot-bottom{display:flex; justify-content:space-between; gap:10px 28px; flex-wrap:wrap; padding:24px 0 0; border-top:1px solid var(--line-dark); font-size:13px; color:#9EA3AB;}
.trademark-note{font-size:12.5px; color:#9EA3AB; line-height:1.65; margin:14px 0 0; max-width:100ch;}
.trademark-note:last-of-type{padding-bottom:34px;}
.trademark-note a{color:inherit; text-decoration:underline;}
@media (max-width:1100px){ .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px;} .foot-brand{grid-column:1 / -1;} }
@media (max-width:640px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px;} .foot-contact-col{grid-column:1 / -1;} footer{padding-top:56px;} }

/* El pie no se dibuja hasta que se acerca a la pantalla; si la dirección trae un ancla se dibuja todo (salto exacto) */
footer{content-visibility:auto; contain-intrinsic-size:auto 700px;}
html:has(:target) footer{content-visibility:visible;}

/* ---------- WhatsApp flotante y barra móvil ---------- */
.wsp-float{
  position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:55; display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 22px 0 18px; border-radius:999px; background:var(--red); color:#fff; font:600 14.5px/1 var(--body); text-decoration:none;
  box-shadow:0 16px 32px -12px rgba(214,32,43,.7), 0 2px 8px rgba(0,0,0,.28); transition:background .2s, transform .2s var(--ease), box-shadow .25s;
}
.wsp-float .ico{width:22px; height:22px;}
.wsp-float:hover{background:var(--red-hover); transform:translateY(-2px); box-shadow:0 20px 36px -12px rgba(214,32,43,.8), 0 2px 8px rgba(0,0,0,.28);}
.mobile-cta{display:none;}
@media (max-width:640px){
  .wsp-float{display:none;}
  .mobile-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(11,12,14,.96); border-top:1px solid var(--line-dark);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  }
  .mobile-cta a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; border-radius:var(--r); background:var(--red); color:#fff;
    font:600 16px/1 var(--body); text-decoration:none;
  }
  .mobile-cta .ico{width:22px; height:22px;}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));}
}

/* ---------- Accesibilidad ---------- */
:focus-visible{outline:2px solid var(--red-text); outline-offset:3px;}
header :focus-visible, footer :focus-visible, .on-dark :focus-visible, .page-hero :focus-visible, .hero :focus-visible, .mobile-cta :focus-visible{outline-color:#fff;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--red); color:#fff; padding:12px 20px; font-weight:700; z-index:200; text-decoration:none; border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0; top:0;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ---------- Impresión (políticas) ---------- */
@media print{
  header, footer, .wsp-float, .mobile-cta, .art-frame, .plan, .finder, .legal-toc, .cta-band, .trust-strip, .hero-actions, #yr-consent, .yr-consent{display:none !important;}
  body{background:#fff; color:#000; font-size:11pt;}
  .page-hero{background:none; color:#000; padding:0;}
  .page-hero > .wrap{display:block; padding:0 0 12pt;}
  .page-hero h1, .page-hero .lede, .kicker, .crumbs, .crumbs a{color:#000 !important;}
  .legal-layout{display:block;}
  .legal p, .legal li, .legal td, .legal th{color:#000 !important;}
  .legal th{background:#eee !important;}
  a{color:#000;}
}
/* ============ Páginas interiores: categorías, marcas, políticas y 404 ============ */

/* ---------- Hero ---------- */
.page-hero{position:relative; overflow:hidden; background:var(--carbon); color:#fff;}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 80% at 88% 10%, rgba(214,32,43,.13), transparent 65%);}
.page-hero > .wrap{
  position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center;
  padding-top:56px; padding-bottom:124px;
}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; font:500 13.5px/1.4 var(--body); color:var(--steel);}
.crumbs a{color:var(--steel-light); text-decoration:none; transition:color .2s;}
.crumbs a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
.crumbs [aria-hidden]{opacity:.5;}
.page-hero h1{color:#fff; font-size:clamp(34px,4.8vw,60px); line-height:1.02; letter-spacing:-.035em; margin:0 0 22px;}
.page-hero .lede{color:var(--steel-light); font-size:clamp(17px,1.5vw,19.5px); line-height:1.6; max-width:50ch; margin:0 0 32px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 28px;}
.trust-note{display:flex; align-items:center; gap:10px; margin:0; font:500 14px/1.5 var(--body); color:var(--steel-light);}
.trust-note .ico{width:20px; height:20px; color:var(--red-bright); flex:none;}

/* Marco de imagen del hero: foto de la categoría, nombre de la marca o ícono de la política */
.art-frame{
  position:relative; width:100%; max-width:540px; margin-left:auto; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-xl); background:var(--graphite); border:1px solid var(--line-dark); box-shadow:0 44px 80px -44px rgba(0,0,0,.95);
}
.art-frame > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.art-frame.photo::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,12,14,.28) 0%, rgba(11,12,14,0) 30%, rgba(11,12,14,0) 62%, rgba(11,12,14,.62) 100%);}
.art-frame.brand{background:linear-gradient(160deg,#1C1E23,#0F1013);}
.brand-art{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 28px;}
.brand-big{font:700 clamp(44px,7.4vw,92px)/.92 var(--head); letter-spacing:-.04em; text-transform:uppercase; color:#fff; overflow-wrap:anywhere;}
.brand-bar{display:block; width:72px; height:4px; margin:22px auto 0; border-radius:4px; background:var(--red);}
.art-tags{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:26px 0 0; padding:0; list-style:none; max-width:94%;}
.art-tags li{font:600 12px/1 var(--body); letter-spacing:.06em; color:var(--steel-light); border:1px solid var(--line-dark); border-radius:999px; padding:8px 12px;}
.art-frame.policy::before{content:""; position:absolute; width:50%; aspect-ratio:1; border-radius:50%; border:1.5px solid rgba(214,32,43,.55);}
.art-icon{position:relative; z-index:1; width:30%; height:auto; color:var(--steel-light);}
.art-icon *{vector-effect:non-scaling-stroke; stroke-width:1.8px;}
.art-404{position:relative; z-index:1; font:700 clamp(96px,16vw,190px)/.85 var(--head); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:2px var(--steel);}

/* ---------- Plano esquemático del sistema (con pines numerados) ---------- */
.plan{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-xl); background-color:#0F1114; border:1px solid rgba(255,255,255,.12); color:var(--steel-light);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:28px 28px;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.7);
}
.plan svg{display:block; width:100%; height:auto;}
.plan .ln, .plan .dl, .plan .lead, .plan .axis{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.plan .ln{stroke:#CDD0D6; stroke-width:1.6;}
.plan .dl{stroke:#7F848C; stroke-width:1.1;}
.plan .fl{fill:rgba(255,255,255,.055);}
.plan .solid{fill:#0F1114;}
.plan .dash{stroke-dasharray:5 5;}
.plan .vent{fill:none; stroke:#7F848C; stroke-width:15; stroke-dasharray:15 11; opacity:.4;}
.plan .tread{fill:none; stroke:#7F848C; stroke-width:12; stroke-dasharray:7 5; opacity:.5;}
.plan .teeth{fill:none; stroke:#8F949C; stroke-width:7; stroke-dasharray:2 5; opacity:.65;}
.plan .chain{fill:none; stroke:#8F949C; stroke-width:7; stroke-dasharray:6 3; opacity:.6;}
.plan .axis{stroke:#8F949C; stroke-width:1; stroke-dasharray:16 4 3 4; opacity:.6;}
.plan .tubeo{fill:none; stroke:#CDD0D6; stroke-linecap:round; vector-effect:none;}
.plan .tubei{fill:none; stroke:#0F1114; stroke-linecap:round;}
.plan .lead{stroke:rgba(255,92,100,.5); stroke-width:1;}
.plan .dot{fill:#FF5C64;}
.plan .pin circle{fill:#0F1114; stroke:#FF5C64; stroke-width:1.6; transition:fill .2s, stroke .2s;}
.plan .pin text{fill:#fff; font:700 13px var(--head); text-anchor:middle; pointer-events:none;}
.plan .pin, .plan .lead, .plan .dot{transition:opacity .2s;}
.plan.has-active .pin, .plan.has-active .lead, .plan.has-active .dot{opacity:.28;}
.plan.has-active .on{opacity:1;}
.plan .pin.on circle{fill:#D6202B; stroke:#fff;}
.plan-cap{display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid rgba(255,255,255,.1); font:600 11.5px/1.3 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--steel);}

/* ---------- Qué manejamos ---------- */
.parts-layout{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:start;}
.parts-layout .plan{position:sticky; top:104px;}
.parts-layout .parts-grid{grid-template-columns:1fr;}
@media (max-width:900px){ .parts-layout{grid-template-columns:1fr; gap:28px;} .parts-layout .plan{position:static;} }
.parts{padding:96px 0 44px;}
.parts-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.parts-grid li:last-child:nth-child(odd){grid-column:1 / -1;}
.part{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; min-height:84px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--ink); text-decoration:none;
  transition:border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.part-n{font:700 14px/1 var(--head); letter-spacing:.1em; color:var(--ink-soft); min-width:2.2em;}
.part-t{font-size:17px; font-weight:600; line-height:1.3; min-width:0; overflow-wrap:anywhere;}
.part-go{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line-strong); transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);}
.part-go .ico{width:18px; height:18px;}
.part:hover{border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.part:hover .part-go{background:var(--red); border-color:var(--red); color:#fff; transform:translateX(2px);}
@media (max-width:760px){ .parts{padding:64px 0 28px;} .parts-grid{grid-template-columns:1fr;} .part{padding:14px 16px; min-height:76px; gap:14px;} .part-go{width:36px; height:36px;} }

/* ---------- Cómo funciona ---------- */
.how{padding:72px 0 104px;}
.how-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:72px; align-items:start;}
.how-copy h2{font-size:clamp(28px,3.6vw,44px); line-height:1.05; letter-spacing:-.035em; margin:0 0 18px;}
.how-copy > p{color:var(--ink-soft); font-size:17.5px; line-height:1.65; max-width:52ch; margin:0 0 30px;}
.how .steps{--step-bg:var(--ink);}
@media (max-width:900px){ .how-grid{grid-template-columns:1fr; gap:40px;} .how{padding:48px 0 72px;} }

/* ---------- Franja de llamada a la acción ---------- */
.cta-band{position:relative; background:var(--carbon); color:#fff; overflow:hidden; border-top:1px solid var(--line-dark);}
.cta-band::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(45% 120% at 92% 50%, rgba(214,32,43,.14), transparent 70%);}
.cta-inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; padding:68px 24px;}
.cta-band .eyebrow{color:var(--red-bright);}
.cta-band h2{color:#fff; font-size:clamp(28px,3.8vw,46px); line-height:1.04; letter-spacing:-.035em; margin:0 0 14px;}
.cta-band p{color:var(--steel-light); font-size:17.5px; max-width:54ch; margin:0;}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px;}
@media (max-width:820px){ .cta-inner{grid-template-columns:1fr; padding-top:52px; padding-bottom:56px;} .cta-actions .btn{flex:1 1 220px;} }

/* ---------- Explorar: categorías y marcas ---------- */
.cat-grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px;}
.cat-grid.cols-5 .cat-body{padding:14px;}
.cat-grid.cols-5 .cat-name{font-size:17px;}
.cat-grid.cols-5 .cat-desc{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:14px;}
.cat-grid.cols-5 .cat-more{display:none;}
.cat-grid.cols-5 .cat-foot{justify-content:flex-start;}
@media (max-width:1100px){ .cat-grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .cat-grid.cols-5{grid-template-columns:1fr;} .cat-grid.cols-5 .cat-desc{-webkit-line-clamp:2;} }
.explore{padding:96px 0 108px; background:var(--bg-2);}
.explore .section-head{margin-bottom:34px;}
.explore .section-head.sub{margin-top:84px;}
.brand-tiles.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:560px){ .explore{padding:64px 0 76px;} .brand-tiles.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));} .explore .section-head.sub{margin-top:56px;} }

/* ---------- Marcas: modelos ---------- */
.models{padding:96px 0 32px;}
.models .section-head{margin-bottom:30px;}
.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.chips a{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  color:var(--ink); font:600 15px/1 var(--body); text-decoration:none; transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .25s;
}
.chips a::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--red); flex:none;}
.chips a:hover{border-color:var(--ink); box-shadow:var(--shadow-sm); transform:translateY(-2px);}
.systems{padding:72px 0 80px;}
.how-brand{padding:56px 0 100px;}

/* ---------- Políticas ---------- */
.legal-wrap{padding:76px 0 104px;}
.legal-layout{display:grid; grid-template-columns:280px minmax(0,1fr); gap:64px; align-items:start;}
.legal-toc{position:sticky; top:100px; padding:22px 20px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);}
.toc-title{margin:0 0 12px; font:700 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red-text);}
.legal-toc ol{list-style:none; counter-reset:t; margin:0; padding:0; display:grid; gap:2px;}
.legal-toc li{counter-increment:t;}
.legal-toc a{display:flex; gap:10px; align-items:baseline; padding:8px 10px; border-radius:var(--r-sm); font-size:14px; line-height:1.35; color:var(--ink-soft); text-decoration:none; transition:background .2s, color .2s;}
.legal-toc a::before{content:counter(t, decimal-leading-zero); font:600 11.5px/1 var(--head); letter-spacing:.06em; color:var(--red-text);}
.legal-toc a:hover{background:var(--bg); color:var(--ink);}
.legal{max-width:760px; min-width:0;}
.legal h2{font-size:clamp(22px,2.6vw,30px); line-height:1.12; margin:54px 0 16px; padding-top:30px; border-top:1px solid var(--line); scroll-margin-top:12px;}
.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:0;}
.legal p, .legal li{font-size:16.5px; line-height:1.72; color:var(--ink-soft);}
.legal p{margin:0 0 16px;}
.legal strong{color:var(--ink);}
.legal ul{margin:0 0 18px; padding-left:22px;}
.legal li{margin-bottom:8px;}
.legal li::marker{color:var(--red-text);}
.legal a{color:var(--ink); text-decoration-color:var(--red); text-decoration-thickness:2px; text-underline-offset:3px;}
.legal a:hover{color:var(--red-text);}
.legal a.btn{color:#fff; text-decoration:none;}
.legal .yr-cookie-link{color:var(--ink); font-size:inherit;}
.draft-note{margin:0 0 36px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--red); border-radius:var(--r); font-size:14.5px; line-height:1.55; color:var(--ink-soft);}
.draft-note strong{color:var(--ink);}
.table-wrap{overflow-x:auto; margin:8px 0 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);}
.table-wrap:focus-visible{outline:2px solid var(--red-text); outline-offset:3px;}
.legal table{border-collapse:collapse; width:100%; min-width:540px;}
.legal th, .legal td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; font-size:14.5px; line-height:1.5; color:var(--ink-soft);}
.legal th{background:var(--graphite-2); color:#fff; font:700 12.5px/1.2 var(--head); text-transform:uppercase; letter-spacing:.07em;}
.legal tbody th{background:transparent; color:var(--ink); font:600 14.5px/1.5 var(--body); text-transform:none; letter-spacing:0;}
.legal table tr > :first-child{border-left:0;} .legal table tr > :last-child{border-right:0;}
.legal thead tr:first-child > *{border-top:0;} .legal tbody tr:last-child > *{border-bottom:0;}
.pendiente{background:#FFE08A; color:#231A00; padding:0 4px; border-radius:3px; font-weight:600;}
@media (max-width:960px){
  .legal-layout{grid-template-columns:1fr; gap:36px;}
  .legal-toc{position:static;}
  .legal-toc ol{grid-template-columns:1fr 1fr; column-gap:14px;}
}
@media (max-width:560px){ .legal-toc ol{grid-template-columns:1fr;} .legal-wrap{padding:48px 0 72px;} }

/* ---------- 404 ---------- */
.nf-links{padding:84px 0 100px;}

/* ---------- Adaptación general del hero ---------- */
@media (max-width:960px){
  .page-hero > .wrap{grid-template-columns:1fr; gap:40px; padding-top:36px; padding-bottom:104px;}
  .art-frame{max-width:none; margin:0; aspect-ratio:16/10;}
  .art-icon{width:22%;}
}
@media (max-width:560px){
  .page-hero .lede{font-size:17px;}
  .hero-actions .btn{width:100%;}
  .art-frame{aspect-ratio:4/3;}
  .art-icon{width:30%;}
  .art-label.br, .art-label.tr{display:none;}
  .brand-big{font-size:clamp(40px,14vw,64px);}
}
.page-hero.compact > .wrap{padding-bottom:76px;}
@media (max-width:960px){ .page-hero.compact > .wrap{padding-bottom:56px;} }

/* Secciones de más abajo en las categorías y marcas: se dibujan al acercarse (con ancla en la dirección se dibuja todo) */
.how, .cta-band, .explore{content-visibility:auto; contain-intrinsic-size:auto 640px;}
html:has(:target) .how, html:has(:target) .cta-band, html:has(:target) .explore{content-visibility:visible;}