/* Desarrollado por BorseWB · 2026 */

/* Identidad del club: tipografías (Oswald y Barlow), colores y portada con foto.
   Va la última y ajusta lo definido en site.css y motion.css. */

/* ---------- Tipografía general ---------- */
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3,
.squad-card-title,
.location-card-title {
  font-family: var(--font-display);
}

h2 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

h3 { font-weight: 600; letter-spacing: .01em; }

.kicker {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green);
}

/* ---------- Cabecera ---------- */
header {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
body.menu-open header {
  background: color-mix(in srgb, var(--bg) 98%, transparent);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.05;
}
.brand-name small {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}
.brand-logo { filter: none; }

.navlinks a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
}
.nav-cta {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.nav-cta:hover, .nav-cta.active {
  background: color-mix(in srgb, var(--red) 86%, #000) !important;
  box-shadow: none !important;
}

/* ---------- Botones ---------- */
.btn {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  box-shadow: none;
}
.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: none;
}
.btn-red:hover {
  background: color-mix(in srgb, var(--red) 86%, #000);
  border-color: color-mix(in srgb, var(--red) 86%, #000);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--text) 60%, transparent);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);

  /* Oscurecido sobre la foto: % de color de fondo a la izquierda y a la derecha */
  --shade-l: 86%;
  --shade-r: 42%;
  --focus: center center;
}
@supports (height: 100svh) { .hero { min-height: 100svh; } }
.hero::after { content: none; }

.hero[data-shade="suave"]  { --shade-l: 78%; --shade-r: 28%; }
.hero[data-shade="medio"]  { --shade-l: 86%; --shade-r: 42%; }
.hero[data-shade="fuerte"] { --shade-l: 92%; --shade-r: 62%; }

.hero[data-focus="top"]    { --focus: center 22%; }
.hero[data-focus="center"] { --focus: center center; }
.hero[data-focus="bottom"] { --focus: center 78%; }

/* Sin foto: césped segado en franjas, como un campo de verdad. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* La foto, las franjas y el oscurecido se desvanecen hasta el color de fondo de la página:
     así no hay línea de corte con «Nuestras categorías». */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--green-dark) 20%, var(--bg)) 0 8vw,
      color-mix(in srgb, var(--green-dark) 12%, var(--bg)) 8vw 16vw);
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
  opacity: 0;
  transition: opacity .9s var(--ease, ease);
}
.hero-photo.is-loaded { opacity: 1; }

/* Degradado oscuro suave para que el texto se lea sobre cualquier foto */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 21, 16, .86) 0%, rgba(13, 21, 16, .42) 100%),
    linear-gradient(0deg, rgba(13, 21, 16, 1) 0%, rgba(13, 21, 16, .88) 14%, rgba(13, 21, 16, 0) 48%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--bg) var(--shade-l), transparent) 0%,
      color-mix(in srgb, var(--bg) var(--shade-r), transparent) 100%),
    linear-gradient(0deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 14%,
      transparent 48%);
}

.hero-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "title title"
    "body  board";
  align-items: end;
  column-gap: 56px;
  padding: 72px 0 56px;
  align-content: end;
}

.hero-content { display: contents; }

.hero-title {
  grid-area: title;
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.6vw, 100px);
  line-height: .94;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}
.hero .hero-title { letter-spacing: .005em; }
.hero-line { display: block; }
.hero-line + .hero-line { margin-top: .04em; }

.hero-lead {
  grid-area: body;
  align-self: start;
  max-width: 36em;
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text) 90%, transparent);
}

