/* Escaparate de rutas (/pages/rutas) y suscripción (/pages/rutas-de-aprendizaje). */

/* La paleta y la tipografía NO se declaran aquí: las dos ids están en el bloque
   de variables de frogames-catalogo.css, que es la hoja que también trae el hero
   (`.fgc-hero`) y que estas páginas cargan. Los `--fge-*` son alias de los
   `--fgc-*` para no acabar con dos negros y dos grises casi iguales.
   Tampoco se declara `h1`: lo estiliza `.fgc-hero h1`, y una regla propia con
   especificidad de id lo pisaría sin querer. */
#frogames-escaparate, #frogames-suscripcion {
  --fge-fondo: var(--fgc-bg);
  --fge-texto: var(--fgc-texto);
  --fge-suave: var(--fgc-suave);
  --fge-borde: var(--fgc-borde);
  --fge-font-titulo: var(--fgc-font-titulo);
  background: var(--fge-fondo);
  color: var(--fge-texto);
  padding: 3rem 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Las dos páginas van centradas. `margin-inline: auto` en los bloques con
   max-width es imprescindible: sin él, `text-align: center` centra el texto
   dentro de una columna que sigue pegada a la izquierda, y queda peor que no
   tocar nada. */
#frogames-escaparate, #frogames-suscripcion { text-align: center; }
#frogames-escaparate .fge-seccion p,
#frogames-suscripcion .fge-seccion p { margin-inline: auto; }
#frogames-escaparate .fge-faq summary { text-align: center; }
/* El FAQ de la suscripción va a la izquierda: son preguntas largas, y con el
   triángulo del `details` a un lado el texto centrado queda descolgado. */
#frogames-suscripcion .fge-faq summary { text-align: left; }
/* Los títulos, las cifras y las entradillas van centrados; la prosa larga, no:
   justificada a la izquierda. Un párrafo de cuatro líneas centrado obliga a
   buscar dónde empieza cada renglón.
   `hyphens: auto` no es un adorno: en una tarjeta de 320 px el justificado sin
   partir palabras abre huecos enormes entre ellas. Necesita saber el idioma, y de
   eso se encarga el `lang="es"` del contenedor.
   La lista de ventajas de cada plan también va alineada, pero sin justificar: es
   una lista corta y el ✓ tiene que caer en la misma columna en todas. */
#frogames-escaparate .fge-ruta,
#frogames-suscripcion .fge-ruta { text-align: left; }
#frogames-escaparate .fge-ruta p,
#frogames-escaparate .fge-texto,
#frogames-escaparate .fge-faq details p,
#frogames-suscripcion .fge-faq details p,
#frogames-suscripcion .fgs-cita {
  text-align: justify;
  hyphens: auto;
}
/* Las ventajas de cada plan, centradas como bloque pero alineadas entre sí: el
   ✓ de cada línea tiene que quedar en la misma columna. */
#frogames-suscripcion .fgs-ventajas { text-align: left; display: inline-block; }

#frogames-escaparate .fgc-hero, #frogames-suscripcion .fgc-hero { margin-bottom: 3rem; }

/* Las 18 rutas */
.fge-rutas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.fge-ruta {
  display: block;
  border: 1px solid var(--fge-borde);
  border-left: 4px solid var(--fge-ruta, var(--fge-borde));
  border-radius: 10px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.fge-ruta:hover { border-color: var(--fge-ruta); transform: translateY(-2px); }
.fge-ruta h3 { font-family: var(--fge-font-titulo); font-weight: 700; margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--fge-ruta, inherit); }
.fge-ruta p { margin: 0 0 0.75rem; color: var(--fge-suave); font-size: 0.95rem; line-height: 1.5; }
.fge-ruta-cifra { color: var(--fge-suave); font-size: 0.85rem; }

/* El mapa va incrustado y se toma el ancho de la ventana él mismo
   (#frogames-graph-wrapper, con width:100vw). Aquí solo el aire alrededor. */
.fge-mapa { margin: 3rem 0 0; }

