*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    background:#f3fafc;
    color:#244653;

    font-family:"Century Gothic", CenturyGothic, AppleGothic, Arial, sans-serif;
    font-size:16px;
    line-height:1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote{
    font-family:"Century Gothic", CenturyGothic, AppleGothic, Arial, sans-serif;
    color:#17323b;
}

a{
    text-decoration:none;
    color:inherit;
}

.wrap{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}


/* ========================================
   HEADER ORIGINAL
======================================== */

.site-header{
    height:100px;
    background:#fff;
    border-bottom:1px solid #dce9ed;
    display:flex;
    align-items:center;

    position:sticky;
    top:0;

    z-index:1000;

    transition:
        box-shadow .25s ease,
        background .25s ease;
}

.site-header{
    box-shadow:0 4px 18px rgba(23,52,61,.06);
}

.header{
    display:flex;
    align-items:center;
    gap:30px;
}

.logo{
    font-family:Georgia,serif;
    line-height:1;
}

.logo b,
.logo small{
    display:block;
}

.logo small{
    font:7px Arial;
    text-align:center;
    margin-top:4px;
}

.header nav{
    margin-left:auto;
    display:flex;
    gap:25px;
}

.header nav a{
    font-size:12px;
}

.actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.cart{
    position:relative;
}

.cart span{
    background:#176b7e;
    color:#fff;
    border-radius:20px;
    padding:3px 6px;
}


/* ========================================
   BOTONES
======================================== */

.btn{
    display:inline-block;
    border:0;
    border-radius:28px;
    padding:12px 22px;
    background:#176b7e;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.btn.ghost{
    background:transparent;
    border:1px solid #176b7e;
    color:#176b7e;
}

.btn.small{
    padding:9px 15px;
    font-size:11px;
}


/* ========================================
   HOME ORIGINAL
======================================== */

.hero{
    min-height:620px;
    background:
        linear-gradient(
            90deg,
            rgba(35,126,146,.42),
            rgba(255,255,255,.12)
        ),
        linear-gradient(
            #d7eef2,
            #a7d1d9
        );
    display:flex;
    align-items:center;
}

.hero h1{
    font-size:54px;
    font-weight:400;
    margin:15px 0;
}

.hero p{
    max-width:520px;
    line-height:1.8;
}

.section{
    padding:80px 0;
}

.section h2{
    font-size:36px;
    font-weight:400;
}

.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
}

.photo{
    min-height:420px;
    background:#d4e8ec;
    border-radius:12px;
    display:grid;
    place-items:center;
}

.stats,
.cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.stats b,
.cards article{
    background:#fff;
    border:1px solid #dce9ed;
    border-radius:10px;
    padding:20px;
}

.stats small{
    display:block;
    margin-top:7px;
    font-weight:400;
}

.cards{
    grid-template-columns:repeat(4,1fr);
}

.alt{
    background:#eef7f9;
}

.dark{
    background:#17343d;
    color:#d7e8ec;
    text-align:center;
}

.dark h2{
    color:#fff;
}

.contact{
    background:#e4f1f4;
    padding:25px;
    border-radius:12px;
}

.contact input,
.contact textarea,
.auth input{
    width:100%;
    padding:13px;
    border:1px solid #cbdde2;
    border-radius:8px;
    margin:6px 0 14px;
}

.contact textarea{
    height:110px;
}


/* ========================================
   CATÁLOGO
======================================== */

.catalog-hero{
    text-align:center;
    padding:65px 20px;
    background:#25839a;
    color:#fff;
}

.catalog-hero h1{
    color:#fff;
    font-size:42px;
}

.filters{
    text-align:center;
    margin-bottom:30px;
}

.filters button{
    border:1px solid #cbdde2;
    background:#fff;
    padding:10px 22px;
    border-radius:25px;
    margin:4px;
}

.course-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.course{
    background:#fff;
    border:1px solid #dce9ed;
    border-radius:14px;
    overflow:hidden;
}

.course-img{
    height:210px;
    background:#b7d4da;
    display:grid;
    place-items:center;
}

.course-body{
    padding:20px;
}

.course-body h3{
    font-size:20px;
}

.course-body p{
    min-height:42px;
}

.meta{
    font-size:11px;
    color:#68838c;
}

.price{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    border-top:1px solid #e2ecef;
    padding-top:15px;
}

.price .btn{
    margin-left:auto;
}

.floating-cart{
    position:fixed;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    padding:12px 18px;
    border-radius:15px;
    box-shadow:0 10px 35px #0002;
}


/* ========================================
   LOGIN / REGISTRO
======================================== */

