@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/fuentes/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/fuentes/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fuentes/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/fuentes/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* El tablero de un auto de noche (DESIGN.md): grafito casi negro, el carmesí como franja entera, los
   números prendidos en segmentos y el dibujo de la pieza en trazo claro. Apretado. */
:root{
  color-scheme:dark;
  --noche:#16181b;--grafito:#25292e;--grafito-claro:#30353b;--borde:#3a4047;
  --claro:#f3f3f3;--medio:#c5c9cd;--tenue:#a1a6ad;
  --carmesi:#a5153f;--pozo:#0b0c0e;--elegido:#3a2830;--rosa:#fed3d7;--luz:#ee6e82;--luz-brillo:rgb(224 58 97/.75);--apagado:rgb(255 255 255/.07);
  --texto:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --salida:cubic-bezier(.16,1,.3,1);
  accent-color:var(--luz);scrollbar-color:var(--borde) var(--noche);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body{margin:0;background:var(--noche);color:var(--claro);font:16px/1.5 var(--texto);font-feature-settings:"tnum";-webkit-text-size-adjust:100%}
::selection{background:var(--carmesi);color:#fff}
:focus-visible{outline:3px solid var(--luz);outline-offset:2px}
a{color:inherit;text-decoration-color:var(--borde);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--luz)}
h1,h2,h3{font-weight:600;line-height:1;margin:0;text-wrap:balance}
[data-color=brand-1]{fill:var(--claro)}[data-color=brand-2]{fill:var(--luz)}
button{font:inherit;color:inherit;cursor:pointer}

.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:80rem;margin:0 auto;padding:1rem}
.barra .marca svg{display:block;width:120px;height:auto}
.barra nav{display:flex;gap:1.25rem;font-size:.875rem}
.barra nav a{text-decoration:none;color:var(--medio)}
.barra nav a:hover{color:var(--claro)}
.barra nav a:not(:last-child){display:none}

/* Tapa y buscadores */
.tapa{max-width:80rem;margin:0 auto;padding:.75rem 1rem 1.25rem}
.tapa h1{font-size:clamp(3rem,13vw,6rem);letter-spacing:-.04em;line-height:.9}
.bajada{font-size:1.125rem;line-height:1.45;color:var(--medio);max-width:40ch;margin:.875rem 0 0}
.buscar{display:grid;gap:.75rem;max-width:80rem;margin:0 auto;padding:0 1rem 2.5rem}
.panel{background:var(--grafito);border-radius:10px;padding:1rem;box-shadow:inset 0 0 0 1px var(--borde)}
.panel h2{font-size:1.375rem;letter-spacing:-.01em}
.panel h2 label{cursor:inherit}
.paso{margin:.375rem 0 .75rem;font-size:.9375rem;color:var(--medio);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.paso strong{color:var(--claro)}
.paso button{background:none;border:0;padding:0;color:var(--luz);text-decoration:underline;text-underline-offset:.2em;font-size:.875rem}
.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));grid-auto-rows:1fr;gap:.375rem}
.opciones button,.opciones a{min-height:2.75rem;padding:.5rem .75rem;background:var(--grafito-claro);border:1px solid var(--borde);border-radius:6px;
  text-align:left;font-weight:600;font-size:.9375rem;text-decoration:none;display:flex;align-items:center;transition:background .2s var(--salida),border-color .2s var(--salida)}
