/* Cinta de campaña (campana.js): clip propio sin sonido con el texto encima, justo antes de
   Novedades. Prefijo cam-: .cinta ya es la franja de la portada.
   Computador: el texto va sobre el video, con un degradado azul que lo hace legible con
   cualquier clip. Celular: el video arriba (16:9) y el texto debajo, sobre azul liso. */
.campana{padding:72px var(--gutter) 0}
.cam-marco{position:relative;display:grid;border-radius:var(--radio);overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.cam-marco :focus-visible{outline-color:#fff}
.cam-medio,.cam-txt{grid-area:1/1}
.cam-medio{position:relative;min-height:clamp(340px,32vw,460px)}
.cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy)}
.cam-medio::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,38,96,.94) 0%,rgba(9,38,96,.78) 36%,rgba(9,38,96,0) 74%)}
.cam-txt{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  max-width:min(560px,62%);padding:44px clamp(28px,4vw,60px)}
.campana .eyebrow{color:var(--cielo)}
.cam-titulo{font-size:clamp(28px,3vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.cam-texto{font-size:17px;line-height:1.5;color:#DCE6F7;max-width:42ch}
.cam-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn.cam-sonido{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn.cam-sonido:hover{background:rgba(255,255,255,.12)}
/* la pausa: siempre a la vista, en la esquina contraria al texto */
.cam-pausa{position:absolute;right:16px;bottom:16px;z-index:2;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:rgba(9,38,96,.75);color:#fff;cursor:pointer}
.cam-pausa:hover{background:var(--navy)}
.cam-pausa svg{width:20px;height:20px}

@media (max-width:900px){
  .cam-txt{max-width:min(520px,78%)}
  .cam-medio::after{background:linear-gradient(90deg,rgba(9,38,96,.94) 0%,rgba(9,38,96,.82) 50%,rgba(9,38,96,.2) 100%)}
}
@media (max-width:600px){
  .campana{padding-top:56px}
  .cam-medio{min-height:0;aspect-ratio:16/9}
  .cam-medio::after{display:none}
  .cam-txt{grid-area:2/1;max-width:none;padding:24px 22px 28px;gap:12px}
  .cam-pausa{right:12px;bottom:12px;width:44px;height:44px}
  .cam-acciones{width:100%}
  .cam-acciones .btn{flex:1 1 auto}
}