/* ui.css — sistema visual de Pelis Latam.
   Lo comparten index, listado y pelicula: si el diseño de una tarjeta cambia,
   cambia en las tres. Antes cada página traía su propio CSS inline y se iban
   despegando entre sí. */

:root{
  --portal:#ffb020; --portal-bright:#ffc855; --portal-glow:rgba(255,176,32,.42); --ink-on:#1a1000;
  --bg:#06080c; --bg-2:#0a0e15;
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09); --border-hi:rgba(255,176,32,.45);
  --text:#eef2f0; --muted:#8b9499; --muted-2:#5d666b;
  --font-body:'Poppins',system-ui,-apple-system,sans-serif;
  --font-display:'Oswald','Poppins',sans-serif;
  --radius:14px; --radius-lg:20px; --maxw:1280px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button,input{font-family:inherit;}
::selection{background:var(--portal);color:var(--ink-on);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;position:relative;z-index:2;}

/* ── Nav ─────────────────────────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:60;background:rgba(6,8,12,.82);
  backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--border);}
.nav-inner{display:flex;align-items:center;gap:18px;height:66px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;
  font-size:20px;text-transform:uppercase;letter-spacing:.5px;flex:none;}
.brand .dot{width:26px;height:26px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--portal),#ff6a3d);box-shadow:0 0 16px var(--portal-glow);}
.brand b{color:var(--portal);}
.nav-links{display:flex;gap:22px;margin-left:6px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .18s;}
.nav-links a:hover{color:var(--text);}
.nav-spacer{flex:1;}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);
  border-radius:11px;padding:8px 13px;min-width:190px;transition:border-color .18s;}
.search:focus-within{border-color:var(--border-hi);}
.search input{background:none;border:none;outline:none;color:var(--text);font-size:14px;width:100%;}
.search svg{flex:none;opacity:.55;}

/* ── Tarjeta de película ─────────────────────────────────────────────── */
.card{position:relative;border-radius:var(--radius);overflow:hidden;display:block;
  background:var(--panel);border:1px solid var(--border);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .25s;}
.card:hover{transform:translateY(-5px);border-color:var(--border-hi);
  box-shadow:0 16px 38px rgba(0,0,0,.55);}
.card .poster{position:relative;aspect-ratio:2/3;overflow:hidden;
  background:linear-gradient(160deg,#141a24,#0b0f16);display:flex;align-items:center;justify-content:center;}
.card .poster img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.card:hover .poster img{transform:scale(1.06);}
.card .ph{font-family:var(--font-display);font-size:38px;color:rgba(255,255,255,.13);}

/* capa oscura + play, aparece al pasar el mouse */
.card .hov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.72));
  opacity:0;transition:opacity .2s;}
.card:hover .hov{opacity:1;}
.card .hov .play{width:48px;height:48px;border-radius:50%;background:var(--portal);color:var(--ink-on);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.45);
  transform:translateY(6px);transition:transform .2s;}
.card:hover .hov .play{transform:translateY(0);}
.card .hov .play svg{width:22px;height:22px;margin-left:3px;}

.pill{position:absolute;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 8px;border-radius:7px;z-index:2;line-height:1;}
.pill.soon{top:8px;left:8px;background:rgba(10,14,21,.82);color:#cfd6da;border:1px solid var(--border);
  backdrop-filter:blur(4px);}
.pill.rating{top:8px;right:8px;background:rgba(10,14,21,.82);color:var(--portal);
  border:1px solid rgba(255,176,32,.3);backdrop-filter:blur(4px);display:flex;align-items:center;gap:3px;}
.pill.hd{bottom:8px;left:8px;background:rgba(10,14,21,.82);color:#cfd6da;border:1px solid var(--border);
  backdrop-filter:blur(4px);}

.card .meta{padding:11px 12px 13px;}
.card .t{font-weight:600;font-size:13.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* Alto fijo de 2 líneas: si no, el año y la duración quedan a distinta altura
     entre tarjetas vecinas según si el título ocupa una línea o dos. */
  min-height:2.6em;}