.opciones [aria-pressed=true]{border-color:var(--luz);background:var(--elegido);color:#fff}
.opciones button:hover,.opciones a:hover{border-color:var(--luz);background:var(--elegido)}
.o{display:none}
.entrada{position:relative;background:var(--pozo);border-radius:6px;padding:.875rem .75rem;box-shadow:inset 0 2px 8px rgb(0 0 0/.7)}
.entrada:focus-within{box-shadow:inset 0 2px 8px rgb(0 0 0/.7),0 0 0 2px var(--luz)}
.entrada input{position:absolute;inset:0;width:100%;border:0;background:none;color:transparent;caret-color:transparent;font:1.5rem var(--mono);appearance:none}
.entrada input::placeholder{color:transparent}
.entrada input:focus-visible{outline:0}
.resultados{background:var(--carmesi);border-radius:10px;padding:1rem}
.resultados h2{font-size:1.25rem}
.resultados ol{list-style:none;margin:.625rem 0 0;padding:0}
.resultados li{border-top:1px solid rgb(255 255 255/.2)}
.resultados a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.625rem .25rem;text-decoration:none}
.resultados a:hover{background:rgb(0 0 0/.15)}
.resultados .auto{min-width:0;font-size:.9375rem;color:var(--rosa)}
.resultados .auto strong{display:block;color:#fff;font-size:1.0625rem}
.resultados .visor{background:var(--noche);padding:.35rem .5rem;border-radius:4px;height:2.1rem}
.resultados .nada{padding:.75rem .25rem;color:var(--rosa)}

/* Visores de segmentos */
.visor{display:flex;gap:.16em;height:1.45rem;flex-shrink:0}
.visor svg{height:100%;width:auto;overflow:visible}
.visor line{stroke-width:5.5;stroke-linecap:round}
.visor .off{stroke:var(--apagado)}
.visor .on{stroke:var(--luz);filter:drop-shadow(0 0 3px var(--luz-brillo))}
.visor.grande{gap:.3rem;height:auto}
.visor.grande svg{flex:1 1 0;min-width:0;width:100%;height:auto;max-height:2.75rem}
.ejemplos{margin:.75rem 0 0;font-size:.875rem;color:var(--medio)}
.ejemplos a{color:var(--claro);font-weight:600}
.visor.ejemplo .on{stroke:rgb(238 110 130/.35);filter:none}

/* Líneas de producto */
.lineas{background:var(--carmesi);padding:2rem 1rem 1.5rem}
.linea{display:grid;gap:1.25rem;max-width:80rem;margin:0 auto;align-items:center}
.linea-dibujo .bomba{color:#fff}
.linea-dibujo .pieza .relleno{fill:var(--carmesi)}
.linea-dibujo .ejes line{stroke:rgb(255 255 255/.35)}
.linea-dibujo .rayado{stroke:rgb(255 255 255/.6)}
.linea h2{font-size:clamp(2.5rem,10vw,4.5rem);letter-spacing:-.035em;line-height:.92}
.linea-texto>p{margin:.75rem 0 0;font-size:1.125rem;line-height:1.45;max-width:38ch;color:var(--rosa)}
.linea .cifras{margin:1rem 0 0;font-size:1.375rem;line-height:1.35;color:#fff;max-width:28ch}
.cifras .dato{font:500 1.15em var(--mono)}
.acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0}
.boton{display:inline-flex;align-items:center;min-height:2.875rem;padding:.75rem 1.25rem;background:var(--noche);color:#fff;border-radius:6px;
  font-weight:600;text-decoration:none;transition:translate .25s var(--salida),box-shadow .25s var(--salida)}
.boton:hover{translate:0 -2px;box-shadow:0 10px 20px -8px rgb(0 0 0/.5)}
.boton.secundario{background:none;box-shadow:inset 0 0 0 1.5px #fff}
.vienen{max-width:80rem;margin:1.5rem auto 0;padding-top:.75rem;border-top:1px solid rgb(255 255 255/.25);font-size:.875rem;color:var(--rosa)}

/* Catálogo */
.catalogo{max-width:80rem;margin:0 auto;padding:2.5rem 1rem 3rem}
.catalogo-cabeza{display:grid;gap:.875rem;margin-bottom:1.25rem}
.catalogo h2{font-size:clamp(2rem,7vw,3.5rem);letter-spacing:-.03em}
.marcas{display:flex;flex-wrap:wrap;gap:.375rem}
.marcas a{padding:.3rem .7rem;border:1px solid var(--borde);border-radius:999px;font-size:.8125rem;text-decoration:none;color:var(--medio)}
.marcas a:hover{border-color:var(--luz);color:var(--claro)}
.grupo{margin-bottom:1.25rem}
.grupo h3{font-size:1.125rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--luz);padding-bottom:.375rem;border-bottom:2px solid var(--luz)}
.grupo ul{list-style:none;margin:0;padding:0}
.grupo a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .25rem;border-bottom:1px solid var(--borde);
  text-decoration:none;transition:background .25s var(--salida)}
.grupo a:hover{background:var(--grafito)}
.datos{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.datos .modelos{font-weight:600}
.datos .otra,.datos .motor{font-size:.8125rem;color:var(--tenue)}
.grupo .numero{flex-shrink:0;font:500 .9375rem var(--mono);color:var(--luz);text-align:right}

/* Ficha */
main.ficha,main.guia,main.listado{max-width:80rem;margin:0 auto;padding:.25rem 1rem 3rem;display:grid;gap:1.25rem}
.migas{font-size:.875rem;color:var(--tenue)}
.ficha-tapa{background:var(--grafito);border-radius:10px;padding:1.25rem;box-shadow:inset 0 0 0 1px var(--borde)}
.ficha-tapa h1{font-size:clamp(1.75rem,6vw,3rem);letter-spacing:-.025em;line-height:1}
.figura{display:inline-flex;align-items:center;gap:.625rem;margin:1rem 0 0;padding:.5rem .875rem;background:rgb(238 110 130/.12);
  border:1px solid var(--luz);border-radius:6px;font-weight:600;color:var(--claro)}
.figura::before{content:"";width:.875rem;height:.5rem;border-left:2.5px solid var(--luz);border-bottom:2.5px solid var(--luz);rotate:-45deg;translate:0 -2px}
.rotulo-numero{margin:1.25rem 0 .375rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--medio)}
.visor.enorme{background:var(--pozo);border-radius:6px;padding:.75rem;height:auto;gap:clamp(.2rem,1vw,.5rem);box-shadow:inset 0 2px 8px rgb(0 0 0/.7)}
.visor.enorme svg{flex:1 1 0;min-width:0;width:100%;height:auto;max-height:6rem}
.numero-texto{font:500 clamp(2rem,8vw,4rem)/1 var(--mono);color:var(--luz);overflow-wrap:anywhere}
.ficha-tapa .motor{margin:.75rem 0 0;color:var(--medio)}
.plano .foto{display:block;width:100%;height:auto;border-radius:6px}
.copiables{display:flex;flex-wrap:wrap;gap:.375rem;margin:.625rem 0 0}
.copiar{display:inline-flex;gap:.625rem;align-items:center;padding:.4rem .75rem;background:none;border:1px solid var(--borde);border-radius:6px;font-size:.8125rem;color:var(--medio)}
.copiar span{font:500 .9375rem var(--mono);color:var(--claro)}
.copiar:hover{border-color:var(--luz)}
.copiar.copiado{border-color:var(--luz);color:var(--luz)}
.regla{margin:1rem 0 0;color:var(--medio)}
.estado{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-weight:600;color:var(--luz)}
.estado::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--luz);box-shadow:0 0 6px var(--luz-brillo)}
.plano{margin:0;background:var(--grafito);border-radius:10px;padding:1rem;box-shadow:inset 0 0 0 1px var(--borde)}
.plano ol{margin:.75rem 0 0;padding-left:1.5rem;columns:2 12rem;font-size:.875rem;color:var(--medio)}
.plano li::marker{color:var(--luz)}
.plano p{font-size:.8125rem;color:var(--tenue);margin:.75rem 0 0}
.compatibles h2{font-size:1.75rem;margin-bottom:.75rem}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--medio);padding:.5rem;border-bottom:2px solid var(--luz)}
td{padding:.6rem .5rem;border-bottom:1px solid var(--borde)}
.anios{font-family:var(--mono);color:var(--tenue)}
.nota{margin:1rem 0 0;font-size:.9375rem}