/* Secciones de texto y FAQ, comunes a las dos páginas */
.fge-seccion { margin: 3rem 0; }
.fge-seccion h2 { font-family: var(--fge-font-titulo); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1rem; }
.fge-seccion p { color: var(--fge-suave); line-height: 1.6; max-width: 70ch; }
.fge-faq details { border-bottom: 1px solid var(--fge-borde); padding: 1rem 0; }
.fge-faq summary { font-family: var(--fge-font-titulo); cursor: pointer; font-weight: 700; }
.fge-faq details p { margin: 0.75rem 0 0; }

/* Planes de suscripción */
.fgs-planes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fgs-plan { border: 1px solid var(--fge-borde); border-radius: 10px; padding: 1.5rem; display: flex; flex-direction: column; }
.fgs-plan.fgs-destacado { border-color: #E9C619; }
.fgs-etiqueta { color: #E9C619; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.fgs-plan h3 { font-family: var(--fge-font-titulo); font-weight: 700; margin: 0 0 0.5rem; font-size: 1.25rem; }
.fgs-resumen { color: var(--fge-suave); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1rem; }
.fgs-precio { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.fgs-periodo { color: var(--fge-suave); font-size: 0.9rem; }
.fgs-referencia { color: var(--fge-suave); text-decoration: line-through; font-size: 0.9rem; display: block; }
.fgs-ventajas { list-style: none; padding: 0; margin: 1rem 0; flex: 1; }
.fgs-ventajas li { color: var(--fge-suave); font-size: 0.9rem; padding: 0.3rem 0 0.3rem 1.25rem; position: relative; }
.fgs-ventajas li::before { content: "✓"; position: absolute; left: 0; color: #35CE8D; }
.fgs-cta {
  display: block; text-align: center; padding: 0.85rem 1rem; border-radius: 8px;
  background: #35CE8D; color: #080708; font-weight: 600; text-decoration: none;
}
.fgs-cta:hover { filter: brightness(1.1); }
.fgs-cupon h2 { font-family: var(--fge-font-titulo); font-weight: 700; }
.fgs-cupon { border: 1px dashed #E9C619; border-radius: 10px; padding: 1.5rem; margin: 3rem 0; text-align: center; }
.fgs-cupon code { font-size: 1.4rem; font-weight: 700; color: #E9C619; letter-spacing: 0.05em; }
/* Carrusel de reseñas: scroll-snap y nada más. No hace falta librería para
   arrastrar seis tarjetas, y una que hubiera que descargar costaría más que las
   propias reseñas.
   Va con `flex` y con los selectores bajo `#frogames-suscripcion`: hace lo mismo
   que la rejilla con menos piezas, y la especificidad del id lo pone por encima
   de lo que traiga el tema. */
#frogames-suscripcion .fgs-testimonios {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin;
}
#frogames-suscripcion .fgs-testimonio {
  flex: 0 0 min(340px, 82vw);
  border: 1px solid var(--fge-borde); border-radius: 10px; padding: 1.25rem;
  scroll-snap-align: center; margin: 0;
  display: flex; flex-direction: column;
}
#frogames-suscripcion .fgs-estrellas { color: #E9C619; letter-spacing: 2px; margin-bottom: 0.6rem; }
#frogames-suscripcion .fgs-cita {
  margin: 0 0 0.9rem; color: var(--fge-texto); font-style: italic; line-height: 1.5;
  flex: 1; max-width: none;
}
#frogames-suscripcion .fgs-firma { margin: 0; display: flex; flex-direction: column; gap: 2px; max-width: none; }
#frogames-suscripcion .fgs-nombre { color: var(--fge-texto); font-size: 0.95rem; font-weight: 700; }
#frogames-suscripcion .fgs-curso { color: var(--fge-suave); font-size: 0.8rem; }

/* Sugerencias del buscador del hero. Mismo aspecto que el panel de la lupa de la
   cabecera del sitio, pero sin depender de él: los datos ya están en memoria. */
#frogames-escaparate .fgc-buscador { position: relative; }
#frogames-escaparate .fge-sugerencias {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--fgc-superficie); border: 1px solid var(--fge-borde);
  border-radius: 12px; padding: 6px; text-align: left;
  max-height: min(60vh, 420px); overflow-y: auto;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
#frogames-escaparate .fge-sugerencia {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: inherit;
}
#frogames-escaparate .fge-sugerencia:hover,
#frogames-escaparate .fge-sugerencia.fge-activa { background: var(--fgc-accent-15); }
#frogames-escaparate .fge-sug-nombre { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
#frogames-escaparate .fge-sug-meta { display: block; color: var(--fge-suave); font-size: 12.5px; margin-top: 2px; }
/* Las rutas llevan una insignia rellena con su color y el nombre en negrita: son
   el resultado que esta página quiere destacar, y así se distinguen de los cursos
   sin leer la línea de abajo.
   La insignia va con el color de fondo y no con el texto coloreado porque seis de
   las dieciocho rutas tienen un color demasiado oscuro para leerse sobre el panel,
   y aclararlo las dejaba casi blancas —o sea, iguales que los cursos—. De fondo se
   ve cualquier color; lo que se adapta es la tinta de encima. */
#frogames-escaparate .fge-sugerencia-ruta {
  border-left: 4px solid var(--fge-sug-ruta, var(--fgc-accent));
  padding-left: 12px;
}
#frogames-escaparate .fge-sugerencia-ruta .fge-sug-nombre { font-weight: 800; }
#frogames-escaparate .fge-sug-chip {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--fge-sug-ruta, var(--fgc-accent));
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  vertical-align: 1px;
}

