/* Desarrollado por BorseWB · 2026 */

:root {
  /* Paleta del club: noche de campo, césped, cal y el rojo/azul del balón del escudo */
  --bg: #0d1510;
  --bg2: #111c15;
  --card: #16231b;
  --card-hover: #1c2c22;
  --green: #4f9d5a;
  --green-glow: rgba(79, 157, 90, 0.28);
  --green-dark: #2f7a3f;
  --pink: #e0638a;
  --pink-glow: rgba(224, 99, 138, 0.28);
  --pink-dark: #a8395f;
  --blue-light: #5b8fd6;
  --blue-glow: rgba(91, 143, 214, 0.28);
  --red: #c42f28;
  --red-glow: rgba(196, 47, 40, 0.28);
  --text: #f3f1ea;
  --muted: #a3aea6;
  --line: rgba(243, 241, 234, 0.1);
  --line-active: rgba(79, 157, 90, 0.45);
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --radius: 10px;
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
.container { width: min(1220px, 92%); margin: auto; }

.kicker {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
}

h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -2px;
}

.intro {
  color: var(--muted);
  font-size: 15px;
  max-width: 600px;
  margin-top: 10px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1000;
  background: rgba(13, 21, 16, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  flex: 0 0 auto;
}

.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(79, 157, 90, 0.2));
  transition: var(--transition);
  border-radius: 50%;
}

.brand-name {
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  font-weight: 800;
}

.brand-name span { color: var(--green); }
.brand-name small {
  display: block;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 2px;
  margin-top: 3px;
  font-weight: 600;
}

.navlinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  padding-left: 40px;
  min-width: 0;
}

.navlinks a {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: var(--transition);
  position: relative;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.navlinks a:hover, .navlinks a.active {
  color: var(--text);
}

.navlinks a::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(79, 157, 90,0);
  border-radius: 999px;
  transform: scale(.72);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease, box-shadow .25s ease;
  pointer-events: none;
}

.navlinks a:hover::after, .navlinks a.active::after {
  border-color: rgba(79, 157, 90,.85);
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 14px rgba(79, 157, 90,.18), inset 0 0 10px rgba(79, 157, 90,.05);
}

.nav-cta {
  background: rgba(196, 47, 40, 0.1) !important;
  border: 1px solid var(--red) !important;
  padding: 8px 16px !important;
  border-radius: 100px;
  color: var(--red) !important;
  font-weight: 800 !important;
  transition: var(--transition) !important;
}

.nav-cta::after { display: block !important; border-color: rgba(196, 47, 40,0) !important; }

.nav-cta:hover::after, .nav-cta.active::after {
  border-color: rgba(196, 47, 40,.95) !important;
  transform: scale(1.04);
  opacity: 1;
  box-shadow: 0 0 16px rgba(196, 47, 40,.22), inset 0 0 10px rgba(196, 47, 40,.05);
}

.nav-cta:hover, .nav-cta.active {
  background: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px var(--red-glow);
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 19px;
  z-index: 1001;
}

.menu-toggle span {
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

.crest-wrap {
  width: 380px;
  height: 380px;
  margin: auto;
  display: grid;
  place-items: center;
  position: relative;
}

.crest-wrap::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 620px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("/D-logo.webp") center / contain no-repeat;
  opacity: 0.075;
  filter: invert(1) drop-shadow(0 0 22px rgba(79, 157, 90, 0.22));
  pointer-events: none;
  z-index: 0;
}

.brand-logo, .cat-bg-logo {
  transform-style: preserve-3d;
}

