:root{
  --bg1:#0b2a46; --bg2:#166b9a; --accent:#78c6ff;
  --text:#eaf6ff; --muted:#9fb8cc; --card:#0f3555cc;
  --glow: rgba(120,198,255,.85); --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  background:var(--bg1);
  overflow-y:auto;
  padding-top: var(--header-h, 90px);
}
.fixed-bg{ position:fixed; inset:0;
  background: url('../assets/bg-champaqui.jpg?v=1') center/cover no-repeat,
              linear-gradient(135deg, var(--bg1), var(--bg2)); z-index: -2; filter:saturate(105%);   transition: opacity var(--bg-fade-duration, 1800ms) var(--bg-fade-ease, ease);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0b0e14;
  will-change: opacity, background;
  
  
}

/* Header con degradado suave */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 25, 0.65),
    rgba(25, 25, 35, 0.35)
  ); /* degradado oscuro → translúcido */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25),
              inset 0 -1px 0 rgba(255, 255, 255, .05);
}

.header-inner {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand__logo {
  width: 92px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(120,198,255,.28)); /* glow leve */
}

.brand__titles h1 {
  margin: 0;
  font-size: clamp(20px, 4.6vw, 32px);
}

.tagline {
  margin: .2rem 0 0;
  color: var(--muted);
}

/* Cuadro del clima */
.site-header .weather {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  display: flex;
  gap: 10px;
  align-items: center;
}

.weather .temp {
  font-weight: 800;
}

.weather .desc {
  color: var(--muted);
}

/* Modo vertical: título arriba, datos abajo */
.site-header .weather.weather--vertical{
  flex-direction: column;
  align-items: center;   /* o center si lo querés centrado */
  gap: 4px;
}

/* Título y datos */
.weather-title{
  font-size: 0.7rem;
  line-height: 1.15;
  opacity: .85;
  color: var(--muted);
}
.weather-info{
  font-size: 1.0rem;
  line-height: 1.2;
  font-weight: 700;
}
.weather-info .temp{ margin-right: 6px; }


/* Cards y contenido (sin cambios, solo contexto) */
.content {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 16px;
  display: grid;
  gap: 22px;
}

.card {
  background: rgba(15, 53, 85, 0.10);
  border: 0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .30),
              inset 0 0 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
}


/* Mini Player */
.mini-player{ display:grid; grid-template-columns: minmax(240px, 360px) 1fr; gap:18px; align-items:center; margin: 8px 0 20px; }
.mini-player__art{ display:grid; place-items:center; gap:10px; padding:10px; }
.mini-player__logo{
  width: clamp(120px, 20vw, 220px); height:auto;
  filter: drop-shadow(0 0 8px rgba(120,198,255,.30)); /* glow leve */
}
/* Pulse when playing */
@keyframes glowPulse {
  0% { filter: drop-shadow(0 0 8px rgba(120,198,255,.30));  }
  50%{ filter: drop-shadow(0 0 16px rgba(120,198,255,.45)); transform: scale(1.015); }
  100%{ filter: drop-shadow(0 0 8px rgba(120,198,255,.30)); transform: scale(1); }
}
.mini-player__logo--playing{ animation: glowPulse 2.6s ease-in-out infinite; will-change: filter, transform; }
@media (prefers-reduced-motion: reduce){ .mini-player__logo--playing{ animation: none } }
body.is-playing .brand__logo{ filter: drop-shadow(0 0 8px rgba(120,198,255,.40)); }

.mini-player__desc{max-width:56ch}
.mini-player__desc h2{margin:.2rem 0 .2rem}
.mini-player__desc p{margin:0 0 .6rem; color:var(--text)}
.mini-player .btn--primary{font-size:1rem; padding:10px 18px; border-radius:12px;}
.mini-player .status{display:block; opacity:.85}
.mini-player__extras{margin-top:.4rem; opacity:.9}
.vol{display:flex; gap:8px; align-items:center}