/* Dos tarjetas a la par (empresas y familia). Comparten el botón con los planes
   (`.fgs-cta`) para no tener dos estilos de llamada a la acción en la misma
   página. */
.fge-duo { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 1.5rem; }
.fge-tarjeta {
  border: 1px solid var(--fge-borde); border-radius: 12px; padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; background: var(--fgc-superficie);
}
.fge-tarjeta-etiqueta {
  color: var(--fgc-accent); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem;
}
.fge-tarjeta h3 { font-family: var(--fge-font-titulo); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.75rem; }
#frogames-suscripcion .fge-tarjeta p { color: var(--fge-suave); line-height: 1.55; margin: 0 0 1.5rem; flex: 1; max-width: none; }

/* El curso de cada reseña es un enlace, pero discreto: la reseña se lee por lo
   que dice, no por el enlace. Subrayado solo al pasar por encima. */
#frogames-suscripcion .fgs-curso a { color: inherit; text-decoration: none; }
#frogames-suscripcion .fgs-curso a:hover { color: var(--fge-texto); text-decoration: underline; }

/* --- /pages/rutas-de-iniciacion: los primeros cursos de cada ruta --- */
#frogames-iniciacion {
  --fge-fondo: var(--fgc-bg);
  --fge-texto: var(--fgc-texto);
  --fge-suave: var(--fgc-suave);
  --fge-borde: var(--fgc-borde);
  --fge-font-titulo: var(--fgc-font-titulo);
  background: var(--fge-fondo); color: var(--fge-texto);
  padding: 3rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
#frogames-iniciacion .fgc-hero { margin-bottom: 3rem; }
#frogames-iniciacion .fge-seccion { text-align: center; }
#frogames-iniciacion .fge-seccion h2 { font-family: var(--fge-font-titulo); font-weight: 700; }
#frogames-iniciacion .fge-texto { text-align: justify; hyphens: auto; max-width: 70ch; margin-inline: auto; }

.fgi-rutas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.fgi-ruta {
  border: 1px solid var(--fge-borde); border-left: 4px solid var(--fgi-ruta, var(--fge-borde));
  border-radius: 12px; padding: 1.5rem; text-align: left;
}
.fgi-ruta h2 { font-family: var(--fge-font-titulo); font-weight: 700; font-size: 1.2rem; margin: 0 0 0.25rem; }
.fgi-ruta h2 a { color: var(--fgi-ruta, inherit); text-decoration: none; }
.fgi-ruta h2 a:hover { text-decoration: underline; }
.fgi-resumen { color: var(--fge-suave); font-size: 0.82rem; margin: 0 0 1rem; }

