/* ==========================================================================
   Sam Mu Dojang — Escuela de Artes Marciales (Ourense)
   Hoja de estilos principal
   Paleta tomada del logo: negro, rojo, amarillo y azul.
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens de diseño */
:root {
  /* Marca */
  --ink:        #231F20;
  --red:        #ED1C24;
  --red-dark:   #C8121A;
  --yellow:     #FFF200;
  --blue:       #0994DD;
  --blue-dark:  #0577B4;
  --blue-soft:  #E7F4FC;
  --red-soft:   #FDECED;
  --yellow-soft:#FFFBDB;

  /* Neutros */
  --bg:         #FFFFFF;
  --bg-alt:     #F6F7F9;
  --bg-deep:    #17161A;
  --line:       #E6E8EC;
  --line-soft:  #F0F1F4;
  --text:       #2A2A2E;
  --muted:      #6A6E77;
  --muted-dark: #9BA1AB;

  /* Tipografía */
  --font-head: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Métrica */
  --maxw: 1200px;
  --maxw-narrow: 780px;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --gap: 28px;

  /* Sombras */
  --sh-sm: 0 2px 8px rgba(35,31,32,.06);
  --sh:    0 10px 30px rgba(35,31,32,.08);
  --sh-lg: 0 22px 60px rgba(35,31,32,.14);

  --header-h: 78px;
}

/* -------------------------------------------------- 2. Reset y base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { color: var(--red); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.08rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 650; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .45em; }

hr { border: 0; height: 1px; background: var(--line); margin: 2.5rem 0; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7em 1.2em;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

/* -------------------------------------------------- 3. Utilidades layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: var(--maxw-narrow); }

.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
.section--ink { background: var(--bg-deep); color: #D9DCE1; }
.section--ink h2, .section--ink h3 { color: #fff; }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1em; }

/* Encabezado de sección */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow), var(--red));
}
.eyebrow--center { justify-content: center; }
.section--ink .eyebrow { color: var(--yellow); }

.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }
.section--ink .sec-head p { color: var(--muted-dark); }

.lead {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem);
  line-height: 1.6; color: var(--muted);
}

/* Barra tricolor de marca */
.tri-rule {
  display: flex; height: 5px; width: 90px; border-radius: 99px;
  overflow: hidden; margin: 0 0 1.4rem;
}
.tri-rule span { flex: 1; }
.tri-rule span:nth-child(1) { background: var(--yellow); }
.tri-rule span:nth-child(2) { background: var(--red); }
.tri-rule span:nth-child(3) { background: var(--blue); }
.tri-rule--center { margin-inline: auto; }

/* -------------------------------------------------- 4. Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: .82em 1.6em; border-radius: 99px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.05em; height: 1.05em; }

.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(237,28,36,.28); }
.btn--primary:hover { background: var(--red-dark); color: #fff; box-shadow: 0 12px 28px rgba(237,28,36,.34); }

.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(9,148,221,.26); }
.btn--blue:hover { background: var(--blue-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

.btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.42); backdrop-filter: blur(6px); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { font-size: .9rem; padding: .6em 1.2em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* Enlace con flecha */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-head); font-weight: 600; color: var(--blue-dark);
}
.arrow-link::after { content: "→"; transition: transform .2s ease; }
.arrow-link:hover::after { transform: translateX(4px); }

/* -------------------------------------------------- 5. Cabecera / navegación */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s ease;
}
.header.is-stuck { box-shadow: 0 6px 24px rgba(35,31,32,.08); }

.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
  max-width: 1320px; margin-inline: auto; padding-inline: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 52px; height: 52px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-head); font-weight: 800; font-size: 1.06rem;
  color: var(--ink); letter-spacing: -.02em;
}
.brand__tag {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }

/* La tipografía y el espaciado del menú se encogen de forma continua con el
   ancho disponible, para que la barra horizontal aguante en pantallas
   pequeñas antes de tener que pasar a hamburguesa. */
