/* ============================================================
   cursos.css — Las dos páginas de detalle de curso

   POR QUÉ EXISTE ESTE ARCHIVO
   sitio/cursos_fr.html y sitio/cursos_en.html son la misma página con otro
   idioma por defecto. Estos estilos vivían copiados dentro de cada una, unas
   cuatrocientas líneas por duplicado, y ya habían empezado a divergir sin que
   nadie lo notara: el relleno del héroe era 2rem en una y 1.8rem en la otra.
   Aquí están una sola vez.

   LA ESTRUCTURA QUE DESCRIBEN
   El contenido se reparte en dos columnas, no en una tira vertical:

     ┌──────────────────────────────┬──────────────┐
     │ nivel-intro    (promesa)     │ lateral      │
     │ nivel-resumen  (2 bloques)   │  · en corto  │
     │ nivel-edades   (3 fichas)    │  · inscribir │
     │                              │  · ruta      │
     └──────────────────────────────┴──────────────┘

   La columna lateral se queda fija al desplazarse: la llamada a la acción
   tiene que estar siempre a un clic, no al final de la página.
   ============================================================ */

.cursos-page { min-height: 100vh; background: var(--cream); }

/* ── Barra de vuelta e idioma ───────────────────────────────
   .back-bar, .back-link, .lang-switcher-inline y .lang-btn ya están en
   css/styles.css: las comparten capacitate, nosotros, certificado y estas
   dos. No se repiten aquí. Solo se cambia lo propio de esta página. */

/* Allí la barra es pegajosa. Aquí no puede serlo: debajo va la tira de
   niveles, que SÍ tiene que seguir a la vista —cambiar de nivel es lo que
   más se hace en esta página— y dos barras pegadas al mismo `top` se montan
   una encima de la otra. El enlace de vuelta no se usa a media lectura; la
   tira de niveles sí. */
.cursos-page .back-bar { position: static; }

/* Las banderas son SVG dibujados, no emoji: en Windows el emoji de bandera
   no se dibuja. Solo les falta el tamaño. */
.lang-btn .bandera { width: 20px; height: auto; border-radius: 2px; flex: none; }

/* ── Héroe ─────────────────────────────────────────────────
   Compacto a propósito. Antes había dos franjas azul marino seguidas —el
   héroe y la cabecera de la tarjeta— y la página empezaba con trescientos
   píxeles de adorno antes del primer dato útil. */
.cursos-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem);
  text-align: center; position: relative; overflow: hidden;
}
.cursos-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cursos-hero > * { position: relative; }
.cursos-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  color: var(--gold); margin: 0 0 0.6rem;
}
.cursos-hero p {
  color: rgba(255, 255, 255, 0.82); font-size: 1.02rem;
  max-width: 620px; margin: 0 auto;
}
/* La ruta completa, en el héroe: quien entra por «A1» tiene que ver de
   inmediato que hay un camino de cuatro niveles y cuánto dura cada uno. */
.hero-ruta {
  display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.1rem; padding: 0.45rem 1.1rem;
  border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: 50px;
  background: rgba(var(--gold-rgb), 0.1);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold-light);
}
.hero-ruta .ico { width: 16px; height: 16px; }

/* ── Tira de niveles, fija al desplazarse ──────────────────
   Cambiar de nivel es lo que más se hace en esta página. Al final del
   contenido las pestañas quedaban tres pantallas más arriba. */