.hero-actions,
.hero-notice { grid-column: 1; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-notice {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--red);
  max-width: 34em;
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
.hero-notice:empty { display: none; }

/* Entrada: una sola secuencia al cargar (titular → texto → botones) */
.hero-content > * { animation: rise 1s var(--ease, ease) both; }
.hero-content > .hero-title { animation-delay: .05s; }
.hero-content > .hero-lead { animation-delay: .2s; }
.hero-content > .hero-actions { animation-delay: .32s; }
.hero-content > .hero-notice { animation-delay: .42s; }

/* ---------- Marcador: últimos resultados / fotos ---------- */
.hero-board {
  grid-area: board;
  grid-row: 2 / span 3;
  align-self: end;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-top: 3px solid var(--green);
  border-radius: 4px;
  padding: 18px 20px 14px;
}
.hero-board[hidden] { display: none; }

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.board-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
}
.board-head a {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.board-head a:hover { text-decoration: underline; text-underline-offset: 3px; }

.results { list-style: none; margin: 0; padding: 0; }
.result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.result:first-child { border-top: 0; }
.result-team {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
}
.result-meta {
  grid-column: 1;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 2px;
}
.result-score {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.result-tag {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--bg);
  background: var(--muted);
}
.result[data-outcome="win"] .result-tag  { background: var(--green); }
.result[data-outcome="loss"] .result-tag { background: var(--red); color: #fff; }

.board-note {
  margin: 10px 0 2px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Banda inferior: cuerpo técnico y sedes ---------- */
.hero-bar {
  background: transparent;
  border-top: 0;
}
.hero-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding: 18px 0;
  flex-wrap: wrap;
}

.hero-staff {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.hero-staff[hidden] { display: none; }
/* Carrusel infinito de caras del cuerpo técnico */
.staff-carousel {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.staff-track {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
}
.staff-track.is-moving {
  animation: staff-scroll calc(var(--staff-count, 10) * 2.8s) linear infinite;
}
.hero-staff:hover .staff-track,
.hero-staff:focus-visible .staff-track { animation-play-state: paused; }
.staff-track li {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin-right: 10px; /* margen (no gap) para que las dos mitades midan exactamente lo mismo */
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
  overflow: hidden;
  background: var(--card);
}
.staff-track img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
@keyframes staff-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .staff-track.is-moving { animation: none !important; }
}

.staff-text {
  font-size: 15.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.staff-text b {
  color: var(--text);
  font-weight: 700;
}
.staff-link {
  display: inline-block;
  margin-left: 4px;
  white-space: nowrap;
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.hero-staff:hover .staff-link { color: var(--text); }

.hero .hero-venues {
  max-width: none;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.hero-venues a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent);
  text-underline-offset: 3px;
}
.hero-venues a:hover { text-decoration-color: var(--green); color: var(--green); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    padding: 56px 0 40px;
    align-content: end;
  }
  .hero-title, .hero-lead, .hero-board { grid-area: auto; grid-column: 1; grid-row: auto; }
  .hero-board { margin-top: 36px; max-width: 520px; }
  .hero-media::after {
    background: linear-gradient(180deg, rgba(13, 21, 16, .5) 0%, rgba(13, 21, 16, .9) 55%, rgba(13, 21, 16, .96) 100%);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) var(--shade-r), transparent) 0%,
      color-mix(in srgb, var(--bg) var(--shade-l), transparent) 55%,
      color-mix(in srgb, var(--bg) 96%, transparent) 100%);
  }
}

@media (max-width: 640px) {
  .hero { padding-top: 70px; }
  .hero-main { padding: 44px 0 32px; }
  .hero-title { font-size: clamp(38px, 11.5vw, 60px); margin-bottom: 20px; }
  .hero-lead { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-bar-inner { flex-direction: column; align-items: flex-start; }
  .hero-staff { flex-direction: column; align-items: flex-start; gap: 10px; }
  .staff-carousel { width: 100%; }
  .staff-track li { width: 42px; height: 42px; margin-right: 8px; }
  .result-score { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { transition: none; }
}

/* =====================================================================
   1) Carrusel «En el campo» (portada)
   Mismo comportamiento que el slider de entrenadores (.staff-track):
   cinta continua y lineal, 2,8 s por foto, reutilizando @keyframes staff-scroll,
   con pausa al pasar el ratón. Las fotos no tienen ningún efecto al hacer hover.
   ===================================================================== */
.board-carousel {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
/* Con 3 fotos o menos caben todas: sin cinta ni difuminado en los bordes. */
.board-carousel:not(.is-moving) { -webkit-mask-image: none; mask-image: none; }

.board-track {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
}
.board-carousel.is-moving .board-track {
  animation: staff-scroll calc(var(--board-count, 6) * 2.8s) linear infinite;
}
/* Pausa al pasar el ratón o al navegar con teclado, igual que el slider de entrenadores. */
.board-carousel:hover .board-track,
.board-carousel:focus-within .board-track { animation-play-state: paused; }

.board-track li {
  flex: 0 0 auto;
  width: 104px;
  margin-right: 6px; /* margen (no gap) para que las dos mitades midan exactamente lo mismo */
}

.board-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--card);
  cursor: zoom-in;
}
.board-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* Foto completamente estática al pasar el ratón: anula cualquier transform/scale/transición heredada. */
.board-tile,
.board-tile:hover,
.board-tile img,
.board-tile:hover img {
  transform: none !important;
  scale: none !important;
  translate: none !important;
  rotate: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}
.board-tile:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .board-carousel.is-moving .board-track { animation: none !important; }
}

