/* =====================================================================
   XIHU · Centro Deportivo y Terapéutico
   Hoja de estilos principal
   Edita los colores y tamaños en ":root" y todo el sitio cambia.
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------
     PALETA · definida con el BaZi de Harold (ver docs/12-BAZI-Y-FENG-SHUI.md)
     Su carta es fría y húmeda (7 Aguas, 0 Fuegos): el elemento favorable
     es el FUEGO y el de apoyo la TIERRA. De ahí el orden:
       negro tinta  = Agua  → el suelo, la profundidad (no debe dominar en color)
       bermellón    = Fuego → el acento activo y vivo
       oro imperial = Tierra→ el acento que nutre
       blanco papel = Metal → el Oeste y el descanso
     ------------------------------------------------------------------ */
  --tinta: #14100f;
  --tinta-suave: #2a2220;
  --rojo: #c1272d;
  --rojo-osc: #8c1418;
  --oro: #d9a441;
  --oro-claro: #f0dca8;
  --papel: #fbf8f2;
  --papel-2: #f4ecdd;
  --papel-3: #e9dcc4;
  --gris: #6b625a;
  --linea: #e2d6c0;
  --blanco: #ffffff;

  /* Los Cinco Elementos 五行 · un acento por disciplina */
  --el-metal: #8d939c;   /* 金 · Kung Fu · el Oeste, el filo, la estructura */
  --el-agua: #1f3a5f;    /* 水 · Tai Chi · ceder y fluir */
  --el-madera: #3f6b3a;  /* 木 · Qi Gong · el aliento que crece */
  --el-tierra: #b07d2b;  /* 土 · Meditación · el centro que sostiene */
  --el-fuego: #c1272d;   /* 火 · Medicina China · 灸, el fuego que calienta */

  /* Tipografía · el principio 文武 (wén wǔ): lo civil y lo marcial.
     --display  = condensada, en mayúsculas → el impacto, el golpe
     --serif    = con serifa → la sabiduría, las citas de los clásicos
     --sans     = el cuerpo de texto, que debe leerse sin esfuerzo */
  --display: 'Oswald', 'Arial Narrow', 'Franklin Gothic Medium', 'Segoe UI Semibold', Impact, sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif;
  --sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Medidas */
  --ancho: 1120px;
  --radio: 14px;
  --sombra: 0 2px 4px rgba(23, 22, 26, .04), 0 12px 32px rgba(23, 22, 26, .07);
  --sombra-fuerte: 0 4px 8px rgba(23, 22, 26, .06), 0 24px 48px rgba(23, 22, 26, .12);
}

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-x: hidden evita que la página se pueda mover de lado a lado.
   Sin esto, cualquier elemento un poco más ancho que la pantalla hace que
   todo el sitio se desplace horizontalmente — muy incómodo en el celular. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: #e9e4db;
  background: transparent;
  overflow-x: hidden;
}

/* =====================================================================
   FONDO NEGRO CON LÍNEAS AMARILLAS EN MOVIMIENTO
   Todo el sitio va sobre negro. Detrás corre una trama de líneas doradas
   lentísimas, como tinta que se desplaza. Es lo que le da vida a la página
   sin distraer de la lectura.
   ===================================================================== */
html { background-color: #0a0908; }

body::before {
  content: '';
  position: fixed;
  inset: -70% -35%;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    118deg,
    transparent 0 50px,
    rgba(217, 164, 65, .06) 50px 51px
  );
  animation: lineas-viajan 44s linear infinite;
}

/* Si el sistema pide menos movimiento, las líneas se quedan quietas */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

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

a { color: var(--oro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.05;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); letter-spacing: .005em; }
h2 { font-size: clamp(1.65rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); }

