/* Boca Juniors theme — design tokens + styles
 * Palette from official brand book (Boca-Marca_2025)
 * Yellow  #F7A600  Pantone 7409C
 * Blue    #023F86  Pantone 287C
 * Navy    #03326C  Pantone 288C
 * Fonts loaded from boca-font-*.css files
 */
:root {
  --boca-yellow:       #F7A600;
  --boca-yellow-hover: #FFB81C;
  --boca-blue:         #023F86;
  --boca-blue-navy:    #03326C;
  --boca-blue-deep:    #021F45;
  --boca-white:        #ffffff;
  --boca-off:          #f4f6fb;
  --boca-mute:         #c8d0e0;
  --boca-line:         rgba(255,255,255,.12);
  --boca-card-bg:      #0f2450;

  --boca-font-institutional: 'CABJ 1905', 'Collegiate Black FLF', 'Arial Black', sans-serif;
  --boca-font-primary: 'Akzidenz Grotesk BQ', 'Helvetica Neue', Arial, sans-serif;
  --boca-font-cnd: 'Akzidenz Grotesk BQ Cnd', 'Akzidenz Grotesk BQ', 'Helvetica Neue', Arial, sans-serif;
}

/* ================================================================
 * BASE
 * ================================================================ */
html, body {
  font-family: var(--boca-font-primary);
  color: var(--boca-blue-navy);
  background: var(--boca-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--boca-blue); }
a:hover, a:focus { color: var(--boca-blue-navy); text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--boca-font-cnd);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--boca-blue-navy);
  text-transform: uppercase;
}
.boca-y { background: transparent !important; color: var(--boca-yellow) !important; }

/* ================================================================
 * TOPSTRIP + HEADER
 * ================================================================ */
.boca-topstrip {
  height: 4px;
  background: linear-gradient(90deg,
    var(--boca-yellow) 0%, var(--boca-yellow) 33%,
    var(--boca-blue) 33%, var(--boca-blue) 66%,
    var(--boca-blue-navy) 66%);
}
.navbar-default,
.navbar.navbar-default.main-navigation {
  background: var(--boca-blue-navy) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--boca-yellow) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
  color: var(--boca-white) !important;
  font-family: var(--boca-font-cnd);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a {
  color: var(--boca-yellow) !important;
  background: transparent !important;
}
.navbar-default .navbar-brand {
  display: inline-flex; align-items: center; gap: 12px;
  height: auto; padding: 6px 15px;
}
.navbar-default .navbar-brand .boca-escudo {
  height: 130px; width: auto; vertical-align: middle; z-index: 2;
}
@media (max-width: 767px) {
  .navbar-default .navbar-brand .boca-escudo { height: 80px; }
}

/* Compact header rows — bring nav closer to logo */
.main-navigation .header__secondary { padding: 4px 0 !important; min-height: 0 !important; }
.main-navigation .header__secondary .container-fluid { padding-top: 0 !important; padding-bottom: 0 !important; }
.main-navigation .header__primary { padding: 0 !important; margin-top: 0 !important; }
.main-navigation .header__primary .main-nav__list { margin: 0 !important; }
.main-navigation .header__primary .main-nav__list > li > a { padding: 12px 18px !important; }
.main-navigation .header__secondary .row { min-height: 0 !important; }
.main-navigation .header-logo__img { display: none !important; } /* no legacy img */
.navbar-default .navbar-brand .boca-brand-text {
  font-family: var(--boca-font-institutional);
  font-size: 22px;
  line-height: 1;
  color: var(--boca-white);
  letter-spacing: .04em;
}
.navbar-default .navbar-brand .boca-brand-text .boca-y { color: var(--boca-yellow); }
.navbar-default .navbar-toggle { border-color: var(--boca-yellow); margin-top: 14px; }
.navbar-default .navbar-toggle .icon-bar { background: var(--boca-yellow); }
.navbar-default .dropdown-menu { background: var(--boca-blue-navy); }
.navbar-default .dropdown-menu > li > a { color: var(--boca-white); }
.navbar-default .dropdown-menu > li > a:hover { background: var(--boca-blue); color: var(--boca-yellow); }
[data-tp-anon-link] {
  color: var(--boca-yellow) !important;
  font-family: var(--boca-font-cnd) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.boca-header-socials a { color: var(--boca-white) !important; }
.boca-header-socials a:hover { color: var(--boca-yellow) !important; }

/* Cart badge / countdown */
#cart_countdown_nav span,
#cart_quantity {
  color: #f6a600 !important;
}
.cart-quantity {
  background: #04326c !important;
}

