/*
 * Home de Frogames (#frogames-home). Complementa a frogames-catalogo.css, que es
 * quien declara la paleta y las tipografías (--fgc-*) y quien pinta el hero
 * (.fgc-hero) y las tarjetas de curso (.fgc-tarjeta): aquí no se redefine ningún
 * color ni ninguna tipografía, solo se usan.
 *
 * Las rejillas de rutas y de cursos usan la misma medida que la del catálogo
 * (auto-fill, minmax(250px, 1fr)) para que una tarjeta se vea igual en la home
 * que en /collections.
 */
#frogames-home {
  color: var(--fgc-texto);
  background: var(--fgc-bg);
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* El titular del hero lo pinta .fgc-hero h1 de frogames-catalogo.css, compartido
   con /collections: se acota a la home para no cambiar el catálogo de rebote. */
#frogames-home .fgc-hero h1 { font-size: clamp(32px, 4.4vw, 50px); }
#frogames-home .fgc-hero p { font-size: 17px; }

.fgh-seccion { margin-top: 52px; }
/* Cabecera de sección centrada, como el hero. La entradilla se limita en ancho
   porque una línea centrada de 900 px cuesta de leer. */
.fgh-seccion > h2 {
  font-family: var(--fgc-font-titulo);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 900;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  color: var(--fgc-texto);
  text-align: center;
}
.fgh-entradilla {
  margin: 0 auto 20px; max-width: 680px;
  font-size: 17px; line-height: 1.55; color: var(--fgc-suave);
  text-align: center;
}

/* Rutas */
/* 18 rutas: en pantalla ancha caben en 3 filas de 6. Por debajo se deja que la
   rejilla decida sola, que a esa anchura 6 no caben. */
.fgh-rutas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.fgh-ruta {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--fgc-superficie);
  border: 1px solid var(--fgc-borde);
  border-top: 4px solid var(--fgc-ruta);
  border-radius: 12px;
  padding: 14px 16px 16px;
  transition: transform .15s ease, border-color .15s ease;
}
.fgh-ruta:hover { transform: translateY(-3px); border-color: var(--fgc-ruta); }
.fgh-ruta h3 { font-family: var(--fgc-font-titulo); font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.fgh-ruta p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--fgc-suave); }
.fgh-ruta-punto { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 10px; }
.fgh-ruta-cifra { font-size: 14px; font-weight: 700; color: var(--fgc-tenue); }

/* A partir de aquí, después de la base para que gane sobre ella con la misma
   especificidad: baja el hueco y la tipografía porque a 6 columnas cada
   tarjeta ronda los 180 px. */
@media (min-width: 1100px) {
  .fgh-rutas { grid-template-columns: repeat(6, 1fr); }
  .fgh-ruta { padding: 12px 12px 14px; }
  .fgh-ruta h3 { font-size: 16px; }
  .fgh-ruta p { font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
  .fgh-ruta-cifra { font-size: 13.5px; }
}

/* Filas de cursos: el ancla que frogames-home.js reemplaza con datos frescos. */
/* Carrusel: fila desplazable con anclaje, sin librerías ni JavaScript. Lo usan
   las dos filas de cursos y las opiniones.
 *
 * El contenido entero sigue en el HTML aunque solo se vean tres o cuatro
 * tarjetas, así que Google lo indexa igual: no se esconde nada, solo se recorta
 * lo que se ve. El ancho máximo de columna deja asomar la siguiente tarjeta, que
 * es lo que le dice al usuario que ahí se puede arrastrar. */
.fgh-carrusel {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: .75rem;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.fgh-carrusel > * { scroll-snap-align: start; }

/* Sin esto, en un contenedor desplazable el foco por teclado saca la tarjeta de
   la vista en vez de arrastrar el carrusel. */
.fgh-carrusel:focus-within { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .fgh-carrusel { scroll-snap-type: none; }
}

/* Las tarjetas de curso miden lo mismo que en /collections. */
.fgh-fila { grid-auto-columns: minmax(250px, 280px); }

/* La tarjeta trae el botón de vista rápida de serie, pero el modal que lo
   atiende vive en frogames-catalogo.js, que la home no carga: aquí no hay
   quien lo abra. */
#frogames-home .fgc-vista { display: none; }

/* Qué encontrarás en Frogames */
.fgh-ventajas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0 0 22px; padding: 0; }
.fgh-ventajas li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  background: var(--fgc-superficie); border: 1px solid var(--fgc-borde);
  border-radius: 999px; padding: 8px 16px;
}
.fgh-video { aspect-ratio: 16 / 9; background: var(--fgc-bg); border: 1px solid var(--fgc-borde); border-radius: 12px; overflow: hidden; }
.fgh-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* El vídeo de empresas es vertical: en un marco 16/9 dejaba dos franjas negras
   enormes. Se le da su proporción real y se pone al lado del texto, con lo que
   la sección ocupa la mitad de alto. */
