*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at left,#7b0010,transparent 43%),radial-gradient(ellipse at right,#4a0008,transparent 45%),#100004;color:white;font:16px Arial,Helvetica,sans-serif}.site{max-width:1300px;margin:auto;background:#130104;min-height:100vh;box-shadow:0 0 65px #000a}.header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;background:#0b0304;min-height:105px}.brand img{width:220px;max-width:100%;display:block}.nav{display:flex;gap:8px;align-items:center}.nav a{font-size:13px;color:white;text-decoration:none;font-weight:800;padding:15px 12px;border-radius:8px;white-space:nowrap}.nav a:hover,.nav a.active{background:linear-gradient(#ff0013,#ba000a)}.social{display:flex;gap:8px}.social a{background:#ed0015;color:white;text-decoration:none;border-radius:50%;display:grid;place-items:center;width:35px;height:35px;font-weight:900}.social a:first-child{background:#1478f2}.social a:nth-child(2){background:linear-gradient(30deg,#ffb000,#e3005a,#8034cc)}.social a:nth-child(3){background:#121b20}.social a:nth-child(5){background:#03bf5c}.menu-toggle{display:none}.hero{min-height:525px;padding:45px 36px 24px;background:linear-gradient(90deg,#180000 0%,#280000ed 31%,#2a000066 58%,#0b000066 100%),url('assets/hero.jpg') right center/auto 100% no-repeat;display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative}.hero-content{max-width:620px}.hero-logo{width:min(510px,100%);filter:drop-shadow(0 4px 10px #000)}.tagline{font-size:clamp(25px,3.4vw,43px);font-family:Georgia,serif;font-style:italic;font-weight:bold;line-height:1.13;text-shadow:0 3px 5px #000;transform:rotate(-3deg);margin:22px 0 0 26px}.tagline span{color:#ffe600}.player{display:flex;align-items:center;gap:20px;background:#110005ed;border:1px solid #fa0015;border-radius:15px;box-shadow:0 0 22px #c0000b88;padding:16px 24px;width:100%;max-width:1050px;margin:0 auto}.play{background:#ff0014;border:0;border-radius:50%;width:66px;height:66px;flex:none;color:white;font-size:27px;cursor:pointer;box-shadow:0 0 14px #ff0015}.player-info{display:flex;flex-direction:column;min-width:185px;gap:5px}.player-info strong{font-size:23px}.player-info small{font-size:14px}.status{font-size:11px;color:#ffa6a6}.bars{height:58px;display:flex;gap:3px;align-items:center;justify-content:center;flex:1;overflow:hidden}.bars i{height:8px;width:5px;flex:1;max-width:9px;background:#ff1a2e;border-radius:2px;transform:scaleY(.18);animation:equalize var(--dur) ease-in-out var(--delay) infinite alternate paused}.bars.playing i{animation-play-state:running}@keyframes equalize{from{transform:scaleY(.14)}to{transform:scaleY(1)}}.volume{display:flex;align-items:center;gap:9px}.volume input{accent-color:red;width:110px}.platforms{padding:22px 26px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;background:linear-gradient(#160102,#250000)}.platform{border:1px solid #f12;background:linear-gradient(#170205,#090204);min-height:87px;border-radius:12px;display:flex;align-items:center;gap:12px;padding:12px;color:#fff;text-decoration:none;transition:transform .15s}.platform:hover{transform:translateY(-3px)}.platform.cyan{border-color:#00c6dd}.platform.blue{border-color:#009cff}.platform.green{border-color:#86d400}.platform-icon{font-size:30px;flex:none;width:43px;height:43px;display:grid;place-items:center;background:#e50018;border-radius:9px;font-weight:900}.cyan .platform-icon{background:#00c9d5;color:#00111a}.blue .platform-icon{background:#0075d5}.green .platform-icon{background:#78c800;color:#001400}.platform b{font-size:16px;display:block}.platform small{display:block;font-size:10px;margin-top:5px}.arrow{margin-left:auto;font-size:25px}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:12px 26px 28px;background:linear-gradient(#250000,#540005)}.quick a{background:#120103;border:1px solid #c1000c;border-radius:12px;color:white;text-decoration:none;min-height:85px;padding:18px;display:grid;grid-template-columns:44px 1fr;align-content:center;column-gap:12px}.quick a span{grid-row:span 2;font-size:34px}.quick a b{font-size:14px}.quick a small{font-size:11px;margin-top:5px}.info{padding:30px 35px;border-top:1px solid #68000a}.info h2{color:#ff3341;margin:0 0 12px}.info p{line-height:1.6}footer{background:#090205;border-top:2px solid #ed0010;padding:20px 28px;display:flex;align-items:center;gap:25px;flex-wrap:wrap}footer img{width:130px}footer p{font-size:13px;flex:1}footer button,.install-banner button{background:#f40015;border:0;color:white;padding:12px 18px;border-radius:8px;font-weight:bold;cursor:pointer}.install-banner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(92vw,480px);z-index:20;background:#180105;border:1px solid red;border-radius:12px;padding:13px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 30px #000}.install-banner[hidden],button[hidden]{display:none!important}.install-banner div{flex:1}.install-banner small{display:block;margin-top:5px}.install-banner #dismiss{background:transparent;padding:5px;font-size:23px}@media(max-width:1100px){.header{flex-wrap:wrap}.social{margin-left:auto}.nav{order:3;width:100%;justify-content:center}.platforms{grid-template-columns:repeat(5,minmax(0,1fr))}.platform{padding:8px;gap:6px}.platform-icon{width:34px;height:36px;font-size:24px}.platform b{font-size:13px}.arrow{display:none}}@media(max-width:760px){.header{min-height:75px;padding:10px 14px}.brand img{width:185px}.menu-toggle{display:block;background:transparent;color:white;font-size:27px;border:0;cursor:pointer;margin-left:auto}.nav{display:none;order:4;flex-direction:column;align-items:stretch;width:100%}.nav.open{display:flex}.nav a{text-align:center}.social{order:3;width:100%;justify-content:center;margin:0}.hero{min-height:470px;padding:25px 12px 15px;background:linear-gradient(90deg,#230000aa,#19000055),url('assets/hero.jpg') center/cover no-repeat}.hero-content{text-align:center}.hero-logo{width:min(310px,90%)}.tagline{font-size:25px;margin:15px 0}.player{gap:12px;padding:12px}.play{width:50px;height:50px;font-size:23px}.player-info{min-width:0;flex:1}.player-info strong{font-size:15px}.player-info small{font-size:11px}.status{font-size:10px}.bars{height:35px;max-width:80px}.bars i:nth-child(n+13){display:none}.volume{position:absolute;right:23px;bottom:18px;transform:translateY(45px);display:none}.platforms{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 12px;gap:10px}.platform{min-height:70px;padding:8px;gap:8px}.platform-icon{width:39px;height:39px}.platform b{font-size:13px}.platform small{font-size:9px}.platform:last-child{grid-column:1/-1}.quick{padding:10px 12px 22px;gap:7px}.quick a{padding:12px 6px;grid-template-columns:1fr;text-align:center;justify-items:center;gap:4px}.quick a span{grid-row:auto;font-size:25px}.quick a b{font-size:10px}.quick a small{font-size:9px}.info{padding:25px 16px}footer{justify-content:center;text-align:center}footer p{flex:0 0 100%}}@media(max-width:390px){.brand img{width:150px}.player{gap:7px}.bars{max-width:60px}.platform b{font-size:12px}}
/* Ajuste de proporciones para pantallas reales; conserva el diseño aprobado */
html,body{width:100%;overflow-x:hidden}
.site{width:100%;max-width:1300px;overflow:hidden}
.header{min-height:78px;padding:9px clamp(14px,2vw,28px);gap:12px}
.brand{display:flex;align-items:center;flex:0 1 205px;min-width:0}
.brand img{width:195px;height:auto;max-height:68px;object-fit:contain}
.nav{gap:4px;flex:0 0 auto}
.nav a{padding:12px 15px;font-size:13px}
.social{gap:7px;flex-shrink:0}
.social a{width:33px;height:33px}
.hero{min-height:410px;padding:28px 30px 24px;gap:16px;background:linear-gradient(90deg,#180000 0%,#220000e8 31%,#21000033 62%,#0b000044 100%),url('assets/hero.jpg') right center/auto 100% no-repeat}
.hero-content{max-width:520px}
.hero-logo{width:min(380px,100%);height:auto;max-height:170px;object-fit:contain;object-position:left center}
.tagline{font-size:clamp(26px,3vw,38px);margin:8px 0 0 12px}
.player{max-width:1020px;min-height:83px;padding:11px 18px;gap:15px}
.play{width:58px;height:58px;font-size:24px}
.player-info{min-width:165px}
.player-info strong{font-size:19px}
.bars{height:44px}
.platforms{padding:17px 24px;gap:11px}
.platform{min-height:72px}
.quick{padding:9px 24px 22px;gap:12px}
.quick a{min-height:74px}
@media (min-width:761px) and (max-width:1100px){
 .header{flex-wrap:nowrap}
 .brand{flex:0 0 165px}.brand img{width:165px}
 .nav{order:0;width:auto;flex:1;justify-content:center}
 .nav a{font-size:12px;padding:10px}
 .social{order:0;margin:0}.social a{width:29px;height:29px}
 .hero{min-height:395px;background-size:auto 100%}
 .platforms{grid-template-columns:repeat(5,minmax(0,1fr))}
 .platform b{font-size:12px}
}
@media(max-width:760px){
 .header{min-height:72px;padding:10px 12px;flex-wrap:wrap}
 .brand{flex:0 1 180px}.brand img{width:175px;max-height:55px}
 .menu-toggle{order:2;margin-left:auto}
 .nav{order:4;width:100%;flex:0 0 100%}
 .social{order:3;width:100%;margin:0;justify-content:center}
 .hero{min-height:440px;padding:22px 12px 16px;gap:24px;background:linear-gradient(180deg,#16000022,#16000088),url('assets/hero.jpg') center center/cover no-repeat}
 .hero-content{max-width:100%;text-align:center}
 .hero-logo{width:min(300px,85%);max-height:130px;object-position:center}
 .tagline{font-size:clamp(23px,5.5vw,31px);margin:12px auto 0}
 .player{max-width:100%;min-height:80px;gap:9px;padding:10px 12px;flex-wrap:nowrap}
 .play{width:48px;height:48px;font-size:21px}
 .player-info{min-width:0;flex:1 1 auto}
 .player-info strong{font-size:15px}
 .bars{flex:0 1 75px;max-width:75px;height:36px}
 .volume{display:none}
 .platforms{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 12px;gap:9px}
 .platform{min-width:0;min-height:67px;padding:8px}
 .platform:last-child{grid-column:1/-1}
 .quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px 12px 18px}
 .quick a{min-width:0;min-height:72px}
}
@media(max-width:390px){
 .brand img{width:150px}
 .hero{min-height:410px}
 .hero-logo{width:min(260px,85%)}
 .player{gap:7px}
 .bars{max-width:46px}
 .platform-icon{width:33px;height:35px;font-size:22px}
 .platform b{font-size:12px}
}

/* Iconos sociales proporcionados por el cliente */
.header .social a{background:transparent!important;border-radius:50%;width:39px;height:39px;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;flex:0 0 39px}
.header .social a img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.header .social a[data-link="tiktok"]{background:#121b20!important;color:white}
@media(max-width:760px){.header .social a{width:36px;height:36px;flex-basis:36px}}
@media(max-width:390px){.header .social a{width:33px;height:33px;flex-basis:33px}}

.header .social a[data-link="tiktok"]{background:transparent!important}

/* Iconos oficiales enviados por el cliente y distintivos de las tiendas */
.social img{object-fit:contain;display:block;border-radius:50%}
.store-badges{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px 22px;background:#160002}
.store-badges a{display:block;max-width:180px;cursor:pointer}
.store-badges img{display:block;width:100%;height:auto;max-height:55px;object-fit:contain}
.store-badges a[aria-disabled="true"]{cursor:not-allowed;opacity:.75}
@media(max-width:600px){.store-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.store-badges a{width:100%;max-width:180px;justify-self:center}.store-badges img{width:100%;height:auto}}

/* Google Play dentro de la tarjeta Android; sin App Store */
.platform .android-store-badge{width:94px;height:auto;max-height:40px;object-fit:contain;flex-shrink:0;border-radius:3px}
@media(max-width:600px){.platform .android-store-badge{width:65px;max-height:31px}}

/* Instalacion PWA: boton siempre visible y ayuda cuando no hay aviso nativo */
#install{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,#f00,#a60000);color:#fff;border:1px solid #ff4b4b;border-radius:9px;padding:12px 18px;font-weight:800;cursor:pointer;box-shadow:0 0 12px #e000004d}
#install[disabled]{opacity:.75;cursor:default}
.install-help[hidden]{display:none!important}
.install-help{position:fixed;inset:0;z-index:99999;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px}
.install-help-card{position:relative;max-width:430px;width:100%;padding:25px;background:#1a0307;color:white;border:1px solid #f33;border-radius:14px;box-shadow:0 12px 50px #000a}
.install-help-card h2{font-size:22px;margin:0 20px 12px 0;color:#fff}
.install-help-card p{font-size:15px;line-height:1.6}
.install-help-card button{background:#e00;color:#fff;border:0;border-radius:7px;padding:9px 16px;cursor:pointer}
.install-help-card .install-help-close{position:absolute;right:8px;top:8px;background:transparent;font-size:27px;padding:0 10px}