/* Numerada, y la numeración se ve: el orden ES el contenido de esta página. */
.fgi-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.fgi-pasos li {
  counter-increment: paso; position: relative; padding: 0.55rem 0 0.55rem 2.2rem;
  border-top: 1px solid var(--fge-borde);
}
.fgi-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: 0.5rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--fgi-ruta, var(--fge-borde)); color: var(--fgi-tinta, #fff);
  font-size: 0.72rem; font-weight: 800; display: grid; place-items: center;
}
.fgi-pasos a { color: var(--fge-texto); text-decoration: none; font-size: 0.95rem; line-height: 1.35; display: block; }
.fgi-pasos a:hover { text-decoration: underline; }
.fgi-cifras { display: block; color: var(--fge-suave); font-size: 0.78rem; margin-top: 2px; }
.fgi-mas { margin: 1rem 0 0; }
.fgi-mas a { color: var(--fgi-ruta, var(--fgc-accent)); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.fgi-mas a:hover { text-decoration: underline; }

/* La alternativa a pagar de golpe (los 6 plazos de la Black). */
#frogames-suscripcion .fgs-plazos { color: var(--fge-suave); font-size: 0.85rem; margin: 0.35rem 0 0; max-width: none; }

/* Lo que llevan las cuatro Ranas, en un bloque antes de las tarjetas. */
#frogames-suscripcion .fgs-comun {
  border: 1px solid var(--fge-borde); border-radius: 12px;
  padding: 1.5rem; margin: 0 auto 1.75rem; max-width: 720px;
  background: var(--fgc-superficie);
}
#frogames-suscripcion .fgs-comun h3 { font-family: var(--fge-font-titulo); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.75rem; }
#frogames-suscripcion .fgs-comun .fgs-ventajas { margin: 0; }
#frogames-suscripcion .fgs-permes { color: var(--fge-texto); font-weight: 600; font-size: 0.9rem; margin: 0.35rem 0 0; max-width: none; }
#frogames-suscripcion .fgs-solo { color: var(--fge-suave); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0 0; max-width: none; }

/* --- /bundles/rana-*: las cuatro paginas de plan --- */
#frogames-rana {
  --fge-fondo: var(--fgc-bg);
  --fge-texto: var(--fgc-texto);
  --fge-suave: var(--fgc-suave);
  --fge-borde: var(--fgc-borde);
  --fge-font-titulo: var(--fgc-font-titulo);
  background: var(--fge-fondo); color: var(--fge-texto); text-align: center;
  padding: 3rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
#frogames-rana .fge-seccion h2 { font-family: var(--fge-font-titulo); font-weight: 700; }
#frogames-rana .fge-seccion p { margin-inline: auto; }
#frogames-rana .fge-texto { text-align: justify; hyphens: auto; max-width: 70ch; }
#frogames-rana .fgc-hero { margin-bottom: 3rem; }