/* La cita de un clásico vuelve a la serifa: ahí habla la tradición, no el golpe */
blockquote {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong { color: var(--tinta); }

/* ------------------------------------------------------------ utilidades */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

.seccion { padding: clamp(48px, 8vw, 88px) 0; }
.seccion--papel2 { background: var(--papel-2); }
.seccion--oscura { background: var(--tinta); color: var(--papel); }
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3 { color: var(--blanco); }
.seccion--oscura p { color: #cdc7bd; }

.centrado { text-align: center; }
.estrecho { max-width: 760px; margin-left: auto; margin-right: auto; }

.antetitulo {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: .7em;
}
.seccion--oscura .antetitulo { color: var(--oro); }

.entrada {
  font-size: 1.1rem;
  color: var(--gris);
  max-width: 68ch;
}
.seccion--oscura .entrada { color: #bdb6ab; }

/* --------------------------------------------------------------- botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 15px 30px;
  border-radius: var(--radio);
  font-weight: 700;
  font-size: .98rem;
  font-family: var(--sans);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-align: center;
  line-height: 1.2;
}
.boton:hover { text-decoration: none; transform: translateY(-2px); }

.boton--principal {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 8px 22px rgba(155, 28, 34, .28);
}
.boton--principal:hover { background: var(--rojo-osc); color: var(--blanco); }

.boton--oro {
  background: var(--oro);
  color: var(--tinta);
  box-shadow: 0 8px 22px rgba(200, 163, 74, .3);
}
.boton--oro:hover { background: var(--oro-claro); color: var(--tinta); }

.boton--borde {
  border-color: currentColor;
  color: var(--tinta);
  background: transparent;
}
.boton--borde:hover { background: var(--tinta); color: var(--papel); }

.seccion--oscura .boton--borde { color: var(--blanco); }
.seccion--oscura .boton--borde:hover { background: var(--blanco); color: var(--tinta); }

.boton--ancho { width: 100%; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 1.6em;
}
.grupo-botones--centrado { justify-content: center; }

/* -------------------------------------------------------- aviso borrador */
.aviso-borrador {
  background: #ffe9a8;
  color: #4a3708;
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  border-bottom: 2px solid var(--oro);
}
.aviso-borrador code {
  background: rgba(0, 0, 0, .08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .85em;
}

/* -------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 241, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.cabecera-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--tinta);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.marca:hover { text-decoration: none; }

.marca-qi {
  font-size: 1.75rem;
  color: var(--rojo);
  line-height: 1;
}

.marca-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.hero-logo {
  width: clamp(150px, 26vw, 220px);
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .5));
}

.logo-grande {
  width: min(340px, 78%);
  height: auto;
  margin: 0 auto 1.8em;
  display: block;
}
.marca small {
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: 2px;
}

.menu-toggle { display: none; }

.menu-btn {
  display: none;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  line-height: 1;
  user-select: none;
}

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.nav a {
  color: var(--tinta);
  font-size: .93rem;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav a:hover { background: var(--papel-3); text-decoration: none; }
.nav a.activo { color: var(--rojo); }
.nav a.nav-cta {
  background: var(--rojo);
  color: var(--blanco);
  margin-left: 6px;
}
.nav a.nav-cta:hover { background: var(--rojo-osc); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background: radial-gradient(ellipse at 70% 20%, #2e2733 0%, var(--tinta) 65%);
  color: var(--papel);
  padding: clamp(56px, 9vw, 110px) 0 clamp(56px, 9vw, 100px);
  overflow: hidden;
}

.hero::after {
  content: "氣";
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(280px, 42vw, 620px);
  color: rgba(200, 163, 74, .055);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hero-in { position: relative; z-index: 2; max-width: 720px; }

.hero h1 { color: var(--blanco); margin-bottom: .35em; }

.hero .lema {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  color: var(--oro);
  margin-bottom: .7em;
  font-style: italic;
}

.hero p { color: #c9c2b8; font-size: 1.12rem; }

.hero-sello {
  display: inline-block;
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--oro);
  border: 2px solid var(--oro);
  border-radius: 50%;
  width: 62px;
  height: 62px;
  line-height: 58px;
  text-align: center;
  margin-bottom: 22px;
}

.lista-ticks {
  list-style: none;
  padding: 0;
  margin: 1.6em 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.lista-ticks li {
  color: #d9d2c8;
  font-size: .95rem;
  font-weight: 600;
  margin: 0;
}
.lista-ticks li::before {
  content: "✓ ";
  color: var(--oro);
  font-weight: 700;
}

/* --------------------------------------------------------------- tarjetas */
.rejilla { display: grid; gap: 22px; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px;
  box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-fuerte); }

.tarjeta h3 { margin-top: 0; }
.tarjeta p:last-child { margin-bottom: 0; }

.tarjeta--destacada {
  border-color: var(--oro);
  border-width: 2px;
}

.tarjeta--enlace { display: block; color: inherit; }
.tarjeta--enlace:hover { text-decoration: none; }

.tarjeta-icono {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--rojo);
  line-height: 1;
  margin-bottom: 14px;
}

.tarjeta--oscura {
  background: var(--tinta-suave);
  border-color: #3a3742;
  color: #cdc7bd;
}
.tarjeta--oscura h3 { color: var(--blanco); }

/* --------------------------------------------------------- bloque partido */
.partido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.partido__texto h2 { margin-top: 0; }
.partido__marco {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-fuerte);
  background: var(--papel-3);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  font-size: .9rem;
  text-align: center;
  padding: 24px;
  border: 1px dashed var(--linea);
}

/* -------------------------------------------------------------- números */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  text-align: center;
}
.dato__num {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--oro);
  line-height: 1;
  font-weight: 700;
}
.dato__txt { font-size: .9rem; color: var(--gris); margin-top: 8px; }
.seccion--oscura .dato__txt { color: #a9a29a; }

/* ----------------------------------------------------------------- listas */
.lista-tarjetas { list-style: none; padding: 0; }
.lista-tarjetas li {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--rojo);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.lista-tarjetas strong { display: block; margin-bottom: 3px; }
.lista-tarjetas span { color: var(--gris); font-size: .94rem; }

/* ------------------------------------------------------------------ tabla */
.tabla-envoltura { overflow-x: auto; margin-bottom: 1.4em; }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  font-size: .95rem;
}
table.tabla th,
table.tabla td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--linea);
}
table.tabla th {
  background: var(--papel-2);
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}
table.tabla tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--linea); }
.faq details {
  border-bottom: 1px solid var(--linea);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-family: var(--serif);
  font-size: 1.08rem;
  padding: 16px 34px 16px 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--rojo);
  font-family: var(--sans);
  font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq details > p,
.faq details > div { padding-bottom: 16px; color: var(--gris); }

/* ------------------------------------------------------------------ aviso */
.aviso {
  border-radius: var(--radio);
  padding: 20px 24px;
  margin: 1.6em 0;
  font-size: .95rem;
  border: 1px solid;
}
.aviso--info {
  background: #eef4fa;
  border-color: #c5dcf0;
  color: #214863;
}
.aviso--salud {
  background: #fdf5e6;
  border-color: var(--oro-claro);
  color: #6a5218;
}
.aviso--ok {
  background: #edf7ee;
  border-color: #c3e2c6;
  color: #22522a;
}
.aviso strong { color: inherit; }

/* --------------------------------------------------------------- articulo */
.articulo { max-width: 740px; margin: 0 auto; }
.articulo h2 { margin-top: 1.7em; }
.articulo h3 { margin-top: 1.4em; }
.articulo blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--oro);
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--tinta-suave);
}
.articulo .meta {
  color: var(--gris);
  font-size: .88rem;
  margin-bottom: 2.2em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--linea);
}
.fuentes { font-size: .9rem; color: var(--gris); }
.fuentes li { margin-bottom: .7em; }