.banner-wrap{padding:10px 0; margin:12px 0 18px; display:grid; place-items:center}
.banner{ width:100%; max-width:1100px; aspect-ratio: 16/3; border-radius:14px; overflow:hidden;
  background:#0e2740; display:grid; place-items:center; box-shadow:var(--shadow); }
.banner img, .banner video{width:100%; height:100%; object-fit:cover; display:block}

.schedule{ margin: 8px 0 28px; }
.schedule__grid{ display:grid; grid-template-columns: 1fr; row-gap:8px; }
.schedule__time{ color:var(--muted); font-weight:700 }
.schedule__show{ background: rgba(255,255,255,.03); padding:10px 12px; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }

.btn{ background:var(--accent); border:none; color:#012; font-weight:700; padding:10px 16px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow); }
.btn:active{transform:scale(.98)} .status{opacity:.9}

/* Footer con estilo del mini-player */
.site-footer{
  width: min(1100px, 100%);
  margin-inline: auto;
  margin-top: 32px;
  padding: 20px 16px 28px;

  /* match mini-player */
  background: rgba(18, 76, 130, 0.45);
  border: 1px solid rgba(120,198,255,0.22);
  backdrop-filter: blur(8px) saturate(115%);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);

  border-radius: 14px;
  color: #d8e9f7;               /* texto legible sobre azul translúcido */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

/* enlaces dentro del footer */
.site-footer a{
  color: #eef7ff;
  text-decoration: none;
  opacity: .95;
  transition: opacity .25s ease, transform .2s ease;
}
.site-footer a:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* Botones/redes coherentes con el nuevo fondo */
.social{ display:flex; gap:14px; flex-wrap:wrap }
.social a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);                 /* un poco más visible */
  border: 1px solid rgba(255,255,255,.12);
  color: #eef7ff;
}
.social a:hover{
  background: rgba(255,255,255,.14);
}
.social a img{ width:20px; height:20px }

/* (Opcional) versión con degradado, si querés matchear el header
.site-footer{
  background: linear-gradient(to top, rgba(15,15,25,.65), rgba(25,25,35,.35));
  border: 1px solid rgba(255,255,255,.10);
}
*/

.banner iframe{width:100%;height:100%;display:block}