.nivel-barra {
  position: sticky; top: var(--header-h, 76px); z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #ece4d4;
  box-shadow: 0 2px 14px rgba(var(--navy-rgb), 0.06);
}
.level-tabs {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 0.25rem; padding: 0 clamp(0.75rem, 3vw, 2rem);
  overflow-x: auto; scrollbar-width: none;
  /* Las pestañas también las pinta el JavaScript: sin sitio reservado, la
     tira nacía con alto cero y todo lo de abajo bajaba de golpe al llegar. */
  min-height: 3.35rem;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 900px) {
  /* En móvil no se envuelven: una tira que se desplaza se entiende mejor
     que cuatro filas de pestañas. */
  .level-tabs { flex-wrap: nowrap; justify-content: flex-start; }
}
.level-tabs::-webkit-scrollbar { display: none; }
.level-tab {
  flex: none;
  padding: 0.85rem 1.1rem; border: none; background: none;
  font-family: 'Nunito', sans-serif; font-size: 0.92rem; font-weight: 700;
  color: #8a8578; cursor: pointer; text-decoration: none;
  position: relative; white-space: nowrap; transition: color 0.2s;
}
.level-tab:hover { color: var(--navy); }
.level-tab.active { color: var(--navy); }
.level-tab.active::after {
  content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--gold);
}
.level-tab[data-level="A1"].active::after { background: #2980b9; }
.level-tab[data-level="A2"].active::after { background: #27ae60; }
.level-tab[data-level="B1"].active::after { background: #8e44ad; }
.level-tab[data-level="B2"].active::after { background: #c0392b; }
/* En móvil la pestaña larga («A1 · Principiante») no cabe: se queda el
   código, que es lo que identifica el nivel. */
@media (max-width: 560px) { .level-tab .tab-nombre { display: none; } }

/* ── Las dos columnas ──────────────────────────────────────
   340px es el ancho al que una tarjeta de acción se lee sin apretarse y
   deja sitio suficiente a la columna principal. minmax(0,1fr) —y no 1fr—
   porque un `1fr` no baja del tamaño de su contenido y una lista larga
   desbordaría la reja. */
.nivel-vista {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.25rem, 3vw, 2rem); align-items: start;
  /* SE RESERVA EL SITIO ANTES DE TENER EL CONTENIDO. Las dos columnas las
     pinta js/cursos-pagina.js, así que el hueco nacía con alto cero: el pie
     de página se dibujaba a media pantalla y, al llegar el contenido, TODO
     daba un salto hacia abajo. Medido: 0.57 de desplazamiento acumulado
     (bien es menos de 0.1). Con el sitio reservado, lo que llega lo rellena
     en vez de empujarlo. */
  min-height: 70vh;
}
@media (max-width: 1040px) {
  .nivel-vista { grid-template-columns: minmax(0, 1fr); }
  /* En una columna la tarjeta de acción va ARRIBA: en el móvil nadie baja
     tres fichas de contenido para encontrar el botón. */
  .nivel-lateral { order: -1; }
}

/* ── Columna principal ─────────────────────────────────────*/
.nivel-principal { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.nivel-intro {
  background: var(--white); border: 1px solid #ece4d4;
  border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: 0 4px 20px rgba(var(--navy-rgb), 0.05);
}
.nivel-mcer {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  color: var(--navy); font-weight: 800; font-size: 0.74rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: 50px;
}
.nivel-mcer .ico { width: 15px; height: 15px; color: var(--gold); }
.nivel-titulo {
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.9rem 0 0;
}
.nivel-titulo h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem); color: var(--navy); margin: 0;
}
.level-tag {
  background: var(--cream); border: 1px solid #ece4d4;
  color: #6b6558; padding: 0.25rem 0.8rem; border-radius: 50px;
  font-size: 0.78rem; font-weight: 700;
}
/* El gancho: lo primero que se lee al abrir un nivel. Va con el peso de una
   promesa, no con el de un párrafo más. */
.nivel-promesa {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--navy); line-height: 1.35; margin: 0.85rem 0 0.4rem;
}
.nivel-escena {
  color: #5b6577; font-size: 0.95rem; line-height: 1.6;
  margin: 0 0 0.9rem; padding-left: 0.85rem;
  border-left: 3px solid var(--gold);
}
.nivel-desc { color: #565049; font-size: 0.92rem; line-height: 1.75; margin: 0; }

/* Objetivos y habilidades, uno al lado del otro. */
.nivel-resumen {
  display: grid;
  /* min() evita que la pista tenga un suelo de 290px cuando el contenedor
     mide menos: es lo que desbordaba a 320px. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.25rem);
}
.nivel-bloque {
  background: var(--white); border: 1px solid #ece4d4;
  border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}
.nivel-bloque h4 {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Nunito', sans-serif; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy); margin: 0 0 0.8rem;
}
.nivel-bloque h4 .ico { width: 18px; height: 18px; color: var(--gold); }
.nivel-bloque ul { list-style: none; margin: 0; padding: 0; }
.nivel-bloque li {
  font-size: 0.88rem; color: #4a4a4a; line-height: 1.55; margin-bottom: 0.5rem;
  padding-left: 0.95rem; position: relative;
}
.nivel-bloque li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.nivel-bloque li:last-child { margin-bottom: 0; }
.nivel-bloque li strong { color: var(--navy); }

/* Contenido por edad. */
.nivel-edades > header { margin-bottom: 1rem; }
.nivel-edades h3 {
  font-family: 'Playfair Display', serif; font-size: 1.35rem;
  color: var(--navy); margin: 0 0 0.25rem;
}
.nivel-edades > header p { font-size: 0.9rem; color: #7a746a; margin: 0; }
.age-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
}
.age-card {
  background: var(--white); border: 1px solid #ece4d4;
  border-radius: var(--radius); padding: 1.25rem;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.age-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.age-header {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid #efe7d7;
}
.age-header .ico { width: 26px; height: 26px; color: var(--gold); flex: none; }
.age-header h3 {
  font-family: 'Playfair Display', serif; color: var(--navy);
  font-size: 1.1rem; margin: 0;
}
.topics-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.topics-list li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-bottom: 0.6rem; font-size: 0.87rem; color: #494340; line-height: 1.45;
}
.topics-list li::before {
  content: ''; flex: none; margin-top: 0.2em;
  width: 5px; height: 9px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}
.age-nota {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px dashed #e6ddcb;
  font-size: 0.82rem; color: #7a746a; font-style: italic; line-height: 1.5;
}
.age-nota .ico { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 0.15em; }

/* ── Columna lateral ───────────────────────────────────────*/
/* Se queda fija por debajo de la cabecera Y de la tira de niveles, que
   también es pegajosa: 48px es lo que mide la tira (0.85rem de relleno arriba
   y abajo sobre una línea de 0.92rem) y el resto es aire para que no quede
   pegada al canto. */
.nivel-lateral {
  display: grid; gap: 1rem;
  position: sticky; top: calc(var(--header-h, 76px) + 48px + 1rem);
}
@media (max-width: 1040px) { .nivel-lateral { position: static; } }

.lat-card {
  background: var(--white); border: 1px solid #ece4d4;
  border-radius: var(--radius-lg); padding: 1.35rem;
  box-shadow: 0 6px 26px rgba(var(--navy-rgb), 0.07);
}
.lat-card h4 {
  font-family: 'Nunito', sans-serif; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #8a8578; margin: 0 0 0.9rem;
}
.lat-datos { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.lat-datos li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0; border-bottom: 1px solid #f2ece0;
}
.lat-datos li:last-child { border-bottom: none; }
.lat-datos .ico { width: 19px; height: 19px; color: var(--gold); flex: none; }
.lat-datos b { font-size: 0.9rem; font-weight: 800; color: var(--navy); display: block; line-height: 1.25; }
.lat-datos em {
  font-style: normal; font-size: 0.72rem; color: #8a8578;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.nivel-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.2rem; border-radius: 10px;
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  background: var(--white); color: var(--navy); border: 1.5px solid #e0d8c8;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease, background 0.18s ease;
  min-height: 46px; text-align: center;
}
.nivel-btn + .nivel-btn { margin-top: 0.6rem; }
.nivel-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--navy-rgb), 0.1); }
.nivel-btn .ico { width: 18px; height: 18px; flex: none; }
.nivel-btn-primario { background: var(--navy); color: var(--white); border-color: var(--navy); }
.nivel-btn-primario:hover { background: var(--navy-light); }
/* El icono de WhatsApp ya trae su verde de marca. Por eso el botón NO se
   pinta de verde al pasar por encima: el globo del icono se perdería dentro
   del fondo. Se refuerza el borde y el fondo se aclara, que es suficiente. */