/* ------------------------------------------------------------------- CTA */
.cta-final {
  background: linear-gradient(135deg, var(--rojo-osc), var(--rojo));
  color: var(--blanco);
  border-radius: var(--radio);
  padding: clamp(34px, 6vw, 62px);
  text-align: center;
  box-shadow: var(--sombra-fuerte);
}
.cta-final h2 { color: var(--blanco); }
.cta-final p { color: #f0dcdc; max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta-final .grupo-botones { justify-content: center; }

/* ---------------------------------------------------------------- footer */
.pie {
  background: var(--tinta);
  color: #a9a29a;
  padding: 58px 0 26px;
  font-size: .93rem;
}
.pie a { color: #d9d2c8; }
.pie a:hover { color: var(--oro); }
.pie h4 {
  color: var(--blanco);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.pie-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px;
  margin-bottom: 40px;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .5em; }
.pie-marca {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--blanco);
  margin-bottom: .5em;
}
.pie-marca span { color: var(--oro); }
.pie-legal {
  border-top: 1px solid #322f38;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  font-size: .85rem;
  color: #7d766e;
}

.aviso-salud-pie {
  font-size: .82rem;
  color: #7d766e;
  border-top: 1px solid #322f38;
  margin-top: 18px;
  padding-top: 18px;
  line-height: 1.6;
}

/* =====================================================================
   BOTÓN FLOTANTE DE CONTACTO Y REDES
   Un botón redondo dorado. Al tocarlo se despliega HACIA ARRIBA una
   columna con los accesos directos, cada uno con el color de su red:
   WhatsApp · Instagram · TikTok · Facebook · Ubicación.
   ===================================================================== */
.acciones {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.acciones__toggle { display: none; }

/* --- El botón redondo --- azul negruzco, del color del agua 水 -- */
.acciones__btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #e8f0fb;
  background: linear-gradient(145deg, #26496f, #10243d);
  box-shadow:
    0 12px 30px rgba(10, 26, 45, .62),
    0 0 0 1px rgba(255, 255, 255, .16) inset;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1.3), box-shadow .3s ease, background .3s ease;
}
.acciones__btn:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 38px rgba(10, 26, 45, .8), 0 0 0 1px rgba(217, 164, 65, .4) inset;
}
.acciones__btn svg { position: absolute; width: 27px; height: 27px; transition: opacity .25s ease, transform .3s ease; }
.acciones__cerrar { opacity: 0; transform: rotate(-90deg) scale(.55); }
.acciones__toggle:checked ~ .acciones__btn .acciones__abrir { opacity: 0; transform: rotate(90deg) scale(.55); }
.acciones__toggle:checked ~ .acciones__btn .acciones__cerrar { opacity: 1; transform: rotate(0) scale(1); }
/* Abierto: el botón se enciende en oro para que se note que está activo */
.acciones__toggle:checked ~ .acciones__btn {
  background: linear-gradient(145deg, #efc463, #c99733);
  color: #14100f;
  box-shadow: 0 12px 30px rgba(217, 164, 65, .5), 0 0 0 1px rgba(255, 255, 255, .2) inset;
}

/* --- La columna que sube ---
   column-reverse: el primer elemento del HTML queda PEGADO al botón.
   Así WhatsApp — lo más usado — es lo primero que aparece. */
.acciones__lista {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.acciones__toggle:checked ~ .acciones__lista { pointer-events: auto; }

.accion {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transform: translateY(22px) scale(.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  transition:
    opacity .26s ease,
    transform .36s cubic-bezier(.2, .8, .3, 1.35),
    box-shadow .25s ease;
}
.accion svg { width: 24px; height: 24px; }
.acciones__toggle:checked ~ .acciones__lista .accion { opacity: 1; transform: translateY(0) scale(1); }
/* Aparecen escalonadas: la de abajo primero. */
.acciones__toggle:checked ~ .acciones__lista .accion:nth-child(1) { transition-delay: .04s; }
.acciones__toggle:checked ~ .acciones__lista .accion:nth-child(2) { transition-delay: .09s; }
.acciones__toggle:checked ~ .acciones__lista .accion:nth-child(3) { transition-delay: .14s; }
.acciones__toggle:checked ~ .acciones__lista .accion:nth-child(4) { transition-delay: .19s; }
.acciones__toggle:checked ~ .acciones__lista .accion:nth-child(5) { transition-delay: .24s; }
.accion:hover { transform: scale(1.14) translateY(-2px); text-decoration: none; box-shadow: 0 12px 26px rgba(0, 0, 0, .6); }

/* =====================================================================
   EL COLOR DE CADA RED — profundos y llamativos
   Cada uno lleva un DEGRADADO en diagonal (da volumen) y un brillo
   interior arriba (da relieve), como si la ficha tuviera luz encima.
   La sombra de abajo toma el color de la red, así el icono "brilla"
   sobre el fondo negro.
   ===================================================================== */

/* WhatsApp — verde intenso */
.accion--wa {
  background: linear-gradient(150deg, #35e878 0%, #12a44a 52%, #076b2c 100%);
  color: #ffffff;
  box-shadow:
    0 10px 26px rgba(18, 164, 74, .55),
    0 1px 0 rgba(255, 255, 255, .35) inset,
    0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* Instagram — el degradado clásico, más saturado */
.accion--ig {
  background: linear-gradient(150deg, #ffd451 0%, #f52d6d 45%, #a325c9 75%, #6a2ce0 100%);
  color: #ffffff;
  box-shadow:
    0 10px 26px rgba(203, 40, 142, .55),
    0 1px 0 rgba(255, 255, 255, .35) inset,
    0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* TikTok — negro con el cian y el rosa de la marca */
.accion--tt {
  background: linear-gradient(150deg, #2a2a2a 0%, #060606 55%, #000000 100%);
  color: #25f4ee;
  box-shadow:
    0 10px 26px rgba(37, 244, 238, .38),
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 0 0 1.5px rgba(37, 244, 238, .5) inset,
    -3px 2px 0 -1px rgba(254, 44, 85, .55);
}

/* Facebook — azul profundo */
.accion--fb {
  background: linear-gradient(150deg, #4a9bff 0%, #1877f2 48%, #0a49a8 100%);
  color: #ffffff;
  box-shadow:
    0 10px 26px rgba(24, 119, 242, .6),
    0 1px 0 rgba(255, 255, 255, .35) inset,
    0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* Ubicación — el rojo bermellón de la casa, más hondo */
.accion--ub {
  background: linear-gradient(150deg, #f0535a 0%, #c1272d 50%, #7d0f14 100%);
  color: #ffffff;
  box-shadow:
    0 10px 26px rgba(193, 39, 45, .62),
    0 1px 0 rgba(255, 255, 255, .32) inset,
    0 0 0 1px rgba(255, 255, 255, .12) inset;
}

/* Y al pasar el dedo, un brillo más fuerte */
.accion--wa:hover { box-shadow: 0 14px 32px rgba(18, 164, 74, .8), 0 1px 0 rgba(255, 255, 255, .4) inset; }
.accion--ig:hover { box-shadow: 0 14px 32px rgba(203, 40, 142, .8), 0 1px 0 rgba(255, 255, 255, .4) inset; }
.accion--tt:hover { box-shadow: 0 14px 32px rgba(37, 244, 238, .6), 0 0 0 1.5px rgba(37, 244, 238, .7) inset; }
.accion--fb:hover { box-shadow: 0 14px 32px rgba(24, 119, 242, .85), 0 1px 0 rgba(255, 255, 255, .4) inset; }
.accion--ub:hover { box-shadow: 0 14px 32px rgba(193, 39, 45, .85), 0 1px 0 rgba(255, 255, 255, .4) inset; }

@media (max-width: 560px) {
  .acciones { right: 12px; bottom: 12px; gap: 10px; }
  .acciones__btn { width: 56px; height: 56px; }
  .acciones__btn svg { width: 25px; height: 25px; }
  .acciones__lista { gap: 10px; }
  .accion { width: 46px; height: 46px; }
  .accion svg { width: 22px; height: 22px; }
}

/* Si el sistema pide menos movimiento, aparece sin animación */
@media (prefers-reduced-motion: reduce) {
  .accion, .acciones__btn, .acciones__btn svg { transition: none; }
  .accion { transform: none; }
}

/* --------------------------------------------------------------- formulario */
.formulario {
  display: grid;
  gap: 16px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 30px;
  box-shadow: var(--sombra);
}
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 700; font-size: .92rem; }
.campo input,
.campo select,
.campo textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  width: 100%;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--oro);
  outline-offset: 1px;
  border-color: var(--oro);
}
.campo--ancho { grid-column: 1 / -1; }

/* ------------------------------------------------------------------- mapa */
.marco-mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  line-height: 0;
}
.marco-mapa iframe { width: 100%; height: 380px; border: 0; }

/* -------------------------------------------------------------- imágenes */
.partido__marco--foto {
  padding: 0;
  border: 0;
  display: block;
  min-height: 0;
  background: var(--papel-3);
}
.partido__marco--foto img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.galeria img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.galeria--destacada img:first-child {
  grid-column: 1 / -1;
  height: 380px;
}

/* ------------------------------------------------------------ responsive */
/* ⚠️ AQUÍ ESTABA EL MENÚ VIEJO, CON FONDO CLARO (--papel).
   Ese bloque pintaba el menú del celular en blanco y beige, del diseño
   anterior al tema oscuro, y se peleaba con las reglas nuevas de abajo
   (que lo ponen en negro). Ganaba unas veces y otras no: de ahí que el
   menú saliera con los colores mezclados.

   Se quitó entero. El menú del celular se define UNA sola vez, al final
   del archivo, en la sección «EL MENÚ DEL CELULAR». Aquí solo queda lo
   que no tiene que ver con el menú. */
@media (max-width: 900px) {
  .partido { grid-template-columns: 1fr; gap: 26px; }

  .cabecera-in { position: relative; gap: 10px; }

  /* La cabecera tenía más contenido del que cabe en un celular: el lema
     largo "Kung Fu · Tai Chi · Medicina China" mide unos 258 px, y junto
     con el logo, el selector de idioma y el botón ☰ pasaba de 450 px en
     una pantalla de 360. El ☰ quedaba fuera y lo recortaba el overflow.
     Aquí se aprieta el espacio y se protegen los botones para que nunca
     se encojan. */
  .marca { min-width: 0; }
  .idiomas,
  .menu-btn { flex: none; }
}

/* El lema largo solo cabe de tableta para arriba */
@media (max-width: 700px) {
  .marca small { display: none; }
  .marca span { font-size: 1.08rem; }
}

@media (max-width: 430px) {
  .cabecera-in { gap: 8px; }
  .marca span { font-size: 1rem; }
  .marca-logo { width: 40px; height: 40px; }
  .menu-btn { padding: 7px 10px; font-size: 1.45rem; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .tarjeta { padding: 22px; }
  .boton { width: 100%; }
  .grupo-botones { flex-direction: column; }
}

/* -------------------------------------------------------------- impresión */
@media print {
  .cabecera, .acciones, .cta-final, .aviso-borrador { display: none; }
  body { background: #fff; }
}

/* =====================================================================
   FENG SHUI · galerías y los Cinco Elementos
   Ver docs/12-BAZI-Y-FENG-SHUI.md
   ===================================================================== */

/* Galería de fotos: se acomoda sola, sin dejar huecos */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
/* Para fotos verticales de personas o terapias */
.galeria--alta img { aspect-ratio: 3 / 4; }
.galeria--ancha img { aspect-ratio: 4 / 3; }

/* Una sola foto destacada dentro de un bloque de texto */
.foto-suelta {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-top: 24px;
  width: 100%;
}

/* Insignia de elemento 五行: un punto de color y el nombre del elemento */
.elemento {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
  margin-bottom: .6em;
}
.elemento__punto {
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--gris);
  flex: none;
}
.elemento--metal  .elemento__punto { background: var(--el-metal); }
.elemento--agua   .elemento__punto { background: var(--el-agua); }
.elemento--madera .elemento__punto { background: var(--el-madera); }
.elemento--tierra .elemento__punto { background: var(--el-tierra); }
.elemento--fuego  .elemento__punto { background: var(--el-fuego); }

/* Cada disciplina lleva su elemento: un filete arriba, como un sello */
.tarjeta--metal  { border-top: 3px solid var(--el-metal); }
.tarjeta--agua   { border-top: 3px solid var(--el-agua); }
.tarjeta--madera { border-top: 3px solid var(--el-madera); }
.tarjeta--tierra { border-top: 3px solid var(--el-tierra); }
.tarjeta--fuego  { border-top: 3px solid var(--el-fuego); }

/* Las cuatro técnicas de medicina china: ficha con foto y explicación */
.tecnica {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  margin-bottom: 26px;
}
.tecnica__foto { min-height: 260px; }
.tecnica__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tecnica__texto { padding: 30px 32px; }
.tecnica__texto h3 { margin-top: 0; }
.tecnica--invertida .tecnica__foto { order: 2; }

@media (max-width: 780px) {
  .tecnica { grid-template-columns: 1fr; }
  .tecnica--invertida .tecnica__foto { order: 0; }
  .tecnica__foto { min-height: 220px; }
  .tecnica__texto { padding: 24px 22px; }
}

/* =====================================================================
   MOVIMIENTO E INTERFAZ
   Lo que hace que la página se sienta viva: aparición al bajar, zoom suave
   en las fotos y tarjetas que se levantan al pasar el cursor. Todo con CSS
   y un poco de JavaScript propio: sin librerías ni dependencias.
   ===================================================================== */

/* --- Negro más profundo, con una luz tenue de horno --- */
.seccion--oscura {
  background:
    radial-gradient(130% 95% at 50% 0%, rgba(193, 39, 45, .12) 0%, transparent 58%),
    #0d0b0a;
}

/* --- Barra superior: teléfono y llamada a la acción siempre a la vista --- */
.barra-superior {
  background: #0a0908;
  color: #b3aba0;
  font-size: .82rem;
  letter-spacing: .03em;
  border-bottom: 1px solid rgba(217, 164, 65, .16);
}
.barra-superior .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  flex-wrap: wrap;
}
.barra-superior a { color: #d6cfc4; }
.barra-superior a:hover { color: var(--oro); text-decoration: none; }
.barra-superior__dato {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.barra-superior__cta {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  color: var(--oro);
}
@media (max-width: 720px) {
  .barra-superior { font-size: .76rem; }
  .barra-superior .contenedor { justify-content: center; min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  .barra-superior__dato { gap: 12px; }
}

/* --- Aparición al bajar con el scroll --- */
.revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
}
/* Si el navegador no ejecuta JavaScript, el contenido se ve igual */
.no-js .revela { opacity: 1; transform: none; }

/* --- Tarjetas: se levantan al pasar el cursor --- */
.tarjeta {
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), box-shadow .32s ease;
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-fuerte);
}
a.tarjeta:hover { text-decoration: none; }

/* --- Fotos: zoom lento --- */
.galeria img,
.partido__marco--foto img,
.foto-zoom img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .5s ease;
}
.partido__marco--foto,
.foto-zoom { overflow: hidden; }
.galeria img:hover,
.partido__marco--foto:hover img,
.foto-zoom:hover img { transform: scale(1.045); }

/* --- Fotos de los maestros: blanco y negro que se enciende al pasar --- */
.foto-bn img { filter: grayscale(1) contrast(1.06); }
.foto-bn:hover img { filter: grayscale(0) contrast(1); }

/* --- Franja de credenciales, como las insignias de prensa --- */
.credenciales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 34px;
  padding: 24px 0;
  border-top: 1px solid rgba(217, 164, 65, .22);
  border-bottom: 1px solid rgba(217, 164, 65, .22);
}
.credenciales__item {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .8rem;
  font-weight: 500;
  color: #a49c92;
  text-align: center;
  line-height: 1.45;
}
.credenciales__item strong { color: var(--oro); display: block; font-weight: 600; }

/* =====================================================================
   MUESTRARIO · la sección de impacto
   Negro pleno, letras blancas con oro y bermellón, y unas líneas que se
   mueven despacio por detrás. Es la sección que grita, la que se recuerda.
   ===================================================================== */
.impacto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #080706;
  color: #ffffff;
  padding: clamp(56px, 9vw, 104px) 0;
}

/* Las líneas que viajan: una trama diagonal tenuísima en movimiento.
   Muy suaves, para que no le quiten nitidez a las letras que van encima. */
.impacto::before {
  content: '';
  position: absolute;
  inset: -60% -30%;
  z-index: -2;
  background: repeating-linear-gradient(
    118deg,
    transparent 0 44px,
    rgba(217, 164, 65, .055) 44px 45px
  );
  animation: lineas-viajan 30s linear infinite;
}
@keyframes lineas-viajan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-45px, 90px, 0); }
}

/* Un resplandor de fuego arriba a la izquierda y otro de oro abajo a la derecha */
.impacto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 16% 0%, rgba(193, 39, 45, .13) 0%, transparent 62%),
    radial-gradient(62% 62% at 94% 100%, rgba(217, 164, 65, .09) 0%, transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .impacto::before { animation: none; }
}

