/* Winter Clásico — shared styles (V25)
   Mobile-first: base rules target phones, min-width queries add up from there.
   Breakpoints: 36rem (576px), 45rem (720px). Only these two, on every page. */

/* Opt out of algorithmic dark mode. Chrome's Auto Dark Theme on Android inverts
   any page that does not declare a scheme, which turned the whole site black.
   Declaring 'light' tells the browser the design is already handled. */
:root{color-scheme:light}

/* Mobile reads at an 18px root so every rem-based size scales together and the
   designed proportions are preserved. Desktop returns to 16px. Media-query
   breakpoints are unaffected - they resolve against the initial root, not this. */
:root{font-size:18px}
@media(min-width:45rem){:root{font-size:16px}}
/* iOS Safari paints the overscroll/rubber-band area from the HTML element,
   not BODY. Without this it falls back to the system canvas, which is black
   when the phone is in Dark Appearance. */
html{background:var(--white)}
/* Explicit surfaces. If a host app, extension or accessibility mode overrides
   the page canvas, the site must not end up dark text on a dark background.
   Each major surface declares its own color rather than inheriting. */
body,nav,main,section,footer,.wrap{background-color:inherit}
body{background-color:var(--white)}
footer{background-color:var(--white)}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Montserrat',system-ui,sans-serif;background:var(--white);color:var(--ink);
     line-height:1.55;-webkit-font-smoothing:antialiased}

.wrap{max-width:1080px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------------------------------------------------------------- header */


/* The logo file carries ~17% empty canvas left and ~22% right. The negative
   margins crop only that dead space visually - the artwork is never clipped. */


@media(min-width:36rem){
  }

/* ---------------------------------------------------------------- nav */
.navbar{display:flex;align-items:center;gap:.75rem;background:var(--white);height:78px;
        border-bottom:1px solid var(--line);padding:0 var(--pad)}
.navlogo{flex:none;display:block;line-height:0}
.navlogo img{height:76px;width:auto;display:block}

/* MOBILE: native <details> overlay. No JavaScript.
   The desktop row is a SEPARATE element (.deskstrip) rather than this same list
   restyled - Chrome hides <details> content with content-visibility on a
   ::details-content pseudo, which a display override on the child cannot undo.
   Fighting that is what left desktop with no nav at all in V29. */
.navmenu{flex:0 0 auto;min-width:0;margin-left:auto}
.deskstrip{display:none}

.navmenu > summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
                   list-style:none;padding:.95rem .1rem;
                   font-size:.7rem;font-weight:700;letter-spacing:.09em;
                   text-transform:uppercase;color:var(--ink)}
.navmenu > summary::-webkit-details-marker{display:none}
.bars{width:18px;height:2px;background:var(--teal-deep);border-radius:2px;flex:none;
      box-shadow:0 -6px 0 var(--teal-deep),0 6px 0 var(--teal-deep)}

/* When open the summary IS the close button - it lifts above the overlay and
   becomes an X. Only <summary> can toggle a <details>, so the close control has
   to be the summary itself; a span inside the panel does nothing. */
.navmenu[open] > summary{position:fixed;z-index:70;padding:0;
                         top:calc(env(safe-area-inset-top) + 28px);right:var(--pad)}
.navmenu[open] > summary .mlabel{display:none}
.navmenu[open] .bars{width:24px;background:transparent;box-shadow:none}
.navmenu[open] .bars::before,.navmenu[open] .bars::after{
      content:'';position:absolute;left:0;top:0;width:24px;height:2px;
      background:var(--teal-deep);border-radius:2px}
.navmenu[open] .bars::before{transform:rotate(45deg)}
.navmenu[open] .bars::after{transform:rotate(-45deg)}

.navmenu .sitenav{position:fixed;inset:0;z-index:60;background:var(--white);
                  display:flex;flex-direction:column;overflow-y:auto;
                  padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 2rem)}
.ovtop{padding:calc(env(safe-area-inset-top) + .9rem) 0 .4rem;flex:none}
.ovlogo{display:inline-block;line-height:0}
.ovlogo img{height:52px;width:auto;display:block}

.ovlinks{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
         align-items:center;text-align:center;gap:.15rem;padding:1.5rem 0}
.ovlinks a{display:block;font-size:clamp(1.5rem,6.5vw,2rem);font-weight:500;
           color:var(--ink);text-decoration:none;padding:.42em .6em;line-height:1.15}
.ovlinks a.active,.ovlinks a:hover{color:var(--teal-deep)}
.ovcta{flex:none;align-self:center;font-size:.76rem;font-weight:800;letter-spacing:.08em;
       text-transform:uppercase;color:#06222E;text-decoration:none;text-align:center;
       background:linear-gradient(180deg,var(--accent),var(--accent));
       border-radius:999px;padding:1.05em 2.4em}
.ovcta:hover{color:#06222E;filter:brightness(1.06)}
html:has(.navmenu[open]){overflow:hidden}


/* DESKTOP: the disclosure is removed from the page entirely and the plain row
   takes over. Nothing here depends on <details> behavior. */
@media(min-width:56rem){
  .navmenu{display:none}
  html:has(.navmenu[open]){overflow:auto}
  .deskstrip{display:flex;align-items:center;margin-left:auto;min-width:0}
  .deskstrip a{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
               color:var(--ink);text-decoration:none;padding:1rem .75rem;white-space:nowrap;
               border-bottom:2px solid transparent}
  .deskstrip a:hover{color:var(--teal-deep)}
  .deskstrip a.active{color:var(--teal-deep);border-bottom-color:var(--accent)}
}



/* ---------------------------------------------------------------- buttons
   One definition for every accent pill on the site. Pages add only their
   contextual top margin. Previously each page declared this itself, and
   sponsors.html never did - which is why its button rendered unstyled. */
.btn{display:inline-block;font-family:'Montserrat';font-weight:800;font-size:.85rem;
     letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;
     border:0;border-radius:999px;padding:1.05em 2.2em;color:#06222E;
     background:linear-gradient(180deg,var(--accent),var(--accent))}
.btn:hover{color:#06222E;filter:brightness(1.06)}
.hero .btn{margin-top:1.6rem}
.closing .btn{margin-top:1.4rem}
.cta .btn{margin-top:1.2rem}

/* ---------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line2);padding:1.8rem 0;text-align:center}
footer .flogo{height:64px;width:auto;display:block;margin:0 auto .6rem}
footer .fw{font-family:'Bebas Neue';font-size:1.2rem;color:var(--teal-deep)}
footer .meta{font-size:.72rem;color:var(--ink);opacity:.7;margin-top:.3rem}
footer .series{font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
               color:var(--accent);margin-top:.5rem}
footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;
             margin:1.1rem auto 0;padding-top:1.1rem;border-top:1px solid var(--line2);max-width:700px}
footer .fnav a{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
               color:var(--ink);opacity:.62;text-decoration:none}
footer .fnav a:hover{opacity:1;color:var(--teal-deep)}

.badge{width:34px;height:34px;flex:none}