/* ==========================================================================
   Trainontech — Sistema de diseño
   Identidad: verde salvia + trazas de circuito (derivadas del logo)
   Tipografía: Fraunces (display) · Figtree (cuerpo) · IBM Plex Mono (etiquetas)
   ========================================================================== */

:root {
  /* Color */
  --tinta: #22312c;          /* texto principal */
  --gris: #5d6b65;           /* texto secundario */
  --salvia: #a0bbb2;         /* color de marca */
  --salvia-suave: #dce6e1;   /* bordes, fondos suaves */
  --niebla: #f3f6f4;         /* secciones alternas */
  --verde-hondo: #45735f;    /* interactivo: botones, enlaces (AA sobre blanco) */
  --verde-noche: #24463a;    /* footer, panel oscuro */
  --blanco: #ffffff;

  /* Tipografía */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Métricas */
  --ancho: 1140px;
  --radio: 12px;
  --seccion: clamp(4rem, 9vw, 6.5rem);
  --cabecera-alto: 76px;
  --fs-micro: 0.75rem;       /* mínimo para etiquetas en mayúsculas (12px): nada por debajo */
  --anillo: 0 0 0 3px rgba(69, 115, 95, 0.25); /* anillo de foco en campos */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera-alto) + 16px); }
body {
  font-family: var(--f-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--verde-hondo); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

:focus-visible {
  outline: 2px solid var(--verde-hondo);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Utilidades ---------- */
.contenedor {
  width: min(var(--ancho), 100% - 3rem);
  margin-inline: auto;
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.salto-contenido {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--verde-noche); color: #fff;
  padding: 0.6rem 1.2rem; border-radius: 0 0 8px 8px;
  text-decoration: none; transition: top 0.2s;
}
.salto-contenido:focus { top: 0; }

/* acciones al pie de una sección (sustituyen estilos inline) */
.acciones-seccion {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.acciones-seccion.centradas { justify-content: center; }
.sin-pie { padding-bottom: 0; }
.sin-cabeza { padding-top: 0; }
.campo-corto { max-width: 140px; }
.al-centro { justify-self: center; }
.eyebrow.centrado { justify-content: center; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-weight: 600; line-height: 1.15; text-wrap: balance; }

.titulo-hero {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 550;
  letter-spacing: -0.01em;
}
.titulo-seccion {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 550;
}
.titulo-pagina {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 550;
  color: #fff;
}

/* Eyebrow: hereda la firma original de mayúsculas espaciadas */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--verde-hondo);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
/* punto terminal de traza, como en el logo */
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--salvia);
  border-radius: 1px;
  position: relative;
}
.eyebrow::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--salvia);
  order: -1;
  margin-right: -0.45rem;
}

.intro-seccion {
  color: var(--gris);
  max-width: 56ch;
  margin-top: 0.9rem;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.7rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.boton-primario {
  background: var(--verde-hondo);
  color: #fff;
}
.boton-primario:hover { background: var(--verde-noche); transform: translateY(-1px); }
.boton-secundario {
  background: transparent;
  color: var(--verde-hondo);
  border-color: var(--salvia);
}
.boton-secundario:hover { border-color: var(--verde-hondo); background: var(--niebla); }
.boton { min-height: 44px; }
.boton:focus-visible { outline-offset: 3px; }
/* botones sobre fondos oscuros (heros interiores, banda CTA) */
.hero-pagina .boton-primario { background: var(--salvia); color: var(--verde-noche); }
.hero-pagina .boton-primario:hover { background: #fff; }
.hero-pagina .boton-secundario { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero-pagina .boton-secundario:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.hero-pagina .boton:focus-visible { outline-color: #fff; }
.hero-pagina .hero-acciones { margin-top: 1.8rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--salvia-suave);
}
.cabecera-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 76px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--tinta);
  margin-right: auto;
}
.marca img { width: 44px; height: 44px; }
.marca-nombre {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}
.marca-nombre span { color: var(--verde-hondo); }

.nav-principal ul {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  list-style: none;
  padding: 0;
}
.nav-principal a:not(.boton) {
  text-decoration: none;
  color: var(--gris);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-principal a:not(.boton):hover { color: var(--tinta); }
.nav-principal a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--salvia);
}
.nav-principal .boton { padding: 0.55rem 1.2rem; font-size: 0.95rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--salvia-suave);
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  color: var(--tinta);
  place-items: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icono-cerrar { display: none; }
.nav-toggle[aria-expanded="true"] .icono-abrir { display: none; }
.nav-toggle[aria-expanded="true"] .icono-cerrar { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav-principal {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--salvia-suave);
    display: none;
    box-shadow: 0 18px 30px -18px rgba(34, 49, 44, 0.25);
  }
  .nav-principal.abierta { display: block; }
  .nav-principal ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.8rem 1.5rem 1.4rem;
  }
  .nav-principal li { border-bottom: 1px solid var(--niebla); }
  .nav-principal li:last-child { border-bottom: 0; padding-top: 0.9rem; }
  .nav-principal a:not(.boton) { display: block; padding: 0.85rem 0; }
  .nav-principal .boton { width: 100%; justify-content: center; }
}