@media (max-width: 700px){
  body{ --header-h: 168px; }
  .header-inner{ flex-direction: column; align-items: stretch; gap: 6px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand__titles{ display:flex; flex-direction:column; }
  .site-header .weather{ align-self: stretch; width:100%; margin-top:4px; padding:8px 12px; }
  .brand__titles h1{ margin:0; }
  .tagline{ margin:2px 0 0 0; }
}


/* Azul translúcido para mini-player y programación */
.mini-player, .schedule.card{
  background: rgba(18, 76, 130, 0.45);
  border: 1px solid rgba(120,198,255,0.22);
  backdrop-filter: blur(8px) saturate(115%);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.mini-player h2, .schedule h2{ color:#eef7ff }
.mini-player p, .schedule p{ color:#d8e9f7 }

/* Deshabilitar selección de texto y cursor I-beam */
html, body, main, header, section, footer, .card, .mini-player, .schedule, .site-header, .header-inner, .brand, .brand__titles, .fixed-bg, *:not(input):not(textarea){
  -webkit-user-select:none; user-select:none; cursor:default;
}
a, button, .btn, [role="button"], input[type="range"], label[for], summary{ cursor:pointer; }
*{ -webkit-tap-highlight-color: transparent; }

.mini-player{ padding:18px } .schedule.card{ padding:18px }


/* Capas de fondo fijo y transición para rotación */
.fixed-bg{ position:fixed; inset:0; transition: opacity 1.2s ease; }
.fixed-bg--layerB{ opacity:0; z-index:-1; }



/* === Grilla de programación flexible por fila === */
.schedule__grid{
  /* Pasamos de "2 columnas fijas" a una sola columna de filas;
     cada fila se encargará internamente de tener 1 o 2 columnas. */
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
}

/* Fila que ocupa todo el ancho, con color de fondo/texto personalizados */
.schedule__row{
  grid-column: 1 / -1;
  background: var(--row-bg, rgba(255,255,255,.03));
  color: var(--row-color, var(--text));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Contenedor interno que define el layout de la fila */
.schedule__row__inner{
  display: grid;
  grid-template-columns: 140px 1fr; /* 2 columnas por defecto (hora / programa) */
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
}

/* Variante 1 columna (apila hora y programa) */
.schedule__row--1col .schedule__row__inner{
  grid-template-columns: 1fr;
  row-gap: 6px;
}

/* Ajustes de tipografía y contraste dentro de la fila */
.schedule__time{
  font-weight: 700;
  /* un poco más claro que el texto principal para jerarquía */
  color: color-mix(in oklab, var(--row-color, var(--text)), white 35%);
}

.schedule__show{
  /* hereda color del contenedor */
}

/* (Opcional) si preferís "pastilla" interna para show en 2 columnas,
   descomenta este bloque:

.schedule__row:not(.schedule__row--1col) .schedule__show{
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
*/

html, body { overflow-x: hidden; }

/* === Grilla de programación flexible por fila (con alineación por-fila) === */
.schedule__grid{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
}

/* Fila base */
.schedule__row{
  grid-column: 1 / -1;
  background: var(--row-bg, rgba(255,255,255,.03));
  color: var(--row-color, var(--text));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  text-align: left; /* default */
}

/* Inner controla 1 o 2 columnas */
.schedule__row__inner{
  display: grid;
  grid-template-columns: 140px 1fr; /* 2 columnas por defecto */
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
}

/* Variante 1 columna */
.schedule__row--1col .schedule__row__inner{
  grid-template-columns: 1fr;
  row-gap: 6px;
}

/* Tipografía y herencia de color */
.schedule__time, .schedule__show{
  color: inherit;
  text-align: inherit;
}

.schedule__time{
  font-weight: 700;
  /* contraste sutil respecto al show */
  color: color-mix(in oklab, var(--row-color, var(--text)), white 35%);
}

/* Alineación por data-attribute (left|center|right) */
.schedule__row[data-align="center"] .schedule__row__inner{
  justify-items: center;
  text-align: center;
}
.schedule__row[data-align="right"] .schedule__row__inner{
  justify-items: end;
  text-align: right;
}
.schedule__row[data-align="left"] .schedule__row__inner{
  justify-items: start;
  text-align: left;
}

/* Descripción opcional (si se usa) */
.schedule__desc, .schedule__desc__inner{
  opacity: .9;
  font-size: .92rem;
}

/* Mini-player defensivo: ancho estable */
.mini-player{
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 18px;
  align-items: center;
  margin: 8px 0 20px;
}

/* Cinturón contra desplazamiento horizontal accidental */
html, body { overflow-x: hidden; }


/* Responsive media */
img, video, iframe { max-width: 100%; height: auto; display: block; }



/* === LAYOUT OVERRIDES (mobile-first) === */

/* Scale the whole UI slightly down on small screens without breaking zoom */
:root{
  /* Global scale factor (0.9–1.0 typical phones, 1.0+ tablets/desktop) */
  --ui-scale: clamp(0.90, 0.86 + 0.35vw, 1.03);
  --header-h: clamp(56px, 8.5vw, 84px);
  --banner-top-h: clamp(56px, 10vw, 90px);
  --banner-mid-h: clamp(96px, 22vw, 180px);
}

html { font-size: calc(16px * var(--ui-scale)); }

/* Safe area padding for devices with notch */
body { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
.header{ padding-top: max(env(safe-area-inset-top), 0px); }

.header { height: var(--header-h); }
.header-inner{ gap: 8px; padding: 6px 10px; }
.header .brand__logo{ max-height: calc(var(--header-h) - 20px); }

/* Banners: show complete artwork without forcing cover-crop; responsive heights */
#banner-top, #banner-mid {
  height: auto;
  min-height: unset;
}
#banner-top { height: var(--banner-top-h); }
#banner-mid { height: var(--banner-mid-h); }
.bnr-layer > img,
.bnr-layer > video,
.bnr-layer > iframe { object-fit: contain !important; }

/* Tighten generic paddings on small screens */
@media (max-width: 768px){
  .section, .card, .content, main { padding: clamp(8px, 2.4vw, 14px); }
  .grid { gap: clamp(8px, 2.6vw, 16px); }
  .hero, .intro { padding-block: clamp(10px, 3.5vw, 18px); }
  .footer { padding: 10px; }
}

/* Avoid fixed min-widths that can cause horizontal overflow and force "zoom" feel */
* { max-width: 100%; box-sizing: border-box; }
.container, .wrap, .header-inner { width: min(1100px, 100%); }



/* === FIX: header stacking + content offset for mobile === */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

:root{
  /* default header height; will be overridden on small screens if needed */
  --header-h: 90px;
}

@media (max-width: 768px){
  :root{ --header-h: 120px; }
}

/* Ensure main/page/content start below the header area (not overlapped) */
main, .page, .content, #app {
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

/* Banner stacking under header but visible (no overlap) */
#banner-top, #banner-mid{
  position: relative;
  z-index: 0;
}



/* === Banner-top aspect fix === */
:root{ --banner-top-h: 90px; } /* fijo en mobile, ajustar si querés otro valor */
#banner-top{ height: var(--banner-top-h); min-height: var(--banner-top-h); }
#banner-top .bnr-layer > img,
#banner-top .bnr-layer > video,
#banner-top .bnr-layer > iframe{ object-fit: cover !important; }



/* === Player logo: avoid scale on pulse === */
.mini-player__logo--playing{
  transform: none !important;
  will-change: filter; /* no transform */
}



/* === FINAL RESPONSIVE + NO-ZOOM OVERRIDES (2025-10-17) === */

/* Banner superior flexible para móviles y pantallas altas */
:root{
  --banner-top-h: clamp(90px, 12vw, 160px);
}
#banner-top{
  height: var(--banner-top-h);
  min-height: var(--banner-top-h);
}
#banner-top .bnr-layer > img,
#banner-top .bnr-layer > video,
#banner-top .bnr-layer > iframe{
  object-fit: cover !important;
}

/* Evitar "zoom" por transiciones de transform en contenedores principales */
#player, #schedule,
.card, .section, .content, .panel, .module, .hero, .intro {
  transition: opacity .25s ease !important;
  transform: none !important;
  will-change: opacity !important;
}

/* Si existiera un pulso/latido en logos del mini-player, neutralizar transform */
.mini-player__logo, .mini-player__logo--playing {
  transform: none !important;
  will-change: filter !important;
}

/* Menos movimiento general si el usuario prefiere reducir animaciones */
@media (prefers-reduced-motion: reduce){
  #player, #schedule,
  .card, .section, .content, .panel, .module, .hero, .intro {
    transition: none !important;
  }
}



/* === RESPONSIVE LAYOUT SYSTEM (2025-10-17) ===
   Objetivo: que *todo* el contenido (no solo header/footer) se adapte bien
   en móviles/tablets/desktop sin recortes ni saltos.
========================================================================== */

/* 1) Tipografía y espaciados escalables */
:root{
  --space-1: clamp(6px, 0.8vw, 10px);
  --space-2: clamp(10px, 1.4vw, 16px);
  --space-3: clamp(14px, 2.0vw, 24px);
  --radius-xl: 18px;
}

/* 2) Contenedores base */
main, .content, .page {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* 3) Tarjetas y secciones con padding fluido */
.section, .card, .panel, .module {
  padding: var(--space-3);
  border-radius: var(--radius-xl);
}

/* 4) Grillas fluidas reutilizables (si están presentes) */
.grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Helpers de columnas (degradan bien si no existen) */
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

/* 5) Player: dos columnas en desktop → una columna en mobile */
#player .row, #player .grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1.2fr 1fr;
}
#player img, #player video, #player iframe {
  max-width: 100%; height: auto; display: block;
}

