/** Shopify CDN: Minification failed

Line 2294:9 Expected identifier but found "addEventListener("
Line 2335:0 Unexpected "("
Line 2340:6 Comments in CSS use "/* ... */" instead of "//"
Line 2364:2 Comments in CSS use "/* ... */" instead of "//"
Line 2367:2 Comments in CSS use "/* ... */" instead of "//"
Line 2378:0 Unexpected "("
Line 2390:6 Comments in CSS use "/* ... */" instead of "//"
Line 2419:2 Comments in CSS use "/* ... */" instead of "//"
Line 2422:2 Comments in CSS use "/* ... */" instead of "//"

**/

:root {
  --green-primary:#0fa958;
  --green-dark:#0b7e42;
  --green-deep:#065c33;
  --yellow-accent:#f5d547;
  --white:#ffffff;
  --black:#0f172a;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--green-primary);
  color:var(--white);
}

/* HEADER */
.header {
  background:var(--green-dark);
  padding:14px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav a {
  color:#fff;
  margin:0 14px;
  text-decoration:none;
  font-weight:600;
  text-transform:uppercase;
  font-size:14px;
}

/* HERO */
.hero {
  position:relative;
  height:85vh;
  background-size:cover;
  background-position:center;
  border-radius:30px;
  margin:40px;
  overflow:hidden;
}

.hero::after {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.66);
}