/* ---------- Hero (portada) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blanco) 55%, var(--niebla) 100%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero-texto p {
  color: var(--gris);
  font-size: 1.15rem;
  max-width: 46ch;
  margin-top: 1.3rem;
}
.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}
.hero-nota {
  margin-top: 1.6rem;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--gris);
  letter-spacing: 0.04em;
}
/* áreas destacadas del hero: enlaces directos al catálogo filtrado */
.hero-areas {
  list-style: none;
  padding: 0;
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.hero-areas .hero-areas-titulo {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-right: 0.3rem;
}
.hero-areas a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--salvia-suave);
  border-radius: 99px;
  background: #fff;
  color: var(--verde-noche);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.hero-areas a:hover { border-color: var(--verde-hondo); background: var(--niebla); }

.hero-visual { position: relative; }
.hero-visual .panel {
  position: absolute;
  inset: -12% -30% -12% 18%;
  background: var(--salvia);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: var(--radio);
  z-index: 0;
}
.hero-visual .trazas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-visual img {
  position: relative;
  z-index: 2;
  border-radius: var(--radio);
  box-shadow: 0 24px 48px -24px rgba(36, 70, 58, 0.45);
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 62% 35%;
}

/* animación de trazado de circuito */
.traza-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: trazar 1.6s cubic-bezier(0.6, 0, 0.2, 1) 0.3s forwards;
}
.traza-path.retardo { animation-delay: 0.75s; }
.traza-punto {
  fill: rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: aparecer 0.4s ease 1.7s forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-visual .panel { inset: -8% -12% -8% 25%; }
}

/* ---------- Hero de página interior ---------- */
.hero-pagina {
  position: relative;
  background: var(--verde-noche);
  color: #fff;
  overflow: hidden;
}
.hero-pagina .fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}
.hero-pagina .velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--verde-noche) 30%, rgba(36, 70, 58, 0.55) 100%);
}
.hero-pagina .contenedor {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.hero-pagina .eyebrow { color: var(--salvia); }
.hero-pagina .eyebrow::before,
.hero-pagina .eyebrow::after { background: var(--salvia); }
.hero-pagina p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin-top: 1rem;
  font-size: 1.1rem;
}
.hero-pagina .migas { margin-bottom: 1.4rem; }

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--seccion); }
.seccion-niebla { background: var(--niebla); }
.seccion-cabecera { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.seccion-cabecera.centrada { margin-inline: auto; text-align: center; }
.seccion-cabecera.centrada .eyebrow { justify-content: center; }
.seccion-cabecera.centrada .intro-seccion { margin-inline: auto; }

/* ---------- Features (Qué esperar) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem 2rem;
}
.feature { position: relative; padding-top: 1.4rem; }
/* traza superior con punto terminal: cada feature es un nodo del circuito */
.feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--salvia);
  border-radius: 1px;
}
.feature::after {
  content: "";
  position: absolute;
  top: -3px; left: 44px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--salvia);
}
.feature h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.45rem;
}
.feature p { color: var(--gris); font-size: 0.96rem; }
.feature .icono {
  width: 42px; height: 42px;
  color: var(--verde-hondo);
  margin-bottom: 1rem;
}
.feature .icono svg { width: 100%; height: 100%; }

@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------- Banda CTA (asesoramiento) ---------- */
.banda-cta {
  background: var(--verde-noche);
  border-radius: var(--radio);
  color: #fff;
  padding: clamp(2.2rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  position: relative;
  overflow: hidden;
}
.banda-cta::before {
  /* traza decorativa de fondo */
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border: 2px solid rgba(160, 187, 178, 0.25);
  border-radius: 40px;
  transform: rotate(12deg);
  pointer-events: none;
}
.banda-cta h2 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 550;
}
.banda-cta p { color: rgba(255, 255, 255, 0.8); margin-top: 0.5rem; max-width: 48ch; }
.banda-cta .boton-primario { background: var(--salvia); color: var(--verde-noche); }
.banda-cta .boton-primario:hover { background: #fff; }

/* ---------- Filosofía ---------- */
.filosofia {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.filosofia-visual { position: relative; max-width: 380px; }
.filosofia-visual::before {
  content: "";
  position: absolute;
  inset: 10% -8% -8% 10%;
  background: var(--salvia-suave);
  border-radius: 34% 66% 62% 38% / 40% 36% 64% 60%;
  z-index: 0;
}
.filosofia-visual img {
  position: relative;
  z-index: 1;
  border-radius: 28px 70px 28px 70px;
}
@media (max-width: 760px) {
  .filosofia { grid-template-columns: 1fr; }
  .filosofia-visual { margin-inline: auto; }
}

/* ---------- Tarjetas de novedades ---------- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.tarjeta {
  position: relative;
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tarjeta:hover,
.tarjeta:focus-within {
  transform: translateY(-4px);
  border-color: var(--salvia);
  box-shadow: 0 20px 36px -22px rgba(36, 70, 58, 0.35);
}
.tarjeta:focus-within { outline: 2px solid var(--verde-hondo); outline-offset: 3px; }
.tarjeta[hidden] { display: none; }
.tarjeta-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--niebla); }
.tarjeta-media img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder con traza para posts sin imagen */
.tarjeta-media.sin-imagen {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--salvia-suave), var(--salvia));
}
.tarjeta-media.sin-imagen svg { width: 88px; height: 88px; opacity: 0.75; }
.tarjeta-cuerpo { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.tarjeta-fecha {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.tarjeta-titulo { font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.tarjeta-titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta-titulo a:focus-visible { outline: none; }
.tarjeta-titulo a:hover { color: var(--verde-hondo); }
.tarjeta-etiqueta {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-hondo);
  background: var(--niebla);
  border: 1px solid var(--salvia-suave);
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
}
@media (max-width: 1000px) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tarjetas { grid-template-columns: 1fr; } }

/* ---------- Filtros (novedades) ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.4rem;
}
.filtro {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fff;
  color: var(--gris);
  border: 1px solid var(--salvia-suave);
  border-radius: 99px;
  min-height: 38px;
  padding: 0.45rem 1rem;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.filtros-resultado {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  margin: -1.4rem 0 1.6rem;
}
.filtro:hover { border-color: var(--salvia); color: var(--tinta); }
.filtro[aria-pressed="true"] {
  background: var(--verde-hondo);
  border-color: var(--verde-hondo);
  color: #fff;
}

/* ---------- Categorías de cursos ---------- */
.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.4rem;
}
.categoria {
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  padding: 1.6rem 1.4rem 1.5rem;
  text-decoration: none;
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.categoria:hover {
  transform: translateY(-4px);
  border-color: var(--salvia);
  box-shadow: 0 18px 32px -22px rgba(36, 70, 58, 0.35);
}
.categoria img { width: 56px; height: 56px; }
.categoria h3 { font-size: 1.02rem; font-weight: 700; }
.categoria .cuenta {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: -0.4rem;
}
.categoria .flecha {
  position: absolute;
  top: 1.3rem; right: 1.3rem;
  color: var(--salvia);
  transition: color 0.2s, transform 0.2s;
}
.categoria:hover .flecha { color: var(--verde-hondo); transform: translateX(3px); }

/* lista de puntos clave (formación) */
.puntos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.puntos li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  color: var(--gris);
}
.puntos li::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--salvia);
  border: 2px solid var(--verde-hondo);
  transform: translateY(1px);
}

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 1.2rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-weight: 600; font-size: 0.95rem; }
.campo input,
.campo textarea {
  background: #fff;
  border: 1.5px solid var(--salvia-suave);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--tinta);
  width: 100%;
  transition: border-color 0.15s;
}
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde-hondo);
  box-shadow: var(--anillo);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #b3543f; }
