/* ============ VARIABLES ============ */
:root {
    --bg: #0e0e10;
    --bg-soft: #151518;
    --bg-card: #1a1a1f;
    --bg-hover: #232329;
    --border: #2a2a31;
    --gold: #f9bc14;
    --gold-dark: #d9a30f;
    --text: #ffffff;
    --text-muted: #9a9aa3;
    --text-dim: #6c6c76;
    --header-h: 64px;
    --radius: 10px;
}

/* -webkit-tap-highlight-color quita el resaltado gris/azul que Android/Chrome dibuja sobre todo
   el bloque tocable al tocarlo en móvil (bloques de la ficha, tarjetas, tags, etc.). Es solo el
   "flash" nativo del navegador al tocar — no afecta :hover, :focus ni clases de estado como
   .active/.tag.active. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Iconos SVG en línea que reemplazan a los emojis (ver MC.icon en js/core.js) — heredan tamaño
   ("1em") y color (currentColor) del texto que los rodea, igual que un emoji. */
.mc-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mc-icon--fill { fill: currentColor; stroke: none; }

html { scroll-behavior: smooth; }

body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* "Footer pegado abajo": en páginas con poco contenido (ej. enlaces.html con pocos servidores)
       el footer quedaba pegado justo debajo del bloque de contenido, en vez de al fondo de la
       ventana — con min-height:100vh + flex, "main" (flex:1 más abajo) se estira para llenar el
       espacio sobrante y empuja el footer hasta abajo; si el contenido es más alto que la pantalla,
       esto no cambia nada (el body simplemente crece y se scrollea como siempre). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1 0 auto; }

/* ============ FONDO CONFIGURABLE (ver js/background.js) ============
   Puramente decorativo: fixed + z-index negativo, así queda detrás de absolutamente todo el
   contenido de la página (que usa z-index normal/auto) sin desplazar ni tapar nada. */
.mc-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.mc-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.mc-bg-mosaic {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mc-bg-row {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    width: max-content;
    opacity: 0.8;
    animation-name: mc-bg-scroll-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.mc-bg-row--rev { animation-name: mc-bg-scroll-right; }
.mc-bg-row img {
    width: 260px;
    height: 146px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
@keyframes mc-bg-scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes mc-bg-scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
.mc-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 16, 0.78);
}
@media (max-width: 768px) {
    /* en pantallas chicas se muestra igual, pero con imágenes más chicas (menos datos/CPU) */
    .mc-bg-row img { width: 160px; height: 90px; }
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ============ PRELOADER ============ */
.se-pre-con {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.se-pre-con.hidden { display: none; }
.hidden { display: none !important; }
.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ HEADER ============ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(14, 14, 16, 0.96);
    /* Sin backdrop-filter: el header es "sticky" (recalcula en cada frame de scroll), y con el
       fondo animado de mosaico (varias docenas de imágenes moviéndose) detrás, difuminarlo en
       cada frame es caro y causa el freeze al hacer scroll — a 0.96 de opacidad casi no se ve
       nada detrás de todos modos, así que quitar el blur no cambia mucho el look. */
    border-bottom: 1px solid var(--border);
}
.header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--header-h);
}
.header__right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.header__nav .primary-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header__nav .primary-menu li { position: relative; }
.header__nav .primary-menu a {
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.header__nav .primary-menu a:hover { color: var(--gold); }
.logo {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.logo img {
    height: 45px;
    width: auto;
}
.footer__logo img {
    height: 50px;
    width: auto;
}
.logo span, .footer__logo span { color: var(--gold); }

.nav { flex: 1; }
.primary-menu { display: flex; align-items: center; gap: 4px; }
.primary-menu > li > a {
    display: block;
    padding: 10px 14px;
    font-size: 14.5px;
    color: var(--text-muted);
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.primary-menu > li > a:hover { color: var(--text); background: var(--bg-hover); }
.primary-menu > li > a.active { color: var(--gold); }

.dropdown { position: relative; z-index: 110; }
.dropdown__toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dropdown__toggle svg { transition: transform 0.2s; }
.dropdown:hover .dropdown__toggle svg,
.dropdown.open .dropdown__toggle svg { transform: rotate(180deg); }
.dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    max-height: 320px;
    overflow-y: auto;
}
.dropdown:hover .dropdown__menu,
.dropdown.open .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__menu a {
    display: block;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--text-muted);
    border-radius: 5px;
    transition: color 0.15s, background 0.15s;
}
.dropdown__menu a:hover { color: var(--gold); background: var(--bg-hover); }
.dropdown__menu a.active { color: var(--gold); background: var(--bg-hover); font-weight: 600; }

/* Search */
.searchbox {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.searchbox:focus-within { border-color: var(--gold); }
.searchbox__input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    padding: 9px 4px 9px 14px;
    width: 190px;
    font-size: 14px;
}
.searchbox__input::placeholder { color: var(--text-dim); }
.searchbox__btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 9px 12px;
    display: flex;
    transition: color 0.2s;
}
.searchbox__btn:hover { color: var(--gold); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 8px;
}
.hamburger .bar {
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: 0.25s;
}
.hamburger.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .bar:nth-child(2) { opacity: 0; }
.hamburger.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO / CARRUSEL ============ */
.hero {
    padding: 30px 0 20px;
    background: radial-gradient(1200px 400px at 50% -10%, rgba(249, 188, 20, 0.08), transparent 60%);
}
.hero__title {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 22px;
}
.hero__title a { color: var(--text); }
.hero__title a:hover { color: var(--gold); }
.gold-underline { border-bottom: 3px solid var(--gold); padding-bottom: 2px; }