.nav__link {
  display: flex; align-items: center; gap: .35em;
  font-family: var(--font-head); font-weight: 550;
  font-size: clamp(.82rem, .62rem + .28vw, .935rem);
  color: var(--ink); padding: .55em clamp(.42em, .1em + .5vw, .72em);
  border-radius: 99px;
  white-space: nowrap; transition: background-color .18s, color .18s;
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover { background: var(--bg-alt); color: var(--ink); }
.nav__link .caret { width: 9px; height: 9px; opacity: .5; transition: transform .2s; }

/* Estado activo mediante data-page en <body> */
body[data-page="inicio"]      .nav__link[data-nav="inicio"],
body[data-page="programa"]    .nav__link[data-nav="programa"],
body[data-page="horarios"]    .nav__link[data-nav="horarios"],
body[data-page="galerias"]    .nav__link[data-nav="galerias"],
body[data-page="actualidad"]  .nav__link[data-nav="actualidad"],
body[data-page="cinturones"]  .nav__link[data-nav="cinturones"],
body[data-page="contacto"]    .nav__link[data-nav="contacto"],
body[data-section="escuela"]  .nav__link[data-nav="escuela"] {
  color: var(--red);
  background: var(--red-soft);
}

/* Submenú */
.nav__sub {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 268px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lg); padding: 10px;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Puente invisible sobre el hueco de 10px que separa el enlace del submenú.
   Sin él, al bajar el ratón hacia el desplegable se pierde el :hover a mitad
   de camino y el menú se cierra antes de poder pulsarlo. */
.nav__item--has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 14px;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav__item--has-sub:hover .caret { transform: rotate(180deg); }
.nav__sub li { margin: 0; }
.nav__sub a {
  display: block; padding: .6em .8em; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 500; font-size: .93rem; color: var(--ink);
}
.nav__sub a:hover { background: var(--blue-soft); color: var(--blue-dark); }
.nav__sub .sub-sep { height: 1px; background: var(--line-soft); margin: 8px 6px; }

.nav__mobile-cta { display: none; }


.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------- 6. Hero */
.hero {
  position: relative; min-height: min(88vh, 760px);
  display: flex; align-items: center;
  background: var(--ink); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(9,148,221,.28), transparent 60%),
    linear-gradient(180deg, rgba(23,22,26,.72) 0%, rgba(23,22,26,.58) 45%, rgba(23,22,26,.92) 100%);
}
/* padding-block, no el atajo `padding`: el atajo pisaría el margen lateral
   que aporta .wrap y el texto quedaría pegado al borde de la pantalla. */
.hero__inner { position: relative; z-index: 2; padding-block: clamp(72px, 10vw, 130px); }
.hero__content { max-width: 1200px; }
.hero__content h1, .hero__content .hero__sub { max-width: 900px; }

.hero__chip {
  display: inline-flex; align-items: center; gap: .6em;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; border-radius: 99px; padding: .45em 1.1em;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  backdrop-filter: blur(6px); margin-bottom: 1.5rem;
}
.hero__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

.hero h1 { color: #fff; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.1rem); font-weight: 800; margin-bottom: .35em; }
.hero h1 .hl { color: var(--yellow); }
.hero__sub {
  color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  max-width: 640px; margin-bottom: 2rem; line-height: 1.6;
}
.hero .btn-row { margin-bottom: 2.4rem; }

.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 38px); }
.hero__stat strong {
  display: block; font-family: var(--font-head); font-weight: 800; color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1;
}
.hero__stat span { font-size: .84rem; color: rgba(255,255,255,.7); letter-spacing: .04em; }

