/* =============================================================================
   Marco público de La Federicopedia.

   Solo lo carga templates/base.html.twig. Las TARJETAS de motes, el panel y el resto de
   main.css no se tocan desde aquí.

   Lenguaje visual: fondo gris pizarra, superficies blancas, bordes de 1px, radios
   generosos y sombras muy suaves. Sin degradados ni adornos: el color lo ponen las
   tarjetas (ribbon rojo, botón de "me gusta" cian) y los badges de las etiquetas.

   Índice:
     1. Tokens
     2. Base
     3. Navbar
     4. Migas y cabeceras
     5. Portada (hero)
     6. Listados de personajes
     7. Ficha de mote
     8. Ficha de personaje
     9. Quiz
    10. Contacto
    11. Prosa (cookies)
    12. Login
    13. Pie de página
    14. Ajustes responsive
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Superficies y tinta (escala tipo slate) */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --ink: #0f172a;
  --text: #1e293b;
  --muted: #64748b;
  --faint: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Estados */
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --success: #047857;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --accent: #0891b2;
  --accent-bg: #ecfeff;

  /* Formas */
  --r-sm: 0.5rem;
  --r: 0.625rem;
  --r-lg: 0.75rem;
  --r-xl: 1rem;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px 0 rgb(15 23 42 / 5%);
  --sh: 0 1px 3px 0 rgb(15 23 42 / 8%), 0 1px 2px -1px rgb(15 23 42 / 8%);
  --sh-md: 0 4px 6px -1px rgb(15 23 42 / 8%), 0 2px 4px -2px rgb(15 23 42 / 6%);
  --sh-lg: 0 10px 15px -3px rgb(15 23 42 / 10%), 0 4px 6px -4px rgb(15 23 42 / 8%);

  /* Tipografía */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  --nav-h: 4rem;
  --focus-ring: 0 0 0 3px rgb(148 163 184 / 30%);
}

/* -----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html:has(body.site) {
  background-color: var(--bg);
}

body.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Enlaces: la base usa :where() a propósito (especificidad 0) para que las reglas de
   componente de más abajo manden sin pelearse. */
.site :where(a) {
  color: inherit;
  text-decoration: none;
}

.site :where(a):hover,
.site :where(a):focus {
  text-decoration: underline;
}

body.site ::selection {
  background: var(--surface-3);
  color: var(--ink);
}

body.site :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Empuja el pie al fondo en páginas con poco contenido. */
.site-body {
  flex: 1 0 auto;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* Enlace de salto: solo visible al tabular. */
.site-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1100;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.15s ease;
}

.site-skip:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

@media (min-width: 1200px) {
  body.site .container {
    max-width: 80rem;
  }
}

/* -----------------------------------------------------------------------------
   3. Navbar
   -------------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0;
  background: rgb(255 255 255 / 85%);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-nav__inner {
  align-items: center;
  gap: 1rem;
  min-height: var(--nav-h);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  color: inherit;
}

.site-brand:hover,
.site-brand:focus {
  text-decoration: none;
}

.site-brand__logo {
  height: 2.5rem;
  width: auto;
  transition: transform 0.2s ease;
}

/* El toque de vida: el retrato se ladea un poco al pasar por encima. */
.site-brand:hover .site-brand__logo,
.site-brand:focus-visible .site-brand__logo {
  transform: translateY(-2px) rotate(-3deg) scale(1.04);
}