/* =====================================================================
   2) Plantillas: cabecera de la tarjeta abierta
   Antes el título y los entrenadores iban en la misma fila y se pegaban.
   Ahora el título ocupa su propia línea, con un separador, y los
   entrenadores van debajo. Las fotos siguen a la derecha.
   ===================================================================== */
.squad-card.active .squad-card-head {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  min-height: 120px; /* Alto mínimo de las fotos, para que nunca se monten sobre el texto */
}
.squad-card.active .squad-card-title {
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  line-height: 1.1;
}
.squad-card.active .squad-card-coach {
  gap: 10px;
  max-width: none;
}
.squad-coach-name small {
  font-size: 9.5px;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .squad-card.active .squad-card-head {
    gap: 12px;
    min-height: 104px;
  }
  .squad-card.active .squad-card-title { padding-bottom: 10px; }
}

/* =====================================================================
   3) Directiva
   Grid fluido: 5 columnas en escritorio, 3 en tablet y 2 en móvil.
   ===================================================================== */
.directiva-section[hidden] { display: none; }

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

.board-member {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .35s ease, transform .35s var(--ease, ease), background .35s ease;
}
.board-member:hover {
  border-color: var(--line-active);
  background: var(--card-hover);
  transform: translateY(-3px);
}

/* Marco de la foto: fondo neutro y liso del tema oscuro, sin escudo ni marca de agua detrás. */
.board-member-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg2);
}
.board-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sin foto: iniciales sobre el mismo fondo neutro */
.board-member-initials {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--text) 35%, transparent);
}

.board-member-info {
  padding: 16px 18px 18px;
  border-top: 3px solid var(--green);
}
.board-member-name {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
}
.board-member-role {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--green);
}

@media (max-width: 1100px) {
  .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .board-member-info { padding: 12px 12px 14px; }
  .board-member-name { font-size: 16px; }
  .board-member-role { font-size: 13px; }
}

/* Con «Directiva» el menú tiene un enlace más. En escritorio se compacta un poco
   (y más en pantallas medianas) para que quepa en una línea sin pisar el logo,
   incluso si la fuente Oswald tarda en cargar. Por debajo de 1050 px ya es el menú móvil. */
@media (min-width: 1051px) {
  .navlinks { gap: 2px; padding-left: 24px; }
  .navlinks a:not(.nav-cta) { padding-left: 8px; padding-right: 8px; letter-spacing: .02em; }
}
@media (min-width: 1051px) and (max-width: 1320px) {
  .navlinks a { font-size: 13px; }
  .navlinks a:not(.nav-cta) { padding-left: 5px; padding-right: 5px; letter-spacing: 0; }
  .nav-cta { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (min-width: 1051px) and (max-width: 1200px) {
  .navlinks { padding-left: 12px; }
  .navlinks a { font-size: 12px; }
  .navlinks a:not(.nav-cta) { padding-left: 4px; padding-right: 4px; }
}
/* Si la Directiva está vacía, site-data.js oculta su enlace del menú. */
.navlinks a[hidden] { display: none !important; }