/* 6) Schedule (grilla de programación) */
#schedule .grid, .schedule-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#schedule .program, .schedule-item, .program-card {
  padding: var(--space-2);
  border-radius: calc(var(--radius-xl) - 6px);
}

/* 7) Banners: que nunca desborden */
.banner, #banner-top, #banner-mid { overflow: hidden; }
.bnr-layer > img, .bnr-layer > video, .bnr-layer > iframe { max-width: 100%; height: 100%; }

/* 8) Breakpoints */
/* <= 992px */
@media (max-width: 992px){
  #player .row, #player .grid {
    grid-template-columns: 1fr;
  }
  #schedule .grid, .schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <= 768px */
@media (max-width: 768px){
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .col-6  { grid-column: span 6; }
  .col-4  { grid-column: span 6; }
  .col-3  { grid-column: span 6; }
}

/* <= 480px */
@media (max-width: 480px){
  #schedule .grid, .schedule-grid {
    grid-template-columns: 1fr;
  }
  .section, .card, .panel, .module { padding: var(--space-2); }
}

/* 9) Imágenes y medios, siempre fluidos (por si faltara en alguna hoja) */
img, video, iframe { max-width: 100%; height: auto; display: block; }



/* === NO-CROP + ULTRA-RESPONSIVE OVERRIDES (2025-10-17B) === */

