/* ==========================================================================
   Canon 100 — Vitrina
   Diseño editorial de lujo: espacio negativo amplio, tarjetas "invisibles",
   acentos dorados mate. Sin bordes duros ni sombras pesadas.
   ========================================================================== */

:root {
  --color-bg: #F9F9F7;
  --color-ink: #2C2C2C;
  --color-ink-soft: #5A5A57;
  --color-gold: #B89742;
  --color-hairline: rgba(44, 44, 44, 0.08);

  --font-serif: "Playfair Display", "Lora", Georgia, serif;
  --font-serif-alt: "Lora", Georgia, serif;

  --gutter: clamp(1.5rem, 4vw, 3.5rem);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif-alt);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.site-header__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* Visualmente oculto pero presente en el DOM para SEO/accesibilidad */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.site-header__logo {
  width: 100%;
  max-width: 270px;
  height: auto;
}

@media (min-width: 1024px) {
  .site-header__logo {
    max-width: 380px;
  }
}

.site-header__eyebrow {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Menú de navegación
   -------------------------------------------------------------------------- */

.main-nav {
  /* El gap de .site-header__inner ya separa el eslogan del nav; este margen
     inferior acorta ligeramente la distancia hacia el buscador para que
     ambos se perciban como un mismo bloque de "acciones". */
  margin: 0 0 -0.3rem;
}

.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.main-nav a:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-hairline);
}

.main-nav li.active a {
  color: var(--color-gold);
  font-weight: 600;
  border-bottom-color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Buscador
   -------------------------------------------------------------------------- */

.search-bar {
  margin: 0.4rem auto 0;
  max-width: 420px;
  width: 100%;
}

.search-bar__input {
  width: 100%;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-serif-alt);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  text-align: center;
  transition: border-color 0.4s ease;
}

.search-bar__input::placeholder {
  color: var(--color-ink-soft);
  opacity: 0.6;
}

.search-bar__input:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Grid principal
   -------------------------------------------------------------------------- */

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem);
}

@media (min-width: 640px) {
  .grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .grid-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Tarjeta "invisible"
   -------------------------------------------------------------------------- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.movie-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--color-hairline);
  box-shadow: none;
  transition: all 0.4s ease;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
  cursor: pointer;
}

.movie-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* Oculta las tarjetas descartadas por el buscador sin afectar el layout del resto */
.movie-card--hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   Póster (TMDb)
   -------------------------------------------------------------------------- */

.movie-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;
  /* Fondo gris perlado: se ve mientras carga la imagen o si TMDb no devuelve póster */
  background-color: #E7E4DC;
  background-image: linear-gradient(160deg, #ECEAE3, #DEDBD2);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.movie-poster--loaded {
  opacity: 1;
}

.movie-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.5rem);
}

.movie-card__rank {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--color-gold);
}

.movie-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--color-ink);
}

.movie-card__year {
  font-family: var(--font-serif-alt);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

/* Etiqueta inteligente del creador: "Director" (Cine), "Artista" (Música) o
   "Autor" (Literatura) */
.movie-card__creator {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.movie-card__creator-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.movie-card__creator-value {
  font-family: var(--font-serif-alt);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.movie-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-hairline);
}

.movie-card__score-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.movie-card__score-value {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Estado de carga / vacío
   -------------------------------------------------------------------------- */

.grid-status {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  font-family: var(--font-serif-alt);
  font-style: italic;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Modal de desglose estadístico
   -------------------------------------------------------------------------- */

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.35s ease;
  animation: modalFadeIn 0.35s ease;
}

.modal-overlay.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(720px, 90vh);
  overflow-y: auto;
  background-color: var(--color-bg);
  color: var(--color-ink);
  border: none;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.75rem, 5vw, 3rem);
  text-align: center;
  animation: modalScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.close-btn {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  font-family: var(--font-serif-alt);
  color: var(--color-ink-soft);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.close-btn:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
  transform: rotate(90deg);
}

.modal-content__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.25;
  color: var(--color-ink);
}

/* Creador destacado (Director/Artista/Autor): línea de crédito elegante,
   justo debajo del título principal y por encima del año/stats-grid. */
.modal-content__creator {
  display: none; /* alternado a flex desde openModal() según el pilar activo */
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
}

.modal-content__creator-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.modal-content__creator-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--color-ink);
}

.modal-content__year {
  display: inline-block;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  font-family: var(--font-serif-alt);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink-soft);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1.5rem);
}

.stats-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stats-grid__value {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  color: var(--color-ink);
}

.stats-grid__label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

@media (max-width: 420px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* CTA dinámico del modal: texto y destino cambian según el pilar activo
   (Cine → JustWatch, Música → Spotify, Literatura → Goodreads). Oculto por
   defecto; openModal() lo revela solo si hay un pilar reconocido. */
.modal-cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  margin: clamp(1.75rem, 4vw, 2.25rem) auto 0;
  padding: 0.85rem 2.1rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bg);
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

.modal-cta:hover {
  background-color: transparent;
  color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(184, 151, 66, 0.28);
}

/* --------------------------------------------------------------------------
   Toast (avisos discretos, p. ej. pilares "Próximamente")
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(12px);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0.85rem 1.5rem;
  background-color: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-serif-alt);
  font-style: italic;
  font-size: 0.9rem;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 2000;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 2rem var(--gutter) 3rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-hairline);
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.6rem;
}

.site-footer__link {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-footer__link:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.site-footer__separator {
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Manifiesto (página independiente, manifiesto.html)
   -------------------------------------------------------------------------- */

.manifesto-header {
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: var(--color-gold);
}

.manifesto-container {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

.manifesto-container h1 {
  margin: 0 0 1.75rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.25;
  color: var(--color-ink);
}

.manifesto-container h2 {
  margin: 2.75rem 0 1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--color-gold);
}

.manifesto-container p {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif-alt);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-ink-soft);
}

.manifesto-container ul {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}

.manifesto-container li {
  font-family: var(--font-serif-alt);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.manifesto-container li::marker {
  color: var(--color-gold);
}

.manifesto-container li strong,
.manifesto-container p strong {
  font-weight: 600;
  color: var(--color-ink);
}