/* Hero interior (páginas secundarias) */
.page-hero {
  position: relative; background: var(--ink); color: #fff;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 76px);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(23,22,26,.94) 10%, rgba(23,22,26,.72) 60%, rgba(9,148,221,.32) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .4em; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 640px; font-size: 1.1rem; }
.page-hero--plain { background: var(--bg-alt); color: var(--text); }
.page-hero--plain::after { display: none; }
.page-hero--plain h1 { color: var(--ink); }
.page-hero--plain p { color: var(--muted); }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .5em; align-items: center;
  font-size: .82rem; margin-bottom: 1.1rem; color: rgba(255,255,255,.6);
}
.crumbs a { color: rgba(255,255,255,.86); }
.crumbs a:hover { color: var(--yellow); }
.crumbs .sep { opacity: .5; }
.page-hero--plain .crumbs { color: var(--muted); }
.page-hero--plain .crumbs a { color: var(--muted); }
.page-hero--plain .crumbs a:hover { color: var(--red); }

/* -------------------------------------------------- 7. Rejillas y tarjetas */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: transparent; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .98rem; }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card--alt { background: var(--bg-alt); border-color: transparent; }

.card__icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--blue-soft); color: var(--blue-dark);
  font-family: var(--font-head); font-weight: 800; font-size: 1.15rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card__icon--red    { background: var(--red-soft); color: var(--red); }
.card__icon--yellow { background: var(--yellow-soft); color: #A88700; }
.card__icon--ink    { background: #EDEEF1; color: var(--ink); }

/* Tarjeta de disciplina con foto */
.disc-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--ink);
  min-height: 400px; color: #fff;
  box-shadow: var(--sh-sm);
}
.disc-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); opacity: .78;
}
.disc-card:hover img { transform: scale(1.06); }
.disc-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,22,26,0) 25%, rgba(23,22,26,.55) 55%, rgba(23,22,26,.94) 100%);
}
.disc-card__body { position: relative; z-index: 2; padding: 30px; margin-top: auto; }
.disc-card { display: flex; flex-direction: column; justify-content: flex-end; }
.disc-card h3 { color: #fff; margin-bottom: .3rem; font-size: 1.45rem; }
.disc-card p { color: rgba(255,255,255,.82); font-size: .94rem; margin-bottom: 1rem; }
.disc-card .arrow-link { color: var(--yellow); }
.disc-card__tag {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .35em .9em; border-radius: 99px;
}

/* Split imagen + texto */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--r-lg); box-shadow: var(--sh); width: 100%; }
.split__media--stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__media--stack img:first-child { grid-column: 1 / -1; }

/* Franja de datos */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.fact {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px; text-align: center;
}
.fact strong {
  display: block; font-family: var(--font-head); font-weight: 800; color: var(--ink);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); line-height: 1.1; margin-bottom: .2rem;
}
/* Los titulares de las tarjetas nunca se parten por la mitad: si no caben,
   pasan enteros a la línea siguiente. */
