/*
  fm-option-b.css — DESTACADAS · OPCIÓN B: "Paneles expansivos"
  Tríptico de borde a borde (100vw): tres paneles fotográficos que se
  expanden al pasar el cursor — patrón de portafolios y hoteles de lujo.
  Cargar después de home-v2.css. Solo escritorio; el móvil conserva su carrusel.
*/
/* Evita scroll horizontal por el 100vw (que incluye el scrollbar) */
html, body { overflow-x: clip; }

@media (min-width: 761px) {
  .fm-cards {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    gap: 6px;
    height: min(64vh, 620px);
  }
  .fmcard {
    flex: 1 1 0;
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
    transition: flex 0.55s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s;
  }
  .fmcard:hover {
    flex: 2.1 1 0;
    transform: none;
  }
  .fmcard img { transition: transform 0.6s; }
  .fmcard:hover img { transform: none; }
  .fmcard .fmcard-price { font-size: 1.9rem; }
  /* El precio de los paneles comprimidos se atenúa; el activo habla */
  .fmcard .fmcard-body { transition: opacity 0.4s; }
  .fm-cards:hover .fmcard:not(:hover) .fmcard-body { opacity: 0.55; }
}

/* ── Móvil: blinda el carrusel original (flex + snap + cards 3:4) ── */
@media (max-width: 760px) {
  .fm-cards {
    display: flex !important;
    grid-template-columns: none !important;
    width: auto;
    margin-left: 0;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .fm-cards::-webkit-scrollbar { display: none; }
  .fmcard {
    flex: 0 0 85%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    scroll-snap-align: start;
  }
  .fmcard .fmcard-body { opacity: 1 !important; }
}