/* ===================================================
   atletas-estilos.css
   Estilos compartidos para el directorio y los perfiles
   de atletas. Subir a la raíz del tema (junto a style.css).
   =================================================== */

:root{
  --negro: #0B0E0F;
  --hueso: #F6F4EF;
  --rojo: #C8102E;
  --verde: #1B5E3A;
  --oro: #D4AF37;
  --piedra: #8A8580;
  --piedra-claro: #C9C5BD;
  --linea: rgba(246,244,239,0.12);
}
.topbar, .hero, .leyenda, .seccion-grilla, .perfil, .perfil footer, .perfil *, .seccion-grilla *, .leyenda *, .hero *, .topbar *{
  box-sizing:border-box;
}
.topbar a, .perfil a, footer a{ text-decoration:none; }

body{
  background: var(--negro);
  color: var(--hueso);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== Barra superior ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px 48px;
  border-bottom: 1px solid var(--linea);
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .marca{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--piedra-claro);
}
.brand .sep{ color: var(--rojo); }
.brand .nombre{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--hueso);
}
.topbar nav{ display:flex; gap:32px; font-size:13px; letter-spacing:0.05em; color:var(--piedra-claro); }
.topbar nav a{ color:inherit; }
.topbar nav a:hover{ color: var(--hueso); }
.volver{
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--piedra-claro);
}
.volver svg{ width:14px; height:14px; }
.topbar .marca{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--piedra);
}

/* ===== Hero (solo directorio) ===== */
.hero{
  position:relative; padding: 100px 48px 70px; overflow:hidden;
  border-bottom: 1px solid var(--linea);
}
.hero-tatami{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 79px, var(--linea) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--linea) 79px 80px);
  opacity:0.5;
  mask-image: radial-gradient(circle at 20% 30%, black 0%, transparent 65%);
}
.hero-content{ position:relative; max-width: 760px; }
.hero-eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--rojo);
  letter-spacing:0.08em; margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.hero-eyebrow .dot{ width:6px; height:6px; background:var(--rojo); border-radius:50%; display:inline-block; }
.hero h1{
  font-family:'Anton', sans-serif; font-size: clamp(48px, 7vw, 92px);
  line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 24px;
  color: var(--hueso);
}
.hero h1 span{ color: var(--rojo); }
.hero p{ font-size:17px; line-height:1.6; color: var(--piedra-claro); max-width:520px; }

/* ===== Leyenda de cinturones ===== */
.leyenda{ display:flex; gap:0; border-bottom:1px solid var(--linea); overflow-x:auto; }
.leyenda-item{
  display:flex; align-items:center; gap:8px; padding: 14px 22px;
  border-right: 1px solid var(--linea);
  font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--piedra);
  white-space:nowrap;
}
.leyenda-item .chip{ width:14px; height:14px; border-radius:3px; flex-shrink:0; }

/* ===== Grilla de atletas ===== */
.seccion-grilla{ padding: 64px 48px 100px; }
.grilla-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom: 40px; flex-wrap:wrap; gap:16px; }
.grilla-titulo{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--piedra-claro);
}
.grilla-count{ font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--piedra); }

.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.card{
  background: var(--negro); position:relative; display:flex; flex-direction:column;
  transition: background 0.25s ease; color: var(--hueso);
}
.card:hover{ background:#10141599; }
.card-photo{ position:relative; aspect-ratio: 4/5; overflow:hidden; background: linear-gradient(160deg,#1a1d1e,#0d0f10); }
.card-photo img{
  width:100%; height:100%; object-fit:cover; filter: grayscale(15%) contrast(1.05);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
}
.card:hover .card-photo img{ transform: scale(1.04); filter:grayscale(0%) contrast(1.05); }
.card-belt{ position:absolute; left:0; bottom:0; width:100%; height:6px; }
.card-num{
  position:absolute; top:14px; left:14px; font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--hueso);
  background: rgba(0,0,0,0.55); padding:3px 8px; border-radius:2px; backdrop-filter: blur(4px);
}
.card-cat{
  position:absolute; top:14px; right:14px; font-family:'JetBrains Mono', monospace; font-size:10px; color: var(--negro);
  background: var(--hueso); padding:3px 8px; border-radius:2px; letter-spacing:0.05em; text-transform:uppercase;
}
.card-body{ padding: 18px 18px 20px; }
.card-name{ font-family:'Oswald', sans-serif; font-weight:600; font-size:19px; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px; }
.card-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--piedra); }
.card-meta b{ color: var(--piedra-claro); font-weight:500; }
.card-tag{ margin-top:12px; padding-top:12px; border-top:1px solid var(--linea); font-size:12.5px; color: var(--piedra-claro); line-height:1.5; }
.card-cta{ margin-top:14px; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--rojo); display:flex; align-items:center; gap:6px; }
.card-cta svg{ width:12px; height:12px; transition: transform 0.2s ease; }
.card:hover .card-cta svg{ transform: translateX(4px); }