.campo input[aria-invalid="true"]:focus,
.campo textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 84, 63, 0.22); }
.campo .error {
  color: #a34a36;
  font-size: 0.85rem;
  display: none;
}
.campo .error::before { content: "⚠ "; }
.campo.con-error .error { display: block; }
.campo-consentimiento { gap: 0.3rem; }
.campo-consentimiento.con-error .campo-check span { color: #a34a36; }
.campo-consentimiento.con-error .campo-check input { outline: 2px solid #b3543f; outline-offset: 2px; }
.campo-contexto {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-hondo);
  background: var(--niebla);
  border: 1px solid var(--salvia-suave);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
}
.campo-contexto[hidden] { display: none; }

.campo-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--gris);
}
.campo-check input {
  flex: none;
  width: 1.2rem; height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: var(--verde-hondo);
}
.campo-check { min-height: 32px; cursor: pointer; }

.texto-legal {
  font-size: 0.82rem;
  color: var(--gris);
  background: var(--niebla);
  border-left: 3px solid var(--salvia);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  line-height: 1.55;
}

.form-mensaje {
  display: none;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  font-weight: 600;
}
.form-mensaje.exito {
  display: block;
  background: var(--salvia-suave);
  color: var(--verde-noche);
}
.form-mensaje.error {
  display: block;
  background: #fbeae6;
  border: 1px solid #e3b9ab;
  color: #8c3f2c;
}

/* honeypot: fuera de la vista y del tabulador, pero rellenable por un bot */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario[aria-busy="true"] { opacity: 0.9; }
.formulario button[disabled] { opacity: 0.75; cursor: not-allowed; }
.formulario[aria-busy="true"] button[disabled] { cursor: progress; }

/* newsletter en dos columnas */
.newsletter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .newsletter-grid { grid-template-columns: 1fr; } }

