/* Franja de vídeo de la portada (Pexels, licencia libre). Oct-2026. */

.hz-media-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Portada · franja de cine a pantalla completa ---------- */
.hz-band { position: relative; min-height: clamp(380px, 62vh, 620px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #050913; }
.hz-band .hz-media-fill { z-index: -2; }
.hz-band-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 15% 50%, rgba(5,9,19,.88) 0%, rgba(5,9,19,.55) 45%, rgba(5,9,19,.25) 100%),
    linear-gradient(180deg, rgba(10,15,30,1) 0%, rgba(10,15,30,0) 18%, rgba(10,15,30,0) 82%, rgba(10,15,30,1) 100%); }
.hz-band-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 4rem 5%; }
.hz-band-k { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; font-size: .78rem; color: #7fc4ff; margin: 0 0 .9rem; }
.hz-band-t { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .95; letter-spacing: .01em; color: #fff; margin: 0; max-width: 12ch; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.hz-band-t span { color: #1a8fff; }
.hz-band-s { color: #c9d5ea; font-size: 1.05rem; line-height: 1.6; max-width: 44ch; margin: 1.1rem 0 1.8rem; }
.hz-band-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hz-band-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hz-band-pills span { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .08em; font-size: .85rem; text-transform: uppercase; color: #dfe8f7;
  padding: .38rem .8rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.hz-band-pills b { color: #fff; }

@media (max-width: 768px) {
  .hz-band { min-height: 440px; align-items: flex-end; }
  .hz-band-shade { background: linear-gradient(180deg, rgba(10,15,30,1) 0%, rgba(5,9,19,.35) 30%, rgba(5,9,19,.88) 72%, rgba(10,15,30,1) 100%); }
  .hz-band-inner { padding: 3rem 1.1rem 2.6rem; }
  .hz-band-s { font-size: .98rem; }
}

/* ---------- Portada · bloque grande de patrocinios (-> /patrocinios) ---------- */
@property --hz-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hz-spon { padding: clamp(3rem, 7vw, 5.5rem) 5%; }
.hz-spon-card { position: relative; isolation: isolate; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.8rem, 4.5vw, 3.4rem); border-radius: 26px; overflow: hidden;
  background: radial-gradient(70% 90% at 0% 0%, rgba(43,134,255,.30), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(255,140,56,.24), transparent 60%), linear-gradient(160deg, #0b1430, #070b18);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.hz-spon-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--hz-a), transparent 0deg, transparent 250deg, #ff8c38 300deg, #7fc4ff 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hzSpin 6s linear infinite; }
@keyframes hzSpin { to { --hz-a: 360deg; } }
.hz-spon-k { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; font-size: .76rem; color: #ffb066; margin: 0 0 .8rem; }
.hz-spon-k i { width: 8px; height: 8px; border-radius: 50%; background: #ff8c38; box-shadow: 0 0 12px #ff8c38; }
.hz-spon-t { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: .98; color: #fff; margin: 0; }
.hz-spon-t span { color: #1a8fff; }
.hz-spon-big { margin: 1.3rem 0 0; font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.8rem, 10vw, 7.4rem); line-height: .86; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #bfe1ff 45%, #2b86ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 40px rgba(43,134,255,.45)); }
.hz-spon-bigl { margin: .4rem 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1rem, 2vw, 1.25rem); color: #fff; }
.hz-spon-bigl small { display: block; margin-top: .2rem; font-size: .78rem; letter-spacing: .08em; color: #8a97b3; font-weight: 600; }
.hz-spon-stats { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hz-spon-stats li { padding: .85rem .8rem; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.hz-spon-stats b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.8rem; line-height: 1; color: #fff; }
.hz-spon-stats span { display: block; margin-top: .25rem; color: #aab6d0; font-size: .78rem; line-height: 1.3; }
.hz-spon-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hz-spon-wa { display: inline-flex; align-items: center; gap: .4rem; padding: .9rem 1.6rem; border-radius: 5px; background: #25d366; color: #fff; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; transition: transform .2s, box-shadow .2s; }
.hz-spon-wa:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(37,211,102,.45); }

/* maquetas */
.hz-spon-vis { position: relative; min-height: 400px; }
.hz-spon-ev { position: absolute; left: 0; top: 14%; width: 62%; z-index: 2; transform: rotate(-5deg); padding: 1.1rem 1rem 1rem; border-radius: 14px; background: #0d1427; border: 1px solid rgba(0,150,255,.35);
  box-shadow: 0 30px 60px rgba(0,0,0,.55); overflow: hidden; animation: hzFloat 6s ease-in-out infinite; }
.hz-spon-ev::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #ff8c38, #ffd24a); }
.hz-spon-ev-top { display: flex; justify-content: space-between; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem; }
.hz-spon-ev-top span, .hz-spon-ev-top em { font-style: normal; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; padding: .2rem .45rem; border-radius: 999px; }
.hz-spon-ev-top span { background: rgba(255,140,56,.15); color: #ffb066; }
.hz-spon-ev-top em { background: rgba(0,150,255,.15); color: #7fc4ff; }
.hz-spon-ev-t { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1; color: #fff; margin: 0; }
.hz-spon-ev-t span { color: #ffb066; }
.hz-spon-ev-h { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; color: #1a8fff; margin: .35rem 0 0; }
.hz-spon-ev-m { color: #aab6d0; font-size: .76rem; margin: .1rem 0 0; }
.hz-spon-ev-f { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; }
.hz-spon-ev-f b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.4rem; color: #1a8fff; }
.hz-spon-ev-f span { background: #0057ff; color: #fff; border-radius: 5px; padding: .35rem .65rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.hz-spon-phone { position: absolute; right: 4%; top: 0; width: 46%; max-width: 210px; aspect-ratio: 9/16; z-index: 1; transform: rotate(6deg); border-radius: 26px; overflow: hidden; background: #000;
  border: 6px solid #1b2236; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 34px 70px rgba(0,0,0,.6); animation: hzFloat 7s ease-in-out -2s infinite; }
.hz-spon-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hz-spon-phone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.6)); }
.hz-spon-phone-u { position: absolute; top: 12px; left: 12px; z-index: 1; color: #fff; font-weight: 700; font-size: .7rem; }
.hz-spon-phone-s { position: absolute; z-index: 1; left: 56%; top: 66%; transform: translate(-50%, -50%) rotate(-4deg); width: max-content; max-width: 86%; text-align: center; padding: .4rem .6rem; border-radius: 10px;
  background: #fff; color: #0a0f1e; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: .78rem; line-height: 1.1; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.hz-spon-phone-s b { color: #ff5a1f; }
.hz-spon-phone-v { position: absolute; left: 12px; bottom: 12px; z-index: 1; color: #fff; font-weight: 700; font-size: .75rem; }
@keyframes hzFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

@media (max-width: 960px) {
  .hz-spon-card { grid-template-columns: 1fr; }
  .hz-spon-vis { min-height: 360px; max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hz-spon { padding: 2.5rem 16px; }
  .hz-spon-card { padding: 1.6rem 1.2rem; border-radius: 20px; }
  .hz-spon-stats { grid-template-columns: 1fr 1fr; }
  .hz-spon-stats b { font-size: 1.6rem; }
  .hz-spon-cta a { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hz-spon-vis { min-height: 320px; }
  .hz-spon-ev { width: 70%; }
  .hz-spon-phone { width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .hz-spon-card::after, .hz-spon-ev, .hz-spon-phone { animation: none; }
}

/* ---------- Portada · patrocinios arriba (oct-2026 b) ---------- */
.hz-spon { padding-top: clamp(1rem, 3vw, 2rem); }
.hz-spon-bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .3; filter: saturate(1.2); }
.hz-spon-bgshade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,11,24,.94) 0%, rgba(7,11,24,.78) 48%, rgba(7,11,24,.35) 100%),
    radial-gradient(60% 80% at 100% 100%, rgba(255,140,56,.28), transparent 60%); }
.hz-spon-card { box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 80px rgba(43,134,255,.18); }
.hz-spon-card::after { padding: 2px; }

/* etiqueta en la cabecera */
.hz-hero-spon { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .35rem .6rem; margin-top: 1.3rem; padding: .62rem 1.1rem;
  border-radius: 999px; text-decoration: none; color: #fff; font-size: .9rem; line-height: 1.3; isolation: isolate;
  background: linear-gradient(120deg, rgba(255,140,56,.22), rgba(43,134,255,.18)); border: 1px solid rgba(255,176,102,.55);
  box-shadow: 0 0 30px rgba(255,140,56,.25); transition: transform .2s, box-shadow .2s; animation: hzSponGlow 2.6s ease-in-out infinite; }
.hz-hero-spon:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(255,140,56,.45); }
.hz-hero-spon i { width: 8px; height: 8px; border-radius: 50%; background: #ff8c38; box-shadow: 0 0 0 0 rgba(255,140,56,.7); animation: hzSponPing 1.8s infinite; }
.hz-hero-spon b { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #ffb066; }
.hz-hero-spon span { color: #e6edf9; }
.hz-hero-spon em { font-style: normal; color: #ffb066; font-weight: 700; transition: transform .2s; }
.hz-hero-spon:hover em { transform: translateX(3px); }
@keyframes hzSponGlow { 0%, 100% { box-shadow: 0 0 22px rgba(255,140,56,.2); } 50% { box-shadow: 0 0 40px rgba(255,140,56,.42); } }
@keyframes hzSponPing { 0% { box-shadow: 0 0 0 0 rgba(255,140,56,.65); } 70% { box-shadow: 0 0 0 9px rgba(255,140,56,0); } 100% { box-shadow: 0 0 0 0 rgba(255,140,56,0); } }
@media (max-width: 600px) {
  .hz-hero-spon { font-size: .82rem; padding: .6rem .9rem; border-radius: 16px; }
  .hz-spon-bgshade { background: linear-gradient(180deg, rgba(7,11,24,.9) 0%, rgba(7,11,24,.8) 60%, rgba(7,11,24,.55) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hz-hero-spon, .hz-hero-spon i { animation: none; } }

/* ===== Home · bloque de patrocinios compacto (oct-2026): sin maquetas, formatos a la vista ===== */
.hz-spon--v2 .hz-spon-card { grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.hz-spon--v2 .hz-spon-t { font-size: clamp(2rem, 4vw, 3rem); }
.hz-spon-txt { margin: .9rem 0 0; max-width: 34rem; color: #b9c4dc; font-size: .98rem; line-height: 1.55; }
.hz-spon-fmt { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hz-spon-fmt li { padding: .42rem .75rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e6ecf8; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.hz-spon--v2 .hz-spon-nums { padding: clamp(1.2rem, 2.5vw, 1.8rem); border-radius: 18px; background: linear-gradient(160deg, rgba(0,87,255,.16), rgba(255,140,56,.08)); border: 1px solid rgba(255,255,255,.1); }
.hz-spon--v2 .hz-spon-big { margin: 0; font-size: clamp(3.4rem, 7vw, 5.6rem); }
.hz-spon--v2 .hz-spon-stats { grid-template-columns: 1fr 1fr; margin-top: 1.1rem; }
@media (max-width: 900px) {
  .hz-spon--v2 .hz-spon-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hz-spon-txt { display: none; }
  .hz-spon-fmt { gap: 6px; }
  .hz-spon-fmt li { font-size: .82rem; padding: .3rem .55rem; }
  .hz-spon--v2 .hz-spon-cta { flex-wrap: nowrap; }
  .hz-spon--v2 .hz-spon-cta a { flex: 1 1 0; padding-left: .6rem; padding-right: .6rem; }
  .hz-spon--v2 .hz-spon-stats b { font-size: 1.35rem; }
}
