:root{
  --black:#0c0c0c;
  --panel:#161616;
  --cream:#efeee9;
  --yellow:#f6c700;
  --red:#e2231a;
  --blue:#1e40ad;
  --gray-text:#55534f;
  --container:1280px;
  --pad: clamp(20px, 4vw, 48px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-y:scroll;}
body{
  font-family:'Inter',sans-serif;
  background-color:var(--cream);
  /* A very subtle diagonal lines pattern to evoke Andean textiles without being a cliché */
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 2px, transparent 2px, transparent 4px);
  color:var(--black);
  overflow-x:hidden;
}
.display{font-family:'Anton',sans-serif; letter-spacing:.3px; text-transform:uppercase;}
.label{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:2px; font-weight:600;}
a{color:inherit; text-decoration:none;}
img, iframe, video {display:block; max-width:100%;}
button{font:inherit;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--pad);}

/* ================= HEADER ================= */
header{
  position:relative; background:var(--black);
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}

.logo {
  padding-left: var(--pad); position: relative; z-index: 4; display: flex; align-items: center; height: 100%;
  overflow: hidden; /* si el logo subido desde el Personalizador viene en proporciones
                        distintas, esto evita que desborde el header en vez de solo
                        recortarlo — el object-fit:contain de abajo ya lo encuadra bien. */
}
.logo img {
  height: 85px !important; width: auto !important; min-width: 120px; max-width: 100%; display: block; object-fit: contain;
}

nav.main-nav{
  display:flex; gap:clamp(16px,2.4vw,32px); z-index:50;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:1.4px; font-size:14px;
  color:#e9e9e9; text-transform:uppercase;
}
nav.main-nav a{padding-bottom:20px; border-bottom:2px solid transparent; white-space:nowrap;}
nav.main-nav a.active{color:var(--yellow); border-color:var(--yellow);}
nav.main-nav a:hover{color:var(--yellow);}
.nav-socials { display:none; }