.auth{
    min-height:calc(100vh - 72px);
    display:grid;
    grid-template-columns:1fr 1fr;
}

.auth-photo{
    background:
        linear-gradient(
            #acd5dd,
            #26758a
        );
    position:relative;
}

.auth-photo blockquote{
    position:absolute;
    bottom:55px;
    left:50px;
    color:#fff;
    font-size:24px;
    font-style:italic;
}

.auth-photo small{
    display:block;
    font:12px Arial;
    margin-top:15px;
}

.auth-form{
    max-width:470px;
    width:100%;
    margin:auto;
    padding:50px;
}

.auth-form h1{
    font-size:36px;
}

.auth-form label{
    display:block;
    text-transform:uppercase;
    font-size:10px;
}

.auth-form .btn{
    width:100%;
}

.notice{
    background:#e5f2f5;
    border:1px solid #bcd9df;
    padding:14px;
    border-radius:9px;
    margin-bottom:20px;
}

.alert{
    background:#fff0f0;
    color:#9d3232;
    padding:12px;
    border-radius:8px;
    margin:10px 0;
}

/* ========================================================
   LOGIN - VIDEO LATERAL
======================================================== */

.auth-video-side{
    position:relative;

    overflow:hidden;

    background:#176b7e;
}


/* VIDEO */

.auth-background-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    /* Priorizamos la parte inferior del video */
    object-position:center bottom;

    z-index:0;

    pointer-events:none;
}


/* OVERLAY */

.auth-video-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:linear-gradient(
        180deg,
        rgba(14,77,91,.25) 0%,
        rgba(12,71,84,.38) 45%,
        rgba(10,59,71,.78) 100%
    );
}


/* FRASE */

.auth-video-quote{
    position:absolute;

    left:50%;
    bottom:5%;

    width:85%;
    max-width:720px;

    z-index:2;

    margin:0;

    transform:translateX(-50%);

    text-align:center;

    color:#fff;

    font-family:"Century Gothic", Arial, sans-serif;

    font-size:25px;
    line-height:1.5;
    font-weight:400;
    font-style:italic;

    text-shadow:
        0 2px 15px rgba(0,0,0,.30);
}

.auth-video-quote small{
    display:block;

    margin-top:16px;

    text-align:center;

    color:#fff;

    font-family:"Century Gothic", Arial, sans-serif;

    font-size:12px;
    font-weight:600;
    font-style:normal;
}


/* ========================================
   MI ÁREA
======================================== */

.account{
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:700px;
}

.account aside{
    background:#176072;
    color:#fff;
    padding:25px 18px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.account aside small{
    opacity:.7;
}

.account aside a{
    padding:13px;
    border-radius:8px;
}

.account aside a:hover{
    background:#ffffff20;
}

.avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#2990aa;
    display:grid;
    place-items:center;
    font-weight:bold;
}

.account main{
    padding:45px;
}


/* ========================================
   CHECKOUT
======================================== */

.checkout{
    max-width:700px;
    background:#fff;
    padding:25px;
    border-radius:12px;
}

.checkout>div{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
}


/* ========================================================
   FOOTER
======================================================== */

.site-footer{
    padding:55px 0 0;

    background:#17343d;

    color:#d4e4e8;
}

.site-footer .foot{
    display:grid;

    grid-template-columns:1.5fr .8fr 1fr;

    gap:80px;

    align-items:start;
}


/* LOGO */

.footer-logo{
    display:inline-block;

    margin-bottom:20px;
}

.footer-logo img{
    display:block;

    width:100%;
    max-width:250px;
    height:auto;

    object-fit:contain;
}

.footer-brand p{
    max-width:430px;

    margin:0;

    color:#c7dade;

    font-size:15px;
    line-height:1.8;
}


/* TÍTULOS */

.site-footer h3{
    margin:0 0 22px;

    color:#fff;

    font-family:"Century Gothic", Arial, sans-serif;

    font-size:16px;
    font-weight:700;
}


/* NAVEGACIÓN */

.footer-nav{
    display:grid;

    grid-template-columns:repeat(2, max-content);

    gap:12px 28px;
}

