/* ==========================================================================
   Inicio: héroe, carrusel de modelos y noticias recientes
   ========================================================================== */

/* ---------- Héroe (design.md §4.1 y §4.3) ----------
   Escritorio: alto de la ventana menos la cabecera, sin pasar de 16:9 (igual que el héroe de las fichas, para que
   el auto se vea del mismo tamaño en todo el sitio). Texto y marco: composición de marca (css/marco.css).
   Móvil: distribución del ejemplo de MX (titular arriba, oferta al pie dentro del marco, auto libre al centro). */
.heroe { position: relative; overflow: hidden; background: var(--color-negro); color: var(--color-blanco); }
.heroe__pista { position: relative; height: min(calc(100dvh - var(--alto-cabecera)), 56.25vw); min-height: 320px; }

/* Fundido: la diapositiva que entra se superpone; la que sale se oculta al terminar */
.heroe__diapositiva {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 0s linear .7s, visibility 0s linear .7s;
}
.heroe__diapositiva.is-activa { z-index: 1; opacity: 1; visibility: visible; transition: opacity .7s ease; }

.heroe__enlace { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.heroe__enlace:focus-visible { outline: 3px solid var(--color-blanco); outline-offset: -6px; }
.heroe__medio, .heroe__medio picture { position: absolute; inset: 0; }
/* --foco: punto de la foto que se conserva al recortar (el auto), ajustable por diapositiva */
.heroe__medio img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 60% 55%); }

/* Degradado detrás del titular para que el texto blanco tenga contraste ≥ 4,5:1 sobre la foto */
.heroe__diapositiva--foto .heroe__medio::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .46) 30%, rgb(0 0 0 / .1) 52%, rgb(0 0 0 / 0) 66%);
}
.heroe__diapositiva--cooper .heroe__medio::after {
  background: linear-gradient(100deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .24) 32%, rgb(0 0 0 / 0) 58%);
}
/* Lifestyle: titular abajo a la izquierda → degradado desde esa esquina */
.heroe__diapositiva--lifestyle .heroe__medio::after {
  background: linear-gradient(15deg, rgb(0 0 0 / .66) 0%, rgb(0 0 0 / .4) 28%, rgb(0 0 0 / 0) 52%);
}

/* Flechas, pausa y puntos (botones accesibles) */
.heroe__flecha {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min); padding: 0;
  border: 0; border-radius: 50%; background: rgb(0 0 0 / .45); color: var(--color-blanco);
  transition: background-color var(--transicion);
}
.heroe__flecha:hover { background: rgb(0 0 0 / .75); }
.heroe__flecha--anterior { left: 10px; }
.heroe__flecha--siguiente { right: 10px; }
.heroe__flecha:focus-visible, .heroe__pausa:focus-visible, .heroe__punto:focus-visible { outline: 2px solid var(--color-blanco); outline-offset: 2px; }

.heroe__controles {
  position: absolute; z-index: 2; left: 50%; bottom: 4px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
}
.heroe__pausa, .heroe__punto {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min); padding: 0; border: 0; background: none; color: var(--color-blanco);
}
.heroe__pausa .icono { width: 20px; height: 20px; }
.heroe__pausa .icono--reproducir, .heroe__pausa[data-pausado] .icono--pausa { display: none; }
.heroe__pausa[data-pausado] .icono--reproducir { display: block; }
.heroe__puntos { display: flex; }
.heroe__punto { width: 28px; }
.heroe__punto::before {
  content: ""; width: 10px; height: 10px; border: 1.5px solid var(--color-blanco); border-radius: 50%;
  transition: background-color var(--transicion);
}
.heroe__punto[aria-current="true"]::before { background: var(--color-blanco); }
.heroe__punto:hover::before { background: rgb(255 255 255 / .6); }

/* Recuadro del marco: libre de las flechas (44 px a 10 px del borde) y de los puntos del pie */
.heroe .composicion { left: max(var(--marco-margen), 64px); right: max(var(--marco-margen), 64px); bottom: max(var(--marco-margen), 60px); }

@media (max-width: 767px) {
  /* Como el ejemplo móvil de MX: foto alta (deja asomar 72 px de lo siguiente, mínimo 460 px), titular arriba
     y oferta al pie, dentro del marco y sobre la calle: el auto queda libre en el centro */
  .heroe__pista { height: max(460px, calc(100svh - var(--alto-cabecera) - 72px)); min-height: 0; }
  .heroe__medio img { object-position: var(--foco-movil, 50% 50%); }
  /* Arriba oscurece para el titular y abajo para la oferta (contraste ≥ 4,5:1) */
  .heroe__diapositiva--foto .heroe__medio::after,
  .heroe__diapositiva--cooper .heroe__medio::after {
    background:
      linear-gradient(180deg, rgb(0 0 0 / .65) 0%, rgb(0 0 0 / .65) 8%, rgb(0 0 0 / 0) 34%),
      linear-gradient(0deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .55) 18%, rgb(0 0 0 / 0) 42%);
  }
  .heroe .composicion { left: var(--marco-margen); right: var(--marco-margen); bottom: 56px; }
  .heroe__flecha { top: auto; bottom: 4px; transform: none; background: rgb(0 0 0 / .35); }
}