/* ---------- Banner financiación ---------- */
.financiacion {
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  padding: clamp(1.2rem, 3vw, 2rem);
  background: #fff;
}
.financiacion img { margin-inline: auto; border-radius: 6px; }
.financiacion figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gris);
  margin-top: 1rem;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--verde-noche);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--seccion);
}
.footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}
.footer-marca img { width: 52px; height: 52px; margin-bottom: 1rem; }
.footer-marca p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); max-width: 30ch; }
.footer h2 {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--salvia);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer ul a { font-size: 0.95rem; }
.footer-social { display: flex; gap: 0.8rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(160, 187, 178, 0.4);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.footer-social a:hover {
  border-color: var(--salvia);
  background: rgba(160, 187, 178, 0.12);
  text-decoration: none;
}
.footer-social svg { width: 18px; height: 18px; }
.footer-legal {
  border-top: 1px solid rgba(160, 187, 178, 0.2);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Banner de cookies ---------- */
.cookies {
  position: fixed;
  bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  box-shadow: 0 24px 48px -20px rgba(34, 49, 44, 0.35);
  padding: 1.4rem 1.6rem;
  z-index: 300;
  display: none;
}
.cookies.visible { display: block; }
.cookies p { font-size: 0.9rem; color: var(--gris); }
.cookies-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}
.cookies-acciones .boton { padding: 0.55rem 1.2rem; font-size: 0.9rem; }
.cookies-acciones .enlace-config {
  background: none;
  border: none;
  color: var(--gris);
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 0.55rem 0.4rem;
}

/* ---------- Páginas legales ---------- */
.articulo-legal {
  max-width: 760px;
  margin-inline: auto;
}
.articulo-legal h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 550;
  margin-bottom: 2rem;
}
.articulo-legal h2, .articulo-legal h3 {
  font-size: 1.25rem;
  margin: 2.2rem 0 0.8rem;
}
.articulo-legal h4 { margin: 1.8rem 0 0.6rem; }
.articulo-legal p, .articulo-legal li { color: var(--gris); margin-bottom: 0.9rem; }
.articulo-legal ul, .articulo-legal ol { padding-left: 1.4rem; }
.articulo-legal .migas { margin-bottom: 1.6rem; }
.tabla-scroll { overflow-x: auto; margin: 1.2rem 0; -webkit-overflow-scrolling: touch; }
.tabla-scroll table { margin: 0; min-width: 520px; }
.articulo-legal table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  font-size: 0.92rem;
}
.articulo-legal th, .articulo-legal td {
  border: 1px solid var(--salvia-suave);
  padding: 0.6rem 0.8rem;
  text-align: left;
  color: var(--gris);
}
.articulo-legal th { background: var(--niebla); color: var(--tinta); }

/* ---------- Tarjetas de curso (páginas de categoría) ---------- */
.cursos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6rem;
}
.curso {
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.curso:hover {
  transform: translateY(-4px);
  border-color: var(--salvia);
  box-shadow: 0 18px 32px -22px rgba(36, 70, 58, 0.35);
}
.curso img { width: 52px; height: 52px; }
.curso h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.curso p { color: var(--gris); font-size: 0.94rem; flex: 1; }
.curso-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.curso[hidden] { display: none; }
.badge {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 99px;
  border: 1px solid var(--salvia-suave);
  color: var(--gris);
  background: var(--niebla);
}
.badge-modalidad { color: var(--verde-hondo); border-color: var(--salvia); background: #fff; }
.curso .curso-cta {
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--verde-hondo);
  margin-top: 0.2rem;
}
.curso .curso-cta:hover { text-decoration: underline; }

/* franja de información de modalidades/niveles */
.info-cursos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.info-cursos .item {
  border-left: 2px solid var(--salvia);
  padding-left: 1.1rem;
}
.info-cursos h3 {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-hondo);
  margin-bottom: 0.4rem;
}
.info-cursos p { color: var(--gris); font-size: 0.92rem; }
@media (max-width: 900px) { .info-cursos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .info-cursos { grid-template-columns: 1fr; } }

/* ---------- Artículo de blog ---------- */
.articulo {
  max-width: 760px;
  margin-inline: auto;
}
.articulo h2 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 550;
  margin: 2.4rem 0 0.9rem;
}
.articulo h3 { font-size: 1.15rem; margin: 1.9rem 0 0.6rem; }
.articulo p, .articulo li { color: var(--gris); margin-bottom: 0.9rem; }
.articulo ul, .articulo ol { padding-left: 1.4rem; }
.articulo img {
  border-radius: var(--radio);
  margin: 1.4rem 0;
  border: 1px solid var(--salvia-suave);
}
.articulo strong { color: var(--tinta); }
.articulo figure { margin: 1.4rem 0; }
.articulo figure img { margin: 0; }
.articulo figcaption { font-size: 0.85rem; color: var(--gris); margin-top: 0.5rem; }
.articulo-pie {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--salvia-suave);
}
.aviso-original {
  background: var(--niebla);
  border-left: 3px solid var(--salvia);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  color: var(--gris);
  margin: 1.5rem 0;
}

/* ---------- Animación de aparición al hacer scroll ---------- */
.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}
/* cuando GSAP está activo, el CSS cede el control de los reveals */
.gsap .revelar {
  opacity: 1;
  transform: none;
  transition: none;
}

/* sombra del header al hacer scroll (activada por GSAP) */
.cabecera { transition: box-shadow 0.25s ease; }
.cabecera.con-scroll { box-shadow: 0 10px 28px -18px rgba(34, 49, 44, 0.28); }

/* ==========================================================================
   Cursos online — catálogo (cursos.html), ficha de curso y de itinerario (cursos/*.html)
   Generados por scripts/generar_cursos.py a partir de assets/data/cursos.json
   ========================================================================== */

/* ---------- Cifras del hero del catálogo ---------- */
.hero-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;
  margin-top: 2rem;
}
.hero-cifras div { display: grid; gap: 0.2rem; }
.hero-cifras strong {
  font-family: var(--f-display);
  font-size: 1.9rem;
  font-weight: 550;
  line-height: 1;
  color: #fff;
}
.hero-cifras span {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--salvia);
}

