/* «Más vendidos» de la portada (index.html), tarjetas rehechas el 10-11-2026. Solo la carga la portada.
   El mismo lenguaje que las tarjetas de tipos de la página de aires: foto sobre fondo frío, etiqueta del tipo,
   nombre real del modelo, 2-3 datos de su ficha y la acción como píldora abajo; toda la tarjeta es el enlace
   (Fitts). Verde Gtronic como principal; Montserrat 400/600/700; sin borde de color arriba. */

.vendidos {
   --v-verde: var(--gtronic-verde, #00a200);
   --v-verde-oscuro: var(--gtronic-verde-oscuro, #007a00);
   --v-verde-claro: var(--gtronic-verde-claro, #ebf7eb);
   --v-tinta: #1b2731;
   --v-texto: #4a5862;
   --v-borde: #e2eaef;
   --v-frio: #f3f8fb;
   width: 100%;
   font-family: "Montserrat", Arial, sans-serif;
}

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

.vendidos-rejilla {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.vendido {
   position: relative;
   display: flex;
   flex-direction: column;
   margin: 0;
   border: 1px solid var(--v-borde);
   border-radius: 18px;
   background: #ffffff;
   box-shadow: 0 16px 36px -26px rgba(18, 52, 77, 0.35);
   overflow: hidden;
   text-align: left;
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vendido:hover,
.vendido:focus-within {
   transform: translateY(-4px);
   border-color: #cfe9cf;
   box-shadow: 0 26px 46px -26px rgba(18, 52, 77, 0.42);
}

.vendido:focus-within {
   outline: 3px solid var(--gtronic-celeste, #13b2eb);
   outline-offset: 3px;
}

.vendido-foto {
   background: linear-gradient(180deg, var(--v-frio) 0%, #ffffff 100%);
}

.vendido-foto img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 520 / 416;
   object-fit: contain;
   transition: transform 0.35s ease;
}

.vendido:hover .vendido-foto img {
   transform: scale(1.04);
}

.vendido-texto {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 10px;
   padding: 18px 20px 20px;
}

.vendido-tipo {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--v-verde-oscuro);
}

.vendidos .vendido-nombre {
   margin: 0;
   padding: 0;
   font-family: inherit;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;
   text-align: left;
   text-transform: none;
   letter-spacing: 0;
   color: var(--v-tinta);
}

.vendido-nombre a,
.vendido-nombre a:hover,
.vendido-nombre a:focus {
   color: inherit;
   text-decoration: none;
}

.vendido:hover .vendido-nombre {
   color: var(--v-verde-oscuro);
}

/* Fitts: el enlace del nombre se estira sobre toda la tarjeta */
.vendido-nombre a::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
}

.vendido-nombre a:focus-visible {
   outline: none;
}

.vendido-datos {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 0 0 6px;
   padding: 0;
   list-style: none;
}

.vendido-datos li {
   margin: 0;
   padding: 5px 10px;
   border-radius: 999px;
   background: var(--v-frio);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--v-texto);
}

.vendido-ir {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 44px;
   margin-top: auto;
   padding: 10px 14px;
   border-radius: 999px;
   background: var(--v-verde-claro);
   color: var(--v-verde-oscuro);
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   transition: background-color 0.2s ease, color 0.2s ease;
}

/* la flecha, en CSS: la portada no carga Font Awesome */
.vendido-ir::after,
.vendidos-todos a::after {
   content: "→";
   display: inline-block;
   transition: transform 0.2s ease;
}

.vendido:hover .vendido-ir,
.vendido:focus-within .vendido-ir {
   background: var(--v-verde);
   color: #ffffff;
}

.vendido:hover .vendido-ir::after,
.vendidos-todos a:hover::after {
   transform: translateX(4px);
}

.vendidos-todos {
   margin: 28px 0 0;
   text-align: center;
}

.vendidos-todos a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: var(--v-verde-oscuro);
   text-decoration: none;
}

.vendidos-todos a:hover,
.vendidos-todos a:focus-visible {
   color: var(--v-verde);
   text-decoration: underline;
   text-underline-offset: 4px;
}

@media (max-width: 1100px) {
   .vendidos-rejilla {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 576px) {
   .vendidos-rejilla {
      gap: 12px;
   }

   .vendido-texto {
      gap: 8px;
      padding: 14px 14px 16px;
   }

   .vendidos .vendido-nombre {
      font-size: 15px;
   }

   .vendido-datos li {
      font-size: 11px;
      padding: 4px 8px;
   }

   .vendido-ir {
      min-height: 40px;
      padding: 9px 8px;
      font-size: 12.5px;
      white-space: nowrap;
   }
}

@media (prefers-reduced-motion: reduce) {
   .vendido,
   .vendido-foto img,
   .vendido-ir::after {
      transition: none;
   }

   .vendido:hover,
   .vendido:focus-within,
   .vendido:hover .vendido-foto img {
      transform: none;
   }
}