.hero-content {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-content h1 {
  font-family:'Bebas Neue', sans-serif;
  font-size:96px;
  color:var(--yellow-accent);
  margin:0;
}

.hero-content p {
  font-size:20px;
  margin-top:-10px;
}

/* MATCH CARDS */
.matches {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
  margin:0 40px 60px;
}

.match-card {
  background:#fff;
  color:#000;
  border-radius:20px;
  padding:24px;
  text-align:center;
  font-weight:600;
}

/* SPONSORS */
.sponsors {
  display:flex;
  justify-content:center;
  gap:60px;
  padding:60px 20px;
  background:var(--green-dark);
}

.sponsors img {
  height:40px;
  filter:brightness(0) invert(1);
  opacity:.85;
}

/* NEWS */
.news {
  margin:80px 40px;
}

.news-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

.news-card {
  background:#000;
  border-radius:20px;
  overflow:hidden;
}

.news-card img {
  width:100%;
  height:360px;
  object-fit:cover;
}

.news-card h3 {
  color:var(--yellow-accent);
  font-size:22px;
  padding:20px;
  margin:0;
}

/* FOOTER */
.footer {
  background:var(--black-deep);
  padding:40px;
  text-align:center;
  font-size:14px;
}
.fc-header {
  background:#000;
  padding:14px 0;
}

.fc-header-inner {
  max-width:1400px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.fc-nav a {
  color:#fff;
  margin-right:18px;
  font-weight:600;
  text-transform:uppercase;
  font-size:14px;
  text-decoration:none;
}

.fc-logo img {
  height:70px;
}

.fc-icons {
  color:#fff;
  font-size:18px;
}
.hero-futbol {
  position: relative;
  height: 85vh;
  margin: 40px;
  border-radius: 30px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* Overlay oscuro */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Escudo flotante arriba */
.hero-logo {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.hero-logo img {
  height: 90px;
}

/* Texto central */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content h1 {
  font-size: 96px;
  color: #c71a1a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-content span {
  margin-top: -10px;
  font-size: 20px;
  color: #ffffff;
  text-transform: uppercase;
}
/* ESCUDO STICKY (SIEMPRE VISIBLE) */
.sticky-escudo {
  position: fixed;
  top: 90px; /* 👈 MÁS ABAJO */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}


.sticky-escudo img {
  height: 80px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* OPCIONAL: reducir tamaño al hacer scroll */
body.scrolled .sticky-escudo img {
  height: 60px;
  opacity: 0.9;
}
/* ICONOS SOCIALES STICKY (DERECHA) */
.sticky-socials {
  position: fixed;
  top: 120px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sticky-socials img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  padding: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sticky-socials img:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* HEADER CLUB */
.fc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background:rgb(255, 255, 255);
}

.fc-header-inner {
  max-width: 1500px;
  margin: auto;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* IZQUIERDA */
.fc-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.fc-home img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

/* MENÚ */
.fc-nav a {
  color: #ffffff;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

/* CENTRO */
.fc-logo {
  display: flex;
  justify-content: center;
}

.fc-logo img {
  height: 70px;
}

/* DERECHA */
.fc-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fc-right img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fc-right img:hover,
.fc-home img:hover {
  transform: scale(1.15);
  opacity: 0.85;
}
/* HAMBURGUESA */
.fc-burger {
  display: none;
  width: 38px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
}

.fc-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  margin: 6px 0;
  border-radius: 2px;
}

/* MENÚ MÓVIL */
.fc-mobile-menu {
  background: #0b7e42;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.fc-mobile-menu a {
  display: block;
  padding: 12px 0;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .fc-nav-desktop {
    display: none;
  }

  .fc-burger {
    display: inline-block;
  }

  .fc-header-inner {
    padding: 12px 16px;
  }

  .fc-right img,
  .fc-home img {
    width: 20px;
    height: 20px;
  }
}
/* MENÚ MÓVIL ANIMADO */
.fc-mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
  background: #0b7e42;
}

/* MENÚ ABIERTO */
body.fc-menu-open .fc-mobile-menu {
  max-height: 500px; /* suficiente para el menú */
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px) {

  /* Header más compacto */
  .fc-header-inner {
    padding: 12px 16px;
  }

  /* Iconos un poco más grandes para dedo */
  .fc-right img,
  .fc-home img {
    width: 24px;
    height: 24px;
  }

  /* Menú móvil */
  .fc-mobile-menu a {
    font-size: 16px;
    padding: 14px 0;
    letter-spacing: 1px;
  }

  /* Botón hamburguesa */
  .fc-burger {
    width: 36px;
    height: 30px;
  }

  .fc-burger span {
    height: 2px;
    margin: 5px 0;
  }

  /* Ocultar menú desktop */
  .fc-nav-desktop {
    display: none;
  }
}
/* HEADER SCROLL */
.fc-header {
  transition: padding 0.3s ease, background 0.3s ease;
}

body.fc-header-small .fc-header {
  padding: 4px 0;
}

/* Ajustes internos al encoger */
body.fc-header-small .fc-header-inner {
  padding: 8px 24px;
}

/* Iconos más pequeños al bajar */
body.fc-header-small .fc-right img,
body.fc-header-small .fc-home img {
  width: 20px;
  height: 20px;
}

/* Hamburguesa más compacta */
body.fc-header-small .fc-burger {
  transform: scale(0.9);
}
/* PARTIDOS */
.fc-matches {
  padding: 60px 40px;
}

.fc-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.fc-match-card {
  background: #ffffff;
  color: #000;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.fc-match-teams {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
}

.fc-match-teams strong {
  color: #0b7e42;
}

.fc-match-date {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.7;
}
body {
  background-color: #002f1e;
}
body {
  background-color: #002f1e;
  color: #ffffff;
}
/* TEXTURA SUAVE CDP (sobre el verde oficial) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* 2 capas: grano + patrón diagonal sutil */
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.04), transparent 60%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 2px,
      transparent 2px,
      transparent 12px
    );

  opacity: 0.68;
  mix-blend-mode: overlay;
}

.fc-header {
  background-color:rgba(14, 17, 19, 0);
}
.hero-overlay {
  background: rgba(0, 0, 0, 0.65);
}
.hero-content h1 {
  color: #c4161c;
}

.hero-content span {
  color: #ffffff;
}
.fc-matches {
  background-color: #002f1e;
}
.fc-match-teams strong {
  color: #c4161c;
}
/* CALENDARIO CDP (estilo app resultados) */
.cdp-calendar {
  max-width: 980px;
  margin: 0 auto;
  padding: 60px 16px;
}

.cdp-calendar-title {
  text-align: center;
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0 0 30px;
}

.cdp-calendar-list {
  background: rgba(14,17,19,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}

.cdp-match-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

.cdp-match-row:last-child {
  border-bottom: none;
}

.cdp-match-left {
  opacity: 0.9;
}

.cdp-match-date {
  font-weight: 700;
}

.cdp-match-time {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.cdp-match-mid {
  display: grid;
  gap: 6px;
}

.cdp-match-team {
  font-size: 15px;
  opacity: 0.9;
}

.cdp-team-strong {
  font-weight: 800;
  opacity: 1;
}

.cdp-match-right {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.cdp-match-score {
  font-weight: 800;
  font-size: 16px;
}

.cdp-upcoming {
  opacity: 0.65;
}

.cdp-match-badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
}

.cdp-W { background: #2ecc71; color: #0e1113; }
.cdp-D { background: #9aa0a6; color: #0e1113; }
.cdp-L { background: #c4161c; color: #fff; }

.cdp-match-star {
  font-size: 20px;
  opacity: 0.5;
}

/* móvil */
@media (max-width: 640px) {
  .cdp-match-row {
    grid-template-columns: 92px 1fr 86px;
    padding: 12px;
  }
  .cdp-calendar-title {
    font-size: 30px;
  }
  .cdp-match-team {
    font-size: 14px;
  }
}
.cdp-pens{
  font-size: 12px;
  opacity: .75;
  font-weight: 700;
  margin-left: 6px;
}
.cdp-calendar {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 20px;
  color: white;
}

.cdp-calendar-title {
  text-align: center;
  font-size: 36px;
  margin-bottom: 40px;
}

.cdp-match {
  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.cdp-match-date {
  display: flex;
  justify-content: space-between;
  opacity: 0.8;
  font-size: 14px;
}

.cdp-match-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin: 10px 0;
}

.cdp-match-status {
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

.cdp-match-status.finished {
  color: #7CFFB2;
}

.cdp-match-status.upcoming {
  color: #FFD966;
}
.cdp-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cdp-teams {
  display: grid;
  grid-template-columns: 1fr 100px 1fr; /* 🔑 CLAVE */
  align-items: center;
}

.cdp-teams .team.home {
  text-align: left;
}

.cdp-teams .team.away {
  text-align: right;
}

.cdp-score {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}
.cdp-score {
  color:rgb(255, 0, 0); /* verde marcador */
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.cdp-next2-outside{
  margin-top: -60px;     /* sube para que “pise” el hero */
  padding: 0 40px 40px;  /* espacio lateral + abajo */
  position: relative;
  z-index: 5;            /* por encima del hero */
}

.cdp-next2{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cdp-next2-card{
  background: rgba(255,255,255,0.95);
  color: #0b0b0b;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.cdp-next2-top{
  display:flex;
  justify-content: center;
  gap: 14px;
  font-weight: 800;
  opacity: .9;
  margin-bottom: 10px;
}

.cdp-next2-teams{
  display:flex;
  justify-content: center;
  gap: 14px;
  font-weight: 900;
  font-size: 18px;
  text-align: center;
}

.cdp-next2-vs{
  opacity: .6;
  font-weight: 900;
}

.cdp-next2-comp{
  margin-top: 10px;
  text-align:center;
  font-weight: 900;
  color: #0c8a47;
  font-size: 13px;
}

@media (max-width: 900px){
  .cdp-next2-outside{ margin-top: -35px; padding: 0 16px 26px; }
  .cdp-next2{ grid-template-columns: 1fr; }
}
/* BOTÓN CALENDARI COMPLET */
.cdp-calendar-button-wrapper{
  display: flex;
  justify-content: center;
  margin-top: -10px;  /* ⬆️ se mete debajo de los partidos */
  margin-bottom: 90px;
  position: relative;
  z-index: 10;
}


.cdp-calendar-button{
  background: #0b2f1d;
  color:rgb(255, 255, 255);
  padding: 18px 42px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  transition: all .25s ease;
}

.cdp-calendar-button:hover{
  transform: translateY(-4px);
}

.cdp-calendar-button-arrow{
  font-size: 22px;
}
/* Wrapper */
.cdp-badge-sticky-wrap{
  position: relative;
  height: 1px;
  z-index: 999;
}

/* Sticky container */
.cdp-badge-sticky{
  position: sticky;
  top: var(--cdp-badge-top, 30px);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

/* Rectángulo full width y fino */
.cdp-badge-rect{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;              /* TODO el ancho */
  height: 90px;              /* <- altura fina (ajústala) */
  background:rgb(0, 0, 0);       /* mismo color que header */
}

/* Escudo centrado */
.cdp-badge-logo{
  position: relative;
  margin-top: 10px;
  width: var(--cdp-badge-logo, 90px);
  height: auto;
  z-index: 2;
}
/* Barra del escudo siempre visible */
.cdp-badge-sticky{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  pointer-events: none; /* no molesta al clicar */
}

/* Rectángulo fino a todo el ancho */
.cdp-badge-rect{
  width: 100%;
  height: 70px;              /* FINITO: ajusta 60-80 */
  background:rgb(0, 0, 0);       /* MISMO color que header (cámbialo si tu header es otro) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tamaño del escudo */
.cdp-badge-rect img{
  height: 44px;              /* ajusta */
  width: auto;
  display: block;
}
:root{
  --header-h: 90px; /* <-- AJUSTA: altura del header */
  --badge-h: 70px;  /* altura de la barra */
}

/* contenedor que sigue al scroll */
.cdp-badge-sticky{
  position: sticky;
  top: var(--header-h);     /* debajo del header */
  z-index: 9999;
  width: 100%;
}

/* barra a todo el ancho y finita */
.cdp-badge-rect{
  width: 100%;
  height: var(--badge-h);
  background:rgb(0, 0, 0);      /* color header */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* escudo */
.cdp-badge-rect img{
  height: 44px;
  width: auto;
  display: block;
}

/* evita que el hero se meta debajo del sticky (opcional pero recomendado) */
.hero-futbol,
.cdp-hero,
.hero{
  scroll-margin-top: calc(var(--header-h) + var(--badge-h));
}
.shopify-section,
main,
.template-index {
  overflow: visible !important;
}
.cdp-hero,
.hero-futbol {
  overflow: visible !important;
}
.cdp-badge-sticky {
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}


.hero-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-slider {
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 5;
}
.hero-futbol {
  position: relative;
  height: 90vh;
  overflow: hidden;
}

/* SLIDER */
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-slide.active {
  opacity: 1;
}

/* OVERLAY */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2;
}

/* TEXTO */
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 768px) {

  /* altura más controlada */
  .hero-futbol {
    height: 70vh;
    min-height: 480px;
  }

  /* evita que corte demasiado la imagen */
  .hero-slide {
    background-position: center top;
  }

  /* título principal */
  .hero-content h1 {
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  /* subtítulo */
  .hero-content span {
    font-size: 14px;
    letter-spacing: 0.08em;
    max-width: 280px;
    display: block;
    margin: 0 auto;
  }

  /* si usas overlay */
  .hero-overlay {
    background: rgba(0, 0, 0, 0.45);
  }
}
/* === CDP STANDINGS === */
.cdp-standings {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.cdp-title {
  text-align: center;
  color: #0b3d2e;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.cdp-table-wrapper {
  overflow-x: auto;
}

.cdp-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.cdp-table thead {
  background: #0b3d2e;
  color: #ffffff;
}

.cdp-table th,
.cdp-table td {
  padding: 10px 8px;
  text-align: center;
  font-size: 14px;
}

.cdp-table tbody tr:nth-child(even) {
  background: #f4f4f4;
}

.cdp-table tbody tr:hover {
  background: rgba(11, 61, 46, 0.1);
}

.cdp-table .team-name {
  text-align: left;
  font-weight: 600;
}

.cdp-table .points {
  font-weight: 900;
  color: #c4161c;
}

/* Mobile */
@media (max-width: 768px) {
  .cdp-table th,
  .cdp-table td {
    font-size: 12px;
    padding: 8px 6px;
  }
}
/* Centrar título de la página Classificació */
.template-page .page-title,
.template-page h1 {
  text-align: center;
}
/* ===== CDP STANDINGS – MEJOR CONTRASTE ===== */

.cdp-table {
  background: #ffffff;
  color: #0b3d2e;
}

.cdp-table thead {
  background: #0b3d2e;
  color: #ffffff;
}

.cdp-table th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.cdp-table tbody tr {
  background: #ffffff;
}

.cdp-table tbody tr:nth-child(even) {
  background: #f1f5f3;
}

.cdp-table tbody td {
  color: #0b3d2e;
  font-weight: 500;
}

/* Nombre del equipo */
.cdp-table .team-name {
  font-weight: 700;
  color: #0b3d2e;
}

/* Columna puntos */
.cdp-table .points {
  font-weight: 900;
  color: #c4161c;
  font-size: 15px;
}

/* Hover */
.cdp-table tbody tr:hover {
  background: rgba(11, 61, 46, 0.12);
}
/* === OCULTAR TITULO AUTOMATICO DE PAGINA (HEADER FC) === */
.header-fc .page-title,
.header-fc h1,
.header-fc .page-title-wrapper,
.header-fc .title,
.header-fc .page-heading {
  display: none !important;
}
/* === TITULO CENTRAL CLASSIFICACIÓ EN BLANCO === */
.cdp-title {
  color: #ffffff !important;
}
.cdp-standings h1 {
  color: #ffffff !important;
  text-align: center;
}
/* === BOTON CLASSIFICACIO HOME === */
.cdp-standings-cta {
  text-align: center;
  margin-top: 30px;
}

.cdp-btn {
  display: inline-block;
  background: #0b3d2e;
  color:rgb(255, 255, 255);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}

.cdp-btn:hover {
  background: #0b3d2e;
}
/* === HOVER MENU HEADER FC === */
.header-fc a:hover,
.header-fc nav a:hover,
.header-fc .menu a:hover {
  color: #c4161c !important;
}
/* Suavizar hover */
.header-fc a {
  transition: color 0.2s ease;
}
/* === HEADER FC HOVER ROJO CDP (FORZADO) === */

/* Texto del menú */
.header-fc a,
.header-fc span,
.header-fc .menu-item,
.header-fc .menu__item,
.header-fc .header__menu-item {
  transition: color 0.2s ease;
}

/* Hover */
.header-fc a:hover,
.header-fc span:hover,
.header-fc .menu-item:hover,
.header-fc .menu__item:hover,
.header-fc .header__menu-item:hover {
  color: #c4161c !important;
}
/* Hover cuando el color viene heredado */
.header-fc li:hover > a,
.header-fc li:hover > span {
  color: #c4161c !important;
}
/* === INSTAGRAM HOME === */
.cdp-instagram {
  margin-top: 60px;
  text-align: center;
}

.cdp-instagram .cdp-title {
  color:rgb(0, 0, 0);
  margin-bottom: 30px;
}

.cdp-instagram-embed {
  display: flex;
  justify-content: center;
}
/* === GALERIA FOTOS HOME === */
.cdp-photos {
  margin-top: 70px;
  text-align: center;
}

.cdp-photos .cdp-title {
  color: #ffffff;
  margin-bottom: 30px;
}

.cdp-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.cdp-photo-item {
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.cdp-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cdp-photo-item:hover img {
  transform: scale(1.05);
}
/* === FONDO HOME DEFINITIVO === */
#cdp-home-bg {
  position: fixed;
  inset: 0;
  z-index: -999;

  background-image:
    linear-gradient(
      rgb(0, 0, 0),
      rgba(0, 0, 0, 0.65)
    ),
    url('/cdn/shop/t/6/assets/home-bg.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Quitamos color de fondo visible */
.template-index {
  background: transparent !important;
}
/* === HEADER TRANSPARENTE EN HOME === */
.template-index .header-fc {
  background: transparent !important;
  box-shadow: none !important;
}
.template-index .header-fc,
.template-index .header-fc * {
  background-color: transparent !important;
}

.menu-item.has-submenu:hover .submenu {
  display: block;
}
.menu-item.has-submenu > a {
  cursor: default;
}
.header-menu {
  display: flex;
  align-items: center;
  gap: 30px;
}

.menu-item {
  position: relative;
  list-style: none;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu-arrow {
  font-size: 0.7em;
  opacity: 0.7;
}

/* desplegable */
.cdp-megamenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #0b3d2e;
  padding: 35px 50px;
  gap: 70px;
  z-index: 999;
}

.menu-item.has-submenu:hover .cdp-megamenu {
  display: flex;
}
/* RESET COLOR LINKS HEADER */
.header-menu a,
.header-menu a:visited {
  color: #ffffff;
  text-decoration: none;
}

.header-menu a:hover {
  color: #ffffff;
}
.header-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-menu a {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* iconos derecha */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-actions a {
  color: #ffffff;
}
.menu-arrow {
  font-size: 0.65em;
  margin-left: 4px;
  opacity: 0.8;
}
/* CONTENEDOR GENERAL */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}

/* MENÚ IZQUIERDA */
.header-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* REDES DERECHA */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ICONOS */
.header-actions a {
  color: #ffffff;
  font-size: 16px;
}

.header-actions a:hover {
  color: #e30613; /* rojo CDP */
}
.fc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 32px;
}

/* MENÚ IZQUIERDA */
.fc-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ESCUDO CENTRO */
.fc-logo img {
  height: 42px;
}

/* ICONOS DERECHA */
.fc-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto; /* 🔑 fuerza a ir al extremo */
}

.fc-right img {
  height: 18px;
  width: auto;
}
/* =========================
   HEADER RESPONSIVE
   ========================= */

/* Por defecto (desktop) */
.header-menu {
  display: flex;
}

/* MÓVIL */
@media (max-width: 1024px) {

  /* Ocultar menú desktop */
  .header-menu {
    display: none !important;
  }

  /* Mostrar hamburguesa */
  .fc-burger {
    display: flex !important;
  }

  /* Alinear header */
  .fc-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

}
/* =========================
   HAMBURGUESA
   ========================= */

.fc-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

.fc-burger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

/* =========================
   MENÚ MÓVIL
   ========================= */

.fc-mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  background: #000;
  padding: 80px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: right 0.3s ease;
  z-index: 9999;
}

.fc-mobile-menu a,
.fc-mobile-menu button {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  padding: 8px 0;
}

/* Mostrar menú */
.fc-mobile-menu.active {
  right: 0;
}

/* =========================
   SUBMENÚ EQUIPS (MÓVIL)
   ========================= */

.mobile-item .mobile-submenu {
  display: none;
  padding-left: 12px;
}

.mobile-item.open .mobile-submenu {
  display: block;
}

.mobile-submenu a {
  font-size: 16px;
  opacity: 0.85;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1024px) {

  .header-menu {
    display: none !important;
  }

  .fc-burger {
    display: flex;
  }

}
/* MENÚ MÓVIL */
.fc-mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  background: #000;
  padding: 90px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: right .3s ease;
  z-index: 9999;
}

.fc-mobile-menu.active {
  right: 0;
}

.fc-mobile-menu a,
.mobile-toggle {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
}

.mobile-toggle {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-submenu {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
}

.mobile-submenu.open {
  display: flex;
}

.mobile-submenu strong {
  margin-top: 12px;
  font-size: 14px;
  opacity: .7;
}
#fcMobileMenu {
  right: 0 !important;
  background: red !important;
}
/* ===== MOBILE HEADER ===== */
@media (max-width: 900px) {

  /* Ocultar menú desktop */
  .header-menu {
    display: none !important;
  }

  /* Mostrar hamburguesa */
  .fc-burger {
    display: flex !important;
  }

  /* Asegurar que se vea bien */
  .fc-burger span {
    width: 26px;
    height: 2px;
    background: white;
    display: block;
  }

}
/* Desktop */
.fc-burger {
  display: none;
}
.fc-mobile-menu {
  display: none;
}

body.fc-menu-open .fc-mobile-menu {
  display: block;
}
.fc-burger {
  border: 1px solid red;
}
.fc-burger {
  border: 1px solid red;
}
/* Header layout */
.fc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Botón hamburguesa */
.fc-burger {
  display: none;
  background: none;
  border: 0;
  margin-left: 12px;
  cursor: pointer;
}

/* Solo móvil */
@media (max-width: 900px) {
  .fc-burger {
    display: block;
  }

  .header-menu {
    display: none;
  }
}
.fc-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  color: #fff;
  padding: 90px 20px 20px;
  display: none;
  z-index: 9999;
}

.fc-mobile-menu.active {
  display: block;
}
.fc-mobile-menu {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  padding: 90px 20px 20px;
  display: none;
  z-index: 9999;
}

.fc-mobile-menu.active {
  display: block;
}
/* BOTÓN HAMBURGUESA */
.fc-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}

.fc-burger span {
  width: 26px;
  height: 3px;
  background: white;
}

/* MENÚ MÓVIL */
.fc-mobile-menu {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  padding: 90px 20px;
  display: none;
  z-index: 99999;
}

.fc-mobile-menu a,
.fc-mobile-menu button {
  display: block;
  color: white;
  text-decoration: none;
  font-size: 18px;
  margin-bottom: 16px;
  background: none;
  border: 0;
  text-align: left;
}

.mobile-submenu {
  display: none;
  padding-left: 15px;
}

.mobile-submenu.open {
  display: block;
}

/* SOLO MÓVIL */
@media (max-width: 900px) {
  .fc-burger {
    display: flex;
  }
}
.fc-mobile-menu {
  display: none;
}

.fc-mobile-menu.open {
  display: block;
}
/* =========================
   MENÚ MÓVIL
========================= */

.fc-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  padding: 90px 20px 20px;
  z-index: 9999;
}

.fc-mobile-menu.open {
  display: block;
}

/* Submenú EQUIPS */
.mobile-submenu {
  display: none;
  margin-left: 15px;
}

.mobile-submenu.open {
  display: block;
}

/* Hamburguesa */
.fc-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.fc-burger span {
  display: block;
  width: 26px;
  height: 3px;
  background: white;
  margin: 5px 0;
}

/* Solo móvil */
@media (max-width: 900px) {
  .fc-burger {
    display: block;
  }

  .header-menu {
    display: none;
  }
}
.fc-mobile-menu {
  position: fixed;
  inset: 0;
  background: black;
  color: white;
  padding: 100px 20px;
  z-index: 99999;
}

@media (max-width: 900px) {
  .header-menu {
    display: none;
  }

  .fc-burger {
    display: block;
    background: none;
    border: 0;
  }
}
.cdp-botiga {
  padding: 80px 5%;
  background:rgb(0, 0, 0);
  background-image: url("home-bg"); /* opcional */
}

.cdp-botiga-header {
  text-align: center;
  margin-bottom: 60px;
}

.cdp-botiga-header h1 {
  color: white;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 2px;
}

.cdp-botiga-header .subtitle {
  color: #ffd400;
  font-weight: 700;
  margin-top: 10px;
}

.cdp-botiga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.cdp-product-card {
  background:rgb(0, 0, 0);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cdp-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

.cdp-product-image {
  height: 380px;
  background-size: cover;
  background-position: center;
}

.cdp-product-info {
  padding: 24px;
  text-align: center;
}

.cdp-product-info h3 {
  color: white;
  font-size: 20px;
  margin-bottom: 10px;
}

.cdp-product-info .price {
  color: white;
  font-size: 18px;
  font-weight: 700;
}
.botiga-products {
  padding: 80px 40px;
}

.botiga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  max-width: 600px;
  margin: 2 auto;
}

.botiga-card {
  background:rgb(12, 12, 12);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: white;
  transition: transform .25s ease, box-shadow .25s ease;
}

.botiga-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgb(0, 0, 0);
}

.botiga-image img {
  width: 35%;
  height: auto;
  display: block;
}

.botiga-info {
  padding: 24px;
  text-align: center;
}

.botiga-info h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.botiga-price {
  font-size: 18px;
  font-weight: bold;
}
/* Card sin fondo grande */
.botiga-card {
  background: transparent;
  box-shadow: none;
}

/* Rectángulo negro MÁS PEQUEÑO */
.botiga-image {
  background: #000;
  padding: 10px;          /* ↓ menos padding */
  border-radius: 12px;
  margin: 20 20px;         /* ↓ rectángulo más estrecho */
  display: flex;
  justify-content: center;
}

/* Imagen MÁS PEQUEÑA */
.botiga-image img {
  width: 160px;           /* ↓ tamaño imagen */
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}/* Contenedor de la imagen (rectángulo negro) */
.botiga-image {
  background: #000;
  padding: 12px;
  border-radius: 14px;

  max-width: 200px;   /* 👈 CLAVE: acorta el rectángulo */
  margin: 0 auto;     /* lo centra */
}
@media (max-width: 768px) {
  .botiga-image {
    max-width: 260px;
    padding: 10px;
  }
}
.botiga-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 👈 izquierda */
}
.botiga-grid {
  display: flex;
  justify-content: flex-start; /* 👈 izquierda */
}
.cdp-card-button {
  all: unset;
  cursor: pointer;
  display: block;
  text-align: left;
  color: white;
}

.cdp-card-button img {
  width: 100%;
  border-radius: 12px;
}

.cdp-card-button h3 {
  margin: 12px 0 4px;
}

.cdp-price {
  font-weight: bold;
}

/* JUGADORES */
.primer-equip {
  padding: 60px 0;
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.player-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.player-name {
  color: #0b3d2e;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.player-position {
  color: #e10600;
  font-size: 12px;
  font-weight: 700;
}

.player-stats {
  color: #0b3d2e;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.player-stats li {
  color: #0b3d2e;
  font-size: 14px;
  margin-bottom: 6px;
}

.player-image {
  position: relative;
}

.player-image img {
  max-height: 180px;
}

.player-number {
  position: absolute;
  right: -10px;
  bottom: 0;
  font-size: 64px;
  font-weight: 800;
  color: #003087;
  opacity: 0.15;
}
.primer-equip-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: visible; /* CLAVE */
}

.primer-equip-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
}

.primer-equip-slider::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1024px) {
  .primer-equip-slide {
    flex: 0 0 50%;
  }
}

@media (max-width: 768px) {
  .primer-equip-slide {
    flex: 0 0 100%;
  }
}
.player-card {
  background: #fff;
  min-height: 260px;
  width: 100%;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: #fff;
}

.slider-arrow.prev {
  left: -24px;
}

.slider-arrow.next {
  right: -24px;
}
.primer-equip-slider {
  padding-left: 24px;
  padding-right: 80px; /* aire final */
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all .2s ease;
}

.slider-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

.slider-arrow.prev {
  left: 8px;
}

.slider-arrow.next {
  right: 24px; /* invade la última card */
}
.primer-equip .slider-arrow {
  opacity: 0;
}

.primer-equip:hover .slider-arrow {
  opacity: 1;
}
.primer-equip .section-title {
  text-align: center;
  margin-bottom: 40px;
}
.primer-equip .section-title {
  text-align: center;
  letter-spacing: 2px;
  font-weight: 800;
}
.player-image img {
  max-height: 260px;
}
.player-image {
  display: flex;
  align-items: flex-end;
}

.primer-equip .page-width {
  overflow: visible;
}
.primer-equip-slider {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-right: 80px;
}

.primer-equip-slider::-webkit-scrollbar {
  display: none;
}

.primer-equip-slide {
  flex: 0 0 32%;
}
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.primer-equip-slider-wrapper').forEach(wrapper => {
    const slider = wrapper.querySelector('.primer-equip-slider');
    const nextBtn = wrapper.querySelector('.slider-arrow.next');
    const prevBtn = wrapper.querySelector('.slider-arrow.prev');

    if (!slider || !nextBtn || !prevBtn) return;

    nextBtn.addEventListener('click', () => {
      slider.scrollBy({
        left: slider.clientWidth,
        behavior: 'smooth'
      });
    });

    prevBtn.addEventListener('click', () => {
      slider.scrollBy({
        left: -slider.clientWidth,
        behavior: 'smooth'
      });
    });
  });
});
.primer-equip .page-width {
  overflow: visible;
}
.primer-equip-slider{
  display:flex;
  gap:32px;
  overflow-x:auto !important;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-right:80px;
}