/* ---------- Elementos comunes: nivel, estado, herramientas, etiquetas ---------- */
.nivel { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.nivel-meter { display: inline-flex; gap: 3px; align-items: center; }
.nivel-meter i { display: block; width: 13px; height: 4px; border-radius: 2px; background: var(--salvia-suave); }
.nivel-meter i.on { background: var(--verde-hondo); }
.badge-oscuro .nivel-meter i { background: rgba(255, 255, 255, 0.22); }
.badge-oscuro .nivel-meter i.on { background: var(--salvia); }

.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 99px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.2;
}
.estado-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.estado-pill.disponible { background: var(--niebla); color: var(--verde-hondo); border-color: var(--salvia-suave); }
.estado-pill.demanda { background: #fbf1d6; color: #6b5316; border-color: #f0d3ab; }
.estado-pill.proximamente { background: #e7ecf6; color: #3b4f86; border-color: #c3cdef; }

.herramientas { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.herramienta {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--verde-noche);
  background: var(--niebla);
  border: 1px solid var(--salvia-suave);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; }
.btag {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
a.btag:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ---------- Layout del catálogo ---------- */
.catalogo-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.catalogo-filtros {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 0.4rem;
  scrollbar-width: thin;
}
.filtros-toggle { display: none; }
.filtros-toggle svg { width: 18px; height: 18px; }

.filtros-form { display: grid; gap: 1.5rem; }
.filtros-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.1rem; }
.filtros-form legend,
.filtro-plegable summary,
.filtro-select label {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-hondo);
  margin-bottom: 0.55rem;
}
.filtro-opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 34px;
  padding: 0.15rem 0;
  font-size: 0.93rem;
  color: var(--gris);
  cursor: pointer;
}
.filtro-opcion:hover { color: var(--tinta); }
.filtro-opcion input {
  flex: none;
  width: 1.05rem; height: 1.05rem;
  margin: 0;
  accent-color: var(--verde-hondo);
}
.filtro-opcion input:checked + span { color: var(--tinta); font-weight: 600; }
.filtro-opcion .cuenta {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--gris);
}
.filtro-plegable summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}
.filtro-plegable summary::-webkit-details-marker { display: none; }
.filtro-plegable summary .chevron { width: 16px; height: 16px; transition: transform 0.2s; }
.filtro-plegable[open] summary .chevron { transform: rotate(180deg); }
.filtro-plegable summary .cuenta { margin-left: auto; font-weight: 500; letter-spacing: 0; color: var(--gris); }
.filtro-plegable fieldset { margin-top: 0.55rem; }
.filtro-select { display: grid; gap: 0.1rem; }
.filtro-select select,
.catalogo-orden select {
  min-height: 44px;
  width: 100%;
  border: 1.5px solid var(--salvia-suave);
  border-radius: 8px;
  padding: 0.5rem 2.3rem 0.5rem 0.9rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345735f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 16px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--tinta);
  font-size: 0.92rem;
  cursor: pointer;
}
.filtro-select select:focus,
.catalogo-orden select:focus { outline: none; border-color: var(--verde-hondo); box-shadow: var(--anillo); }
.filtros-aplicar { display: none; }
.catalogo-mas { display: flex; justify-content: center; margin-top: 2rem; }
.catalogo-mas [hidden] { display: none; }
.filtros-borrar {
  justify-self: start;
  background: none;
  border: 0;
  color: var(--verde-hondo);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: underline;
  padding: 0.4rem 0;
}

/* barra superior: buscador + orden */
.catalogo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.buscador { position: relative; flex: 1 1 260px; }
.buscador > svg {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--gris);
  pointer-events: none;
}
.buscador input {
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--salvia-suave);
  border-radius: 99px;
  padding: 0.65rem 1.1rem 0.65rem 2.8rem;
  background: #fff;
  color: var(--tinta);
  transition: border-color 0.15s;
}
.buscador input:focus { outline: none; border-color: var(--verde-hondo); box-shadow: var(--anillo); }
.buscador input::-webkit-search-cancel-button { cursor: pointer; }
.catalogo-orden { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--gris); }
.catalogo-orden select { width: auto; min-height: 46px; }

.catalogo-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-bottom: 1.6rem;
  min-height: 34px;
}
.catalogo-contador {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.chips-activos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--niebla);
  color: var(--verde-noche);
  border: 1px solid var(--salvia);
  border-radius: 99px;
  padding: 0.35rem 0.8rem;
  min-height: 36px;
  transition: background-color 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--salvia-suave); border-color: var(--verde-hondo); }

