/* 0299. Studio: larger logo, no news/schedule buttons. Other modes unchanged.
   iOS SepsiTheme: plum .56/.13/.46, magenta .84/.18/.55, orange 1/.45/.18.
   No player selectors or new playback/analytics/session code. */
.studio-brand-298,.brand-heading-studio-298{display:none}

/* Both new headers have explicit tracks. Navigation wraps INSIDE its track;
   it must never paint over the logo when labels or font sizes grow. */
html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header{
    box-sizing:border-box;
    grid-template-columns:240px minmax(0,1fr) minmax(40px,max-content)!important;
    column-gap:18px!important;
    row-gap:10px!important;
}
html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .brand{
    min-width:0!important;
    max-width:100%;
    box-sizing:border-box;
}
html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .main-nav{
    min-width:0!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow:visible!important;
}
html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .site-search-panel{
    min-width:0!important;
}

/* EMBLÉMA: a dedicated, breathable masthead; original two-layer logo. */
html body.front[data-brand-emphasis="emblema"] .site-header{
    padding:14px 20px!important;
    border-radius:26px;
}
html body.front[data-brand-emphasis="emblema"] .site-header .brand{
    position:relative;
    isolation:isolate;
    justify-content:center;
    flex-wrap:nowrap!important;
    overflow:visible;
    gap:0!important;
    padding:4px 8px;
}
html body.front[data-brand-emphasis="emblema"] .site-header .brand-copy{display:none!important}
html body.front[data-brand-emphasis="emblema"] .site-header .brand:before{
    content:"";
    position:absolute;
    inset:-6px -8px;
    z-index:-1;
    border-radius:50%;
    background:repeating-radial-gradient(ellipse at center,transparent 0 25px,rgba(160,54,163,.09) 26px 27px,transparent 28px 44px);
    opacity:.8;
    pointer-events:none;
    mask-image:linear-gradient(90deg,#000,transparent 34% 66%,#000);
}
html body.front[data-brand-emphasis="emblema"] .site-header .brand-logo-animated{
    width:224px!important;
    max-width:100%;
    filter:drop-shadow(0 8px 14px rgba(91,35,120,.12));
}
html body.front[data-brand-emphasis="emblema"] .site-header .brand-globe-spin{
    animation:sepsiIdentitySpin298 18s linear infinite!important;
}

/* STÚDIÓ: the card IS the composition, not a logo card stacked above it. */
html body.front[data-brand-emphasis="studio-app"] .site-header .brand-logo-animated{width:104px!important}
html body.front[data-brand-emphasis="studio-app"] .site-header .brand{gap:10px!important;flex-wrap:nowrap!important}
html body.front[data-brand-emphasis="studio-app"] .site-header .brand-copy{min-width:0;white-space:normal}
html body.front[data-brand-emphasis="studio-app"] .site-header .brand-copy strong{font-size:16px!important;overflow-wrap:anywhere}
html body.front[data-brand-emphasis="studio-app"] .site-header .brand-copy em{font-size:11px!important;overflow-wrap:anywhere}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero{
    align-items:stretch!important;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy{
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    min-width:0!important;
    padding:24px!important;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.28);
    background:linear-gradient(135deg,#8f2175 0%,#d62e8c 56%,#ff732e 100%)!important;
    box-shadow:0 16px 42px rgba(143,33,117,.21),inset 0 1px 0 rgba(255,255,255,.25);
    color:#fff!important;
    overflow:hidden;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(59,8,61,.64),rgba(59,8,61,.16) 65%,transparent);
    pointer-events:none;
    z-index:-1;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy:after{
    content:"";
    position:absolute;
    width:560px;
    height:560px;
    top:-340px;
    right:-240px;
    bottom:auto;
    border-radius:50%;
    background:repeating-radial-gradient(circle,transparent 0 32px,rgba(255,255,255,.18) 33px 34px,transparent 35px 57px);
    opacity:.7;
    pointer-events:none;
    z-index:-1;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-brand-298{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 16px;
    min-width:0;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-logo-298{
    display:block;
    position:relative;
    flex:0 1 320px;
    width:320px;
    min-width:0;
    aspect-ratio:872/446;
    perspective:900px;
    isolation:isolate;
}
/* Quiet light halo keeps the original coloured lettering readable on plum. */
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-logo-298:before{
    content:"";
    position:absolute;
    inset:-9% -12%;
    background:radial-gradient(ellipse,rgba(255,255,255,.92) 8%,rgba(255,248,253,.62) 38%,transparent 70%);
    z-index:-1;
    pointer-events:none;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-logo-298 img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-globe-298{
    transform-origin:center;
    animation:sepsiIdentitySpin298 18s linear infinite;
    backface-visibility:visible;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-wordmark-298{z-index:1}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-frequency-298{
    flex:0 0 auto;
    text-align:right;
    font-size:27px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.04em;
    color:#fff;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .studio-frequency-298 small{
    display:block;
    margin-top:7px;
    font-size:9px;
    letter-spacing:.12em;
    line-height:1.3;
    font-weight:800;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy .eyebrow{
    color:#fff!important;
    font-size:10px;
    letter-spacing:.12em;
    margin:0 0 9px;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy h1{
    color:#fff!important;
    font-size:clamp(28px,2.5vw,36px)!important;
    line-height:1.08!important;
    margin:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere;
    letter-spacing:-.035em!important;
    text-shadow:none;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .brand-heading-original-298{display:none}
html body.front.is-home[data-brand-emphasis="studio-app"] .brand-heading-studio-298{display:inline}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy .lead{
    color:#fff!important;
    font-size:14px!important;
    line-height:1.5!important;
    margin:12px 0 0!important;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy .hero-actions{
    display:none!important;
    margin:18px 0 0!important;
    gap:10px;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-actions a{
    min-height:44px;
    padding:9px 14px;
    box-sizing:border-box;
    font-size:13px;
    text-align:center;
    position:relative;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-actions .primary-action{
    color:#712056!important;
    background:#fff!important;
    border:1px solid #fff;
    box-shadow:0 6px 18px rgba(75,10,61,.12);
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-actions .secondary-action{
    color:#fff!important;
    background:rgba(56,10,65,.24)!important;
    border:1px solid rgba(255,255,255,.65);
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-app-download-card{
    margin:18px 0 0!important;
    padding:12px 0 0!important;
    width:100%;
    max-width:none;
    border:0;
    border-top:1px solid rgba(255,255,255,.24);
    border-radius:0;
    background:transparent!important;
    box-shadow:none!important;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-app-download-card .app-download-title{
    color:#fff!important;
    font-size:10px;
    letter-spacing:.12em;
    margin-bottom:6px;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-app-download-card .app-download-links{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px;
    justify-content:flex-start;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .broadcast-info-card{
    align-self:stretch!important;
    justify-content:center;
}
html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy a:focus-visible{
    outline:3px solid #fff;
    outline-offset:4px;
}

@media(max-width:1180px){
    html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header{
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-rows:auto auto auto!important;
        gap:10px 14px!important;
    }
    html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .brand{grid-column:1!important;grid-row:1!important;justify-self:start}
    html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .listener-account-trigger{position:static!important;grid-column:2!important;grid-row:1!important;align-self:center!important}
    html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .main-nav{
        grid-column:1/-1!important;
        grid-row:2!important;
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        width:100%!important;
        margin:0!important;
        padding:4px 0 8px!important;
        scrollbar-width:thin!important;
    }
    html body.front:is([data-brand-emphasis="emblema"],[data-brand-emphasis="studio-app"]) .site-header .site-search-panel{grid-column:1/-1!important;grid-row:3!important}
    html body.front[data-brand-emphasis="emblema"] .site-header .brand-logo-animated{width:192px!important}
}
@media(max-width:820px){
    html body.front[data-brand-emphasis="emblema"] .site-header{padding:12px 14px!important}
    html body.front[data-brand-emphasis="emblema"] .site-header .brand-logo-animated{width:170px!important}
    html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy{padding:22px!important}
    html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy h1{font-size:32px!important}
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-logo-298{width:300px;flex-basis:300px}
}
@media(max-width:520px){
    html body.front[data-brand-emphasis="emblema"] .site-header .brand-logo-animated{width:154px!important}
    html body.front[data-brand-emphasis="studio-app"] .site-header .brand-logo-animated{width:86px!important}
    html body.front[data-brand-emphasis="studio-app"] .site-header .brand-copy strong{font-size:14px!important}
    html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy{padding:20px!important}
    /* On narrow cards the frequency moves below instead of squeezing the logo.
       Auto height preserves the full globe; no cropping or absolute positioning. */
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-brand-298{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px}
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-logo-298{width:min(280px,100%);max-width:100%;flex-basis:auto}
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-frequency-298{display:flex;align-items:baseline;gap:7px;font-size:16px;text-align:center}
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-frequency-298 small{margin-top:0}
    html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy h1{font-size:30px!important}
}
@media(max-width:360px){
    html body.front[data-brand-emphasis="studio-app"] .site-header .brand{gap:8px!important}
    html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy{padding:16px!important}
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-logo-298{width:min(260px,100%)}
    html body.front.is-home[data-brand-emphasis="studio-app"] .hero-copy h1{font-size:28px!important}
}
@keyframes sepsiIdentitySpin298{to{transform:rotateY(360deg)}}
/* Respect accessibility preferences without rotating the static wordmark. */
@media(prefers-reduced-motion:reduce){
    html body.front[data-brand-emphasis="emblema"] .site-header .brand-globe-spin,
    html body.front.is-home[data-brand-emphasis="studio-app"] .studio-globe-298{animation:none!important;transform:none!important}
}