/* =========================
   Base
   ========================= */

.theme-banner {
  --h: 90px;
  --speed: 42s;
  --marquee-gap: 220px;

  position: relative;
  height: var(--h);
  overflow: hidden;
  font: 600 15px/1.2 system-ui, Arial;
}

/* =========================
   Fondo navideño
   ========================= */

.theme-banner.christmas-season {
  background:
    radial-gradient(circle at 15% 50%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(90deg, #b01c1c, #0f7649);
  color: #ffffff;
}

.theme-banner.christmas-season::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.12)
  );
  z-index: 1;
}

/* =========================
   Layout (DESKTOP)
   ========================= */

.tb-inner {
  position: relative;
  z-index: 3;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  height: 100%;
  padding: 0 12px;
  padding-left: 0;
  column-gap: 14px;
}

/* =========================
   Icono / Bolas
   ========================= */

.tb-flag {
  width: var(--h);
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  position: relative;
  z-index: 4;
}

.tb-flag-img {
  height: 98%;
  width: auto;
  max-height: 98%;
  max-width: 98%;

  object-fit: contain;
  display: block;

  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* =========================
   Texto
   ========================= */

.tb-text {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  width: 100%;
}

.tb-title { display: none; }
.tb-message { display: none; }

/* =========================
   Marquee (CENTRADO REAL)
   ========================= */

.tb-marquee {
  position: relative;
  height: 100%;

  display: flex;
  align-items: center;   /* centrado vertical REAL */
  overflow: hidden;

  width: 100%;
  min-width: 0;
}

/* Track animado SOLO en X */
.tb-track {
  position: absolute;
  left: 100%;

  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  padding-right: var(--marquee-gap);
  animation: marqueeOne var(--speed) linear infinite;
}

@keyframes marqueeOne {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

.tb-item {
  display: inline-flex;
  align-items: center;
}

.tb-item .text {
  font-size: 21px;
  font-weight: 900;
  color: #ffffff;

  line-height: 1;
  margin: 0;
  padding: 0;

  text-shadow:
    0 0 2px rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.25);
}

.tb-sep {
  margin: 0 20px;
  color: rgba(255,255,255,.55);
}

/* =========================
   CTA (DESKTOP)
   ========================= */

.tb-cta {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  min-width: 120px;

  background: #ffffff;
  color: #111827;
  padding: 0 16px;
  border-radius: 8px;

  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* =========================
   ❄️ Nieve
   ========================= */

.tb-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.snowflake {
  position: absolute;
  top: -10px;
  width: var(--sf);
  height: var(--sf);
  background: #ffffff;
  border-radius: 50%;
  opacity: .95;
  animation: snow-fall var(--dur) linear var(--delay) infinite;
}

@keyframes snow-fall {
  to { transform: translateY(120px); }
}

/* =========================
   RESPONSIVE (FIX: TICKER VISIBLE)
   ========================= */

@media (max-width: 720px) {

  /* Texto un poco menor */
  .tb-item .text {
    font-size: 18px;
  }

  .theme-banner {
    --marquee-gap: 140px;
  }

  .tb-flag-img {
    height: 85%;
    max-height: 85%;
  }

  /* Mantener 2 columnas: icono (fijo) + ticker (flexible)
     y una segunda fila para el CTA */
  .tb-inner {
    grid-template-columns: var(--h) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    row-gap: 6px;
    column-gap: 12px;
  }

  /* Ticker en columna 2 (evita superposición con el icono) */
  .tb-text {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    min-width: 0; /* crítico para que NO colapse el marquee */
  }

  /* Asegurar que el marquee no colapse */
  .tb-marquee {
    width: 100%;
    min-width: 0;
  }

  /* CTA centrado abajo */
  .tb-cta {
    grid-column: 1 / -1;
    grid-row: 2 / 3;

    justify-self: center;
    align-self: center;

    min-width: 160px;
    height: 40px;
    padding: 0 18px;
  }
}