/* ---------- Tarjetas de curso ---------- */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
.curso-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.curso-card:hover,
.curso-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--salvia);
  box-shadow: 0 20px 36px -22px rgba(36, 70, 58, 0.35);
}
.curso-card-media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--verde-noche);
}
.curso-card-media > img:first-child {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.5s ease;
}
.curso-card:hover .curso-card-media > img:first-child { transform: scale(1.04); }
.curso-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 70, 58, 0.1) 20%, rgba(36, 70, 58, 0.78) 100%);
}
.curso-card-icono {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  z-index: 2;
  width: 46px; height: 46px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  color: var(--verde-hondo);
  display: grid;
  place-items: center;
}
.curso-card-icono svg { width: 100%; height: 100%; }
.curso-card-play {
  position: absolute;
  right: 1rem; bottom: 0.9rem;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--verde-noche);
  display: grid;
  place-items: center;
  transition: transform 0.2s, background-color 0.2s;
}
.curso-card-play svg { width: 18px; height: 18px; margin-left: 2px; }
.curso-card:hover .curso-card-play { transform: scale(1.08); background: #fff; }

.estado-badge {
  position: absolute;
  top: 0.8rem; left: 0.9rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  background: #fff;
  color: var(--verde-noche);
}
.estado-badge.demanda { background: #fbf1d6; color: #6b5316; }
.estado-badge.proximamente { background: #e7ecf6; color: #3b4f86; }

.curso-card-cuerpo {
  padding: 1.1rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.curso-card-cat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.curso-card-codigo { color: var(--verde-hondo); font-weight: 600; flex: none; white-space: nowrap; }
.curso-card-cat > span:last-child { min-width: 0; }
.codigo-inline { white-space: nowrap; }
.curso-card-titulo { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.curso-card-titulo a { color: var(--tinta); text-decoration: none; }
.curso-card-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.curso-card-titulo a:focus-visible { outline: none; }
.curso-card:focus-within { outline: 2px solid var(--verde-hondo); outline-offset: 3px; }
.curso-card-sub {
  color: var(--gris);
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.curso-card .herramientas { margin-top: auto; padding-top: 0.3rem; }
.curso-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  font-size: 0.8rem;
  color: var(--gris);
  padding-top: 0.7rem;
  border-top: 1px solid var(--salvia-suave);
}
.curso-card-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.curso-card-meta svg { width: 15px; height: 15px; color: var(--salvia); }

/* el atributo hidden debe ganar al display de tarjetas y grid al filtrar */
.curso-card[hidden],
.cursos-grid[hidden] { display: none; }

/* estado vacío */
.estado-vacio,
.catalogo-vacio {
  display: none;
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1.5px dashed var(--salvia);
  border-radius: var(--radio);
  background: var(--niebla);
}
.estado-vacio.visible,
.catalogo-vacio.visible { display: block; }
.estado-vacio h2, .catalogo-vacio h2 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 550; }
.estado-vacio p, .catalogo-vacio p { color: var(--gris); margin: 0.6rem auto 1.4rem; max-width: 46ch; }

/* ---------- Itinerarios (bootcamps y rutas) ---------- */
.itinerarios-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.itinerario-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  padding: 1.5rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.itinerario-card:hover,
.itinerario-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--salvia);
  box-shadow: 0 20px 36px -22px rgba(36, 70, 58, 0.35);
}
.itinerario-card:focus-within { outline: 2px solid var(--verde-hondo); outline-offset: 3px; }
.itinerario-num {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-hondo);
}
.itinerario-num span {
  background: var(--niebla);
  border: 1px solid var(--salvia-suave);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-weight: 600;
}
.itinerario-titulo { font-family: var(--f-display); font-size: 1.35rem; font-weight: 550; line-height: 1.25; }
.itinerario-titulo a { color: var(--tinta); text-decoration: none; }
.itinerario-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.itinerario-titulo a:focus-visible { outline: none; }
.itinerario-sub { color: var(--gris); font-size: 0.93rem; line-height: 1.55; }
.fase-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.fase-chip {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--verde-noche);
  background: var(--niebla);
  border: 1px solid var(--salvia-suave);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
}
.fase-chip + .fase-chip::before { content: "→ "; color: var(--salvia); margin-left: -0.2rem; }
.itinerario-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--salvia-suave);
  font-size: 0.82rem;
  color: var(--gris);
}
.itinerario-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.itinerario-meta svg { width: 15px; height: 15px; color: var(--salvia); }
.itinerario-meta .estado-pill { margin-left: auto; }

/* estados explicados */
.estados-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.estado-card {
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  padding: 1.3rem 1.4rem;
  background: #fff;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  justify-items: start;
}
.estado-card p { color: var(--gris); font-size: 0.92rem; line-height: 1.55; }

@media (max-width: 1000px) { .cursos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .catalogo-layout { grid-template-columns: 1fr; }
  .catalogo-filtros { position: static; display: none; max-height: none; overflow: visible; }
  .catalogo-filtros.abierto {
    display: block;
    border: 1px solid var(--salvia-suave);
    border-radius: var(--radio);
    padding: 1.4rem;
    margin-bottom: 1.4rem;
  }
  .catalogo-filtros { order: 1; }
  .catalogo-resultados { display: contents; }
  .catalogo-barra { order: 0; }
  .catalogo-estado { order: 2; }
  .cursos-grid { order: 3; }
  .catalogo-vacio { order: 4; }
  .catalogo-mas { order: 5; }
  .filtros-toggle { display: inline-flex; padding: 0.6rem 1.1rem; }
  .filtros-form { grid-template-columns: repeat(2, 1fr); }
  .filtros-form .filtro-plegable,
  .filtros-form .filtro-select,
  .filtros-form .filtros-borrar,
  .filtros-form .filtros-aplicar { grid-column: 1 / -1; }
  .filtros-aplicar { display: inline-flex; justify-content: center; }
  .filtro-plegable fieldset { grid-template-columns: repeat(2, 1fr); }
  .itinerarios-grid, .estados-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cursos-grid { grid-template-columns: 1fr; }
  .hero-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1rem; }
  .filtros-form, .filtro-plegable fieldset { grid-template-columns: 1fr; }
  .catalogo-orden { width: 100%; }
  .catalogo-orden select { flex: 1; }
}

