/* ===== Tokens ===== */
:root{
  --black: #0c0c0c;
  --black-soft: #161414;
  --red: #b5182f;
  --red-deep: #7a0f21;
  --gold: #c9a227;
  --gold-soft: #e2c766;
  --cream: #f2ede1;
  --cream-dim: #cdc6b4;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Work Sans', sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration:none; }

.section-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 5rem 1.75rem;
}

h1,h2,h3{ font-family: var(--font-display); letter-spacing: .01em; }

/* ===== Signature belt divider ===== */
.belt-line{
  height: 10px;
  display:flex;
  width:100%;
}
.belt-line::before{
  content:"";
  display:flex;
  width:100%;
  background: linear-gradient(90deg,
    #f2ede1 0 12.5%,
    #e8c94a 12.5% 25%,
    #e8863a 25% 37.5%,
    #3f8f4f 37.5% 50%,
    #2f6fb0 50% 62.5%,
    #7a3fa0 62.5% 75%,
    #6b4226 75% 87.5%,
    #0c0c0c 87.5% 100%
  );
}

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(12,12,12,.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,162,39,.25);
}
.header-inner{
  max-width: 1120px; margin:0 auto;
  padding: .9rem 1.75rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{ width:40px; height:40px; border-radius:50%; object-fit:cover; border: 1.5px solid var(--gold); }
.brand-text{ font-family: var(--font-display); font-size: 1.05rem; line-height:1; letter-spacing: .04em; }
.brand-text span{ color: var(--red); font-size: .78rem; letter-spacing: .18em; }

.main-nav{ display:flex; gap: 1.9rem; }
.main-nav a{
  font-size: .88rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--cream-dim); transition: color .2s;
}
.main-nav a:hover{ color: var(--gold-soft); }

.whatsapp-pill{
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.whatsapp-pill:hover{ background: var(--gold); color: var(--black); }

/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: center 25%; }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,12,12,.35) 0%, rgba(12,12,12,.55) 45%, rgba(12,12,12,.96) 92%),
    linear-gradient(100deg, rgba(122,15,33,.35), transparent 55%);
}
.hero-content{
  position: relative;
  max-width: 780px;
  padding: 0 1.75rem 4.5rem;
  margin: 0 auto; width:100%;
}
.eyebrow{
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .78rem;
  margin-bottom: 1rem;
}
.hero h1{
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  text-transform: uppercase;
}
.hero h1 span{ color: var(--red); }
.hero-sub{
  margin-top: 1.4rem;
  max-width: 540px;
  color: var(--cream-dim);
  font-size: 1.05rem;
}
.hero-actions{ display:flex; gap: 1rem; margin-top: 2.2rem; flex-wrap:wrap; }

.btn{
  display:inline-block;
  padding: .85rem 1.8rem;
  border-radius: 3px;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--red); color: var(--cream); }
.btn-primary:hover{ background: var(--gold); color: var(--black); }
.btn-ghost{ border: 1px solid var(--cream-dim); color: var(--cream); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-soft); }
.btn-full{ width:100%; text-align:center; border:none; cursor:pointer; }

/* ===== Escuela ===== */
.escuela{ background: var(--black); }
.escuela-grid{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 3.5rem;
  align-items: start;
  padding-bottom: 3rem;
}
.escuela-media img{
  border: 1px solid rgba(201,162,39,.3);
  filter: grayscale(15%);
}
.escuela-caption{
  font-family: var(--font-display);
  letter-spacing: .08em;
  color: var(--gold-soft);
  margin-top: .8rem;
  font-size: .95rem;
}
.section-tag{
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  margin-bottom: .8rem;
}
.section-tag-light{ color: var(--gold-soft); }
.escuela-text h2{
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  margin-bottom: 1.3rem;
  line-height: 1.1;
}
.escuela-text p{ color: var(--cream-dim); margin-bottom: 1rem; }
.escuela-text p:last-child{ margin-bottom:0; }

.valores{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(201,162,39,.2);
}
.valor{
  padding: 2.2rem 1.75rem;
  border-right: 1px solid rgba(201,162,39,.2);
}
.valor:last-child{ border-right:none; }
.valor-kanji{
  display:block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
  font-size: 1.25rem;
  margin-bottom: .6rem;
}
.valor p{ color: var(--cream-dim); font-size: .92rem; }