.card .y{color:var(--muted);font-size:12px;margin-top:4px;display:flex;gap:7px;align-items:center;}
.card .y i{width:3px;height:3px;border-radius:50%;background:var(--muted-2);display:inline-block;}

/* ── Grilla y filas ──────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:20px;padding-bottom:56px;}

.row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(172px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 14px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}
.row-scroll::-webkit-scrollbar{height:7px;}
.row-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px;}
.row-scroll > *{scroll-snap-align:start;}

/* Flechas de las filas: en PC arrastrar con la barra de abajo es incómodo.
   En touch no se muestran (el dedo ya alcanza). */
.row-wrap{position:relative;}
.row-nav{position:absolute;top:0;bottom:16px;width:56px;z-index:5;display:flex;align-items:center;
  justify-content:center;border:none;cursor:pointer;opacity:0;transition:opacity .18s;
  color:var(--text);}
.row-nav.prev{left:-6px;justify-content:flex-start;
  background:linear-gradient(90deg,var(--bg) 30%,rgba(6,8,12,0));}
.row-nav.next{right:-6px;justify-content:flex-end;
  background:linear-gradient(270deg,var(--bg) 30%,rgba(6,8,12,0));}
.row-wrap:hover .row-nav{opacity:1;}
.row-nav[disabled]{opacity:0 !important;pointer-events:none;}
.row-nav span{width:38px;height:38px;border-radius:50%;background:rgba(16,21,30,.92);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5);transition:background .16s,border-color .16s,transform .16s;}
.row-nav:hover span{background:var(--portal);border-color:var(--portal);color:var(--ink-on);transform:scale(1.08);}
.row-nav svg{width:19px;height:19px;}
@media(hover:none),(max-width:860px){.row-nav{display:none;}}

.section-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px;}
.section-head h2{font-family:var(--font-display);font-size:21px;margin:0;text-transform:uppercase;letter-spacing:.6px;}
.section-head h2 b{color:var(--portal);font-weight:700;}
.section-head .count{color:var(--muted);font-size:13px;}
.section-head .more{margin-left:auto;color:var(--portal);font-size:13px;font-weight:600;}

/* ── Chips (categorías / productoras) ────────────────────────────────── */
.chips{display:flex;gap:9px;flex-wrap:wrap;}
.chip{font-size:12.5px;padding:7px 13px;border-radius:9px;background:var(--panel);
  border:1px solid var(--border);color:var(--muted);transition:.16s;white-space:nowrap;}
.chip:hover{border-color:var(--border-hi);color:var(--text);background:var(--panel-2);}
.chip b{color:var(--muted-2);font-weight:500;}

.empty{color:var(--muted);padding:44px 0 80px;text-align:center;}

footer{border-top:1px solid var(--border);padding:26px 0 44px;color:var(--muted);font-size:13px;margin-top:20px;}
footer a{color:var(--portal);}
/* Pie con la familia de sitios: enlaces reales entre nuestros dominios. */
.familia{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--border);font-size:13px;}
.familia-lbl{color:var(--muted-2);text-transform:uppercase;font-size:11px;letter-spacing:1px;
  font-family:var(--font-display);margin-right:4px;}
.familia a{color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:5px 11px;transition:.16s;}
.familia a:hover{color:var(--text);border-color:var(--border-hi);}

@media(max-width:640px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:13px;}
  .row-scroll{grid-auto-columns:minmax(136px,1fr);gap:12px;}
  .nav-inner{height:58px;gap:10px;}
  .brand{font-size:17px;}
  /* En móvil el nav mostraba solo el buscador y no había forma de elegir año
     sin bajar hasta los filtros. Dejamos los enlaces, más compactos. */
  .nav-links{display:flex;gap:13px;margin-left:0;}
  .nav-links a{font-size:13px;}
  .nav-links a:nth-child(n+3){display:none;}
  .search{min-width:0;}
  .section-head{margin:26px 0 12px;}
  .section-head h2{font-size:18px;}
}