/* Active nav underline/decorator */
.main-nav__list > li.active > a::before {
  background-color: #053f88;
}

/* Carousel container background */
.pos-r.carousel-container.overflow-hidden {
  background: #04326c;
}

/* ================================================================
 * HERO
 * ================================================================ */
.boca-hero {
  position: relative;
  background: linear-gradient(180deg, var(--boca-blue-navy) 0%, #003780 100%);
  color: var(--boca-white);
  padding: 64px 0 88px;
  overflow: hidden;
}
.boca-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(247,166,0,.18) 0%, transparent 50%);
  pointer-events: none;
}
.boca-hero-inner { position: relative; z-index: 1; max-width: 100%; }
.boca-hero-events { margin-top: 20px; }
.boca-hero-events .row { margin-left: -8px; margin-right: -8px; }
.boca-hero-events .row > [class^="col-"] { padding: 8px !important; margin: 0 !important; }
.boca-hero-events a.thumbnail { width: 100%; margin: 0; display: block; }
.boca-hero-eyebrow {
  font-family: var(--boca-font-cnd);
  color: var(--boca-yellow);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
  margin: 0;
}
.boca-hero-title {
  font-family: var(--boca-font-institutional);
  font-size: clamp(38px, 6vw, 84px);
  line-height: .95;
  margin: 0;
  color: var(--boca-white) !important;
  text-transform: uppercase;
}
.boca-hero-title .boca-y { color: var(--boca-yellow) !important; }
.boca-hero-desc { font-size: 17px; line-height: 1.55; max-width: 620px; color: var(--boca-mute); }
.boca-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.boca-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--boca-yellow);
  color: var(--boca-blue-navy);
  border: 2px solid var(--boca-yellow);
  border-radius: 12px;
  font-family: var(--boca-font-cnd);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  transition: all .18s ease;
}
.boca-btn:hover { background: var(--boca-yellow-hover); transform: translateY(-1px); }
.boca-btn-ghost { background: transparent; color: var(--boca-white); border-color: var(--boca-white); }
.boca-btn-ghost:hover { background: var(--boca-white); color: var(--boca-blue-navy); }


/* ================================================================
 * SPONSORS — banda superior estática (desktop) + marquee inferior
 * Ambas filas se animan como marquee en mobile.
 * ================================================================ */
.boca-sponsors {
  background: var(--boca-blue-navy);
  padding: 40px 0;
  overflow: hidden;
}
.boca-sponsors-featured {
  overflow: hidden;
  padding: 12px 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.boca-sponsors-featured-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  flex-wrap: nowrap;
}
.boca-sponsors-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  opacity: .95;
  transition: opacity .2s ease;
  color: #fff; /* used by currentColor SVGs */
}
.boca-sponsors-item:hover { opacity: 1; }
.boca-sponsors-item img {
  max-height: 52px;
  max-width: 100%;
  height: auto;
  width: auto;
  filter: brightness(0) invert(1); /* logos in white */
  object-fit: contain;
}
/* Adidas SVG is only 3 stripes on a 100×60 canvas — make it read bigger */
.boca-sponsors-item img[alt="Adidas"] { max-height: 44px; }
.boca-sponsors-clone { display: none; }

/* Bottom marquee */
.boca-sponsors-marquee {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
}
.boca-sponsors-marquee::before,
.boca-sponsors-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.boca-sponsors-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--boca-blue-navy), transparent);
}
.boca-sponsors-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--boca-blue-navy), transparent);
}
.boca-sponsors-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: bocaSponsorsScroll 40s linear infinite;
}
.boca-sponsors-mitem {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 44px;
  opacity: .9;
}
.boca-sponsors-mitem img {
  max-height: 36px;
  max-width: 100%;
  filter: none;
  object-fit: contain;
}
@keyframes bocaSponsorsScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Mobile: la fila superior también se anima */
@media (max-width: 767px) {
  .boca-sponsors { padding: 24px 0; }
  .boca-sponsors-featured {
    padding: 8px 0;
    margin-bottom: 16px;
  }
  .boca-sponsors-featured-track {
    justify-content: flex-start;
    gap: 40px;
    width: max-content;
    animation: bocaSponsorsScroll 30s linear infinite;
  }
  .boca-sponsors-clone { display: inline-flex; }
  .boca-sponsors-item { min-width: 100px; height: 44px; }
  .boca-sponsors-item img { max-height: 32px; }
  .boca-sponsors-mitem { min-width: 90px; height: 36px; }
  .boca-sponsors-mitem img { max-height: 28px; }
}