/* La portada toma el color de su Rana: el sello y el borde del panel. */
.fgr-portada { border-color: var(--fgr-rana, var(--fgc-borde-suave)); }
.fgr-sello {
  display: inline-block; margin-bottom: 1rem; padding: 4px 12px; border-radius: 999px;
  background: var(--fgr-rana, var(--fgc-accent)); color: var(--fgr-tinta, #0b0f13);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.fgr-precio { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 1.25rem; }
.fgr-antes { color: var(--fge-suave); text-decoration: line-through; font-size: 1.1rem; }
.fgr-ahora { font-family: var(--fge-font-titulo); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1; color: var(--fgr-rana, var(--fge-texto)); }
.fgr-periodo { color: var(--fge-suave); font-size: 0.95rem; }
/* Estos tres párrafos van dentro del hero, y ahí `.fgc-hero p` de
   frogames-catalogo.css impone `margin: 0 0 22px`. Con más especificidad (0,1,1)
   que una clase suelta (0,1,0), les ganaba el margen: el cupón perdía su
   `margin: auto` y se quedaba pegado a la izquierda en vez de centrado. Con el id
   delante (1,0,0) no hay discusión. */
#frogames-rana .fgr-permes { color: var(--fge-texto); font-weight: 600; margin: 0.4rem 0 0; }
#frogames-rana .fgr-botones { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 1.5rem 0 0; }
/* El boton toma el color de su Rana, no el verde comun: en una pagina que va
   entera de un color, el verde era lo unico que no pertenecia. La tinta la elige
   `textoAccesible` y llega en `--fgr-tinta`. */
#frogames-rana .fgr-botones .fgs-cta {
  min-width: min(340px, 90%);
  background: var(--fgr-rana, #35CE8D);
  color: var(--fgr-tinta, #080708);
}

/* El cupón, junto al precio: es donde se mira cuánto cuesta. */
#frogames-rana .fgr-cupon {
  margin: 1.25rem auto 0; padding: 0.85rem 1.25rem; max-width: 420px;
  border: 1px dashed var(--fgr-rana, #E9C619); border-radius: 10px;
  font-size: 0.9rem; color: var(--fge-suave);
}
#frogames-rana .fgr-cupon code { color: var(--fgr-rana, #E9C619); font-weight: 800; letter-spacing: .05em; font-size: 1.05rem; }
.fgr-cta-alt { color: var(--fge-suave); font-size: 0.9rem; text-decoration: underline; }
.fgr-cta-alt:hover { color: var(--fge-texto); }
.fgr-propio { color: var(--fgr-rana, var(--fgc-accent)); }

/* La comparativa de las cuatro */
.fgr-tabla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.5rem; text-align: left; }
.fgr-columna { border: 1px solid var(--fge-borde); border-top: 4px solid var(--fgr-rana, var(--fge-borde)); border-radius: 12px; padding: 1.25rem; }
.fgr-columna-esta { background: var(--fgc-superficie); border-color: var(--fgr-rana, var(--fge-borde)); }
.fgr-columna h3 { font-family: var(--fge-font-titulo); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--fgr-rana, inherit); }
.fgr-columna h3 a { color: inherit; text-decoration: none; }
.fgr-columna h3 a:hover { text-decoration: underline; }
.fgr-esta { display: block; color: var(--fge-suave); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
.fgr-col-precio { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.75rem; }
.fgr-col-precio small { color: var(--fge-suave); font-size: 0.75rem; font-weight: 400; }
.fgr-columna dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 0.85rem; }
.fgr-columna dt { color: var(--fge-suave); }
.fgr-columna dd { margin: 0; font-weight: 600; }

/* La portada del bundle. Con `width`/`height` en el HTML y `height: auto` aquí, el
   navegador reserva el hueco por la proporción y no hay salto al cargar. Va eager
   (sin `loading=lazy`) porque está encima del pliegue: diferirla la retrasaría. */
.fgr-imagen {
  display: block; width: min(420px, 100%); height: auto; margin: 0 auto 1.5rem;
  border-radius: 12px; border: 1px solid var(--fgr-rana, var(--fge-borde));
}

/* La caja propia de la Black (los proyectos revisados) va de su color, para que se
   vea que es lo que las otras tres no llevan. */
#frogames-rana .fgc-cifras { margin-top: 1rem; }
#frogames-rana .fgr-cifra-propia { border-color: var(--fgr-rana, var(--fgc-borde-suave)); }
#frogames-rana .fgr-cifra-propia b { color: var(--fgr-rana, inherit); }

/* Páginas de tema (/pages/cursos-aprender-*). Reutilizan el hero, las cifras y las
   tarjetas del catálogo; lo propio es el gancho del perfil y la lista de cursos.

   Este bloque base no es opcional: sin él el texto hereda el negro del tema de
   Thinkific y la página sale negro sobre negro. No basta con estar en el selector de
   variables de frogames-catalogo.css. */
#frogames-tema {
  --fge-fondo: var(--fgc-bg);
  --fge-texto: var(--fgc-texto);
  --fge-suave: var(--fgc-suave);
  --fge-borde: var(--fgc-borde);
  --fge-font-titulo: var(--fgc-font-titulo);
  background: var(--fge-fondo); color: var(--fge-texto);
  padding: 3rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
#frogames-tema .fgc-hero { margin-bottom: 3rem; }
#frogames-tema .fge-seccion { text-align: center; }
#frogames-tema .fge-seccion h2 { font-family: var(--fge-font-titulo); font-weight: 700; }
#frogames-tema .fge-texto { text-align: justify; hyphens: auto; max-width: 70ch; margin-inline: auto; }
#frogames-tema .fge-tarjeta p { color: var(--fge-suave); text-align: left; }
#frogames-tema .fgt-cursos li { text-align: left; }

/* El logotipo de la tecnología, lo primero del hero. Alto fijo para que no baile el
   layout mientras carga, y ancho automático porque cada logo tiene su proporción. */
#frogames-tema .fgt-logo {
  display: block;
  margin: 0 auto 1rem;
  height: 96px;
  width: auto;
  max-width: min(100%, 320px);
  object-fit: contain;
}