.footer-nav a{
    position:relative;

    color:#d4e4e8;

    font-size:14px;

    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-nav a:hover{
    color:#fff;

    transform:translateX(3px);
}


/* ========================================================
   MÉTODOS DE PAGO
======================================================== */

.footer-payments > p{
    margin:0 0 16px;

    color:#c7dade;

    font-size:13px;
}

.payment-methods{
    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;
}

.payment-method{
    height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:9px 14px;

    border-radius:8px;

    background:#fff;
}

.payment-method img{
    display:block;

    width:auto;
    height:auto;

    max-width:220px;

    object-fit:contain;
}

.secure-payment{
    display:block;

    margin-top:13px;

    color:#a9c5cb;

    font-size:11px;
}


/* ========================================================
   PARTE INFERIOR
======================================================== */

.footer-bottom{
    margin-top:45px;

    padding:22px 0;

    border-top:1px solid rgba(255,255,255,.09);

    text-align:center;
}

.footer-bottom p{
    margin:0;

    color:#b8cbd1;

    font-size:11px;
}


/* ========================================================
   RESPONSIVE
======================================================== */

@media(max-width:900px){

    .site-footer .foot{
        grid-template-columns:1fr 1fr;

        gap:45px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }

}


@media(max-width:650px){

    .site-footer{
        padding-top:45px;
    }

    .site-footer .foot{
        grid-template-columns:1fr;

        gap:38px;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-logo img{
        max-width:220px;
    }

    .footer-nav{
        grid-template-columns:1fr 1fr;

        gap:13px 25px;
    }

    .footer-bottom{
        margin-top:38px;
    }

}


/* ========================================================
   NUEVO: TOPBAR
======================================================== */

.topbar{
    width:100%;
    min-height:36px;
    background:#176072;
    color:#fff;
    display:flex;
    align-items:center;
}

.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.topbar-contact{
    display:flex;
    align-items:center;
    gap:24px;
}

.topbar-contact a{
    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.9);
    font-size:11px;
}

.topbar-icon{
    color:#94d6c7;
}

.topbar-social{
    display:flex;
    align-items:center;
    gap:8px;
}

.topbar-social>span{
    margin-right:3px;
    opacity:.65;
    font-size:10px;
}

.topbar-social a{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    color:#fff;
    font-size:10px;
    font-weight:bold;
}

.topbar-social a:hover{
    background:rgba(255,255,255,.12);
}


/* ========================================================
   NUEVO: LOGO
======================================================== */

.logo-image{
    width:185px;
    flex:0 0 185px;
    display:flex;
    align-items:center;
}

.logo-image img{
    width:100%;
    max-width:185px;
    height:auto;
    display:block;
}


/* ========================================================
   NUEVO: HEADER
======================================================== */

.header nav a{
    color:#315d69;
    transition:.2s;
}

.header nav a:hover{
    color:#176b7e;
}

.header-logout{
    font-size:11px;
    color:#52727b;
}


/* ========================================================
   NUEVO: MENÚ MÓVIL
======================================================== */

.mobile-menu{
    width:38px;
    height:38px;
    display:none;
    border:0;
    border-radius:7px;
    background:#eaf4f6;
    padding:8px;
    cursor:pointer;
}

.mobile-menu span{
    width:19px;
    height:2px;
    display:block;
    margin:4px auto;
    border-radius:2px;
    background:#176b7e;
    transition:.2s;
}

.mobile-menu.active span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}

.mobile-menu.active span:nth-child(2){
    opacity:0;
}

.mobile-menu.active span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}


/* ========================================================
   RESPONSIVE ORIGINAL + HEADER
======================================================== */

@media(max-width:900px){

    .site-header{
        position:sticky;
        top:0;
        z-index:9999;
    }

    .site-header .header{
        width:calc(100% - 32px);
        position:relative;
    }

    .header nav{
        display:none;
    }

    .header nav.mobile-open{
        position:absolute;

        top:calc(100% + 17px);
        left:-16px;
        right:-16px;

        display:flex;
        flex-direction:column;

        gap:0;

        padding:10px 16px 18px;

        background:#fff;

        border-top:1px solid #dce9ed;
        border-bottom:1px solid #dce9ed;

        box-shadow:0 15px 30px rgba(23,52,61,.15);

        z-index:9998;
    }

    .header nav.mobile-open a{
        display:block;

        width:100%;

        padding:14px 8px;

        border-bottom:1px solid #edf3f5;

        font-size:14px;
    }

    .header nav.mobile-open a:last-child{
        border-bottom:0;
    }

    .mobile-menu{
        display:block;

        position:relative;

        flex:0 0 38px;

        width:38px;
        height:38px;

        border:0;
        border-radius:7px;

        background:#eaf4f6;

        padding:8px;

        cursor:pointer;

        z-index:10000;
    }

    .mobile-menu span{
        display:block;

        width:20px;
        height:2px;

        margin:4px auto;

        border-radius:2px;

        background:#176b7e;

        transition:
            transform .2s ease,
            opacity .2s ease;
    }

    .mobile-menu.active span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    .mobile-menu.active span:nth-child(2){
        opacity:0;
    }

    .mobile-menu.active span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }


    /* CONSERVAMOS TUS RESPONSIVE ORIGINALES */

    .two,
    .course-grid,
    .auth,
    .account{
        grid-template-columns:1fr;
    }

    .cards{
        grid-template-columns:1fr 1fr;
    }

    .auth-photo{
        display:none;
    }

    .course-grid{
        gap:15px;
    }

    .hero h1{
        font-size:40px;
    }

    .foot{
        grid-template-columns:1fr;
    }

    .account aside{
        min-height:auto;
    }

}