.fact strong { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* Emblema de un programa concreto (Hapkido Táctico), sobre sus tarjetas */
.logo-programa {
  display: block; width: clamp(150px, 42%, 224px); height: auto;
  margin: 0 auto clamp(24px, 3vw, 34px);
}

/* Bloques cuyo titular es una palabra larga y no una cifra ("Conducción",
   "Escenarios"...). En escritorio estas tarjetas comparten fila con el texto
   y se quedan estrechas, así que el cuerpo del titular se calcula sobre el
   ancho real de la tarjeta —no sobre el de la ventana— para que la palabra
   más larga quepa siempre entera. El valor fijo es el mínimo garantizado:
   la columna nunca baja de 170px (minmax de .facts), donde "Conducción"
   ocupa ~110px de los ~134px disponibles. */
.facts--words .fact { padding: 22px 18px; }
.facts--words .fact strong { font-size: 1.2rem; }
/* Rejilla fija de 2×2 salvo en móvil: así las tarjetas no se estrechan al
   ensancharse la ventana (auto-fit llegaba a meter 3 o 4 columnas) y el
   titular mantiene un cuerpo estable y legible. */
@media (min-width: 480px) {
  .facts--words { grid-template-columns: repeat(2, 1fr); }
}

@supports (container-type: inline-size) {
  .facts--words .fact { container-type: inline-size; }
  .facts--words .fact strong { font-size: clamp(1.2rem, 13cqw, 1.6rem); }
}
.fact span { font-size: .88rem; color: var(--muted); }
.section--alt .fact { background: #fff; }
.section--ink .fact { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.section--ink .fact strong { color: #fff; }
.section--ink .fact span { color: var(--muted-dark); }

/* Lista con check */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .85em; }
.checklist li { position: relative; padding-left: 2em; margin: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230577B4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.checklist--red li::before {
  background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ED1C24' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.section--ink .checklist li::before { background-color: rgba(255,242,0,.16); }

/* Cita destacada */
.quote {
  border-left: 5px solid var(--yellow);
  background: var(--bg-alt); border-radius: 0 var(--r) var(--r) 0;
  padding: 30px 34px; font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.45;
  color: var(--ink); font-weight: 500;
}
.quote cite { display: block; margin-top: .9rem; font-size: .9rem; font-style: normal; color: var(--muted); font-family: var(--font-body); }

/* Frase manifiesto */
.manifesto {
  text-align: center; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem); line-height: 1.2;
  letter-spacing: -.02em; color: var(--ink);
}
.manifesto .hl { color: var(--red); }
.section--ink .manifesto { color: #fff; }
.section--ink .manifesto .hl { color: var(--yellow); }

/* -------------------------------------------------- 8. Etapas / timeline */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: step; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 22px; position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-head); font-weight: 800; font-size: 2.6rem;
  color: var(--line); line-height: 1; display: block; margin-bottom: .3rem;
}
.step h4 { margin-bottom: .25rem; font-size: 1.1rem; }
.step .age { font-size: .82rem; color: var(--red); font-weight: 700; letter-spacing: .05em; }
.step p { font-size: .93rem; color: var(--muted); margin-top: .6rem; }

.timeline { position: relative; padding-left: 34px; margin: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--yellow), var(--red) 45%, var(--blue));
  border-radius: 2px;
}
.timeline li { position: relative; margin: 0 0 1.6em; padding: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -30px; top: .5em;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue);
}
.timeline .year {
  display: inline-block; font-family: var(--font-head); font-weight: 800;
  color: var(--ink); font-size: 1.02rem; margin-bottom: .1rem;
}
.timeline p { font-size: .97rem; color: var(--muted); margin: 0; }

/* -------------------------------------------------- 9. Equipo docente */
.coach {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(26px, 4vw, 52px);
  align-items: start;
}
.coach__aside {
  background: var(--bg-alt); border-radius: var(--r-lg); padding: 28px;
  position: sticky; top: calc(var(--header-h) + 24px);
}
.coach__badge {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 16px;
  background: #fff; box-shadow: var(--sh-sm);
  font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--red);
}
.coach__photo {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--r); box-shadow: var(--sh-sm); margin-bottom: 18px; background: #fff;
}
.coach__name { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--ink); margin-bottom: .2rem; }
.coach__role { font-size: .9rem; color: var(--blue-dark); font-weight: 600; margin-bottom: 1rem; }
.coach__meta { list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--muted); }
.coach__meta li { padding: .45em 0; border-top: 1px solid var(--line); margin: 0; }