/* «Al terminar sabrás»: dos columnas de resultados concretos. */
#frogames-tema .fgt-resultados {
  list-style: none;
  margin: 1.25rem auto 0;
  padding: 0;
  max-width: 52rem;
  display: grid;
  gap: .6rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  text-align: left;
}
#frogames-tema .fgt-resultados li { padding-left: 1.6rem; position: relative; }
#frogames-tema .fgt-resultados li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--fgc-accent);
  font-weight: 700;
}

/* Banners del cierre: el color y la imagen de la ruta a la que llevan. Antes eran
   tres párrafos con enlaces sueltos y se leían como letra pequeña. */
#frogames-tema .fgt-banners { display: grid; gap: 1rem; margin: 1.5rem 0; }
#frogames-tema .fgt-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  background: var(--fgt-banner);
  color: var(--fgt-tinta);
  text-decoration: none;
  transition: transform .15s ease;
}
#frogames-tema .fgt-banner:hover { transform: translateY(-2px); }
#frogames-tema .fgt-banner-img { width: 190px; height: auto; border-radius: .6rem; flex: 0 0 auto; }
#frogames-tema .fgt-banner-txt { flex: 1 1 18rem; max-width: 34rem; display: grid; gap: .4rem; justify-items: center; text-align: center; }
#frogames-tema .fgt-banner-etiqueta { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
#frogames-tema .fgt-banner-titulo { font-family: var(--fge-font-titulo); font-size: 1.5rem; line-height: 1.15; }
#frogames-tema .fgt-banner-cuerpo { font-size: .95rem; opacity: .85; }
#frogames-tema .fgt-banner-cta {
  margin-top: .65rem;
  padding: .6rem 1.1rem;
  border-radius: .5rem;
  background: var(--fgt-tinta);
  color: var(--fgt-banner);
  font-weight: 700;
  font-size: .9rem;
}

/* Reseñas. Nada de figure/blockquote aquí: el tema de Thinkific los posiciona en
   absoluto y rompió estas mismas tarjetas en la página de suscripción. */
/* Carrusel de una fila: se arrastra en móvil y se desplaza con la rueda o el
   teclado en escritorio. Sin JavaScript, que para esto no hace falta. */
#frogames-tema .fgt-resenas {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 1rem;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  /* Sangría negativa para que la primera y la última lleguen al borde de la sección. */
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}
#frogames-tema .fgt-resena {
  flex: 0 0 min(21rem, 82%);
  scroll-snap-align: start;
  border: 1px solid var(--fge-borde);
  border-radius: .75rem;
  padding: 1.25rem;
  text-align: left;
  background: var(--fgc-superficie);
}
#frogames-tema .fgt-resena-texto { margin: 0 0 .85rem; text-align: left; }
#frogames-tema .fgt-resena-firma { margin: 0; font-size: .85rem; color: var(--fge-suave); text-align: left; }
#frogames-tema .fgt-resena-autor { font-weight: 600; color: var(--fge-texto); }

#frogames-tema .fgt-gancho {
  list-style: none;
  margin: 1.25rem auto 0;
  padding: 0;
  max-width: 46rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  justify-content: center;
}
#frogames-tema .fgt-gancho li {
  margin: 0;
  padding: .35rem .85rem;
  border: 1px solid var(--fgc-borde);
  border-radius: 999px;
  font-size: .95rem;
}
#frogames-tema .fgt-botones { margin-top: 1.5rem; text-align: center; }
/* Sin esto el CTA se estira a todo el ancho del hero: .fgs-cta es de bloque porque en
   la página de suscripción ocupa su columna entera. */
#frogames-tema .fgt-botones .fgs-cta { display: inline-block; width: auto; }
#frogames-tema .fgt-botones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
/* El azul de Frogames: en todo el sitio, lo que lleva a la suscripción va de este color. */
#frogames-tema .fgt-cta-marca {
  display: inline-block;
  padding: .8rem 1.3rem;
  border-radius: .5rem;
  background: #449cb9;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
