/* Inter 4.1 — SIL Open Font License 1.1, autoalojada en static/fuentes/
   (licencia completa en static/fuentes/OFL.txt). Nada de CDN externo:
   así no se filtra la IP de quien visita ni depende de un tercero. */
@font-face{
  font-family:"Inter var";
  src:url("static/fuentes/InterVariable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter Display";
  src:url("static/fuentes/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter Display";
  src:url("static/fuentes/InterDisplay-Bold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}

/* Neumorfismo oscuro + paleta naranja tipo Crunchyroll.
   El truco del relieve: dos sombras opuestas del MISMO color base,
   una más oscura abajo-derecha y una más clara arriba-izquierda. */
:root{
  --bg:#16171c; --sup:#1a1c22; --sup2:#1e2028;
  --som:#0e0f13; --luz:#22242d;                 /* las dos sombras del relieve */
  --fg:#f4f4f6; --sub:#a6a8b2; --tenue:#8b8e99;
  --ac:#f47521; --ac2:#ff8f3d; --ac-som:#c25a12;
  --ok:#3ddc84;
  --r:18px; --r2:26px; --nav:66px;
  --texto:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --titulo:"Inter Display","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --rel:6px 6px 14px var(--som), -6px -6px 14px var(--luz);
  --rel-s:4px 4px 9px var(--som), -4px -4px 9px var(--luz);
  --hun:inset 4px 4px 9px var(--som), inset -4px -4px 9px var(--luz);
  --hun-s:inset 3px 3px 6px var(--som), inset -3px -3px 6px var(--luz);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);
  font:15px/1.55 var(--texto);
  /* cv05 = la «l» con rabito: deja de confundirse con I y con 1 */
  font-feature-settings:"cv05" 1,"calt" 1;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit;border:0;background:0;outline:0}
::selection{background:var(--ac);color:#fff}
.sp{flex:1}
.oculto{display:none!important}

/* ---------------- barra ---------------- */
header{position:sticky;top:0;z-index:60;height:var(--nav);display:flex;align-items:center;
  gap:16px;padding:0 clamp(14px,3.5vw,40px);background:#16171cf2;
  backdrop-filter:saturate(180%) blur(18px);box-shadow:0 8px 22px -14px var(--som)}
.wm{font-family:var(--titulo);font-weight:800;font-size:20px;letter-spacing:-.035em;white-space:nowrap}
.wm span{color:var(--ac)}
.wm i{font-style:normal;font-weight:400;font-size:12px;color:var(--sub);margin-left:6px;letter-spacing:.02em}
nav{display:flex;gap:6px;margin-left:8px}
nav a{font-size:14px;color:var(--sub);padding:8px 15px;border-radius:999px;transition:.18s}
nav a:hover{color:var(--fg)}
nav a.on{color:var(--fg);box-shadow:var(--hun-s)}
.busc{display:flex;align-items:center;gap:9px;background:var(--bg);border-radius:999px;
  padding:10px 17px;min-width:min(300px,40vw);box-shadow:var(--hun-s);transition:box-shadow .2s}
.busc:focus-within{box-shadow:var(--hun-s),0 0 0 1.5px var(--ac)}
.busc input{width:100%;font-size:14px}
.busc input::placeholder{color:var(--tenue)}
.busc svg{flex:none;color:var(--tenue)}
.yo{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;
  box-shadow:var(--rel-s);cursor:pointer;transition:.18s;white-space:nowrap}
.yo:hover{box-shadow:var(--hun-s)}
.yo b{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:15px;overflow:hidden}
.yo b img{width:100%;height:100%;display:block}
.yo span{font-size:13px;color:var(--sub)}
@media(max-width:900px){nav,.yo span{display:none}}
@media(max-width:560px){.busc{min-width:0;padding:10px 13px}}

/* ---------------- botones ---------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;
  font-size:14px;font-weight:600;cursor:pointer;transition:.16s;box-shadow:var(--rel-s);background:var(--bg)}
.btn:hover{box-shadow:var(--rel)}
.btn:active{box-shadow:var(--hun-s);transform:translateY(1px)}
.btn.pri{background:linear-gradient(145deg,var(--ac2),var(--ac));color:#fff;
  box-shadow:5px 5px 12px var(--som),-4px -4px 12px var(--luz)}
.btn.pri:hover{background:linear-gradient(145deg,#ffa15a,var(--ac2))}
.btn.pri:active{box-shadow:inset 3px 3px 7px var(--ac-som),inset -3px -3px 7px #ff9c50}
.btn.min{padding:9px 17px;font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:999px;
  font-size:12.5px;color:var(--sub);box-shadow:var(--rel-s);cursor:pointer;transition:.16s;white-space:nowrap}
.chip:hover{color:var(--fg)}
.chip.on{color:var(--ac);box-shadow:var(--hun-s);font-weight:600}

/* ---------------- destacado ---------------- */
.hero{position:relative;min-height:min(64vh,470px);display:flex;align-items:flex-end;
  padding:clamp(22px,5vw,58px);overflow:hidden;margin:clamp(14px,2.5vw,26px);
  border-radius:var(--r2);box-shadow:var(--rel)}
.hero .fondo{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05)}
.hero .vel{position:absolute;inset:0;background:
  linear-gradient(90deg,#16171cf5 0,#16171cd6 42%,#16171c33 100%),
  linear-gradient(0deg,#16171c 0,#16171c00 62%)}
.hero .txt{position:relative;max-width:640px}
.et{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 15px;border-radius:999px;
  background:linear-gradient(145deg,var(--ac2),var(--ac));color:#fff;box-shadow:var(--rel-s)}
.hero h1{font-family:var(--titulo);font-size:clamp(25px,4.6vw,45px);line-height:1.06;
  letter-spacing:-.04em;margin:16px 0 11px;font-weight:800}
.hero p{color:#cfd0d8;margin-bottom:22px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acc{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------- filas ---------------- */
main{padding-bottom:70px;min-height:70vh}
section{margin-top:clamp(28px,4vw,42px)}
.cab{display:flex;align-items:center;gap:12px;padding:0 clamp(14px,3.5vw,40px);margin-bottom:16px}
.cab h2{font-family:var(--titulo);font-size:19px;font-weight:700;letter-spacing:-.025em}
.cab small{color:var(--tenue);font-size:12.5px}
.cab a{font-size:13px;color:var(--ac);margin-left:auto}
.fila{display:grid;grid-auto-flow:column;grid-auto-columns:215px;gap:18px;
  overflow-x:auto;scroll-snap-type:x proximity;padding:6px clamp(14px,3.5vw,40px) 14px;
  scrollbar-width:none}
.fila::-webkit-scrollbar{display:none}
.fila>*{scroll-snap-align:start}
@media(min-width:1000px){.fila{grid-auto-columns:248px}}


.rejilla{display:grid;gap:20px;padding:6px clamp(14px,3.5vw,40px) 14px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

/* ---------------- tarjeta ---------------- */
.c{background:var(--sup);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--rel-s);cursor:pointer;transition:transform .2s,box-shadow .2s}
.c:hover{transform:translateY(-5px);box-shadow:var(--rel)}
.c:active{transform:translateY(0)}
.th{position:relative;aspect-ratio:16/9;background:var(--sup2)}
.th img{width:100%;height:100%;object-fit:cover}
.c:hover .play{opacity:1}
.play{position:absolute;inset:0;display:grid;place-items:center;background:#0b0c1066;opacity:0;transition:.2s}
.play b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ac2),var(--ac));
  box-shadow:4px 4px 10px #0b0c10cc,-3px -3px 10px #ffffff1f}
.tag{position:absolute;left:9px;bottom:9px;background:#0b0c10d1;backdrop-filter:blur(7px);
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px}
.n{position:absolute;left:9px;top:9px;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  padding:5px 9px;border-radius:8px;background:linear-gradient(145deg,var(--ac2),var(--ac));color:#fff}
.visto{position:absolute;right:9px;top:9px;width:24px;height:24px;border-radius:50%;
  background:var(--ok);display:grid;place-items:center;color:#0b0c10}
.barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:#0b0c1099}
.barra i{display:block;height:100%;background:var(--ac)}
.m{padding:13px 15px 15px}
.m b{display:block;font-size:14.5px;font-weight:600;line-height:1.38;letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m span{display:block;color:var(--tenue);font-size:12.5px;margin-top:6px;letter-spacing:-.005em}
.m .g{color:var(--ac);font-size:11px;margin-top:5px;font-weight:500}

/* ---------------- páginas ---------------- */
.enc{padding:clamp(22px,4vw,40px) clamp(14px,3.5vw,40px) 0}
.enc h1{font-family:var(--titulo);font-size:clamp(22px,3.6vw,34px);font-weight:800;letter-spacing:-.035em}
.enc p{color:var(--sub);margin-top:9px;font-size:14px}
.volver{display:inline-flex;align-items:center;gap:7px;color:var(--sub);font-size:13px;
  margin-bottom:16px;padding:8px 16px;border-radius:999px;box-shadow:var(--rel-s);transition:.16s}
.volver:hover{color:var(--fg);box-shadow:var(--hun-s)}
.filtros{display:flex;gap:9px;flex-wrap:wrap;padding:20px clamp(14px,3.5vw,40px) 0}
.ficha{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;
  padding:24px;margin:0 clamp(14px,3.5vw,40px);border-radius:var(--r2);box-shadow:var(--rel)}
.ficha .cartel{width:170px;border-radius:var(--r);box-shadow:var(--rel-s);flex:none}
.ficha .d{flex:1;min-width:260px}
.ficha h1{font-family:var(--titulo);font-size:clamp(21px,3vw,31px);font-weight:800;
  letter-spacing:-.035em;margin-bottom:10px}
.ficha .meta{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.ficha .sin{color:var(--sub);font-size:14px;margin-top:12px;max-width:65ch}
.nota{color:var(--ok);font-weight:700}
.vacio{padding:80px 24px;text-align:center;color:var(--sub)}
.vacio b{display:block;font-size:17px;color:var(--fg);margin-bottom:8px}
.esq{border-radius:var(--r);aspect-ratio:16/9;box-shadow:var(--hun-s);
  background:linear-gradient(100deg,#ffffff03,#ffffff0d,#ffffff03);
  background-size:200% 100%;animation:sh 1.4s linear infinite}
@keyframes sh{to{background-position:-200% 0}}

/* ---------------- perfiles ---------------- */
.puerta{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;padding:24px}
.puerta .caja{text-align:center;max-width:760px;width:100%}
.puerta h1{font-family:var(--titulo);font-size:clamp(23px,3.6vw,32px);font-weight:800;
  letter-spacing:-.035em;margin-bottom:10px}
.puerta p{color:var(--sub);margin-bottom:38px}
.perfs{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.perf{width:118px;cursor:pointer;transition:transform .18s}
.perf:hover{transform:translateY(-5px)}
.perf .av{width:100px;height:100px;border-radius:50%;margin:0 auto 13px;display:grid;
  place-items:center;font-size:41px;box-shadow:var(--rel);transition:box-shadow .2s;overflow:hidden}
.perf .av img{width:100%;height:100%;display:block}
.perf:hover .av{box-shadow:var(--rel),0 0 0 2.5px var(--ac)}
.perf b{display:block;font-size:14px;font-weight:600}
.perf span{display:block;color:var(--tenue);font-size:11.5px;margin-top:3px}
.perf.add .av{color:var(--tenue);font-size:38px;box-shadow:var(--hun)}
.emojis{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin:20px 0}
.emojis button{width:64px;height:64px;border-radius:50%;cursor:pointer;padding:0;overflow:hidden;
  box-shadow:var(--rel-s);transition:.16s}
.emojis button img{width:100%;height:100%;display:block}
.emojis button:hover{transform:translateY(-3px)}
.emojis button.on{box-shadow:var(--hun-s),0 0 0 2px var(--ac)}
.campo{background:var(--bg);border-radius:999px;padding:14px 24px;box-shadow:var(--hun-s);
  font-size:15px;text-align:center;width:min(300px,80vw)}
footer{padding:36px clamp(14px,3.5vw,40px);color:var(--tenue);font-size:12.5px;
  margin-top:56px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  box-shadow:0 -8px 22px -18px var(--som)}
footer a{color:var(--ac)}
.aviso{padding:9px 16px;border-radius:999px;box-shadow:var(--hun-s);font-size:12px;color:var(--sub)}