/* ===== Clases ===== */
.clases{ background: var(--red-deep); position:relative; }
.clases::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(201,162,39,.18), transparent 55%);
}
.clases .section-inner{ position:relative; }
.light-heading{
  font-size: clamp(2rem, 4vw, 2.8rem);
  text-transform: uppercase;
  margin-bottom: 2.6rem;
}
.horarios-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.horario-card{
  background: rgba(12,12,12,.35);
  border: 1px solid rgba(201,162,39,.4);
  border-radius: 4px;
  padding: 1.8rem;
}
.horario-card h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.3rem;
  color: var(--gold-soft);
  margin-bottom: .8rem;
}
.dias{ color: var(--cream); font-size: .95rem; }
.hora{ color: var(--cream-dim); font-size: 1.6rem; font-family: var(--font-display); letter-spacing: .04em; margin-top:.3rem; }

.ubicacion{ display:flex; align-items:center; gap: 1rem; }
.ubicacion-icon{ font-size: 1.6rem; }
.ubicacion-titulo{ text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--gold-soft); margin-bottom:.2rem; }

/* ===== Galería ===== */
.galeria{ background: var(--black); }
.galeria h2{
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  margin-bottom: 2.2rem;
}
.galeria-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: .6rem;
}
.galeria-grid img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(35%) contrast(1.05);
  transition: filter .3s, transform .3s;
}
.galeria-grid img:hover{ filter: grayscale(0%); transform: scale(1.02); }
.galeria-grid img:nth-child(1){ grid-row: span 2; }
.galeria-grid img:nth-child(6){ grid-row: span 2; }

/* ===== Redes ===== */
.redes{ background: linear-gradient(180deg, var(--black), #120b0c); }
.redes-inner{ text-align:center; }
.redes-inner h2{ font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 2.2rem; text-transform: uppercase; }
.redes-links{ display:flex; justify-content:center; gap: 2.5rem; flex-wrap: wrap; }
.red-link{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: var(--cream-dim);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s;
}
.red-link svg{ width: 34px; height:34px; color: var(--gold); transition: color .2s, transform .2s; }
.red-link:hover{ color: var(--gold-soft); }
.red-link:hover svg{ color: var(--red); transform: translateY(-3px); }

/* ===== Contacto ===== */
.contacto{ background: var(--black-soft); }
.contacto-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3.5rem;
}
.contacto-info h2{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); text-transform:uppercase; margin-bottom: 1rem; }
.contacto-desc{ color: var(--cream-dim); margin-bottom: 2rem; }
.contacto-lista{ list-style:none; display:flex; flex-direction:column; gap: 1.2rem; }
.contacto-lista li{ display:flex; flex-direction:column; gap:.15rem; border-left: 2px solid var(--gold); padding-left: 1rem; }
.contacto-lista strong{ text-transform:uppercase; font-size: .75rem; letter-spacing:.1em; color: var(--gold-soft); }
.contacto-lista span{ color: var(--cream); }

.contacto-form{ display:flex; flex-direction:column; gap: 1.1rem; }
.contacto-form label{
  display:flex; flex-direction:column; gap:.4rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing:.1em; color: var(--cream-dim);
}
.contacto-form input, .contacto-form textarea{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,162,39,.3);
  border-radius: 3px;
  padding: .8rem .9rem;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .95rem;
  resize: vertical;
}
.contacto-form input:focus, .contacto-form textarea:focus{
  outline: none; border-color: var(--gold);
}
.form-nota{ font-size: .78rem; color: var(--cream-dim); text-align:center; }

/* ===== Footer ===== */
.site-footer{ background: var(--black); border-top: 1px solid rgba(201,162,39,.2); }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: 1.5rem;
  padding-top: 2.5rem; padding-bottom: 2.5rem;
}
.footer-brand{ display:flex; align-items:center; gap: .8rem; }
.footer-brand img{ width:34px; height:34px; border-radius:50%; }
.footer-brand p{ font-family: var(--font-display); font-size: .95rem; letter-spacing:.05em; }
.footer-brand span{ font-family: var(--font-body); color: var(--cream-dim); font-size: .72rem; letter-spacing:.03em; }
.footer-copy{ color: var(--cream-dim); font-size: .8rem; }

/* ===== Focus visibility ===== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-soft); outline-offset: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .main-nav{ display:none; }
  .escuela-grid{ grid-template-columns: 1fr; }
  .valores{ grid-template-columns: 1fr 1fr; }
  .valor{ border-right:none; border-bottom: 1px solid rgba(201,162,39,.2); }
  .horarios-grid{ grid-template-columns: 1fr; }
  .galeria-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .contacto-grid{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction: column; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
  html{ scroll-behavior: auto; }
}