.nivel-btn-wa { border-color: #25D366; color: #12823f; }
.nivel-btn-wa:hover { background: #E6F9EE; border-color: #1EA855; color: #0E6B33; }

.lat-nota {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.9rem 0 0; font-size: 0.78rem; color: #7a746a; line-height: 1.5;
}
.lat-nota .ico { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 0.15em; }

/* La ruta A1 → B2 con el nivel actual marcado: sitúa a quien mira y enseña
   que hay tres niveles más que cursar. */
.lat-ruta { list-style: none; margin: 0; padding: 0; }
.lat-ruta li { padding: 0.2rem 0; }
.lat-ruta a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.3rem 0; text-decoration: none;
}
.lat-ruta .paso {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); border: 1px solid #e6ddcb;
  font-size: 0.76rem; font-weight: 800; color: #8a8578;
  transition: border-color 0.18s ease;
}
.lat-ruta .paso-nombre { font-size: 0.85rem; color: #6b6558; }
.lat-ruta li.actual .paso { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.lat-ruta li.actual .paso-nombre { color: var(--navy); font-weight: 800; }
.lat-ruta a:hover .paso { border-color: var(--gold); }

/* ── Cierre de la columna principal ────────────────────────*/
.contact-prompt {
  text-align: center; color: #7a746a; font-size: 0.9rem;
  padding: 0.5rem 1rem 0;
}
.contact-prompt a { color: var(--navy); font-weight: 800; text-decoration: underline; }
.contact-prompt a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .age-card, .nivel-btn { transition: none; }
  .age-card:hover, .nivel-btn:hover { transform: none; }
}