/* ===== Layout perfil individual ===== */
.perfil{ display:grid; grid-template-columns: 380px 1fr; min-height:100vh; }
@media (max-width: 880px){ .perfil{ grid-template-columns: 1fr; } }

.ficha{ border-right:1px solid var(--linea); position:relative; }
@media (min-width:881px){ .ficha{ position:sticky; top:0; height: 100vh; overflow-y:auto; } }
.ficha-cinturon{ height:8px; width:100%; background:var(--cinturon, #111111); }
.ficha-foto{ aspect-ratio: 4/5; overflow:hidden; background:#15181a; }
.ficha-foto img{ width:100%; height:100%; object-fit:cover; }

.ficha-id{ padding: 28px 28px 0; }
.ficha-num{ font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--rojo); letter-spacing:0.08em; margin-bottom:10px; }
.ficha-nombre{ font-family:'Anton', sans-serif; font-size:34px; line-height:1.02; text-transform:uppercase; margin-bottom:8px; color: var(--hueso); }
.ficha-resumen{ font-size:14px; color:var(--piedra-claro); line-height:1.55; margin-bottom:24px; }

.ficha-tabla{ padding: 0 28px 28px; }
.ficha-grupo-titulo{
  font-family:'Oswald', sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--piedra); margin: 22px 0 10px; display:flex; align-items:center; gap:8px;
}
.ficha-grupo-titulo::after{ content:""; flex:1; height:1px; background:var(--linea); }
.ficha-grupo-titulo:first-child{ margin-top:0; }

.dato-fila{ display:flex; justify-content:space-between; align-items:baseline; padding: 7px 0; font-size:13.5px; }
.dato-fila .label{ color: var(--piedra); }
.dato-fila .valor{ font-family:'JetBrains Mono', monospace; font-size:13px; text-align:right; color: var(--hueso); }

.equipos-lista, .logros-lista, .convocatorias-lista{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.equipos-lista li{ font-size:13.5px; padding:9px 12px; background:rgba(246,244,239,0.04); border-left:2px solid var(--cinturon, #111111); border-radius:2px; color: var(--hueso); }
.logros-lista li{ font-size:13.5px; line-height:1.5; padding-left:16px; position:relative; color: var(--hueso); }
.logros-lista li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--oro); border-radius:50%; }
.convocatorias-lista li{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--linea); color: var(--hueso); }
.convocatorias-lista li:last-child{ border-bottom:none; }
.convocatorias-lista .anio{ font-family:'JetBrains Mono', monospace; color:var(--piedra); }

.contacto-caja{ margin-top:22px; padding:16px; border:1px solid var(--linea); border-radius:4px; }
.contacto-fila{ display:flex; justify-content:space-between; font-size:13px; padding:5px 0; }
.contacto-fila .label{ color:var(--piedra); }
.contacto-fila a{ color: var(--hueso); }
.contacto-fila a:hover{ color: var(--rojo); }

/* ---- Columna contenido editorial ---- */
.contenido{ padding: 48px 56px 100px; }
@media (max-width:880px){ .contenido{ padding: 36px 24px 80px; } }

.bloque{ margin-bottom: 64px; }
.bloque-titulo{
  font-family:'Oswald', sans-serif; font-weight:600; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--piedra); margin-bottom: 18px; display:flex; align-items:center; gap:10px;
}
.bloque-titulo .marca-color{ width:8px; height:8px; background:var(--rojo); border-radius:50%; }

.video-marco{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; border:1px solid var(--linea); }
.video-marco iframe{ width:100%; height:100%; }
.video-caption{ margin-top:12px; font-size:13px; color:var(--piedra); font-family:'JetBrains Mono', monospace; }

.historia-texto{ font-size:15px; line-height:1.7; color:var(--piedra-claro); max-width:640px; }
.historia-texto p{ margin-bottom:16px; }
.historia-texto b, .historia-texto strong{ color: var(--hueso); font-weight:600; }

.galeria{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
@media (max-width:640px){ .galeria{ grid-template-columns: repeat(2,1fr); } }
.galeria img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; filter:grayscale(10%); transition:filter 0.3s ease, transform 0.3s ease; }
.galeria a:hover img{ filter:grayscale(0%); transform:scale(1.02); }

footer{
  padding: 32px 48px; border-top:1px solid var(--linea);
  font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--piedra);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media (max-width:880px){ footer{ padding:24px; } }

@media (max-width: 640px){
  .topbar, .hero, .seccion-grilla{ padding-left:20px; padding-right:20px; }
  .topbar nav{ gap:18px; }
  .hero{ padding-top:64px; padding-bottom:48px; }
}