/* Tus gustos: la encuesta (gustos.mjs), su apartado de Ajustes y lo que se ve
 * de ellos en Para ti y en las listas (el porqué y el desplegable de géneros).
 * Con los tokens y las piezas de estilo.css; sin sombras, resplandores ni
 * desenfoques. Primero el móvil; desde 900 px, el escritorio. */

/* ================================================================ la encuesta */
.capa-gustos .panel { display: flex; flex-direction: column; padding-bottom: 0; }
.gustos { display: flex; flex-direction: column; gap: var(--esp-5); flex: 1 1 auto; min-height: 0; }
.gustos-cabeza { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--esp-4); align-items: center; padding-right: 40px; }
.gustos-mascota { width: 64px; height: auto; color: var(--texto); }
.gustos-cabeza h2 { font-size: var(--tam-2xl); letter-spacing: -0.03em; line-height: 1.15; }
.gustos-cabeza .sub { margin-top: var(--esp-1); font-size: 14px; color: var(--texto-2); max-width: 52ch; }
.gustos-cuerpo { flex: 1 1 auto; }

/* El pie se queda abajo, sobre la hoja, mientras el contenido corre por debajo. */
.gustos-pie {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  margin: 0 calc(var(--lado) * -1); padding: var(--esp-3) var(--lado) calc(var(--esp-3) + env(safe-area-inset-bottom)); background: var(--elevada);
}
.gustos-progreso { display: flex; gap: 6px; margin-right: auto; order: -1; flex-basis: 100%; }
.gustos-progreso i { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--hundido); transition: background var(--medio); }
.gustos-progreso i.hecho { background: var(--acento); }
.gustos-botones { display: flex; gap: var(--esp-2); margin-left: auto; }
.gustos-pie .boton.sutil { padding-left: var(--esp-2); padding-right: var(--esp-2); }

/* ---- paso 1: qué consumes */
/* «¿Ves anime o manga?», encima de las tarjetas (ui/js/gustos.mjs). */
.gustos-anime { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-4); }
.gustos-anime-pregunta { font-weight: 600; }
.gustos-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.gustos-tipo {
  position: relative; display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-5) var(--esp-3) var(--esp-4);
  border-radius: var(--radio-tarjeta); background: var(--superficie); color: var(--texto-2); text-align: center;
  transition: background var(--rapido), color var(--rapido), transform var(--medio) var(--muelle);
}
.gustos-tipo:hover { background: color-mix(in srgb, var(--superficie) 70%, var(--elevada)); color: var(--texto); }
.gustos-tipo:active { transform: scale(0.97); }
.gustos-tipo.activo { background: var(--seleccion); color: var(--acento); }
.gustos-tipo-nombre { font-size: var(--tam-l); font-weight: 600; letter-spacing: -0.015em; }
.gustos-marca {
  position: absolute; top: var(--esp-2); right: var(--esp-2); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento); opacity: 0; transform: scale(0.6); transition: opacity var(--rapido), transform var(--medio) var(--muelle);
}
.gustos-marca .icono { width: 14px; height: 14px; }
.gustos-tipo.activo .gustos-marca { opacity: 1; transform: none; }

/* El abanico: tres carátulas abiertas como cartas. */
.gustos-abanico { position: relative; display: block; width: 120px; height: 92px; }
.gustos-abanico-hueco {
  position: absolute; left: 50%; bottom: 0; width: 54px; aspect-ratio: 2 / 3; margin-left: -27px; border-radius: var(--radio); overflow: hidden;
  background: var(--hundido); transform-origin: 50% 110%; transform: translateX(calc(var(--i) * 30px)) rotate(calc(var(--i) * 9deg));
  transition: transform var(--medio) var(--muelle);
}
.gustos-abanico-hueco:nth-child(2) { z-index: 1; }
.gustos-abanico-hueco img { width: 100%; height: 100%; object-fit: cover; }
.gustos-tipo:hover .gustos-abanico-hueco, .gustos-tipo.activo .gustos-abanico-hueco { transform: translateX(calc(var(--i) * 36px)) rotate(calc(var(--i) * 13deg)); }

