/* ============================================================
   CD Karate Pinto — hoja de estilos
   Paleta: rojo del escudo, sumi (negro tinta), crema, línea, oro
   Tipos: Oswald (titulares, condensada, carácter marcial) / Work Sans (texto)
   ============================================================ */

/* Fuentes propias, guardadas en assets/fonts/ — ya no dependen de Google Fonts */
@font-face{
  font-family:"Oswald";
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url("fonts/oswald-variable.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Work Sans";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/work-sans-variable.woff2") format("woff2-variations");
}

:root{
  --rojo: #d2202b;
  --rojo-oscuro: #a2161f;
  --sumi: #141210;
  --crema: #f4f3f1;
  --line: #e4e2de;
  --muted: #57534d;
  --oro: #c9a15a;
  --white: #ffffff;
  --wrap: 1120px;
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  font-family:"Work Sans",sans-serif;
  color:var(--sumi);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  line-height:1.1;
  margin:0 0 14px;
  letter-spacing:.2px;
}
h1{font-size:clamp(34px,5vw,54px);}
h2{font-size:clamp(26px,3.4vw,36px);}
h3{font-size:19px;}
h4{font-size:14px;}
p{margin:0 0 14px;color:var(--muted);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}
button{font-family:inherit;}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--rojo);
  outline-offset:2px;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font:600 15px "Oswald",sans-serif;
  letter-spacing:.3px;
  padding:14px 26px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--rojo);
  color:var(--white);
}
.btn-primary:hover{background:var(--rojo-oscuro);}
.btn-ghost{
  background:transparent;
  color:var(--sumi);
  border-color:var(--sumi);
}
.btn-ghost:hover{background:var(--sumi);color:var(--white);}

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:flex;
  align-items:center;
  gap:9px;
  font:600 13px "Oswald",sans-serif;
  letter-spacing:1.5px;
  color:var(--rojo);
  text-transform:uppercase;
  margin-bottom:10px;
}
.kicker .dash{
  width:26px;height:2px;background:var(--rojo);display:inline-block;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:34px;
}
.section-head p{max-width:34ch;margin:0;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
}
.headbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;
}
.brand-lockup{display:flex;align-items:center;gap:12px;}
.brand-lockup img{width:46px;height:46px;object-fit:contain;}
.brand-lockup .txt{line-height:1.15;}
.brand-lockup .top{font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;}
.brand-lockup .name{font:600 19px "Oswald",sans-serif;}

nav#mainNav{display:flex;align-items:center;gap:28px;}
nav#mainNav a{
  font:600 14px "Oswald",sans-serif;
  letter-spacing:.3px;
  color:var(--sumi);
  padding:6px 0;
  border-bottom:2px solid transparent;
}
nav#mainNav a:hover{border-color:var(--rojo);}
nav#mainNav a.nav-cta{
  background:var(--rojo);color:var(--white);
  padding:10px 18px;border-radius:var(--radius);border-bottom:none;
}
nav#mainNav a.nav-cta:hover{background:var(--rojo-oscuro);}
nav#mainNav a.active{color:var(--rojo);}

.menu-toggle{
  display:none;
  background:none;border:1px solid var(--line);
  font-size:20px;line-height:1;padding:8px 12px;
  border-radius:var(--radius);cursor:pointer;
}

