/*
Theme Name: Fundación Gomaespuma — Plataforma de contenido
Theme URI: https://fundaciongomaespuma.org
Author: Ines de la Vega
Description: Tema para la plataforma privada de vídeos y documentos de la Fundación Gomaespuma, construida sobre Tutor LMS. Autónomo: no necesita tema padre. Los colores y la tipografía de Tutor se redefinen desde assets/css/tutor-brand.css, así que el plugin se puede actualizar sin perder el diseño.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fg-lms
Tags: education, custom-menu, translation-ready
*/

/* ══════════════════════════════════════════════════════════════════
   1. Tokens de marca
   ══════════════════════════════════════════════════════════════════ */
:root {
  --fg-orange: #FF5B00;
  --fg-blue: #00A3E0;
  --fg-beige: #D9C7A3;
  --fg-olive: #6B7B4E;
  --fg-ink: #0B0B0B;
  --fg-ink-90: rgba(11, 11, 11, 0.9);
  --fg-ink-70: rgba(11, 11, 11, 0.66);
  --fg-ink-50: rgba(11, 11, 11, 0.5);
  --fg-cream: #F6F0E2;
  --fg-line: rgba(11, 11, 11, 0.12);

  --fg-display: "Fraunces", Georgia, serif;
  --fg-body: "Quicksand", system-ui, -apple-system, sans-serif;

  --fg-wrap: 1440px;
  --fg-gutter: 56px;
  --fg-section: 120px;
  /* Alto real de la cabecera (18 + 40 de la fila + 18 + 1 de borde). No fija
     nada: la cabecera se monta con relleno, como en la web. Sirve para que los
     anclajes no queden tapados por la barra pegajosa. */
  --fg-nav-h: 77px;
}

@media (max-width: 768px) {
  :root { --fg-gutter: 24px; --fg-section: 80px; --fg-nav-h: 69px; }
}

/* La web pública baja otro escalón en móvil pequeño; sin esto los titulares
   grandes se comen los márgenes laterales. */
@media (max-width: 430px) {
  :root { --fg-gutter: 20px; --fg-section: 64px; }
}

/* ══════════════════════════════════════════════════════════════════
   2. Reset y base
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fg-body);
  font-size: 17px;
  line-height: 1.5;
  background: var(--fg-cream);
  color: var(--fg-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--fg-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  /* Fraunces es variable: "opsz" alto y SOFT redondean las formas, que es lo
     que hace que el titular pegue con la sonrisa del logotipo. */
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg-orange); }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }

/* Salto al contenido: obligatorio para accesibilidad y lo pide el review de temas. */
.fg-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--fg-ink);
  color: #fff;
  font-weight: 600;
}
.fg-skip-link:focus { left: 16px; top: 16px; color: #fff; }

:focus-visible { outline: 2px solid var(--fg-orange); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   3. Layout
   ══════════════════════════════════════════════════════════════════ */
.fg-wrap {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 0 var(--fg-gutter);
}
.fg-section { padding: var(--fg-section) 0; }
.fg-band-ink { background: var(--fg-ink); color: #fff; }
.fg-band-beige { background: var(--fg-beige); }

/* ══════════════════════════════════════════════════════════════════
   4. Piezas de texto
   ══════════════════════════════════════════════════════════════════ */
.fg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fg-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* Sin negrita a propósito: en la web es un dato de apoyo, no un titular. */
.fg-mono {
  font-family: var(--fg-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-ink-70);
}

.fg-h-l { font-size: clamp(34px, 4.4vw, 66px); }
.fg-h-m { font-size: clamp(28px, 3.4vw, 56px); }
.fg-h-s { font-size: clamp(22px, 2.4vw, 40px); }

/* ══════════════════════════════════════════════════════════════════
   5. Botones propios del tema
   (los de Tutor se redefinen en tutor-components.css)
   ══════════════════════════════════════════════════════════════════ */
.fg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border: 2px solid var(--fg-ink);
  border-radius: 999px;
  background: var(--fg-ink);
  color: #fff;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.fg-btn:hover { transform: translateY(-2px); color: #fff; }
.fg-btn-orange { background: var(--fg-orange); border-color: var(--fg-orange); }
.fg-btn-orange:hover { background: var(--fg-ink); border-color: var(--fg-ink); }
.fg-btn-ghost { background: transparent; color: var(--fg-ink); }
.fg-btn-ghost:hover { background: var(--fg-ink); color: var(--fg-cream); }
/* Para botones sobre fondo tinta: el fantasma ahí no se ve. */
.fg-btn-cream { background: var(--fg-cream); border-color: var(--fg-cream); color: var(--fg-ink); }
.fg-btn-cream:hover { background: #fff; border-color: #fff; color: var(--fg-ink); }
.fg-btn-lg { padding: 20px 34px; font-size: 17px; }
.fg-btn-sm { padding: 10px 18px; font-size: 12px; }
.fg-btn-full { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════
   6. Cabecera
   ══════════════════════════════════════════════════════════════════ */
.fg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fg-cream);
  border-bottom: 1px solid var(--fg-line);
  transition: background 0.25s, backdrop-filter 0.25s;
}
/* Al bajar, la cabecera se vuelve translúcida sobre el contenido, igual que en
   la web. La clase la pone assets/js/nav.js. */
.fg-header.is-scrolled {
  background: rgba(246, 240, 226, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
/* La barra de administración de WordPress también es sticky: sin esto se
   solapan cuando hay sesión de admin iniciada. */
.admin-bar .fg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fg-header { top: 46px; } }

/* Sin altura fija: la marca el relleno más la fila, como en la web. Así la
   cabecera respira igual aquí que allí y no hay dos medidas que cuadrar. */
.fg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  gap: 24px;
}
@media (max-width: 768px) {
  .fg-header__inner { padding-block: 14px; }
}
.fg-logo img { height: 34px; width: auto; }
.fg-logo--footer img { height: 30px; width: auto; }

.fg-nav { display: flex; align-items: center; gap: 4px; }
.fg-nav a {
  font-family: var(--fg-body);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--fg-ink-90);
  transition: background 0.15s, color 0.15s;
}
.fg-nav a:hover { background: rgba(11, 11, 11, 0.06); color: var(--fg-ink); }
.fg-nav .current-menu-item > a,
.fg-nav .current_page_item > a,
.fg-nav .current-menu-ancestor > a {
  background: var(--fg-ink);
  color: var(--fg-cream);
}
.fg-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }

/* Pastilla de perfil: iniciales en el círculo naranja + etiqueta. */
.fg-profile-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 16px 5px 5px;
  border: 1.5px solid var(--fg-line);
  border-radius: 999px;
  font-family: var(--fg-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-ink-70);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Sin sesión la pastilla no lleva círculo, solo la palabra «Entrar». El relleno
   de arriba está pensado para que el círculo toque el borde (5 px a la izquierda,
   16 a la derecha), así que sin círculo el texto se iría a la izquierda. Aquí se
   reparte a partes iguales y se fija la altura, para que la cabecera mida lo
   mismo con sesión y sin ella. */
.fg-profile-pill--texto {
  justify-content: center;
  min-height: 40px;
  padding: 0 22px;
}

.fg-profile-pill:hover,
.fg-profile-pill.is-active {
  background: var(--fg-ink);
  border-color: var(--fg-ink);
  color: #fff;
}
.fg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fg-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.fg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.fg-burger { display: none; background: none; border: 0; padding: 4px; color: var(--fg-ink); }
.fg-drawer { display: none; background: var(--fg-cream); border-top: 1px solid var(--fg-line); padding: 24px 0; }
.fg-drawer.is-open { display: block; }
.fg-drawer ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fg-drawer a { font-family: var(--fg-body); font-weight: 600; font-size: 16px; }
.fg-drawer__foot { padding-top: 16px; border-top: 1px solid var(--fg-line); }

@media (max-width: 768px) {
  .fg-nav, .fg-header__actions { display: none; }
  .fg-burger { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   7. Pie
   ══════════════════════════════════════════════════════════════════ */
.fg-footer { background: var(--fg-ink); color: rgba(255, 255, 255, 0.55); padding: 64px 0 32px; }
.fg-footer a { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.fg-footer a:hover { color: var(--fg-orange); }
.fg-footer__intro { font-size: 15px; line-height: 1.7; max-width: 280px; margin-top: 20px; }
.fg-footer__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 32px;
}
.fg-footer__legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}
.fg-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}
.fg-footer__legal p { margin: 0; }
.fg-footer__legales { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.fg-footer .fg-footer__legales a { font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.fg-footer .fg-footer__legales a:hover { color: var(--fg-orange); }

/* ══════════════════════════════════════════════════════════════════
   8. Contenido corriente (páginas y entradas sueltas)
   ══════════════════════════════════════════════════════════════════ */
.fg-entry { max-width: 760px; margin: 0 auto; }
.fg-entry h1 { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 24px; }
.fg-entry h2 { font-size: 30px; margin: 40px 0 14px; }
.fg-entry h3 { font-size: 22px; margin: 32px 0 10px; }
.fg-entry ul, .fg-entry ol { margin: 0 0 1em; padding-left: 1.2em; }
.fg-entry li { margin-bottom: 6px; }
.fg-entry a { color: var(--fg-orange); font-weight: 600; }
/* Los botones dentro del texto conservan su color: sin esto el enlace naranja
   dejaba el rótulo naranja sobre el botón naranja (se veía en la 404). */
.fg-entry a.fg-btn { color: #fff; }
.fg-entry a.fg-btn-ghost, .fg-entry a.fg-btn-cream { color: var(--fg-ink); }
.fg-entry blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--fg-orange);
  font-family: var(--fg-display);
  font-size: 22px;
}
.fg-entry img { border-radius: 14px; margin: 28px 0; }

.fg-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.fg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.fg-pagination .page-numbers.current { background: var(--fg-ink); border-color: var(--fg-ink); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   9. Portada — franja de novedades
   ══════════════════════════════════════════════════════════════════ */
.fg-novedades { padding: 48px 0 52px; }
.fg-novedades__eyebrow { color: var(--fg-orange); margin-bottom: 24px; }
.fg-novedades__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fg-novedad {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.15s;
}
.fg-novedad:first-child { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); }
.fg-novedad:hover { background: rgba(255, 255, 255, 0.13); color: inherit; }

.fg-novedad__thumb {
  position: relative;
  width: 76px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--fg-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.fg-novedad__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sin el velo, el triángulo se pierde en las fotos claras. */
.fg-novedad__veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.fg-novedad__play { position: relative; }

.fg-novedad__body { min-width: 0; }
.fg-novedad__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--fg-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 4px;
  font-variation-settings: "opsz" 144;
}
.fg-novedad__course { display: block; color: rgba(255, 255, 255, 0.4); }

@media (max-width: 900px) {
  .fg-novedades__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   10. Portada — biblioteca
   ══════════════════════════════════════════════════════════════════ */
/* Padding propio en vez de .fg-section: 104px debajo de la franja negra
   dejaba un vacío enorme antes del titular. */
.fg-library { background: var(--fg-beige); padding: var(--fg-section) 0; }
.fg-library__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}
.fg-library__head .fg-mono { margin-top: 6px; }

/* Pastillas de edición (año), como en la maqueta: tinta rellena la activa,
   contorno las demás. Filtran de verdad: recargan con ?anio=. */
.fg-year-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 32px; }
.fg-year-pill {
  padding: 7px 16px;
  border: 1.5px solid var(--fg-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-ink-70);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fg-year-pill:hover { border-color: var(--fg-ink); color: var(--fg-ink); }
.fg-year-pill.is-active { background: var(--fg-ink); border-color: var(--fg-ink); color: #fff; }

@media (max-width: 720px) {
  .fg-library__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
}

/* ══════════════════════════════════════════════════════════════════
   11. Rejilla de entradas (blog, búsqueda, archivos)
   ══════════════════════════════════════════════════════════════════ */
.fg-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
.fg-post-card__thumb { display: block; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.fg-post-card__thumb img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.fg-post-card h2 { font-size: 20px; margin-bottom: 8px; }

@media (max-width: 1024px) { .fg-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fg-post-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   12. Búsqueda
   ══════════════════════════════════════════════════════════════════ */
.fg-search { display: flex; gap: 10px; }
.fg-search input[type="search"] {
  flex-grow: 1;
  padding: 12px 20px;
  border: 1.5px solid var(--fg-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fg-body);
  font-size: 15px;
  color: var(--fg-ink);
}
.fg-search input[type="search"]::placeholder { color: var(--fg-ink-50); }

/* ══════════════════════════════════════════════════════════════════
   13. Biblioteca de documentos
   ══════════════════════════════════════════════════════════════════ */
/* El color de cada área llega por --fg-doc-color (fondo) y --fg-doc-on (el
   texto que va encima). Los pone la plantilla en el style de cada elemento,
   porque las áreas son términos que se crean desde el escritorio y no se
   pueden dejar escritas aquí. La paleta está en fg_lms_paleta_areas(). */

.fg-docs-head { padding: 56px 0 60px; }
.fg-docs-head .fg-h-m { margin-bottom: 12px; }
.fg-docs-head__sub {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* Enlace de vuelta, arriba del todo de la franja negra. */
.fg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.fg-back:hover { color: #fff; }

/* Pastillas de área: no filtran, saltan al bloque correspondiente. */
.fg-docs-chips {
  background: var(--fg-cream);
  border-bottom: 1px solid var(--fg-line);
  padding: 14px 0;
  overflow-x: auto;
}
.fg-docs-chips .fg-wrap { display: flex; gap: 8px; }
.fg-chip {
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--fg-doc-color);
  color: var(--fg-doc-on);
  font-weight: 600;
  font-size: 13px;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.fg-chip:hover { opacity: 1; color: var(--fg-doc-on); }

.fg-docs .fg-wrap { display: flex; flex-direction: column; gap: 72px; }

/* scroll-margin: sin esto la cabecera pegajosa tapa el título del área al
   llegar desde una pastilla. */
.fg-docs-group { scroll-margin-top: calc(var(--fg-nav-h) + 24px); }
.fg-docs-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.fg-docs-group__title { font-size: 24px; }
.fg-docs-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--fg-doc-color);
}

.fg-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fg-doc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fg-doc:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 11, 11, 0.08); }

.fg-doc__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--fg-doc-color);
  color: var(--fg-doc-on);
  opacity: 0.92;
}
.fg-doc__ext {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.fg-doc__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  padding: 16px 18px 20px;
}
.fg-doc__title { font-size: 16px; line-height: 1.3; }
.fg-doc__desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-ink-70); }
/* El origen empuja al pie hacia abajo para que todas las fichas de una fila
   tengan el botón a la misma altura, aunque unas lleven descripción y otras no. */
