/* Portadas nuevas (Vidriera y Vitrina) sobre la página de hoy de Fernández Alonso. Solo afecta a .portada. */

@font-face { font-family: 'Outfit'; src: url('/fonts/outfit-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

.portada { position: relative; background: #0b1016; color: #fff; font-family: 'Inter', system-ui, sans-serif; }
.portada *, .portada *::before, .portada *::after { box-sizing: border-box; }
.portada img { display: block; max-width: none; }
.portada a { text-decoration: none; }
.portada h1, .portada h2 { font-family: 'Outfit', sans-serif; line-height: 1.1; margin: 0; color: #fff; letter-spacing: -.01em; font-weight: 700; }
.portada h1 { font-size: clamp(2.5rem, 5.6vw, 4.8rem); }
.portada h2 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); }
.portada .bajada { font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.6; color: #dbe3ec; max-width: 560px; margin: 18px 0 30px; }
.portada .ojo { display: inline-block; margin-bottom: 12px; font: 600 13px/1 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #c5d2e1; }
.portada h1, .portada h2, .portada .bajada, .portada .ojo { text-shadow: 0 2px 22px rgba(0, 0, 0, .45); }
.portada .botones { display: flex; gap: 14px; flex-wrap: wrap; }
.portada .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 40px;
  font: 600 15px 'Outfit', sans-serif; transition: transform .25s, background .25s; }
.portada .btn:hover { transform: translateY(-2px); }
.portada .btn-claro { background: #fff; color: #1a2633; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.portada .btn-borde { border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; }
.portada .btn-borde:hover { background: rgba(255, 255, 255, .12); }

/* La escena ocupa la pantalla menos el encabezado (que queda fijo arriba) */
.escena { position: relative; height: calc(100vh - var(--enc, 80px)); min-height: 520px; overflow: hidden; }
.capa { position: absolute; inset: 0; }
.capa img { width: 100%; height: 100%; object-fit: cover; }
.capa picture { display: contents; }
.velo { position: absolute; inset: 0; pointer-events: none; }
.indicador { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; z-index: 3;
  font: 500 13px 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.indicador i { width: 2px; height: 34px; background: linear-gradient(#fff, transparent); animation: pp-baja 1.6s ease-in-out infinite; }
@keyframes pp-baja { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Vidriera: del frente del local se entra al salón */
.h-vidri .capa-frente img { transform-origin: 50% 70%; }
.h-vidri .capa-salon { opacity: 0; }
.h-vidri .velo { background: linear-gradient(180deg, rgba(8, 12, 18, .5), rgba(8, 12, 18, .2) 40%, rgba(8, 12, 18, .65)); }
.vidri-t1 { position: absolute; top: 15%; left: 0; right: 0; text-align: center; padding: 0 20px; }
.vidri-t1 .bajada { margin-left: auto; margin-right: auto; }
.vidri-t1 .botones { justify-content: center; }
.vidri-t2 { position: absolute; left: max(20px, calc((100% - 1240px) / 2)); top: 50%; transform: translateY(-50%); max-width: 620px; opacity: 0; }

/* Vitrina: los autos pasan de costado y se esconden detrás del título */
.h-vitri { background: #101925; }
.vitri-fondo { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 80% 20%, rgba(43, 73, 110, .55), transparent 60%), linear-gradient(180deg, #0f1824, #0b1118); }
.vitri-cab { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: min(54vw, 760px); padding: 0 120px 0 max(20px, calc((100vw - 1240px) / 2));
  display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, #101925 0%, #101925 84%, rgba(16, 25, 37, 0) 100%); }
.vitri-cab .bajada { max-width: 500px; }
.vitri-pista { position: absolute; inset: 0; display: flex; align-items: center; }
.vitri-cinta { display: flex; gap: 22px; padding: 0 60px 0 min(56vw, 790px); will-change: transform; }
.vitri-auto { flex: none; width: 290px; border-radius: 22px; overflow: hidden; background: #fff; color: #1a2633; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.vitri-auto .foto { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.vitri-auto .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.vitri-auto:hover .foto img { transform: scale(1.05); }
.vitri-auto .datos { padding: 16px 18px 18px; }
.vitri-auto h3 { margin: 0; font: 700 1rem/1.25 'Outfit', sans-serif; text-transform: uppercase; color: #1a2633; }
.vitri-auto .precio { font: 700 1.2rem 'Outfit', sans-serif; margin-top: 6px; }
.vitri-auto .chip { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 20px; background: rgba(13, 19, 27, .8); color: #fff; font: 600 12px 'Outfit', sans-serif; }
.vitri-mas { flex: none; width: 290px; border-radius: 22px; border: 1.5px dashed rgba(255, 255, 255, .4); display: grid; place-items: center; text-align: center; padding: 30px; color: #fff; font: 600 1.3rem 'Outfit', sans-serif; }
.h-vitri .indicador { left: 78%; }

/* En el celular nada se fija (se sentiría trabado): cada portada se ve simple */
@media (max-width: 767px) {
  .escena { height: auto; min-height: calc(100svh - var(--enc, 70px)); }
  .h-vidri .capa-salon, .vidri-t2, .indicador { display: none; }
  .vidri-t1 { top: auto; bottom: 50px; }
  .h-vitri .escena { display: flex; flex-direction: column; padding: 40px 0 36px; }
  .vitri-cab { order: -1; position: relative; width: auto; padding: 0 20px 26px; background: none; }
  .vitri-pista { position: relative; display: block; }
  .vitri-cinta { padding: 0 20px 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .vitri-auto, .vitri-mas { width: 78vw; scroll-snap-align: start; }
}

/* ---------- Vehículos destacados en carrusel (el de la Vitrina, adaptado): las tarjetas son las del catálogo ----------
   Sin la clase dc-libre (compu, con movimiento): la sección se fija y los autos pasan de costado con el scroll.
   Con dc-libre (celular, «reducir movimiento» o sin GSAP): una fila que se desliza con el dedo. */
.dc { background: #f4f6f9; }
/* En el celular, «Vehículos destacados» queda como siempre (grilla de 4); el carrusel es para la compu */
@media (min-width: 768px) { .dest-movil { display: none; } }
@media (max-width: 767px) { .dc { display: none; } }
.dc-escena { position: relative; height: calc(100vh - var(--enc, 80px)); min-height: 600px; overflow: hidden; }
.dc-cab { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: min(44vw, 620px); padding: 0 100px 0 max(20px, calc((100vw - 1240px) / 2));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: linear-gradient(90deg, #f4f6f9 0%, #f4f6f9 80%, rgba(244, 246, 249, 0) 100%); }
.dc .dc-cab .destacados-title { text-align: left; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; }
.dc .dc-cab .destacados-sub { text-align: left; margin: 14px 0 28px; }
.dc-pista-txt { margin: 22px 0 0; font: 600 14px 'Outfit', sans-serif; color: #6a7482; }
.dc-pista { position: absolute; inset: 0; display: flex; align-items: center; }
.dc-cinta { display: flex; align-items: stretch; gap: 26px; padding: 30px 60px 30px min(48vw, 680px); will-change: transform; }
.dc .dc-cinta .auto-card { flex: none; width: 320px; display: flex; }
.dc .dc-cinta .auto-img { height: 210px; }
.dc .dc-cinta .auto-content { padding: 22px; }
.dc-mas { flex: none; width: 280px; border-radius: 20px; border: 2px dashed #c3cfdd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 30px; text-align: center; color: #1a2633; text-decoration: none; transition: background .25s, border-color .25s; }
.dc-mas span { font: 700 1.35rem 'Outfit', sans-serif; }
.dc-mas small { font: 500 .95rem 'Outfit', sans-serif; color: #2b496e; }
.dc-mas:hover { background: #fff; border-color: #2b496e; }

.dc-libre .dc-escena { height: auto; min-height: 0; padding: 60px 0 40px; }
.dc-libre .dc-cab { position: static; width: auto; max-width: 1240px; margin: 0 auto; padding: 0 20px 26px; background: none; align-items: center; text-align: center; }
.dc-libre .dc-cab .destacados-title, .dc-libre .dc-cab .destacados-sub { text-align: center; }
.dc-libre .dc-pista { position: static; display: block; }
.dc-libre .dc-cinta { padding: 10px 20px 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.dc-libre .dc-cinta > * { scroll-snap-align: start; }
.dc-libre .dc-pista-txt { margin-top: 18px; }
.dc .dc-desliza, .dc-libre .dc-pista-txt:not(.dc-desliza) { display: none; }
.dc-libre .dc-desliza { display: block; }
@media (max-width: 600px) {
  .dc-libre .dc-cinta { gap: 16px; }
  .dc .dc-cinta .auto-card { width: 78vw; }
  .dc .dc-cinta .auto-img { height: 200px; }
  .dc .dc-cinta .auto-content { padding: 16px 14px; }
  .dc-mas { width: 70vw; }
}

.volver-opciones { position: fixed; left: 16px; bottom: 16px; z-index: 1000; padding: 10px 16px; border-radius: 30px; background: rgba(17, 17, 17, .9);
  color: #fff !important; font: 600 14px system-ui, sans-serif; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .indicador i { animation: none; } }