#frogames-tema .fgt-cta-marca:hover { filter: brightness(1.08); }
/* .fge-duo es de dos columnas; aquí son cuatro tarjetas y a partir de tablet se
   quedaban en cuatro tiras estrechas. */
#frogames-tema .fge-duo { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
#frogames-tema .fgt-cursos { max-width: 52rem; margin-inline: auto; }

/* --- /courses/convalidacion-de-cursos-de-udemy: traer un curso de Udemy --- */

/* Reutiliza `.fgc-hero`, `.fge-seccion`, `.fge-duo`, `.fgs-plan` y `.fgs-cta`. Lo
   propio de esta página es la comparativa Udemy / Frogames y los cuatro pasos.
   La regla base con `color` es obligatoria: sin ella el texto hereda el negro del
   tema de Thinkific y la página sale negro sobre negro. `validar-paginas.mjs` lo
   comprueba. */
#frogames-convalidacion {
  --fge-fondo: var(--fgc-bg);
  --fge-texto: var(--fgc-texto);
  --fge-suave: var(--fgc-suave);
  --fge-borde: var(--fgc-borde);
  --fge-font-titulo: var(--fgc-font-titulo);
  background: var(--fge-fondo); color: var(--fge-texto); text-align: center;
  padding: 3rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
#frogames-convalidacion .fge-seccion h2 { font-family: var(--fge-font-titulo); font-weight: 700; }
#frogames-convalidacion .fge-seccion p { margin-inline: auto; }
#frogames-convalidacion .fgc-hero { margin-bottom: 3rem; }
/* Las respuestas del FAQ y los pasos son prosa larga: centrada obliga a buscar
   dónde empieza cada renglón. Igual que en la suscripción. */
#frogames-convalidacion .fge-faq summary { text-align: left; }
#frogames-convalidacion .fge-faq details p { text-align: justify; hyphens: auto; }
#frogames-convalidacion .fge-tarjeta p { color: var(--fge-suave); line-height: 1.55; margin: 0; flex: 1; max-width: none; text-align: left; }
#frogames-convalidacion .fge-tarjeta h3 { text-align: left; }

/* La portada */
#frogames-convalidacion .fgv-imagen {
  display: block; margin: 0 auto 1.5rem; max-width: min(560px, 100%); height: auto;
  border-radius: 14px; border: 1px solid var(--fge-borde);
}
.fgv-sello {
  display: inline-block; margin-bottom: 1rem; padding: 4px 12px; border-radius: 999px;
  background: var(--fgc-accent); color: #08131a;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.fgv-precio { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 1.5rem; }
.fgv-antes { color: var(--fge-suave); text-decoration: line-through; font-size: 1.1rem; }
.fgv-ahora { font-family: var(--fge-font-titulo); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1; }
.fgv-periodo { color: var(--fge-suave); font-size: 0.95rem; }
/* Los dos botones, uno debajo del otro: son dos opciones de lo mismo, y en fila
   la segunda se lee como un botón secundario que no lo es. */
#frogames-convalidacion .fgv-botones { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 1.5rem 0 0; }
#frogames-convalidacion .fgv-botones .fgs-cta { min-width: min(380px, 90%); }
/* El de la opción más barata, en contorno: la destacada es la que lleva el verde. */
#frogames-convalidacion .fgv-botones .fgv-cta-alt {
  background: transparent; color: var(--fge-texto); border: 1px solid var(--fge-borde);
}
#frogames-convalidacion .fgv-nota { color: var(--fge-suave); font-size: 0.9rem; margin: 1rem auto 0; }

/* La comparativa. Tres columnas en escritorio; en móvil cada fila se apila y el
   `b` de cada celda pasa a ser su etiqueta, que en escritorio la pone la cabecera
   y sobra. */
