/* V15 header: an always-visible demo link and a discreet chapter navigation (nav-v15.js).
   Plain text only: no pills, no labels, no numbers. The chapter list stays hidden until
   the header is hovered (or focused / tapped), so it never sits over the video signage. */

.site-header{--nav-accent:#c7ff4a}
.site-header>a:first-child{flex:none}
.site-header>span{transition:opacity .25s ease}
.header-actions{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);flex:none}

/* Demo link: sentence case text, lime arrow, lime underline on hover. */
.header-cta{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;color:#fff;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-shadow:0 1px 10px #0008}
.header-cta span{color:var(--nav-accent);transition:transform .25s ease}
.header-cta:hover,.header-cta:focus-visible{text-decoration:underline;text-decoration-color:var(--nav-accent);text-decoration-thickness:1.5px;text-underline-offset:6px}
.header-cta:hover span{transform:translateX(3px)}

/* "Capítulos" text button: phones and touch screens (hover devices reveal the list on hover). */
.site-header .chapter-toggle{display:none;align-items:center;min-height:44px;padding:0;color:#fff;background:none;border:0;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-shadow:0 1px 10px #0008;cursor:pointer}
.site-header .chapter-toggle[aria-expanded="true"]{text-decoration:underline;text-decoration-color:var(--nav-accent);text-decoration-thickness:1.5px;text-underline-offset:6px}
@media(hover:none){.site-header .chapter-toggle{display:inline-flex}}

.chapter-nav ul{list-style:none;margin:0;padding:0}
.chapter-nav a{color:#ffffffa6;text-decoration:none;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:color .2s ease}
.chapter-nav a:hover,.chapter-nav a:focus-visible{color:#fff}
.chapter-nav a[aria-current="true"]{color:#fff;text-decoration:underline;text-decoration-color:var(--nav-accent);text-decoration-thickness:1.5px;text-underline-offset:7px}
.chapter-nav a:focus-visible{outline:2px solid var(--nav-accent);outline-offset:5px}

/* Desktop and tablet: one light row. Centred in the header (in place of the small
   "BOX OFFICE" label) where it fits, under the header row on narrower screens. */
@media(min-width:701px){
  .site-header>span{position:absolute;left:50%;transform:translateX(-50%)}
  .chapter-nav{position:absolute;left:50%;top:0;height:100%;display:flex;align-items:center;transform:translate(-50%,-4px);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
  .chapter-nav ul{display:flex;align-items:center;gap:clamp(18px,1.9vw,30px)}
  .chapter-nav a{display:inline-block;padding:10px 0;font-size:15px;text-shadow:0 1px 10px #000a}
  .site-header.is-open .chapter-nav,.chapter-nav:focus-within{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .site-header.is-open>span,.site-header:has(.chapter-nav:focus-within)>span{opacity:0}
}
@media(min-width:701px) and (hover:hover){
  /* A short delay so a cursor passing on its way to the language switch does not flash it. */
  .site-header:hover .chapter-nav{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition-delay:.08s}
  .site-header:hover>span{opacity:0}
}
@media(min-width:701px) and (max-width:1199px){
  .chapter-nav{top:calc(100% - 14px);height:auto;padding:0 28px 18px;background:radial-gradient(ellipse at 50% 40%,#0b0c0ecc 0%,#0b0c0e80 45%,#0b0c0e00 72%)}
  .chapter-nav ul{gap:clamp(14px,2vw,24px)}
  .chapter-nav a{font-size:14px}
  .site-header.is-open>span,.site-header:has(.chapter-nav:focus-within)>span{opacity:1}
}
@media(min-width:701px) and (max-width:1199px) and (hover:hover){.site-header:hover>span{opacity:1}}

/* Phones: a full-width sheet under the header row, opened by "Capítulos". */
@media(max-width:700px){
  .site-header{padding:0 16px;gap:10px}
  .site-header img{width:86px}
  .site-header>span{display:none}
  .header-actions{gap:14px}
  /* Secondary to the demo link: lighter, so the two read as two items. */
  .site-header .chapter-toggle{font-weight:500;color:#ffffffbf}
  .site-header .chapter-toggle[aria-expanded="true"]{color:#fff}
  .header-cta span{display:none}
  .site-header .chapter-toggle{display:inline-flex}
  .site-header #langToggle{padding:12px 4px;min-width:36px}
  .chapter-nav{position:fixed;z-index:-1;inset:0;padding:calc(64px + 14px) 22px 28px;background:#0b0c0ef2;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;overflow-y:auto}
  .site-header.is-open .chapter-nav{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
  .chapter-nav ul{display:flex;flex-direction:column;border-top:1px solid #ffffff1f}
  .chapter-nav li{border-bottom:1px solid #ffffff1f}
  .chapter-nav a{display:block;padding:15px 0;font-size:26px;font-weight:600;letter-spacing:-.04em;color:#ffffffb3}
  .chapter-nav a[aria-current="true"]{text-underline-offset:8px;text-decoration-thickness:2px}
}
@media(max-width:360px){
  .site-header{padding:0 12px}
  .site-header img{width:80px}
  .header-actions{gap:10px}
  .site-header #langToggle{min-width:30px}
}

/* A chapter jump is a short cut to black, not a fast-forward through every frame. */
.chapter-veil{position:fixed;inset:0;z-index:95;background:#0b0c0e;opacity:0;pointer-events:none;transition:opacity .18s ease}
.chapter-veil.is-on{opacity:1}
main>section:focus{outline:none}

@media(prefers-reduced-motion:reduce){
  .chapter-nav,.chapter-nav a,.header-cta span,.site-header>span,.chapter-veil{transition:none!important}
  .chapter-nav{transform:translate(-50%,0)!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.chapter-nav{transform:none!important}}