/* ---------- Ficha: hero ---------- */
.hero-ficha .contenedor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(5rem, 9vw, 7rem);
}
.hero-ficha .titulo-pagina { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.hero-ficha .ficha-sub { font-size: 1.12rem; max-width: 60ch; }
.migas {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.migas a { color: var(--verde-hondo); text-decoration: none; display: inline-block; padding: 0.2rem 0; }
.migas a:hover { text-decoration: underline; }
.migas li + li::before { content: "/"; margin-right: 0.45rem; opacity: 0.5; }
.migas [aria-current="page"] { color: var(--tinta); }
.hero-pagina .migas { color: rgba(255, 255, 255, 0.72); }
.hero-pagina .migas a { color: rgba(255, 255, 255, 0.85); }
.hero-pagina .migas a:hover { color: #fff; }
.hero-pagina .migas [aria-current="page"] { color: #fff; }

.ficha-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1.4rem;
  font-size: 0.92rem;
}
.badge-oscuro { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.badge.badge-oscuro { display: inline-flex; align-items: center; }
.ficha-cifra { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(255, 255, 255, 0.85); }
.ficha-cifra svg { width: 16px; height: 16px; color: var(--salvia); }
.hero-ficha .ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.ficha-datos span { display: inline-flex; align-items: center; gap: 0.4rem; }
.ficha-datos svg { width: 15px; height: 15px; color: var(--salvia); flex: none; }

/* ---------- Ficha: cuerpo ---------- */
.ficha-cuerpo { padding-top: 0; }
.ficha-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.ficha-main { display: grid; gap: clamp(2.4rem, 5vw, 3.5rem); padding-top: clamp(2.4rem, 5vw, 3.5rem); }
.bloque h2 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 550;
  margin-bottom: 1.1rem;
}
.bloque-aprenderas {
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #fff;
}
.lista-check {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.6rem;
}
.lista-check li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--gris); font-size: 0.95rem; }
.lista-check svg { width: 18px; height: 18px; flex: none; color: var(--verde-hondo); margin-top: 0.2rem; }

.contenido-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.contenido-cabecera h2 { margin-bottom: 0.3rem; }
.contenido-resumen { font-size: 0.9rem; color: var(--gris); }
.expandir-todo {
  background: none;
  border: 0;
  color: var(--verde-hondo);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: underline;
  padding: 0.4rem 0;
}

.temario {
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  overflow: hidden;
}
.tema + .tema { border-top: 1px solid var(--salvia-suave); }
.tema summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 58px;
  padding: 0.9rem 1.2rem;
  background: var(--niebla);
  font-weight: 600;
  transition: background-color 0.15s;
}
.tema summary:hover { background: var(--salvia-suave); }
.tema summary::-webkit-details-marker { display: none; }
.tema summary .chevron { width: 18px; height: 18px; flex: none; color: var(--verde-hondo); transition: transform 0.2s; }
.tema[open] summary .chevron { transform: rotate(180deg); }
.tema-titulo { flex: 1; }
.tema-meta { font-size: 0.82rem; font-weight: 400; color: var(--gris); white-space: nowrap; }
.lecciones { list-style: none; padding: 0.4rem 0; margin: 0; }
.leccion {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.55rem 1.2rem;
  font-size: 0.93rem;
  color: var(--gris);
}
.leccion > svg { width: 16px; height: 16px; flex: none; color: var(--salvia); margin-top: 0.2rem; }
.leccion-titulo { flex: 1; }

.descripcion p { color: var(--gris); margin-bottom: 1rem; }
.descripcion p:last-child { margin-bottom: 0; }

/* fases de un itinerario */
.fase {
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
}
.fase + .fase { margin-top: 1rem; }
.fase-cabecera { padding: 1rem 1.3rem; background: var(--niebla); border-bottom: 1px solid var(--salvia-suave); }
.fase-cabecera h3 { font-size: 1.05rem; font-weight: 700; }
.fase-cabecera p { color: var(--gris); font-size: 0.9rem; margin-top: 0.3rem; }
.fase-cursos { list-style: none; padding: 0; margin: 0; }
.fase-cursos li + li { border-top: 1px solid var(--salvia-suave); }
.fase-cursos a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.3rem;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background-color 0.15s;
}
.fase-cursos a:hover { background: var(--niebla); }
.fase-cursos .rc { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600; color: var(--verde-hondo); flex: none; width: 4.4rem; }
.fase-cursos .ft { flex: 1; }
.fase-cursos .estado-pill { flex: none; }

/* ---------- Ficha: tarjeta lateral (sticky) ---------- */
.ficha-aside {
  margin-top: calc(-1 * clamp(4rem, 8vw, 6rem));
  position: sticky;
  top: 92px;
  display: grid;
  gap: 1.2rem;
}
.ficha-card {
  background: #fff;
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(36, 70, 58, 0.45);
}
.ficha-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--verde-noche); }
.ficha-card-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.ficha-card-icono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(36, 70, 58, 0.15), rgba(36, 70, 58, 0.7));
}
.ficha-card-icono svg {
  width: 64px; height: 64px;
  padding: 14px;
  color: var(--verde-hondo);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.vista-previa-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, rgba(36, 70, 58, 0.1), rgba(36, 70, 58, 0.75));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.vista-previa-btn .play {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--verde-noche);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}
.vista-previa-btn .play svg { width: 26px; height: 26px; margin-left: 3px; }
.vista-previa-btn:hover .play { transform: scale(1.08); }