.crest-3d-container {
  width: 320px;
  height: 320px;
  position: relative;
  z-index: 2;
  perspective: 1000px;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crest-3d-container:active {
  cursor: grabbing;
}

.crest-turntable {
  width: 300px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
}

.crest-face {
  position: absolute;
  inset: 0;
  background-image: url("/Escudo.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
  border-radius: 50%;
}

.crest-front {
  transform: translateZ(1px);
}

.crest-back {
  transform: rotateY(180deg) translateZ(1px);
}

section {
  padding: 120px 0;
  position: relative;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 48px;
}

.vestimenta-section {
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vestimenta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.vestimenta-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.vestimenta-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  background: var(--card-hover);
}

.vestimenta-card.active {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(79, 157, 90, 0.15);
  background: var(--card-hover);
}

.vestimenta-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 0;
}

.vestimenta-card-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed transparent;
  display: flex;
  flex-direction: column;
}

.vestimenta-card.active .vestimenta-card-body {
  max-height: 600px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top-color: var(--line);
}

.equipacion-details-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.equipacion-details-text strong {
  color: var(--text);
}

.model-3d-container {
  width: 100%;
  height: 390px;
  background:
    radial-gradient(circle at 50% 34%, rgba(79, 157, 90,.13), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.30));
  border: 1px dashed var(--line);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  cursor: grab;
  touch-action: none;
}

.model-3d-container:active { cursor: grabbing; }

.model-3d-container::before {
  content: '';
  position: absolute;
  width: 68%;
  height: 22px;
  bottom: 47px;
  left: 16%;
  background: rgba(0,0,0,.60);
  filter: blur(16px);
  border-radius: 50%;
  pointer-events: none;
}

.model-3d-container::after {
  content: '';
  position: absolute;
  width: 62%;
  height: 1px;
  bottom: 50px;
  left: 19%;
  background: rgba(79, 157, 90,.42);
  box-shadow: 0 0 14px rgba(79, 157, 90,.25);
  pointer-events: none;
}

.kit-stage {
  width: min(330px, 92%);
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
}

.kit-turntable {
  width: 300px;
  height: 350px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
}

.kit-face {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  border-radius: 12px;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  filter: drop-shadow(0 24px 22px rgba(0,0,0,.48));
}

.kit-front {
  background-position: center;
  transform: translateZ(1px);
}

.kit-back {
  background-position: center;
  transform: rotateY(180deg) translateZ(1px);
}

.model-3d-container[data-kit="negra"] .kit-front { background-image: url("/equipacion-negra-front.webp"); }
.model-3d-container[data-kit="negra"] .kit-back { background-image: url("/equipacion-negra-back.webp"); }

.model-3d-container[data-kit="roja"] .kit-front { background-image: url("/equipacion-roja-front.webp"); }
.model-3d-container[data-kit="roja"] .kit-back { background-image: url("/equipacion-roja-back.webp"); }

.model-3d-container[data-kit="azul"] .kit-front { background-image: url("/equipacion-azul-front.webp"); }
.model-3d-container[data-kit="azul"] .kit-back { background-image: url("/equipacion-azul-back.webp"); }

.vestimenta-card.active .model-3d-container {
  border-color: var(--line-active);
  box-shadow: inset 0 0 35px rgba(79, 157, 90,.035);
}

@media (max-width: 700px) {
  .model-3d-container { height: 350px; }
  .kit-turntable { width: 280px; height: 340px; }
}

.filterbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.filter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 100px;
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: var(--transition);
}

.filter[data-filter="federado"].active, .filter[data-filter="federado"]:hover,
.filter[data-squad-filter="federado"].active, .filter[data-squad-filter="federado"]:hover {
  border-color: var(--green);
  color: #0d1510;
  background: var(--green);
  box-shadow: 0 0 20px var(--green-glow);
}

.filter[data-filter="escuela"].active, .filter[data-filter="escuela"]:hover,
.filter[data-squad-filter="escuela"].active, .filter[data-squad-filter="escuela"]:hover {
  border-color: var(--blue-light);
  color: #0d1510;
  background: var(--blue-light);
  box-shadow: 0 0 20px var(--blue-glow);
}