/* 0) Permitir que todo se encoja sin romper filas */
.grid > *, .row > *, .flex > *, .section > *, .card > *, .module > * { min-width: 0; }
* { min-width: 0; box-sizing: border-box; }

/* 1) Evitar recortes en sliders, player y programación */
:root{
  --fit-top: contain;  /* cambiar a 'cover' si querés recorte elegante */
  --fit-mid: contain;
}
/* Sliders */
#banner-top .bnr-layer > img,
#banner-top .bnr-layer > video,
#banner-top .bnr-layer > iframe{
  width: 100%; height: 100%;
  object-fit: var(--fit-top) !important;
}
#banner-mid .bnr-layer > img,
#banner-mid .bnr-layer > video,
#banner-mid .bnr-layer > iframe{
  width: 100%; height: 100%;
  object-fit: var(--fit-mid) !important;
}

/* Player (logos/artworks) */
#player img, #player .artwork img, .mini-player__logo img{
  width: 100%; height: auto; object-fit: contain !important;
  max-height: 38vh; /* no se pasa de alto en móviles */
}

/* Programación (thumbnails) */
#schedule img, .schedule img, .program-card img, .schedule-item img{
  width: 100%; height: auto; object-fit: contain !important;
  max-height: 32vh;
}

/* 2) Contenedores nunca fuerzan ancho fijo que “frene” lo responsive */
.container, .wrap, .header-inner, .content, main, .page {
  width: min(1100px, 100%);
}

/* 3) En narrow viewports, permitir que las tarjetas se apilen antes de cortar */
@media (max-width: 560px){
  #player .row, #player .grid { grid-template-columns: 1fr !important; }
  #schedule .grid, .schedule-grid { grid-template-columns: 1fr !important; }
}

/* 4) Por si algún banner tuviera overflow oculto que tape bordes de la imagen */
.banner, #banner-top, #banner-mid, .bnr-layer { overflow: visible; }



/* === TOP SLIDER: NO CROP ON DESKTOP/MAXIMIZED (2025-10-17C) === */
/* Mobile/tablet: mantenemos cover para que no se vea "fino" */
@media (max-width: 1024px){
  #banner-top .bnr-layer > img,
  #banner-top .bnr-layer > video,
  #banner-top .bnr-layer > iframe{
    object-fit: cover !important;
  }
}

/* Desktop/Maximized: evitar recorte (contain) y centrar con "letterbox" */
@media (min-width: 1025px){
  #banner-top .bnr-layer > img,
  #banner-top .bnr-layer > video,
  #banner-top .bnr-layer > iframe{
    object-fit: contain !important;
    background: transparent; /* si fuera <video>/<img> no aplica, pero no molesta */
  }
}

/* Además, si el viewport es ultrapanorámico (p.ej. 21:9), forzar contain */
@media (min-aspect-ratio: 16/9){
  #banner-top .bnr-layer > img,
  #banner-top .bnr-layer > video,
  #banner-top .bnr-layer > iframe{
    object-fit: contain !important;
  }
}



/* === SLIDERS FIX + PLAYER REFLOW (2025-10-17D) === */

/* 1) Sliders: bordes redondeados y sin imagen "debajo" visible */
:root{ --banner-radius: 16px; } /* ajustable */
#banner-top, #banner-mid{
  border-radius: var(--banner-radius);
  overflow: hidden;              /* recorta capas internas */
  position: relative;
}
/* Heredar el radio a las capas internas */
#banner-top .bnr-stage, #banner-top .bnr-layer,
#banner-mid .bnr-stage, #banner-mid .bnr-layer{
  border-radius: inherit;
}