/* Encuadre por diapositiva: mismo tamaño de auto que en las fichas (la toma de estudio del Cooper se amplía 10 %) */
@media (min-width: 768px) {
  .heroe__diapositiva--cooper .heroe__medio img { transform: scale(1.1); transform-origin: 60% 55%; }
}

/* ---------- Carrusel de modelos (3 visibles ≥ 992 px, 1 por debajo; sin bucle) ---------- */
.modelos-inicio { max-width: var(--ancho-max); margin: 0 auto; padding: 100px 80px 50px; }
.deslizador { position: relative; }
.deslizador__pista {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.deslizador__pista::-webkit-scrollbar { display: none; }
.deslizador__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 992px) { .deslizador__item { flex-basis: calc(100% / 3); } }

.tarjeta-modelo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 10px 8px; text-decoration: none; color: var(--color-negro); }
.tarjeta-modelo__imagen { display: block; width: 100%; max-width: 700px; aspect-ratio: 620 / 242; }
.tarjeta-modelo__imagen picture, .tarjeta-modelo__imagen img { width: 100%; height: 100%; }
.tarjeta-modelo__imagen img { object-fit: contain; transition: transform .4s ease; }
.tarjeta-modelo:hover .tarjeta-modelo__imagen img { transform: translateY(-4px); }
.tarjeta-modelo__nombre {
  font-family: var(--fuente-titulares); font-weight: var(--peso-bold); font-size: 1.2rem; line-height: 1.2;
  text-transform: uppercase; text-align: center;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.tarjeta-modelo:hover .tarjeta-modelo__nombre { text-decoration-thickness: 2px; }
.tarjeta-modelo:focus-visible { outline: 2px solid var(--color-acento); outline-offset: -2px; }

.deslizador__flecha {
  position: absolute; z-index: 2; top: 32%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tactil-min); height: var(--tactil-min); padding: 0;
  border: 0; border-radius: 50%; background: rgb(0 0 0 / .55); color: var(--color-blanco);
  transition: background-color var(--transicion), opacity var(--transicion);
}
.deslizador__flecha:hover { background: var(--color-negro); }
.deslizador__flecha:disabled { opacity: .25; cursor: default; }
.deslizador__flecha--anterior { left: -60px; }
.deslizador__flecha--siguiente { right: -60px; }

.deslizador__puntos { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.deslizador__punto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: var(--tactil-min); padding: 0; border: 0; background: none;
}
.deslizador__punto::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-borde); transition: background-color var(--transicion); }
.deslizador__punto[aria-current="true"]::before { background: var(--color-negro); }
.deslizador__punto:hover::before { background: var(--color-texto-suave); }

@media (max-width: 1200px) { .modelos-inicio { padding: 40px 60px 30px; } }
@media (max-width: 768px) {
  .modelos-inicio { padding: 24px 50px 20px; }
  .deslizador__flecha--anterior { left: -46px; }
  .deslizador__flecha--siguiente { right: -46px; }
}

/* ---------- Banner de campaña: MINI × Avianca LifeMiles (design.md §4.4) ---------- */
.banner-promo { padding-top: 10px; }
.banner-promo__enlace { display: block; overflow: hidden; border-radius: var(--radio-tarjeta); }
.banner-promo__enlace picture, .banner-promo__imagen { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 534; }
.banner-promo__enlace:hover .banner-promo__imagen { filter: brightness(1.04); }
/* En celular el texto legal del arte ya no se lee: se repite debajo, en HTML */
.banner-promo__legal { display: none; margin: 8px 0 0; font-family: var(--fuente-ui); font-size: .75rem; line-height: 1.4; color: var(--color-texto-secundario); }
@media (max-width: 767px) { .banner-promo__legal { display: block; } }

/* ---------- Noticias recientes ---------- */
.noticias-inicio { padding: 60px 0 80px; }
.noticias-inicio__titulo { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 24px; }
.noticias-inicio__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.noticias-inicio__contador { margin: 28px 0 12px; font-family: var(--fuente-ui); font-size: .9375rem; text-align: center; }
.noticias-inicio__mas { display: flex; width: fit-content; min-width: 220px; margin: 0 auto; }
@media (max-width: 900px) { .noticias-inicio__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .noticias-inicio { padding: 40px 0 60px; }
  .noticias-inicio__rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .deslizador__pista { scroll-behavior: auto; }
  .tarjeta-modelo:hover .tarjeta-modelo__imagen img { transform: none; }
}