/* ===== CINTILLO TEMÁTICO – MES DE LA PATRIA (CR) ===== */

/* Base */
.theme-banner {
  --h: 90px;               /* altura fija del banner */
  --pad-x: 10px;
  --radius: 0;
  --shadow: 0 6px 20px rgba(0,0,0,.18);
  --text: #0b1220;
  --text-weak: #334155;
  --btn: #111827;
  --btn-bg: #ffffff;
  --btn-bg-h: #f3f4f6;
  --speed: 28s;            /* duración del scroll (se puede setear con data-speed) */

  /* 🎛️ Controles de claridad */
  --flag-alpha: .23;       /* 0 = totalmente transparente, 1 = sólido */
  --veil: .985;            /* velo blanco por encima del fondo */

  position: relative; z-index: 20; width: 100%;
  height: var(--h);
  padding: 0 !important;            /* sin padding vertical */
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow);
  font: 600 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.theme-banner .tb-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;                   /* centra verticalmente flag, texto y CTA */
  gap: 12px;
  height: 100%;
  padding: 0 var(--pad-x);
  z-index: 2;                            /* texto/CTA por encima del efecto */
}

/* Bandera / escudo CR centrado */
.tb-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h);          /* ancho proporcional a la altura del banner */
  height: var(--h);         /* alto del bloque igual al banner */
}

.tb-flag-img {
  max-height: 82%;          
  max-width: 82%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
  opacity: 0.65; /* 🔥 escudo con opacidad fija de 65% */
}

/* Texto y CTA */
.tb-text { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.tb-title { font-weight: 900; letter-spacing:.01em; white-space:nowrap; }
.tb-message { display:none; }        /* fuente de datos para el ticker */

.tb-cta {
  all: unset; cursor: pointer; background: var(--btn-bg); color: var(--btn);
  padding: 10px 12px; border-radius: 10px; font-weight: 800; letter-spacing:.02em;
  border: 1px solid rgba(0,0,0,.08); user-select:none;
}
.tb-cta:hover { background: var(--btn-bg-h); }

/* ===== Bandera Costa Rica exacta a 90px con alpha configurable ===== */
.theme-banner.patria-cr {
  background:
    linear-gradient(0deg,
      rgba(0, 43,127, var(--flag-alpha)) 0px,   rgba(0, 43,127, var(--flag-alpha)) 15px,   /* azul 15 */
      rgba(255,255,255, var(--flag-alpha)) 15px, rgba(255,255,255, var(--flag-alpha)) 30px,/* blanco 15 */
      rgba(206, 17, 38, var(--flag-alpha)) 30px, rgba(206, 17, 38, var(--flag-alpha)) 60px,/* rojo 30 */
      rgba(255,255,255, var(--flag-alpha)) 60px, rgba(255,255,255, var(--flag-alpha)) 75px,/* blanco 15 */
      rgba(0, 43,127, var(--flag-alpha)) 75px,   rgba(0, 43,127, var(--flag-alpha)) 90px   /* azul 15 */
    );
  background-repeat: no-repeat;
  background-size: 100% var(--h);
  color: var(--text);
  position: relative;
}

/* Velo blanco para aclarar aún más (ajustable con --veil) */
.theme-banner.patria-cr::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,var(--veil)), rgba(255,255,255,var(--veil)));
  z-index: 0;                        /* velo debajo del efecto y del texto */
}
.theme-banner.patria-cr .tb-inner { position: relative; }

/* ===== Capa de efectos (confetti o fireworks) ===== */
.tb-effects {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  z-index: 1; /* detrás del texto */
}

/* --- Confetti (opcional, dorado) --- */
.tb-effects .tb-confetti { position:absolute; inset:0; }
.tb-effects .tb-confetti i {
  --w: 8px; --h: 12px;
  position:absolute; width:var(--w); height:var(--h); opacity:.9;
  top:-20px; transform: translateY(-20px) rotate(0deg);
  animation: fall var(--dur, 3s) linear infinite;
}
@keyframes fall { to { transform: translateY(120%) rotate(360deg); opacity:.95; } }

/* --- Fireworks (predeterminado) --- */
.tb-effects .fw-burst {
  position:absolute; width:6px; height:6px;
  transform: translate(-50%, -50%); /* centra el origen del estallido */
}
.tb-effects .fw-spark {
  position:absolute; left:0; top:0; width:2px; height:10px;
  border-radius: 2px; transform-origin: center bottom; opacity:0;
  animation: fw 900ms ease-out forwards;
}
@keyframes fw {
  0%   { opacity:1; transform: rotate(var(--a)) translateY(0) scaleY(.4); }
  80%  { opacity:1; }
  100% { opacity:0; transform: rotate(var(--a)) translateY(var(--d)) scaleY(1); }
}

/* ===== Marquee / Ticker ===== */
.tb-marquee {
  position: relative; max-width: 100%;
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  display:flex; align-items:center;     
  z-index: 2;                           
}
.tb-track {
  position: absolute; 
  top: 50%;
  left: 0; 
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 36px;
  white-space: nowrap; will-change: transform;
  animation: marquee var(--speed) linear infinite; 
}
.tb-track.clone { left: 100%; }
@keyframes marquee {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(-100%, -50%, 0); }
}
.tb-item { display:inline-flex; align-items:center; gap: 12px; }
.tb-item .text { color: #0b1220; font-weight: 700; font-size: 16px; }
.tb-sep { color: #6b7280; opacity:.8; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .tb-flag { width: 72px; }          
  .tb-title { display:none; }
  .tb-cta   { padding: 8px 10px; font-weight: 700; }
}