/* Capas: por defecto invisibles (evita que la precarga se vea debajo) */
.bnr-layer{ opacity: 0; }
/* Cuando entra alguna animación, aseguremos opacidad 1 durante la animación */
/* removed to allow JS fade: .bnr-layer.bnr-anim-fade-in,
.bnr-layer.bnr-anim-slide-in-left,
.bnr-layer.bnr-anim-slide-in-right,
.bnr-layer.bnr-anim-slide-in-up,
.bnr-layer.bnr-anim-slide-in-down,
.bnr-layer.bnr-anim-wipe-in{ opacity: 1 !important; } */

/* Z-index consistente: la capa saliente arriba solo durante la animación */
.bnr-on-top{ z-index: 2; }
.bnr-layer{ z-index: 1; position: absolute; inset: 0; display: grid; place-items: center; }

/* 2) Player: en pantallas chicas, el texto pasa debajo del logo */
#player .row, #player .grid{
  display: grid;
  gap: var(--space-2, 12px);
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas: "art info";
}
/* Intenta mapear clases comunes a áreas */
#player .artwork, #player .player__art, #player .logo, #player .cover{ grid-area: art; }
#player .info, #player .player__info, #player .meta, #player .details{ grid-area: info; }

/* Fallback si no existen esas clases: usa primer/segundo hijo */
@supports not (grid-template-areas: "a"){
  #player .row, #player .grid{ display: flex; gap: var(--space-2, 12px); }
  #player .row > *:first-child, #player .grid > *:first-child{ order: 0; }
  #player .row > *:last-child,  #player .grid > *:last-child{ order: 1; }
}

/* En móviles: una columna (logo arriba, texto abajo) */
@media (max-width: 768px){
  #player .row, #player .grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "art"
      "info";
  }
}

/* 3) Asegurar que banners mantengan animaciones (no bloquear transform) */
#banner-top .bnr-layer, #banner-mid .bnr-layer{
  transition: none;             /* usamos @keyframes, no transitions */
  will-change: opacity, transform, clip-path; /* permitir slides/wipes */
}



/* === SLIDER VISIBILITY + OUT ANIMATIONS + PLAYER REFLOW (2025-10-17E) === */

/* Slider rounded corners + clipping */
:root{ --banner-radius: 16px; }
#banner-top, #banner-mid{ border-radius: var(--banner-radius); overflow: hidden; position: relative; }
#banner-top .bnr-stage, #banner-top .bnr-layer,
#banner-mid .bnr-stage, #banner-mid .bnr-layer{ border-radius: inherit; }

/* Ensure layers are visible by default (initial render) */
/* removed to allow JS fade: .bnr-layer{ opacity: 1 !important; position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; } */
.bnr-on-top{ z-index: 2; }

/* Missing OUT animations for banners */
.bnr-anim-fade-out { animation: bnrFadeOut var(--bnr-dur,600ms) ease both; }
@keyframes bnrFadeOut { from {opacity:1} to {opacity:0} }

.bnr-anim-slide-out-left  { animation: bnrOutLeft  var(--bnr-dur,600ms) ease both; }
.bnr-anim-slide-out-right { animation: bnrOutRight var(--bnr-dur,600ms) ease both; }
.bnr-anim-slide-out-up    { animation: bnrOutUp    var(--bnr-dur,600ms) ease both; }
.bnr-anim-slide-out-down  { animation: bnrOutDown  var(--bnr-dur,600ms) ease both; }
@keyframes bnrOutLeft  { from{opacity:1; transform:none} to{opacity:0; transform:translateX(-8%)} }
@keyframes bnrOutRight { from{opacity:1; transform:none} to{opacity:0; transform:translateX(8%)} }
@keyframes bnrOutUp    { from{opacity:1; transform:none} to{opacity:0; transform:translateY(-8%)} }
@keyframes bnrOutDown  { from{opacity:1; transform:none} to{opacity:0; transform:translateY(8%)} }