.impacto__antetitulo {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .8rem;
  font-weight: 500;
  color: var(--oro);
  margin-bottom: 1em;
}
.impacto h2 {
  color: #ffffff;
  font-size: clamp(2.1rem, 5.6vw, 3.7rem);
  line-height: 1;
  letter-spacing: .01em;
  margin-bottom: .5em;
}
.impacto h2 span { color: var(--oro); }
.impacto h2 em {
  font-style: normal;
  color: var(--rojo);
}
.impacto__entrada {
  color: #bdb5aa;
  font-size: 1.08rem;
  max-width: 62ch;
  margin-bottom: 0;
}

/* La frase que complementa el titular.
   En condensada y oro: tiene que tener la misma energía que el titular. */
.impacto__lema {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .006em;
  font-size: clamp(1.05rem, 2.2vw, 1.32rem);
  line-height: 1.42;
  color: var(--oro);
  max-width: 46ch;
  margin: 0 0 1.4em;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cada pieza: la foto y, pegada debajo, su frase de sabiduría */
.impacto__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Las frases van en INTER 800, no en Oswald.
   Oswald es una fuente de cartel: condensada, con trazos finos y
   contraformas estrechas. A tamaño pequeño sobre negro, eso se ve débil.
   Inter está diseñada para PANTALLA: trazos más gruesos y parejos, y por
   eso se lee nítida a este tamaño. La condensada se queda donde brilla:
   en los titulares grandes y en los rótulos. */
/* Las frases van con la fuente PROPIA DEL SISTEMA, no con una fuente web.
   Motivo: cuando el navegador pide un peso que la fuente no tiene de
   verdad, lo FABRICA engordando el trazo — y eso se ve exactamente como
   una sombra o un emborronamiento. Segoe UI sí tiene los pesos reales,
   así que el navegador no inventa nada y la letra sale limpia.
   Además es más FINA que Inter 800: menos masa, más elegancia. */
.impacto__frase {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .006em;
  font-size: 1.02rem;
  line-height: 1.5;
  /* PLATEADO en vez de blanco puro. El blanco puro sobre negro produce
     el contraste máximo, y eso hace que cualquier borde de la letra
     (antialiasing) se note como un halo. Un plateado baja un punto el
     contraste y el borde se ve limpio — además de verse más elegante. */
  color: #dee2e8;
  text-align: center;
  margin: 20px 0 0;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.impacto__fotos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 48px;
}
.impacto__foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  /* Sombra corta y suave. Antes era de 26px hacia abajo con 60px de
     desenfoque: se derramaba JUSTO debajo de la foto, en la franja
     donde va la frase, y oscurecía ese trozo. Eso se veía como si la
     letra tuviera una sombra detrás. */
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  border: 1px solid rgba(217, 164, 65, .16);
}
.impacto__foto img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.impacto__foto:hover img { transform: scale(1.05); }
.impacto__foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 52px 14px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: center;
  font-size: .78rem;
  color: #ffffff;
}
.impacto__foto figcaption strong {
  display: block;
  color: #f5c451;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .1em;
  margin-bottom: 0;
  /* Sin sombra: ya hay un degradado oscuro detrás que da el contraste.
     Así la letra queda limpia, sin ese aire de "sombra" que embota. */
  text-shadow: none;
}

