/* ---------------------------------------------------------------------------
   iMotores — autos, mecánica y ruta

   Estética de taller: chapa oscura, naranjo de tablero y amarillo de cinta de
   peligro. Se lee de noche y con las manos sucias, que es cuando se mira.

   Como iNoticias, este tema trae maquetación propia además de los colores, y
   por la misma razón: una portada de sitio fierrero —capó de apertura, fichas
   con chaflán, patentes por sección— no se parece a la de un blog cualquiera,
   así que no tiene sitio en `base.css`, donde solo vive lo que comparten los
   siete. Todo lo de abajo cuelga de `.sitio-imotores` y no puede alcanzar a
   ningún otro sitio de la red.

   Nada de esto necesita imágenes: las rayas de peligro, la bandera a cuadros y
   el veteado de la chapa son gradientes. Un sitio que se ve en el taller se
   carga con señal mala, y tres PNG decorativos pesan más que todo el CSS.
--------------------------------------------------------------------------- */

:root {
    --tinta:      #f2f4f6;
    --tinta-suave:#98a3ae;
    --fondo:      #14181d;
    --fondo-alt:  #1c2229;
    --acento:     #ff6b1a;
    --acento-oscuro: #e2560b;
    --borde:      #2a323b;

    /* Chapa cortada, no esquina blanda: el radio casi cero es parte del tono. */
    --radio:      2px;

    --fuente:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Condensada y pesada, como la serigrafía de un tablero o una calcomanía
       de costado. Impact está en Windows y en la mayoría de los Android;
       Haettenschweiler y Arial Narrow cubren el resto sin cambiar el aire. */
    --fuente-titulo: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;

    /* Los datos técnicos van en monoespaciada: kilómetros, fechas, cilindrada.
       Es lo que hace que se lean como medidas y no como texto corrido. */
    --fuente-datos: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;

    --amarillo:   #f5c518;
    --rojo-linea: #d92b1f;
    --ancho:      1180px;

    /* --- Profundidad y color de sistema ---------------------------------- */

    /* En un tema oscuro la jerarquía es al revés: el lienzo es la chapa más
       oscura y las fichas se levantan en un gris de un punto más claro. */
    --lienzo:     #0f1317;
    --superficie: #1a2028;
    --acento-tenue: #35210f;

    /* Sombra negra y dura, más una línea de luz arriba: sobre fondo oscuro una
       sombra suave no existe, y lo que separa las piezas es el brillo del
       canto, como en la chapa. */
    --sombra:      0 -1px 0 rgba(255, 255, 255, .04) inset, 0 8px 20px rgba(0, 0, 0, .55);
    --sombra-alta: 0 -1px 0 rgba(255, 255, 255, .08) inset, 0 14px 34px rgba(0, 0, 0, .7);

    --pie-fondo:  #0b0e12;
    --pie-tinta:  #8b96a2;
    --pie-titulo: #ffffff;
    --pie-enlace: #ffffff;
    --pie-borde:  rgba(255, 255, 255, .12);

}

/* Amarillo y negro en diagonal: la cinta de "no pasar" del taller. Se usa en
   los bordes que marcan zona, nunca de fondo, porque cansa la vista. */
.sitio-imotores .cinta-peligro,
.sitio-imotores .cabecera::before,
.sitio-imotores .pie::before {
    content: "";
    display: block;
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        var(--amarillo) 0 14px,
        #10141a 14px 28px
    );
}

/* Bandera a cuadros. Dos gradientes cruzados y desplazados: el mismo truco de
   siempre para un tablero de ajedrez, con la cuadrícula chica para que a lo
   ancho de una franja se lea como bandera y no como cuadros sueltos. */
.sitio-imotores .cuadros {
    height: 14px;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.9) 25%, transparent 25% 75%, rgba(255,255,255,.9) 75%),
        linear-gradient(45deg, rgba(255,255,255,.9) 25%, transparent 25% 75%, rgba(255,255,255,.9) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    background-color: #0d1116;
}