.fgv-tabla { margin-top: 1.5rem; text-align: left; display: grid; gap: 10px; }
.fgv-fila {
  display: grid; gap: 10px; align-items: start;
  grid-template-columns: minmax(120px, 1fr) 2fr 2fr;
  border: 1px solid var(--fge-borde); border-radius: 12px; padding: 1rem 1.15rem;
  background: var(--fgc-superficie);
}
.fgv-fila .fgv-asunto { font-weight: 700; }
.fgv-fila .fgv-udemy, .fgv-fila .fgv-frogames { color: var(--fge-suave); font-size: 0.92rem; line-height: 1.5; }
.fgv-fila .fgv-frogames { color: var(--fge-texto); }
.fgv-fila b { display: none; }
.fgv-cabecera {
  background: transparent; border-color: transparent; padding-block: 0;
  font-family: var(--fge-font-titulo); font-weight: 700;
}
.fgv-cabecera .fgv-udemy, .fgv-cabecera .fgv-frogames { color: var(--fge-texto); font-size: 1rem; }
.fgv-cabecera .fgv-frogames { color: var(--fgc-accent); }
@media (max-width: 720px) {
  .fgv-cabecera { display: none; }
  .fgv-fila { grid-template-columns: 1fr; }
  .fgv-fila b { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fge-suave); margin-bottom: 2px; }
  .fgv-fila .fgv-frogames b { color: var(--fgc-accent); }
}

/* Las seis ventajas: tres columnas cuando caben, no dos. */
#frogames-convalidacion .fgv-ventajas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Las dos opciones de compra */
#frogames-convalidacion .fgs-plan { text-align: left; }
#frogames-convalidacion .fgs-ventajas { text-align: left; }
.fgv-etiqueta-suave { color: var(--fge-suave); }
.fgv-descuento { color: #35CE8D; font-weight: 700; font-size: 0.9rem; margin: 0.4rem 0 0; }

/* Los cuatro pasos, numerados con contador propio: el `list-style` del tema de
   Thinkific pinta los suyos a la izquierda del recuadro y quedan fuera. */
.fgv-pasos { list-style: none; counter-reset: fgv-paso; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; text-align: left; }
.fgv-paso {
  counter-increment: fgv-paso; position: relative;
  border: 1px solid var(--fge-borde); border-radius: 12px; padding: 1.25rem 1.25rem 1.25rem 4rem;
  background: var(--fgc-superficie);
}
.fgv-paso::before {
  content: counter(fgv-paso); position: absolute; left: 1.15rem; top: 1.15rem;
  width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--fgc-accent); color: #08131a; font-weight: 800;
}
#frogames-convalidacion .fgv-paso h3 { font-family: var(--fge-font-titulo); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.35rem; }
#frogames-convalidacion .fgv-paso p { color: var(--fge-suave); line-height: 1.55; margin: 0; max-width: none; }

/* Los requisitos: la misma lista con ✓ de los planes, centrada como bloque pero
   alineada entre sí para que los ✓ caigan en la misma columna. */
#frogames-convalidacion .fgv-requisitos { display: inline-block; max-width: 62ch; }
#frogames-convalidacion .fgv-requisitos li { color: var(--fge-texto); }

/* El cierre repite los botones, así que se separa del FAQ con su propio marco. */
.fgv-cierre { border: 1px solid var(--fgc-borde-suave); border-radius: 16px; padding: 2.5rem 1.5rem; margin-top: 3rem; }

/* El tutorial de las certificaciones. La carátula ocupa el hueco entero del 16:9
   y el reproductor la sustituye en el mismo sitio, así que al pulsar no se mueve
   nada de lo que hay debajo. */
.fgv-video {
  position: relative; aspect-ratio: 16 / 9; margin: 1.5rem auto 0; max-width: 800px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--fge-borde); background: #000;
}
.fgv-video > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fgv-caratula { display: block; text-decoration: none; }
.fgv-caratula img { width: 100%; height: 100%; object-fit: cover; }
.fgv-play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 74px; height: 52px; border-radius: 14px; background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 255, 255, .35); transition: background .15s;
}
/* El triángulo, con bordes: un carácter ▶ cambia de forma según la fuente que
   acabe cargando el tema anfitrión. */
.fgv-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.fgv-caratula:hover .fgv-play { background: #35CE8D; }
.fgv-caratula:hover .fgv-play::after { border-left-color: #08131a; }
.fgv-duracion {
  position: absolute; inset: auto 0 0 auto; margin: 0.75rem; padding: 4px 10px;
  border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 0.78rem; font-weight: 600;
}