.carousel-wrap {
    position: relative;
    /* Las tarjetas se insertan vía JS (nunca están en el HTML estático) recién cuando responde
       /api/data — por eso la animación de entrada se agrega en el mismo momento en que se crean,
       en vez de correr desde el primer pintado de la página (que las agarraría vacías). */
}
/* 4 animaciones de entrada a elegir desde el panel (Carrusel de novedades > Animación de
   entrada): "bloque" mueve todo el carrusel junto (.carousel-wrap--enter-*, una sola vez); "en
   cascada" anima cada tarjeta por separado con un pequeño retraso entre una y la siguiente
   (.carousel__item--enter-*, puesto por JS vía "animation-delay" — ver STAGGER_MS en
   buildEstrenos). js/app.js agrega las clases según lo elegido, nunca combinadas. */
@keyframes carousel-enter-vertical {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.carousel-wrap--enter-vertical { animation: carousel-enter-vertical 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.carousel__item--enter-vertical { animation: carousel-enter-vertical 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes carousel-enter-horizontal-block {
    /* 200px ≈ el ancho de una tarjeta, para que el bloque arranque fuera del área visible (a la
       derecha) y entre deslizándose, en vez de solo desplazarse unos pixeles. */
    from { opacity: 0; transform: translateX(200px); }
    to { opacity: 1; transform: translateX(0); }
}
.carousel-wrap--enter-horizontal { animation: carousel-enter-horizontal-block 1.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes carousel-enter-horizontal-item {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}
.carousel__item--enter-horizontal { animation: carousel-enter-horizontal-item 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Zoom (en cascada): cada tarjeta aparece agrandándose desde un poco más chica, en vez de
   deslizarse — más "pop" que las de arriba. Solo existe en cascada (una tarjeta agrandándose de
   golpe sola tiene sentido; todo el bloque agrandándose junto se ve raro). */
@keyframes carousel-enter-zoom {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: scale(1); }
}
.carousel__item--enter-zoom { animation: carousel-enter-zoom 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Desvanecido (en cascada): solo opacidad, sin ningún movimiento — la opción más sutil para quien
   prefiera algo discreto en vez de que las tarjetas se desplacen o agranden. */
@keyframes carousel-enter-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.carousel__item--enter-fade { animation: carousel-enter-fade 0.5s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .carousel-wrap--enter-vertical, .carousel-wrap--enter-horizontal,
    .carousel__item--enter-vertical, .carousel__item--enter-horizontal,
    .carousel__item--enter-zoom, .carousel__item--enter-fade { animation: none; }
}
.carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--bg-card);
}
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 6px; }
.carousel::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 6px; }

/* La estructura interna (póster, badges, overlay, título) es la misma que ".card" — ver
   MC.cardInnerHTML — así que su estilo ya viene de las reglas .card__* de más abajo. Aquí solo
   queda lo específico del layout de carrusel (ancho, scroll-snap). */
.carousel__item {
    flex: 0 0 13.5%;
    scroll-snap-align: start;
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    z-index: 5;
    width: 38px;
    height: 54px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text);
    font-size: 18px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.carousel__arrow:hover { background: var(--gold); color: #111; }
.carousel__arrow--prev { left: -14px; }
.carousel__arrow--next { right: -14px; }

/* ============ MAIN GRID ============ */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    padding-top: 10px;
    padding-bottom: 50px;
    align-items: start;
}

.section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 18px;
    padding-bottom: 10px;
    position: relative;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
}