/* --- Cabecera ------------------------------------------------------------ */

/* Chapa: un gris que no es plano. Las bandas verticales muy tenues imitan el
   veteado del metal cepillado sin caer en la textura de imagen. */
.sitio-imotores .cabecera {
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,.014) 0 2px,
            transparent 2px 5px),
        linear-gradient(180deg, #222932 0%, #171c22 100%);
    border-bottom: 1px solid #000;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
}

.sitio-imotores .cabecera-fila { padding: 16px; align-items: flex-end; }

/* El nombre inclinado, como la calcomanía del costado de un auto. El skew va
   sobre el texto y no sobre el enlace entero para que el área de clic siga
   siendo un rectángulo. */
.sitio-imotores .marca-nombre {
    font-size: 2.3rem;
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
    transform: skewX(-8deg);
    transform-origin: left bottom;
    color: #fff;
    /* La sombra naranja hace de luz de tablero detrás de las letras. */
    text-shadow: 3px 0 0 var(--acento-oscuro);
}

.sitio-imotores .marca-lema {
    font-family: var(--fuente-datos);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--acento);
    margin-top: 6px;
}

/* Cada sección, una patente. Es el guiño más directo del sitio y funciona
   porque las categorías son pocas y cortas; con quince se vería un
   estacionamiento. */
.sitio-imotores .menu { gap: 8px; }

