/*
 * DooPlay — layout moderno
 * Capa por encima de front.style.min.css y colors.*.min.css. Todo va bajo body.doo-modern,
 * que solo se pone con el layout moderno activo (inc/doo_modern.php).
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
:root{
    --doo-accent:#E50914;
    --doo-bg:#0a0a0d;
    --doo-surface:#141418;
    --doo-surface-2:#1c1c22;
    --doo-line:rgba(255,255,255,.08);
    --doo-text:#f5f5f7;
    --doo-muted:#a3a3ad;
    --doo-radius:12px;
    --doo-gutter:clamp(16px, 4vw, 56px);
    --doo-max:1600px;
    --doo-header:72px;
    --doo-font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body.doo-modern{
    background:var(--doo-bg) !important;
    color:var(--doo-text);
    font-family:var(--doo-font) !important;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
body.doo-modern h1,body.doo-modern h2,body.doo-modern h3,body.doo-modern h4,
body.doo-modern input,body.doo-modern button,body.doo-modern textarea,body.doo-modern select{
    font-family:var(--doo-font) !important;
}
body.doo-modern a{color:inherit}
body.doo-modern a:hover{color:#fff}
body.doo-modern ::selection{background:var(--doo-accent);color:#fff}

/* El fondo dinamico fijo del theme se sustituye por la cabecera de la ficha. */
body.doo-modern #dt_contenedor{background:var(--doo-bg) !important;background-image:none !important}
body.doo-modern #contenedor{max-width:none !important;width:100%;margin:0 !important;padding-top:var(--doo-header)}
body.doo-modern .module,
body.doo-modern #single{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:0 !important}

/* ------------------------------------------------------------------ *
 * Cabecera
 * ------------------------------------------------------------------ */