/* ================================================================
 * SECTION_BOQUE — banda institucional "CABJ" + barra amarilla
 * ================================================================ */
.section_boque {
  background: var(--boca-blue-navy);
  padding: 40px 0 60px;
}
.section_boque .container-large {
  padding: 0 40px;
}
.section_boque .boque_content.flex-h {
  display: flex;
  align-items: center;
  gap: 32px;
}
.section_boque .heading-style-h1.text-color-yellow {
  font-family: var(--boca-font-institutional);
  color: var(--boca-yellow);
  font-size: clamp(88px, 8vw, 240px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  flex: 0 0 auto;
}
.section_boque .boque_block {
  flex: 1 1 auto;
  height: clamp(70px, 10vw, 160px);
  background: var(--boca-yellow);
  border-radius: 6px;
}
@media (max-width: 767px) {
  .section_boque { padding: 24px 0 32px; }
  .section_boque .container-large { padding: 0 20px; }
  .section_boque .boque_content.flex-h { gap: 16px; }
  .section_boque .boque_block { height: 48px; border-radius: 4px; }
}

/* ================================================================
 * SECTIONS + TITLES
 * ================================================================ */
.boca-section-title {
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 28px;
  font-family: var(--boca-font-institutional);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--boca-blue-navy);
}
.boca-section-title .accent {
  display: inline-block; width: 40px; height: 6px;
  background: var(--boca-yellow); border-radius: 3px;
}

/* ================================================================
 * EVENT CARDS — mínimo override: solo caption + colores.
 * NO tocar la geometría del thumb-container / img — el sistema los
 * maneja con clases legadas (img-responsive, center-block, pos-r).
 * ================================================================ */
a.thumbnail {
  background: var(--boca-card-bg);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  color: var(--boca-white);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
a.thumbnail:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
  text-decoration: none;
  color: var(--boca-white);
}
/* Card 100% width of its column, sin márgenes laterales */
.event-home .row > [class^="col-"] > a.thumbnail,
.event-home a.thumbnail {
  width: 100%;
  margin: 0;
  display: block;
}
.event-home .row > [class^="col-"] { padding: 6px !important; margin: 0 !important; }
a.thumbnail .caption,
a.thumbnail .details-events,
a.thumbnail .details-events-car {
  padding: 14px 16px 18px;
  color: var(--boca-white);
  background: var(--boca-card-bg);
}
a.thumbnail .caption .event-name,
a.thumbnail .caption h3,
a.thumbnail .title-mi {
  font-family: var(--boca-font-cnd) !important;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--boca-white) !important;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
a.thumbnail .caption .event-date,
a.thumbnail .caption p,
a.thumbnail .caption .company {
  font-family: var(--boca-font-cnd);
  color: var(--boca-yellow) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px !important;
  margin: 0 0 4px !important;
}
a.thumbnail .caption .event-venue { color: var(--boca-mute) !important; }
a.thumbnail .caption .price {
  display: inline-block; margin-top: 8px;
  font-family: var(--boca-font-cnd); font-weight: 700;
  color: var(--boca-yellow); font-size: 13px;
}

/* ================================================================
 * FOOTER — high-specificity to survive base custom-style.css
 * ================================================================ */
