*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif}
a{text-decoration:none}
.login-pedro{min-height:100vh;background:#050505;color:#fff;overflow:hidden}
.login-bg{position:fixed;inset:0;background:url('../img/login-bg-preparados.png') center/cover no-repeat}
.login-shade{position:fixed;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.15),rgba(0,0,0,.55))}
.login-wrap{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:50px}
.login-box{width:min(520px,100%);padding:42px;border-radius:24px;background:rgba(5,8,10,.38);border:1px solid rgba(218,166,78,.3);backdrop-filter:blur(9px);text-align:center}
.cross{width:60px;height:60px;border:2px solid #c69a4d;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;color:#d9a85a;font-size:32px}
.login-box .pre,.login-box .sub,.cite{color:#c69a4d;letter-spacing:.28em;font-weight:900}
.login-box h1{font-size:68px;line-height:.9;margin:10px 0;color:#fff}
.verse{color:#eee;line-height:1.5}.cite{display:block;margin:18px 0}
.login-box input{width:100%;height:54px;margin:8px 0;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.36);color:#fff;padding:0 16px}
.login-box button{width:100%;height:56px;border:0;border-radius:12px;background:linear-gradient(#e2b667,#ba842f);font-weight:950;letter-spacing:.15em}
.login-alert{background:#a83232;padding:12px;border-radius:10px;margin-bottom:12px}

/* Exact reference app */
.app-ref{background:#01070c;color:#fff}
.screen-ref{min-height:100vh;max-width:1536px;margin:0 auto;padding:32px 34px 96px;background:linear-gradient(#03101a,#01070c);overflow:hidden}
.hero-ref{height:242px;overflow:hidden;margin-bottom:14px}
.hero-ref img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.featured-ref{display:grid;grid-template-columns:1.18fr repeat(4,1fr);gap:16px;margin-bottom:25px}
.feat-card{display:block;background:#020b12;border:1px solid rgba(227,169,81,.65);border-radius:15px;overflow:hidden;color:#fff;box-shadow:0 20px 38px rgba(0,0,0,.33)}
.feat-card.first{border-color:#0eeaff;box-shadow:0 0 34px rgba(14,234,255,.14)}
.feat-img{position:relative;height:170px;background:#111;overflow:hidden}
.feat-card:not(.first) .feat-img{height:154px}
.feat-img img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.78) contrast(1.05)}
.feat-img span{position:absolute;top:11px;left:12px;color:#dff7ff;font-weight:950;font-size:12px;background:rgba(2,14,22,.7);padding:6px 9px;border-radius:7px}
.feat-img b{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.78);font-size:30px}
.feat-info{padding:13px 16px 16px}
.feat-info h3{min-height:43px;margin:0 0 7px;text-align:center;text-transform:uppercase;font-size:20px;line-height:1.03;color:#fff}
.feat-info p{text-align:center;margin:0 0 12px;color:#e7edf4}
.feat-progress{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.bar-ref{height:5px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden}.bar-ref i{display:block;height:100%;background:linear-gradient(90deg,#18efff,#d7a24e)}
.modules-head-ref{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.modules-head-ref h2{margin:0;color:#f1d284;font-size:20px}
.modules-head-ref label{width:280px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);display:flex;align-items:center;padding:0 14px}
.modules-head-ref input{width:100%;background:transparent;border:0;outline:0;color:#fff}.modules-head-ref span{color:#f1d284}
.modules-grid-ref{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mod-card{position:relative;min-height:132px;display:grid;grid-template-columns:86px 1fr 28px;gap:10px;align-items:center;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:#04101a;color:#fff;overflow:hidden}
.mod-card:hover{border-color:#13e9ff}.num{position:absolute;left:10px;top:10px;z-index:2;width:38px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid #13e9ff;color:#13e9ff;background:#07131d;font-weight:950;font-size:18px}
.mod-img{width:86px;height:82px;border-radius:10px;overflow:hidden;background:#111}.mod-img img{width:100%;height:100%;object-fit:cover}
.mod-card h3{margin:0;font-size:16px;line-height:1.1;color:#fff;word-break:normal}.mod-card b{width:28px;height:28px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;font-size:24px;color:#fff}
.bottom-ref{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(1220px,82vw);z-index:30;display:flex;justify-content:space-around;gap:8px;padding:12px 26px;border-radius:999px;background:rgba(2,8,13,.86);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)}
.bottom-ref a{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:800}.bottom-ref .active{color:#e0a64d}

/* watch */
.watch-ref{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;max-width:1220px;margin:0 auto}.back-ref{color:#e0a64d;font-weight:900}.watch-kicker{display:block;margin-top:18px;color:#e0a64d;letter-spacing:.12em;font-size:12px;font-weight:900}.watch-main-ref h1{font-size:42px;line-height:1.05;margin:8px 0 18px}
.player-desktop-ref{width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.18)}.player-desktop-ref iframe{width:100%;height:100%;border:0}.player-mobile-ref{display:none}
.desc-ref,.route-ref{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;margin-top:18px}.desc-ref button{background:#e0a64d;color:#07111b;border:0;border-radius:10px;padding:12px 18px;font-weight:950}.desc-ref h3,.route-ref h3{color:#f1d284}.desc-ref p{color:#dbe8f7;line-height:1.6}
.route-ref{margin-top:50px;max-height:calc(100vh - 80px);overflow:auto}.route-ref a{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid transparent;color:#fff;margin-bottom:10px}.route-ref a.active{border-color:#13e9ff;background:rgba(19,233,255,.08)}.route-ref img{width:78px;height:50px;object-fit:cover;border-radius:9px}.route-ref strong{display:block;font-size:13px}.route-ref small{color:#aebed2;font-size:11px}
.video-modal{display:none;position:fixed;inset:0;z-index:9999}.video-modal.open{display:block}.video-modal-backdrop{position:absolute;inset:0;background:#000}.video-modal-dialog{position:absolute;inset:0}.video-modal-dialog iframe{width:100vw;height:100dvh;border:0}.video-modal-close{position:fixed;right:12px;top:12px;z-index:10001;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:1px solid #fff;font-size:28px}

.admin-simple{background:#f6f7fb;color:#111}.admin-simple main{max-width:1100px;margin:30px auto;background:#fff;padding:25px;border-radius:12px}.admin-simple nav{display:flex;gap:16px;margin-bottom:20px}.admin-simple input,.admin-simple textarea{width:100%;padding:12px;margin:6px 0 14px}.admin-simple textarea{min-height:120px}.admin-simple table{width:100%;border-collapse:collapse}.admin-simple td,.admin-simple th{padding:10px;border-bottom:1px solid #eee}.admin-thumb{width:80px;height:50px;object-fit:cover}.admin-cover{width:220px;display:block}.admin-btn,.admin-simple button{background:#111;color:#fff;padding:10px 14px;border-radius:8px;border:0}

@media(max-width:1180px){.featured-ref{grid-template-columns:repeat(3,1fr)}.modules-grid-ref{grid-template-columns:repeat(3,1fr)}.watch-ref{grid-template-columns:1fr}.route-ref{margin-top:0;max-height:none}}
@media(max-width:768px){.screen-ref{padding:16px 14px 94px}.hero-ref{height:205px;border-radius:18px}.featured-ref{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px}.feat-card{min-width:255px}.modules-head-ref{flex-direction:column;align-items:stretch}.modules-head-ref label{width:100%}.modules-grid-ref{grid-template-columns:1fr}.bottom-ref{width:calc(100vw - 24px);justify-content:flex-start;overflow-x:auto;padding:10px 14px}.bottom-ref a{min-width:88px;flex-direction:column;gap:3px;font-size:11px}.watch-main-ref h1{font-size:34px}.player-desktop-ref{display:none}.player-mobile-ref{display:block;position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}.player-mobile-ref img{width:100%;height:100%;object-fit:cover;filter:brightness(.68)}.player-mobile-ref button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:rgba(0,0,0,.45);color:#fff;font-size:30px}.route-ref{display:none}.login-wrap{padding:18px;align-items:flex-end}.login-box{padding:24px}.login-box h1{font-size:45px}}


/* =========================================================
   PREMIUM MODULE CARDS — igual al modelo enviado
   Optimizado para desktop y móvil
========================================================= */

.featured-ref{
    display:grid !important;
    grid-template-columns:1.2fr repeat(4,1fr) !important;
    gap:18px !important;
    align-items:stretch !important;
    margin-top:14px !important;
    margin-bottom:28px !important;
}

.feat-card{
    position:relative !important;
    display:block !important;
    min-height:278px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:#020b12 !important;
    border:1.5px solid rgba(214,158,72,.82) !important;
    box-shadow:0 22px 44px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04) !important;
    color:#fff !important;
}

.feat-card.first{
    border-color:#12ecff !important;
    box-shadow:0 0 34px rgba(18,236,255,.22),0 22px 44px rgba(0,0,0,.42) !important;
}

.feat-card:hover{
    transform:translateY(-3px);
    transition:.25s ease;
}

.feat-img{
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
    width:100% !important;
    background:#07111b !important;
}

.feat-img::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.18) 43%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.94) 100%) !important;
    z-index:1 !important;
}

.feat-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    filter:saturate(1.1) contrast(1.08) brightness(.88) !important;
}

.feat-img span{
    position:absolute !important;
    top:13px !important;
    left:14px !important;
    z-index:3 !important;
    color:#e9fbff !important;
    background:rgba(3,18,31,.64) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:8px !important;
    padding:6px 10px !important;
    font-size:12px !important;
    font-weight:950 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
}

.feat-img b{
    position:absolute !important;
    right:28px !important;
    top:37% !important;
    z-index:4 !important;
    transform:translateY(-50%) !important;
    width:76px !important;
    height:76px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    border:2px solid rgba(255,255,255,.82) !important;
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
    font-size:31px !important;
    padding-left:4px !important;
    backdrop-filter:blur(4px) !important;
}

.feat-info{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:5 !important;
    padding:0 18px 18px !important;
}

.feat-info h3{
    min-height:0 !important;
    margin:0 0 6px !important;
    color:#fff !important;
    text-align:center !important;
    text-transform:uppercase !important;
    font-size:clamp(18px,1.5vw,24px) !important;
    line-height:1.02 !important;
    font-weight:950 !important;
    text-shadow:0 3px 10px rgba(0,0,0,.75) !important;
}

.feat-info p{
    margin:0 0 16px !important;
    text-align:center !important;
    color:#fff !important;
    font-size:16px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.8) !important;
}

.feat-progress{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:800 !important;
    margin-bottom:8px !important;
    text-shadow:0 2px 6px rgba(0,0,0,.9) !important;
}

.bar-ref{
    height:5px !important;
    background:rgba(255,255,255,.25) !important;
    border-radius:999px !important;
    overflow:hidden !important;
}

.bar-ref i{
    display:block !important;
    height:100% !important;
    background:linear-gradient(90deg,#14ecff,#d6a04d) !important;
    border-radius:999px !important;
}

/* Cards inferiores más cercanas al modelo */
.modules-grid-ref{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:14px !important;
}

.mod-card{
    min-height:136px !important;
    display:grid !important;
    grid-template-columns:92px 1fr 34px !important;
    align-items:center !important;
    padding:13px !important;
    border-radius:15px !important;
    border:1px solid rgba(255,255,255,.24) !important;
    background:rgba(4,16,26,.78) !important;
    color:#fff !important;
    overflow:hidden !important;
}

.mod-img{
    width:92px !important;
    height:82px !important;
    border-radius:10px !important;
    overflow:hidden !important;
}

.mod-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}

.mod-card h3{
    color:#fff !important;
    font-weight:900 !important;
    font-size:16px !important;
    line-height:1.12 !important;
    margin:0 !important;
    text-shadow:0 2px 7px rgba(0,0,0,.75) !important;
}

.mod-card b{
    width:32px !important;
    height:32px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    border:1.5px solid rgba(255,255,255,.85) !important;
    color:#fff !important;
    font-size:25px !important;
}

/* Responsive premium */
@media(max-width:1200px){
    .featured-ref{
        grid-template-columns:repeat(3,minmax(240px,1fr)) !important;
    }

    .modules-grid-ref{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:768px){
    .featured-ref{
        display:flex !important;
        gap:14px !important;
        overflow-x:auto !important;
        scroll-snap-type:x mandatory !important;
        padding:0 4px 12px !important;
        margin-top:12px !important;
        margin-bottom:22px !important;
    }

    .feat-card{
        min-width:82vw !important;
        max-width:82vw !important;
        min-height:305px !important;
        scroll-snap-align:start !important;
        border-radius:18px !important;
    }

    .feat-card.first{
        min-width:88vw !important;
        max-width:88vw !important;
    }

    .feat-img b{
        width:68px !important;
        height:68px !important;
        right:24px !important;
        top:36% !important;
        font-size:28px !important;
    }

    .feat-info{
        padding:0 16px 18px !important;
    }

    .feat-info h3{
        font-size:23px !important;
    }

    .modules-grid-ref{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .mod-card{
        min-height:124px !important;
        grid-template-columns:100px 1fr 34px !important;
        padding:12px !important;
    }

    .mod-img{
        width:100px !important;
        height:76px !important;
    }

    .mod-card h3{
        font-size:17px !important;
        line-height:1.15 !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }
}

@media(max-width:420px){
    .feat-card{
        min-width:86vw !important;
        max-width:86vw !important;
        min-height:292px !important;
    }

    .feat-card.first{
        min-width:90vw !important;
        max-width:90vw !important;
    }

    .feat-info h3{
        font-size:21px !important;
    }

    .mod-card{
        grid-template-columns:92px 1fr 32px !important;
    }

    .mod-img{
        width:92px !important;
        height:72px !important;
    }

    .mod-card h3{
        font-size:16px !important;
    }
}


/* =========================================================
   TARJETAS INFERIORES HORIZONTALES COMO REFERENCIA
   Soporta imagen inferior opcional: modules.cover_image_bottom
========================================================= */
.modules-grid-ref{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch !important;
}

.mod-card{
    position:relative !important;
    min-height:122px !important;
    height:122px !important;
    display:block !important;
    padding:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    border:1.3px solid rgba(255,255,255,.26) !important;
    background:#06121d !important;
    box-shadow:0 14px 30px rgba(0,0,0,.28) !important;
}

.mod-card::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        linear-gradient(90deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.40) 45%,rgba(0,0,0,.70) 100%),
        linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28)) !important;
    z-index:1 !important;
    pointer-events:none !important;
}

.mod-card:hover{
    border-color:#13e9ff !important;
    transform:translateY(-2px) !important;
    transition:.22s ease !important;
}

.mod-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
    overflow:hidden !important;
}

.mod-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
    filter:saturate(1.08) contrast(1.05) brightness(.86) !important;
}

.num{
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    z-index:3 !important;
    width:42px !important;
    height:34px !important;
    border-radius:8px !important;
    display:grid !important;
    place-items:center !important;
    color:#13e9ff !important;
    background:rgba(3,17,26,.78) !important;
    border:1px solid #13e9ff !important;
    font-weight:950 !important;
    font-size:20px !important;
}

.mod-card h3{
    position:absolute !important;
    left:14px !important;
    right:48px !important;
    bottom:18px !important;
    z-index:3 !important;
    margin:0 !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1.16 !important;
    font-weight:950 !important;
    text-shadow:0 3px 10px rgba(0,0,0,.85) !important;
    max-width:72% !important;
}

.mod-card b{
    position:absolute !important;
    right:12px !important;
    bottom:16px !important;
    z-index:4 !important;
    width:32px !important;
    height:32px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    color:#fff !important;
    border:1.5px solid rgba(255,255,255,.86) !important;
    background:rgba(0,0,0,.25) !important;
    font-size:25px !important;
    line-height:1 !important;
}

/* Desktop ancho: más similar a referencia */
@media(min-width:1201px){
    .modules-grid-ref{
        grid-template-columns:repeat(5,1fr) !important;
    }
}

/* Tablet */
@media(max-width:1200px){
    .modules-grid-ref{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

/* Móvil */
@media(max-width:768px){
    .modules-grid-ref{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .mod-card{
        height:128px !important;
        min-height:128px !important;
        border-radius:15px !important;
    }

    .mod-card h3{
        font-size:17px !important;
        left:16px !important;
        bottom:18px !important;
        max-width:75% !important;
    }
}


/* =========================================================
   AJUSTE FINAL: 4 TARJETAS POR FILA
========================================================= */
.modules-grid-ref{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
}

.mod-card{
    height:132px !important;
    min-height:132px !important;
}

/* Pantallas medianas */
@media(max-width:1200px){
    .modules-grid-ref{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

/* Tablet */
@media(max-width:900px){
    .modules-grid-ref{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* Móvil */
@media(max-width:640px){
    .modules-grid-ref{
        grid-template-columns:1fr !important;
    }

    .mod-card{
        height:128px !important;
        min-height:128px !important;
    }
}


/* =========================================================
   RECURSOS PDF PRIVADOS - CARDS + SECURE READER
========================================================= */
.resources-page{
    max-width:1220px;
    margin:0 auto;
}
.resources-hero{
    min-height:220px;
    border-radius:22px;
    padding:42px;
    background:
        linear-gradient(90deg,rgba(2,8,13,.92),rgba(2,8,13,.40)),
        url('../img/reference-dashboard.jpg') center/cover;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.resources-hero span{
    color:#e0a64d;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:900;
}
.resources-hero h1{
    max-width:760px;
    font-size:42px;
    line-height:1.02;
    margin:12px 0;
}
.resources-hero p{
    color:#dbe8f7;
}
.resources-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:24px;
}
.pdf-card{
    position:relative;
    min-height:300px;
    border-radius:18px;
    overflow:hidden;
    background:#06121d;
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.pdf-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18) 42%,rgba(0,0,0,.88));
    z-index:1;
}
.pdf-num{
    position:absolute;
    z-index:3;
    top:12px;
    left:12px;
    border:1px solid #13e9ff;
    color:#13e9ff;
    background:rgba(0,14,22,.78);
    width:42px;
    height:34px;
    border-radius:8px;
    display:grid;
    place-items:center;
    font-weight:950;
}
.pdf-cover{
    position:absolute;
    inset:0;
}
.pdf-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.pdf-fallback{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#0b1b2a,#020910);
    color:#e0a64d;
    font-size:44px;
    font-weight:950;
}
.pdf-info{
    position:absolute;
    z-index:3;
    left:18px;
    right:18px;
    bottom:18px;
}
.pdf-info h3{
    margin:0 0 8px;
    font-size:22px;
    line-height:1.05;
    text-transform:uppercase;
}
.pdf-info p{
    color:#dbe8f7;
    font-size:13px;
    line-height:1.35;
}
.pdf-info b{
    display:inline-flex;
    margin-top:10px;
    padding:10px 14px;
    border-radius:999px;
    color:#07111b;
    background:#e0a64d;
}

/* Reader */
.pdf-reader-page{
    max-width:1180px;
    margin:0 auto;
}
.pdf-reader-head{
    display:flex;
    gap:20px;
    align-items:center;
    margin-bottom:18px;
}
.pdf-reader-head a{
    color:#e0a64d;
    font-weight:900;
}
.pdf-reader-head span{
    color:#e0a64d;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
    font-weight:900;
}
.pdf-reader-head h1{
    margin:5px 0 0;
    font-size:34px;
}
.pdf-toolbar{
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:rgba(2,8,13,.85);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    backdrop-filter:blur(10px);
    margin-bottom:16px;
}
.pdf-toolbar button{
    border:0;
    border-radius:10px;
    padding:10px 14px;
    font-weight:900;
    background:#e0a64d;
    color:#07111b;
}
.magazine-reader{
    position:relative;
    min-height:70vh;
    padding:20px;
    border-radius:20px;
    background:#111;
    border:1px solid rgba(255,255,255,.14);
    overflow:auto;
    user-select:none;
    -webkit-user-select:none;
}
.magazine-pages{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:start;
}
.magazine-pages canvas{
    width:100%;
    height:auto;
    border-radius:8px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.reader-watermark{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:999;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.12);
    font-size:56px;
    font-weight:950;
    transform:rotate(-24deg);
    text-transform:uppercase;
    mix-blend-mode:difference;
}
body.modal-open,
body.pdf-secure{
    user-select:none;
    -webkit-user-select:none;
}

/* Menú inferior solo 4 items */
.bottom-ref{
    width:min(760px,82vw)!important;
}

/* Mobile */
@media(max-width:900px){
    .resources-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:640px){
    .resources-hero{
        padding:28px 20px;
    }
    .resources-hero h1{
        font-size:32px;
    }
    .resources-grid{
        grid-template-columns:1fr;
    }
    .pdf-card{
        min-height:260px;
    }
    .magazine-pages{
        grid-template-columns:1fr;
        gap:14px;
    }
    .pdf-toolbar{
        overflow-x:auto;
        justify-content:flex-start;
    }
    .reader-watermark{
        font-size:30px;
    }
}


/* Admin fixes recursos */
.admin-error{
    padding:14px 16px;
    border-radius:10px;
    background:#ffe2e2;
    color:#8b0000;
    border:1px solid #ff9c9c;
    margin:14px 0;
    font-weight:800;
}
.admin-empty,.resources-empty,.admin-help{
    padding:18px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    color:inherit;
    margin-top:18px;
}
.admin-muted{
    color:#667085;
}
.admin-simple code{
    background:#f1f5f9;
    padding:2px 6px;
    border-radius:5px;
}


.admin-success{
    padding:14px 16px;
    border-radius:10px;
    background:#dcfce7;
    color:#14532d;
    border:1px solid #86efac;
    margin:14px 0;
    font-weight:800;
}


/* =========================================================
   FIX RECURSOS PDF: CARDS 3/2 + PORTADA COMPLETA + READER PRO
========================================================= */

/* Recursos: 3 por fila desktop */
.resources-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
    align-items:stretch !important;
}

/* Card PDF con portada completa sin cortar */
.pdf-card{
    min-height:auto !important;
    aspect-ratio:3/4.25 !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#06121d !important;
}

.pdf-card::after{
    background:
        linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.72) 100%) !important;
}

.pdf-cover{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#050b10 !important;
}

.pdf-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#050b10 !important;
}

.pdf-info{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
}

.pdf-info h3{
    font-size:clamp(17px,1.7vw,24px) !important;
    line-height:1.05 !important;
    text-shadow:0 3px 12px rgba(0,0,0,.9) !important;
}

.pdf-info p{
    display:none !important;
}

.pdf-info b{
    padding:10px 15px !important;
    border-radius:999px !important;
}

/* Móvil: 2 por fila */
@media(max-width:640px){
    .resources-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .pdf-card{
        aspect-ratio:3/4.35 !important;
        border-radius:14px !important;
    }

    .pdf-num{
        width:34px !important;
        height:28px !important;
        font-size:14px !important;
        top:9px !important;
        left:9px !important;
    }

    .pdf-info{
        left:10px !important;
        right:10px !important;
        bottom:10px !important;
    }

    .pdf-info h3{
        font-size:13px !important;
        line-height:1.05 !important;
        margin-bottom:8px !important;
    }

    .pdf-info b{
        font-size:12px !important;
        padding:8px 10px !important;
    }
}

/* Reader layout: más grande, controles compactos */
.pdf-reader-page{
    max-width:1280px !important;
    margin:0 auto !important;
}

.pdf-reader-head{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:16px !important;
    align-items:center !important;
    margin-bottom:12px !important;
}

.pdf-reader-head a{
    font-size:14px !important;
    white-space:nowrap !important;
}

.pdf-reader-head h1{
    font-size:clamp(26px,3.2vw,42px) !important;
    line-height:1.06 !important;
    margin:4px 0 0 !important;
}

/* Toolbar compacta */
.compact-reader-toolbar,
.pdf-toolbar{
    position:sticky !important;
    top:8px !important;
    z-index:50 !important;
    width:max-content !important;
    max-width:calc(100vw - 28px) !important;
    margin:0 auto 12px !important;
    padding:8px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    background:rgba(2,8,13,.72) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    backdrop-filter:blur(12px) !important;
}

.reader-nav-group,
.reader-zoom-group{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
}

.pdf-toolbar strong{
    min-width:64px !important;
    text-align:center !important;
    color:#fff !important;
    font-size:13px !important;
}

.pdf-toolbar button{
    width:38px !important;
    height:34px !important;
    padding:0 !important;
    border-radius:10px !important;
    display:grid !important;
    place-items:center !important;
    font-size:15px !important;
}

/* Reader más grande */
.magazine-reader{
    min-height:calc(100vh - 172px) !important;
    padding:14px !important;
    border-radius:18px !important;
    background:#070b0f !important;
    overflow:auto !important;
}

.magazine-pages{
    max-width:1220px !important;
    margin:0 auto !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
}

.magazine-pages canvas{
    width:100% !important;
    border-radius:6px !important;
}

/* Móvil lector vertical */
@media(max-width:700px){
    .pdf-reader-head{
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .pdf-reader-head h1{
        font-size:26px !important;
    }

    .compact-reader-toolbar,
    .pdf-toolbar{
        top:6px !important;
        width:100% !important;
        justify-content:space-between !important;
        padding:7px !important;
        margin-bottom:10px !important;
    }

    .pdf-toolbar button{
        width:34px !important;
        height:32px !important;
    }

    .magazine-reader{
        min-height:calc(100vh - 158px) !important;
        padding:8px !important;
        border-radius:12px !important;
    }

    .magazine-pages{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .reader-watermark{
        font-size:26px !important;
    }
}


/* =========================================================
   RECURSOS PDF LIMPIO + LECTOR COMPACTO FINAL
========================================================= */

/* Biblioteca PDF: 3 por fila, portada completa, sin texto visible */
.resources-grid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:18px !important;
    align-items:start !important;
}

.pdf-card{
    position:relative !important;
    width:100% !important;
    aspect-ratio:3/4.35 !important;
    min-height:0 !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#050b10 !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
}

.pdf-card::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    background:rgba(0,0,0,0) !important;
    transition:.22s ease !important;
    pointer-events:none !important;
}

.pdf-card:hover::after{
    background:rgba(0,0,0,.15) !important;
}

.pdf-cover{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#050b10 !important;
}

.pdf-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#050b10 !important;
    display:block !important;
}

.pdf-num{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    z-index:4 !important;
    width:42px !important;
    height:34px !important;
    border-radius:8px !important;
    display:grid !important;
    place-items:center !important;
    color:#13e9ff !important;
    border:1px solid #13e9ff !important;
    background:rgba(0,14,22,.78) !important;
    font-weight:950 !important;
}

.pdf-info{
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    pointer-events:none !important;
}

.pdf-info h3,
.pdf-info p{
    display:none !important;
}

.pdf-info b{
    opacity:0 !important;
    transform:translateY(8px) !important;
    transition:.22s ease !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 18px !important;
    border-radius:999px !important;
    background:#e0a64d !important;
    color:#07111b !important;
    font-weight:950 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.35) !important;
}

.pdf-card:hover .pdf-info b{
    opacity:1 !important;
    transform:translateY(0) !important;
}

/* Móvil: 2 por fila, tap abre directo */
@media(max-width:640px){
    .resources-grid{
        grid-template-columns:repeat(2, 1fr) !important;
        gap:12px !important;
    }

    .pdf-card{
        border-radius:14px !important;
        aspect-ratio:3/4.4 !important;
    }

    .pdf-num{
        width:34px !important;
        height:28px !important;
        font-size:14px !important;
        top:9px !important;
        left:9px !important;
    }

    .pdf-info b{
        display:none !important;
    }

    .pdf-card:hover::after{
        background:rgba(0,0,0,0) !important;
    }
}

/* Lector: controles compactos sin ocupar espacio */
.pdf-reader-page{
    max-width:1360px !important;
    margin:0 auto !important;
}

.pdf-reader-head{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:14px !important;
    align-items:center !important;
    margin:0 0 8px !important;
}

.pdf-reader-head a{
    font-size:14px !important;
    color:#e0a64d !important;
    font-weight:900 !important;
    white-space:nowrap !important;
}

.pdf-reader-head span{
    font-size:11px !important;
}

.pdf-reader-head h1{
    margin:2px 0 0 !important;
    font-size:clamp(24px,2.8vw,36px) !important;
    line-height:1.04 !important;
}

.reader-toolbar-mini,
.pdf-toolbar{
    position:sticky !important;
    top:6px !important;
    z-index:50 !important;
    width:max-content !important;
    max-width:calc(100vw - 24px) !important;
    margin:0 auto 8px !important;
    padding:6px !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    border-radius:14px !important;
    background:rgba(2,8,13,.76) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    backdrop-filter:blur(12px) !important;
}

.pdf-toolbar strong{
    min-width:58px !important;
    text-align:center !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1 !important;
}

.pdf-toolbar button{
    width:36px !important;
    height:32px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:10px !important;
    display:grid !important;
    place-items:center !important;
    background:#e0a64d !important;
    color:#07111b !important;
    font-size:15px !important;
    font-weight:950 !important;
}

/* Área de lectura más grande */
.magazine-reader{
    min-height:calc(100vh - 118px) !important;
    padding:10px !important;
    border-radius:16px !important;
    background:#070b0f !important;
    border:1px solid rgba(255,255,255,.14) !important;
    overflow:auto !important;
}

.magazine-pages{
    max-width:1320px !important;
    width:100% !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    align-items:start !important;
}

.magazine-pages canvas{
    width:100% !important;
    height:auto !important;
    border-radius:6px !important;
    background:#fff !important;
    box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
}

/* Móvil lector vertical compacto */
@media(max-width:700px){
    .pdf-reader-head{
        grid-template-columns:1fr !important;
        gap:6px !important;
        margin-bottom:6px !important;
    }

    .pdf-reader-head h1{
        font-size:24px !important;
    }

    .reader-toolbar-mini,
    .pdf-toolbar{
        width:100% !important;
        justify-content:center !important;
        gap:6px !important;
        padding:6px !important;
        margin-bottom:7px !important;
    }

    .pdf-toolbar button{
        width:34px !important;
        height:31px !important;
    }

    .magazine-reader{
        min-height:calc(100vh - 130px) !important;
        padding:7px !important;
        border-radius:12px !important;
    }

    .magazine-pages{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .reader-watermark{
        font-size:26px !important;
    }
}


/* =========================================================
   AJUSTE FINAL PDF:
   - Cards al 33% real en PC
   - Toolbar fixed abajo sobre libro en PC
   - En móvil toolbar normal y no fixed
========================================================= */

/* Recursos: 3 columnas reales, más pequeñas y proporcionadas */
.resources-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
    max-width:980px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.pdf-card{
    width:100% !important;
    max-width:320px !important;
    justify-self:center !important;
    aspect-ratio:3/4.35 !important;
}

/* Lector PC: usar más pantalla y controles flotantes abajo */
@media(min-width:701px){
    .pdf-reader-page{
        max-width:1320px !important;
        padding-bottom:70px !important;
    }

    .pdf-reader-head{
        margin-bottom:8px !important;
    }

    .pdf-reader-head h1{
        font-size:32px !important;
    }

    .reader-toolbar-mini,
    .pdf-toolbar{
        position:fixed !important;
        left:50% !important;
        bottom:20px !important;
        top:auto !important;
        transform:translateX(-50%) !important;
        z-index:9999 !important;
        width:auto !important;
        min-width:245px !important;
        margin:0 !important;
        padding:7px 9px !important;
        border-radius:999px !important;
        background:rgba(2,8,13,.54) !important;
        border:1px solid rgba(255,255,255,.14) !important;
        backdrop-filter:blur(14px) !important;
        box-shadow:0 14px 38px rgba(0,0,0,.28) !important;
        opacity:.78 !important;
        transition:opacity .18s ease, background .18s ease !important;
    }

    .reader-toolbar-mini:hover,
    .pdf-toolbar:hover{
        opacity:1 !important;
        background:rgba(2,8,13,.82) !important;
    }

    .pdf-toolbar button{
        width:34px !important;
        height:31px !important;
        border-radius:50% !important;
        font-size:14px !important;
    }

    .pdf-toolbar strong{
        min-width:58px !important;
        font-size:13px !important;
    }

    .magazine-reader{
        min-height:calc(100vh - 112px) !important;
        padding:8px !important;
        border-radius:16px !important;
    }

    .magazine-pages{
        max-width:1280px !important;
        gap:10px !important;
    }
}

/* Tablet */
@media(max-width:900px){
    .resources-grid{
        max-width:720px !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .pdf-card{
        max-width:300px !important;
    }
}

/* Móvil: 2 por fila y controles arriba normales */
@media(max-width:640px){
    .resources-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        max-width:100% !important;
    }

    .pdf-card{
        max-width:none !important;
        width:100% !important;
    }
}

@media(max-width:700px){
    .reader-toolbar-mini,
    .pdf-toolbar{
        position:sticky !important;
        top:6px !important;
        bottom:auto !important;
        left:auto !important;
        transform:none !important;
        opacity:1 !important;
        border-radius:14px !important;
        width:100% !important;
        min-width:0 !important;
        background:rgba(2,8,13,.82) !important;
        margin:0 0 8px !important;
    }
}


/* =========================================================
   FIX MOBILE TITLES + PLAYER + BANNERS RESPONSIVE
========================================================= */

/* Banner PC/Móvil personalizado */
.hero-ref{
    background:#02080d !important;
}
.hero-ref img{
    content:url('../img/banner-desktop.jpg');
    object-fit:cover !important;
    object-position:center top !important;
}

.resources-hero{
    background:
        linear-gradient(90deg,rgba(2,8,13,.88),rgba(2,8,13,.35)),
        url('../img/banner-desktop.jpg') center/cover !important;
}

/* Título móvil más pequeño y sin invadir reproductor */
@media(max-width:640px){
    .watch-kicker{
        font-size:11px !important;
        letter-spacing:.08em !important;
        line-height:1.35 !important;
        display:block !important;
        max-width:100% !important;
    }

    .watch-main-ref h1,
    .faith-watch-title h1,
    .academy-player-head h1{
        font-size:34px !important;
        line-height:1.08 !important;
        margin:8px 0 18px !important;
        max-width:100% !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
    }

    .player-mobile-ref,
    .mobile-video-poster,
    .video-poster-card{
        margin-top:4px !important;
        width:100% !important;
        aspect-ratio:16/9 !important;
        display:block !important;
        cursor:pointer !important;
    }

    .player-mobile-ref img,
    .mobile-video-poster img,
    .video-poster-card img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    .player-mobile-ref button,
    .video-play-btn{
        z-index:5 !important;
        pointer-events:auto !important;
    }
}

@media(max-width:430px){
    .watch-main-ref h1,
    .faith-watch-title h1,
    .academy-player-head h1{
        font-size:29px !important;
        line-height:1.08 !important;
    }

    .watch-kicker{
        font-size:10px !important;
        letter-spacing:.06em !important;
    }
}

/* Banner móvil específico */
@media(max-width:768px){
    .hero-ref{
        height:280px !important;
        border-radius:18px !important;
        overflow:hidden !important;
    }

    .hero-ref img{
        content:url('../img/banner-mobile.jpg');
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
    }

    .resources-hero{
        min-height:260px !important;
        background:
          linear-gradient(180deg,rgba(2,8,13,.46),rgba(2,8,13,.88)),
          url('../img/banner-mobile.jpg') center/cover !important;
    }
}

/* Modal reproductor móvil full screen */
.video-modal,
#videoModal{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
    display:none !important;
}

.video-modal.open,
.video-modal.is-open,
#videoModal.open,
#videoModal.is-open{
    display:block !important;
}

.video-modal-backdrop{
    position:absolute !important;
    inset:0 !important;
    background:#000 !important;
}

.video-modal-dialog{
    position:absolute !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    background:#000 !important;
}

.video-modal-dialog iframe,
.video-modal-frame iframe{
    width:100vw !important;
    height:100dvh !important;
    border:0 !important;
    display:block !important;
    background:#000 !important;
}

.video-modal-close{
    position:fixed !important;
    top:12px !important;
    right:12px !important;
    z-index:1000001 !important;
}


/* =========================================================
   MOBILE VIDEO POSTER VERSION C
   4:3 en móvil + object-position top para no cortar cabezas
========================================================= */
@media(max-width:768px){

    .player-mobile-ref,
    .mobile-video-poster,
    .video-poster-card{
        aspect-ratio:4/3 !important;
        width:100% !important;
        min-height:auto !important;
        height:auto !important;
        border-radius:18px !important;
        overflow:hidden !important;
        background:#000 !important;
    }

    .player-mobile-ref img,
    .mobile-video-poster img,
    .video-poster-card img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center top !important;
        display:block !important;
    }

    .player-mobile-ref button,
    .video-play-btn{
        width:74px !important;
        height:74px !important;
        border-radius:50% !important;
        left:50% !important;
        top:50% !important;
        transform:translate(-50%,-50%) !important;
        z-index:8 !important;
    }
}

@media(max-width:430px){
    .player-mobile-ref,
    .mobile-video-poster,
    .video-poster-card{
        aspect-ratio:4/3 !important;
        border-radius:16px !important;
    }

    .player-mobile-ref button,
    .video-play-btn{
        width:68px !important;
        height:68px !important;
        font-size:28px !important;
    }
}


/* =========================================================
   FIX FIRST CARD MÓVIL - CORTE SUPERIOR 5PX
========================================================= */
@media(max-width:768px){

    .featured-ref{
        padding-top:8px !important;
    }

    .feat-card.first,
    .featured-ref .feat-card:first-child{
        margin-top:6px !important;
        overflow:visible !important;
    }

    .feat-card.first .feat-img,
    .featured-ref .feat-card:first-child .feat-img{
        top:0 !important;
        transform:translateY(0) !important;
        border-radius:18px !important;
        overflow:hidden !important;
    }

    .feat-card.first::before,
    .featured-ref .feat-card:first-child::before{
        content:"" !important;
        position:absolute !important;
        inset:-6px 0 auto 0 !important;
        height:6px !important;
        background:transparent !important;
        pointer-events:none !important;
    }
}