/* =====================================================================
   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 */
@media (max-width: 900px) {
  .partido { grid-template-columns: 1fr; gap: 26px; }

  .menu-btn { display: block; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 14px 18px;
  }
  /* El menú BAJA desde arriba, con una animación suave. */
  .menu-toggle:checked ~ .nav {
    display: flex;
    animation: menuBaja .3s cubic-bezier(.2, .8, .3, 1) both;
    transform-origin: top center;
  }
  @keyframes menuBaja {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav a { padding: 13px 10px; border-radius: 6px; font-size: 1rem; }
  .nav a.nav-cta { margin-left: 0; margin-top: 8px; text-align: center; }

  .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; }

/* =====================================================================
   EL BOTÓN ☰ DEL CELULAR — FIJO Y ROJO
   ---------------------------------------------------------------------
   Antes el ☰ vivía dentro de la cabecera: al bajar por la página se iba
   con ella y había que subir para abrir el menú. Ahora queda FIJO arriba
   a la derecha, igual que la bolita de redes sociales de abajo.

   Y el menú se abre DESDE ARRIBA con su animación, dejando libre el
   espacio del botón para que el primer nombre que se vea sea INICIO.
   ===================================================================== */
@media (max-width: 900px) {
  .menu-btn {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 60;
    color: var(--rojo);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    padding: 8px 12px;
    line-height: 1;
    font-size: 1.5rem;
  }
  .menu-btn:hover { color: var(--rojo-osc); border-color: var(--rojo); }

  /* El menú abierto ocupa la pantalla y se puede desplazar si no cabe. */
  .menu-toggle:checked ~ .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    max-height: 100dvh;
    overflow-y: auto;
    /* El espacio de arriba deja ver el botón y hace que el primer
       nombre sea INICIO, no el segundo. */
    padding: 62px 14px 24px;
    border-bottom: 1px solid var(--linea-fuerte);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  }

  /* Cada nombre entra uno detrás de otro, para que se vea el despliegue. */
  .menu-toggle:checked ~ .nav a {
    animation: nombreEntra .28s ease both;
  }
  .menu-toggle:checked ~ .nav a:nth-child(1) { animation-delay: .02s; }
  .menu-toggle:checked ~ .nav a:nth-child(2) { animation-delay: .06s; }
  .menu-toggle:checked ~ .nav a:nth-child(3) { animation-delay: .10s; }
  .menu-toggle:checked ~ .nav a:nth-child(4) { animation-delay: .14s; }
  .menu-toggle:checked ~ .nav a:nth-child(5) { animation-delay: .18s; }
  .menu-toggle:checked ~ .nav a:nth-child(6) { animation-delay: .22s; }
  .menu-toggle:checked ~ .nav a:nth-child(7) { animation-delay: .26s; }
  .menu-toggle:checked ~ .nav a:nth-child(8) { animation-delay: .30s; }
  @keyframes nombreEntra {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* =====================================================================
   EL ☰ DEL CELULAR — IGUAL QUE LA ESFERA DE REDES
   ---------------------------------------------------------------------
   Mismo patrón que .acciones:
     · botón REDONDO, FIJO, que no se mueve al bajar por la página
     · ROJO, del color del centro
     · al tocarlo se despliega el menú, y cada nombre entra uno a uno
     · y el primero que se ve es INICIO
   ===================================================================== */
@media (max-width: 900px) {
  /* --- El botón redondo, fijo arriba a la derecha --- */
  .menu-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 72;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
    color: #fff5f4;
    background: linear-gradient(145deg, #e03a30, #a81f18);
    box-shadow:
      0 12px 30px rgba(193, 39, 45, .55),
      0 0 0 1px rgba(255, 255, 255, .2) inset;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1.3), box-shadow .3s ease, background .3s ease;
  }
  .menu-btn:hover { transform: scale(1.06); }

  /* Abierto: el botón cambia a oscuro para que se note que está activo,
     igual que la esfera se enciende en oro. */
  .menu-toggle:checked ~ .menu-btn {
    background: linear-gradient(145deg, #3a2f28, #14100f);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 0 1px rgba(224, 58, 48, .5) inset;
  }

  /* --- El panel que se despliega, colgado del botón --- */
  .menu-toggle:checked ~ .nav {
    position: fixed;
    top: 78px;
    right: 14px;
    left: auto;
    z-index: 71;
    width: min(290px, calc(100vw - 28px));
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 16px;
    background: var(--papel);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .66);
    animation: menuCae .26s cubic-bezier(.2, .8, .3, 1) both;
    transform-origin: top right;
  }
  @keyframes menuCae {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Cada nombre entra uno detrás de otro. */
  .menu-toggle:checked ~ .nav a {
    animation: nombreEntra .26s ease both;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .menu-toggle:checked ~ .nav a:nth-child(1) { animation-delay: .02s; }
  .menu-toggle:checked ~ .nav a:nth-child(2) { animation-delay: .05s; }
  .menu-toggle:checked ~ .nav a:nth-child(3) { animation-delay: .08s; }
  .menu-toggle:checked ~ .nav a:nth-child(4) { animation-delay: .11s; }
  .menu-toggle:checked ~ .nav a:nth-child(5) { animation-delay: .14s; }
  .menu-toggle:checked ~ .nav a:nth-child(6) { animation-delay: .17s; }
  .menu-toggle:checked ~ .nav a:nth-child(7) { animation-delay: .20s; }
  .menu-toggle:checked ~ .nav a:nth-child(8) { animation-delay: .23s; }
  @keyframes nombreEntra {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* El primer nombre (INICIO) se resalta, para que se vea que empieza ahí. */
  .menu-toggle:checked ~ .nav a:first-child {
    background: rgba(224, 58, 48, .14);
    color: var(--rojo);
    font-weight: 700;
  }

  /* La cabecera deja libre el sitio del botón para que no lo tape. */
  .cabecera-in { padding-right: 66px; }
}

/* =====================================================================
   EL PANEL DEL MENÚ EN EL CELULAR — NEGRO CON LETRAS AMARILLAS
   ===================================================================== */
@media (max-width: 900px) {
  .menu-toggle:checked ~ .nav {
    background: #0d0b0a;
    border: 1px solid rgba(217, 164, 65, .45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
  }
  .menu-toggle:checked ~ .nav a,
  .menu-toggle:checked ~ .nav a:link,
  .menu-toggle:checked ~ .nav a:visited {
    color: #e8c368;                     /* amarillo del centro */
    background: transparent;
    border-bottom: 1px solid rgba(217, 164, 65, .12);
  }
  .menu-toggle:checked ~ .nav a:last-child { border-bottom: 0; }
  .menu-toggle:checked ~ .nav a:hover,
  .menu-toggle:checked ~ .nav a:active {
    color: #14100f;
    background: #d9a441;
  }
  /* El nombre de la página en la que estás, y el primero (INICIO). */
  .menu-toggle:checked ~ .nav a.activo,
  .menu-toggle:checked ~ .nav a:first-child {
    color: #ffd98a;
    background: rgba(217, 164, 65, .16);
    font-weight: 700;
  }
}

/* =====================================================================
   EL ☰ REALMENTE FIJO + AMARILLO MÁS VIVO
   ---------------------------------------------------------------------
   Por qué se perdía: cuando un elemento con position:fixed está DENTRO
   de otro que tiene transform, filter, backdrop-filter, perspective o
   will-change, el navegador lo pega a ESE contenedor en vez de a la
   pantalla. Por eso el botón se iba con la cabecera al bajar.

   Solución: se desactivan esas propiedades en los contenedores de la
   cabecera, y así el ☰ vuelve a quedar pegado a la PANTALLA, igual que
   la esfera de redes.
   ===================================================================== */
@media (max-width: 900px) {
  .cabecera,
  .cabecera-in,
  .marca,
  .marca-logo,
  .idioma,
  .idiomas {
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    contain: none !important;
  }

  .menu-btn {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 90 !important;
    margin: 0 !important;
  }

  /* El panel también pegado a la pantalla, no a la cabecera. */
  .menu-toggle:checked ~ .nav {
    position: fixed !important;
    top: 78px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 89 !important;
    background: #0a0908 !important;
  }

  /* --- Amarillo más vivo --- */
  .menu-toggle:checked ~ .nav a,
  .menu-toggle:checked ~ .nav a:link,
  .menu-toggle:checked ~ .nav a:visited {
    color: #ffd230 !important;                    /* amarillo vivo */
    font-weight: 600;
    letter-spacing: .01em;
  }
  .menu-toggle:checked ~ .nav a:hover,
  .menu-toggle:checked ~ .nav a:active {
    color: #0a0908 !important;
    background: #ffd230 !important;
  }
  .menu-toggle:checked ~ .nav a.activo,
  .menu-toggle:checked ~ .nav a:first-child {
    color: #ffe066 !important;
    background: rgba(255, 210, 48, .18) !important;
    font-weight: 800;
  }
}

/* =====================================================================
   EL PANEL DEL MENÚ — FONDO NEGRO AZULADO, LETRAS BLANCAS
   El mismo azul profundo de las fotos de la portada.
   ===================================================================== */
@media (max-width: 900px) {
  .menu-toggle:checked ~ .nav {
    background: #0d1723 !important;                    /* negro azulado */
    background-image: linear-gradient(180deg, #101c2b 0%, #0a121b 100%) !important;
    border: 1px solid rgba(120, 165, 215, .28) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05) inset !important;
  }

  .menu-toggle:checked ~ .nav a,
  .menu-toggle:checked ~ .nav a:link,
  .menu-toggle:checked ~ .nav a:visited {
    color: #ffffff !important;                         /* letras blancas */
    font-weight: 600;
    background: transparent !important;
    border-bottom: 1px solid rgba(120, 165, 215, .13);
  }
  .menu-toggle:checked ~ .nav a:last-child { border-bottom: 0; }

  .menu-toggle:checked ~ .nav a:hover,
  .menu-toggle:checked ~ .nav a:active {
    color: #0a121b !important;
    background: #ffffff !important;
  }

  /* La página en la que estás, y el primero (INICIO): blanco con fondo azul. */
  .menu-toggle:checked ~ .nav a.activo,
  .menu-toggle:checked ~ .nav a:first-child {
    color: #ffffff !important;
    background: rgba(90, 150, 220, .22) !important;
    font-weight: 800;
    border-left: 3px solid #5a96dc;
  }
}

/* =====================================================================
   EL MENÚ DEL CELULAR — KUNG FU, TERAPIAS, LA ESCUELA Y EL BLOG EN ROJO
   ---------------------------------------------------------------------
   Se buscan por el enlace (href), no por la posición, para que sigan
   funcionando aunque mañana se agregue o se quite una página.
   ===================================================================== */
@media (max-width: 900px) {
  .menu-toggle:checked ~ .nav a[href*="kung"],
  .menu-toggle:checked ~ .nav a[href*="terapia"],
  .menu-toggle:checked ~ .nav a[href*="escuela"],
  .menu-toggle:checked ~ .nav a[href*="blog"],
  .menu-toggle:checked ~ .nav a[href*="kung-fu"],
  .menu-toggle:checked ~ .nav a[href*="tai-chi"] {
    color: #ffffff !important;
    background: linear-gradient(145deg, #c1272d, #8e1a1f) !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    box-shadow: 0 2px 10px rgba(193, 39, 45, .35);
  }
  .menu-toggle:checked ~ .nav a[href*="kung"]:hover,
  .menu-toggle:checked ~ .nav a[href*="terapia"]:hover,
  .menu-toggle:checked ~ .nav a[href*="escuela"]:hover,
  .menu-toggle:checked ~ .nav a[href*="blog"]:hover,
  .menu-toggle:checked ~ .nav a[href*="kung-fu"]:hover,
  .menu-toggle:checked ~ .nav a[href*="tai-chi"]:hover {
    background: linear-gradient(145deg, #e0393f, #c1272d) !important;
    color: #ffffff !important;
  }
}

/* Refuerzo: se marca también por POSICIÓN, por si el enlace cambia.
   En el menú: 1 Inicio · 2 Kung Fu · 3 Tai Chi · 4 Terapias ·
   5 Pilates · 6 La Escuela · 7 El Instructor · 8 Blog · 9 Contacto */
@media (max-width: 900px) {
  .menu-toggle:checked ~ .nav a:nth-child(2),
  .menu-toggle:checked ~ .nav a:nth-child(4),
  .menu-toggle:checked ~ .nav a:nth-child(6),
  .menu-toggle:checked ~ .nav a:nth-child(8) {
    color: #ffffff !important;
    background: linear-gradient(145deg, #c1272d, #8e1a1f) !important;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(193, 39, 45, .35);
    border-bottom: 1px solid rgba(0, 0, 0, .3);
  }
  .menu-toggle:checked ~ .nav a:nth-child(2):hover,
  .menu-toggle:checked ~ .nav a:nth-child(4):hover,
  .menu-toggle:checked ~ .nav a:nth-child(6):hover,
  .menu-toggle:checked ~ .nav a:nth-child(8):hover {
    background: linear-gradient(145deg, #e0393f, #c1272d) !important;
    color: #ffffff !important;
  }
}

/* Tai Chi y Qi Gong: fondo AZUL con letra blanca (va después del rojo,
   así que manda sobre él). */
@media (max-width: 900px) {
  .menu-toggle:checked ~ .nav a[href*="tai-chi"],
  .menu-toggle:checked ~ .nav a[href*="taichi"],
  .menu-toggle:checked ~ .nav a[href*="qi-gong"],
  .menu-toggle:checked ~ .nav a:nth-child(3) {
    color: #ffffff !important;
    background: linear-gradient(145deg, #2f6fb0, #1b4576) !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px rgba(47, 111, 176, .4);
  }
  .menu-toggle:checked ~ .nav a[href*="tai-chi"]:hover,
  .menu-toggle:checked ~ .nav a:nth-child(3):hover {
    background: linear-gradient(145deg, #3f86cf, #2f6fb0) !important;
    color: #ffffff !important;
  }
}

/* =====================================================================
   EL RESTO DEL MENÚ: PILATES, EL INSTRUCTOR (AZUL) Y LA CLASE DE
   PRUEBA (MORADO). Va al final, así que manda sobre lo anterior.
   ===================================================================== */
@media (max-width: 900px) {
  /* --- Azul: Pilates y Yoga (5) y El Instructor (7) --- */
  .menu-toggle:checked ~ .nav a[href*="pilates"],
  .menu-toggle:checked ~ .nav a[href*="instructor"],
  .menu-toggle:checked ~ .nav a:nth-child(5),
  .menu-toggle:checked ~ .nav a:nth-child(7) {
    color: #ffffff !important;
    background: linear-gradient(145deg, #2f6fb0, #1b4576) !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px rgba(47, 111, 176, .4);
  }
  .menu-toggle:checked ~ .nav a:nth-child(5):hover,
  .menu-toggle:checked ~ .nav a:nth-child(7):hover {
    background: linear-gradient(145deg, #3f86cf, #2f6fb0) !important;
  }

  /* --- Morado: Clase de prueba gratuita (10) --- */
  .menu-toggle:checked ~ .nav a[href*="clase"],
  .menu-toggle:checked ~ .nav a[href*="prueba"],
  .menu-toggle:checked ~ .nav a[href*="contacto"],
  .menu-toggle:checked ~ .nav a:nth-child(10) {
    color: #ffffff !important;
    background: linear-gradient(145deg, #8a4bb8, #52277a) !important;
    font-weight: 700;
    border-bottom: 0;
    box-shadow: 0 3px 14px rgba(138, 75, 184, .5);
  }
  .menu-toggle:checked ~ .nav a:nth-child(10):hover {
    background: linear-gradient(145deg, #a15ed0, #6a3199) !important;
    color: #ffffff !important;
  }
}

/* =====================================================================
   INICIO Y CONTACTO: MEZCLA DE MORADO Y AZUL
   Va al final del archivo, así que manda sobre todo lo anterior.
   ===================================================================== */
@media (max-width: 900px) {
  .menu-toggle:checked ~ .nav a[href*="inicio"],
  .menu-toggle:checked ~ .nav a[href*="contacto"],
  .menu-toggle:checked ~ .nav a[href*="index"],
  .menu-toggle:checked ~ .nav a:first-child,
  .menu-toggle:checked ~ .nav a:nth-child(9) {
    color: #ffffff !important;
    background: linear-gradient(145deg, #6f4fc0 0%, #4a5cb8 45%, #2f6fb0 100%) !important;
    font-weight: 800;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 0 3px 14px rgba(90, 90, 200, .5);
  }
  .menu-toggle:checked ~ .nav a:first-child {
    border-left: 4px solid #c9a6ff;
  }
  .menu-toggle:checked ~ .nav a:nth-child(9) {
    border-left: 4px solid #8fd0ff;
  }
  .menu-toggle:checked ~ .nav a[href*="inicio"]:hover,
  .menu-toggle:checked ~ .nav a[href*="contacto"]:hover,
  .menu-toggle:checked ~ .nav a:first-child:hover,
  .menu-toggle:checked ~ .nav a:nth-child(9):hover {
    background: linear-gradient(145deg, #8a68d8 0%, #5f74d4 45%, #3f88cf 100%) !important;
    color: #ffffff !important;
  }
}