footer.boca-footer {
  background: var(--boca-blue-navy) !important;
  color: var(--boca-white) !important;
  border-top: 3px solid var(--boca-yellow) !important;
  padding: 48px 0 0 !important;
  margin: 0 !important;
}
footer.boca-footer .boca-footer-grid,
footer.boca-footer .footer_menu {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 32px !important;
  margin-bottom: 40px !important;
}
@media (max-width: 991px) {
  footer.boca-footer .boca-footer-grid,
  footer.boca-footer .footer_menu { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
}
@media (max-width: 575px) {
  footer.boca-footer .boca-footer-grid,
  footer.boca-footer .footer_menu { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* Boca footer_menu (Webflow-style columns) */
footer.boca-footer .footer_menu-column { display: block; }
footer.boca-footer .footer_menu-column .heading-style-h5.text-color-yellow {
  color: var(--boca-yellow) !important;
  font-family: var(--boca-font-cnd) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin: 0 0 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--boca-line) !important;
  font-weight: 700;
}
footer.boca-footer .footer_menu-column .menu_links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
footer.boca-footer .footer_menu-column .footer_menu-links {
  color: var(--boca-mute) !important;
  font-size: 14px !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
footer.boca-footer .footer_menu-column .footer_menu-links:hover {
  color: var(--boca-yellow) !important;
}
footer.boca-footer .footer_menu-column .footer_menu-links.acreditaciones {
  border-top: 1px solid var(--boca-line);
  padding-top: 10px;
  margin-top: 6px;
  color: var(--boca-yellow) !important;
}
footer.boca-footer .footer_menu-column .footer_menu-links .star-prensa {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--boca-yellow);
}
footer.boca-footer .footer_menu-column .footer_menu-links .star-prensa svg {
  width: 100%; height: 100%; fill: currentColor;
}

/* Legal row (FAQs + contact email) below the 5 columns */
footer.boca-footer .footer_menu--legal {
  display: block !important;
  grid-template-columns: 1fr !important;
  margin-top: -12px !important;
  margin-bottom: 32px !important;
}
footer.boca-footer .footer_menu--legal .menu_links--inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 20px;
}
footer.boca-footer .boca-footer-col h4 {
  color: var(--boca-yellow) !important;
  font-family: var(--boca-font-cnd) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin: 0 0 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--boca-line) !important;
  border-top: 0 !important;
}
footer.boca-footer .boca-footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
footer.boca-footer .boca-footer-col li { margin: 0 0 8px !important; }
footer.boca-footer .boca-footer-col a { color: var(--boca-mute) !important; font-size: 14px !important; }
footer.boca-footer .boca-footer-col a:hover { color: var(--boca-yellow) !important; }
footer.boca-footer .boca-footer-brand {
  text-align: center !important;
  padding: 32px 0 !important;
  border-top: 1px solid var(--boca-line) !important;
  border-bottom: 1px solid var(--boca-line) !important;
}
footer.boca-footer .boca-footer-brand .boca-wordmark {
  font-family: var(--boca-font-institutional) !important;
  font-size: clamp(56px, 10vw, 130px) !important;
  line-height: 1 !important;
  color: var(--boca-white) !important;
  text-transform: lowercase !important;
  letter-spacing: -.02em !important;
  background: transparent !important;
}
footer.boca-footer .boca-footer-brand .boca-wordmark .boca-y {
  color: var(--boca-yellow) !important;
  background: transparent !important;
}
footer.boca-footer .stars {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  color: var(--boca-yellow) !important;
}
footer.boca-footer .stars svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}
footer.boca-footer .boca-footer-bottom {
  padding: 20px 0 !important;
  font-size: 12px !important;
  color: var(--boca-mute) !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
footer.boca-footer .boca-footer-bottom a { color: var(--boca-yellow) !important; }
footer.boca-footer .boca-footer-socials { display: flex !important; gap: 10px !important; }
footer.boca-footer .boca-footer-socials a {
  width: 34px !important; height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 50% !important;
  color: var(--boca-white) !important;
}
footer.boca-footer .boca-footer-socials a:hover { background: var(--boca-yellow) !important; color: var(--boca-blue-navy) !important; }
footer.boca-footer .boca-footer-socials svg { width: 16px !important; height: 16px !important; fill: currentColor !important; }

/* ================================================================
 * MODAL (FAQ)
 * ================================================================ */
.boca-modal .modal-content { border-radius: 12px; border: 0; }
.boca-modal .modal-header {
  background: var(--boca-blue-navy) !important;
  color: var(--boca-white) !important;
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid var(--boca-yellow);
}
.boca-modal .modal-header .close { color: var(--boca-white); opacity: .8; text-shadow: none; }
.boca-modal .modal-title { font-family: var(--boca-font-institutional); text-transform: uppercase; }
.boca-modal .modal-body { padding: 24px; }

/* Mobile */
@media (max-width: 767px) {
  .event-home .row > [class^="col-"] { width: 100%; float: none; }
  .navbar-default .navbar-brand .boca-brand-text { font-size: 18px; }
}