.site-brand__wordmark {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav__toggler {
  margin-left: auto;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.site-nav__toggler:focus {
  box-shadow: var(--focus-ring);
}

.site-nav__panel {
  gap: 1rem;
}

.site-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-nav__link {
  padding: 0.35rem 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link:focus {
  color: var(--ink);
  text-decoration: none;
}

.site-nav__link.is-active {
  color: var(--ink);
  font-weight: 600;
}

/* Buscador: campo tipo píldora sobre gris suave, como el del diseño de referencia.
   El formulario lleva `position: relative` porque el desplegable de sugerencias es su HERMANO
   (está fuera de .search-form__field): sin él, el ancestro posicionado más cercano es el navbar
   entero y la lista se pintaba a todo lo ancho de la pantalla. */
.site-nav .search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.site-nav .search-form__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.site-nav .search-form__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.site-nav .search-form:focus-within .search-form__icon {
  color: var(--muted);
}

.site-nav input.search {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-nav input.search::placeholder {
  color: var(--faint);
}

.site-nav input.search:hover {
  background: #eef2f7;
}

.site-nav input.search:focus {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
  outline: none;
}

.site-nav .suggestions {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: 0;
  z-index: 1050;
  max-height: 60vh;
  margin: 0;
  padding: 0.3125rem;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

/* Sin ninguna sugerencia (todavía no se ha escrito nada) la lista no se pinta: antes se veía
   como una barrita blanca con sombra justo debajo del navbar. Se usa :has() en vez de :empty()
   porque el <ul> de la plantilla contiene un nodo de texto (el salto de línea) y :empty no casa. */
.site-nav .suggestions:not(:has(li)) {
  display: none;
}

.site-nav .suggestions li {
  margin: 0;
  border-radius: var(--r-sm);
  transition: background 0.15s ease;
}

.site-nav .suggestions li:hover {
  background: var(--surface-2);
}

/* Cada sugerencia ocupa UNA línea: el mote a la izquierda y, a la derecha, el personaje en gris.
   Antes iban en dos renglones con un <br>, que dejaba un hueco enorme entre ambos. */
.site-nav .suggestions li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.5625rem;
  line-height: 1.35;
}

.site-nav .suggestions li a:hover,
.site-nav .suggestions li a:focus {
  text-decoration: none;
}

.site-nav .search-result-alias {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav .search-result-personage {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  color: var(--faint);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav .hl {
  padding: 0 0.125rem;
  border-radius: 0.25rem;
  background: var(--accent-bg);
  color: var(--accent);
}

/* Estados del desplegable sin resultados (los pinta aliasSearch.js). */
.site-nav .suggestions-empty {
  padding: 0.5rem 0.5625rem;
  color: var(--faint);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* -----------------------------------------------------------------------------
   4. Migas de pan y cabeceras de página

   Las migas son una franja propia pegada al navbar (base.html.twig las pinta entre el
   header y .site-body): en pantallas grandes se alinean a la derecha, al ras del
   contenedor, y en pequeñas a la izquierda.
   -------------------------------------------------------------------------- */

.site-crumbs {
  padding: 0.4rem 0;
}

.site-crumbs .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 0.75rem;
}

@media (min-width: 992px) {
  .site-crumbs .breadcrumb {
    justify-content: flex-end;
  }
}

.site-crumbs .breadcrumb-item a {
  color: var(--faint);
}

.site-crumbs .breadcrumb-item a:hover {
  color: var(--ink);
}

.site-crumbs .breadcrumb-item.active {
  color: var(--muted);
  font-weight: 500;
}

.site-crumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--border-strong);
  content: "/";
}

.site-head {
  padding: clamp(1.25rem, 3vw, 1.875rem) 0 clamp(0.75rem, 1.5vw, 1.25rem);
}

.site-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-head__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.site-head__lead {
  max-width: 44rem;
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.site-head__meta {
  margin: 0.75rem 0 0;
  color: var(--faint);
  font-size: 0.8rem;
}

/* Cabecera centrada (la usa el quiz). */
.site-head--center {
  text-align: center;
}

.site-head--center .site-head__lead {
  margin-left: auto;
  margin-right: auto;
}

.site-section-title {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0.75rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-section-title--center {
  text-align: center;
}

/* Panel genérico del marco público. */
.site-panel {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* Mensaje de listados sin resultados. */
.site-empty {
  padding: 1rem 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Botones (las tarjetas conservan los suyos). */
.site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.site-btn:hover,
.site-btn:focus {
  text-decoration: none;
  transform: translateY(-1px);
}

.site-btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--sh-sm);
}

.site-btn--primary:hover,
.site-btn--primary:focus {
  background: #1e293b;
  color: #fff;
  box-shadow: var(--sh-md);
}

/* -----------------------------------------------------------------------------
   5. Portada (hero)
   -------------------------------------------------------------------------- */

.site-hero {
  max-width: 42rem;
  margin: clamp(1.5rem, 4vw, 2.75rem) auto clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

.site-hero__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-hero__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.site-hero__lead {
  margin: 0.875rem 0 0;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   6. Listados de personajes

   Los usa el listado público de personajes y la página de una etiqueta. El listado
   del panel mantiene sus clases propias (.personage-thumb-block, AdminLTE).
   -------------------------------------------------------------------------- */

.site-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 0.5rem;
  padding-bottom: 1rem;
}

.site-letter {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-letter:first-child {
  margin-top: 0;
}

.site-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-person:hover,
.site-person:focus-within {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--sh-sm);
}

.site-person__avatar {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border);
}

.site-person__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-person__body {
  min-width: 0;
}

.site-person__name {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.site-person__count {
  display: block;
  color: var(--faint);
  font-size: 0.75rem;
}

/* -----------------------------------------------------------------------------
   7. Ficha de mote
   -------------------------------------------------------------------------- */

.site-alias-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: clamp(0.5rem, 2vw, 1rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

.site-alias-stage .frame-container-video {
  width: auto;
  flex: 0 0 auto;
}

.site-video-frame {
  flex: 1 1 28rem;
  min-width: min(20rem, 100%);
  max-width: 52rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--ink);
  box-shadow: var(--sh-md);
}

.site-video-frame iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.site-alias-personage {
  max-width: 56rem;
  margin: 0 auto;
}

.site-alias-personage__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.site-alias-personage__title a {
  color: var(--ink);
}

.site-alias-personage__title a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}

.site-alias-personage__text {
  max-width: 44rem;
  margin: 0.75rem 0 0;
  color: var(--text);
}

.site-alias-personage .personage-main-image {
  display: block;
  max-width: 100%;
  max-height: 26rem;
  margin: 1.25rem auto 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.site-alias-personage__actions {
  margin: 1.5rem 0 0;
}

/* -----------------------------------------------------------------------------
   8. Ficha de personaje
   -------------------------------------------------------------------------- */

.site-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0.5rem;
}

.site-profile__media {
  order: -1;
}

.site-profile__media img {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-md);
}

.site-profile__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.site-profile__lead {
  max-width: 44rem;
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.site-profile__meta {
  margin: 0.75rem 0 0;
  color: var(--faint);
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  .site-profile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .site-profile__media {
    order: 0;
  }

  .site-profile__media img {
    max-width: none;
  }
}

/* -----------------------------------------------------------------------------
   9. Quiz

   Tarjeta partida: la imagen a la izquierda y la pregunta con las opciones a la derecha
   (apiladas en pantallas pequeñas). quiz.js alterna .is-chosen / .is-correct / .is-dim
   sobre .quiz-option y conserva .correct-option en la opción válida (la pinta la plantilla).
   -------------------------------------------------------------------------- */

.site-quiz {
  max-width: 62rem;
  margin: 0 auto;
}

.site-quiz__card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

.site-quiz__media {
  background: var(--surface-2);
}

.site-quiz img.quiz-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.site-quiz__panel {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.site-quiz__label {
  margin: 0 0 0.375rem;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-quiz__alias {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.site-quiz__explanation {
  margin: 0.75rem 0 0;
  padding-left: 0.875rem;
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
  font-size: 0.95rem;
}

.site-quiz__options {
  display: grid;
  gap: 0.5rem;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding: 0;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.quiz-option .inner {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Letra de la opción (A, B, C…): da aspecto de test y fija el punto de mira. */
.quiz-option__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}

.quiz-option:hover,
.quiz-option:focus {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.quiz-option:hover .quiz-option__letter,
.quiz-option:focus .quiz-option__letter {
  background: var(--surface-3);
  color: var(--ink);
}

.quiz-option.is-dim {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.quiz-option.is-chosen {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: #b91c1c;
}

.quiz-option.is-chosen .quiz-option__letter {
  background: var(--danger);
  color: #fff;
}

.quiz-option.is-correct {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
  box-shadow: 0 6px 16px rgb(4 120 87 / 12%);
}

.quiz-option.is-correct .quiz-option__letter {
  background: var(--success);
  color: #fff;
}

/* Marca del resultado a la derecha (solo tras responder). */
.quiz-option.is-correct::after,
.quiz-option.is-chosen:not(.is-correct)::after {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 700;
}

.quiz-option.is-correct::after {
  content: "✓";
}

.quiz-option.is-chosen:not(.is-correct)::after {
  content: "✕";
}

.site-quiz__next {
  display: block;
  width: fit-content;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
}

@media (min-width: 768px) {
  .site-quiz__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  /* En escritorio la imagen llena su columna (la altura la marca el panel). */
  .site-quiz__media {
    display: flex;
  }

  .site-quiz img.quiz-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 18rem;
  }
}

/* -----------------------------------------------------------------------------
   10. Contacto
   -------------------------------------------------------------------------- */

.site-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.site-contact__aside {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.site-contact__aside p {
  color: var(--muted);
  font-size: 0.9rem;
}

.site-contact__aside p:last-child {
  margin-bottom: 0;
}

.site-contact__signature {
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.8rem;
}

.site-contact__form {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.site-contact__form .form-label,
.site-contact__form label {
  margin-bottom: 0.375rem;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
}

.site-contact__form .form-control {
  padding: 0.625rem 0.875rem;
  border-color: var(--border);
  border-radius: var(--r);
  font-size: 0.9rem;
  box-shadow: none;
}

.site-contact__form .form-control::placeholder {
  color: var(--faint);
}

.site-contact__form .form-control:focus {
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}

.site-contact__form .form-control.invalid,
.site-contact__form .form-control.is-invalid {
  border-color: var(--danger-border);
  background-color: var(--danger-bg);
}

.site-contact__form .help-block,
.site-contact__form .form-text,
.site-contact__form .invalid-feedback {
  margin-top: 0.375rem;
  color: var(--danger);
  font-size: 0.8rem;
}

.site-contact__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.site-contact__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--sh-sm);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.site-contact__actions .btn:hover,
.site-contact__actions .btn:focus {
  background: #1e293b;
  color: #fff;
  box-shadow: var(--sh-md);
}

@media (min-width: 768px) {
  .site-contact {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* -----------------------------------------------------------------------------
   11. Prosa (cookies)
   -------------------------------------------------------------------------- */

.site-prose {
  max-width: 74ch;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.site-prose h2 {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.625rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-prose h2:first-of-type {
  margin-top: 0.5rem;
}

.site-prose p,
.site-prose li {
  color: var(--muted);
  font-size: 0.95rem;
}

.site-prose ul {
  padding-left: 1.15rem;
}

.site-prose li {
  margin-bottom: 0.375rem;
}

.site-prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.15em;
}

/* -----------------------------------------------------------------------------
   12. Login

   La página no usa el marco (sobreescribe el bloque body): pantalla completa con
   tarjeta centrada sobre el mismo fondo gris del sitio.
   -------------------------------------------------------------------------- */

body.site .login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 3rem) 1.25rem;
  background: var(--bg);
}

body.site .login-box {
  width: 100%;
  max-width: 26rem;
  margin: auto;
}

body.site .login-brand {
  margin-bottom: 1.5rem;
}

body.site .login-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.75rem;
  border-radius: var(--r-xl);
  color: #fff;
  font-size: 1.4rem;
  background: var(--ink);
}

body.site .login-brand-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

body.site .login-brand-subtitle {
  margin: 0.125rem 0 0;
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.site .login-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

body.site .login-card .card-body {
  padding: 2rem 1.75rem;
}

body.site .login-card-title {
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.site .login-card-text {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

body.site .login-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 0.875rem;
}

body.site .login-form .form-label {
  margin-bottom: 0.375rem;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
}

body.site .login-input-group .input-group-text {
  width: 2.875rem;
  justify-content: center;
  color: var(--faint);
  background-color: var(--surface-2);
  border-color: var(--border);
  border-right: 0;
}

body.site .login-input-group .form-control {
  min-height: 2.75rem;
  border-color: var(--border);
  border-left: 0;
  background-color: var(--surface);
  box-shadow: none;
}

body.site .login-input-group .form-control:focus {
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}

body.site .login-input-group:focus-within .input-group-text {
  color: var(--muted);
  background-color: var(--surface-2);
}

body.site .login-password-toggle {
  color: var(--muted);
  background-color: var(--surface-2);
  border-color: var(--border);
  border-left: 0;
}

body.site .login-password-toggle:hover,
body.site .login-password-toggle:focus {
  color: var(--ink);
  background-color: var(--surface-3);
  border-color: var(--border);
  box-shadow: none;
}

body.site .login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.875rem;
  border: 0;
  border-radius: var(--r);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--ink);
  box-shadow: var(--sh-sm);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.site .login-submit:hover,
body.site .login-submit:focus {
  color: #fff;
  background: #1e293b;
  box-shadow: var(--sh-md);
}

body.site .login-footer {
  margin: 1.25rem 0 0;
}

body.site .login-footer a {
  color: var(--muted);
  font-size: 0.85rem;
}

body.site .login-footer a:hover {
  color: var(--ink);
}

@media (max-width: 420px) {
  body.site .login-card .card-body {
    padding: 1.5rem 1.25rem;
  }
}

/* -----------------------------------------------------------------------------
   13. Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.78rem;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}

.site-footer__legal {
  margin: 0;
}

.site-footer__legal strong {
  color: var(--muted);
  font-weight: 600;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

.site-footer__nav a {
  color: var(--faint);
  font-weight: 500;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus {
  color: var(--ink);
  text-decoration: none;
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* -----------------------------------------------------------------------------
   14. Ajustes responsive
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  /* La barra estira a sus hijos (marca, enlaces y buscador) a su altura completa: el desplegable
     de sugerencias se ancla al borde inferior del buscador, así que si este no llega al filo de la
     barra, el desplegable la solapa. La especificidad doble es necesaria para ganar al
     `align-items: center` de `.navbar > .container` de Bootstrap. */
  .site-nav .site-nav__inner {
    align-items: stretch;
  }

  .site-nav__panel {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1.75rem;
    padding-bottom: 0;
  }

  .site-nav__links {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .site-nav__search {
    display: flex;
    align-self: stretch;
    flex: 0 1 18rem;
  }
}

@media (max-width: 991.98px) {
  .site-nav__panel {
    padding-bottom: 0.875rem;
  }

  .site-nav__link {
    padding: 0.5rem 0;
  }

  .site-nav__search {
    width: 100%;
    margin-top: 0.75rem;
  }

  /* Dentro del menú desplegado las sugerencias fluyen debajo del campo en vez de flotar: en
     posición absoluta se comían el borde inferior de la barra. */
  .site-nav .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav .suggestions {
    position: static;
    margin-top: 0.5rem;
    max-height: 45vh;
    box-shadow: var(--sh-md);
  }
}

@media (max-width: 575.98px) {
  .site-brand__logo {
    height: 2rem;
  }

  .site-brand__wordmark {
    font-size: 1rem;
  }

  .site-head__title {
    font-size: 1.5rem;
  }
}

/* Accesibilidad: menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  body.site *,
  body.site *::before,
  body.site *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .site-brand:hover .site-brand__logo,
  .quiz-option:hover,
  .site-btn:hover {
    transform: none;
  }
}