/* Shared responsive layer. Keep this after every page-specific stylesheet. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
*,*::before,*::after{box-sizing:border-box}
body,main,section,article,aside,figure,.container{min-width:0}
main :is(h1,h2,h3,p,li,dd,dt){overflow-wrap:anywhere;word-break:normal}
main :is(h1,h2,h3){max-width:100%}
main :is(a,button){overflow-wrap:anywhere}
.app-shell :is(.grid,.grid3,.grid4,.catalog,.ticket-grid,.tag-events,.ranch-grid,.collection-grid,.editorial-grid,.source-collections,.program-grid,.signal-grid,.detail,.detail-hero,.detail-editorial,.vod-detail,.news-layout,.news-hero-layout,.program-directory-grid)>*{min-width:0}
.app-shell :is(.btn,.program-official-link,.event-ticket-button){max-width:100%;white-space:normal;text-align:center;line-height:1.45;touch-action:manipulation}
.app-shell :is(button,input,select,textarea){max-width:100%;min-width:0}
.app-shell :is(button,.btn,.control,.chip,.tag-chip,.tag-nav a,.explore-more a){min-height:44px}
.app-shell :is(.section-head,.tag-section-head,.carousel-head,.related-head){flex-wrap:wrap}
.app-shell :is(.section-head,.tag-section-head,.carousel-head,.related-head)>*{min-width:0}
.app-shell :is(.section-head,.related-head) .link{white-space:normal}
.app-shell :is(.rail,.voice-videos,.lesson-recommendations,.alpha-filter,.news-table-wrap){max-width:100%;min-width:0;overscroll-behavior-x:contain;scroll-padding-inline:4px}
.app-shell :is(.rail,.voice-videos,.lesson-recommendations):focus-visible{outline:2px solid #f08ab7;outline-offset:4px}
.app-shell :is(.news-table-wrap,main nav.container){scrollbar-width:thin}
.app-shell .news-table-wrap{margin-inline:0}
.app-shell :is(.footer-in,.footer-inner){display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.app-shell .footer a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere;font-size:.875rem}
.app-shell .mobile-more-menu[hidden]{display:none!important}
.app-shell .mobile-more-menu{max-width:calc(100% - 24px);max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);overflow:auto;overscroll-behavior:contain}
.app-shell .mobile-more-menu a{min-height:48px;font-size:1rem;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.app-shell .mobile-more-menu[data-placement="header"]{max-height:calc(100vh - var(--menu-top,80px) - 100px - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - var(--menu-top,80px) - 100px - env(safe-area-inset-bottom,0px))}

/* Upcoming-event rails: explicit, non-shrinking card widths avoid collapsed
   implicit grid tracks on mobile. Keep overflow inside the rail, not the page. */
