/* ==========================================================================
   EL INICIO (tanda 36)
   --------------------------------------------------------------------------
   Se carga SOLO en la portada (ver el enqueue de src/includes/actions/home.php).
   No entra en index.css porque el catalogo y la ficha no usan ni una de estas
   reglas, y index.css se descarga en todas las paginas.

   Nada de librerias ni de fuentes externas. Las tres familias (Archivo para los
   titulares, Public Sans para el texto y JetBrains Mono para los rotulos en
   versales) ya las sirve el propio tema desde assets/fonts/ y las declara
   index.css: aqui solo se nombran.

   Misma linea visual que el catalogo y la ficha: fondo #f2f3f4, superficies
   blancas, borde #e4e6e8, acento rojo #d03e17.

   Prefijo `mi-` (motos inicio).
   ========================================================================== */

.mi {
    --mi-bg: #f2f3f4;
    --mi-blanco: #fff;
    --mi-linea: #e4e6e8;
    --mi-tinta: #14171a;
    --mi-texto: #454b52;
    --mi-apagado: #5f6570;
    --mi-tenue: #8b9096;
    --mi-rojo: #d03e17;
    --mi-rojo-hondo: #a83210;

    --mi-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mi-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mi-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* El icono de WhatsApp del boton reducido del movil. Va como mascara, no
       como <img>: asi toma el color del boton y no hay que servir dos ficheros
       (uno blanco y otro rojo). */
    --mi-wa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>");

    background: var(--mi-bg);
    color: var(--mi-tinta);
    font-family: var(--mi-sans);
    display: block;
}

.mi *, .mi *::before, .mi *::after { box-sizing: border-box; }

.mi-ancho {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* La flechita de los botones y los enlaces «ver mas». Es CSS, no un SVG por
   enlace: son seis y no merecen seis peticiones ni seis kilobytes de marcado. */
.mi .mi-flecha {
    display: inline-block;
    width: 7px; height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 8px;
    margin-bottom: 1px;
    flex: none;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

.mi-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 620px;
    background: var(--mi-bg);
}

/* El corte en diagonal baja hacia la izquierda. Va en la capa del fondo y no en
   la seccion entera: si se recortara la seccion, se llevaria por delante el
   texto y el buscador. */
.mi-hero__fondo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--mi-tinta);
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.mi-hero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    display: block;
}

/* Velo oscuro arriba y abajo: arriba para que el titular blanco se lea sobre el
   cielo claro, abajo para que el buscador no se pierda en el asfalto.

   Y UN TERCER VELO POR LA IZQUIERDA. Con solo el vertical, la linea de apoyo
   («62 motos usadas en el inventario...») cae justo sobre la parte mas clara de
   la foto —el sol y el asfalto iluminado— y en blanco sobre naranja claro no se
   lee. El degradado lateral oscurece el lado del texto y deja limpio el de la
   moto, que es lo que hay que ver. Se apila antes que el vertical para que el
   negro de abajo siga mandando. */
.mi-hero__velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(10, 12, 14, .74) 0%,
            rgba(10, 12, 14, .52) 30%,
            rgba(10, 12, 14, .14) 52%,
            rgba(10, 12, 14, 0) 68%),
        linear-gradient(180deg,
            rgba(10, 12, 14, .62) 0%,
            rgba(10, 12, 14, .12) 30%,
            rgba(10, 12, 14, .28) 58%,
            rgba(10, 12, 14, .86) 100%);
}

.mi-hero__dentro {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 96px 0 120px;
}