body.doo-modern header.main{
    height:var(--doo-header);
    background:linear-gradient(180deg, rgba(10,10,13,.85) 0%, rgba(10,10,13,0) 100%) !important;
    box-shadow:none !important;
    border:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:background .3s ease, box-shadow .3s ease;
}
body.doo-modern.doo-scrolled header.main,
body.doo-modern:not(.home):not(.single) header.main{
    background:rgba(10,10,13,.92) !important;
    backdrop-filter:saturate(160%) blur(14px) !important;
    -webkit-backdrop-filter:saturate(160%) blur(14px) !important;
    box-shadow:0 1px 0 var(--doo-line) !important;
}
body.doo-modern header.main .hbox{
    max-width:var(--doo-max);
    height:var(--doo-header);
    padding:0 var(--doo-gutter);
}
body.doo-modern header.main .hbox .fix-hidden{
    display:flex;
    align-items:center;
    gap:32px;
    height:100%;
}
body.doo-modern header.main .hbox .logo{
    float:none;
    padding:0;
    background:none !important;
    display:flex;
    align-items:center;
    height:auto;
    flex:none;
}
body.doo-modern header.main .hbox .logo img{height:30px}
body.doo-modern header.main .hbox .head-main-nav{float:none;flex:1;min-width:0}
body.doo-modern header.main .hbox .head-main-nav ul.main-header{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;float:none;height:var(--doo-header)}
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li{float:none;flex:none;position:relative}
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li>a{
    float:none;display:block;white-space:nowrap;
    padding:8px 12px !important;
    border-radius:999px;
    font-size:14px;
    font-weight:500;
    color:var(--doo-muted) !important;
    line-height:20px;
    transition:color .2s, background .2s;
}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li.menu-item-has-children>a:after{float:none;margin:0 0 0 6px;font-size:11px}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li ul.sub-menu{
    top:calc(100% - 10px);left:0;min-width:200px;padding:8px !important;
    border-radius:var(--doo-radius);background:var(--doo-surface) !important;
    box-shadow:0 0 0 1px var(--doo-line), 0 20px 40px -12px rgba(0,0,0,.8) !important;opacity:1;
}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li ul.sub-menu li a{border-radius:8px;padding:10px 12px !important;color:var(--doo-muted) !important;background:none !important}
body.doo-modern header.main .hbox .head-main-nav ul.main-header li ul.sub-menu li a:hover{background:rgba(255,255,255,.06) !important;color:#fff !important}
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li>a:hover,
body.doo-modern header.main .hbox .head-main-nav ul.main-header>li.current-menu-item>a{
    color:#fff !important;
    background:rgba(255,255,255,.08);
}
body.doo-modern header.main .hbox .headitems{
    float:none;
    display:flex;
    align-items:center;
    gap:12px;
    width:auto !important;
    margin-left:auto;
    padding:0 !important;
}
/* Busca: un icono que se abre hacia la izquierda, por encima del menu, al pulsarlo. */
body.doo-modern header.main .hbox .search{float:none;padding:0;width:42px;height:42px;position:relative;flex:none}
body.doo-modern header.main .hbox .search form{
    position:absolute;right:0;top:0;z-index:5;
    width:42px;height:42px;
    background:rgba(255,255,255,.08) !important;
    border:1px solid var(--doo-line);
    border-radius:999px;
    transition:width .3s ease, background .2s, border-color .2s;
}
body.doo-modern header.main .hbox .search form:focus-within,
body.doo-modern header.main .hbox .search form:has(input:not(:placeholder-shown)){
    width:min(340px, 60vw);
    background:rgba(20,20,24,.96) !important;
    border-color:rgba(255,255,255,.22);
}
body.doo-modern header.main .hbox .search form input[type=text]{
    height:40px;padding:0 44px 0 18px;font-size:14px;font-weight:400;
    cursor:pointer;color:transparent !important;
}
body.doo-modern header.main .hbox .search form input[type=text]::placeholder{color:transparent}
body.doo-modern header.main .hbox .search form:focus-within input[type=text]{cursor:text;color:#fff !important}
body.doo-modern header.main .hbox .search form:focus-within input[type=text]::placeholder{color:var(--doo-muted)}
body.doo-modern header.main .hbox .search form button[type=submit]{padding:0;width:40px;height:40px;pointer-events:none}
body.doo-modern header.main .hbox .search form:focus-within button[type=submit]{pointer-events:auto}
body.doo-modern header.main .hbox .dtuser{float:none;padding:0;margin:0;display:flex;align-items:center}
body.doo-modern header.main .hbox .dtuser .gravatar{display:flex;align-items:center;gap:10px;padding:0}
body.doo-modern header.main .hbox .dtuser .gravatar img{border-radius:50%;width:34px;height:34px}
body.doo-modern .headitems a#dooplay_signout{float:none;padding:8px 0;font-size:14px;color:var(--doo-muted) !important}
body.doo-modern .headitems a#dooplay_signout:hover{color:#fff !important}
body.doo-modern header.main .live-search{border-radius:var(--doo-radius);overflow:hidden}

/* Cabecera del movil.
   Fija, como la de escritorio. El theme la deja flotando (float:left) dentro del flujo, y con
   la portada subiendo por debajo de la barra eso hacia que el navegador no pintara el destacado. */
body.doo-modern .fixheadresp{position:fixed;top:var(--wp-admin--admin-bar--height, 0px);left:0;right:0;z-index:105}
body.doo-modern .fixheadresp header.responsive{float:none;height:var(--doo-header)}
body.doo-modern .fixheadresp header.responsive .logo{padding:calc((var(--doo-header) - 30px) / 2) 0}
body.doo-modern .fixheadresp header.responsive .logo img{height:30px}
body.doo-modern .fixheadresp header.responsive{
    background:rgba(10,10,13,.94) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--doo-line) !important;
    border:0 !important;
}
body.doo-modern .fixheadresp .menuresp,
body.doo-modern .fixheadresp .search_responsive{background:var(--doo-surface) !important}

/* Glosario de letras: una fila de pastillas */
body.doo-modern .letter_home{background:transparent !important;padding:24px var(--doo-gutter) 0;max-width:var(--doo-max);margin:0 auto;float:none}
body.doo-modern .letter_home .fixresp ul.glossary{
    display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
    background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding:0;
}
body.doo-modern .letter_home .fixresp ul.glossary::-webkit-scrollbar{display:none}
body.doo-modern .letter_home .fixresp ul.glossary li{float:none;width:auto;flex:none}
body.doo-modern .letter_home .fixresp ul.glossary li a{
    display:block;min-width:34px;padding:7px 10px;text-align:center;border-radius:8px;
    background:var(--doo-surface);color:var(--doo-muted);font-size:13px;font-weight:600;
}
body.doo-modern .letter_home .fixresp ul.glossary li a:hover,
body.doo-modern .letter_home .fixresp ul.glossary li a.active{background:var(--doo-accent);color:#fff}
body.doo-modern .letter_home>.items_glossary{border-radius:var(--doo-radius)}

/* ------------------------------------------------------------------ *
 * Botones
 * ------------------------------------------------------------------ */
.doo-modern .mbtn{
    display:inline-flex;align-items:center;gap:10px;
    height:48px;padding:0 26px;border-radius:999px;
    font-size:15px;font-weight:700;letter-spacing:.01em;
    transition:transform .15s ease, background .2s, box-shadow .2s;
    white-space:nowrap;
}
.doo-modern .mbtn:active{transform:scale(.97)}
.doo-modern .mbtn-primary{background:var(--doo-accent);color:#fff !important;box-shadow:0 10px 30px -10px var(--doo-accent)}
.doo-modern .mbtn-primary:hover{filter:brightness(1.1)}
.doo-modern .mbtn-ghost{background:rgba(255,255,255,.14);color:#fff !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.doo-modern .mbtn-ghost:hover{background:rgba(255,255,255,.22)}

/* ------------------------------------------------------------------ *
 * Portada: destacado
 * ------------------------------------------------------------------ */
.doo-modern .mhome{display:block;width:100%;margin-top:calc(var(--doo-header) * -1)}
.doo-modern .mhero{
    position:relative;
    height:clamp(520px, 82vh, 860px);
    overflow:hidden;
    background:var(--doo-bg);
}
.doo-modern .mhero-slide{
    position:absolute;inset:0;
    background:var(--bg) center 20% / cover no-repeat;
    opacity:0;visibility:hidden;
    transition:opacity .9s ease, visibility .9s;
}
.doo-modern .mhero-slide.is-active{opacity:1;visibility:visible}
.doo-modern .mhero-slide::before{
    content:"";position:absolute;inset:0;
    background:
        linear-gradient(90deg, rgba(10,10,13,.92) 0%, rgba(10,10,13,.7) 32%, rgba(10,10,13,.15) 62%, rgba(10,10,13,0) 100%),
        linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,0) 38%);
}
/* La entrada animada solo al cambiar de slide (el script pone .is-animated). El primero sale
   ya visible: el texto nunca depende de que corra una animacion o el JavaScript. */
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*{animation:doo-rise .8s both}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(2){animation-delay:.06s}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(3){animation-delay:.12s}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(4){animation-delay:.18s}
.doo-modern .mhero.is-animated .mhero-slide.is-active .mhero-body>*:nth-child(5){animation-delay:.24s}
@keyframes doo-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.doo-modern .mhero-body{
    position:absolute;
    left:0;right:0;bottom:clamp(120px, 20vh, 200px);
    max-width:var(--doo-max);margin:0 auto;padding:0 var(--doo-gutter);
}
.doo-modern .mhero-body>*{max-width:620px}
.doo-modern .mhero-kicker{
    display:inline-flex;align-items:center;
    font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;margin-bottom:14px;
}
.doo-modern .mhero-kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--doo-accent);margin-right:10px}
.doo-modern .mhero-title{
    font-size:clamp(2.2rem, 5.2vw, 4.4rem);
    font-weight:800;line-height:1.02;letter-spacing:-.02em;
    margin:0 0 16px;color:#fff;
    text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.doo-modern .mhero-title a{color:#fff !important}
.doo-modern .mhero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.doo-modern .mhero-meta span{
    font-size:13px;font-weight:600;color:#e7e7ea;
    padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.doo-modern .mhero-meta .mrate{background:rgba(245,197,24,.16);color:#f5c518}
.doo-modern .mhero-meta .mrate i{font-size:11px}
.doo-modern .mhero-text{
    font-size:16px;line-height:1.6;color:#d4d4d8;margin:0 0 26px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.doo-modern .mhero-actions{display:flex;flex-wrap:wrap;gap:12px}
.doo-modern .mhero-dots{
    position:absolute;z-index:3;
    right:var(--doo-gutter);bottom:clamp(130px, 21vh, 210px);
    display:flex;gap:8px;
}
.doo-modern .mhero-dots button{
    width:10px;height:10px;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.35);transition:width .3s, background .3s;
}
.doo-modern .mhero-dots button.is-active{width:28px;background:#fff}

/* ------------------------------------------------------------------ *
 * Portada: filas
 * ------------------------------------------------------------------ */
.doo-modern .mrows{position:relative;z-index:2;padding:0 0 40px}
.doo-modern .mrows.has-hero{margin-top:clamp(-110px, -12vh, -60px)}
.doo-modern .mrows:not(.has-hero){padding-top:32px}
.doo-modern .mrow{max-width:var(--doo-max);margin:0 auto 38px;padding:0 var(--doo-gutter)}
.doo-modern .mrow-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.doo-modern .mrow-head h2{font-size:clamp(1.15rem, 1.6vw, 1.45rem);font-weight:700;letter-spacing:-.01em;color:#fff;margin:0}
.doo-modern .mrow-all{font-size:13px;font-weight:600;color:var(--doo-muted) !important;display:inline-flex;align-items:center;gap:6px}
.doo-modern .mrow-all i{font-size:10px;transition:transform .2s}
.doo-modern .mrow-all:hover{color:#fff !important}
.doo-modern .mrow-all:hover i{transform:translateX(3px)}

.doo-modern .mrow-wrap{position:relative}
.doo-modern .mrow-track{
    display:grid;grid-auto-flow:column;
    grid-auto-columns:clamp(132px, 13.5vw, 210px);
    gap:clamp(10px, 1.1vw, 16px);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-left:0;scrollbar-width:none;
    padding:8px 2px 14px;margin:-8px -2px -14px;
}
.doo-modern .mrow-track::-webkit-scrollbar{display:none}
.doo-modern .mrow-ep .mrow-track{grid-auto-columns:clamp(240px, 24vw, 340px)}
.doo-modern .mrow-ranked .mrow-track{grid-auto-columns:clamp(190px, 19vw, 280px)}

.doo-modern .mrow-nav{
    position:absolute;top:0;bottom:44px;z-index:4;
    width:46px;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:18px;
    opacity:0;transition:opacity .2s;
}
.doo-modern .mrow-nav.prev{left:calc(var(--doo-gutter) * -1);background:linear-gradient(90deg, var(--doo-bg) 20%, rgba(10,10,13,0))}
.doo-modern .mrow-nav.next{right:calc(var(--doo-gutter) * -1);background:linear-gradient(270deg, var(--doo-bg) 20%, rgba(10,10,13,0))}
.doo-modern .mrow-wrap:hover .mrow-nav{opacity:1}
.doo-modern .mrow-wrap.at-start .mrow-nav.prev,
.doo-modern .mrow-wrap.at-end .mrow-nav.next,
.doo-modern .mrow-wrap.no-scroll .mrow-nav{opacity:0 !important;pointer-events:none}

/* ------------------------------------------------------------------ *
 * Tarjetas
 * ------------------------------------------------------------------ */
.doo-modern .mcard{scroll-snap-align:start;min-width:0}
.doo-modern .mcard-link{display:block;color:inherit}
.doo-modern .mcard-img{
    position:relative;aspect-ratio:2/3;border-radius:var(--doo-radius);overflow:hidden;
    background:var(--doo-surface-2);
    box-shadow:0 0 0 1px var(--doo-line);
    transition:transform .25s ease, box-shadow .25s ease;
}
.doo-modern .mcard-ep .mcard-img{aspect-ratio:16/9}
.doo-modern .mcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease, filter .3s}
.doo-modern .mcard-img::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
    opacity:.0;transition:opacity .25s;
}
.doo-modern .mcard-link:hover .mcard-img{transform:translateY(-4px);box-shadow:0 0 0 2px var(--doo-accent), 0 18px 40px -16px rgba(0,0,0,.9)}
.doo-modern .mcard-link:hover .mcard-img img{transform:scale(1.06)}
.doo-modern .mcard-link:hover .mcard-img::after{opacity:1}
.doo-modern .mcard-rate,
.doo-modern .mcard-type,
.doo-modern .mcard-badge{
    position:absolute;z-index:2;
    font-size:11px;font-weight:700;line-height:1;
    padding:6px 8px;border-radius:7px;
    background:rgba(10,10,13,.72);color:#fff;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.doo-modern .mcard-rate{top:8px;left:8px;color:#f5c518}
.doo-modern .mcard-rate i{font-size:9px;margin-right:2px}
.doo-modern .mcard-type{top:8px;right:8px;text-transform:uppercase;letter-spacing:.06em;font-size:10px;opacity:0;transition:opacity .2s}
.doo-modern .mcard-link:hover .mcard-type{opacity:1}
.doo-modern .mcard-badge{left:8px;bottom:8px;background:var(--doo-accent)}
.doo-modern .mplay{
    position:absolute;z-index:2;left:50%;top:50%;
    width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--doo-accent);color:#fff;font-size:16px;padding-left:3px;
    box-shadow:0 10px 30px -6px rgba(0,0,0,.7);
    opacity:0;transform:scale(.7);transition:opacity .25s, transform .25s;
}
.doo-modern .mcard-link:hover .mplay{opacity:1;transform:scale(1)}
.doo-modern .mcard-title{
    margin:10px 2px 2px;font-size:14px;font-weight:600;line-height:1.35;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.doo-modern .mcard-sub{display:block;margin:0 2px;font-size:12.5px;color:var(--doo-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Top: numero grande al lado del poster */
/* La columna del numero tiene ancho fijo: si no, cada poster sale de un tamaño segun lo ancho
   que sea su numero (el 1 es mas estrecho que el 5). */
.doo-modern .mcard.is-ranked .mcard-link{display:grid;grid-template-columns:clamp(46px, 4.6vw, 76px) 1fr;align-items:end}
.doo-modern .mcard-rank{
    grid-row:1;grid-column:1;align-self:end;justify-self:end;
    font-size:clamp(4.5rem, 7vw, 7.5rem);font-weight:800;line-height:.78;letter-spacing:-.06em;
    color:var(--doo-bg);-webkit-text-stroke:2px rgba(255,255,255,.45);
    margin-right:-12px;position:relative;z-index:1;
}
.doo-modern .mcard.is-ranked .mcard-img{grid-row:1;grid-column:2}
.doo-modern .mcard.is-ranked .mcard-title,
.doo-modern .mcard.is-ranked .mcard-sub{grid-column:2}

.doo-modern .mads{max-width:var(--doo-max);margin:0 auto 38px;padding:0 var(--doo-gutter);text-align:center}

/* ------------------------------------------------------------------ *
 * Listados (archivos, busqueda, generos)
 * ------------------------------------------------------------------ */
body.doo-modern .module{float:none;min-height:0;max-width:var(--doo-max);margin:0 auto;padding:0 var(--doo-gutter) 48px}
body.doo-modern .module .sidebar,
body.doo-modern .dtsingle .sidebar{display:none !important}
body.doo-modern .module .content,
body.doo-modern .module .content.right,
body.doo-modern .module .content.left,
body.doo-modern .module .content.full,
body.doo-modern .module .content.normal{width:100% !important;margin:0 !important;padding:32px 0 0 !important;float:none}
body.doo-modern .module .content h1.heading-archive{
    font-size:clamp(1.8rem, 3.4vw, 2.8rem);font-weight:800;letter-spacing:-.02em;color:#fff;
    margin:8px 0 8px;padding:0;float:none;
}
body.doo-modern .module .content header,
body.doo-modern .module .content header.archive_post{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    float:none;width:100%;padding:24px 0 14px !important;border:0 !important;background:none !important;
}
body.doo-modern .module .content header h1,
body.doo-modern .module .content header h2{float:none;padding:0 !important;font-size:clamp(1.15rem, 1.6vw, 1.45rem);font-weight:700;color:#fff;border:0 !important}
body.doo-modern .module .content header h2::before,
body.doo-modern .module .content header h1::before{display:none}
body.doo-modern .module .content header span{float:none;color:var(--doo-muted);font-size:13px}
body.doo-modern .module .content header span a.see-all{background:transparent !important;color:var(--doo-muted) !important;font-size:13px;text-transform:none;font-weight:600;padding:0;margin-left:8px}
body.doo-modern .module .content header span a.see-all:hover{color:#fff !important}

body.doo-modern .module .content .items{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(clamp(132px, 13vw, 190px), 1fr));
    gap:22px clamp(10px, 1.2vw, 18px);
    float:none;width:100%;margin:0 0 28px;border:0 !important;
}
body.doo-modern .module .content .items::before,
body.doo-modern .module .content .items::after{display:none}
body.doo-modern .module .content .items .item,
body.doo-modern .module .content .items.normal .item,
body.doo-modern .module .content .items.full .item,
body.doo-modern .module .content .items .se{width:auto !important;float:none;padding:0 !important;margin:0}
body.doo-modern .module .content .items .se,
body.doo-modern .module .content .items .item.se{grid-column:span 2}
/* El theme reserva el hueco del poster con padding-top:140%, y un poster es 2:3 (150%): quedaba
   una franja vacia debajo de la imagen. */
body.doo-modern .module .content .items .item .poster{padding-top:150% !important}
/* Y height:auto. El theme le pone height:100%: en la rejilla eso es el alto de TODA la tarjeta,
   y sumado al padding el poster se salia por debajo, encima del titulo y la fecha, y la fila
   siguiente acababa tapandolos. */
body.doo-modern .module .content .items .item .poster{height:auto !important;float:none !important;display:block}
body.doo-modern .module .content .items .item .poster img{top:0;left:0;height:100%;margin-top:0 !important}
body.doo-modern .module .content .items .se .poster{padding-top:56.25% !important}
body.doo-modern .module .content,
body.doo-modern .dtsingle .content{border:0 !important}
body.doo-modern .module .content .items .item .poster{
    border-radius:var(--doo-radius);background:var(--doo-surface-2) !important;
    box-shadow:0 0 0 1px var(--doo-line);
    transition:transform .25s ease, box-shadow .25s ease;
}
body.doo-modern .module .content .items .item:hover .poster{transform:translateY(-4px);box-shadow:0 0 0 2px var(--doo-accent), 0 18px 40px -16px rgba(0,0,0,.9)}
body.doo-modern .module .content .items .item .poster:hover>img{transform:scale(1.06);filter:brightness(.55)}
body.doo-modern .module .content .items .item .poster .rating{
    top:8px;left:8px;bottom:auto;right:auto;margin:0;border-radius:7px;
    background:rgba(10,10,13,.72);color:#f5c518;text-shadow:none;font-weight:700;font-size:11px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
body.doo-modern .module .content .items .item .poster .rating:before{color:#f5c518;font-size:9px}
body.doo-modern .module .content .items .item .poster .quality,
body.doo-modern .module .content .items .item .poster span.quality{border-radius:6px;background:var(--doo-accent) !important;color:#fff !important;font-weight:700}
body.doo-modern .module .content .items .item .data{margin:10px 0 0;float:none}
body.doo-modern .module .content .items .item .data h3{font-size:14px;font-weight:600;color:#fff;float:none}
body.doo-modern .module .content .items .item .data h3 a{color:#fff}
body.doo-modern .module .content .items .item .data span{float:none;display:block;color:var(--doo-muted);font-size:12.5px}
body.doo-modern .module .content .items .item .dtinfo{display:none !important}

/* Paginacion */
body.doo-modern .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;float:none;width:100%;margin:12px 0 0}
body.doo-modern .pagination a,
body.doo-modern .pagination span{
    float:none;min-width:40px;height:40px;padding:0 12px;line-height:40px;text-align:center;
    border:0 !important;border-radius:10px;background:var(--doo-surface) !important;color:var(--doo-muted) !important;font-weight:600;
}
body.doo-modern .pagination a:hover{background:var(--doo-surface-2) !important;color:#fff !important}
body.doo-modern .pagination span.current{background:var(--doo-accent) !important;color:#fff !important}

/* ------------------------------------------------------------------ *
 * Ficha (pelicula, serie, temporada, episodio)
 * ------------------------------------------------------------------ */
body.doo-modern #single{float:none}
body.doo-modern.doo-hero-page #single{margin-top:calc(var(--doo-header) * -1)}

/* Player grande (Opciones > Player > «Bigger»). El theme lo pone ANTES de la ficha, fuera de
   #single, y lo llena por JavaScript al reproducir. La cabecera de la ficha sube por debajo de
   la barra superior con margen negativo, asi que le tapaba la parte de abajo: con player grande
   la cabecera ya no sube. Vacio, no se enseña la caja. */
body.doo-modern #contenedor>.dooplay_player{position:relative;z-index:30;margin-top:20px !important}
body.doo-modern #contenedor>.dooplay_player:has(#dooplay_player_big_content:empty){display:none}
body.doo-modern.doo-hero-page #contenedor:has(>.dooplay_player #dooplay_player_big_content:not(:empty)) #single{margin-top:0}
body.doo-modern.doo-hero-page #contenedor:has(>.dooplay_player #dooplay_player_big_content:not(:empty)) .sheader{padding-top:48px !important;min-height:0}
body.doo-modern .dtsingle .content,
body.doo-modern .dtsingle .content.right,
body.doo-modern .dtsingle .content.left{width:100% !important;margin:0 !important;float:none}
/* Con player (peliculas con fuentes o trailer) el orden es el del HTML: primero el player y
   debajo la ficha. La ficha entonces no sube por debajo de la barra superior: eso es solo para
   cuando abre la pagina (series, temporadas, peliculas sin fuentes). */
body.doo-modern .dtsingle .content{display:flex;flex-direction:column}
body.doo-modern .dtsingle .content>*{min-width:0}
body.doo-modern.doo-hero-page #single:has(.dooplay_player){margin-top:0}
body.doo-modern #single:has(.dooplay_player) .sheader{
    min-height:clamp(320px, 46vh, 520px);
    padding-top:48px !important;
    margin-top:28px;
}

/* La cabecera de la ficha, sobre la imagen de fondo */
body.doo-modern .sheader{
    position:relative;float:none;
    display:flex;align-items:flex-end;gap:clamp(20px, 3vw, 40px);
    min-height:clamp(440px, 70vh, 700px);
    padding:calc(var(--doo-header) + 48px) max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 40px !important;
    background:var(--doo-hero, none) center 20% / cover no-repeat, var(--doo-surface);
    overflow:hidden;border:0 !important;margin:0;
}
body.doo-modern .sheader::before{
    content:"";position:absolute;inset:-2px;z-index:0;
    background:
        linear-gradient(90deg, rgba(10,10,13,.95) 0%, rgba(10,10,13,.75) 38%, rgba(10,10,13,.25) 75%, rgba(10,10,13,.1) 100%),
        linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,0) 55%);
}
body.doo-modern .sheader>*{position:relative;z-index:1}
body.doo-modern .sheader .poster{
    float:none;flex:none;width:clamp(130px, 15vw, 230px);
    border-radius:var(--doo-radius);overflow:hidden;
    box-shadow:0 0 0 1px var(--doo-line), 0 30px 60px -20px rgba(0,0,0,.9);
}
body.doo-modern .sheader .poster img{display:block;width:100%;height:auto}
body.doo-modern .sheader .data{width:auto !important;margin:0 !important;padding:0 0 6px;flex:1;min-width:0;float:none}
body.doo-modern .sheader .data h1{
    font-size:clamp(2rem, 4.6vw, 3.8rem) !important;font-weight:800 !important;line-height:1.04 !important;
    letter-spacing:-.02em;color:#fff;margin:0 0 14px;white-space:normal;
}
body.doo-modern .sheader .data .extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
body.doo-modern .sheader .data .extra span{
    float:none;margin:0 !important;padding:5px 12px !important;border-radius:999px;
    background:rgba(255,255,255,.12);color:#e7e7ea;font-size:13px;font-weight:600;border:0 !important;
}
body.doo-modern .sheader .data .extra span:empty{display:none}
/* El lema de la pelicula no es una etiqueta: va como texto, en su propia linea. */
body.doo-modern .sheader .data .extra span.tagline{
    flex-basis:100%;order:-1;padding:0 !important;background:none;border-radius:0;
    font-size:16px;font-weight:500;font-style:italic;color:#d4d4d8;
}
body.doo-modern .sheader .data .extra span a{color:#fff}
body.doo-modern .sheader .data .sgeneros{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;float:none;height:auto;overflow:visible;padding:0}
body.doo-modern .sheader .data .sgeneros a{
    float:none;margin:0 !important;padding:7px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,.22);color:#fff !important;font-size:13px;font-weight:600;background:transparent !important;
}
body.doo-modern .sheader .data .sgeneros a:hover{background:#fff !important;color:#000 !important;border-color:#fff}
body.doo-modern .sheader .data .sgeneros a::after{display:none}

/* Caja de puntuacion: la nota a la izquierda y, al lado, las estrellas y los votos */
body.doo-modern .sheader .starstruck-wrap{float:none;width:auto;display:block;margin:0;padding:0}
body.doo-modern .sheader .dt_rating_data{
    float:none;position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
    min-height:74px;padding:12px 18px 12px 84px;border-radius:16px;
    background:rgba(10,10,13,.55);border:1px solid var(--doo-line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.doo-modern .sheader .starstruck-wrap .dt_rating_vgs{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    width:56px;height:50px;padding:0;line-height:50px;font-size:24px;font-weight:800;
    background:var(--doo-accent) !important;color:#fff !important;border-radius:12px;
}
body.doo-modern .sheader .starstruck{min-width:0}
body.doo-modern .sheader .starstruck-rating{display:flex;align-items:center;gap:5px;margin:0;color:var(--doo-muted)}
body.doo-modern .sheader .starstruck-rating i{float:none;margin:0}
body.doo-modern .sheader .starstruck-rating-wrap{margin:0;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1) !important;color:#fff;font-weight:500}

/* Pestañas */
body.doo-modern .single_tabs{
    position:sticky;top:var(--doo-header);z-index:20;float:none;
    padding:12px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) !important;
    background:rgba(10,10,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--doo-line);
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
body.doo-modern ul.smenu{display:flex;gap:6px;float:none;padding:0 !important;overflow-x:auto;scrollbar-width:none}
body.doo-modern ul.smenu li{float:none;flex:none}
body.doo-modern ul.smenu li a{
    padding:9px 18px !important;border-radius:999px !important;
    background:transparent !important;color:var(--doo-muted) !important;font-weight:600 !important;
}
body.doo-modern ul.smenu li a:hover{color:#fff !important;background:rgba(255,255,255,.08) !important}
body.doo-modern ul.smenu li a.selected,
body.doo-modern ul.smenu li a.active{background:var(--doo-accent) !important;color:#fff !important}
body.doo-modern .single_tabs .user_control{float:none;order:2;margin-left:auto}

/* Bloques de la ficha */
body.doo-modern #single .content .sbox{
    float:none;width:100%;border:0 !important;background:transparent !important;
    padding:32px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) !important;
}
body.doo-modern .sbox h2,
body.doo-modern .sbox h1{float:none;border:0 !important;font-size:clamp(1.15rem, 1.6vw, 1.45rem) !important;font-weight:700 !important;color:#fff;padding:0 0 14px !important;margin:0 !important}
body.doo-modern .sbox .wp-content,
body.doo-modern .sbox .wp-content p{color:#d4d4d8;font-size:16px;line-height:1.7;max-width:880px}
body.doo-modern .custom_fields{
    display:flex;gap:16px;float:none;max-width:880px;
    padding:12px 0 !important;border-bottom:1px solid var(--doo-line) !important;background:none !important;
}
body.doo-modern .custom_fields b.variante{flex:0 0 200px;float:none;color:var(--doo-muted);font-weight:500;width:auto}
body.doo-modern .custom_fields span.valor{float:none;color:#fff;width:auto}

/* Reparto */
body.doo-modern .persons{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px;float:none;width:100%}
body.doo-modern .persons .person{
    display:flex;align-items:center;gap:12px;float:none;width:auto !important;margin:0 !important;
    padding:10px !important;border-radius:var(--doo-radius);background:var(--doo-surface);border:0 !important;
}
body.doo-modern .persons .person .img{float:none;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;margin:0 !important}
body.doo-modern .persons .person .img img{width:100%;height:100%;object-fit:cover}
body.doo-modern .persons .person .data{float:none;padding:0 !important;width:auto;margin:0 !important}
body.doo-modern .persons .person .data .name a{color:#fff;font-weight:600}
body.doo-modern .persons .person .data .caracter{color:var(--doo-muted)}

/* Player */
body.doo-modern .dooplay_player{
    float:none;width:auto;
    margin:28px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 0 !important;
    border-radius:16px;overflow:hidden;background:var(--doo-surface) !important;
    box-shadow:0 0 0 1px var(--doo-line), 0 30px 60px -30px rgba(0,0,0,.9);
}
/* Dentro de la caja: titulo y fuentes arriba, el video debajo. */
body.doo-modern .dooplay_player{display:flex;flex-direction:column}
body.doo-modern .dooplay_player>h2{order:1}
body.doo-modern .dooplay_player>#playeroptions{order:2}
body.doo-modern .dooplay_player>#playcontainer{order:3}
body.doo-modern .dooplay_player h2{background:transparent !important;border-color:var(--doo-line) !important;padding:18px 24px !important;color:#fff}
body.doo-modern .dooplay_player .play,
body.doo-modern .dooplay_player .play .pframe,
body.doo-modern .dooplay_player .play .preplayer{background:#000 !important}
body.doo-modern .dooplay_player .options{background:transparent !important;padding:0 16px !important}
body.doo-modern .dooplay_player .options ul{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 !important}
body.doo-modern .dooplay_player .options ul li{
    float:none;width:auto !important;display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px !important;border-radius:999px;border:1px solid var(--doo-line) !important;
    background:var(--doo-surface-2) !important;color:#fff;
}
body.doo-modern .dooplay_player .options ul li i{margin-right:0 !important;font-size:15px}
body.doo-modern .dooplay_player .options ul li:hover{border-color:rgba(255,255,255,.3) !important}
body.doo-modern .dooplay_player .options ul li.on,
body.doo-modern .dooplay_player .options ul li.on:hover{background:var(--doo-accent) !important;border-color:var(--doo-accent) !important}
body.doo-modern .dooplay_player .options ul li span.server{margin-left:0;color:rgba(255,255,255,.7)}
body.doo-modern .dooplay_player .options ul li span.flag{float:none;margin-left:2px}

/* Temporadas y episodios */
body.doo-modern #seasons .se-c{margin-bottom:12px;border-radius:var(--doo-radius);overflow:hidden;background:var(--doo-surface);border:1px solid var(--doo-line)}
body.doo-modern #seasons .se-c .se-q{
    background:transparent !important;margin:0;padding-left:84px;min-height:58px;
    transition:background .2s;
}
body.doo-modern #seasons .se-c .se-q:hover{background:rgba(255,255,255,.04) !important}
body.doo-modern #seasons .se-c .se-q span.se-t{
    width:58px;height:58px;padding:0;line-height:58px;font-family:var(--doo-font);font-weight:800;font-size:20px;
    background:var(--doo-accent) !important;color:#fff !important;
}
body.doo-modern #seasons .se-c .se-q span.se-t.se-o{background:var(--doo-accent) !important}
body.doo-modern #seasons .se-c .se-q span.title{padding:16px 0;font-size:16px;font-weight:700;color:#fff}
body.doo-modern #seasons .se-c .se-q span.title i{color:var(--doo-muted)}
body.doo-modern #seasons .se-c .se-a ul.episodios li{
    display:flex;align-items:center;gap:16px;float:none;position:relative;
    padding:10px 16px !important;border:0 !important;border-top:1px solid var(--doo-line) !important;
    transition:background .2s;
}
body.doo-modern #seasons .se-c .se-a ul.episodios li:hover{background:rgba(255,255,255,.04)}
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen{float:none;flex:none;width:150px;margin:0;border-radius:10px;overflow:hidden;aspect-ratio:16/9}
body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen img{width:100%;height:100%;object-fit:cover}
body.doo-modern #seasons .se-c .se-a ul.episodios li .numerando{
    float:none;flex:none;order:-1;width:56px;margin:0;padding:0;border:0 !important;
    color:var(--doo-muted);font-weight:700;font-size:13px;text-align:center;
}
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle{position:static;float:none;flex:1;min-width:0;padding:0 !important;width:auto}
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle a{font-size:15px;font-weight:600;color:#fff;float:none;display:block}
body.doo-modern #seasons .se-c .se-a ul.episodios li .episodiotitle span.date{float:none;display:block;color:var(--doo-muted);padding-top:4px}

/* Relacionados, comentarios, migas */
body.doo-modern #single .content .srelacionados{background:transparent !important}
body.doo-modern #single .content .srelacionados #single_relacionados{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none}
body.doo-modern #single .content .srelacionados article{flex:none;width:clamp(120px, 12vw, 170px) !important;float:none;padding:0 !important;margin:0}
body.doo-modern #single .content .srelacionados article img{border-radius:10px}
body.doo-modern .breadcrumb_bottom,
body.doo-modern .dt-breadcrumb{
    padding:16px max(var(--doo-gutter), calc((100% - var(--doo-max)) / 2 + var(--doo-gutter))) 32px !important;
    color:var(--doo-muted);font-size:13px;float:none;background:none !important;border:0 !important;
}

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */
body.doo-modern footer.main{float:none;margin:40px 0 0 !important;border-top:1px solid var(--doo-line)}
body.doo-modern footer.main .fcmpbox{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}
body.doo-modern footer.main .fbox{max-width:var(--doo-max);padding:0 var(--doo-gutter);color:var(--doo-muted)}
body.doo-modern footer.main .fbox .copy{padding:32px 0;color:var(--doo-muted)}
body.doo-modern footer.main .fbox .copy a{color:#fff}
body.doo-modern footer.main .fbox .top-page a{
    background:var(--doo-surface-2) !important;border-radius:12px;color:#fff !important;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
}
body.doo-modern footer.main .fbox .fmenu ul li{border:0 !important}

/* ------------------------------------------------------------------ *
 * Moviles
 * ------------------------------------------------------------------ */
/* Hasta 1180px la barra de escritorio no cabe con un menu largo: se usa la del movil (☰). */
@media (max-width: 1180px){
    :root{--doo-header:60px}
    body.doo-modern header.main{display:none !important}
    body.doo-modern .fixheadresp header.responsive,
    body.doo-modern .search_responsive{display:block}
}
@media (max-width: 768px){
    body.doo-modern #contenedor{padding-top:var(--doo-header)}
    .doo-modern .mhero{height:min(78vh, 620px)}
    .doo-modern .mhero-slide{background-position:center top}
    .doo-modern .mhero-slide::before{
        background:linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,.75) 42%, rgba(10,10,13,.15) 75%, rgba(10,10,13,.35) 100%);
    }
    .doo-modern .mhero-body{bottom:96px}
    .doo-modern .mhero-text{font-size:14.5px;-webkit-line-clamp:2;margin-bottom:20px}
    .doo-modern .mhero-dots{left:var(--doo-gutter);right:auto;bottom:64px}
    .doo-modern .mbtn{height:44px;padding:0 20px;font-size:14px}
    .doo-modern .mrows.has-hero{margin-top:-40px}
    .doo-modern .mrow{margin-bottom:28px}
    .doo-modern .mrow-nav{display:none}
    .doo-modern .mrow-track{grid-auto-columns:34vw;scroll-snap-type:x proximity}
    .doo-modern .mrow-ep .mrow-track{grid-auto-columns:72vw}
    .doo-modern .mrow-ranked .mrow-track{grid-auto-columns:52vw}
    .doo-modern .mplay{display:none}

    body.doo-modern .sheader{min-height:0;flex-direction:column;align-items:flex-start;padding-top:calc(var(--doo-header) + 140px) !important}
    body.doo-modern .sheader::before{background:linear-gradient(0deg, var(--doo-bg) 0%, rgba(10,10,13,.8) 45%, rgba(10,10,13,.3) 100%)}
    body.doo-modern .sheader .poster{width:120px}
    body.doo-modern .custom_fields{flex-direction:column;gap:2px}
    body.doo-modern .custom_fields b.variante{flex:none}
    body.doo-modern #seasons .se-c .se-a ul.episodios li .imagen{width:112px}
    body.doo-modern #seasons .se-c .se-a ul.episodios li .numerando{display:none}
    body.doo-modern .module .content .items{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));gap:16px 10px}
}
@media (prefers-reduced-motion: reduce){
    .doo-modern *{animation:none !important;transition:none !important}
}