/* ============ TYPE FILTERS ============ */
.type-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.type-filter {
    padding: 8px 18px;
    border: 1px solid #334155;
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.type-filter:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.type-filter.active {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}

/* ============ CARDS ============ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px 14px;
}
.card { cursor: pointer; }
/* ".card" también se usa como panel del admin (ver más abajo: padding, fondo, border-radius,
   overflow:hidden) — estas reglas, más específicas, anulan ese estilo para las tarjetas del
   catálogo (grilla y carrusel), que no deben tener ese padding/fondo propio. */
.cards-grid .card,
.carousel__item.card {
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
}
.card__poster {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    aspect-ratio: 2 / 3;
    transition: transform 0.25s;
}
.card:hover .card__poster { transform: translateY(-5px); }
.card__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.card:hover .card__poster img { transform: scale(1.05); }

/* Póster placeholder (cuando no hay imagen) */
.card__ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(150deg, #232329, #101014 60%, #232329);
    position: relative;
}
.card__ph::before {
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='2.18' ry='2.18'/%3E%3Cline x1='7' y1='2' x2='7' y2='22'/%3E%3Cline x1='17' y1='2' x2='17' y2='22'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='2' y1='7' x2='7' y2='7'/%3E%3Cline x1='2' y1='17' x2='7' y2='17'/%3E%3Cline x1='17' y1='17' x2='22' y2='17'/%3E%3Cline x1='17' y1='7' x2='22' y2='7'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='2.18' ry='2.18'/%3E%3Cline x1='7' y1='2' x2='7' y2='22'/%3E%3Cline x1='17' y1='2' x2='17' y2='22'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cline x1='2' y1='7' x2='7' y2='7'/%3E%3Cline x1='2' y1='17' x2='7' y2='17'/%3E%3Cline x1='17' y1='17' x2='22' y2='17'/%3E%3Cline x1='17' y1='7' x2='22' y2='7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    z-index: 2;
}
.card__type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--gold);
    color: #111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 5px;
    text-transform: uppercase;
    z-index: 2;
}
.card__platform {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    z-index: 2;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
}
.card:hover .card__platform,
.carousel__item:hover .card__platform {
    opacity: 0;
}
.card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 55%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.25s;
}
.card:hover .card__overlay { opacity: 1; }
.card__rating { color: var(--gold); font-weight: 700; font-size: 13px; }
.card__quality { color: var(--text); font-size: 11px; background: rgba(0,0,0,0.6); padding: 2px 7px; border-radius: 5px; }

.card__title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.card:hover .card__title { color: var(--gold); }

/* ============ BOTONES ============ */
.btn-load {
    display: block;
    margin: 26px auto 0;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    padding: 11px 34px;
    border-radius: 999px;
    transition: 0.2s;
}
.btn-load:hover { border-color: var(--gold); color: var(--gold); }
.btn-load.hidden { display: none; }

.no-results { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 15px; }

/* ============ PAGINACIÓN DEL CATÁLOGO ============ */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 26px 0 0; }
.pagination:empty { margin: 0; }
.page-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    min-width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    box-sizing: border-box;
    transition: 0.2s;
}
.page-btn:hover:not(.active) { border-color: var(--text-muted); color: var(--text); }
/* página actual: sin cuadro (borde transparente), en dorado */
.page-btn.active {
    color: var(--gold);
    border-color: transparent;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

.btn-reset {
    width: 100%;
    margin-top: 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    transition: 0.2s;
}
.btn-reset:hover { border-color: var(--gold); color: var(--gold); }

/* ============ SIDEBAR ============ */
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }

.widget {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
/* Widgets del sidebar (Tipo, Género, Año, Resolución, Calidad, Códec) y el banner VIP: fondo
   totalmente transparente para que el fondo animado del sitio se vea detrás, igual que en la ficha. */
.sidebar .widget {
    background: transparent;
    border-color: var(--gold);
}
.widget__title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.widget__banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(120deg, #2a2310, #1a1a1f);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 14px;
    transition: transform 0.2s;
}
.sidebar .widget__banner {
    background: transparent;
}
/* Borde de color principal de los bloques con fondo transparente: activable/desactivable desde
   el panel (Fondo del sitio → Borde de los bloques). Por defecto está activado; js/background.js
   agrega esta clase al <body> cuando el admin lo desactiva. No cambia tamaño/estructura porque
   box-sizing:border-box ya reserva el espacio del borde. */
body.mc-no-block-border .sidebar .widget,
body.mc-no-block-border .sidebar .widget__banner {
    border-color: transparent;
}
.widget__banner:hover { transform: translateY(-3px); }
.widget__banner-icon {
    font-size: 30px;
    background: var(--gold);
    color: #111;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.widget__banner strong { display: block; font-size: 14.5px; color: var(--text); }
.widget__banner small { color: var(--text-muted); font-size: 12px; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tags--cols2 .tag { width: calc(50% - 4px); }
.tags--cols4 .tag { width: calc(25% - 6px); }
.tag {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    transition: 0.15s;
}
.tag:hover { border-color: var(--gold); color: var(--gold); }
.tag.active { background: var(--gold); border-color: var(--gold); color: #111; font-weight: 700; }

.select {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    outline: none;
}
.select:focus { border-color: var(--gold); }

/* ============ FOOTER ============ */
.footer {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    padding: 24px 0;
}
/* Grid de 3 columnas (no flex+space-between) para que el texto de copyright quede realmente
   centrado respecto a TODO el ancho del footer — con space-between, al ser el logo y el botón de
   anchos muy distintos, el texto de en medio no caía en el centro real, sino desplazado hacia un
   lado; en un contenedor angosto casi no se notaba, pero en pantallas grandes (contenedor más
   ancho) se veía claramente descentrado. */
.footer__content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.footer__logo { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; justify-self: start; }
.footer__copy { color: var(--text-dim); font-size: 12.5px; text-align: center; justify-self: center; }
.footer__back {
    justify-self: end;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--gold);
    font-size: 16px;
    transition: 0.2s;
}
.footer__back:hover { background: var(--gold); color: #111; }

/* ============ MODAL ============ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
}
.modal__body {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    transform: translateY(20px);
    transition: transform 0.25s;
}
.modal.open .modal__body { transform: translateY(0); }
.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 15px;
    transition: 0.2s;
}
.modal__close:hover { background: var(--gold); color: #111; }

.detail { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.detail__poster img { width: 100%; border-radius: var(--radius); aspect-ratio: 2/3; object-fit: cover; }
.detail__ph {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-align: center;
    padding: 16px;
    background: linear-gradient(150deg, #232329, #101014 60%, #232329);
}
.detail__title { font-size: 22px; font-weight: 800; margin-bottom: 12px; line-height: 1.3; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.meta-badge {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
}
.meta-badge.meta--gold { color: var(--gold); border-color: var(--gold); }
.detail__genres { margin-bottom: 14px; }
.detail__genres span { color: var(--text-dim); font-size: 13px; }
.detail__genres a { color: var(--gold); }
.detail__desc { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
.detail__subtitle {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.links { display: flex; flex-direction: column; gap: 8px; }
.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    transition: 0.15s;
}
.link-row:hover { border-color: var(--gold); }
.link-row__label { font-size: 13.5px; color: var(--text); }
.link-row__size { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.link-row__go { color: var(--gold); font-size: 15px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
    .carousel__item { flex-basis: 16%; }
}

@media (max-width: 992px) {
    .searchbox__input { width: 140px; }
    .main-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    .widget { flex: 1 1 220px; }
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
    .carousel__item { flex-basis: 21%; }
}

@media (max-width: 768px) {
    .hamburger { display: flex; margin-left: auto; }
    .header__inner { flex-wrap: wrap; height: auto; padding: 8px 0; row-gap: 6px; }
    .logo { margin-right: auto; }
    .account-widget { margin-left: 0; order: 4; }
    .hamburger { margin-left: 8px; order: 5; }
    .account-btn { width: 36px; height: 36px; }
    .searchbox { order: 6; width: 100%; margin-top: 2px; }
    .searchbox__input { width: 100%; }

    .header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 220px;
        min-height: 100vh;
        height: 100%;
        background: #0f172a;
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 0.3s;
        padding: 70px 20px 30px;
        z-index: 999;
        box-shadow: 0 0 40px rgba(0,0,0,0.6);
        overflow-y: auto;
    }
    .header__nav.open { display: block; transform: translateX(0); }
    .primary-menu { display: flex; flex-direction: column; gap: 2px; }
    .primary-menu > li > a { padding: 14px 12px; font-size: 15px; display: block; border-radius: 6px; text-align: center; }
    .primary-menu > li > a:hover { background: rgba(255,255,255,0.05); }
    .dropdown__menu { position: static; opacity: 0; visibility: hidden; max-height: 0; border: none; padding-left: 8px; overflow: hidden; transition: max-height 0.3s, opacity 0.2s; }
    .dropdown.open > .dropdown__menu { opacity: 1; visibility: visible; max-height: 500px; }
    .dropdown__menu a { padding: 12px 12px; font-size: 14px; }

    .carousel__item { flex-basis: 28%; }
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
    .carousel__arrow--prev { left: 0; }
    .carousel__arrow--next { right: 0; }
    .detail { grid-template-columns: 1fr; }
    .detail__poster { max-width: 200px; }
    .modal__body { padding: 18px; }
    .hero__title { font-size: 20px; }

    /* Menú del panel de administración (Ver sitio / Panel / Usuarios / Aportes): en el sitio
       público ".primary-menu" pasa a ser un panel lateral vertical (reglas de arriba), pero el
       panel de admin no tiene ese menú deslizable — solo afecta a ".admin-nav" para que quede en
       una sola fila horizontal debajo del logo, en vez de apilado verticalmente. */
    .admin-nav { flex: 1 1 100%; }
    .admin-nav .primary-menu { flex-direction: row; flex-wrap: nowrap; width: 100%; gap: 2px; }
    .admin-nav .primary-menu > li { flex: 1 1 0; min-width: 0; }
    .admin-nav .primary-menu > li > a {
        padding: 8px 2px;
        font-size: 11.5px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Menú simple (Inicio / Iniciar sesión) de recuperar/nueva contraseña, planes y pago: mismo
       problema que el del panel de admin — sin esto queda encimado junto al logo en vez de en su
       propia fila debajo. Se excluye ".admin-nav" (que ya tiene su propio ajuste arriba). */
    .nav:not(.admin-nav) {
        flex: 1 1 100%;
    }
    .nav:not(.admin-nav) .primary-menu {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .carousel__item { flex-basis: 44%; }
    .footer__content { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .hero__title { font-size: 18px; }
    .card__title { font-size: 12px; }
    .section-title { font-size: 19px; }
    .tag { padding: 8px 12px; font-size: 12.5px; }
    .btn { padding: 10px 14px; font-size: 13px; }
    .plan-card { padding: 18px; }
    .plans__title { font-size: 23px; }
    .checkout__card { padding: 18px; }
}

/* ============ FICHA / PÁGINA DE DETALLE ============ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 18px 0 6px;
    font-size: 13px;
    color: var(--text-dim);
}
.breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb__sep { color: var(--text-dim); }
.breadcrumb__current { color: var(--text); }

#titsingle { margin: 8px 0 14px; }
.titulo {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 12px;
    display: inline-block;
}

.post {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 20px;
}
.post > div { margin-bottom: 18px; }
.post > div:last-child { margin-bottom: 0; }

.detail__ph {
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-align: center;
    padding: 16px;
    background: linear-gradient(150deg, #232329, #101014 60%, #232329);
}
.post img { max-width: 100%; border-radius: 8px; }

.sinopsis5 {
    font-size: 15px;
    color: var(--text-muted);
    background: var(--bg-card);
    border-left: 3px solid var(--gold);
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
}

.detalles5, .descarga6 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
}
.post_content_line { color: var(--text-muted); }
.post_content_line b { color: var(--text); font-weight: 600; }
.capturas5 { display: flex; flex-wrap: wrap; gap: 10px; }
.capturas5 img { width: calc(33.333% - 7px); border-radius: 8px; }

.trailer5 { text-align: center; }
.trailer__iframe { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 10px; border: none; }

.server-icon { width: 16px; height: 16px; vertical-align: middle; border-radius: 2px; }

.link5btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 8px;
}
.link5free, .link5vip {
    flex: 1;
    min-width: 180px;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 13px 18px;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.2s;
    border: 1.5px solid transparent;
}
.link5free {
    color: #20b8f8;
    border-color: #20b8f8;
    background: rgba(32, 184, 248, 0.08);
}
.link5free:hover { background: #20b8f8; color: #111; }
.link5vip {
    color: #cba901;
    border-color: #cba901;
    background: rgba(203, 169, 1, 0.08);
}
.link5vip:hover { background: #cba901; color: #111; }

.descarga6 .link-row { margin-top: 10px; }

.final5 {
    font-size: 13.5px;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--gold);
    border-radius: 8px;
    padding: 14px;
}
.final5 .link5vip { display: inline-block; min-width: 0; margin-top: 8px; padding: 8px 20px; font-size: 13px; }

.generos { margin-bottom: 24px; }
.etiquetas_label { color: var(--text-dim); font-size: 13px; font-weight: 700; }
.generos a {
    display: inline-block;
    color: var(--gold);
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    margin: 3px 4px 3px 0;
    border-radius: 999px;
    transition: 0.15s;
}
.generos a:hover { border-color: var(--gold); background: var(--gold); color: #111; }

@media (max-width: 768px) {
    .capturas5 img { width: calc(50% - 5px); }
    .titulo { font-size: 19px; }
    .detail__ph { width: 180px; }
}

/* ============ PÁGINA DE ENLACES (estilo paste) ============ */
.paste { max-width: 860px; padding-top: 6px; }
.paste__card {
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 40px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    /* min-height (no height fija) a propósito: una altura fija real recortaría el contenido de
       los aportes con muchos servidores/enlaces. Con este mínimo, el borde ya no se estira desde
       "vacío" en los casos normales (1-3 servidores) — solo crece si de verdad hace falta más
       espacio, en vez de siempre partir chico y saltar al tamaño real. */
    min-height: 420px;
}
body.mc-no-block-border .paste__card {
    border-color: transparent;
}
.paste__title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: left;
}
.paste__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.paste__tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 18px;
    list-style: none;
    padding: 0;
}
.paste__tabs li button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: 0.2s;
}
.paste__tabs li.active button { color: var(--gold); border-bottom-color: var(--gold); }
.paste__tabs li button:hover { color: var(--text); }

.paste__group { margin-bottom: 22px; }
.paste__group-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.paste__group-title .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ec8e00;
    flex-shrink: 0;
    display: inline-block;
}
.paste__servers { display: flex; flex-direction: column; gap: 6px; padding-left: 15px; }
.paste__server {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}
.paste__server .server-icon { width: 16px; height: 16px; }
.paste__server a { color: #4aa3c4; text-decoration: none; border-bottom: 1px dotted #4aa3c4; }
.paste__server a:hover { color: var(--gold); border-color: var(--gold); }
.paste__note { color: var(--text-dim); font-size: 12.5px; }
.paste__ep-label {
    font-weight: 700; color: var(--gold); font-size: 13px;
    white-space: nowrap; min-width: 80px;
}
.paste__server-badge {
    background: rgba(74, 163, 196, 0.15); color: #4aa3c4;
    font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.paste__shorten-badge {
    background: rgba(249, 188, 20, 0.15); color: var(--gold);
    font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600;
    white-space: nowrap;
}
.paste__links { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.paste__link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.paste__link-row a { color: #4aa3c4; text-decoration: none; word-break: break-all; }
.paste__link-row a:hover { color: var(--gold); }
.paste__link-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.paste__link-row--original a { color: var(--text-dim); font-size: 12px; }
}

.paste__pass {
    background: var(--bg-soft);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.9;
}
.paste__pass i { font-size: 12.5px; color: var(--text-dim); }
.paste__pass-input {
    width: 210px;
    text-align: center;
    font-weight: 700;
    background: #fff;
    color: #111;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 6px;
    font-size: 14px;
}

.paste__visits {
    text-align: center;
    text-transform: uppercase;
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 18px;
    letter-spacing: 0.5px;
}

/* botones reutilizables */
.btn {
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: 0.2s;
    text-decoration: none;
}
/* display:inline-flex de arriba gana sobre el display:none del atributo [hidden] del navegador
   — mismo problema que .vip-request de arriba, pero aquí afecta a CUALQUIER .btn oculto con JS
   en todo el sitio (ej. #requestWhatsapp/#requestTelegram), no solo a este bloque. */
.btn[hidden] { display: none; }
.btn--gold { background: var(--gold); color: #111; }
.btn--gold:hover { background: var(--gold-dark); }
.btn--ghost { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.vip-form .btn--gold {
    background: #0073e6;
    color: #ffffff;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 25px;
    transition: background-color 0.2s;
}
.vip-form .btn--gold:hover {
    background: #005bb5;
}
.btn--block { width: 100%; margin-top: 14px; }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* botón "Salir" en el menú */
.logout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: 6px;
    transition: 0.2s;
}
.logout-btn:hover { border-color: #a33; color: #f66; }

/* ============ ÍCONO DE USUARIO / CUENTA ============ */
.account-widget { margin-left: auto; display: flex; align-items: center; }
.account-menu-wrap { position: relative; }
.account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
}
.account-btn svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.account-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: 0.2s;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    z-index: 120;
}
.account-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Menú del ícono de perfil en móvil: se posiciona respecto a la pantalla (no al botón) y se
   ajusta al ancho disponible, para que nunca quede cortado fuera de la pantalla. La posición
   vertical exacta (top) la calcula js/session.js al abrirlo. En desktop no se toca nada. */
@media (max-width: 768px) {
    .account-menu {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
    }
}
.account-menu__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.account-menu__head strong { font-size: 14px; color: var(--text); word-break: break-all; }
.metabadge { font-size: 11px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.account-menu__sub { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.account-menu__links { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--border); }
.account-menu__links a { font-size: 13px; color: var(--text-muted); padding: 6px 8px; border-radius: 6px; }
.account-menu__links a:hover { background: var(--bg-hover); color: var(--gold); }
.account-menu__subscribe { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: #111 !important; font-weight: 700; text-align: center; margin-top: 4px; }
.account-menu__links a.account-menu__subscribe:hover { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #111 !important; opacity: 0.9; }
.account-menu__logout {
    width: 100%;
    margin-top: 8px;
    background: transparent;
    border: 1px solid #a33;
    color: #f66;
    padding: 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
}
.account-menu__logout:hover { background: #a33; color: #fff; }
.auth { max-width: 430px; padding: 40px 16px 60px; }
.auth__card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.auth__title { font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.auth__tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--border); margin-bottom: 18px; }
.auth__tab {
    background: transparent; border: none; color: var(--text-muted);
    font-weight: 700; font-size: 14px; padding: 10px 16px;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.auth__tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.auth__hint { color: var(--text-dim); font-size: 12.5px; margin-bottom: 10px; }
.auth__back { text-align: center; margin-top: 18px; font-size: 13px; }
.auth__back a { color: var(--text-muted); }
.auth__back a:hover { color: var(--gold); }
/* Solo el título de recuperar/nueva contraseña — ".auth__title" también se usa en el modal de
   suscripción de Usuarios, que no debe centrarse. */
.auth__card .auth__title { text-align: center; }
/* Recuperar/nueva contraseña: estas páginas usan .label/.input (clases de admin.css, que no
   cargan aquí) — sin esto el campo se ve como un <input> nativo sin estilo. Se escopa a
   .auth__card para no afectar el panel de admin, que ya tiene su propia versión de estas clases. */
.auth__card .label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin: 0 0 6px; display: block; }
/* .status (mensajes de resultado) tampoco tiene estilo aquí por la misma razón. Se centra siempre;
   el de error se ve grande y en negrita, como un título, para cuando es el único contenido visible
   (enlace inválido/expirado, ver js/reset.js). */
.auth__card .status { text-align: center; margin-top: 10px; }
.auth__card .status--ok { color: #4caf50; font-size: 13px; }
.auth__card .status--err { color: #f66; font-size: 20px; font-weight: 800; }
.auth__card .input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    margin-bottom: 16px;
}
.auth__card .input:focus { border-color: var(--gold); }
.auth__card .input::placeholder { color: var(--text-dim); }
/* El botón (Enviar enlace / Guardar contraseña) usa .btn--block, pero otra regla .btn más abajo
   en el archivo (para otra sección del sitio) fija width:250px y le gana por orden de cascada —
   aquí se refuerza para que ocupe el mismo ancho que el campo de arriba. */
.auth__card .btn--block {
    width: 100%;
}

/* ============ BLOQUEO VIP (paste) ============ */
.paste__lock { text-align: center; padding: 30px 16px; }
.paste__lock-icon { font-size: 40px; margin-bottom: 10px; }
.paste__lock h4 { font-size: 17px; margin-bottom: 6px; }
.paste__lock p { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }
.paste__lock-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ MI CUENTA VIP (estilo cuenta-vip) ============ */
.vip { padding-top: 14px; padding-bottom: 50px; }
.vip-main { display: flex; flex-direction: column; gap: 22px; }

.vip-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px 26px;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.vip-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffe28a, var(--gold) 60%, var(--gold-dark));
    color: #111;
    margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(249, 188, 20, 0.35);
}
.vip-logo__crown { font-size: 26px; line-height: 1; }
.vip-logo__text { font-size: 20px; font-weight: 900; letter-spacing: 1px; line-height: 1; margin-top: 2px; }

.vip-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
}
.vip-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14.5px;
    padding: 10px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: 0.2s;
    flex: 1;
}
.vip-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.vip-tab:hover { color: var(--text); }

.vip-form { text-align: left; max-width: 320px; margin: 0 auto; }
.vip-form .input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    background-color: #ffffff;
    color: #333333;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.2s;
}
.vip-form .input::placeholder { color: #999999; }
.vip-form .input:focus { outline: 2px solid #0073e6; }
.vip-label { display: none; }
.vip-form .btn--gold {
    background: #0073e6;
    color: #ffffff;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 25px;
    transition: background-color 0.2s;
    width: 100%;
}
.vip-form .btn--gold:hover { background: #005bb5; }
.btn--block { width: 100%; }
.vip-note {
    color: var(--text-dim);
    font-size: 12.5px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.vip-recover {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: #e0e0e0;
    font-size: 14px;
    text-decoration: none;
}
.vip-recover:hover { text-decoration: underline; color: #ffffff; }

.vip-heading {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 18px;
}

.vip-setup {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(249, 188, 20, 0.08);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 6px;
    text-align: left;
}
.vip-setup__icon {
    font-size: 24px;
    background: var(--gold);
    color: #111;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vip-setup__text { font-size: 12.5px; color: var(--text-muted); }
.vip-setup__text b { color: var(--text); }

.vip-request {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
/* display:flex de arriba gana sobre el display:none del atributo [hidden] del navegador
   (mismo caso que .sidebar-widget[hidden] más abajo) — sin esto, ocultar #vipRequest con JS
   no tiene ningún efecto visual. */
.vip-request[hidden] { display: none; }
.vip-request__icon {
    font-size: 22px;
    background: var(--bg-card);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vip-request strong { font-size: 14px; color: var(--text); }
.vip-request p { color: var(--text-muted); font-size: 12.5px; margin: 4px 0 10px; }
.vip-request__links { display: flex; gap: 8px; }

.vip-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(120deg, #2a2310, var(--bg-card));
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 18px;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vip-banner:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(249, 188, 20, 0.15); }
.vip-banner__icon {
    font-size: 30px;
    background: var(--gold);
    color: #111;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vip-banner strong { display: block; font-size: 16px; color: var(--text); }
.vip-banner small { color: var(--text-muted); font-size: 12.5px; }

@media (max-width: 768px) {
    .vip-card { padding: 24px 18px; }
}

/* ============ CAST / REPARTO ============ */
.cast-section { margin: 24px 0; }
.cast-section__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}
.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
}
.cast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cast-card__img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.cast-card__img--noimg {
    background: var(--bg-card);
    color: var(--gold);
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cast-card__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-top: 6px;
}
.cast-card__character {
    font-size: 11px;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .cast-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
    .cast-card__img, .cast-card__img--noimg { width: 64px; height: 64px; font-size: 22px; }
}

/* ============ FICHA: LAYOUT ============ */
.ficha-container {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 25px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}
.ficha-main {
    min-width: 0;
}
.ficha-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============ CARD ============ */
.card {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    overflow: hidden;
}
/* Bloques de la ficha (DESCARGA, Etiquetas, REPARTO, TAMBIÉN TE PUEDE INTERESAR y las tarjetas
   de filtro del sidebar): fondo totalmente transparente para que el fondo animado del sitio se
   vea detrás. Solo afecta a la ficha; el resto de páginas que usan .card (panel admin, etc.)
   conservan su fondo sólido normal. */
.ficha-main .card,
.ficha-sidebar .card {
    background-color: transparent;
    border: 1px solid var(--gold);
}
body.mc-no-block-border .ficha-main .card,
body.mc-no-block-border .ficha-sidebar .card {
    border-color: transparent;
}
/* Los posters individuales de "TAMBIÉN TE PUEDE INTERESAR" también son .card (mismo componente
   que las tarjetas del catálogo) pero no deben llevar el borde del bloque, solo el bloque que
   los contiene. */
.ficha-main .cards-grid .card {
    border: none;
}
/* Bloques DATOS, SINOPSIS, CAPTURAS y TRAILER: no usan .card (no tienen fondo propio), pero
   llevan el mismo borde de color principal que el resto de bloques de la ficha. No se les agrega
   padding ni se toca su tamaño/espaciado, solo el borde (box-sizing:border-box ya evita que
   cambien de tamaño). */
.ficha-block {
    border: 1px solid var(--gold);
    border-radius: 8px;
    overflow: hidden;
}
body.mc-no-block-border .ficha-block {
    border-color: transparent;
}

/* ============ SECTION TITLE ============ */
.section-title {
    background-color: #0f172a;
    padding: 10px;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* ============ TITLE MAIN ============ */
.title-main {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ============ INFO GRID (poster + details) ============ */
.info-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

/* ============ POSTER ============ */
 .poster {
     display: inline-block;
     flex-shrink: 0;
     width: fit-content;
     border-radius: 8px;
     overflow: hidden;
 }
.poster img {
    width: 250px;
    height: auto;
    display: block;
}
.poster__badge {
    background: #22c55e;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px;
}

/* ============ DETAILS WRAPPER ============ */
.details-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}
.details-text span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.95rem;
}
 .details-text strong {
     color: #06b6d4;
 }
.synopsis {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: justify;
}

/* ============ MEDIA GRID (capturas + trailer) ============ */
.media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.media-box {
    background-color: #0f172a;
    min-height: 200px;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid #1e293b;
    overflow: hidden;
}
.media-box iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    border-radius: 6px;
}
.media-box img {
    border-radius: 6px;
}
/* Miniatura del tráiler antes de hacer clic (ver youtubeFacade en js/ficha.js) — mismo tamaño que
   el iframe real que la reemplaza, para que no salte el layout al hacer clic. */
.yt-facade {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.yt-facade__play {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}
.yt-facade:hover .yt-facade__play { background: var(--gold); color: #111; transform: scale(1.08); }

/* ============ SCREENSHOTS CAROUSEL ============ */
.screenshots-carousel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scr-viewport {
    width: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.scr-viewport img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 6px;
}
.scr-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid #444;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.scr-arrow:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.scr-prev { left: 8px; }
.scr-next { right: 8px; }
.scr-counter {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============ BOTONES ============ */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    width: 250px;
    font-size: 0.9rem;
    transition: opacity 0.2s;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
.btn:hover { opacity: 0.8; }
.btn-cyan { background-color: #06b6d4; color: #000; }
.btn-gold { background-color: var(--gold); color: #000; }
.btn-red { background-color: #ef4444; color: #fff; width: auto; padding: 10px 20px; }
.btn-full { width: 100%; background-color: var(--gold); color: #000; margin-top: 20px; margin-bottom: 20px; }

/* ============ DOWNLOAD INFO ============ */
.download-info {
    text-align: center;
    margin-bottom: 25px;
}
.download-info p {
    margin-bottom: 5px;
    font-size: 0.95rem;
}
.download-info strong {
    color: #06b6d4;
}
.buttons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* ============ SIDEBAR ============ */
.sidebar-widget {
    display: block;
    border: 1px solid var(--gold);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s;
    padding: 20px;
    border-radius: 8px;
    background: transparent;
}
.sidebar-widget[hidden] { display: none; }
body.mc-no-block-border .sidebar-widget {
    border-color: transparent;
}
.sidebar-widget:hover {
    border-color: var(--gold);
}
.sidebar-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 10px;
}
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag {
    background-color: #0f172a;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px solid #1e293b;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.tag:hover { background-color: #1e293b; color: white; }

/* ============ FINAL / UPSELL ============ */
.final5 {
    text-align: center;
    padding: 10px 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============ LINK ROWS (enlaces sueltos) ============ */
.link-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-hover);
    border-radius: 6px;
    margin-top: 8px;
    text-decoration: none;
    transition: background 0.2s;
}
.link-row:hover { background: var(--border); }
.link-row__label { font-weight: 600; font-size: 14px; }
.link-row__size { font-size: 12px; color: var(--text-muted); }
.link-row__go { font-size: 16px; color: var(--gold); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .ficha-container { grid-template-columns: 1fr; }
    .info-grid { flex-direction: column; align-items: center; }
    .poster { width: 100%; max-width: 300px; }
    .poster img { width: 100%; }
    .media-grid { grid-template-columns: 1fr; }
    .btn { width: 100%; max-width: 300px; }
}