.filter[data-filter="femenino"].active, .filter[data-filter="femenino"]:hover,
.filter[data-squad-filter="femenino"].active, .filter[data-squad-filter="femenino"]:hover {
  border-color: var(--pink);
  color: #ffffff;
  background: var(--pink);
  box-shadow: 0 0 20px var(--pink-glow);
}

.categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.category {
  position: relative;
  min-height: 110px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #101813 0%, #080d0a 100%);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.category.active {
  transform: translateY(-8px);
  border-color: var(--green);
  background: linear-gradient(160deg, #15221b 0%, #0b120e 100%);
  box-shadow: 0 0 30px var(--green-glow);
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
}

.category h3 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1px;
  position: relative;
  z-index: 2;
  transition: var(--transition);
  color: var(--text);
}

.category.active h3 {
  font-size: 22px;
  color: var(--green);
}

/* Color de texto según la sección */
.category.federado-category h3,
.category.federado-category .cat-coach-info strong,
.category.federado-category .cat-coach {
  color: var(--green);
}

.category.escuela-category h3,
.category.escuela-category .cat-coach-info strong,
.category.escuela-category .cat-coach {
  color: var(--blue-light);
}

.category.fem-category h3,
.category.fem-category .cat-coach-info strong,
.category.fem-category .cat-coach {
  color: var(--pink);
}