/* Guía: qué es una depresora */
.listado .bajada{margin:.5rem 0 .5rem}
.listado h1,.guia-tapa h1{font-size:clamp(2.25rem,8vw,4rem);letter-spacing:-.03em;line-height:.95;max-width:18ch}
.bloque{background:var(--grafito);border-radius:10px;padding:1.25rem;box-shadow:inset 0 0 0 1px var(--borde)}
.bloque h2{font-size:1.5rem;margin-bottom:.75rem}
.bloque ul,.bloque ol{margin:0;padding-left:1.25rem;color:var(--medio);max-width:62ch}
.bloque li{margin:.4rem 0}
.bloque li::marker{color:var(--luz)}
.bloque strong{color:var(--claro)}
.aviso{margin:1rem 0 0;padding:.75rem 1rem;background:var(--carmesi);border-radius:6px;font-weight:600}

/* El dibujo, en trazo claro sobre grafito */
.bomba{display:block;width:100%;height:auto;color:var(--claro)}
.pieza *{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.pieza .relleno{fill:var(--grafito)}
.pieza .fino{stroke-width:1.1}
.rayado{stroke:var(--tenue);stroke-width:1.2}
.ejes line{stroke:var(--borde);stroke-width:1;stroke-dasharray:18 5 3 5}
.llamadas line{stroke:var(--luz);stroke-width:1.25}
.llamadas .nodo{fill:var(--luz)}
.llamadas .globo{fill:var(--noche);stroke:var(--luz);stroke-width:1.5}
.llamadas text{font:500 15px var(--mono);fill:var(--luz)}

.pie{display:grid;gap:.25rem;max-width:80rem;margin:0 auto;padding:1.25rem 1rem 2rem;border-top:1px solid var(--borde);font-size:.875rem;color:var(--tenue)}
.pie p{margin:0}
.pie .ml{color:var(--luz);font-weight:600}

@media (min-width:60rem){
  .barra{padding:1.25rem 1.5rem}
  .barra nav a:not(:last-child){display:inline}
  .tapa{padding:1.5rem 1.5rem 1.75rem}
  .tapa h1{font-size:6rem}
  .buscar{grid-template-columns:minmax(0,1.35fr) auto minmax(0,1fr);align-items:stretch;column-gap:1rem;padding:0 1.5rem 3rem}
  .por-numero{align-self:start}
  .guia .bloque:last-of-type ul{columns:2;column-gap:2.5rem;max-width:none}
  .guia .bloque:last-of-type li{break-inside:avoid;margin-top:0}
  .o{display:flex;align-items:center;margin:0;font-size:1.25rem;color:var(--tenue)}
  .resultados{grid-column:1/-1}
  .lineas{padding:3rem max(1.5rem,calc((100vw - 77rem)/2)) 2rem}
  .linea{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:4rem}
  .catalogo{padding:3rem 1.5rem 4rem}
  .catalogo-cabeza{grid-template-columns:auto 1fr;align-items:end;column-gap:2rem}
  .grupos{columns:2;column-gap:2.5rem}
  .grupo{break-inside:avoid;margin-bottom:1.75rem}
  main.ficha{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:2rem;align-items:start;padding:.5rem 1.5rem 4rem}
  main.guia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"migas migas" "tapa tapa" "plano senales" "plano prueba" "antes antes";
    column-gap:2rem;align-items:start;padding:.5rem 1.5rem 4rem}
  main.guia>.migas{grid-area:migas}main.guia>.guia-tapa{grid-area:tapa}main.guia>.plano{grid-area:plano}
  main.guia>.bloque:nth-of-type(1){grid-area:senales}main.guia>.bloque:nth-of-type(2){grid-area:prueba}main.guia>.bloque:nth-of-type(3){grid-area:antes}
  .guia-tapa,.migas,.compatibles{grid-column:1/-1}
  main.listado{padding:.5rem 1.5rem 4rem}
  .pie{grid-template-columns:auto 1fr auto;column-gap:2rem;padding:1.25rem 1.5rem 2rem}
}
/* El único movimiento: los segmentos de un resultado se prenden de izquierda a derecha. */
.resultados .visor svg{animation:prender .45s var(--salida) calc(var(--i) * 30ms) backwards}
@keyframes prender{from{opacity:.1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}