@media(max-width:860px){
  .menu-toggle{display:block;}
  nav#mainNav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
  }
  nav#mainNav.open{max-height:320px;}
  nav#mainNav a{padding:16px 24px;border-bottom:1px solid var(--line);}
  nav#mainNav a.nav-cta{margin:12px 24px;text-align:center;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--crema);
  overflow:hidden;
  padding:64px 0 0;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:40px;
  padding-bottom:56px;
}
.hero .lede{max-width:48ch;font-size:17px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.hero-emblem{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.hero-emblem .ring{
  position:absolute;
  width:280px;height:280px;
  border:2px solid var(--rojo);
  border-radius:50%;
  opacity:.2;
}
.hero-emblem img{
  position:relative;
  width:260px;height:260px;
  object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(20,18,16,.22));
}
.hero-stats{
  background:var(--sumi);color:var(--white);
}
.hero-stats .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:26px 24px;gap:12px;
}
.stat{text-align:left;border-left:2px solid var(--rojo);padding-left:14px;}
.stat-num{font:600 30px "Oswald",sans-serif;}
.stat-label{font-size:12.5px;color:#cfccc7;letter-spacing:.2px;}

@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;text-align:left;}
  .hero-emblem{order:-1;}
  .hero-emblem img{width:160px;height:160px;}
  .hero-emblem .ring{width:190px;height:190px;}
  .hero-stats .wrap{grid-template-columns:repeat(2,1fr);}
}

/* ---------- El club / disciplina ---------- */
.disciplina{padding:72px 0;}
.disc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;}
.lead-text{font-size:18px;color:var(--sumi);}
.kanji-block{
  display:flex;gap:18px;align-items:center;
  margin-top:26px;padding:20px;
  background:var(--crema);border-left:3px solid var(--rojo);
}
.kj{font:600 40px "Oswald",sans-serif;color:var(--rojo);}
.kj-name{font:600 16px "Oswald",sans-serif;}
.kj-sub{font-size:13.5px;color:var(--muted);}

.pillars{display:grid;gap:20px;}
.pillar{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line);}
.pillar:first-child{border-top:none;}
.pillar .num{font:600 22px "Oswald",sans-serif;color:var(--rojo);min-width:30px;}
.pillar h3{margin-bottom:4px;}
.pillar p{margin:0;font-size:14.5px;}

@media(max-width:860px){
  .disc-grid{grid-template-columns:1fr;}
}

/* ---------- Horarios ---------- */
.horarios{padding:72px 0;background:var(--crema);}
.table-scroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);}
table.tabla-horario{width:100%;border-collapse:collapse;min-width:560px;}
.tabla-horario th{
  text-align:left;font:600 12.5px "Oswald",sans-serif;
  letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);padding:14px 18px;border-bottom:1px solid var(--line);
}
.tabla-horario td{padding:16px 18px;border-bottom:1px solid var(--line);font-size:14.5px;}
.tabla-horario tr:last-child td{border-bottom:none;}
.tabla-horario td.grupo{font:600 15px "Oswald",sans-serif;}
.horarios-foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-top:20px;flex-wrap:wrap;
}
.horarios-foot span{font-size:13.5px;color:var(--muted);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;background:var(--sumi);color:var(--white);
  padding:56px 0;text-align:center;overflow:hidden;
}
.cta-band h2{color:var(--white);max-width:26ch;margin:0 auto 22px;}
.cta-band .checker{
  position:absolute;inset:0;opacity:.10;
  background-image:
    linear-gradient(45deg, var(--rojo) 25%, transparent 25%),
    linear-gradient(-45deg, var(--rojo) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--rojo) 75%),
    linear-gradient(-45deg, transparent 75%, var(--rojo) 75%);
  background-size:60px 60px;
  background-position:0 0, 0 30px, 30px -30px, -30px 0px;
}
.cta-band .wrap{position:relative;}

/* ---------- Grados ---------- */
.grados{padding:72px 0;}
.grados-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grado-card{
  padding:20px;border:1px solid var(--line);
  transition:border-color .15s ease;
}
.grado-card:hover{border-color:var(--rojo);}
.grado-card h3{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:8px;}
.belt{width:34px;height:12px;border-radius:2px;display:inline-block;}
.grado-card p{font-size:13.5px;margin:0;}

@media(max-width:860px){.grados-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.grados-grid{grid-template-columns:1fr;}}

