/* =========================================================================
   TOP BANNER — galería de servicios CMA con desplazamiento continuo
   ========================================================================= */
.top-banner {
  position:relative;
  width:100%;
  /* Color sólido de respaldo: si alguna variable del degradado falla,
     el fondo sigue siendo oscuro y el texto claro permanece legible. */
  background-color:#0a2b21;
  background-image:
    radial-gradient(1200px 420px at 12% -10%, rgba(255,198,41,.16), transparent 60%),
    linear-gradient(180deg, var(--pine-900, #0a2b21) 0%, var(--pine, #14432C) 62%, var(--pine-700, #1C5A3C) 100%);
  padding: clamp(28px, 4vw, 46px) 0 0;
  overflow:hidden;
}

.top-banner-head {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom: clamp(18px, 3vw, 28px);
  color:var(--cream);
}

.tb-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--sun-300);
  font-family:var(--mono);
}

.tb-eyebrow .dot {
  width:7px; height:7px; border-radius:50%; background:var(--sun);
  box-shadow:0 0 0 4px rgba(255,198,41,.22);
}

/* La regla global "h1, h2 { background-clip:text; -webkit-text-fill-color:transparent }"
   pintaba este titular con el degradado verde oscuro sobre fondo oscuro.
   Aquí se anula para que el color claro vuelva a aplicarse. */
.tb-title {
  font-size:clamp(1.5rem, 3.4vw, 2.35rem);
  max-width:760px;
  color:var(--cream-100, #FAF4E5);
  background:none;
  -webkit-background-clip:border-box;
          background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}

.tb-title .highlight-tb {
  color:var(--sun-300, #FFE082);
  -webkit-text-fill-color:currentColor;
}

.tb-sub {
  font-family:var(--sans);
  color:var(--cream-300, #cfe3d6);
  opacity:1;              /* antes .82: bajaba el contraste por debajo del mínimo AA */
  max-width:640px;
  font-size:.98rem;
}

/* ---------- pista deslizante ---------- */
.top-banner-strip {
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.tb-track {
  display:flex;
  align-items:stretch;
  gap: clamp(16px, 2.2vw, 26px);
  width:max-content;
  padding: 4px clamp(14px, 2vw, 22px) clamp(30px, 4vw, 44px);
  animation: tb-scroll 130s linear infinite;
  will-change: transform;
}

.top-banner-strip:hover .tb-track, .top-banner-strip:focus-within .tb-track {
  animation-play-state: paused;
}

@keyframes tb-scroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

.tb-slide {
  position:relative;
  flex:0 0 auto;
  height: clamp(260px, 38vw, 560px);
  aspect-ratio: 1100 / 614;
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--lift);
  border:1px solid rgba(255,249,236,.14);
  background:var(--pine-700);
}

.tb-slide img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .6s ease;
}

.tb-slide:hover img { transform:scale(1.045); }

.tb-slide::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,48,32,0) 55%, rgba(14,48,32,.42) 100%);
  pointer-events:none;
}

.tb-caption {
  position:absolute; left:16px; right:16px; bottom:12px;
  z-index:1;
  color:var(--cream);
  font-family:var(--sans);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.top-banner-bar {
  height:5px;
  width:100%;
  background:linear-gradient(90deg, var(--sun) 0%, var(--ember) 34%, var(--coop-400) 68%, var(--pine-700) 100%);
}

@media (max-width: 640px) {
  .top-banner { padding-top:22px; }
  .tb-slide { height:240px; border-radius:16px; }
  .tb-caption { font-size:.82rem; }
  .only-desktop { display:none; }
}