.sitio-imotores .menu a {
    font-family: var(--fuente-datos);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #dfe5ea;
    background: linear-gradient(180deg, #2b333c, #1e242b);
    border: 1px solid #414c57;
    /* Los remaches de los extremos: dos puntos claros a media altura. */
    box-shadow:
        inset 2px 0 0 -1px rgba(255,255,255,.25),
        inset -2px 0 0 -1px rgba(255,255,255,.25);
    border-radius: 3px;
    padding: 6px 12px;
}

.sitio-imotores .menu a:hover {
    color: #14181d;
    background: linear-gradient(180deg, #ffa04d, var(--acento));
    border-color: var(--acento);
    text-decoration: none;
}

.sitio-imotores .buscador input {
    background: #0e1216;
    border-color: #39434e;
    font-family: var(--fuente-datos);
    font-size: .82rem;
}
.sitio-imotores .buscador input:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
}

.sitio-imotores .buscador button {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .78rem;
    color: #14181d;
    font-weight: 800;
}

/* --- Apertura ------------------------------------------------------------ */

/* La nota de tapa ocupa el ancho como un capó abierto: foto grande, y el
   título encima montado sobre el degradado para que se lea sobre cualquier
   foto, clara u oscura. */
.sitio-imotores .capo {
    position: relative;
    margin: 0 0 36px;
    border: 1px solid var(--borde);
    background: var(--fondo-alt);
    overflow: hidden;
}

.sitio-imotores .capo-foto {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    /* Un punto de saturación de más: las fotos de autos aguantan y el sitio
       gana el aire de revista de fierros. */
    filter: saturate(1.12) contrast(1.04);
}

.sitio-imotores .capo-texto {
    position: absolute;
    inset: auto 0 0 0;
    padding: 60px 24px 20px;
    background: linear-gradient(180deg, transparent, rgba(8,11,14,.94) 62%);
}

.sitio-imotores .capo h1 {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.8rem, 4.6vw, 3.1rem);
    line-height: .98;
    margin: 8px 0 10px;
    text-transform: uppercase;
    transform: skewX(-6deg);
    transform-origin: left bottom;
}
.sitio-imotores .capo h1 a { color: #fff; }
.sitio-imotores .capo h1 a:hover { color: var(--acento); text-decoration: none; }

.sitio-imotores .capo p {
    margin: 0;
    max-width: 62ch;
    color: #c3ccd4;
    font-size: 1rem;
}

/* Sin foto el degradado no tiene sobre qué caer, así que la apertura pasa a
   ser una placa de chapa con la misma tipografía. */
.sitio-imotores .capo--sinfoto .capo-texto {
    position: static;
    padding: 26px 24px;
    background: linear-gradient(135deg, #232b34, #171d24);
}

/* --- Fichas -------------------------------------------------------------- */

/* Cada ficha ocupa su alto y no el de la fila. Con el estiramiento por defecto
   de la rejilla, una nota sin foto se alarga hasta igualar a la de al lado y
   queda con un tercio de la ficha en negro, que se lee como un error de carga
   de imagen. */
.sitio-imotores .rejilla { align-items: start; }

/* Chaflán arriba a la derecha: el corte de una ficha de taller perforada. Va
   con clip-path y no con un pseudo-elemento girado para que el recorte afecte
   también a la foto, que es lo que lo hace ver intencionado. */
.sitio-imotores .tarjeta {
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    transition: border-color .15s, transform .15s;
}

/* Al pasar por encima se enciende, como un testigo del tablero. El
   desplazamiento es de 2px: lo justo para que se note sin que la rejilla
   baile. */
.sitio-imotores .tarjeta:hover {
    border-color: var(--acento);
    transform: translateY(-2px);
}

.sitio-imotores .tarjeta-foto img {
    aspect-ratio: 16 / 10;
    filter: saturate(1.1);
}

/* Misma proporción para la portada de color, o la fila queda escalonada. */
.sitio-imotores .tarjeta-foto--vacia { aspect-ratio: 16 / 10; }

.sitio-imotores .tarjeta-cuerpo { padding: 14px 16px 16px; gap: 7px; }

.sitio-imotores .tarjeta-titulo {
    font-size: 1.12rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.sitio-imotores .tarjeta-titulo a { color: #fff; }
.sitio-imotores .tarjeta:hover .tarjeta-titulo a { color: var(--acento); text-decoration: none; }

/* La etiqueta de sección, en naranjo y con una barra delante: el mismo código
   de color del tablero, para que la vista la encuentre antes que el título. */
.sitio-imotores .etiqueta {
    font-family: var(--fuente-datos);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    padding-left: 10px;
    border-left: 3px solid var(--acento);
}

.sitio-imotores .tarjeta-extracto { font-size: .89rem; color: var(--tinta-suave); }

/* La fecha como lectura de odómetro. */
.sitio-imotores .tarjeta-pie,
.sitio-imotores .nota-datos {
    font-family: var(--fuente-datos);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* --- Títulos de sección --------------------------------------------------- */

.sitio-imotores .titulo-seccion,
.sitio-imotores .relacionados > h2,
.sitio-imotores .resumen h1 {
    text-transform: uppercase;
    letter-spacing: .02em;
    transform: skewX(-6deg);
    transform-origin: left bottom;
    display: inline-block;
}

/* La franja bajo el título: naranjo que se apaga en rojo, como la zona roja del
   tacómetro. */
.sitio-imotores .titulo-seccion::after,
.sitio-imotores .relacionados > h2::after,
.sitio-imotores .resumen h1::after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 6px;
    background: linear-gradient(90deg, var(--acento) 0 62%, var(--rojo-linea) 62% 100%);
}

/* --- Nota ---------------------------------------------------------------- */

.sitio-imotores .nota { max-width: 760px; }

.sitio-imotores .nota h1 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.02;
    text-transform: uppercase;
    transform: skewX(-5deg);
    transform-origin: left bottom;
}

.sitio-imotores .nota-datos {
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 8px 0;
    color: var(--acento);
}

.sitio-imotores .nota-foto { border: 1px solid var(--borde); filter: saturate(1.08); }

.sitio-imotores .nota-bajada {
    border-left: 4px solid var(--acento);
    padding-left: 16px;
    color: #cfd7de;
    font-size: 1.1rem;
}

.sitio-imotores .nota-cuerpo h2,
.sitio-imotores .nota-cuerpo h3 {
    font-family: var(--fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .01em;
}

/* La ficha técnica de la nota: dos columnas de datos duros, como el cuadro que
   trae cualquier prueba de manejo. */
.sitio-imotores .datos-tecnicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--borde);
    border: 1px solid var(--borde);
    margin: 26px 0;
}
.sitio-imotores .dato {
    background: var(--fondo-alt);
    padding: 12px 14px;
}
.sitio-imotores .dato dt {
    font-family: var(--fuente-datos);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tinta-suave);
}
.sitio-imotores .dato dd {
    margin: 4px 0 0;
    font-family: var(--fuente-titulo);
    font-size: 1.35rem;
    color: #fff;
}

.sitio-imotores .nota-origen {
    background: #0f1419;
    border-left: 4px solid var(--amarillo);
    border-radius: 0;
}

/* --- Vacío --------------------------------------------------------------- */

/* El taller sin autos. Un sitio recién abierto pasa por acá y merece verse
   cuidado: la rejilla vacía sin más parece una página rota. */
.sitio-imotores .vacio {
    border: 2px dashed var(--borde);
    padding: 40px 24px;
    text-align: center;
    font-family: var(--fuente-datos);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
}

/* --- Paginación y pie ----------------------------------------------------- */

.sitio-imotores .paginacion a {
    font-family: var(--fuente-datos);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid var(--borde);
    padding: 9px 16px;
    color: var(--tinta);
}
.sitio-imotores .paginacion a:hover {
    border-color: var(--acento);
    color: var(--acento);
    text-decoration: none;
}
.sitio-imotores .paginacion span {
    font-family: var(--fuente-datos);
    font-size: .78rem;
    color: var(--tinta-suave);
}

.sitio-imotores .pie {
    background: linear-gradient(180deg, #10141a, #0b0e12);
    border-top: 1px solid #000;
    padding: 0 0 26px;
}
.sitio-imotores .pie .contenedor { padding-top: 24px; }
/* Los sitios de la red van como fichas con su color de marca, igual que en los
   otros seis: lo resuelve `.pie-sitio` en base.css y acá solo se le deja el
   canto recto que usa todo este tema. */
.sitio-imotores .pie-sitio { border-radius: 2px; }

/* --- Publicidad ----------------------------------------------------------- */

/* El hueco también es de chapa, pero la marca "Publicidad" se mantiene bien
   visible: el tema no puede servir para disimular que es un anuncio. */
.sitio-imotores .anuncio {
    background: var(--fondo-alt);
    border-color: var(--borde);
    border-radius: 0;
}
/* Con pieza gráfica el hueco desaparece y queda el banner solo, como en el
   resto de la red: la chapa de fondo detrás de una imagen que ya trae la suya
   solo dejaba un marco gris. */
.sitio-imotores .anuncio--imagen { background: transparent; border: 0; }

.sitio-imotores .anuncio-marca {
    background: var(--amarillo);
    color: #14181d;
    font-weight: 700;
}
.sitio-imotores .anuncio strong { text-transform: uppercase; }

@media (max-width: 720px) {

    .sitio-imotores .marca-nombre { font-size: 1.7rem; }

    /*
        En el teléfono el título baja de la foto en vez de montarse encima.

        La foto es 21/9: en 390 px de ancho mide 167 px de alto, y el título en
        tipografía condensada a tres líneas no cabe ahí. Montado, se salía del
        contenedor y `overflow: hidden` lo cortaba por arriba —se leía media
        letra—. Debajo entra completo y la foto se sigue viendo entera.
    */
    .sitio-imotores .capo-texto {
        position: static;
        padding: 16px;
        background: linear-gradient(135deg, #232b34, #171d24);
    }

    .sitio-imotores .capo h1 { font-size: 1.5rem; }

    .sitio-imotores .menu a { padding: 5px 9px; font-size: .68rem; }
}

/* El chip de sección va sobre un marrón quemado, así que el texto usa el
   naranjo CLARO y no el oscuro del tema: el oscuro sobre ese fondo se queda en
   3,6:1 y no se lee. Con este llega a 6,6:1. */
.sitio-imotores .etiqueta { color: #ff8c4a; }
.sitio-imotores a.etiqueta:hover { background: var(--acento); color: #14181d; }