.header-actions{
  position:relative; height:100%; display:flex; align-items:center;
  z-index:2;
}
.header-flag{
  position:absolute; inset:0; left:-46px;
  background:var(--yellow);
  clip-path:polygon(46px 0, 100% 0, 100% 100%, 0 100%);
}
.header-icons{ position:relative; display:flex; gap:12px; padding:0 var(--pad) 0 56px; z-index:2; }
.header-icons a{
  width:32px; height:32px; border-radius:50%; background:var(--black); color:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.header-icons a svg, .footer-social a svg{ width:14px; height:14px; fill:currentColor; display:block; }
.burger{
  display:none; flex-direction:column; gap:5px; width:26px; z-index:5; background:none; border:none; cursor:pointer;
  margin-right:var(--pad);
}
.burger span{display:block; height:2px; background:#fff; width:100%;}

/* ================= HERO ================= */
.hero{ position:relative; background:var(--black); color:#fff; overflow:hidden; }
.hero-inner{ display:flex; min-height:560px; }
.hero-sidebar{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Barlow Condensed',sans-serif; letter-spacing:3px; font-size:11px; color:#9c9c9c;
  padding:36px 16px; border-right:1px solid #262626; white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center;
}
.hero-sidebar::after{ content:""; display:block; width:2px; height:40px; background:var(--yellow); margin-top:16px; }

.hero-content{ flex:1 1 48%; display:flex; align-items:center; padding: clamp(28px,5vw,40px) 20px clamp(28px,5vw,40px) var(--pad); position:relative; z-index:4; min-width:0; }
.hero-content h1, .hero-content .display { font-size:clamp(34px, 5.4vw, 66px); line-height:.94; }
.hero-content h1 .yellow, .hero-content .display .yellow {color:var(--yellow);}
.hero-content h1 .white, .hero-content .display .white {color:var(--yellow);} /* Changing U to Yellow */
.hero-content h1 .n, .hero-content .display .n {color:var(--blue);}       /* Changing N to Blue */
.hero-content h1 .e, .hero-content .display .e {color:var(--red);}        /* Changing E to Red */
.hero-sub{ max-width:340px; margin-top:20px; font-size:14px; line-height:1.65; color:#cfcfcf; font-weight:500;}
.btn{
  display:inline-flex; align-items:center; gap:10px; background:var(--yellow); color:var(--black);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.4px; font-size:14px; text-transform:uppercase;
  padding:14px 24px; margin-top:26px; border:none; cursor:pointer;
}

.hero-visual{ position:relative; flex:1 1 52%; min-width:0; }

/* beam connects headline to photo, tucked behind the photo */
.hero-beam{
  position:absolute; left:-8%; top:0; bottom:0; width:38%;
  background:#f4f3ef;
  clip-path:polygon(100% 8%, 100% 92%, 0% 50%);
  z-index:1;
}

/* flag-colour card sits behind the photo and peeks out on the right + bottom edges */
.hero-flag-card{
  position:absolute; top:20px; left:calc(14% + 20px); right:0; bottom:0;
  background:linear-gradient(165deg, var(--yellow) 0 34%, var(--blue) 34% 67%, var(--red) 67% 100%);
  clip-path:polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
  z-index:2;
}
.hero-photo-frame{
  position:absolute; top:0; left:14%; right:22px; bottom:22px;
  background:
    radial-gradient(ellipse at 55% 15%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(200deg,#3c3c3c 0%, #0c0c0c 65%);
  clip-path:polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  /* filter removed */
  z-index:3;
}
.hero-photo-frame .silhouette{
  position:absolute; left:38%; right:6%; bottom:0; top:8%;
  background:linear-gradient(200deg,#4a4a4a, #0a0a0a 70%);
  clip-path:polygon(38% 0%, 66% 4%, 78% 14%, 74% 100%, 20% 100%, 24% 20%);
}
.hero-stars{
  position:absolute; right:6px; bottom:34px; z-index:4;
  display:flex; flex-direction:column; gap:8px; color:var(--black); font-size:12px; align-items:center;
}

/* ================= CONTEXT SECTION ================= */
.context{ background:var(--cream); padding:clamp(50px,8vw,90px) 0; overflow:hidden; }
.context .wrap{ display:flex; gap:clamp(30px,5vw,60px); align-items:center; flex-wrap:wrap; }
.context-text{ flex:1 1 380px; min-width:280px; }
.eyebrow{ color:var(--red); font-size:13px; margin-bottom:14px; }
.context-text h2{ font-size:clamp(26px,4vw,37px); line-height:1.08; margin-bottom:20px; }
.context-text p{ font-size:14.5px; line-height:1.75; color:var(--gray-text); max-width:420px; margin-bottom:22px; }
.link-arrow{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.4px; font-size:13.5px; border-bottom:2px solid var(--black); padding-bottom:4px; }

.context-visual{ position:relative; flex:1 1 460px; min-width:280px; height:300px; }

/* background cluster: small sun above the photo, country silhouette behind-right, photo overlaps both */
.sun{
  position:absolute; left:14%; top:-2%; width:30px; height:30px; border-radius:50%;
  background:var(--yellow); z-index:0;
  filter:drop-shadow(3px 5px 6px rgba(0,0,0,.3));
}
.ecuador-shape{
  position:absolute; right:0; top:-6%; width:30%; height:112%; z-index:1;
  background:var(--yellow);
  filter:drop-shadow(6px 10px 12px rgba(0,0,0,.28));
  clip-path:polygon(
    14% 4%, 30% 0%, 50% 3%, 70% 0%, 88% 5%, 96% 16%,
    86% 26%, 94% 34%, 78% 42%, 86% 50%, 68% 56%, 74% 64%, 56% 68%,
    62% 76%, 46% 80%, 52% 88%, 40% 92%, 44% 100%, 34% 90%,
    24% 82%, 30% 70%, 16% 62%, 22% 50%, 10% 42%, 18% 32%, 6% 22%, 14% 12%
  );
}
.flag-block{
  position:absolute; right:2%; bottom:-2%; width:15%; height:44%; z-index:0;
  background:linear-gradient(180deg,var(--blue) 0 52%, var(--red) 52% 100%);
}

/* photo overlaps the cluster, only letting sun+map+flag peek out on the right */
.ring-photo{
  position:absolute; left:0; bottom:0; width:70%; height:84%; z-index:2;
  background: linear-gradient(200deg,#6b6b6b, #1a1a1a 78%);
  /* filter removed */
  clip-path:polygon(5% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
}
/* brush stroke grounds the photo like a shadow at its base */
.ring-brush{
  position:absolute; left:-3%; bottom:-5%; width:58%; height:16%; z-index:3;
  background:var(--yellow);
  clip-path:polygon(0% 55%, 8% 15%, 22% 45%, 34% 5%, 48% 40%, 62% 10%, 76% 50%, 88% 20%, 100% 60%, 96% 100%, 4% 100%);
}

/* ================= EVENTS SECTION ================= */
.events{ background:var(--black); color:#fff; position:relative; overflow:hidden; padding:clamp(46px,7vw,70px) 0; }
.events-crowd{
  position:absolute; left:0; top:0; bottom:0; width:150px;
  background:linear-gradient(115deg,#242424, #000 68%); /* filter removed */
}
/* brush marks the seam where the crowd photo meets the content panel */
.events-brush{
  position:absolute; left:110px; bottom:28px; width:100px; height:22px; background:var(--yellow);
  clip-path:polygon(0% 60%, 20% 100%, 35% 30%, 55% 90%, 75% 10%, 100% 55%, 90% 0%, 10% 15%);
  opacity:.92; z-index:2; transform:rotate(-3deg);
}
.events-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:32px; flex-wrap:wrap; gap:10px; }
.events-header .label{ color:var(--yellow); font-size:15px; }
.events-header .see-all{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.4px; font-size:12.5px; color:#e9e9e9; }
.events-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:20px; }
@media (min-width:1025px){
  .events .wrap{ padding-left:calc(var(--pad) + 150px); }
}
.event-featured{ display:flex; flex-direction:column; gap:16px; }
.event-featured-header{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.event-featured-header h3{ font-size:19px; line-height:1.15; margin:0; }
.event-date{ line-height:1; flex-shrink:0; padding-left:14px; border-left:3px solid var(--yellow); }
.event-date .dow{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; color:var(--red); text-transform:uppercase; }
.event-date .day{ display:block; font-family:'Anton',sans-serif; font-size:42px; color:#fff; margin:3px 0; }
.event-date .mon{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; color:var(--yellow); text-transform:uppercase; }
.event-date.compact{ border-left-color:var(--blue); margin-bottom:14px; }
.event-date.compact .day{ font-size:28px; }
.event-date.compact .mon{ color:#9c9c9c; }
.event-date.tba{ max-width:130px; }
.event-date.tba .dow{ white-space:normal; line-height:1.25; }
.event-date.tba .day{ font-size:19px; text-transform:uppercase; white-space:normal; line-height:1.2; margin:6px 0 0; }
.event-featured-text{ padding-top:2px; }
.event-featured-text .meta{ font-size:12.5px; color:#b9b9b9; margin-bottom:16px; }
.event-featured-text .meta .sep{ margin:0 6px; color:#5c5c5c; }
.event-card{ background:var(--panel); padding:18px; border:1px solid #262626; min-width:0; }
.event-card .photo{ aspect-ratio:16/10; width:100%; margin-bottom:12px;
  background:linear-gradient(150deg,#7a4326,#2a1208 75%); }
.event-card h4{ font-size:14px; line-height:1.25; margin-bottom:6px; }
.event-card span.loc{ font-size:11px; color:#9c9c9c; }

/* ================= FIGHTERS ================= */
.fighters{ background:var(--cream); padding:clamp(56px,8vw,80px) 0; position:relative; overflow:hidden; }
.fighters .section-title{ font-size:clamp(20px,3vw,25px); margin-bottom:32px; }

/* Secciones del roster: Campeones / Roster / Gerentes / Comentaristas */
.roster-section{ margin-bottom:clamp(44px,6vw,64px); }
.roster-section:last-child{ margin-bottom:0; }
.roster-section .section-title{
  padding-left:14px; border-left:4px solid var(--yellow); margin-bottom:26px;
}
.roster-section[data-section="roster"] .section-title{ border-left-color:var(--blue); }
.roster-section[data-section="gerentes"] .section-title{ border-left-color:var(--red); }
.roster-section[data-section="comentaristas"] .section-title{ border-left-color:var(--yellow); }

/* Roster Search Bar */
.roster-search-container {
  position: relative; max-width: 400px; margin: 0 auto 36px auto;
}
.roster-search-container input {
  width: 100%; padding: 14px 20px 14px 46px;
  font-family: 'Inter', sans-serif; font-size: 16px;
  border: 2px solid rgba(0,0,0,0.1); background: #fff; color: var(--black);
  border-radius: 40px; outline: none; transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.roster-search-container input:focus {
  border-color: var(--yellow); box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.roster-search-container .search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: var(--black); opacity: 0.4; transition: opacity 0.3s;
}
.roster-search-container input:focus + .search-icon { opacity: 1; fill: var(--yellow); }

.fighters-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 300px)); gap:22px; justify-content:center; }
.fighter-card{ position:relative; }
/* backing card echoes each fighter's own tag colour and peeks top-right, out of the tag's way */
.fighter-card-backing{
  position:absolute; top:-10px; right:-10px; left:14px; bottom:14px; z-index:0;
}
.fighter-card.yellow .fighter-card-backing{ background:var(--yellow); }
.fighter-card.blue .fighter-card-backing{ background:var(--blue); }
.fighter-card.red .fighter-card-backing{ background:var(--red); }
.fighter-photo{
  position:relative; z-index:1; height:0; padding-bottom:120%;
  background:linear-gradient(160deg,#525252,#0a0a0a 78%); /* filter removed */
}
.fighter-tag{
  position:absolute; left:0; bottom:12px; z-index:2; padding:8px 22px 8px 14px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.6px;
  clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.fighter-tag .name{ display:block; font-size:14.5px; color:#fff; }
.fighter-tag .subtitle{ display:block; font-size:10px; font-weight:500; color:rgba(255,255,255,.85); }
.fighter-tag .championship { display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; margin-top:3px; color:#fff; }
.fighter-tag.yellow{ background:var(--yellow); }
.fighter-tag.yellow .name, .fighter-tag.yellow .subtitle, .fighter-tag.yellow .championship{ color:var(--black); }
.fighter-tag.blue{ background:var(--blue); }
.fighter-tag.red{ background:var(--red); }
.fighter-ig {
  position: absolute; bottom: 12px; right: 12px; z-index: 5;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,10,10,0.85); display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform 0.2s ease, background 0.2s;
}
.fighter-ig:hover { transform: scale(1.1); background: var(--yellow); color: var(--black); }
.fighter-ig svg { width: 14px; height: 14px; fill: currentColor; }
.fighters-more{ text-align:right; margin-top:22px; font-family:'Barlow Condensed',sans-serif; letter-spacing:1.4px; font-size:12.5px; }

/* ================= NEWS ================= */
.news{ background:var(--black); color:#fff; padding:clamp(56px,8vw,80px) 0; }
.news-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:34px; flex-wrap:wrap; gap:10px; }
.news-header .label{ color:var(--yellow); font-size:19px; }
.news-header .see-all{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.4px; font-size:12.5px; color:#e9e9e9; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card{ display:flex; gap:14px; }
.news-thumb{ width:100px; height:76px; flex-shrink:0; background:linear-gradient(150deg,#7a4326,#2a1208 75%); }
.news-cat{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.4px; font-size:11px; margin-bottom:6px; display:block; }
.news-cat.blue{ color:#5c8bef; }
.news-cat.red{ color:#ef6a63; }
.news-cat.yellow{ color:var(--yellow); }
.news-card h4{ font-size:14.5px; line-height:1.28; margin-bottom:8px; }
.news-card .date{ font-size:11px; color:#9c9c9c; }

/* ================= FOOTER ================= */
footer{ background:var(--cream); position:relative; overflow:hidden; }
.footer-flag-strip{ position:absolute; left:0; top:0; bottom:0; width:14px;
  background:linear-gradient(90deg,var(--yellow) 0 33%, var(--blue) 33% 66%, var(--red) 66% 100%); z-index:3; }
.footer-top{ padding:clamp(46px,7vw,70px) 0 clamp(40px,6vw,60px); position:relative; z-index:2; }
.footer-top .wrap{ display:flex; gap:clamp(30px,5vw,60px); flex-wrap:wrap; }
.footer-brand{ flex:1 1 240px; min-width:220px; }
.footer-brand .logo{ padding-left:0; margin-bottom:14px; height:auto; display:block; }

.footer-brand p{ font-size:13px; line-height:1.6; color:var(--gray-text); max-width:280px; }
.footer-brand p .accent{ color:var(--blue); }
.footer-brand p .accent2{ color:var(--red); }
.footer-col{ flex:0 1 160px; }
.footer-col h5{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.4px; font-size:13.5px; margin-bottom:16px; }
.footer-col a{ display:block; font-size:13px; margin-bottom:10px; color:var(--gray-text); }
.footer-social{ display:flex; gap:10px; margin-top:4px; }
.footer-social a{ width:28px; height:28px; border-radius:50%; background:var(--black); color:var(--cream);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.footer-banner-wrap{ position:relative; }
.footer-banner{
  position:relative; background:var(--black); color:#fff;
  padding:clamp(20px,3.2vw,30px) var(--pad);
  clip-path:polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
}
.footer-banner-inner{ max-width:var(--container); margin:0 auto; display:flex; justify-content:flex-end; }
.footer-banner h3{ font-size:clamp(13px,3.4vw,30px); line-height:1.15; text-align:right; white-space:nowrap; }
.footer-banner h3 .accent{ color:var(--yellow); }
/* brush marks straddle the diagonal seam itself, unclipped by the banner's own edge */
.footer-seam-brush{ position:absolute; width:64px; height:110px; pointer-events:none; z-index:2; }
.footer-seam-brush.s1{ left:6.5%; top:-34px; background:var(--yellow);
  clip-path:polygon(30% 0%,70% 10%,60% 45%,80% 55%,50% 100%,20% 70%,35% 40%); transform:rotate(6deg); }
.footer-seam-brush.s2{ left:3%; top:38%; background:var(--blue);
  clip-path:polygon(20% 0%,65% 15%,55% 50%,75% 60%,40% 100%,10% 65%,25% 35%); transform:rotate(6deg); }
.footer-seam-brush.s3{ left:0%; bottom:-34px; background:var(--red);
  clip-path:polygon(25% 5%,70% 0%,60% 45%,85% 55%,45% 100%,15% 70%,30% 35%); transform:rotate(6deg); }

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  nav.main-nav{ gap:14px; font-size:12.5px; }
  .header-icons{ padding-left:36px; }
}

@media (max-width:1024px){
  .events-grid{ grid-template-columns:1.3fr 1fr 1fr; padding-left:0; }
  .events-crowd, .events-brush, .events > .ring-brush{ display:none; }
  .fighters-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 300px)); }
}

@media (max-width:860px){
  nav.main-nav{
    position:fixed; inset:84px 0 0 0; height:calc(100vh - 84px);
    background:var(--black); flex-direction:column; gap:0; padding:10px var(--pad);
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav a{ padding:16px 0; border-bottom:1px solid #232323; font-size:18px; }
  nav.main-nav a.active{ border-bottom:1px solid var(--yellow); }
  .burger{ display:flex; margin-right: 0; margin-left: auto; z-index: 60; }
  header { padding-right: var(--pad); }
  .header-actions { display: none !important; }
  .nav-socials { display: flex; gap: 16px; margin-top: 30px; justify-content: center; }
  .nav-socials a { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--black); display: flex; align-items: center; justify-content: center; padding: 0; border: none; }
  .nav-socials a svg { width: 16px; height: 16px; fill: currentColor; }
  .header-icons{ padding:0 var(--pad) 0 34px; gap:8px; }
  .header-icons a{ width:28px; height:28px; }
  .header-icons a svg{ width:12px; height:12px; }

  .hero-inner{ flex-direction:column; min-height:auto; }
  .hero-sidebar{ display:none; }
  .hero-content{ flex:none; padding:36px var(--pad) 30px; padding-right: 15%; }
  .hero-visual{ flex:none; height:340px; }
  .hero-compact .hero-visual { height: 100px; }
  .hero-compact .hero-content { padding-bottom: 20px; padding-right: 25%; }
  .hero-beam{ width:26%; }
  .hero-photo-frame{ left:10%; }
  .hero-flag-card{ left:calc(10% + 10px); top:10px; right:-10px; bottom:-10px; }

  .context .wrap{ flex-direction:column; }
  .context-text{ flex:none; }
  .context-visual{ width:100%; flex:none; height:220px; }
  .context-visual .flag-block,
  .context-visual .ecuador-shape,
  .context-visual .sun{ display:none; }
  .context-visual .ring-photo{
    left:0; right:0; top:0; bottom:0; width:100%; height:100%; clip-path:none;
  }

  .events-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .event-featured{ grid-column:1 / -1; }

  .fighters-grid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; justify-content:stretch; }

  .news-grid{ grid-template-columns:1fr; }
  .news-grid .news-card:last-child{ max-width:none; }

  .footer-top{ padding:34px 0 28px; }
  .footer-top .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-col:last-of-type{ grid-column:1 / -1; }
  .footer-brand, .footer-col{ flex:none; }
  .footer-banner{ clip-path:none; padding:22px var(--pad); }
  .footer-banner-inner{ justify-content:flex-start; }
  .footer-banner h3{ text-align:left; }
  .footer-seam-brush{ display:none; }
}

@media (max-width:480px){
  :root{ --pad:18px; }
  .logo{ font-size:15px; }
  .hero-content h1, .hero-content .display { font-size:clamp(30px,10vw,40px); }
  .hero-visual{ flex:none; height:260px; }
  .events-grid{ grid-template-columns:1fr; }
  .fighters-grid{ grid-template-columns:repeat(2,1fr); gap:12px; justify-content:stretch; }
  .fighter-tag .name{ font-size:12.5px; }
  .fighter-tag .subtitle{ font-size:9px; }
}


/* ================= UTILITY & ASSET CLASSES ================= */
.hero-compact { min-height: auto; }
.hero-inner-compact { min-height: 150px; align-items: flex-start; }
@media (max-width:860px){
  .hero-inner-compact{ min-height:auto; }
}
.flex-1 { flex: 1; }
.flex-1-100 { flex: 1; height: 100%; }
.stars-bottom { bottom: 10px; }
.wrap-reverse { flex-direction: row-reverse; position: relative; z-index: 2; }
.bg-overlay-right { width: 100%; opacity: 0.3; right: 0; left: auto; }
.text-yellow { color: var(--yellow); }
.context-text p.text-light-gray,
.text-light-gray { color: #cfcfcf; }
.ring-brush-left { background: var(--blue); left: 10%; bottom: -5%; width: 50%; z-index: 3; }
.ring-brush-right { background: var(--red); left: 10%; bottom: -5%; width: 50%; z-index: 3; }
.ring-brush-map { background: var(--yellow); top: -10px; right: -10px; left: auto; width: 100px; height: 100px; z-index: 0; clip-path: polygon(10% 0, 100% 20%, 90% 100%, 0 80%); }
.map-container-wrap { position: relative; z-index: 1; width: 100%; height: 100%; border: 2px solid var(--black); background: #ddd; }

/* Contenedores de fotos: Aseguramos que la etiqueta img llene el contenedor y respete los clip-path / bordes */
.hero-photo-frame img, .ring-photo img, .photo img, .fighter-photo img, .news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* por encima del gradiente de fondo nativo */
}

/* Modificamos los contenedores para que oculten cualquier overflow de la imagen y mantengan el color de fondo como fallback/overlay */
.hero-photo-frame, .ring-photo, .photo, .fighter-photo, .news-thumb {
    overflow: hidden; /* Esto obliga a la imagen a cortarse con el clip-path o border-radius del padre */
}
.photo, .fighter-photo, .news-thumb {
    position: relative;
}

/* Si queremos que la imagen se mezcle con el fondo (el gradiente nativo) para un estilo artístico: */
.hero-photo-frame img, .ring-photo img {
    mix-blend-mode: normal; /* Combina la imagen con los colores del gradiente de fondo */
    opacity: 1;
}

.fighter-photo img, .photo img, .news-thumb img {
    mix-blend-mode: normal;
    opacity: 1;
}

/* Specific fix for the blog.html items which were hardcoded */
.blog-img-container {
    width: 260px;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(150deg,#7a4326,#2a1208 75%);
}
.blog-img-container img {
    width: 100%; height: 100%; object-fit: cover;
}

/* ================= MODAL ================= */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.modal.active { opacity:1; pointer-events:all; }
.modal-content { background:var(--cream); padding:40px; max-width:400px; width:90%; position:relative; text-align:center; }
.close-modal { position:absolute; top:12px; right:16px; font-size:28px; font-weight:bold; cursor:pointer; color:var(--black); }
.close-modal:hover { color:var(--red); }

/* ================= SPONSORS ================= */
/* flex-wrap + justify-content:center en vez de grid fijo: sin importar cuántos
   patrocinadores haya, la última fila siempre queda centrada, nunca asimétrica. */
.sponsors-grid-custom{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px; width:100%;
}
.sponsor-card{
  position:relative; flex:0 1 calc((100% - 4*18px)/5); max-width:calc((100% - 4*16px)/5);
  background:#fff; border:1px solid rgba(12,12,12,.08);
  padding:24px 18px 18px; display:flex; flex-direction:column; align-items:center; text-align:center;
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.sponsor-card:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(12,12,12,.09); }
/* acento delgado arriba, en el color de bandera asignado por el JS de abajo */
.sponsor-accent{ position:absolute; top:0; left:0; width:100%; height:4px; background:var(--yellow); }
.sponsor-card.blue .sponsor-accent{ background:var(--blue); }
.sponsor-card.red .sponsor-accent{ background:var(--red); }
.sponsor-logo{ width:100%; height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.sponsor-logo img{
  max-width:100%; max-height:100%; object-fit:contain;
}
.sponsor-card:hover .sponsor-logo img{ filter:grayscale(0); opacity:1; }
.sponsor-info .name{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--black); }
.sponsor-info .subtitle{ display:block; font-size:10px; color:var(--gray-text); margin-top:3px; }
@media (max-width:480px){
.sponsor-card{ flex-basis:calc((100% - 18px)/2); max-width:calc((100% - 18px)/2); padding:18px 12px 14px; }
  .sponsor-logo{ height:48px; }
}
@media (max-width:860px){
  .sponsor-card{ flex-basis:calc((100% - 2*18px)/3); max-width:calc((100% - 2*18px)/3); }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ================= FILTER TABS (Shows / Eventos / Proyectos) ================= */
.filter-tabs{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:clamp(36px,5vw,48px); }
.filter-tab{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.2px; font-size:13.5px; text-transform:uppercase;
  padding:11px 24px; border:2px solid var(--black); background:transparent; color:var(--black); cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.filter-tab .count{ opacity:.55; font-weight:500; margin-left:4px; }
.filter-tab:hover{ border-color:var(--yellow); }
.filter-tab.active{ background:var(--black); color:#fff; border-color:var(--black); }
.filter-tab.active[data-filter="shows"]{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.filter-tab.active[data-filter="eventos"]{ background:var(--blue); color:#fff; border-color:var(--blue); }
.filter-tab.active[data-filter="proyectos"]{ background:var(--red); color:#fff; border-color:var(--red); }

/* ================= FEATURED / NEXT SHOW BANNER ================= */
.next-show{ position:relative; background:var(--black); color:#fff; overflow:hidden; padding:clamp(34px,5.5vw,56px) 0; }
.next-show .wrap{ display:flex; gap:clamp(30px,5vw,54px); align-items:center; flex-wrap:wrap; }
.next-show-media{ flex:1 1 480px; min-width:280px; }
.next-show-info{ flex:1 1 380px; min-width:280px; }
.next-show-label{ color:var(--yellow); font-size:14px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.next-show-label::before{ content:""; width:9px; height:9px; background:var(--red); border-radius:50%; display:inline-block; animation:pulse-dot 1.6s infinite; flex-shrink:0; }
@keyframes pulse-dot{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.next-show-info h2{ font-size:clamp(28px,4.4vw,46px); line-height:1.02; margin-bottom:18px; }
.next-show-meta{ display:flex; flex-wrap:wrap; gap:16px 30px; margin-bottom:22px; }
.next-show-meta .item{ display:flex; flex-direction:column; gap:2px; }
.next-show-meta .item .k{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.4px; font-size:11px; color:#9c9c9c; text-transform:uppercase; }
.next-show-meta .item .v{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16.5px; color:#fff; }
.next-show-info p{ color:#ccc; font-size:14.5px; line-height:1.7; max-width:440px; margin-bottom:26px; }
.next-show-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-outline{
  display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:2px solid #fff;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.4px; font-size:14px; text-transform:uppercase;
  padding:12px 22px; cursor:pointer;
}
.btn-outline:hover{ border-color:var(--yellow); color:var(--yellow); }

/* ================= VIDEO EMBEDS ================= */
.video-frame{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* corner flag accent sits behind the video, peeking out top-right — echoes .hero-flag-card */
.video-frame-wrap{ position:relative; }
.video-frame-wrap::before{
  content:""; position:absolute; top:-14px; right:-14px; width:55%; height:55%; z-index:0;
  background:linear-gradient(165deg, var(--yellow) 0 34%, var(--blue) 34% 67%, var(--red) 67% 100%);
}
.video-frame-wrap .video-frame{ position:relative; z-index:1; }

.video-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,30px); }
.video-item h4{ margin-top:14px; font-size:14.5px; line-height:1.3; }
.video-item .video-item-meta{ font-size:11.5px; color:var(--gray-text); margin-top:4px; display:block; }
.section-context-black .video-item .video-item-meta{ color:#9c9c9c; }

/* ================= SHOWS / EVENTOS / PROYECTOS GRID ================= */
.shows-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.show-card{ position:relative; background:var(--black); color:#fff; display:flex; flex-direction:column; transition:transform .25s ease; }
.show-card:hover{ transform:translateY(-6px); }
.show-card-thumb{ position:relative; height:0; padding-bottom:56.25%; overflow:hidden; background:linear-gradient(150deg,#3c3c3c,#0a0a0a 78%); display:block; }
.show-card-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.show-card:hover .show-card-thumb img{ transform:scale(1.06); }
.show-card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); transition:background .25s ease; }
.show-card-play svg{ width:50px; height:50px; fill:#fff; opacity:.94; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition:transform .25s ease; }
.show-card:hover .show-card-play{ background:rgba(0,0,0,.08); }
.show-card:hover .show-card-play svg{ transform:scale(1.12); }
.show-card-tag{
  position:absolute; top:12px; left:0; padding:6px 18px 6px 14px; z-index:2;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.2px; font-size:11px; text-transform:uppercase;
  clip-path:polygon(0 0, 100% 0, 86% 100%, 0% 100%);
}
.show-card-tag.shows{ background:var(--yellow); color:var(--black); }
.show-card-tag.eventos{ background:var(--blue); color:#fff; }
.show-card-tag.proyectos{ background:var(--red); color:#fff; }
.show-card-body{ padding:20px 22px 24px; }
.show-card-body h3{ font-size:16.5px; line-height:1.25; margin-bottom:9px; }
.show-card-meta{ font-size:11.5px; color:#9c9c9c; display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:11px; }
.show-card-meta .sep{ color:#4a4a4a; }
.show-card-excerpt{ font-size:13px; color:#ccc; line-height:1.6; margin-bottom:15px; }
.show-card-link{ font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:1.2px; font-size:12.5px; border-bottom:2px solid var(--yellow); padding-bottom:3px; display:inline-block; }
.show-card.eventos-card .show-card-link{ border-bottom-color:var(--blue); }
.show-card.proyectos-card .show-card-link{ border-bottom-color:var(--red); }
.shows-empty{ text-align:center; padding:50px 0; color:var(--gray-text); font-size:14px; display:none; }
.shows-more{ text-align:center; margin-top:38px; }

/* ================= GALERÍA DE FOTOS ================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-item{ position:relative; height:0; padding-bottom:100%; overflow:hidden; cursor:pointer; background:linear-gradient(150deg,#3c3c3c,#0a0a0a 78%); border:none; padding-left:0; padding-right:0; }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease, filter .35s ease; filter:grayscale(.1); }
.gallery-item::after{
  content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:32px; color:#fff; background:rgba(0,0,0,0); opacity:0;
  transition:opacity .25s ease, background .25s ease;
}
.gallery-item:hover img{ transform:scale(1.08); filter:grayscale(0); }
.gallery-item:hover::after{ opacity:1; background:rgba(0,0,0,.35); }

/* lightbox: extiende .modal ya existente para mostrar fotos de galería en grande */
.modal-content.lightbox-content{ background:transparent; padding:0; max-width:920px; width:92%; box-shadow:none; }
.modal-content.lightbox-content img{ width:100%; height:auto; max-height:82vh; object-fit:contain; display:block; }
.modal-content.lightbox-content .close-modal{ top:-38px; right:0; color:#fff; }
.modal-content.lightbox-content .close-modal:hover{ color:var(--yellow); }

/* ================= FICHA DE DATOS (página de detalle) ================= */
.show-meta-card{ background:var(--cream); border:1px solid rgba(12,12,12,.1); padding:clamp(22px,3vw,30px); }
.show-meta-card .row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(12,12,12,.08); }
.show-meta-card .row:first-child{ padding-top:0; }
.show-meta-card .row:last-child{ border-bottom:none; padding-bottom:0; }
.show-meta-card .row .k{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.2px; font-size:11.5px; text-transform:uppercase; color:var(--gray-text); flex-shrink:0; }
.show-meta-card .row .v{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13.5px; text-align:right; }
.show-meta-card .btn{ width:100%; justify-content:center; margin-top:20px; }
.show-breadcrumb{ font-family:'Barlow Condensed',sans-serif; letter-spacing:1.2px; font-size:12.5px; color:#b9b9b9; margin-bottom:16px; display:block; }
.show-breadcrumb a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }
.show-breadcrumb a:hover{ border-color:var(--yellow); color:var(--yellow); }

@media (max-width:1024px){
  .shows-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .video-grid{ grid-template-columns:1fr; max-width:640px; }
}
@media (max-width:860px){
  .next-show .wrap{ flex-direction:column; }
  .next-show-media{ width:100%; flex:0 1 auto; }
  .next-show-info{ flex:0 1 auto; }
}
@media (max-width:640px){
  .shows-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .filter-tabs{ gap:8px; }
  .filter-tab{ padding:9px 16px; font-size:12px; }
  .show-meta-card .row{ flex-direction:column; gap:2px; }
  .show-meta-card .row .v{ text-align:left; }
}