.app-shell :is(#fixtures,#rail).rail{display:flex;flex-flow:row nowrap;width:100%;max-width:100%;min-width:0;gap:14px;overflow-x:auto;align-items:stretch}
.app-shell #fixtures.rail>.fixture{flex:0 0 max(290px,32%);width:max(290px,32%)}
.app-shell #rail.rail>.event-card{flex:0 0 max(300px,31%);width:max(300px,31%)}
.app-shell :is(#fixtures,#rail).rail>article{min-width:0;max-width:100%;height:auto;overflow-wrap:anywhere;scroll-snap-align:start}
.app-shell :is(#fixtures,#rail).rail[hidden]{display:none}
@media(max-width:1000px){.app-shell #rail.rail>.event-card{flex-basis:47%;width:47%}}
@media(max-width:900px){.app-shell #fixtures.rail>.fixture{flex-basis:58%;width:58%}}
@media(max-width:620px){
  .app-shell :is(#fixtures,#rail).rail{gap:12px;margin-inline:0;padding:4px 2px 16px;scroll-snap-type:x proximity}
  .app-shell #fixtures.rail>.fixture,.app-shell #rail.rail>.event-card{flex:0 0 88%;width:88%;padding:18px}
  .app-shell :is(#fixtures,#rail).rail>article>.btn{width:100%;align-self:stretch}
}

/* The same usable header across the two catalogue stylesheet families. */
@media(max-width:1100px){
  .app-shell .header{height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);z-index:80}
  .app-shell .header-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;height:64px;width:calc(100% - 24px);margin-inline:auto}
  .app-shell .header nav{display:none}
  .app-shell .header .logo.logo-horizontal{width:min(138px,100%);justify-self:start;border-radius:3px}
  .app-shell .header-cta{display:inline-flex;grid-column:2;align-items:center;justify-content:center;justify-self:center;min-height:44px;padding:9px 12px;font-size:.875rem;line-height:1.3;white-space:nowrap}
  .app-shell .header-menu-toggle{display:grid;grid-column:3;place-items:center;justify-self:end;width:44px;height:44px;padding:10px;border:1px solid #ffffff26;border-radius:10px;background:transparent;color:#fff}
  .app-shell .header-menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .app-shell .header-menu-toggle[aria-expanded="true"]{background:#252027;border-color:#67515f}
}

@media(max-width:900px){
  .app-shell body{padding-bottom:calc(156px + env(safe-area-inset-bottom,0px))}
  .app-shell .mobile-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));min-height:72px;margin:0;padding:6px;z-index:80}
  .app-shell .mobile-nav>a,.app-shell .mobile-nav>.mobile-more{display:grid!important;min-width:0;min-height:58px;padding:4px 2px;font-size:.75rem;line-height:1.3}
  .app-shell .mobile-more-menu{bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:90}
  .app-shell .whatsapp-share{right:max(14px,env(safe-area-inset-right,0px));bottom:calc(94px + env(safe-area-inset-bottom,0px));width:48px;min-height:48px;padding:10px;justify-content:center;border-radius:50%}
  .app-shell .whatsapp-share>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .app-shell .footer{padding-bottom:20px}
  .app-shell :is(input,select,textarea){font-size:1rem;line-height:1.5}
  .app-shell .filter-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .app-shell .filter-panel label{min-width:0;font-size:.875rem;letter-spacing:.025em}
  .app-shell :is(.filter-panel input,.filter-panel select,.control,.clear){width:100%;min-height:48px}
  .app-shell .toolbar{gap:12px}
  .app-shell :is(.toolbar input,.toolbar select){min-width:0;max-width:100%}
  .app-shell :is(.detail-hero,.detail-editorial,.vod-detail,.news-hero-layout,.archive-profile-intro){grid-template-columns:minmax(0,1fr);gap:24px}
  .app-shell :is(.hero-project,.hero.hero-project){min-height:0;height:auto}
  .app-shell .hero-project .hero-copy{padding-block:52px 44px;max-width:720px}
  .app-shell .hero-project h1{line-height:1.14;letter-spacing:-.025em;overflow:visible;padding-block:.05em}
  .app-shell .voice-videos{grid-auto-columns:minmax(0,86%)}
  .app-shell .news-aside-inner{position:static}
  .app-shell :is(.voice-card-copy>a,.news-jump-nav a,.news-event-link,.lesson-controls button,.arrow,.rail-control,.alpha-letter){min-height:44px}
  .app-shell :is(.lesson-controls button,.arrow,.rail-control){min-width:44px;flex-shrink:0}
}

@media(max-width:620px){
  .app-shell .container,.app-shell .hero .container{width:calc(100% - 32px)}
  .app-shell .header-in{width:calc(100% - 24px)}
  .app-shell main :is(h1,.page-hero h1,.detail-copy h1,.news-hero h1,.news-hero-layout h1,.program-directory-intro h1,.lesson h1,.vod-page h1){font-size:clamp(1.8rem,7.5vw,2.6rem);line-height:1.18;letter-spacing:-.015em;overflow:visible;overflow-wrap:anywhere;hyphens:none}
  .app-shell .hero-project h1{font-size:clamp(2.25rem,10.5vw,3.8rem);line-height:1.14;letter-spacing:-.025em}
  .app-shell main :is(.section h2,.tag-section h2,.rank-intro h2){font-size:clamp(1.5rem,6.5vw,2rem);line-height:1.25}
  .app-shell :is(.page-hero,.program-directory-intro){padding-block:32px 24px}
  .app-shell :is(.section,.tag-section){padding-block:24px}
  .app-shell :is(.claim,.lead,.sub,.tag-bill,.news-card p,.type-card p,.ticket p,.catalog-card p,.media-body .desc,.card-bill,.ganaderia){font-size:1rem;line-height:1.6}
  .app-shell :is(.meta,.tag-meta,.crumb,.news-byline,.source,.photo-credit,.detail-item span,.related-event time,.related-event-type,.news-hero-photo figcaption,.poster-source){font-size:.875rem;line-height:1.5}
  .app-shell :is(.btn,.program-official-link,.event-ticket-button){min-height:48px;font-size:1rem;padding:13px 16px;border-radius:10px}
  .app-shell :is(.actions,.project-actions,.catchup-actions){display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .app-shell :is(.actions,.project-actions,.catchup-actions)>.btn{width:100%;align-self:stretch}
  .app-shell :is(.detail-list,.detail,.grid,.grid3,.grid4,.catalog,.ticket-grid,.tag-events,.ranch-grid,.collection-grid,.editorial-grid,.source-collections,.program-grid,.signal-grid,.news-grid,.news-guides,.program-directory-grid){grid-template-columns:minmax(0,1fr)}
  .app-shell .filter-panel{grid-template-columns:minmax(0,1fr);padding:16px}
  .app-shell .toolbar{display:flex;flex-direction:column;align-items:stretch}
  .app-shell .toolbar>*{width:100%;min-width:0;margin-left:0}
  .app-shell .toolbar .count{justify-content:flex-start}
  .app-shell :is(.rail,.voice-videos){grid-auto-columns:minmax(0,88%);gap:12px;margin-inline:0;padding:4px 2px 16px}
  .app-shell .rail{scroll-snap-type:x proximity}
  .app-shell :is(.media-card,.event-card,.catalog-card,.fixture,.ticket,.voice-card){min-width:0}
  .app-shell :is(.detail-hero,.detail-editorial){padding-block:28px;gap:22px}
  .app-shell .detail-copy{padding-inline:0}
  .app-shell .detail-main .detail-copy{padding:20px}
  .app-shell :is(.detail-list,.detail-item,.detail-facts,.vod-facts,.program-entry-facts,.program-entry-facts dd){min-width:0;overflow-wrap:anywhere}
  .app-shell :is(.vod-facts,.detail-facts,.news-key,.news-aside-inner,.program-entry){padding:20px}
  .app-shell .program-entry-facts>div{grid-template-columns:minmax(0,1fr);gap:3px;margin-bottom:18px}
  .app-shell .program-feature-footer{padding:18px;gap:10px;flex-direction:column;align-items:flex-start}
  .app-shell .program-feature-footer strong{line-height:1.5}
  .app-shell .vod-cartela{max-width:420px}
  .app-shell :is(.player,.voice-player,.archive-player){width:100%;min-width:0;aspect-ratio:16/9}
  .app-shell :is(.lesson-player,.embed){width:100%;height:auto;aspect-ratio:16/9}
  .app-shell .event-poster{padding:20px;grid-template-columns:minmax(0,1fr)}
  .app-shell .poster-actions{width:100%;align-items:stretch}
  .app-shell .poster-actions .btn{width:100%}
  .app-shell .news-key .btn,.app-shell .news-bill .btn{width:100%}
  .app-shell .news-event-link{white-space:normal;text-align:center}
  .app-shell .news-jump-nav a{font-size:.875rem;line-height:1.5}
  .app-shell .news-table-wrap{width:100%;margin-inline:0;border-radius:8px}
  .app-shell .news-table{font-size:1rem}
  .app-shell .news-table :is(th,td){padding:12px}
  .app-shell .news-article :is(ul,ol){padding-inline-start:22px}
  .app-shell #noticias-taurinas .news-card-link{min-height:44px}
  .app-shell #noticias-taurinas .section-head>.link{white-space:normal}
  .app-shell :is(.tag-nav a,.tag-chip,.explore-more a){font-size:.875rem;line-height:1.5}
  .app-shell .tag-chip{gap:10px}
  .app-shell .tag-chip span{overflow-wrap:anywhere}
  .app-shell .rank-card{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px}
  .app-shell .rank-position{grid-column:1;grid-row:1}
  .app-shell .rank-main{grid-column:2/-1;grid-row:1;min-width:0}
  .app-shell .rank-main strong{font-size:1.125rem;line-height:1.4}
  .app-shell .rank-card .rank-stat,.app-shell .rank-card .rank-stat:last-child{display:flex;grid-row:2;text-align:left}
  .app-shell .rank-stat small,.app-shell .ranch-main small,.app-shell .ranch-total small{font-size:.875rem}
  .app-shell .ranch-main strong{overflow-wrap:anywhere}
  .app-shell .ranch-official{min-width:0;width:100%;overflow-wrap:anywhere}
  .app-shell :is(.ranch-fact dd,.person-fact dd){font-size:1rem;overflow-wrap:anywhere}
  .app-shell .vod-related{width:calc(100% - 32px)}
  .app-shell main.container>.vod-related{width:100%}
  .app-shell :is(.related-event h3,.voice-previous-grid h3){font-size:1rem;line-height:1.45}
  .app-shell :is(.modal,.poster-modal){padding:16px}
  .app-shell .modal-card{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:20px}
  .app-shell .modal-close{min-width:44px;min-height:44px}
}

@media(max-width:360px){
  .app-shell :is(.vod-related-grid,.voice-previous-grid,.episode-grid,.news-jump-nav){grid-template-columns:minmax(0,1fr)}
  .app-shell .program-entry{padding:16px}
  .app-shell .header-cta{padding-inline:10px}
}

/* Landscape phones keep access to the complete menu and page content. */
@media(max-width:900px) and (max-height:500px){
  .app-shell .header{position:relative}
  .app-shell .mobile-more-menu,.app-shell .mobile-more-menu[data-placement="header"]{top:12px;bottom:auto;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px)}
}

@media print{.app-shell body{padding-bottom:0}.app-shell :is(.header-menu-toggle,.mobile-nav,.mobile-more-menu,.whatsapp-share){display:none!important}}