/* Player layout using .mini-player block */
.mini-player{
  display: grid;
  gap: var(--space-2, 12px);
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}
.mini-player__art  { order: 0; }
.mini-player__desc { order: 1; }
.mini-player__art img{ max-width:100%; height:auto; object-fit: contain; display:block; }

@media (max-width: 768px){
  .mini-player{
    grid-template-columns: 1fr !important;
  }
  .mini-player__art  { order: 0; }
  .mini-player__desc { order: 1; } /* texto debajo del logo */
}



/* === UNIFORM BANNER SIZE (2200x412) — 2025-10-17F === */
:root{
  --banner-radius: 16px;
  --banner-top-ar: 2200 / 412; /* 5.3398:1 */
  --banner-mid-ar: 2200 / 412; /* mismo ratio */
  --banner-pt-fallback: 18.727%; /* 412 / 2200 * 100 */
}

/* Contenedores con el mismo tamaño y radio */
#banner-top, #banner-mid{
  position: relative;
  width: 100%;
  aspect-ratio: var(--banner-top-ar);
  border-radius: var(--banner-radius);
  overflow: hidden;
}

/* Fallback para navegadores sin aspect-ratio */
#banner-top::before, #banner-mid::before{
  content: "";
  display: block;
  padding-top: var(--banner-pt-fallback);
}
@supports (aspect-ratio: 1){
  #banner-top::before, #banner-mid::before{ content: none; padding-top: 0; }
}

/* Escenario interno ocupa todo el contenedor */
#banner-top .bnr-stage, #banner-mid .bnr-stage,
#banner-top .bnr-layer, #banner-mid .bnr-layer{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
}

/* Las imágenes llenan sin recortar si el ratio coincide (no habrá crop) */
#banner-top .bnr-layer > img,
#banner-mid .bnr-layer > img,
#banner-top .bnr-layer > video,
#banner-mid .bnr-layer > video,
#banner-top .bnr-layer > iframe,
#banner-mid .bnr-layer > iframe{
  width: 100%; height: 100%;
  object-fit: cover;           /* al ser mismo ratio, no recorta */
  object-position: center;
  display: block;
}



/* === TOP SLIDER: FORCE CONTAIN ON DESKTOP (FINAL OVERRIDE) === */
@media (min-width: 1025px){
  #banner-top{
    aspect-ratio: 2200 / 412; /* explícito por si otro bloque lo pisa */
  }
  #banner-top .bnr-layer > img,
  #banner-top .bnr-layer > video,
  #banner-top .bnr-layer > iframe{
    width: 100%; height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
  }
}



/* === TOP SLIDER: NEVER CROP ON DESKTOP — STRICT (2025-10-17G) === */
@media (min-width: 1025px){
  /* asegúrate de que el contenedor no fuerce alturas raras */
  #banner-top{ height: auto !important; min-height: 0 !important; max-height: none !important; }

  /* las capas ocupan el 100% del alto del contenedor con el ratio */
  #banner-top .bnr-stage, #banner-top .bnr-layer{ position:absolute; inset:0; width:100%; height:100%; }
  
  /* la imagen/vídeo SIEMPRE contiene y no se recorta */
  #banner-top .bnr-layer > img,
  #banner-top .bnr-layer > video,
  #banner-top .bnr-layer > iframe{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}



/* === UNIFY SLIDERS: BOTH CONTAIN (2025-10-17H) === */
#banner-top .bnr-layer > img,
#banner-top .bnr-layer > video,
#banner-top .bnr-layer > iframe,
#banner-mid .bnr-layer > img,
#banner-mid .bnr-layer > video,
#banner-mid .bnr-layer > iframe{
  object-fit: contain !important;
  object-position: center center !important;
}



/* === SLIDER SAFETY VISIBILITY + CONTAIN (2025-10-17J) === */
#banner-top, #banner-mid{ position: relative; min-height: 120px; }
#banner-top .bnr-stage, #banner-mid .bnr-stage,
#banner-top .bnr-layer, #banner-mid .bnr-layer{ position:absolute; inset:0; width:100%; height:100%; }