.credential-group { margin-bottom: 2.2rem; }
.credential-group h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--red); margin-bottom: .9rem;
}
.pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li {
  margin: 0; background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 99px; padding: .4em 1em; font-size: .87rem; color: var(--text);
}
.pill-list--gold li { background: var(--yellow-soft); border-color: #F5E7A0; }

/* -------------------------------------------------- 10. Acordeón (FAQ) */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; color: var(--ink);
  padding: 1.25em 3em 1.25em 0; position: relative; line-height: 1.4;
}
.acc-btn:hover { color: var(--red); }
.acc-btn::after {
  content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
  transition: transform .25s ease;
}
.acc-btn[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.acc-panel { display: none; padding: 0 3em 1.5em 0; color: var(--muted); }
.acc-panel.is-open { display: block; }

/* -------------------------------------------------- 11. Galería */
.gallery { columns: 3; column-gap: 18px; }
.gallery figure { break-inside: avoid; margin: 0 0 18px; }
.gallery img {
  width: 100%; border-radius: var(--r); cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease; box-shadow: var(--sh-sm);
}
.gallery img:hover { transform: translateY(-3px); box-shadow: var(--sh); }

.gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.gal-filter {
  font-family: var(--font-head); font-weight: 600; font-size: .93rem;
  padding: .55em 1.25em; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: all .18s;
}
.gal-filter:hover { border-color: var(--ink); }
.gal-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(15,14,17,.94); align-items: center; justify-content: center; padding: 4vh 4vw;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; object-fit: contain; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.28); }
.lightbox__close { top: 20px; right: 22px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }

/* -------------------------------------------------- 12. Horarios */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.tab {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: .6em 1.35em; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); transition: all .18s;
}
.tab:hover { border-color: var(--ink); }
.tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.tab-panel { display: none; }
.tab-panel.is-open { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
table.sched { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .95rem; }
table.sched th, table.sched td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.sched thead th {
  background: var(--bg-alt); font-family: var(--font-head); font-weight: 700;
  color: var(--ink); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
table.sched tbody tr:last-child td { border-bottom: 0; }
table.sched tbody tr:hover { background: #FCFCFD; }
table.sched td:first-child { font-weight: 650; color: var(--ink); white-space: nowrap; }

/* ---- Cuadrícula semanal de horarios ---- */
table.sched--week { min-width: 900px; table-layout: fixed; }
table.sched--week th, table.sched--week td {
  text-align: center; vertical-align: top; padding: 10px;
  border-right: 1px solid var(--line-soft); border-bottom: 0;
}
table.sched--week th:last-child, table.sched--week td:last-child { border-right: 0; }
table.sched--week thead th { text-align: center; }
table.sched--week td:first-child { font-weight: 400; white-space: normal; color: var(--text); }
table.sched--week tbody tr:hover { background: transparent; }

.slot {
  display: block; height: 100%; text-align: left;
  border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: var(--r-sm); padding: 10px 12px; background: #fff;
}
.slot__time { display: block; font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: .95rem; }
.slot__name { display: block; font-weight: 600; color: var(--text); font-size: .9rem; margin-top: .15rem; line-height: 1.3; }
.slot__age  { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }

.slot--hapkido   { border-left-color: #E8C400; background: var(--yellow-soft); }
.slot--taekwondo { border-left-color: var(--blue); background: var(--blue-soft); }
.slot--haidong   { border-left-color: var(--red); background: var(--red-soft); }
.slot--tactico   { border-left-color: var(--ink); background: #F1F2F4; }

.legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  list-style: none; padding: 0; margin: 0 0 18px; font-size: .86rem; color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 8px; margin: 0; }
.legend__dot { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(35,31,32,.14); }
.legend__dot--hapkido   { background: #F7DE4A; }
.legend__dot--taekwondo { background: var(--blue); }
.legend__dot--haidong   { background: var(--red); }
.legend__dot--tactico   { background: var(--ink); }

.table-hint { display: none; font-size: .82rem; color: var(--muted); margin-bottom: .6rem; }
@media (max-width: 940px) { .table-hint { display: block; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tag {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .3em .75em; border-radius: 99px;
  background: var(--blue-soft); color: var(--blue-dark);
}
.tag--red { background: var(--red-soft); color: var(--red-dark); }
.tag--yellow { background: var(--yellow-soft); color: #A88700; }
.tag--ink { background: #EDEEF1; color: var(--ink); }

/* -------------------------------------------------- 13. Actualidad */
.post {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .22s, box-shadow .22s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.post__media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover .post__media img { transform: scale(1.05); }
.post__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post__date { font-size: .8rem; color: var(--muted); letter-spacing: .05em; margin-bottom: .6rem; }
.post h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.post p { font-size: .95rem; color: var(--muted); flex: 1; }
.post .arrow-link { margin-top: 1rem; font-size: .93rem; }

/* -------------------------------------------------- 14. Cinturones negros */
.belt-board { display: grid; gap: 20px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.belt-col {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.belt-col__head {
  padding: 18px 24px; background: var(--ink); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.belt-col__head .count {
  background: rgba(255,255,255,.15); border-radius: 99px; padding: .15em .7em; font-size: .8rem;
}
.belt-list { list-style: none; margin: 0; padding: 8px 0; }
.belt-list li {
  display: flex; align-items: baseline; gap: 12px; margin: 0;
  padding: .62em 24px; font-size: .95rem; border-bottom: 1px solid var(--line-soft);
}
.belt-list li:last-child { border-bottom: 0; }
.belt-list .num {
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  color: var(--muted); letter-spacing: .04em; min-width: 46px;
}
.belt-list .name { color: var(--ink); font-weight: 500; }

/* La columna de 1.er Dan ocupa el doble; en pantallas estrechas vuelve a una
   sola celda (si no, fuerza una columna implícita y desborda). */
.belt-col--wide { grid-column: span 2; }

.dan-band {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
  padding: .35em 0; margin-bottom: .2rem;
}
.dan-band::before {
  content: ""; width: 34px; height: 10px; border-radius: 3px;
  background: var(--ink); border-bottom: 3px solid var(--yellow);
}

/* -------------------------------------------------- 15. Contacto */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.info-list li { display: flex; gap: 16px; margin: 0; align-items: flex-start; }
.info-list .ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-dark);
}
.info-list .ico svg { width: 20px; height: 20px; }
.info-list strong { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--ink); }
.info-list span, .info-list a { font-size: .95rem; color: var(--muted); }
.info-list a:hover { color: var(--red); }
/* El correo es una cadena larga sin espacios: en móviles estrechos se le
   permite partir para que no empuje la columna (no afecta a los titulares,
   que siguen sin dividirse nunca). */
.info-list a[href^="mailto"], .footer a[href^="mailto"] { overflow-wrap: anywhere; }

.form { display: grid; gap: 18px; background: var(--bg-alt); padding: clamp(26px, 3vw, 38px); border-radius: var(--r-lg); }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: .89rem; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  padding: .82em 1em; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .18s, box-shadow .18s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(9,148,221,.15);
}
.field textarea { resize: vertical; min-height: 130px; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input { width: 18px; height: 18px; margin-top: .25em; }
.field--check label { font-weight: 400; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.form-note { font-size: .82rem; color: var(--muted); }
.grid-2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.map-frame {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-alt); aspect-ratio: 16/9; display: grid; place-items: center;
  text-align: center; padding: 24px; color: var(--muted);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------- 16. CTA final */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #1B1A1F 0%, #221F29 55%, #0E3E57 100%);
  color: #fff; border-radius: var(--r-lg); padding: clamp(38px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.cta-band::before {
  content: ""; position: absolute; right: -80px; top: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(9,148,221,.35), transparent 65%);
}
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band p { color: rgba(255,255,255,.78); margin: 0; max-width: 560px; }
.cta-band > * { position: relative; z-index: 2; }

/* -------------------------------------------------- 17. Pie de página */
.footer { background: var(--bg-deep); color: #A7ACB6; padding: clamp(48px, 6vw, 78px) 0 0; }
.footer__tri { display: flex; height: 4px; }
.footer__tri span { flex: 1; }
.footer__tri span:nth-child(1) { background: var(--yellow); }
.footer__tri span:nth-child(2) { background: var(--red); }
.footer__tri span:nth-child(3) { background: var(--blue); }

.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
.footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer__brand img { width: 60px; height: 60px; }
.footer__brand strong { font-family: var(--font-head); color: #fff; font-size: 1.15rem; display: block; }
.footer__brand span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.footer p { font-size: .93rem; color: #8E939D; }

.footer h5 {
  font-family: var(--font-head); color: #fff; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; margin: 0 0 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: .55em; }
.footer ul a { color: #A7ACB6; font-size: .94rem; }
.footer ul a:hover { color: var(--yellow); }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #C9CDD4; transition: all .2s;
}
.social a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

.footer__bottom {
  margin-top: clamp(38px, 5vw, 58px); padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .84rem; color: #767B84;
}
.footer__bottom a { color: #767B84; }
.footer__bottom a:hover { color: #fff; }

/* -------------------------------------------------- 18. Avisos de contenido pendiente */
/* Barra de consentimiento de cookies */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--bg-deep); color: #D9DCE1;
  box-shadow: 0 -10px 30px rgba(35,31,32,.22);
  padding: 16px clamp(14px, 3vw, 28px);
}
.cookie-bar__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap;
}
.cookie-bar__text { margin: 0; font-size: .88rem; line-height: 1.55; flex: 1 1 380px; }
.cookie-bar__text strong { color: #fff; }
.cookie-bar__text a { color: var(--yellow); text-decoration: underline; }
.cookie-bar__acciones { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-bar .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cookie-bar .btn--ghost:hover { background: #fff; color: var(--ink); }

/* Aviso que sustituye al mapa mientras no haya consentimiento */
.map-frame__aviso { display: grid; gap: .7rem; padding: 10px; }
.map-frame__aviso p { margin: 0; }

/* Botón que se comporta como enlace (pie de página) */
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.linkish:hover { color: var(--yellow); }

/* Campo trampa antispam: fuera de la vista y del foco, pero no display:none
   (algunos robots ignoran los campos ocultos con display:none) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Avisos del formulario de contacto */
.form-alert {
  border: 1px solid #BFE3F7; background: var(--blue-soft); color: var(--blue-dark);
  border-radius: var(--r); padding: 16px 20px; font-size: .92rem;
}
.form-alert strong { color: var(--ink); }
.form-alert a { color: var(--blue-dark); text-decoration: underline; }
.form-alert--error { border-color: #F3C3C6; background: var(--red-soft); color: var(--red-dark); }
.form-alert--error a { color: var(--red-dark); }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* -------------------------------------------------- 19. Animación de entrada */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------- 20. Responsive

   Escalones:
     ≤1180px  se oculta el claim bajo el logotipo
     (el paso a menú hamburguesa NO usa un ancho fijo: lo mide main.js)
     ≤1024px  tablet grande: rejillas de 4 a 2 columnas
     ≤900px   tablet: bloques a una columna, tarjetas de 3 a 2 columnas
     ≤600px   móvil: todo a una columna
     ≤360px   móvil pequeño: se ajustan márgenes y tipografías
   -------------------------------------------------------------------------- */

/* Monitores grandes: se ensancha el contenedor para aprovechar la pantalla */
@media (min-width: 1600px) { :root { --maxw: 1320px; } }

@media (max-width: 1180px) {
  .brand__tag { display: none; }
}

/* ---- Cabecera compacta (menú hamburguesa) ---------------------------------
   NO depende de un ancho fijo: main.js mide si la barra horizontal cabe de
   verdad en la cabecera y añade .nav-compact al <html> solo cuando no cabe.
   Así se adapta a cualquier resolución, nivel de zoom o tamaño de fuente del
   navegador, en lugar de a un número de píxeles adivinado.
   -------------------------------------------------------------------------- */
.nav-compact .nav-toggle { display: flex; }

/* Sin backdrop-filter aquí: un filtro convierte a .header en bloque
   contenedor de sus descendientes position:fixed y el panel del menú no
   podría ocupar la pantalla completa. */
.nav-compact .header { backdrop-filter: none; background: #fff; }

/* Panel desplegable a pantalla completa. Se oculta con visibility en lugar de
   desplazarlo fuera del viewport, para no generar scroll horizontal. */
.nav-compact .nav {
  position: fixed; inset: var(--header-h) 0 0; margin: 0;
  background: #fff; overflow-y: auto; padding: 22px 24px 60px;
  border-top: 1px solid var(--line);
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav-compact .nav.is-open { visibility: visible; opacity: 1; transform: none; }
.nav-compact .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
.nav-compact .nav__link {
  font-size: 1.05rem; padding: .8em .9em;
  border-radius: var(--r-sm); justify-content: space-between;
}
.nav-compact .nav__sub {
  position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
  padding: 2px 0 8px 12px; margin: 0 0 6px 14px; min-width: 0; display: none;
}
.nav-compact .nav__item--has-sub::after { display: none; }
.nav-compact .nav__item--has-sub.is-open .nav__sub { display: block; }
/* Anula el centrado del submenú de escritorio, que sigue activo vía :hover/:focus-within */
.nav-compact .nav__item--has-sub:hover .nav__sub,
.nav-compact .nav__item--has-sub:focus-within .nav__sub { transform: none; }
.nav-compact .nav__item--has-sub.is-open .caret { transform: rotate(180deg); }
.nav-compact .nav__mobile-cta { display: block; margin-top: 20px; }
.nav-compact .nav__mobile-cta .btn { width: 100%; }

/* Sin JavaScript no hay medición ni botón que funcione: el menú simplemente
   fluye a varias líneas en lugar de desbordar. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .header__inner { height: auto; flex-wrap: wrap; padding-block: 10px; }
html:not(.js) .nav__list { flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
  .coach { grid-template-columns: 1fr; }
  .coach__aside { position: static; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .split, .grid-2, .contact-grid, .grid-2-form { grid-template-columns: 1fr; }
  /* Las tarjetas pequeñas mantienen dos columnas en tablet */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split--reverse .split__media { order: 0; }
  .cta-band { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .belt-col--wide { grid-column: auto; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .grid-3, .grid-4, .grid-auto-sm { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .card { padding: 24px; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 22px 30px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .header__inner { padding-inline: 18px; }
  .brand img { width: 44px; height: 44px; }
  .brand__name { font-size: .96rem; }
  .quote { padding: 22px 24px; }
  .disc-card { min-height: 340px; }
  .disc-card__body, .post__body { padding: 24px; }
  .coach__aside { padding: 22px; }
  .cta-band { padding: 30px 24px; }
  .acc-btn { font-size: 1rem; }
  .belt-list li { padding-inline: 18px; }
}

/* ---- Móviles pequeños (iPhone SE y similares) ---- */
@media (max-width: 360px) {
  .wrap { padding-inline: 14px; }
  .card, .step { padding: 20px; }
  .quote { padding: 20px; font-size: 1.05rem; }
  .brand__name { font-size: .9rem; }
  .hero__chip { font-size: .74rem; }
  .belt-list li { flex-wrap: wrap; gap: 2px 10px; }
  .pill-list li { font-size: .82rem; }
}

/* ---- Móvil en horizontal: el hero no debe ocupar toda la pantalla ---- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: 56px; }
  .nav { padding-bottom: 90px; }
}

/* ---- Palabras muy largas (URLs, términos coreanos) ---- */
p, li, h1, h2, h3, h4, td, th { overflow-wrap: break-word; }

/* -------------------------------------------------- 21. Impresión */
@media print {
  .header, .footer, .cta-band, .nav-toggle, .lightbox { display: none !important; }
  body { font-size: 12pt; }
  .hero, .page-hero { background: none; color: #000; }
  .hero h1, .page-hero h1 { color: #000; }
}