/* `margin-inline: 0` deshace el centrado que .fgh-mas-bloque p aplica con
   `margin: 0 auto`: aquí el texto va pegado a la izquierda, junto al vídeo. */
.fgh-empresas { display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: 24px; align-items: center; text-align: left; }
.fgh-mas-bloque .fgh-empresas p { margin-inline: 0; max-width: 52ch; }

/* Con Udemy y empresas en la misma columna, el texto ya llena el alto del
   vídeo: se alinean arriba en vez de centrarse. */
.fgh-empresas { align-items: start; }
.fgh-empresas h3 { text-align: left; }
.fgh-empresas h3:not(:first-child) { margin-top: 4px; }
.fgh-separador { border: 0; border-top: 1px solid var(--fgc-borde); margin: 20px 0 16px; }
.fgh-video-vertical { aspect-ratio: 9 / 16; max-height: 420px; margin-inline: auto; background: var(--fgc-bg); border: 1px solid var(--fgc-borde); border-radius: 12px; overflow: hidden; }
.fgh-video-vertical iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 720px) {
  .fgh-empresas { grid-template-columns: 1fr; text-align: center; }
}
.fgh-dentro { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 22px; }
.fgh-dentro-bloque { background: var(--fgc-superficie); border: 1px solid var(--fgc-borde); border-radius: 12px; padding: 16px; }
.fgh-dentro-bloque h3 { font-family: var(--fgc-font-titulo); font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.fgh-dentro-bloque h3 a { color: inherit; text-decoration: none; }
.fgh-dentro-bloque h3 a:hover { color: var(--fgc-accent-hover); }
.fgh-dentro-bloque p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fgc-suave); }

/* Opiniones: mismo carrusel, columnas algo más anchas porque llevan texto. */
.fgh-opiniones { grid-auto-columns: minmax(280px, 340px); }

.fgh-opinion {
  margin: 0; padding: 16px;
  background: var(--fgc-superficie); border: 1px solid var(--fgc-borde); border-radius: 12px;
  display: flex; flex-direction: column;
}
.fgh-opinion h3 { font-family: var(--fgc-font-titulo); font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; }
.fgh-opinion p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--fgc-suave); }
.fgh-opinion footer { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.fgh-opinion img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fgc-superficie-2); }
.fgh-opinion cite { font-style: normal; font-size: 13px; font-weight: 700; color: var(--fgc-tenue); }
/* Trustpilot y Emagister en la misma línea. El widget de Trustpilot no se
   estira: sin `flex: 1` se queda a su ancho y los dos sellos quedan juntos y
   centrados en vez de partir la fila. */
.fgh-sellos { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Botón propio en vez del widget oficial: aquel es un iframe con fondo blanco
   fijo que no se puede estilar desde fuera, y sobre el tema oscuro quedaba como
   un parche. Enlaza al mismo sitio y ahorra el script de terceros. */
.fgh-trustpilot {
  display: inline-flex; align-items: center; gap: 10px;
  height: 110px; box-sizing: border-box; padding: 0 22px;
  border: 1px solid var(--fgc-borde-suave); border-radius: 10px;
  background: var(--fgc-superficie); color: var(--fgc-texto);
  font-family: var(--fgc-font); font-weight: 700; font-size: 15px;
  text-decoration: none;
}
.fgh-trustpilot:hover { border-color: #00b67a; background: var(--fgc-accent-15); }

.fgh-sellos img { display: block; width: auto; height: 110px; border-radius: 10px; }

/* Empieza a aprender hoy mismo */
.fgh-empieza {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  background: var(--fgc-superficie); border: 1px solid var(--fgc-borde-suave); border-radius: 16px; padding: 24px;
}
.fgh-empieza img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.fgh-empieza p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--fgc-suave); }

/* Los cuatro planes en la columna donde antes iba la imagen del curso gratuito. */
.fgh-planes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fgh-planes li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--fgc-superficie-2); border: 1px solid var(--fgc-borde);
  border-radius: 10px; padding: 14px 16px;
}
.fgh-planes span { font-family: var(--fgc-font-titulo); font-weight: 700; font-size: 16px; }
.fgh-planes b { font-size: 22px; font-weight: 800; white-space: nowrap; }
.fgh-planes small { color: var(--fgc-suave); font-size: 13px; font-weight: 400; }

