/* ============================================================
   NOCHE DE PELIS — estilos de la sección
   Usa los neutros y tipografía de Get Spanished! (--crema, --cafe,
   --gris, --blanco, --font-display, --font-body, --radius, --shadow)
   pero define su PROPIO acento (vino + dorado) — nada de naranja/azul,
   para que esta sección se sienta como su propio rincón dentro del sitio.
   ============================================================ */

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GoogleSans';
  src: url('fonts/googlesans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'ElmsSans';
  src: url('fonts/ElmsSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;

--font-display: 'ElmsSans', GoogleSans;
--font-body: 'Nunito', GoogleSans;
}
:root{
  --noche-vino:       #7c3a3a;
  --noche-vino-dim:   #5c2b2b;
  --noche-dorado:     #b8923f;
  --noche-dorado-dim: #8a6c2c;
  --noche-ink:        #15110d;
  --font-poster: 'Anton', var(--font-display);
  --font-mono:   'JetBrains Mono', monospace;
}

/* ── PORTADA ─────────────────────────────── */
.noche-cover{
  background: var(--crema);
  border: 1px solid var(--crema-dark);
  border-radius: var(--radius-lg);
  padding: 44px 36px 36px;
  margin-bottom: 40px;
  text-align: center;
  overflow: hidden;
}

.noche-cover__eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 4px;
}

.noche-cover__title{
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--cafe);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.noche-cover__sub{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 28px;
}

.noche-cover__strip{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 auto 24px;
  max-width: 760px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.noche-cover__frame{
  position: relative;
  width: 100%;
  height: clamp(110px, 18vw, 190px);
  background: var(--noche-ink);
  overflow: hidden;
}

.noche-cover__frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.12) brightness(0.92);
  transition: transform 0.6s ease;
}

.noche-cover__frame:hover img{
  transform: scale(1.04);
}

.noche-cover__caption{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--gris);
}
.noche-cover__caption b{ color: var(--cafe); }

/* ── BARRA DE FILTROS ────────────────────── */
.noche-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin-bottom: 28px;
}

.noche-bar__search{
  flex: 1 1 200px;
  position: relative;
}
.noche-bar__search svg{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; opacity: 0.45;
}
.noche-bar__search input{
  width: 100%;
  border: 1.5px solid var(--crema-dark);
  background: var(--crema);
  color: var(--cafe);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 9px 14px 9px 34px;
  border-radius: 999px;
  transition: border-color var(--trans);
}
.noche-bar__search input:focus{
  outline: none;
  border-color: var(--noche-vino);
}

.noche-bar select{
  border: 1.5px solid var(--crema-dark);
  background: var(--crema);
  color: var(--cafe);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.noche-bar select:focus{ outline: none; border-color: var(--noche-vino); }

.noche-bar__reset{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  background: none;
  border: 1.5px solid var(--crema-dark);
  color: var(--gris);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--trans), border-color var(--trans);
}
.noche-bar__reset:hover{ color: var(--noche-vino); border-color: var(--noche-vino); }

.noche-bar__count{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--gris);
  margin-left: auto;
  white-space: nowrap;
}
.noche-bar__count strong{ color: var(--noche-vino); }

/* ── GALERÍA DE TARJETAS ─────────────────── */
.noche-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
}

.noche-empty{
  grid-column: 1/-1;
  text-align: center;
  padding: 50px 16px;
  color: var(--gris);
}
.noche-empty strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cafe);
  margin-bottom: 6px;
}

.noche-card{
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--trans), box-shadow var(--trans);
}
.noche-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
  .noche-card__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #111;
}
 .noche-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noche-card__num{
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  background: rgba(21,17,13,0.65);
  color: var(--noche-dorado);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
  .noche-card__body{
  padding: 14px 15px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* SIN height: 100% */
}
.noche-card__fallback{
  display: none;
}
.noche-card__country{
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--noche-vino);
}

.noche-card__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.25;
  color: var(--cafe);
}
.noche-card__title .yr{
  font-weight: 400;
  color: var(--gris);
  font-size: 0.84em;
}

.noche-card__meta{
  font-size: 0.7rem;
  color: var(--gris);
  line-height: 1.5;
}
.noche-card__meta b{ color: var(--cafe); }

.noche-scores{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
  border: 1px solid var(--crema-dark);
  border-radius: 8px;
  overflow: hidden;
}
.noche-score{
  padding: 7px 6px;
  text-align: center;
  position: relative;
}
.noche-score--p{ background: rgba(124,58,58,0.07); }
.noche-score--w{ background: rgba(184,146,63,0.1); }
.noche-score--p::after{
  content: "";
  position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px;
  background: var(--crema-dark);
}
.noche-score__name{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.noche-score--p .noche-score__name{ color: var(--noche-vino); }
.noche-score--w .noche-score__name{ color: var(--noche-dorado-dim); }
.noche-score__val{ font-size: 0.86rem; font-weight: 600; }
.noche-score__val--stars{ font-weight: 400; }
.noche-score__val small{ font-weight: 400; opacity: 0.55; font-size: 0.78em; }
.noche-score--p .noche-score__val{ color: var(--noche-vino); }
.noche-score--w .noche-score__val{ color: var(--noche-dorado-dim); }
.noche-score__half{ opacity: 0.5; }

.noche-reviews{ display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.noche-review{ border-top: 1px solid var(--crema-dark); padding-top: 7px; }
.noche-review summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
}
.noche-review summary::-webkit-details-marker{ display: none; }
.noche-review summary::before{
  content: "+";
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--crema-dark);
  font-size: 0.74rem;
  line-height: 1;
}
.noche-review[open] summary::before{ content: "–"; }
.noche-review p{
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--cafe);
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 600px){
  .noche-cover{ padding: 32px 18px 26px; }
  .noche-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .noche-card__body{ padding: 10px 10px 12px; }
  .noche-card__title{ font-size: 0.92rem; }
  .noche-bar__count{ margin-left: 0; width: 100%; text-align: right; }
}
@media (max-width: 380px){
  .noche-grid{ grid-template-columns: 1fr; }
}
.noche-card__trailer {
  display: inline-block;
  width: fit-content;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--azul);
  color: var(--blanco);
  font-weight: 700;
  transition: background var(--trans), transform var(--trans);
}

.noche-card__trailer:hover {
  background: var(--azul-dark);
  transform: translateY(-2px);
}
.noche-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  
}
.noche-card__download {
  display: inline-block;
  width: fit-content;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--naranja);
  color: var(--blanco);
  font-weight: 700;
  transition: background var(--trans), transform var(--trans);
}
.noche-card__download:hover {
  background: var(--naranja-lt);
  transform: translateY(-2px);
}

.noche-card__country {
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noche-card__title {
  line-height: 1.2;
  min-height: 2.4em; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noche-card__director {
  line-height: 1.5;
  overflow: hidden;
  font-size: 0.85rem;  /* ← agrega esta línea */
}
.noche-card__actors {
  min-height: 4.5em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;  /* ← agrega esta línea */
}