/* =========================================================================
   Home Future (Flight/<mercado>/Default.aspx; la home anterior queda en DefaultBKP.aspx) — común a todos los mercados.
   Lo propio de cada mercado (estilos heredados de su Default.aspx) queda en la página.
   ========================================================================= */

/* =====================================================================
   MODELO FUTURE — colores originales del sitio (azul #1687c5 / #00528D,
   naranja #E67D20 / #E4A01D, fondo blanco) con estilo moderno:
   tarjetas redondeadas, sombras suaves y grilla de 3 columnas alineada.
   ===================================================================== */
.gv { --g: 18px; --blue: #00528D; --blue2: #1687c5; --orange: #E67D20; --line: #e3eaf2;
      margin: 1.75rem auto 2.25rem; }

/* Franja de encabezado — estilo Future con los colores originales (degradé del header + naranja) */
.gv-head { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
           margin: 0 0 var(--g); padding: 20px 26px 23px; border-radius: 16px; color: #fff;
           background: linear-gradient(100deg, #1687c5 5%, #00528D); box-shadow: 0 8px 24px rgba(0, 82, 141, .18); }
.gv-head::before { content: ""; position: absolute; inset: 0; pointer-events: none;
           background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                             linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
           background-size: 32px 32px;
           -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%);
                   mask-image: linear-gradient(90deg, transparent, #000 40%, #000 100%); }
.gv-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #E67D20, #E4A01D); }
.gv-head > * { position: relative; }
.gv-kicker { margin: 0 0 8px; color: #E4A01D; font: 700 11px/1 Consolas, "Courier New", monospace; letter-spacing: .25em; text-transform: uppercase; }
.gv-head h3 { margin: 0; color: #fff; font-family: Fredoka, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.gv-head h3 span { color: #E4A01D; }
.gv-head p:not(.gv-kicker) { margin: 6px 0 0; color: rgba(255, 255, 255, .85); font-size: 14px; }
.gv-board  { display: flex; align-items: center; gap: 14px; }
.gv-path   { display: block; width: 220px; height: 60px; }
.gv-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; white-space: nowrap;
           background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
           font: 700 12px/1 Consolas, "Courier New", monospace; letter-spacing: .12em; color: #fff; }
.gv-status i { width: 8px; height: 8px; border-radius: 50%; background: #E4A01D; box-shadow: 0 0 0 0 rgba(228, 160, 29, .7); animation: gvPulse 2s infinite; }
@keyframes gvPulse { 70% { box-shadow: 0 0 0 8px rgba(228, 160, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(228, 160, 29, 0); } }
@media screen and (max-width: 63.9375em) { .gv-path { display: none; } }
@media screen and (max-width: 39.9375em) { .gv-head { padding: 16px 18px 19px; } .gv-head h3 { font-size: 22px; } }

/* Grilla 3x5 configurable por IdWeb (control DynamicLayoutFuture, WTC_ImageConfiguration).
   Cada tarjeta trae su celda desde la base en variables CSS: --r/--c (fila/columna de
   inicio) y --rs/--cs (filas/columnas que ocupa). */
.gv-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--g); align-items: stretch; }  /* --cols/--rows: medida por web (WTC_GridLayout) */
.gv-grid > .gv-tile { grid-row: var(--r) / span var(--rs); grid-column: var(--c) / span var(--cs); }

/* Piezas estiradas (FillColor): la imagen no se recorta y el espacio extra se
   rellena con el color de su borde (el color llega desde la base) */
.gv-media.gv-fill { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; }

/* Banners dinámicos (DynamicLayout, sin cambios): debajo de la grilla, centrados */
.gv-dyn { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); margin-top: var(--g); }
.gv-dyn:empty { display: none; }
.gv-dyn .dynamicBanner { width: 100%; max-width: 805px; }
.gv-dyn .dynamicBanner img { display: block; width: 100%; height: auto; }

/* Tarjeta */
.gv-tile  { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0;
            padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
            box-shadow: 0 4px 14px rgba(0, 82, 141, .08); transition: transform .2s ease, box-shadow .2s ease; }
.gv-tile::before { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; padding: 1px; border-radius: inherit;
            background: linear-gradient(120deg, var(--blue2), var(--blue), var(--orange));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
            opacity: 0; transition: opacity .2s ease; }
.gv-tile:hover, .gv-tile:focus-within { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 82, 141, .18); }
.gv-tile:hover::before, .gv-tile:focus-within::before { opacity: 1; }
.gv-media { position: relative; display: block; width: 100%; overflow: hidden; line-height: 0; border-radius: 11px; }
.gv-media > img { display: block; width: 100%; height: auto; max-width: none; border: 0; }

/* Zonas clicables (WTC_ImageHotspot): el contenedor mide lo mismo que la imagen,
   así las zonas en % quedan pegadas al dibujo aunque la celda tenga relleno */
.gv-hotspots { position: relative; z-index: 1; display: block; width: 100%; max-width: 100%; line-height: 0; flex: 0 0 auto; }  /* el JS ajusta el ancho para que entre en la celda */
.gv-hotspots > img { display: block; width: 100%; height: auto; max-width: none; border: 0; }

/* Video mp4 */
.gv-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* YouTube: portada + botón; el JS carga el reproductor al hacer clic */
.gv-yt { cursor: pointer; }
.gv-yt .gv-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px;
                  border: 0; border-radius: 12px; background: rgba(230, 0, 0, .9); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.gv-yt .gv-play::before { content: ""; position: absolute; left: 26px; top: 13px; border-style: solid; border-width: 9px 0 9px 15px;
                          border-color: transparent transparent transparent #fff; }
.gv-yt iframe { position: relative; z-index: 3; display: block; width: 100%; height: 100%; border: 0; }

/* Bloque HTML */
.gv-tile-html { justify-content: stretch; }
.gv-html { flex: 1 1 auto; overflow: auto; padding: 14px 16px; border-radius: 11px; background: #f4f7fa; font-size: 14px; line-height: 1.4; }

/* Pieza MENU (WTC_MenuLink): mismos botones .lateral de las home actuales
   (btn_off / btn_on), pero la caja ocupa la celda de la grilla */
.gv-tile-menu { justify-content: stretch; }
.gv-tile .gv-menu.lateral { flex: 1 1 auto; width: auto; margin: 0; overflow: auto; border: 0; border-radius: 11px;
                             background: #fff; box-shadow: none; -webkit-box-shadow: none; }
.gv-menu ul { margin: 0; padding: 8px 6px; list-style: none; }
.gv-menu.gv-menu-2col ul { columns: 2; column-gap: 12px; }
.gv-menu li { margin: 0 0 4px; break-inside: avoid; }

/* Dispositivo (IDDeviceType): 1 desktop >= 64em · 2 tablet 40-64em · 3 mobile < 40em · 4 all */
@media screen and (max-width: 63.9375em) { .dlf-dev-desktop { display: none !important; } }
@media screen and (min-width: 64em), screen and (max-width: 39.9375em) { .dlf-dev-tablet { display: none !important; } }
@media screen and (min-width: 40em) { .dlf-dev-mobile { display: none !important; } }

/* Zonas clicables */
.gv-hot { position: absolute; display: block; z-index: 2; border-radius: 10px; transition: background-color .2s, box-shadow .2s; }
.gv-hot:hover, .gv-hot:focus-visible { background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 2px var(--orange); outline: none; }

/* FILAS UNIFORMES: todas las filas miden lo mismo (proporcional al ancho de columna).
   Cada banner se ajusta completo a su celda (sin recortes ni deformación) y el
   espacio sobrante se rellena con la misma imagen desenfocada (.gv-blur, la crea el JS). */
.gv { container-type: inline-size; }
.gv-grid { grid-auto-rows: 128px; grid-auto-rows: calc((100cqi - (var(--cols, 3) - 1) * var(--g)) / var(--cols, 3) * .34); }
.gv-grid > .gv-tile { min-height: 0; }
.gv-tile > .gv-media { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #eef3f8; }
.gv-tile > .gv-media.gv-fill { flex-direction: column; justify-content: flex-start; }
.gv-tile > .gv-media > img:not(.gv-blur) { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.gv-tile > .gv-media > .gv-hotspots { z-index: 1; }
.gv-tile > .gv-media.gv-fill > img:not(.gv-blur) { height: auto; flex: 0 0 auto; }  /* con relleno: imagen arriba, el color sigue abajo */
.gv-blur { position: absolute; top: -12px; left: -12px; z-index: 0; width: calc(100% + 24px); height: calc(100% + 24px); max-width: none;
           object-fit: cover; filter: blur(14px) saturate(1.15); opacity: .85; pointer-events: none; }

/* Responsive: < large los banners del bloque derecho se ocultan (igual que el original) */
@media screen and (max-width: 63.9375em) {
    .gv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; grid-auto-rows: auto; }
    .gv-grid > .gv-tile { grid-row: auto; grid-column: auto; }
    .gv-lg { display: none !important; }
    .gv-tile > .gv-media > img:not(.gv-blur) { height: auto; }
    .gv-blur { display: none; }
}
@media screen and (max-width: 39.9375em) { .gv-grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
    .gv-tile, .gv-tile::before, .gv-hot { transition: none; }
    .gv-status i { animation: none; }
    .gv-tile:hover, .gv-tile:focus-within { transform: none; }
}