@media(max-width:650px){

    .wrap{
        width:min(100% - 28px,1180px);
    }

    .topbar{
        min-height:32px;
    }

    .topbar-inner{
        justify-content:center;
    }

    .topbar-contact{
        justify-content:center;
    }

    .topbar-contact a:nth-child(2){
        display:none;
    }

    .topbar-social{
        display:none;
    }

    .site-header{
        height:68px;
    }

    .header{
        gap:10px;
    }

    .logo-image{
        width:140px;
        flex-basis:140px;
    }

    .logo-image img{
        max-width:140px;
    }

    .actions{
        margin-left:auto;
        gap:7px;
    }

    .header-logout{
        display:none;
    }

    .btn.small{
        padding:8px 11px;
        font-size:9px;
    }

}


@media(max-width:430px){

    .logo-image{
        width:125px;
        flex-basis:125px;
    }

    .logo-image img{
        max-width:125px;
    }

    .actions .btn.small{
        display:none;
    }

}

/* ========================================================
   TIPOGRAFÍA GLOBAL
======================================================== */

body,
button,
input,
textarea,
select,
option{
    font-family:"Century Gothic", CenturyGothic, AppleGothic, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
.logo,
.auth-photo blockquote{
    font-family:"Century Gothic", CenturyGothic, AppleGothic, Arial, sans-serif;
}

body{
    font-size:16px;
}

p{
    font-size:16px;
    line-height:1.75;
}

.header nav a{
    font-size:14px;
}

.btn{
    font-size:14px;
}

.btn.small{
    font-size:13px;
}

.topbar-contact a{
    font-size:12px;
}

.topbar-social > span{
    font-size:11px;
}

.meta{
    font-size:13px;
}

.auth-form label{
    font-size:12px;
}

.notice,
.alert{
    font-size:14px;
}

.header-logout{
    font-size:13px;
}
/* ========================================================
   ÁREA PRIVADA Y ADMINISTRACIÓN
======================================================== */
.account-modern{grid-template-columns:270px 1fr;background:#f3fafc;min-height:720px}.account-modern>main{padding:52px 55px}.account-sidebar{background:#176b7e;color:#fff;padding:32px 24px;display:flex;flex-direction:column;gap:9px}.account-sidebar .avatar{width:48px;height:48px;background:#2b9bb4}.account-sidebar small{opacity:.8}.account-sidebar p{margin:18px 0}.account-sidebar nav{display:flex;flex-direction:column;gap:7px}.account-sidebar nav a{padding:12px 14px;border-radius:8px}.account-sidebar nav a:hover{background:#ffffff18}.account-heading{margin-bottom:28px}.account-heading small,.admin-title small{letter-spacing:2px;color:#16758a;font-size:10px;font-weight:700}.account-heading h1,.admin-title h1{margin:7px 0 8px;font-size:34px}.account-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.account-cards>a{background:#fff;border:1px solid #d6e5e9;border-radius:12px;padding:27px;min-height:205px;transition:.25s}.account-cards>a:hover{transform:translateY(-4px);box-shadow:0 14px 35px #17343d12}.account-cards span{font-size:23px}.account-cards h3{margin:18px 0 8px}.account-cards p{color:#6d8790;line-height:1.6}.account-cards b{color:#176b7e;font-size:12px}.profile-form{max-width:720px;background:#fff;border:1px solid #d7e5e9;border-radius:12px;padding:28px}.profile-form label,.payment-config-grid label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:17px}.profile-form input,.payment-config-grid input,.payment-config-grid select,.admin-search input{width:100%;padding:13px;border:1px solid #cbdde2;border-radius:8px;margin-top:7px;background:#fff}.profile-form label small{display:block;margin-top:6px;color:#789099;text-transform:none;font-weight:400}.profile-form hr{border:0;border-top:1px solid #e1ecef;margin:26px 0}.private-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.private-course-grid article{background:#fff;border:1px solid #d7e5e9;border-radius:12px;overflow:hidden}.private-course-grid article>div:last-child{padding:20px}.private-course-cover{height:160px;background:linear-gradient(135deg,#cde7ec,#7fbac6);display:grid;place-items:center}.empty-state{grid-column:1/-1;background:#fff;border:1px solid #d7e5e9;border-radius:12px;padding:45px;text-align:center}
.admin-layout{display:grid;grid-template-columns:255px 1fr;min-height:720px;background:#f3fafc}.admin-sidebar{background:#17343d;color:#fff;padding:30px 20px}.admin-brand{padding:0 10px 25px;border-bottom:1px solid #ffffff18;margin-bottom:20px}.admin-brand strong,.admin-brand small{display:block}.admin-brand small{margin-top:6px;opacity:.65;font-size:10px}.admin-sidebar nav{display:flex;flex-direction:column;gap:5px}.admin-sidebar nav a{padding:12px;border-radius:8px}.admin-sidebar nav a:hover{background:#ffffff12}.admin-main{padding:45px;min-width:0}.admin-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.admin-stats article{background:#fff;border:1px solid #d7e5e9;border-radius:12px;padding:22px}.admin-stats small{display:block;color:#789099;margin-bottom:10px}.admin-stats strong{font-size:30px;color:#176b7e}.admin-panel{background:#fff;border:1px solid #d7e5e9;border-radius:12px;padding:24px;margin-bottom:20px}.admin-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.admin-panel h2{font-size:20px;margin-top:0}.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:13px 12px;border-bottom:1px solid #e5eef0;text-align:left;white-space:nowrap}.admin-table th{font-size:10px;text-transform:uppercase;color:#708991}.admin-table td small{display:block;color:#81979e}.status-badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#e8f2f4;font-size:10px;font-weight:700}.status-badge.active{background:#e4f5ed;color:#257451}.status-badge.inactive{background:#f7e7e7;color:#934545}.admin-action{border:0;background:#e8f2f4;color:#176b7e;border-radius:18px;padding:7px 11px;cursor:pointer}.admin-search{display:flex;gap:10px;margin-bottom:18px}.admin-search input{margin:0}.payment-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.payment-config-grid .admin-panel{margin:0}.payment-config-grid .toggle-row{display:flex;align-items:center;gap:9px;text-transform:none;font-size:14px}.payment-config-grid .toggle-row input{width:auto;margin:0}.config-status{padding:10px;border-radius:8px;background:#eef7f9;color:#176b7e}.admin-save{margin:20px 0}.admin-note{margin-top:20px}.admin-note code{word-break:break-all}.checkout-method{display:block;padding:13px 0}
@media(max-width:1000px){.admin-stats{grid-template-columns:repeat(2,1fr)}.account-cards,.private-course-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.admin-layout,.account-modern{grid-template-columns:1fr}.admin-sidebar,.account-sidebar{min-height:auto}.admin-sidebar nav,.account-sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)}.admin-main,.account-modern>main{padding:30px 20px}.payment-config-grid,.account-cards,.private-course-grid{grid-template-columns:1fr}.admin-title{align-items:flex-start;gap:10px;flex-direction:column}}
@media(max-width:520px){.admin-stats{grid-template-columns:1fr 1fr}.admin-sidebar nav,.account-sidebar nav{grid-template-columns:1fr}.admin-main{padding:24px 15px}.admin-search{flex-direction:column}}

/* Gestión de contenido */
.admin-form label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:18px}.admin-form input,.admin-form select,.admin-form textarea{width:100%;padding:13px;border:1px solid #cbdde2;border-radius:8px;margin-top:7px;background:#fff;font:inherit}.admin-form textarea{resize:vertical}.admin-form label small{display:block;margin-top:6px;color:#789099;text-transform:none;font-weight:400}.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.admin-actions{display:flex;align-items:center;gap:7px}.admin-actions form{margin:0}.admin-action.danger{background:#f7e7e7;color:#934545}.admin-thumb-preview{display:block;width:220px;max-height:130px;object-fit:cover;border-radius:10px;margin:0 0 20px}.admin-avatar-preview{display:block;width:90px;height:90px;object-fit:cover;border-radius:50%;margin:0 0 20px}@media(max-width:700px){.admin-form-grid{grid-template-columns:1fr}}

/* ===== Ajustes reunión 2026-10-01 ===== */
.topbar-social a{font-size:20px;min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center}
.cart{font-size:21px;min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d7e8ec;border-radius:50%;background:#fff}
.cart span{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;font-size:10px}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{border:0;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer;padding:20px 0}
.nav-dropdown-menu{position:absolute;top:calc(100% - 4px);left:-20px;width:270px;padding:10px;background:#fff;border:1px solid #dce9ed;border-radius:12px;box-shadow:0 16px 40px #17343d1c;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:50}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
.nav-dropdown-menu a{display:block!important;padding:11px 12px!important;border-radius:8px;font-size:13px!important}
.nav-dropdown-menu a:hover{background:#eef7f9}
.catalog-category-filters{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.catalog-category-filters a{border:1px solid #cbdde2;background:#fff;padding:10px 18px;border-radius:25px}
.catalog-category-filters a.active,.catalog-category-filters a:hover{background:#176b7e;color:#fff;border-color:#176b7e}
.catalog-empty{text-align:center;background:#fff;border:1px solid #dce9ed;border-radius:12px;padding:35px;margin-bottom:25px}
.course-category{color:#176b7e;font-weight:700}
.service-page{background:#f3fafc;min-height:70vh}.service-hero{padding:70px 0;background:linear-gradient(135deg,#edf8fa,#d8eef3)}
.service-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.service-hero img{width:100%;height:440px;object-fit:cover;object-position:center;border-radius:18px;box-shadow:0 20px 55px #17343d22}
.service-kicker{display:inline-block;color:#176b7e;font-size:12px;font-weight:700;letter-spacing:1.5px;margin-bottom:16px}.service-hero h1{font-size:48px;font-weight:400;line-height:1.12;margin:0 0 20px}.service-hero h1 em{color:#176b7e}.service-hero p{font-size:17px;line-height:1.8;max-width:620px;margin-bottom:28px}.service-actions,.social-service-links{display:flex;gap:12px;flex-wrap:wrap}.service-coming-label{background:#176b7e;color:#fff;border-radius:30px;padding:8px 14px}.service-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:25px}.service-category-grid a,.social-service-links a{background:#fff;border:1px solid #cfe1e6;border-radius:12px;padding:20px;font-weight:700}.social-service-links a{padding:13px 20px}.service-copy{max-width:900px}.admin-inline-form{display:grid;grid-template-columns:2fr 2fr 100px auto;gap:10px;align-items:end}.admin-inline-form input{width:100%;padding:12px;border:1px solid #cbdde2;border-radius:8px}
@media(max-width:900px){.nav-dropdown{display:block}.nav-dropdown-toggle{width:100%;text-align:left;padding:12px 0}.nav-dropdown-menu{position:static;width:100%;box-shadow:none;border:0;padding:0 0 0 14px;opacity:1;visibility:visible;transform:none;display:none}.nav-dropdown:focus-within .nav-dropdown-menu{display:block}.service-hero-grid{grid-template-columns:1fr}.service-hero h1{font-size:38px}.service-hero img{height:340px}.admin-inline-form{grid-template-columns:1fr}.service-category-grid{grid-template-columns:1fr}}

/* ==========================================================
   HEADER DROPDOWNS - NOSOTROS / SERVICIOS
========================================================== */
.site-header .main-nav{margin-left:auto;display:flex;align-items:center;gap:25px;flex:1 1 auto;justify-content:flex-end}
.site-header .main-nav>a{display:inline-flex;align-items:center;color:#244653;font-size:14px;white-space:nowrap}
.site-header .nav-dropdown{position:relative;display:flex;align-items:center}
.site-header .nav-dropdown-toggle{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;margin:0;padding:10px 0;border:0!important;background:transparent!important;box-shadow:none!important;color:#244653;font:400 14px "Century Gothic",Arial,sans-serif;cursor:pointer}
.site-header .nav-dropdown-arrow{color:#176b7e;transition:transform .2s ease}
.site-header .nav-dropdown-menu{position:absolute!important;top:calc(100% + 8px)!important;left:50%!important;z-index:99999!important;width:285px!important;margin:0!important;padding:10px!important;background:#fff!important;border:1px solid #dce9ed!important;border-radius:12px!important;box-shadow:0 15px 40px rgba(20,67,78,.16)!important;opacity:0!important;visibility:hidden!important;transform:translate(-50%,8px)!important;pointer-events:none!important;transition:.2s ease!important}
.site-header .nav-dropdown:hover .nav-dropdown-menu,.site-header .nav-dropdown:focus-within .nav-dropdown-menu{opacity:1!important;visibility:visible!important;transform:translate(-50%,0)!important;pointer-events:auto!important}
.site-header .nav-dropdown:hover .nav-dropdown-arrow,.site-header .nav-dropdown:focus-within .nav-dropdown-arrow{transform:rotate(180deg)}
.site-header .nav-dropdown-menu a{display:flex!important;flex-direction:column!important;width:100%!important;padding:12px 14px!important;border-radius:8px!important;color:#244653!important;font-size:13px!important;white-space:normal!important}
.site-header .nav-dropdown-menu a:hover{background:#eef7f9!important;color:#176b7e!important}
.site-header .nav-dropdown-menu small{margin-top:3px;color:#7a969e;font-size:9px;font-weight:700;text-transform:uppercase}
.site-header .actions .btn{white-space:nowrap!important}
@media(max-width:900px){.site-header .main-nav{display:none}.site-header .main-nav.mobile-open{display:flex;flex-direction:column;align-items:stretch}.site-header .main-nav.mobile-open .nav-dropdown{display:block}.site-header .main-nav.mobile-open .nav-dropdown-menu{position:static!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;box-shadow:none!important;margin-top:4px!important}}

/* ===== ADMIN / ÁREA PRIVADA: CURSOS EN AUDIO ===== */
.admin-checks{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 22px}.admin-checks label{display:flex!important;align-items:center;gap:8px;text-transform:none!important;font-size:14px!important}.admin-checks input{width:auto!important;margin:0!important}.audio-admin-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,1fr) auto;gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid #e5eef0}.audio-admin-info strong,.audio-admin-info small{display:block}.audio-admin-info small{margin-top:7px;color:#789099}.audio-admin-row details summary{cursor:pointer;color:#176b7e;font-weight:700}.audio-inline-edit{padding-top:14px}.private-audio-list{display:grid;gap:16px}.private-audio-card{display:grid;grid-template-columns:60px 1fr;gap:20px;background:#fff;border:1px solid #d7e5e9;border-radius:14px;padding:22px}.audio-number{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#e8f4f6;color:#176b7e;font-weight:700}.audio-content h3{margin:0 0 8px}.audio-content p{color:#6d8790;line-height:1.6}.audio-content audio{width:100%;margin-top:12px}@media(max-width:800px){.audio-admin-row{grid-template-columns:1fr}.private-audio-card{grid-template-columns:1fr}.audio-number{width:42px;height:42px}}
\n/* Portadas de audios */
.audio-admin-row-cover{grid-template-columns:92px minmax(180px,1fr) minmax(240px,1fr) auto}
.audio-admin-cover{width:82px;height:82px;border-radius:12px;overflow:hidden;background:#e8f4f6;display:grid;place-items:center;color:#176b7e;font-size:28px}
.audio-admin-cover img{width:100%;height:100%;object-fit:cover;display:block}
.audio-remove-cover{display:flex!important;align-items:center;gap:8px;text-transform:none!important;font-size:13px!important}.audio-remove-cover input{width:auto!important;margin:0!important}
.private-audio-card{grid-template-columns:150px 1fr;align-items:center}
.private-audio-cover{width:150px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#e8f4f6;display:grid;place-items:center;color:#176b7e;font-size:40px}
.private-audio-cover img{width:100%;height:100%;object-fit:cover;display:block}
.audio-track-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#789099;margin-bottom:5px}
@media(max-width:800px){.audio-admin-row-cover{grid-template-columns:82px 1fr}.audio-admin-row-cover details,.audio-admin-row-cover .admin-actions{grid-column:1/-1}.private-audio-card{grid-template-columns:90px 1fr}.private-audio-cover{width:90px}.audio-content audio{min-width:0}}

/* Portada del curso - Administrador */
.course-cover-admin{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start;margin:6px 0 24px;padding:20px;border:1px solid #d7e5e9;border-radius:12px;background:#f8fcfd}.course-cover-preview{width:280px;aspect-ratio:3/2;border:1px dashed #b8d3da;border-radius:12px;overflow:hidden;background:#eaf5f7;display:grid;place-items:center}.course-cover-preview img{width:100%;height:100%;object-fit:cover;display:block}.course-cover-placeholder{text-align:center;color:#176b7e;display:grid;gap:5px;place-items:center}.course-cover-placeholder span{font-size:34px}.course-cover-placeholder strong{font-size:14px}.course-cover-placeholder small{font-size:10px;color:#789099}.course-cover-fields{padding-top:4px}.course-cover-remove{display:flex!important;align-items:center;gap:8px;text-transform:none!important;font-size:13px!important;margin-top:12px!important}.course-cover-remove input{width:auto!important;margin:0!important}@media(max-width:760px){.course-cover-admin{grid-template-columns:1fr}.course-cover-preview{width:100%;max-width:360px}}

/* Ajustes de legibilidad y amplitud solicitados - 2026-10-08 */
body{font-size:18px;line-height:1.7}
.wrap{width:min(1540px,calc(100% - 48px))}
.header{gap:20px}
.header nav{gap:clamp(10px,1.3vw,24px);align-items:center}
.header nav a{font-size:clamp(14px,1.05vw,17px);font-weight:600;white-space:nowrap}
.btn{font-size:16px;padding:15px 26px;min-height:48px}
.btn.small{font-size:14px;padding:11px 18px}
input,select,textarea,button{font-size:inherit}
@media(max-width:1100px){.header nav a{white-space:normal}}
@media(max-width:767px){.wrap{width:calc(100% - 28px)}body{font-size:17px}.btn{font-size:16px}}




/* Sección Nosotros - fotografía a altura completa */

.about-profile {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 45px;
    align-items: stretch;
}

.about-profile-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 14px;
}

.about-profile-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .about-profile {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-profile-image {
        height: 420px;
        min-height: 0;
    }
}

/* Botón volver arriba */
.go-top{position:fixed;left:24px;bottom:24px;z-index:9999;width:50px;height:50px;border:0;border-radius:50%;background:#176b7e;color:white;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.go-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.go-top:hover{background:#104e60}
@media(max-width:768px){.go-top{right:15px;bottom:18px;width:46px;height:46px}}


/* Botón flotante Volver arriba */
#goTop {
    position: fixed !important;
    bottom: 28px;
    right: 28px;
    left: auto !important;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #173b46;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility .25s;
}

#goTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#goTop:hover {
    background: #245968;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    #goTop {
        width: 46px;
        height: 46px;
        bottom: 20px;
        right: 18px;
    }
}


/* ==========================================
   COLORES DE CATEGORÍAS - CURSOS EN AUDIO
========================================== */

.catalog-category-filters .category-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 50px;
    border: 1px solid var(--category-color, #176d80);
    background: var(--category-light, #eef7fa);
    color: var(--category-color, #176d80);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Curación del Niño Interior */
.catalog-category-filters
.category-filter[data-category="curacion-nino-interior"] {
    --category-color: #713A9C;
    --category-light: #F3EAF9;
}

/* Habilidades personales */
.catalog-category-filters
.category-filter[data-category="desarrollo-habilidades-personales"] {
    --category-color: #2878B8;
    --category-light: #EAF4FC;
}

/* Habilidades sociales */
.catalog-category-filters
.category-filter[data-category="desarrollo-habilidades-sociales"] {
    --category-color: #27845A;
    --category-light: #E8F6EE;
}

/* Espiritualidad */
.catalog-category-filters
.category-filter[data-category="espiritualidad"] {
    --category-color: #DB7928;
    --category-light: #FFF1E4;
}

/* Categoría seleccionada */
.catalog-category-filters .category-filter.active,
.catalog-category-filters .category-filter:hover {
    background: var(--category-color, #176d80);
    border-color: var(--category-color, #176d80);
    color: #ffffff;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .catalog-category-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .catalog-category-filters .category-filter {
        padding: 12px 16px;
        font-size: 14px;
    }
}


/* ==========================================
   COLORES DE CATEGORÍAS - CURSOS EN AUDIO
========================================== */

.catalog-category-filters .category-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 50px;
    border: 1px solid var(--category-color, #176d80);
    background: var(--category-light, #eef7fa);
    color: var(--category-color, #176d80);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Curación del Niño Interior */
.catalog-category-filters
.category-filter[data-category="curacion-nino-interior"] {
    --category-color: #713A9C;
    --category-light: #F3EAF9;
}

/* Habilidades personales */
.catalog-category-filters
.category-filter[data-category="desarrollo-habilidades-personales"] {
    --category-color: #2878B8;
    --category-light: #EAF4FC;
}

/* Habilidades sociales */
.catalog-category-filters
.category-filter[data-category="desarrollo-habilidades-sociales"] {
    --category-color: #27845A;
    --category-light: #E8F6EE;
}

/* Espiritualidad */
.catalog-category-filters
.category-filter[data-category="espiritualidad"] {
    --category-color: #DB7928;
    --category-light: #FFF1E4;
}

/* Categoría seleccionada */
.catalog-category-filters .category-filter.active,
.catalog-category-filters .category-filter:hover {
    background: var(--category-color, #176d80);
    border-color: var(--category-color, #176d80);
    color: #ffffff;
}

/* Adaptación móvil */
@media (max-width: 768px) {
    .catalog-category-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .catalog-category-filters .category-filter {
        padding: 12px 16px;
        font-size: 14px;
    }
}