.mi-hero__antetitulo {
    margin: 0 0 14px;
    font-family: var(--mi-mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.mi-hero__titulo {
    margin: 0;
    font-family: var(--mi-display);
    font-weight: 800;
    font-size: clamp(38px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -.04em;
    color: #fff;
    max-width: 15ch;
    text-wrap: balance;
}

.mi-hero__titulo em { font-style: normal; color: var(--mi-rojo); }

.mi-hero__apoyo {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    max-width: 46ch;
}

/* El buscador y el boton van desplazados a la derecha y elevados para que el
   corte diagonal no se los coma por la esquina de abajo a la izquierda. */
.mi-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    margin-left: 72px;
    max-width: 860px;
}

.mi-buscador {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    height: 62px;
    padding: 0 8px 0 20px;
    box-shadow: 0 12px 32px rgba(6, 8, 10, .3);
}

/* La lupa, dibujada con dos formas: un circulo y el mango. Sin SVG. */
.mi-buscador__lupa {
    flex: none;
    position: relative;
    width: 18px; height: 18px;
    border: 2.2px solid var(--mi-tenue);
    border-radius: 50%;
}
.mi-buscador__lupa::after {
    content: "";
    position: absolute;
    right: -6px; bottom: -3px;
    width: 8px; height: 2.2px;
    background: var(--mi-tenue);
    border-radius: 2px;
    transform: rotate(45deg);
}

.mi-buscador input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    font-family: var(--mi-sans);
    font-size: 16px;
    color: var(--mi-tinta);
}
.mi-buscador input::placeholder { color: #9aa0a6; }

.mi-buscador__boton {
    flex: none;
    height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: 9px;
    background: var(--mi-tinta);
    color: #fff;
    font-family: var(--mi-display);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.mi-buscador__boton:hover { background: #000; }

.mi-hero__inventario {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0 30px;
    border-radius: 12px;
    background: var(--mi-rojo);
    color: #fff;
    font-family: var(--mi-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(6, 8, 10, .28);
}
.mi-hero__inventario:hover { background: var(--mi-rojo-hondo); color: #fff; }

.mi-hero__atajos {
    margin-top: 16px;
    margin-left: 72px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.mi-hero__atajos-rotulo {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .62);
    margin-right: 4px;
}
.mi-hero__atajos a {
    font-size: 12.5px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    padding: 6px 13px;
}
.mi-hero__atajos a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ==========================================================================
   2. REPUESTOS — montada sobre la diagonal del hero
   ========================================================================== */

.mi-repuestos {
    position: relative;
    z-index: 5;
    margin-top: -78px;
    margin-bottom: 52px;
    display: flex;
    align-items: stretch;
    background: var(--mi-blanco);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 20px 46px rgba(6, 8, 10, .16);
}

.mi-repuestos__filo { width: 5px; flex: none; background: var(--mi-rojo); }

.mi-repuestos__foto {
    width: 28%;
    flex: none;
    position: relative;
    background: #0d0f11;
    overflow: hidden;
    min-height: 172px;
}
.mi-repuestos__foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.mi-repuestos__texto {
    flex: 1;
    min-width: 0;
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mi-repuestos__antetitulo {
    font-family: var(--mi-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mi-rojo);
    margin-bottom: 9px;
}
.mi-repuestos__titulo {
    font-family: var(--mi-display);
    font-weight: 800;
    font-size: 25px;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--mi-tinta);
}
.mi-repuestos__linea {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mi-texto);
    max-width: 52ch;
}

.mi-repuestos__boton {
    flex: none;
    align-self: center;
    margin-right: 30px;
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 24px;
    border-radius: 9px;
    background: var(--mi-tinta);
    color: #fff;
    font-family: var(--mi-display);
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
}
.mi-repuestos:hover .mi-repuestos__boton { background: var(--mi-rojo); }

/* ==========================================================================
   Cabecera de seccion
   ========================================================================== */

.mi-bloque { padding: 64px 0 0; }
.mi-bloque:first-child { padding-top: 0; }

.mi-cabecera {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}
.mi-cabecera__titulo {
    margin: 0;
    font-family: var(--mi-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.03em;
    color: var(--mi-tinta);
}
.mi-cabecera__apoyo {
    margin: 6px 0 0;
    font-size: 14.5px;
    color: var(--mi-apagado);
}
.mi-cabecera__mas {
    margin-left: auto;
    font-family: var(--mi-display);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--mi-rojo);
}
.mi-cabecera__mas:hover { color: var(--mi-rojo-hondo); }

/* ==========================================================================
   3. POR CATEGORÍA
   ========================================================================== */

.mi-cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.mi-cat {
    position: relative;
    background: var(--mi-blanco);
    border: 1px solid var(--mi-linea);
    border-radius: 14px;
    overflow: hidden;
    display: block;
    min-height: 346px;
    padding: 24px 22px;
    text-decoration: none;
}
.mi-cat:hover { border-color: #c3c8cd; }

/* La primera va en negro para romper la fila, como pide el brief. */
.mi-cat--oscura { background: var(--mi-tinta); border-color: var(--mi-tinta); }

/* La moto se sale por el borde derecho de la tarjeta. */
/* `bottom: 0` y no un valor negativo: las seis fotos traen distinto margen
   transparente por abajo, y con -10px la rueda delantera de la XTZ quedaba
   cortada por el borde de la tarjeta mientras las demas no. */
.mi-cat__arte {
    position: absolute;
    right: -18px;
    bottom: 0;
    width: 258px;
    display: grid;
    place-items: end center;
    pointer-events: none;
}
.mi-cat__arte img {
    width: 100%;
    height: auto;
    display: block;
}

/* El hueco de la foto que todavia no esta. Se marca, no se disimula. */
.mi-cat__pendiente {
    font-family: var(--mi-mono);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b9bec4;
    white-space: nowrap;
    padding: 0 0 18px 18px;
}
.mi-cat--oscura .mi-cat__pendiente { color: rgba(255, 255, 255, .38); }

.mi-cat__rotulo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.mi-cat__rotulo b {
    font-family: var(--mi-display);
    font-weight: 800;
    font-size: 26px;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--mi-tinta);
}
.mi-cat__rotulo i {
    font-style: normal;
    font-family: var(--mi-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mi-tenue);
}
.mi-cat--oscura .mi-cat__rotulo b { color: #fff; }
.mi-cat--oscura .mi-cat__rotulo i { color: rgba(255, 255, 255, .55); }

/* Rotulo de una sola palabra muy larga («Semiautomáticas»): a 26 px pedia
   257 px sobre los 218 utiles de la tarjeta y se cortaba contra el borde. Una
   palabra sola no puede partirse en dos lineas sin meter un guion, asi que lo
   que baja es el cuerpo. Quien lleva esta clase lo decide el servidor mirando
   la palabra mas larga (`motos_home_rotulo_largo()`), no una lista escrita a
   mano: si mañana alguien crea un tipo con nombre largo, se arregla solo. */
.mi-cat__rotulo--largo b { font-size: 20px; }

.mi-cat__flecha {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mi-linea);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mi-cat__flecha::before {
    content: "";
    width: 8px; height: 8px;
    border-top: 2px solid var(--mi-tinta);
    border-right: 2px solid var(--mi-tinta);
    transform: rotate(45deg);
    margin-left: -3px;
}
.mi-cat--oscura .mi-cat__flecha { background: var(--mi-rojo); border-color: var(--mi-rojo); }
.mi-cat--oscura .mi-cat__flecha::before { border-color: #fff; }
.mi-cat:hover .mi-cat__flecha { background: var(--mi-rojo); border-color: var(--mi-rojo); }
.mi-cat:hover .mi-cat__flecha::before { border-color: #fff; }

/* ==========================================================================
   4. ÚLTIMAS PUBLICACIONES — tarjeta horizontal, dos por fila
   ========================================================================== */

/* Dos por fila y no cuatro: en horizontal, cuatro seguidas dejan la foto tan
   estrecha que no se ve la moto, y la foto es el argumento de venta. */
.mi-ultimas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.mi-moto {
    background: var(--mi-blanco);
    border: 1px solid var(--mi-linea);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.mi-moto:hover { border-color: #c3c8cd; }

.mi-moto__foto {
    position: relative;
    width: 44%;
    flex: none;
    min-height: 196px;
    background: repeating-linear-gradient(135deg, #e9ebed 0 14px, #f0f2f3 14px 28px);
}
/* La foto va FUERA DEL FLUJO a proposito. Si se deja como imagen normal, su
   proporcion 4:3 manda: a 298 px de ancho pide 223 de alto, estira la tarjeta a
   225 y deja un vacio de 60 px entre los datos y el precio, porque el texto solo
   ocupa 164. Sacandola del flujo la altura la fija la tarjeta (los 196 px de
   min-height) y la foto se recorta para llenarla, que es lo que pide la maqueta:
   «foto al 44% a la izquierda». */
.mi-moto__foto a { position: absolute; inset: 0; display: block; }
.mi-moto__foto img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.mi-moto__nueva {
    position: absolute;
    top: 12px; left: 12px;
    background: rgba(20, 23, 26, .88);
    color: #fff;
    font-family: var(--mi-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 6px;
}

.mi-moto__cuerpo {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mi-moto__marca {
    margin: 0 0 6px;
    font-family: var(--mi-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mi-apagado);
}

.mi-moto__modelo {
    margin: 0 0 10px;
    font-family: var(--mi-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.mi-moto__modelo a { color: var(--mi-tinta); text-decoration: none; }
.mi-moto__modelo a:hover { color: var(--mi-rojo); }
.mi-moto__modelo span { color: #7a808a; font-weight: 600; }

.mi-moto__datos {
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--mi-apagado);
}

.mi-moto__pie {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.mi-moto__precio {
    font-family: var(--mi-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.03em;
    color: var(--mi-tinta);
}

.mi-moto__wa {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--mi-rojo);
    color: #fff;
    font-family: var(--mi-display);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.mi-moto__wa:hover { background: var(--mi-rojo-hondo); color: #fff; }

/* ==========================================================================
   5. AQUI ESTABA LA FRANJA DE SEDES

   TANDA 36-FIX2b: se fue del inicio porque el pie del sitio es tambien un
   bloque oscuro con las mismas tres sedes y se pinta justo debajo. Sus
   estilos (.mi-sedes, .mi-sede__*) se van con ella; los del pie viven en
   _marco.scss, con prefijo `mp-`.

   Lo que queda aqui es el aire con el que la portada termina: la franja lo
   traia puesto (64 px de margen arriba) y sin ella el ultimo bloque quedaba
   pegado al pie.
   ========================================================================== */

.mi-ancho { padding-bottom: 72px; }

/* ==========================================================================
   PANTALLAS MEDIANAS
   ========================================================================== */

@media (max-width: 1180px) {
    .mi-cats { grid-template-columns: repeat(3, 1fr); }
    .mi-cat { min-height: 300px; }
}

@media (max-width: 1080px) {
    .mi-ultimas { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */

@media (max-width: 760px) {

    .mi-ancho { padding-left: 18px; padding-right: 18px; }

    /* La diagonal se suaviza al 5%: al 12% de escritorio, en una pantalla
       estrecha el corte se come media foto. */
    .mi-hero { min-height: 0; }
    .mi-hero__fondo { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }
    .mi-hero__dentro { padding: 54px 0 54px; }
    .mi-hero__titulo { max-width: none; font-size: 36px; }
    .mi-hero__apoyo { font-size: 15.5px; margin-top: 12px; }

    /* Buscador y boton apilados, a ancho completo y 56 px de alto: es la
       medida en la que un pulgar acierta a la primera. */
    .mi-hero__acciones {
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
        margin-left: 0;
    }
    .mi-buscador { flex: none; width: 100%; height: 56px; padding: 0 6px 0 16px; }
    .mi-buscador input { font-size: 15px; }
    .mi-buscador__boton { height: 44px; padding: 0 16px; font-size: 13.5px; }
    .mi-hero__inventario { width: 100%; height: 56px; font-size: 15.5px; }

    .mi-hero__atajos { margin-top: 14px; margin-left: 0; gap: 7px; }
    .mi-hero__atajos a { padding: 5px 11px; font-size: 12px; }

    .mi-bloque { padding-top: 44px; }
    .mi-cabecera { flex-wrap: wrap; gap: 4px 16px; margin-bottom: 18px; }
    .mi-cabecera__titulo { font-size: 23px; }
    .mi-cabecera__apoyo { font-size: 13.5px; }
    .mi-cabecera__mas { margin-left: 0; font-size: 13.5px; order: 3; width: 100%; margin-top: 4px; }

    /* Repuestos apilado y el boton a ancho completo. */
    .mi-repuestos {
        flex-direction: column;
        margin-top: -26px;
        margin-bottom: 34px;
    }
    .mi-repuestos__filo { width: 100%; height: 4px; }
    .mi-repuestos__foto { width: 100%; aspect-ratio: 16/9; min-height: 0; }
    .mi-repuestos__texto { padding: 18px 18px 4px; }
    .mi-repuestos__titulo { font-size: 20px; }
    .mi-repuestos__linea { font-size: 14px; }
    .mi-repuestos__boton {
        align-self: stretch;
        justify-content: center;
        margin: 16px 18px 20px;
        height: 48px;
    }

    /* CATEGORÍAS: a ancho completo, una debajo de otra, con la foto en 16:9 y
       el nombre encima sobre un degradado. En vertical la moto se ve entera,
       que es lo que hace que se distinga una categoria de otra. */
    .mi-cats { grid-template-columns: 1fr; gap: 10px; }
    .mi-cat {
        border-radius: 12px;
        min-height: 0;
        padding: 0;
        background: var(--mi-blanco);
        border-color: var(--mi-linea);
    }
    .mi-cat--oscura { background: var(--mi-blanco); border-color: var(--mi-linea); }

    .mi-cat__arte {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        aspect-ratio: 16/9;
        background: linear-gradient(180deg, #eef0f1 0%, #e3e5e7 100%);
        place-items: center;
    }
    .mi-cat__arte img {
        width: auto;
        max-width: 62%;
        max-height: 88%;
        object-fit: contain;
    }
    .mi-cat__pendiente { padding: 0; }
    .mi-cat--oscura .mi-cat__pendiente { color: #b9bec4; }

    .mi-cat__rotulo {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
        padding: 34px 16px 13px;
        background: linear-gradient(180deg,
            rgba(20, 23, 26, 0) 0%,
            rgba(20, 23, 26, .72) 62%,
            rgba(20, 23, 26, .88) 100%);
    }
    .mi-cat__rotulo b,
    .mi-cat--oscura .mi-cat__rotulo b {
        font-size: 19px;
        color: #fff;
        letter-spacing: -.02em;
        text-transform: none;
    }
    .mi-cat__rotulo i,
    .mi-cat--oscura .mi-cat__rotulo i {
        margin-left: auto;
        font-family: var(--mi-sans);
        font-size: 12.5px;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(255, 255, 255, .72);
    }
    .mi-cat__flecha { display: none; }

    /* ÚLTIMAS PUBLICACIONES: fila compacta. Foto cuadrada a la izquierda, datos
       a la derecha y el contacto reducido al boton de WhatsApp de 44x44. Asi
       entran cuatro motos por pantalla en vez de una. */
    .mi-ultimas { gap: 10px; }
    .mi-moto { border-radius: 12px; }
    .mi-moto__foto {
        width: 40%;
        min-width: 132px;
        aspect-ratio: 1/1;
        min-height: 0;
    }
    .mi-moto__nueva { top: 8px; left: 8px; font-size: 8px; padding: 4px 7px; border-radius: 5px; }
    .mi-moto__cuerpo { padding: 12px 13px; }
    .mi-moto__marca { font-size: 9px; margin-bottom: 4px; }
    .mi-moto__modelo { font-size: 15.5px; margin-bottom: 7px; }
    .mi-moto__datos { font-size: 11.5px; gap: 2px 10px; margin-bottom: 10px; }
    .mi-moto__pie { gap: 10px; }
    .mi-moto__precio { font-size: 18px; }

    /* Sin texto al lado, el boton tiene que decir por si solo que es WhatsApp:
       por eso aqui —y solo aqui— entra el verde de la marca, el mismo que en
       las tarjetas del listado. Con el rotulo puesto (escritorio) se queda con
       el rojo del sitio, que ahi el texto ya lo explica. */
    .mi-moto__wa {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 9px;
        background: #25d366;
        color: #fff;
    }
    .mi-moto__wa:hover { background: #1eb455; color: #fff; }
    /* El texto no se borra del marcado: se esconde, para que quien navega con
       lector de pantalla siga oyendo a donde lleva el boton. */
    .mi-moto__wa-texto {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .mi-moto__wa::after {
        content: "";
        width: 20px; height: 20px;
        background: currentColor;
        -webkit-mask: var(--mi-wa) center/contain no-repeat;
        mask: var(--mi-wa) center/contain no-repeat;
    }

    .mi-ancho { padding-bottom: 48px; }
}

@media (max-width: 420px) {
    .mi-hero__titulo { font-size: 32px; }
}