.primer-equip-slide{
  flex:0 0 32%;
}

.primer-equip-slider::-webkit-scrollbar{ display:none; }
(function () {
  function initPrimerEquip(root) {
    const wrappers = (root || document).querySelectorAll('.primer-equip-slider-wrapper');

    wrappers.forEach((wrapper) => {
      // Evita duplicar listeners si Shopify recarga la sección
      if (wrapper.dataset.peInit === '1') return;
      wrapper.dataset.peInit = '1';

      const slider = wrapper.querySelector('.primer-equip-slider');
      const nextBtn = wrapper.querySelector('.slider-arrow.next');
      const prevBtn = wrapper.querySelector('.slider-arrow.prev');

      if (!slider || !nextBtn || !prevBtn) return;

      const scrollAmount = () => Math.max(slider.clientWidth, 300);

      nextBtn.addEventListener('click', (e) => {
        e.preventDefault();
        slider.scrollBy({ left: scrollAmount(), behavior: 'smooth' });
      });

      prevBtn.addEventListener('click', (e) => {
        e.preventDefault();
        slider.scrollBy({ left: -scrollAmount(), behavior: 'smooth' });
      });
    });
  }

  // 1) Carga normal
  document.addEventListener('DOMContentLoaded', () => initPrimerEquip(document));

  // 2) Shopify Theme Editor (cuando recargas secciones sin refresh)
  document.addEventListener('shopify:section:load', (event) => initPrimerEquip(event.target));
  document.addEventListener('shopify:section:reorder', () => initPrimerEquip(document));
})();
.slider-arrow{
  pointer-events:auto !important;
}
.slider-arrow {
  pointer-events: auto;
  z-index: 20;
}
(function () {

  function initPrimerEquip() {
    const wrappers = document.querySelectorAll('.primer-equip-slider-wrapper');

    wrappers.forEach(wrapper => {
      const slider = wrapper.querySelector('.primer-equip-slider');
      const next = wrapper.querySelector('.slider-arrow.next');
      const prev = wrapper.querySelector('.slider-arrow.prev');

      if (!slider || !next || !prev) return;

      // Evita duplicar listeners
      if (wrapper.dataset.ready === 'true') return;
      wrapper.dataset.ready = 'true';

      const getSlideWidth = () => {
        const slide = slider.querySelector('.primer-equip-slide');
        if (!slide) return slider.clientWidth;
        const gap = parseInt(getComputedStyle(slider).gap) || 0;
        return slide.offsetWidth + gap;
      };

      next.addEventListener('click', (e) => {
        e.preventDefault();
        slider.scrollBy({
          left: getSlideWidth(),
          behavior: 'smooth'
        });
      });

      prev.addEventListener('click', (e) => {
        e.preventDefault();
        slider.scrollBy({
          left: -getSlideWidth(),
          behavior: 'smooth'
        });
      });
    });
  }

  // Carga normal
  document.addEventListener('DOMContentLoaded', initPrimerEquip);

  // Shopify editor (MUY IMPORTANTE)
  document.addEventListener('shopify:section:load', initPrimerEquip);

})();
.primer-equip-slider-wrapper {
  position: relative;
}

.primer-equip-slider {
  position: relative;
  z-index: 1;
}