.ficha-card-cuerpo { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: 1.1rem; }
.ficha-estado { display: grid; gap: 0.6rem; justify-items: start; }
.ficha-estado .estado-pill { font-size: 0.72rem; padding: 0.4rem 0.85rem; }
.ficha-acciones { display: grid; gap: 0.6rem; }
.ficha-acciones .boton { justify-content: center; width: 100%; text-align: center; }
.ficha-nota { font-size: 0.84rem; color: var(--gris); line-height: 1.5; }
.ficha-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.9rem;
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--salvia-suave);
  border-bottom: 1px solid var(--salvia-suave);
  font-size: 0.88rem;
}
.ficha-dl dt {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.15rem;
}
.ficha-dl dd { margin: 0; color: var(--tinta); }
.ficha-dl dd.mono { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 600; color: var(--verde-hondo); }
.incluye h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.7rem; }
.incluye ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9rem; color: var(--gris); }
.incluye li { display: flex; gap: 0.65rem; align-items: flex-start; }
.incluye svg { width: 18px; height: 18px; flex: none; color: var(--verde-hondo); margin-top: 0.1rem; }

.ficha-rel {
  border: 1px solid var(--salvia-suave);
  border-radius: var(--radio);
  background: var(--niebla);
  padding: 1.1rem 1.3rem;
}
.ficha-rel h3 {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-hondo);
  margin-bottom: 0.6rem;
}
.ficha-rel ul { list-style: none; padding: 0; margin: 0; display: grid; }
.ficha-rel a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ficha-rel a:hover { color: var(--verde-hondo); }
.ficha-rel .rc { font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-hondo); flex: none; }

/* ---------- Ficha: barra fija en móvil ---------- */
.barra-movil {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: #fff;
  border-top: 1px solid var(--salvia-suave);
  box-shadow: 0 -12px 30px -18px rgba(34, 49, 44, 0.35);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  align-items: center;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.barra-movil.visible { transform: none; }
.barra-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; min-width: 0; }
.barra-texto strong { font-family: var(--f-mono); font-size: 0.85rem; color: var(--verde-hondo); }
.barra-movil .boton { margin-left: auto; padding: 0.7rem 1.3rem; white-space: nowrap; }

/* ---------- Ficha: modal de vista previa ---------- */
.modal-preview {
  border: 0;
  border-radius: var(--radio);
  padding: 0;
  margin: auto; /* el reset (* { margin: 0 }) anula el centrado del UA */
  width: min(720px, 92vw);
  max-height: min(90vh, 100%);
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 40px 80px -30px rgba(34, 49, 44, 0.6);
  overflow: hidden;
}
.modal-preview::backdrop { background: rgba(34, 49, 44, 0.65); backdrop-filter: blur(3px); }
.modal-video {
  aspect-ratio: 16 / 9;
  background: var(--verde-noche);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}
.modal-video .eyebrow { color: var(--salvia); }
.modal-nombre { font-family: var(--f-display); font-size: 1.5rem; font-weight: 550; color: #fff; margin-bottom: 0.6rem; }
.modal-aviso { font-size: 0.92rem; max-width: 44ch; margin-inline: auto; }
.modal-cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
}
.modal-cerrar {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: grid;
  place-items: center;
}
.modal-cerrar:hover { background: rgba(255, 255, 255, 0.3); }
.modal-cerrar:focus-visible { outline-color: #fff; }
.modal-cerrar svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .hero-ficha .contenedor { grid-template-columns: 1fr; padding-bottom: clamp(3rem, 7vw, 5rem); }
  .ficha-hero-espacio { display: none; }
  .ficha-layout { grid-template-columns: 1fr; }
  .ficha-aside { margin-top: 0; position: static; order: -1; padding-top: 2rem; }
  .ficha-main { padding-top: 0; }
  .ficha-card { box-shadow: none; }
  .barra-movil { display: flex; }
  .pagina-ficha { padding-bottom: 76px; }
  .pagina-ficha .cookies { bottom: 84px; }
}
@media (max-width: 640px) {
  .lista-check { grid-template-columns: 1fr; }
  .tema summary { flex-wrap: wrap; }
  .tema-meta { width: 100%; padding-left: calc(18px + 0.9rem); }
  .fase-cursos a { flex-wrap: wrap; }
  .fase-cursos .ft { flex-basis: calc(100% - 5.3rem); }
  .fase-cursos .estado-pill { margin-left: 5.3rem; }
}

/* ---------- Página no encontrada ---------- */
.no-encontrada {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.no-encontrada .codigo {
  font-family: var(--f-mono);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 600;
  color: var(--verde-hondo);
  line-height: 1;
  letter-spacing: 0.08em;
}
.no-encontrada .titulo-seccion { margin-top: 0.6rem; }
.no-encontrada .intro-seccion { margin-inline: auto; }
.no-encontrada .acciones-seccion { justify-content: center; }

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .cookies, .barra-movil, .salto-contenido, .footer-social, .footer-legal a,
  .hero-pagina .fondo, .hero-visual .trazas, .nav-toggle, .catalogo-filtros, .catalogo-barra,
  .modal-preview, .filtros, .acciones-seccion, .banda-cta, .newsletter-grid form { display: none !important; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
  .hero-pagina, .footer, .banda-cta { background: #fff !important; color: #000 !important; }
  .hero-pagina .titulo-pagina, .hero-pagina p, .hero-pagina .migas a { color: #000 !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .ficha-aside { position: static; margin-top: 0; }
  .tema { break-inside: avoid; }
  details.tema:not([open]) > .lecciones { display: block; }
}