.category.escuela-category.active {
  border-color: var(--blue-light);
  box-shadow: 0 0 30px var(--blue-glow);
  background: linear-gradient(160deg, #101a20 0%, #080d0a 100%);
}

.category.fem-category.active {
  border-color: var(--pink);
  box-shadow: 0 0 30px var(--pink-glow);
  background: linear-gradient(160deg, #1b1017 0%, #0b0a0d 100%);
}

.category.escuela-category .cat-coach-photo {
  border-color: rgba(56,189,248,.25);
}

.category.fem-category .cat-coach-photo {
  border-color: rgba(255,64,129,.25);
}

.cat-bg-logo {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  transform: none;
  width: 58px;
  height: 58px;
  object-fit: contain;
  opacity: 0.15;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, filter 0.4s ease;
  border-radius: 50%;
  z-index: 1;
}

.category.active .cat-bg-logo {
  top: 14px;
  right: 14px;
  left: auto;
  width: 68px;
  height: 68px;
  opacity: 0.35;
  transform: scale(1.15) rotate(8deg) translateY(-2px);
  filter: drop-shadow(0 0 12px rgba(79, 157, 90, 0.3));
}

.cat-details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.category.active .cat-details {
  opacity: 1;
  max-height: 800px;
  margin-top: 10px;
}

.cat-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.years {
  color: var(--green);
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(79, 157, 90, 0.08);
  border: 1px solid rgba(79, 157, 90, 0.2);
}

.badge-fed {
  color: #ffffff;
  background: var(--green-dark);
  border: 1px solid var(--green);
  font-weight: 800;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 100px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-fem {
  color: #ffffff;
  background: var(--pink-dark);
  border: 1px solid var(--pink);
  font-weight: 800;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 100px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cat-coach {
  font-size: 13px;
  color: var(--green);
  font-weight: 800;
  margin-bottom: 10px;
}

.cat-coaches {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:4px 0 12px;
}
.cat-coach-card {
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(0,0,0,.16);
}
.cat-coach-photo {
  width:48px;
  height:60px;
  flex:0 0 48px;
  object-fit:cover;
  object-position:center top;
  border-radius:8px;
  background:#101813;
  border:1px solid rgba(79, 157, 90,.18);
}
.cat-coach-placeholder {display:flex;align-items:center;justify-content:center;font-size:20px;}
.cat-coach-info {min-width:0;display:flex;flex-direction:column;gap:2px;}
.cat-coach-label {font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:800;}
.cat-coach-info strong {color:var(--green);font-size:12px;line-height:1.2;overflow-wrap:anywhere;}
@media (max-width:620px){.cat-coaches{grid-template-columns:1fr;}}

.cat-schedule {
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.cat-schedule-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.cat-schedule-item {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
}

.cat-schedule-item span {
  color: var(--green);
  font-weight: 700;
}

.squads-section {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.squads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.squad-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: var(--transition);
  cursor: pointer;
  user-select: none;
}

.squad-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  background: var(--card-hover);
}

.squad-card.active {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(79, 157, 90, 0.15);
  background: var(--card-hover);
}

.squad-card.escuela-card:hover,
.squad-card.escuela-card.active {
  border-color: var(--blue-light);
  box-shadow: 0 15px 35px rgba(56, 189, 248, 0.15);
}

.squad-card.fem-card:hover,
.squad-card.fem-card.active {
  border-color: var(--pink);
  box-shadow: 0 15px 35px rgba(255, 64, 129, 0.15);
}

.squad-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.squad-card-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.squad-card-coach {
  font-size: 12px;
  color: var(--green);
  font-weight: 800;
}

.squad-card.escuela-card .squad-card-coach {
  color: var(--blue-light);
}

.squad-card.fem-card .squad-card-coach {
  color: var(--pink);
}

.squad-card-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed transparent;
}

.squad-card.active .squad-card-body {
  max-height: 800px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top-color: var(--line);
}

.squad-card-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

.squad-card:hover .squad-card-hint,
.squad-card.active .squad-card-hint {
  color: var(--green);
}

.squad-card.escuela-card:hover .squad-card-hint,
.squad-card.escuela-card.active .squad-card-hint {
  color: var(--blue-light);
}

.squad-card.fem-card:hover .squad-card-hint,
.squad-card.fem-card.active .squad-card-hint {
  color: var(--pink);
}

.squad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  margin-top: 6px;
}

.squad-player {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.squad-player::before {
  content: "•";
  color: var(--green);
}

.locations-section {
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

.locations-grid .location-card:nth-child(3) {
  grid-column: 1 / -1;
  width: calc((100% - 24px) / 2);
  justify-self: center;
}

.location-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  cursor: pointer;
}

.location-card:hover, .location-card.active {
  border-color: var(--green);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.location-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-card-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.location-card-address {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.location-schedule-info {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.location-schedule-head {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.location-schedule-row {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}

.location-schedule-row strong {
  color: var(--green);
}

.location-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.place {
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  background: rgba(79, 157, 90, 0.08);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(79, 157, 90, 0.2);
  transition: var(--transition);
}

.place:hover {
  background: var(--green);
  color: #0d1510;
}

.news-section {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Noticias: tarjeta compacta + detalle independiente */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.news-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  outline: none;
}

.news-card:hover,
.news-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--green);
  background: var(--card-hover);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}

.news-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.news-card-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
}

.news-card-hint span {
  font-size: 16px;
  transition: transform .25s ease;
}

.news-card:hover .news-card-hint span {
  transform: translate(2px,-2px);
}

/* Ventana de noticia */
.news-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.news-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.news-modal-dialog {
  position: relative;
  width: min(980px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  background: #0a100c;
  border: 1px solid rgba(79, 157, 90,.28);
  border-radius: 22px;
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
  transform: translateY(18px) scale(.98);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.news-modal.open .news-modal-dialog {
  transform: translateY(0) scale(1);
}

.news-modal-media {
  width: 100%;
  max-height: 62vh;
  overflow: hidden;
  background: #050706;
}

.news-modal-media img {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  margin: auto;
}

.news-modal-content {
  padding: 28px 34px 34px;
}

.news-modal-date {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.news-modal-content h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.1;
  font-weight: 900;
}

.news-modal-content p {
  margin: 0;
  color: #b9c3bd;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-line;
}

.news-modal-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-size: 27px;
  line-height: 1;
  transition: .2s ease;
}

.news-modal-close:hover {
  background: var(--green);
  color: #0d1510;
  border-color: var(--green);
}

body.news-modal-open {
  overflow: hidden;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.club-side-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.quote {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -2px;
}

.quote span {
  color: var(--green);
  background: linear-gradient(180deg, #4f9d5a 0%, #2f7a3f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.club-motto {
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  margin-top: -10px;
  font-style: italic;
}

.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.value {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.value:hover {
  transform: translateY(-4px);
  border-color: var(--line-active);
  background: var(--card-hover);
}

.value b {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.value p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.value.active p {
  max-height: 100px;
  opacity: 1;
  margin-top: 8px;
}

.contact {
  padding-top: 40px;
}

.contact-box {
  border: 1px solid rgba(196, 47, 40, 0.4);
  border-radius: 24px;
  padding: 60px;
  background: 
    radial-gradient(circle at 85% 20%, rgba(196, 47, 40, 0.15), transparent 40%),
    linear-gradient(135deg, #1d0e0e 0%, #0a0606 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 20px 50px rgba(196, 47, 40, 0.15);
}

.contact-box h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  color: var(--text);
}

.contact-box h2 span {
  color: var(--red);
}

.contact-box p {
  color: var(--muted);
  max-width: 580px;
  margin-top: 12px;
  font-size: 15px;
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.registration-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.registration-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.registration-dialog {
  width: min(620px, 100%);
  max-height: min(760px, 92vh);
  overflow-y: auto;
  background: linear-gradient(145deg, #101812 0%, #070a08 100%);
  border: 1px solid rgba(79, 157, 90, .24);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 35px 100px rgba(0,0,0,.65), 0 0 40px rgba(79, 157, 90,.08);
  transform: translateY(18px) scale(.98);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

.registration-modal.active .registration-dialog { transform: translateY(0) scale(1); }

.registration-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.registration-head h3 { font-size:28px; line-height:1.05; margin:0; }
.registration-head p { color:var(--muted); font-size:13px; margin-top:8px; }
.registration-close { width:40px; height:40px; flex:0 0 40px; border:1px solid var(--line); border-radius:50%; color:var(--text); background:#0b100d; font-size:24px; line-height:1; }
.registration-close:hover { border-color:rgba(79, 157, 90,.45); color:var(--green); }
.registration-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.registration-field { margin-bottom:14px; }
.registration-field.full { grid-column:1/-1; }
.registration-field label { display:block; color:#cbd3ce; font-size:11px; font-weight:800; letter-spacing:.3px; margin-bottom:7px; }
.registration-field input { width:100%; height:48px; border:1px solid var(--line); border-radius:11px; background:#080c09; color:var(--text); padding:0 13px; outline:none; font:inherit; }
.registration-field input:focus { border-color:rgba(79, 157, 90,.55); box-shadow:0 0 0 3px rgba(79, 157, 90,.08); }
.registration-field input:invalid:not(:placeholder-shown) { border-color:rgba(196, 47, 40,.55); }
.registration-submit { width:100%; margin-top:4px; justify-content:center; }
.registration-message { display:none; margin-top:13px; padding:11px 13px; border-radius:10px; font-size:12px; }
.registration-message.show { display:block; }
.registration-message.success { background:#0c2414; border:1px solid rgba(79, 157, 90,.3); color:#8affb3; }
.registration-message.error { background:#250d0b; border:1px solid rgba(196, 47, 40,.35); color:#ffaaa5; }
body.modal-open { overflow:hidden; }
.club-intro-row { display:flex; align-items:center; justify-content:space-between; gap:36px; width:100%; }
.club-intro-text { flex:1 1 50%; }
.club-motto { flex:0 1 500px; display:flex; justify-content:flex-end; }
.club-motto-image { display:block; width:min(100%, 500px); height:auto; margin-top:-4px; object-fit:contain; filter:drop-shadow(0 14px 28px rgba(0,0,0,.35)); }
.club-side-container { grid-column:1 / -1; }
.values { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.club-social { grid-column:1 / -1; justify-content:center; margin-top:4px; gap:12px; }
.club-social a { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:150px; padding:11px 18px; border:1px solid var(--line); border-radius:11px; background:#080c09; color:var(--text); text-decoration:none; transition:var(--transition); }
.club-social a:hover { border-color:rgba(79, 157, 90,.45); color:var(--green); transform:translateY(-2px); }

.gallery-section {
  padding: 90px 0;
}
.gallery-header {
  text-align: center;
  margin-bottom: 28px;
}
.gallery-header h2 {
  margin: 8px 0 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 82px;
  grid-auto-flow: dense;
  gap: 12px;
}
.gallery-item {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #080c09;
}

.gallery-item:nth-child(1)  { grid-column: span 4; grid-row: span 4; }
.gallery-item:nth-child(2)  { grid-column: span 3; grid-row: span 3; }
.gallery-item:nth-child(3)  { grid-column: span 2; grid-row: span 3; }
.gallery-item:nth-child(4)  { grid-column: span 3; grid-row: span 4; }
.gallery-item:nth-child(5)  { grid-column: span 4; grid-row: span 2; }
.gallery-item:nth-child(6)  { grid-column: span 2; grid-row: span 3; }
.gallery-item:nth-child(7)  { grid-column: span 3; grid-row: span 3; }
.gallery-item:nth-child(8)  { grid-column: span 3; grid-row: span 2; }
.gallery-item:nth-child(9)  { grid-column: span 4; grid-row: span 3; }
.gallery-item:nth-child(10) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(11) { grid-column: span 3; grid-row: span 3; }
.gallery-item:nth-child(12) { grid-column: span 3; grid-row: span 2; }
.gallery-item:nth-child(13) { grid-column: span 4; grid-row: span 3; }
.gallery-item:nth-child(14) { grid-column: span 3; grid-row: span 2; }
.gallery-item:nth-child(15) { grid-column: span 2; grid-row: span 3; }
.gallery-item:nth-child(16) { grid-column: span 4; grid-row: span 2; }
.gallery-item:nth-child(17) { grid-column: span 3; grid-row: span 3; }
.gallery-item:nth-child(18) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(19) { grid-column: span 3; grid-row: span 4; }
.gallery-item:nth-child(20) { grid-column: span 4; grid-row: span 3; }
.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-item:hover img {
  transform: scale(1.03);
}
.gallery-item { cursor: zoom-in; }
.gallery-lightbox { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.88); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease; }
.gallery-lightbox.active { opacity:1; visibility:visible; pointer-events:auto; }
.gallery-lightbox img { max-width:min(94vw,1200px); max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.gallery-lightbox-close { position:absolute; top:18px; right:20px; width:44px; height:44px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.gallery-lightbox-close:hover { border-color:rgba(79, 157, 90,.45); color:var(--green); }

.footer-social { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--text); text-decoration:none; font-size:12px; font-weight:700; }
.footer-social a:hover { color:var(--green); }
.footer-social svg { width:18px; height:18px; flex:0 0 18px; }
@media (max-width: 800px) {
  .club-intro-row { flex-direction:column; align-items:flex-start; gap:20px; }
  .club-motto { width:100%; justify-content:flex-start; }
  .club-motto-image { width:min(100%, 420px); }
  .values { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:70px; }
}

@media (max-width: 520px) {
  .values { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:110px; gap:8px; }
  .gallery-item { grid-column:span 1 !important; grid-row:span 2 !important; }
  .club-social { flex-direction:column; align-items:stretch; }
  .club-social a { width:100%; }
}

footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  background: #020403;
  color: var(--muted);
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  font-size: 12px;
}

.footer strong { color: var(--text); }
.footer strong span { color: var(--green); }

.social {
  display: flex;
  gap: 20px;
}

.social a {
  transition: var(--transition);
  font-weight: 600;
}

.social a:hover {
  color: var(--green);
}

@media (max-width: 1200px) {
  .brand { flex-basis: auto; }
  .navlinks { gap: 8px; padding-left: 20px; }
  .navlinks a { font-size: 12px; padding: 6px 8px; }
}

@media (max-width: 1050px) {
  header { height: 70px; }
  .navlinks {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(13, 21, 16, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 40px 20px;
    gap: 24px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-150%);
    transition: transform 0.4s ease;
    margin-left: 0;
  }
  .navlinks.active { transform: translateY(0); }
  .menu-toggle { display: flex; }
}

@media (max-width: 992px) {
  .crest-wrap { width: 280px; height: 280px; margin-top: 20px; }
  .crest-3d-container { width: 240px; height: 240px; }
  .crest-turntable { width: 220px; height: 220px; }
  .categories, .squads-grid, .locations-grid, .vestimenta-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  /* Mantener las tres equipaciones en una sola fila en este ancho. */
  .vestimenta-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .news-modal { padding: 12px; }
.news-modal-dialog { border-radius: 16px; max-height: 94vh; }
.news-modal-media, .news-modal-media img { max-height: 55vh; }
.news-modal-content { padding: 22px 20px 25px; }
.news-modal-close { top: 9px; right: 9px; }

  header { height: 70px; }
  
  .squads-grid, .locations-grid, .vestimenta-grid, .news-grid { grid-template-columns: 1fr; }
  .locations-grid .location-card:nth-child(3) { grid-column: auto; width: 100%; }
  .values { grid-template-columns: 1fr; }
  .contact-box {
    padding: 35px 25px;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .categories { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
}

.squad-card-head {
  position: relative;
  min-height: 48px;
}

.squad-card-coach {
  display: none;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  max-width: 245px;
  overflow: visible;
}

.squad-coach-name {
  display: flex;
  flex-direction: column;
  white-space: normal;
  line-height: 1.15;
  overflow: visible;
}

.squad-coach-name small {
  font-size: 8px;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .7px;
}

.squad-coach-name b {
  color: var(--green, #4f9d5a);
  font-size: 13px;
  line-height: 1.15;
}

/* El nombre de cada entrenador usa el color de su sección */
.squad-card[data-squad-category="federado"] .squad-coach-name b {
  color: var(--green, #4f9d5a);
}

.squad-card[data-squad-category="escuela"] .squad-coach-name b {
  color: var(--blue-light, #38bdf8);
}

.squad-card[data-squad-category="femenino"] .squad-coach-name b {
  color: var(--pink, #ff4081);
}

.squad-coach-photos {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  width: 174px;
  height: 116px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
  z-index: 5;
}

.squad-coach-photo {
  position: relative;
  flex: 0 0 82px;
  width: 82px;
  height: 112px;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.squad-card.active .squad-card-head {
  padding-right: 190px;
}

.squad-card.active .squad-card-coach {
  display: flex;
}

.squad-card.active .squad-coach-photos {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition-delay: 0s;
}

@media (max-width: 700px) {
  .squad-card.active .squad-card-head {
    padding-right: 145px;
  }
  .squad-coach-photos {
    width: 132px;
    height: 100px;
    gap: 2px;
  }
  .squad-coach-photo {
    flex-basis: 62px;
    width: 62px;
    height: 94px;
  }
}

/* Cabecera sin desenfoque de fondo: es caro de pintar en móviles. */
header { background: rgba(13, 21, 16, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; transition: height .4s cubic-bezier(0.16, 1, 0.3, 1), background-color .4s ease, border-color .4s ease; }
.crest-turntable, .kit-turntable { contain: layout style; }

/* Las imágenes fuera de pantalla no se pintan hasta acercarse. */
.squad-coach-photo,
.news-img,
.gallery-item img {
  content-visibility: auto;
}

.contact-box .kicker-alert { color: var(--red); }
.phone-row { display: flex; gap: 8px; }
.phone-row select { max-width: 120px; }