.fg-doc__origen {
  margin: 0;
  flex-grow: 1;
  font-size: 12px;
  color: var(--fg-ink-50);
}
.fg-doc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--fg-line);
}

/* Franja de la portada que lleva aquí. */
.fg-docs-cta { padding: 72px 0; }
.fg-docs-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.fg-docs-cta h2 { margin-bottom: 8px; }
.fg-docs-cta p { font-size: 16px; color: rgba(246, 240, 226, 0.72); }
.fg-docs-cta .fg-btn { flex-shrink: 0; }

@media (max-width: 1024px) { .fg-docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fg-docs-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   Plantillas de página: Legal y Ayuda
   ══════════════════════════════════════════════════════════════════ */
.fg-legal .fg-entry h2 { font-size: 24px; }
.fg-legal .fg-entry { font-size: 16px; line-height: 1.75; }

.fg-faq { display: flex; flex-direction: column; gap: 12px; margin: 40px 0 56px; }
.fg-faq__item {
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  transition: border-color 0.15s;
}
.fg-faq__item[open] { border-color: rgba(255, 91, 0, 0.35); background: #FFF8F3; }
.fg-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--fg-display);
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.fg-faq__q::-webkit-details-marker { display: none; }
.fg-faq__q svg { flex-shrink: 0; color: var(--fg-orange); transition: transform 0.2s; }
.fg-faq__item[open] .fg-faq__q { color: var(--fg-orange); }
.fg-faq__item[open] .fg-faq__q svg { transform: rotate(180deg); }
.fg-faq__a { padding: 0 24px 22px; color: var(--fg-ink-70); }
.fg-faq__a p:last-child { margin-bottom: 0; }

.fg-faq__contacto {
  padding: 36px;
  border-radius: 18px;
  background: var(--fg-ink);
  color: rgba(255, 255, 255, 0.72);
}
.fg-faq__contacto h2 { color: #fff; margin: 0 0 8px; }
.fg-faq__contacto .fg-btn { margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════
   Pie siempre abajo
   ══════════════════════════════════════════════════════════════════ */
/* En páginas cortas (404, perfil, ajustes…) el pie se quedaba a media
   pantalla con una franja crema debajo. */
body { min-height: 100vh; display: flex; flex-direction: column; }
#fg-content { flex: 1 0 auto; }
.fg-header, .fg-footer { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   Listados de asignaturas (Vídeos, categoría, edición, proyecto, búsqueda)
   ══════════════════════════════════════════════════════════════════ */
/* El mismo fondo, ancho y cabecera que la biblioteca de la portada. */
body.fg-listado #fg-content { background: var(--fg-beige); }
.fg-listado__desc { margin: 12px 0 0; max-width: 620px; color: var(--fg-ink-70); }
.fg-listado__head { margin-bottom: 36px; }
.fg-listado__vacio { padding: 48px 0; }
.fg-listado__vacio p { margin-bottom: 20px; color: var(--fg-ink-70); }

/* El archivo que pinta Tutor: su contenedor pasa a medir lo que .fg-wrap. */
body.fg-listado .tutor-courses-wrap {
  max-width: var(--fg-wrap) !important;
  padding: var(--fg-section) var(--fg-gutter) !important;
  margin: 0 auto;
}
body.fg-listado .tutor-courses-wrap > .tutor-row { margin: 0 !important; }
body.fg-listado .tutor-courses-wrap > .tutor-row > .tutor-col-12 { padding: 0 !important; }
body.fg-listado .tutor-courses-wrap .tutor-col-12 > div { padding: 0 !important; }
/* El desplegable de orden no está en el diseño: la biblioteca se ordena por
   fecha y se filtra por edición con las pastillas. */
body.fg-listado .tutor-course-filter,
body.fg-listado .tutor-course-filter + br { display: none !important; }
body.fg-listado .tutor-pagination { margin-top: 48px; }