/* ==========================================================
   Kizuna · Páginas de disciplina (judo.html, bjj.html)
   ========================================================== */

/* Cabecera: etiquetas rápidas y botones */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{border:1px solid var(--line);padding:9px 12px;font:600 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.chip.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.page-head-word{position:absolute;right:-1vw;bottom:-4vw;font:900 clamp(140px,22vw,320px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px rgba(214,189,140,.1);pointer-events:none;user-select:none;text-transform:uppercase}
.page-head{position:relative;overflow:hidden}
.page-head .wrap{position:relative}

/* Comparación lado a lado (Gi / No-Gi) */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.versus{grid-template-columns:1fr}}
.vs-card{border:1px solid var(--line);padding:32px 28px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.vs-card h3{font-size:48px}
.vs-card .tag{font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.vs-card p{color:var(--text-soft)}
.vs-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px}
.vs-card dt{font:600 13px/1.6 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.vs-card dd{margin:0}

/* Lista de grados sin la punta negra de BJJ */
.grades.plain .belt::after{display:none}

/* Reserva sobre fondo oscuro */
.sec:not(.light) .cal-grid .panel{background:var(--navy-2)}
.sec:not(.light) .cal-box{border:1px solid var(--line)}

/* Cinturón clicable (judo.html → ventana de técnicas) */
.grade.is-link{cursor:pointer;transition:background .2s}
.grade.is-link:hover{background:rgba(27,35,56,.05)}
.grade-open{margin-top:12px;background:none;border:0;padding:0;cursor:pointer;font:700 13px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.grade-open::after{content:" →";transition:margin .2s}
.grade.is-link:hover .grade-open::after{margin-left:4px}
.grade-open:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}

/* Ventana de técnicas */
.tech-card.modal-card.dark{max-width:980px;padding:28px}
.tech-head{margin-bottom:22px}
/* Franja del cinturón a todo el ancho; el botón de cerrar va encima, a la derecha */
.tech-head .belt{height:68px;padding:0 72px 0 20px;margin-bottom:16px;gap:14px;font:800 34px/1 var(--display);letter-spacing:.04em}
.tech-head .belt::after{display:none}
.tech-head .belt small{font:700 15px/1 var(--label);letter-spacing:.16em;opacity:.8}
.tech-card .modal-close{top:42px;right:42px}
.tech-head p{color:var(--text-soft);font-size:16px;margin:0}
.tech-player{position:relative;aspect-ratio:16/9;background:#000;scroll-margin:16px}
.tech-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tech-now{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0 4px;font:700 15px/1.2 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.tech-now a{color:var(--steel);font-weight:600;text-decoration:none}
.tech-now a:hover{color:var(--cream)}
.tech-group{margin-top:26px}
.tech-group h4{font:700 14px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--steel);padding-bottom:10px;border-bottom:1px solid var(--line);margin:0 0 14px}
.tech-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tech-item{display:flex;flex-direction:column;gap:8px;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--cream);font:600 15px/1.2 var(--label);letter-spacing:.04em}
.tech-item img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border:2px solid transparent;opacity:.85;transition:opacity .2s,border-color .2s}
.tech-item:hover img,.tech-item:focus-visible img{opacity:1;border-color:var(--line)}
.tech-item[aria-pressed="true"] img{opacity:1;border-color:var(--gold)}
.tech-item[aria-pressed="true"] span{color:var(--gold)}
.tech-item:focus-visible{outline:none}
.tech-class{color:var(--text-soft);font-size:15px;margin:12px 0 0}
.tech-class b{color:var(--cream)}
.tech-foot{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--steel)}
.tech-foot a{color:var(--text-soft)}
@media (max-width:620px){
  .tech-card.modal-card.dark{padding:20px 16px}
  .tech-head .belt{height:56px;padding:0 60px 0 14px;font-size:26px}
  .tech-card .modal-close{top:28px;right:24px}
  .tech-list{grid-template-columns:repeat(2,1fr)}
}