:root{ --brand:#004D43; --fg:#0f172a; --muted:#475569; --bg:#0b0f14; --card:#0f172a; --ring: rgba(0,0,0,.35); --ok:#16a34a; --warn:#b91c1c; }
@media (prefers-color-scheme: light){ :root{ --fg:#0f172a; --muted:#475569; --bg:#f8fafc; --card:#ffffff; --ring: rgba(0,0,0,.08);} }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; background: radial-gradient(1400px 900px at 50% -10%, rgba(0,77,67,.18), transparent), var(--bg); color:var(--fg); display:grid; place-items:center; padding:24px; }
.container{ width:min(980px,100%); display:grid; gap:20px }
.card{ width:100%; background:var(--card); border-radius:28px; padding:28px; box-shadow:0 24px 70px var(--ring); border:1px solid rgba(255,255,255,.05)}
.header{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.logo{width:150px; filter: invert(1) brightness(1.2);} /* para logos negros en fondo oscuro */
.badge{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(0,0,0,.18); color:#e5e7eb; font-weight:700; font-size:14px}
.title{font-size:28px; line-height:1.2; margin:12px 0 6px; font-weight:800; letter-spacing:-.01em}
.muted{color:var(--muted); font-size:15px}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.btn{appearance:none; border:0; outline:0; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:700;}
.btn.primary{background:var(--brand); color:white}
.btn.secondary{background:transparent; color:var(--brand); border:1px solid var(--brand)}
.grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px}
@media(min-width:900px){ .grid{grid-template-columns: 360px 1fr;} }
.poster{ overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.12)); aspect-ratio: 4/3; display:grid; place-items:center }
.poster img{ width:100%; height:100%; object-fit:cover }
.kv{padding:14px 16px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); border:1px solid rgba(255,255,255,.06)}
.kv b{display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#9ca3af; margin-bottom:6px}
.kv span{font-size:16px; font-weight:600}
.divider{height:1px; background:rgba(255,255,255,.06); margin:18px 0}
.foot{display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap}
.hint{font-size:13px; color:#9ca3af}
.hide{display:none !important}