/* ---------- Tarifas ---------- */
.tarifas{background:var(--crema);padding:72px 0;}
.tarifas-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.tarifa-card{background:var(--white);border:1px solid var(--line);padding:26px;border-top:4px solid var(--rojo);}
.tarifa-card h3{font-size:20px;margin:0 0 16px;}
.tarifa-card h4{color:var(--rojo);text-transform:uppercase;letter-spacing:.4px;margin:18px 0 6px;}
.tarifa-card ul{list-style:none;padding-left:0;margin:0;color:var(--muted);font-size:14px;}
.tarifa-card li{
  position:relative;
  padding-left:16px;
  margin:8px 0;
  line-height:1.45;
}
.tarifa-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:5px;height:5px;
  background:var(--rojo);
  border-radius:50%;
}
.tarifa-note{margin-top:18px;background:var(--sumi);color:var(--white);padding:16px;font-weight:600;text-align:center;}

@media(max-width:700px){
  .tarifas-grid{grid-template-columns:1fr;}
  .tarifa-card{padding:20px;}
  .tarifa-card h3{font-size:18px;}
  .tarifa-card h4{margin-top:16px;}
}

/* ---------- Inscripción / formulario ---------- */
.inscripcion{background:var(--white);padding:72px 0;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-box{background:var(--crema);border:1px solid var(--line);padding:26px;}
.form-box h3{margin-bottom:18px;}
.form-box.full{grid-column:1/-1;background:var(--white);}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:13px;font-weight:600;}
.field input,.field select,.field textarea{
  font:15px "Work Sans",sans-serif;padding:12px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rojo);}
.field textarea{min-height:90px;resize:vertical;}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);margin:12px 0;}
.check input{margin-top:4px;}
.form-note{font-size:13px;color:var(--muted);margin:10px 0 18px;}
.required{color:var(--rojo);}
.field-error{font-size:12.5px;color:#B91C1C;font-weight:600;margin:0;}
.field input.invalido{border-color:#B91C1C;}
.honeypot{position:absolute;left:-9999px;height:1px;overflow:hidden;}
.form-message{
  display:none;margin-top:15px;padding:12px;
  background:#edf7ed;color:#245b2a;font-size:14px;border:1px solid #c9e4c9;
  border-radius:var(--radius);line-height:1.5;
}
@media(max-width:700px){
  .form-grid{grid-template-columns:1fr;}
  .form-box.full{grid-column:auto;}
}

/* ---------- Página legal ---------- */
.legal-page{padding:56px 0 80px;}
.legal-page .back-link{
  display:inline-block;margin-bottom:24px;font:600 14px "Oswald",sans-serif;color:var(--rojo);
}
.legal-page h1{margin-top:36px;}
.legal-page h1:first-of-type{margin-top:0;}
.legal-page h2{font-size:20px;margin-top:30px;color:var(--sumi);}
.legal-page p,.legal-page li{color:var(--muted);font-size:15px;}
.legal-page ul{padding-left:20px;margin-bottom:14px;}
.legal-page .muted{color:var(--muted);font-size:13.5px;margin-bottom:28px;}
.legal-page hr{border:none;border-top:1px solid var(--line);margin:40px 0;}

/* ---------- Footer ---------- */
footer{background:var(--sumi);color:#d8d5d0;padding:52px 0 0;}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:34px;
}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.foot-brand img{width:34px;height:34px;object-fit:contain;}
.foot-brand span{font:600 15px "Oswald",sans-serif;color:var(--white);}
.foot-col h4{color:var(--white);font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;}
.foot-col a{display:block;font-size:14px;color:#c9c6c1;padding:5px 0;}
.foot-col a:hover{color:var(--rojo);}
.foot-bottom{
  border-top:1px solid #2a2724;
  padding:18px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:13px;color:#9c9892;
}
.foot-bottom a{color:#9c9892;}
.foot-bottom a:hover{color:var(--rojo);}

@media(max-width:760px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr;}
}