/* ---- paso 2: géneros */
.gustos-generos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.gustos-generos .chip { height: 38px; padding: 0 var(--esp-4); font-size: 14px; }

/* ---- paso 3: lo popular */
.gustos-seccion + .gustos-seccion { margin-top: var(--esp-6); }
.gustos-seccion h3 { font-size: var(--tam-l); margin-bottom: var(--esp-3); }
.gustos-obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-3); }
.gustos-obra-esq { aspect-ratio: 2 / 3; border-radius: var(--radio); }
.gustos-obra { display: grid; gap: 2px; align-content: start; min-width: 0; text-align: left; color: var(--texto); }
.gustos-obra-cartel { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--radio); overflow: hidden; background: var(--superficie); margin-bottom: var(--esp-1); transition: transform var(--medio) var(--muelle); }
.gustos-obra-cartel img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--rapido); }
.gustos-obra:active .gustos-obra-cartel { transform: scale(0.96); }
.gustos-obra-titulo { font-size: var(--tam-s); font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gustos-obra .sub { font-size: var(--tam-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gustos-sello {
  position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 6px; border-radius: var(--radio-boton); text-align: center;
  font-size: var(--tam-xs); font-weight: 600; line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity var(--rapido), transform var(--medio) var(--muelle);
}
.gustos-obra[data-marca='pendiente'] .gustos-sello { opacity: 1; transform: none; background: var(--elevada); color: var(--texto); }
.gustos-obra[data-marca='vista'] .gustos-sello { opacity: 1; transform: none; background: var(--acento); color: var(--sobre-acento); }
.gustos-obra[data-marca='vista'] .gustos-obra-cartel img { opacity: 0.7; }

@media (min-width: 600px) {
  .gustos-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gustos-obras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .capa-gustos .panel { padding-bottom: 0; }
  .gustos-cabeza { grid-template-columns: 84px minmax(0, 1fr); }
  .gustos-mascota { width: 84px; }
  .gustos-cabeza h2 { font-size: var(--tam-3xl); letter-spacing: -0.035em; }
  .gustos-pie { margin: 0 calc(var(--esp-8) * -1); padding: var(--esp-4) var(--esp-8); flex-wrap: nowrap; }
  .gustos-progreso { flex-basis: 120px; order: 0; margin-right: 0; }
  .gustos-pie .boton.sutil { margin-right: auto; }
  .gustos-abanico { width: 150px; height: 110px; }
  .gustos-abanico-hueco { width: 64px; margin-left: -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .gustos-abanico-hueco, .gustos-marca, .gustos-sello, .gustos-obra-cartel { transition: none; }
}

/* ================================================================ Ajustes → Tus gustos
   Dentro de las filas de Ajustes (que ya son --superficie), las tarjetas y los chips suben una capa. */
[data-apartado='gustos'] .gustos-tipos { padding: var(--esp-3); }
[data-apartado='gustos'] .gustos-tipo:not(.activo), [data-apartado='gustos'] .gustos-generos .chip:not(.activo) { background: var(--elevada); }
.gustos-ajustes-generos { padding: var(--esp-3) var(--esp-3) var(--esp-4); }

/* ================================================================ Para ti y las listas */
.para-ti-barra { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.para-ti-filtros a.segmento { text-decoration: none; }
/* En el móvil, el género y el orden de una lista, enteros: si no caben, la barra se desplaza
   en horizontal (nunca se parten ni se encogen). */
@media (max-width: 899px) {
  .lista-barra-extra { overflow-x: auto; scrollbar-width: none; }
  .lista-barra-extra::-webkit-scrollbar { display: none; }
}
.gusto-razon { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.descubre-obra .gusto-razon { justify-self: start; }