/* removed to allow JS fade: #banner-top /* removed to allow JS fade: .bnr-layer, #banner-mid .bnr-layer{ opacity: 1 !important; } */ */
#banner-top .bnr-layer > img, #banner-top .bnr-layer > video, #banner-top .bnr-layer > iframe,
#banner-mid .bnr-layer > img, #banner-mid .bnr-layer > video, #banner-mid .bnr-layer > iframe{
  width: 100%; height: 100%;
  object-fit: contain !important;
  display: block;
}



/* === HARD RESET: SLIDERS VISIBLE + SIZING + PLAYER REFLOW (2025-10-17K) === */

/* Containers */
#banner-top, #banner-mid{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 2200 / 412 !important;   /* mismo ratio para ambos */
  min-height: 120px !important;
  overflow: hidden !important;
  border-radius: var(--banner-radius, 16px) !important;
}

/* Internal stage & layers fill container */
/* removed to allow JS fade: #banner-top .bnr-stage, #banner-mid .bnr-stage,
#banner-top /* removed to allow JS fade: .bnr-layer, #banner-mid .bnr-layer{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
} */ */
.bnr-on-top{ z-index: 2 !important; }

/* Media inside layers: always fill; without crop by default */
#banner-top .bnr-layer > img, #banner-top .bnr-layer > video, #banner-top .bnr-layer > iframe,
#banner-mid .bnr-layer > img, #banner-mid .bnr-layer > video, #banner-mid .bnr-layer > iframe{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;  /* si querés cover, lo cambiamos luego */
  object-position: center center !important;
  display: block !important;
}

/* Make sure "in" animations keep opacity visible */
.bnr-anim-fade-in,
.bnr-anim-slide-in-left,
.bnr-anim-slide-in-right,
.bnr-anim-slide-in-up,
.bnr-anim-slide-in-down,
.bnr-anim-wipe-in{ opacity: 1 !important; }

/* Player: force single column on mobile (logo arriba, texto abajo) */
@media (max-width: 768px){
  .mini-player{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2, 12px) !important;
  }
  .mini-player__art  { order: 0 !important; }
  .mini-player__desc { order: 1 !important; }
  .mini-player__art img{ max-width:100%; height:auto; object-fit: contain; display:block; }
}



/* === ENABLE JS FADE: allow inline opacity/transition to work (2025-10-17) === */
#banner-top .bnr-layer,
#banner-mid .bnr-layer{
  /* no fixed opacity here; JS controls it */
  opacity: unset;
  /* allow JS to set transition inline */
  transition: none;
  will-change: opacity, transform, clip-path;
}

/* Ensure stacking is correct during fades/slides */
#banner-top .bnr-layer.bnr-on-top,
#banner-mid .bnr-layer.bnr-on-top{ z-index: 2; }
#banner-top .bnr-layer:not(.bnr-on-top),
#banner-mid .bnr-layer:not(.bnr-on-top){ z-index: 1; }

/* theme.final.css — sin barras, con fade funcional y proporciones correctas */

#banner-top, #banner-mid {
  position: relative;
  overflow: hidden;
  border-radius: var(--banner-radius, 16px);
  background: none;
}

/* Capas internas */
#banner-top .bnr-layer,
#banner-mid .bnr-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  transition: none;
  will-change: opacity, transform;
  z-index: 1;
}
#banner-top .bnr-layer.bnr-on-top,
#banner-mid .bnr-layer.bnr-on-top {
  z-index: 2;
}

/* Imágenes, videos o iframes ajustados */
#banner-top .bnr-layer > img,
#banner-mid .bnr-layer > img,
#banner-top .bnr-layer > video,
#banner-mid .bnr-layer > video,
#banner-top .bnr-layer > iframe,
#banner-mid .bnr-layer > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover !important;   /* evita barras */
  object-position: center center !important;
  display: block;
  background: none;
}

/* Móviles: altura flexible */
@media (max-width: 1024px) {
  :root {
    --banner-mobile-h: clamp(96px, 18vw, 160px);
  }
  #banner-top, #banner-mid {
    height: var(--banner-mobile-h);
    min-height: var(--banner-mobile-h);
  }
}

/* Escritorio: proporción original sin barras */
@media (min-width: 1025px) {
  #banner-top, #banner-mid {
    aspect-ratio: 2200 / 412;
  }
}