/* ===== Capa de marca: portada cinematográfica, cinta, bandas superpuestas, efectos y pie ===== */

/* grano sutil para dar textura táctil a las bandas oscuras */
.band-dark::after,.site-footer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.band>*{position:relative;z-index:1}

/* bandas como láminas superpuestas (efecto horizonte) */
.home>.band+.band,#app>.band+.band{margin-top:-38px;border-radius:38px 38px 0 0;padding-top:calc(clamp(48px,7vw,96px) + 38px);box-shadow:0 -22px 40px -26px rgba(0,0,0,.55)}
.home>.band-gold+.band,.home>.band+.band-gold,#app>.band+.band-gold{margin-top:0;border-radius:0;box-shadow:none}
.home>.band-gold+.band{padding-top:clamp(48px,7vw,96px)}
.home>.band-gold+.band{border-radius:0}
.site-footer{margin-top:-38px;border-radius:38px 38px 0 0;position:relative}

/* barra de progreso de lectura en la cabecera */
.hbar{position:relative}
.hbar::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:var(--sp,0%);background:linear-gradient(90deg,var(--c-green),var(--c-accent),var(--c-live));box-shadow:0 0 12px var(--c-accent);transition:width .1s linear}

/* ===== portada principal ===== */
.band-hero{padding-block:0!important;overflow:hidden}
.band-hero .wrap{width:min(var(--wrap),100% - 2*clamp(16px,4vw,40px))}
.band-hero .blk-hero{grid-column:1/-1}
.hero{position:relative;isolation:isolate;padding-block:clamp(44px,7vw,92px) clamp(70px,9vw,120px)}
.hero-bg{position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:-80px;bottom:-40px;overflow:hidden;pointer-events:none}
.hero-sun{position:absolute;right:-8%;top:50%;width:min(95vw,1000px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(227,178,60,.2) 0 3deg,transparent 3deg 9deg);mask:radial-gradient(circle,#000 0 14%,rgba(0,0,0,.55) 38%,transparent 68%);animation:slow 140s linear infinite}
.hero-sun::after{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,rgba(255,224,138,.55),rgba(227,178,60,.18) 50%,transparent 70%);filter:blur(10px)}
.hero-rows{position:absolute;left:-10%;right:-10%;bottom:-2px;height:46%;background:
  repeating-linear-gradient(176deg,transparent 0 26px,rgba(31,162,74,.22) 26px 28px,transparent 28px 54px),
  linear-gradient(180deg,transparent,rgba(31,162,74,.16));
  mask:radial-gradient(130% 100% at 50% 100%,#000 55%,transparent 72%);transform:perspective(500px) rotateX(38deg);transform-origin:bottom}
.hero-grain{position:absolute;inset:0;background:radial-gradient(900px 480px at 15% 20%,rgba(31,162,74,.16),transparent 60%)}
.hero-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-copy{display:grid;gap:clamp(14px,2vw,22px);justify-items:start}
.hero-air.is-quiet{background:rgba(255,255,255,.1);color:var(--on-dark-2);box-shadow:none}.hero-air.is-quiet .dot{animation:none}
.hero-h{font-size:clamp(3rem,9.2vw,8rem);line-height:.88;letter-spacing:-.005em;text-shadow:0 10px 50px rgba(0,0,0,.45)}
.hero-h1{display:block;color:#fff}
.hero-h em{display:inline-block;font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 22px rgba(227,178,60,.35));position:relative}
.hero-h em::after{content:"";position:absolute;left:2%;right:0;bottom:-.07em;height:.07em;border-radius:6px;background:linear-gradient(90deg,var(--c-green),var(--c-accent));transform-origin:left;animation:underline 1.4s .4s var(--ease) both}
@keyframes underline{from{transform:scaleX(0)}}
.hero-sub{margin:0;max-width:46ch;font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--on-dark-2)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-cta .btn-gold{min-width:230px}
.hero-cta .btn-gold.is-on{background:linear-gradient(180deg,#5fdc8a,var(--c-green) 55%,#0d6a2b);color:#04240f;box-shadow:0 12px 30px -8px var(--c-green)}
.hero-cta .ic-pause{display:none}.hero-cta .is-on .ic-play{display:none}.hero-cta .is-on .ic-pause{display:block}
.hero-now{display:flex;gap:14px;align-items:center;padding:14px 20px 14px 14px;border-radius:20px;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line-d);max-width:100%;animation:pagein .6s var(--ease) both}
.hn-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--gold-grad);color:#2a1b00}
.hero-now small{display:block;font:700 .7rem var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi)}.hero-now strong{display:block;font:800 italic 1.35rem/1.1 var(--f-display);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-now span{color:var(--on-dark-3);font-size:.92rem}
.hero-now>div{min-width:0}
.hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:520px;justify-self:center;width:100%}
.hero-logo{position:relative;width:78%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(227,178,60,.25));animation:float 6s ease-in-out infinite}
.orbit{position:absolute;border-radius:50%;border:1.5px solid rgba(227,178,60,.35)}
.orbit.o1{inset:4%}.orbit.o2{inset:-4%;border-style:dashed;border-color:rgba(255,255,255,.18);animation:slow 60s linear infinite}.orbit.o3{inset:12%;border-color:rgba(31,162,74,.4);animation:ring 5s ease-out infinite}
.hero-freq{position:absolute;right:2%;bottom:6%;display:grid;justify-items:center;padding:10px 20px;border-radius:18px;background:linear-gradient(160deg,#fff,#efe6c9);color:var(--c-ink);font:800 italic 2.3rem/1 var(--f-display);box-shadow:0 20px 40px -14px #000,inset 0 0 0 3px var(--c-accent);transform:rotate(-4deg)}.hero-freq small{font:700 .75rem var(--f-display);letter-spacing:.3em;color:var(--c-primary)}
.hero-scroll{position:absolute;left:50%;bottom:26px;width:26px;height:42px;border-radius:16px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transform:translateX(-50%)}
.hero-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--c-accent);animation:scrolly 1.8s ease-in-out infinite}
@keyframes scrolly{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(max-width:900px){.hero-in{grid-template-columns:1fr}.hero-art{max-width:300px;order:-1;margin-bottom:-10px}.hero-scroll{display:none}.hero-h{font-size:clamp(2.8rem,15vw,5rem)}.hero-cta .btn{flex:1 1 100%}}

/* ===== cinta en movimiento ===== */
.band-gold{padding:0!important;background:var(--gold-grad);color:#2a1b00;overflow:hidden;box-shadow:0 -1px 0 rgba(255,255,255,.5) inset,0 -6px 20px -8px #000}
.band-gold::before,.band-gold::after{display:none}
.band-gold .wrap{width:100%;max-width:none;margin:0}.band-gold .grid12{display:block}.band-gold .blk{display:block}
.ticker{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-track{display:inline-flex;gap:0;padding:13px 0;animation:tk 60s linear infinite;will-change:transform}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
.tk-i{display:inline-flex;align-items:center;gap:14px;padding-inline:26px}.tk-i b{font:800 italic 1.18rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}.tk-i .i{width:20px;height:20px;color:#1d6b35}
@media(prefers-reduced-motion:reduce){.tk-track{animation:none;overflow:auto}}

/* ===== efecto de foco que sigue el cursor en tarjetas ===== */
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(227,178,60,.2),transparent 45%)}
.spot:hover::before{opacity:1}
@media(hover:none){.spot::before{display:none}}

/* ===== títulos de sección con detalle de marca ===== */
.sec-head h2::before{content:"";position:absolute;left:-2px;top:-14px;width:34px;height:34px;opacity:.0}
.kicker{padding:5px 12px 5px 0}
.sec-head .kicker::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 4px rgba(31,162,74,.25)}

/* ===== pie de página de marca ===== */
.foot-mark{position:relative;z-index:1;margin:0 auto clamp(26px,4vw,48px);width:min(var(--wrap),100% - 2*clamp(16px,4vw,40px));text-align:center;font:800 italic clamp(3.2rem,15vw,13rem)/.82 var(--f-display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(227,178,60,.42);background:linear-gradient(180deg,rgba(227,178,60,.18),transparent 75%);-webkit-background-clip:text;background-clip:text;user-select:none;white-space:nowrap;overflow:hidden}
.foot-mark span{-webkit-text-stroke:2px rgba(31,162,74,.55)}
.foot-credit{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0;padding:18px 20px calc(24px + var(--dock-h));background:rgba(0,0,0,.35);text-align:center;font-size:.95rem;color:var(--on-dark-2)}
.foot-credit a,.foot-credit .fc-n{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;text-decoration:none;font:800 italic 1.05rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(227,178,60,.5);transition:.3s var(--ease)}
.foot-credit a:hover{background:var(--gold-grad);color:#2a1b00;transform:translateY(-2px)}
.foot-credit .i{width:1.1em;height:1.1em}
.site-footer{padding-bottom:0}
.foot-base{margin-top:clamp(28px,4vw,48px)}

/* ===== retoques de piezas existentes ===== */
.ncard,.pcard,.vcard-btn,.rcard,.acard,.hcard,.spots article,.mv article,.panel-card{--mx:50%;--my:50%}
.phero{border-radius:0 0 38px 38px;margin-bottom:0}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:repeating-linear-gradient(176deg,transparent 0 20px,rgba(31,162,74,.16) 20px 22px,transparent 22px 42px);mask:linear-gradient(0deg,#000,transparent)}
.band-dark .sec-head h2{text-shadow:0 6px 30px rgba(0,0,0,.4)}
.live-card{animation:glowpulse 5s ease-in-out infinite}
@keyframes glowpulse{50%{box-shadow:0 40px 80px -36px #000,0 0 110px -22px color-mix(in srgb,var(--c-accent) 70%,transparent)}}