/* =========================================================
   Banner del río: río que pasa, aves que se marchan, oso andino y sonido
   Colores por identidad mediante variables (A editorial / B logo).
   ========================================================= */
.banner {
  /* Identidad A: atardecer de páramo en verdes */
  --bn-s1: #1b2f2a; --bn-s2: #7d978f; --bn-glow: #e9efe6;
  --bn-far: #4f6b63; --bn-mid: #2f4a42;
  --bn-r1: #b9d2d0; --bn-r2: #3f7887; --bn-flow: #ffffff;
  --bn-bank: #13221d; --bn-grass: #2f4a42;
  --bn-bear: #0b1411; --bn-spect: #d9c9a8;
  --bn-bird: #0b1411; --bn-plant: #22382f;
  position: relative; width: 100%; height: clamp(120px, 20vh, 210px); overflow: hidden; flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
html[data-identidad="logo"] .banner {
  /* Identidad B: mañana luminosa en azules del sello */
  --bn-s1: #ffffff; --bn-s2: #d6e6f6; --bn-glow: #ffffff;
  --bn-far: #b8d3ef; --bn-mid: #8db9e6;
  --bn-r1: #6fa3da; --bn-r2: #0b5aa6; --bn-flow: #ffffff;
  --bn-bank: #f4f8fd; --bn-grass: #6fa3da;
  --bn-bear: #0e4a8c; --bn-spect: #cfe1f4;
  --bn-bird: #0b3d78; --bn-plant: #1f63ad;
  border-bottom-color: rgba(15, 90, 168, .15);
}
.banner__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bn-s1 { stop-color: var(--bn-s1); } .bn-s2 { stop-color: var(--bn-s2); }
.bn-r1 { stop-color: var(--bn-r1); } .bn-r2 { stop-color: var(--bn-r2); }
.bn-glow { stop-color: var(--bn-glow); }
.bn-far { fill: var(--bn-far); } .bn-mid { fill: var(--bn-mid); }
.bn-bank { fill: var(--bn-bank); } .bn-grass { stroke: var(--bn-grass); }
.bn-plant { fill: var(--bn-plant); }
.bn-bear, .bn-leg { fill: var(--bn-bear); }
.bn-spect { stroke: var(--bn-spect); } .bn-eye { fill: var(--bn-spect); }
.bn-birds { stroke: var(--bn-bird); stroke-width: 1.6; }

/* --- El río corre de izquierda a derecha --- */
.bn-flow path { stroke: var(--bn-flow); }
.bn-f1 { stroke-width: 2; opacity: .75; stroke-dasharray: 26 60; animation: bn-flow 6s linear infinite; }
.bn-f2 { stroke-width: 1.6; opacity: .55; stroke-dasharray: 14 44; animation: bn-flow 4.5s linear infinite; }
.bn-f3 { stroke-width: 1.3; opacity: .45; stroke-dasharray: 40 90; animation: bn-flow 8s linear infinite; }
.bn-f4 { stroke-width: 1.2; opacity: .5; stroke-dasharray: 8 36; animation: bn-flow 3.6s linear infinite; }
@keyframes bn-flow { to { stroke-dashoffset: -860; } }

/* --- El oso andino camina por la orilla --- */
/* Camina de un lado a otro por la zona central (visible también en teléfonos) y se da la vuelta */
.bn-bear-walk { animation: bn-walk 44s linear infinite; }
@keyframes bn-walk {
  0%   { transform: translateX(1180px) scaleX(1); }
  47%  { transform: translateX(420px) scaleX(1); }
  50%  { transform: translateX(420px) scaleX(-1) translateX(-118px); }
  97%  { transform: translateX(1180px) scaleX(-1) translateX(-118px); }
  100% { transform: translateX(1180px) scaleX(1); }
}
.bn-bear-bob { animation: bn-bob .9s ease-in-out infinite; }
@keyframes bn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.bn-leg { transform-box: fill-box; transform-origin: 50% 0; animation: bn-step .9s ease-in-out infinite; }
.bn-leg-b { animation-delay: -.45s; }
@keyframes bn-step { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }

/* --- Las aves se marchan: se alejan, se hacen pequeñas y desaparecen --- */
.bn-bird { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bn-away 11s cubic-bezier(.4, .1, .6, 1) infinite; animation-delay: var(--d); }
@keyframes bn-away {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  6% { opacity: 1; }
  70% { opacity: .8; }
  100% { transform: translate(var(--x), var(--y)) scale(.22); opacity: 0; }
}
.bn-wing { transform-box: fill-box; transform-origin: center bottom; animation: bn-flap .38s ease-in-out infinite alternate; }
@keyframes bn-flap { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }

/* --- Botón de sonido (nunca suena solo) --- */
.banner__sound {
  position: absolute; right: max(12px, 2vw); top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); cursor: pointer;
  background: rgba(10, 20, 18, .45); color: #fff; font: 600 .74rem/1 var(--font, sans-serif); letter-spacing: .06em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s;
}
.banner__sound:hover { background: rgba(10, 20, 18, .65); }
.banner__sound svg { width: 20px; height: 20px; }
.banner__sound .i-off { display: none; }
.banner__sound[aria-pressed="true"] .i-on { display: none; }
.banner__sound[aria-pressed="true"] .i-off { display: block; }
.banner__sound[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid currentColor; animation: bn-pulse 2.2s ease-out infinite;
}
@keyframes bn-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.35, 1.8); opacity: 0; } }
html[data-identidad="logo"] .banner__sound { background: rgba(255, 255, 255, .85); color: var(--water, #0f5aa8); border-color: rgba(15, 90, 168, .35); }
html[data-identidad="logo"] .banner__sound:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bn-flow path, .bn-bear-walk, .bn-bear-bob, .bn-leg, .bn-bird, .bn-wing { animation: none !important; }
  .bn-bear-walk { transform: translateX(1100px); }
  .bn-bird { opacity: 1; }
}