/* Los botones, sobre negro */
.impacto .boton--borde { color: #ffffff; border-color: rgba(255, 255, 255, .38); }
.impacto .boton--borde:hover { background: #ffffff; color: var(--tinta); }

@media (max-width: 980px) {
  .impacto__fotos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .impacto__fotos { grid-template-columns: 1fr; gap: 16px; }
  .impacto__foto img { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   TEMA NEGRO PARA TODO EL SITIO
   Fondo negro, letras blancas y líneas amarillas. Las secciones quedan
   transparentes para que la trama dorada del fondo se siga viendo.
   ===================================================================== */

/* --- Las secciones dejan pasar el fondo negro --- */
.seccion { background: transparent; }
.seccion--papel2 { background: rgba(255, 255, 255, .022); }
.seccion--oscura { background: rgba(0, 0, 0, .42); }

/* --- Texto: blanco y hueso --- */
h1, h2, h3, h4 { color: #ffffff; }
p, li, dd, dt, td { color: #ded8ce; }
strong, b { color: #ffffff; }
.seccion--oscura p, .seccion--oscura li { color: #ded8ce; }

.antetitulo { color: var(--oro); }
.entrada { color: #cfc8bd; }
.seccion--oscura .antetitulo { color: var(--oro); }
.meta { color: #9a938a; }

blockquote {
  color: #f0ebe2;
  border-left: 3px solid var(--oro);
  padding-left: 1.2em;
}

/* --- Las líneas del sitio son amarillas --- */
hr { border: 0; border-top: 1px solid rgba(217, 164, 65, .3); }

/* --- Tarjetas --- */
.tarjeta {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(217, 164, 65, .22);
}
.tarjeta h3 { color: #ffffff; }
.tarjeta p { color: #cfc8bd; }
.tarjeta:hover { border-color: rgba(217, 164, 65, .52); }
.tarjeta--destacada { background: rgba(193, 39, 45, .13); border-color: rgba(193, 39, 45, .5); }
.tarjeta-icono { color: var(--oro); }

/* --- Listas --- */
.lista-tarjetas li {
  background: rgba(255, 255, 255, .032);
  border: 1px solid rgba(217, 164, 65, .18);
}
.lista-tarjetas li strong { color: #ffffff; }
.lista-tarjetas li span { color: #c6bfb4; }
.lista-ticks li { color: #ded8ce; }
.lista-ticks li::before { color: var(--oro); }

/* --- Avisos --- */
.aviso {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 164, 65, .22);
  color: #ded8ce;
}
.aviso strong { color: #ffffff; }
.aviso--info { border-left: 4px solid var(--oro); }
.aviso--ok { border-left: 4px solid #74a45c; background: rgba(116, 164, 92, .09); }
.aviso--salud { border-left: 4px solid var(--rojo); background: rgba(193, 39, 45, .09); }

/* --- Tablas: horarios de kung fu, planes y valores, horarios de atención,
       horarios de pilates y yoga ---
   OJO: el original usa «table.tabla», que pesa más que «.tabla». Hay que
   igualar la especificidad o el fondo blanco original gana y no se lee. */
table.tabla {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(217, 164, 65, .3);
  color: #ded8ce;
}
table.tabla th,
table.tabla td {
  border-bottom: 1px solid rgba(217, 164, 65, .2);
  color: #ded8ce;
}
table.tabla th {
  background: rgba(217, 164, 65, .13);
  color: var(--oro);
}
table.tabla td strong { color: #ffffff; }
table.tabla tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
table.tabla tr:last-child td { border-bottom: 0; }

/* --- Formulario: la caja también es negra, no solo los campos --- */
.formulario {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 164, 65, .24);
}

/* --- Preguntas frecuentes --- */
.faq details {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(217, 164, 65, .2);
}
.faq summary { color: #ffffff; }
.faq details > p,
.faq details > div,
.faq details > ul,
.faq p,
.faq li { color: #cfc8bd; }

/* --- Formulario de clase de prueba --- */
.campo label { color: #cfc8bd; }
.formulario input,
.formulario select,
.formulario textarea {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(217, 164, 65, .26);
  color: #ffffff;
}
.formulario input::placeholder,
.formulario textarea::placeholder { color: #8e877d; }
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  border-color: var(--oro);
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .16);
}
.formulario option { background: #16130f; color: #ffffff; }

/* --- Fichas de técnica --- */
.tecnica { background: rgba(255, 255, 255, .035); border: 1px solid rgba(217, 164, 65, .2); }
.tecnica__texto h3 { color: #ffffff; }
.tecnica__texto p { color: #cfc8bd; }
.tecnica__texto strong { color: #ffffff; }

/* --- Cifras y datos --- */
.dato__num { color: var(--oro); }
.dato__txt { color: #b8b1a6; }

/* --- Llamada final --- */
.cta-final { background: rgba(193, 39, 45, .14); border: 1px solid rgba(193, 39, 45, .4); }
.cta-final h2, .cta-final h3 { color: #ffffff; }
.cta-final p { color: #ded8ce; }

/* --- Marcos de las fotos, con filete dorado y fondo oscuro --- */
.partido__marco {
  background: #0d0b0a;
  border: 1px dashed rgba(217, 164, 65, .3);
  color: #8e877d;
}
.partido__marco--foto {
  background: #0d0b0a;
  border: 1px solid rgba(217, 164, 65, .2);
}
.galeria img { border: 1px solid rgba(217, 164, 65, .16); }
.foto-suelta { border: 1px solid rgba(217, 164, 65, .18); }

/* --- La insignia de elemento: sobre negro el gris no se lee --- */
.elemento { color: #b3aca1; }

/* --- Cabecera y pie --- */
.cabecera { background: rgba(10, 9, 8, .95); border-bottom: 1px solid rgba(217, 164, 65, .18); }
.marca span { color: #ffffff; }
.marca small { color: #a49c92; }
.nav a { color: #ded8ce; }
.nav a:hover { background: rgba(217, 164, 65, .14); color: var(--oro); text-decoration: none; }
.nav a.activo { color: var(--oro); }

/* ---------------------------------------------------------------
   MENÚ DEL CELULAR: fondo NEGRO
   El original lo tenía con fondo color papel (claro). Al pasar todo
   el sitio a tema negro, la letra quedó clara sobre fondo claro y el
   menú se volvió ILEGIBLE en el teléfono. Ahora el desplegable es
   negro, como el resto de la página.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav {
    background: #0d0b0a;
    border-bottom: 1px solid rgba(217, 164, 65, .32);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .78);
  }
  .nav a {
    color: #e9e4db;
    border-bottom: 1px solid rgba(217, 164, 65, .13);
    border-radius: 0;
  }
  .nav a:last-of-type { border-bottom: 0; }
  .nav a:hover { background: rgba(217, 164, 65, .16); color: var(--oro); }
  .nav a.activo { color: var(--oro); }
  .nav a.nav-cta {
    border-bottom: 0;
    border-radius: var(--radio);
    margin-top: 14px;
  }
}
.pie { background: #070605; border-top: 1px solid rgba(217, 164, 65, .2); }
.pie h4 { color: var(--oro); }
.pie p, .pie li, .pie a { color: #b8b1a6; }
.pie a:hover { color: var(--oro); }
.pie-legal, .aviso-salud-pie { color: #8e877d; }

/* --- Instituciones que avalan: SOLO los logos, sin ningún texto.
   Van con buen tamaño para que se lea todo lo que dice DENTRO de cada
   logo (los caracteres chinos y los nombres). --- */
.aval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 36px 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(217, 164, 65, .18);
}
.aval img {
  height: 78px;
  width: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.aval img:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
}
@media (max-width: 620px) {
  .aval { gap: 12px; padding: 28px 0 22px; }
  .aval img { height: 62px; }
}

/* --- Botones --- */
.boton--borde { color: #ffffff; border-color: rgba(255, 255, 255, .4); }
.boton--borde:hover { background: #ffffff; color: #14100f; }
.boton--principal { background: var(--rojo); color: #ffffff; }
.boton--principal:hover { background: #d8343b; color: #ffffff; }
.boton--oro { background: var(--oro); color: #171310; }
.boton--oro:hover { background: var(--oro-claro); color: #171310; }

/* --- El aviso amarillo de borrador: que se lea bien sobre negro --- */
.aviso-borrador { background: #d9a441; color: #1a1410; }

/* =====================================================================
   LÍNEAS VIAJERAS
   Dos barras de luz ROJA, gruesas, que cruzan la pantalla de izquierda a
   derecha muy despacio:
     · una ARRIBA, dentro de la cabecera, justo bajo el filete dorado
     · otra ABAJO, pegada al borde, por debajo del botón de WhatsApp
   ===================================================================== */
.linea-viajera {
  left: 0;
  right: 0;
  height: 16px;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
}
/* La de arriba vive dentro de la cabecera, que es "sticky": así se queda
   siempre a la vista justo debajo del borde amarillo. */
.linea-viajera--arriba {
  position: absolute;
  bottom: -16px;
}
/* La de abajo va fija al borde inferior de la ventana. */
.linea-viajera--abajo {
  position: fixed;
  bottom: 0;
}

.linea-viajera::before {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(193, 39, 45, .5) 16%,
    #c1272d 44%,
    #ff3b42 62%,
    rgba(193, 39, 45, .5) 86%,
    transparent 100%
  );
  box-shadow:
    0 0 18px rgba(255, 59, 66, .95),
    0 0 44px rgba(193, 39, 45, .6);
  animation: cruzar 9s linear infinite;
}
@keyframes cruzar {
  0%   { left: -45%; }
  100% { left: 100%; }
}

/* Si el sistema pide menos movimiento, las líneas quedan fijas y tenues */
@media (prefers-reduced-motion: reduce) {
  .linea-viajera::before {
    animation: none;
    left: 0;
    width: 100%;
    opacity: .5;
  }
}

/* =====================================================================
   QUE NINGUNA FOTO SE RECORTE
   Los marcos tienen proporción fija y rellenan con object-fit: cover,
   que RECORTA la foto para llenar la caja. En el celular el marco del
   muestrario era 4:3 (apaisado) mientras las fotos son verticales: se
   cortaban cabezas y pies.
   Con "contain" la foto entra COMPLETA en su marco, y como el fondo del
   marco es negro, el espacio que sobra no se ve.
   ===================================================================== */

/* En la portada, dentro del marco */
.impacto__foto img { object-fit: contain; }

/* =====================================================================
   REDES SOCIALES EN LA WEB
   Tres tarjetas con el color propio de cada plataforma. Llevan el perfil
   en una pestaña nueva, para no sacar al visitante de la web.
   ===================================================================== */.redes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}
.red {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, .13);
  border-left: 4px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .04);
  text-align: left;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.red:hover { transform: translateY(-4px); text-decoration: none; }
.red strong {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 600;
}
.red small {
  font-family: var(--sans);
  font-size: .84rem;
  color: #b8b1a6;
  letter-spacing: 0;
  text-transform: none;
  word-break: break-word;
}
/* El color de cada plataforma */
.red--ig { border-left-color: #e1306c; }
.red--ig:hover { background: rgba(225, 48, 108, .14); border-color: rgba(225, 48, 108, .5); }
.red--tt { border-left-color: #25f4ee; }
.red--tt:hover { background: rgba(37, 244, 238, .1); border-color: rgba(37, 244, 238, .45); }
.red--fb { border-left-color: #1877f2; }
.red--fb:hover { background: rgba(24, 119, 242, .14); border-color: rgba(24, 119, 242, .5); }

/* En el celular, además, el marco se suelta: cada foto toma su altura
   real y se ve entera, sin bordes negros de sobra. */
@media (max-width: 780px) {
  .impacto__foto img,
  .galeria img,
  .galeria--alta img,
  .galeria--ancha img,
  .partido__marco--foto img,
  .tecnica__foto img {
    aspect-ratio: auto;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .tecnica__foto { min-height: 0; }
  .galeria { grid-template-columns: 1fr; }
}

/* =====================================================================
   SELECTOR DE IDIOMA · un botón que despliega la lista hacia abajo
   Antes eran tres pastillas en línea. En el celular ocupaban tanto ancho
   que la cabecera desbordaba y la página se movía de lado a lado.
   Ahora es un solo botón compacto, siempre visible en la cabecera.
   ===================================================================== */
.idiomas {
  position: relative;
  margin-left: auto;
  flex: none;
}
.idiomas__toggle { display: none; }

.idiomas__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(217, 164, 65, .38);
  background: rgba(255, 255, 255, .045);
  color: var(--oro);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.idiomas__btn:hover { background: rgba(217, 164, 65, .14); border-color: rgba(217, 164, 65, .6); }
.idiomas__flecha {
  width: 15px;
  height: 15px;
  transition: transform .28s ease;
}
.idiomas__toggle:checked ~ .idiomas__btn { background: rgba(217, 164, 65, .18); border-color: var(--oro); }
.idiomas__toggle:checked ~ .idiomas__btn .idiomas__flecha { transform: rotate(180deg); }

.idiomas__lista {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  min-width: 172px;
  display: none;
  flex-direction: column;
  background: #0d0b0a;
  border: 1px solid rgba(217, 164, 65, .32);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .78);
  z-index: 90;
}
.idiomas__toggle:checked ~ .idiomas__lista {
  display: flex;
  animation: menuBaja .26s cubic-bezier(.2, .8, .3, 1) both;
  transform-origin: top right;
}
.idiomas__lista a {
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: .87rem;
  letter-spacing: 0;
  color: #ded8ce;
  border-bottom: 1px solid rgba(217, 164, 65, .1);
  white-space: nowrap;
}
.idiomas__lista a:last-child { border-bottom: 0; }
.idiomas__lista a:hover { background: rgba(217, 164, 65, .14); color: var(--oro); text-decoration: none; }
.idiomas__lista a.activo { color: var(--oro); font-weight: 700; background: rgba(217, 164, 65, .08); }
.idiomas__lista a.activo::after { content: ' ✓'; }

@media (max-width: 560px) {
  .idiomas__btn { padding: 6px 8px 6px 10px; font-size: .72rem; }
  .idiomas__lista { min-width: 158px; }
  .idiomas__lista a { padding: 11px 14px; font-size: .84rem; }
}

/* =====================================================================
   CHINO · 中文
   La tipografía condensada del sitio (Oswald) NO tiene caracteres
   chinos: el navegador los reemplazaría por otra fuente y se vería
   mezclado. Aquí se cambia todo a una fuente con chino de verdad.
   ===================================================================== */
body.zh {
  font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.zh h1,
body.zh h2,
body.zh h3,
body.zh h4,
body.zh .antetitulo,
body.zh .marca span,
body.zh .boton,
body.zh .nav a,
body.zh .dato__num,
body.zh .tarjeta-icono,
body.zh .tecnica__num {
  font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
body.zh h1 { line-height: 1.25; }
body.zh h2 { line-height: 1.3; }

/* =====================================================================
   LAS FOTOS DE LAS CLASES Y LAS TERAPIAS
   ---------------------------------------------------------------------
   Dos formas:
     · .foto-grande   — una foto ancha, a todo el ancho del contenedor
     · .foto-tarjeta  — dos o más en rejilla, con su pie de foto
   Las dos llevan esquinas redondeadas, borde dorado tenue y el pie
   debajo en letra pequeña. La imagen se recorta con object-fit para que
   todas las tarjetas queden de la misma altura.
   ===================================================================== */
.foto-grande,
.foto-tarjeta {
  margin: 0;
}
.foto-grande img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: cover;
  border: 1px solid rgba(217, 164, 65, .28);
  border-radius: var(--radio);
}
.foto-tarjeta img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid rgba(217, 164, 65, .28);
  border-radius: var(--radio);
}
.foto-grande figcaption,
.foto-tarjeta figcaption {
  margin-top: 9px;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--oro);
  text-align: center;
}

/* En el celular las fotos no pueden ser tan altas */
@media (max-width: 700px) {
  .foto-tarjeta img { height: 300px; object-position: center 18%; }
  .foto-grande img { max-height: 46vh; }
}

/* =====================================================================
   EL MENÚ DEL CELULAR
   ---------------------------------------------------------------------
   ⚠️ ESTA SECCIÓN ESTABA HECHA UN DESASTRE.

   El archivo tenía 12 bloques «@media (max-width: 900px)» seguidos y 96
   reglas del menú repetidas, cada una pintando los enlaces de un color
   distinto (rojo, azul, rojo, azul…). Como todas valían lo mismo, ganaba
   la última y el menú salía con los colores mezclados y sin criterio.

   Ahora hay UNA SOLA versión, y el color de cada enlace dice algo:
     · los cinco elementos 五行 pintan las cinco disciplinas
     · el negro tinta queda para lo neutro (Inicio, La Escuela, Blog, Contacto)
     · el enlace de la clase de prueba va aparte, en rojo lleno, porque es
       el que queremos que toquen
   ===================================================================== */

/* El botón ☰ solo aparece en pantalla de celular */
.menu-btn { display: none; }

@media (max-width: 900px) {

  /* --- El botón ☰, fijo arriba a la derecha --- */
  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 60;
    width: 46px;
    height: 46px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--papel);
    background: var(--rojo);
    border: 2px solid var(--oro);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease;
  }
  .menu-btn:hover,
  .menu-btn:active { background: var(--rojo-osc); transform: scale(1.06); }

  /* Cuando el menú está abierto, el botón se vuelve cuadrado con una ✕ */
  .menu-toggle:checked ~ .menu-btn {
    background: var(--tinta);
    border-color: var(--rojo);
    color: var(--oro);
  }

  /* --- El panel del menú --- */
  .menu-toggle:checked ~ .nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 55;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 68px 14px 20px;
    background: var(--tinta);
    border-bottom: 3px solid var(--oro);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
    animation: menuCae .24s cubic-bezier(.2, .8, .3, 1) both;
  }
  @keyframes menuCae {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* --- Cada enlace del menú --- */
  .menu-toggle:checked ~ .nav a,
  .menu-toggle:checked ~ .nav a:link,
  .menu-toggle:checked ~ .nav a:visited {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 13px 16px;
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--papel);
    background: rgba(255, 255, 255, .06);
    border: 0;
    border-left: 5px solid var(--oro);
    border-radius: 9px;
  }

  /* El que corresponde a la página abierta se marca */
  .menu-toggle:checked ~ .nav a.activo,
  .menu-toggle:checked ~ .nav a[aria-current="page"] {
    background: rgba(217, 164, 65, .18);
    color: var(--oro-claro);
  }

  /* ------------------------------------------------------------------
     EL COLOR DE CADA ENLACE · los cinco elementos 五行
     ------------------------------------------------------------------ */
  .menu-toggle:checked ~ .nav a[href*="kung"]        { border-left-color: var(--el-metal);  }
  .menu-toggle:checked ~ .nav a[href*="tai-chi"],
  .menu-toggle:checked ~ .nav a[href*="taichi"],
  .menu-toggle:checked ~ .nav a[href*="qi-gong"]     { border-left-color: var(--el-agua);   }
  .menu-toggle:checked ~ .nav a[href*="terapia"],
  .menu-toggle:checked ~ .nav a[href*="medicina"]    { border-left-color: var(--el-fuego);  }
  .menu-toggle:checked ~ .nav a[href*="pilates"]     { border-left-color: var(--el-tierra); }
  .menu-toggle:checked ~ .nav a[href*="instructor"],
  .menu-toggle:checked ~ .nav a[href*="escuela"]     { border-left-color: var(--papel-3);   }
  .menu-toggle:checked ~ .nav a[href*="blog"]        { border-left-color: var(--el-madera); }
  .menu-toggle:checked ~ .nav a[href*="contacto"]    { border-left-color: var(--oro);      }

  /* El último, la clase de prueba: es el que queremos que toquen */
  .menu-toggle:checked ~ .nav a[href*="clase"],
  .menu-toggle:checked ~ .nav a[href*="prueba"] {
    margin-top: 10px;
    color: var(--blanco);
    background: var(--rojo);
    border-left-color: var(--rojo-osc);
    font-weight: 700;
    text-align: center;
  }
}

/* En pantallas muy pequeñas, un poco más compacto */
@media (max-width: 430px) {
  .menu-btn { width: 42px; height: 42px; font-size: 1.35rem; }
  .menu-toggle:checked ~ .nav { padding: 62px 10px 16px; }
  .menu-toggle:checked ~ .nav a { padding: 11px 13px; font-size: .95rem; }
}

/* Quien pida menos movimiento, no ve la animación */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle:checked ~ .nav { animation: none; }
  .menu-btn { transition: none; }
}