.fgh-boton {
  display: inline-block; margin: 6px 8px 0 0;
  font-family: inherit; font-weight: 800; font-size: 15px; line-height: 1; text-decoration: none;
  padding: 13px 24px; border-radius: 10px;
  background: var(--fgc-accent); color: var(--fgc-accent-ink);
}
.fgh-boton:hover { background: var(--fgc-accent-hover); }
.fgh-boton-alt { background: transparent; border: 1px solid var(--fgc-borde-suave); color: var(--fgc-texto); }
.fgh-boton-alt:hover { background: var(--fgc-accent-15); }

/* Más sobre Frogames */
.fgh-mas-bloque {
  background: var(--fgc-superficie); border: 1px solid var(--fgc-borde); border-radius: 12px;
  padding: 20px; margin-bottom: 1rem;
}
/* Bloque centrado: son tres tarjetas cortas de título, párrafo y botón, y
   centradas se leen mejor que alineadas a la izquierda dentro de su caja. */
.fgh-mas-bloque { text-align: center; }
.fgh-mas-bloque h3 { font-family: var(--fgc-font-titulo); font-size: 21px; font-weight: 700; margin: 0 0 10px; }
.fgh-mas-bloque p { margin: 0 auto 12px; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--fgc-suave); }
.fgh-mas-bloque .fgh-boton { margin: 6px 4px 0; }
.fgh-mas-bloque a:not(.fgh-boton) { color: var(--fgc-accent-hover); }
.fgh-premios { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.fgh-premios img { max-width: 130px; height: auto; }

/* Preguntas frecuentes */
.fgh-faq-item {
  background: var(--fgc-superficie); border: 1px solid var(--fgc-borde); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 8px;
}
.fgh-faq-item summary { font-family: var(--fgc-font-titulo); font-size: 18px; font-weight: 700; cursor: pointer; }
.fgh-faq-item p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--fgc-suave); }

@media (max-width: 640px) {
  #frogames-home { padding: 14px 12px 40px; }
  .fgh-seccion { margin-top: 36px; }
  .fgh-empieza { grid-template-columns: 1fr; padding: 16px; }
}

/* Aviso de cookies. Portado de la home anterior; los colores y medidas son los
   suyos. Viene con [hidden] en el HTML y lo muestra frogames-home.js solo si no
   hay una decisión vigente, para que quien ya respondió no vea un parpadeo. */
#frogames-cookies {
  --cookie-primary: #449cb9;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 970px;
  background: rgba(20, 20, 20, .85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
  z-index: 9999;
  font-family: var(--fgc-font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  animation: fgh-cookies-sube .6s cubic-bezier(.16, 1, .3, 1);
}

/* Más específico que la regla de arriba, así gana sin !important. */
#frogames-cookies[hidden] { display: none; }

@keyframes fgh-cookies-sube {
  from { transform: translate(-50%, 100%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

#frogames-cookies .cookie-content { display: flex; align-items: center; gap: 1rem; }
#frogames-cookies .cookie-emoji { font-size: 1.5rem; display: inline-block; }
#frogames-cookies .cookie-text { color: #fff; font-size: .9rem; line-height: 1.4; margin: 0; }
#frogames-cookies .cookie-legal { font-size: .8rem; color: #a0a0a0; margin-top: 2px; display: block; }
#frogames-cookies .cookie-text a { color: var(--cookie-primary); text-decoration: none; border-bottom: 1px solid rgba(68, 156, 185, .4); }
#frogames-cookies .cookie-text a:hover { border-bottom-color: var(--cookie-primary); }
#frogames-cookies .cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }

#frogames-cookies button {
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1.2rem;
  border-radius: 99px;
  transition: all .2s ease;
}

#frogames-cookies .btn-accept { background: var(--cookie-primary); border: 1px solid var(--cookie-primary); color: #fff; box-shadow: 0 4px 12px rgba(68, 156, 185, .3); }
#frogames-cookies .btn-accept:hover { background: #3685a0; transform: translateY(-1px); }
#frogames-cookies .btn-minimal { background: transparent; border: 1px solid rgba(255, 255, 255, .2); color: #a0a0a0; }
#frogames-cookies .btn-minimal:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .05); }

@media (max-width: 650px) {
  #frogames-cookies { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem; bottom: 1rem; width: 95%; }
  #frogames-cookies .cookie-actions { width: 100%; justify-content: flex-end; }
  #frogames-cookies button { flex: 1; text-align: center; }
}