/*App*/
    html,
    body{
        margin:0;
        padding:0;
        min-height:100%;
    }

    body{
        /*font-family:serif;*/
        overflow:hidden;
        overflow-y:auto;
        background:#ece9e2;
    }

    .brand img{
        width:100%;
        max-width:220px;

        height:auto;

        display:block;

        margin:auto;

        border-radius:12px;
    }

    .sidebar-nav{
        display:flex;
        flex-direction:column;

        align-items:flex-start;

        gap:1rem;

        width:100%;
    }
    
    .app-layout{
        display:flex;
        min-height:100vh;
    }

    .sidebar{
        width:320px;
        height:100dvh;

        position:fixed;
        left:0;
        top:0;

        background:#f5f2eb;

        padding:2rem;

        overflow-y:auto;

        z-index:3000;

        border-right:1px solid rgba(0,0,0,.1);
    }

    .sidebar-social{

        margin-top:auto;

        display:flex;

        justify-content:center;

        align-items:center;

        gap:1rem;

        padding-top:2rem;
    }

    .sidebar-social a{

        width:48px;
        height:48px;

        display:flex;

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

        border-radius:50%;

        text-decoration:none;

        background:rgba(255,255,255,.65);

        color:#222;

        font-size:1.3rem;

        transition:
            transform .3s ease,
            background .3s ease,
            color .3s ease,
            box-shadow .3s ease;

        box-shadow:
            0 4px 10px rgba(0,0,0,.08);
    }

    .sidebar-social a:hover{

        transform:translateY(-4px) scale(1.08);

        background:#111;

        color:#fff;

        box-shadow:
            0 8px 20px rgba(0,0,0,.18);
    }

    .sidebar-social a:nth-child(1):hover{
        background:#E4405F;
    }

    .sidebar-social a:nth-child(2):hover{
        background:#9146FF;
    }

    .sidebar-social a:nth-child(3):hover{
        background:#FF0000;
    }

    .sidebar-social a:nth-child(4):hover{
        background:#444;
    }

    @media(max-width:992px){

        .sidebar-social{
            margin-top:3rem;
        }

    }    

    .content-wrapper{

        margin-left:320px;

        width:calc(100% - 320px);

        min-height:100dvh;

        position:relative;
        z-index:1;        

        padding:3rem;
    }

    #main-content{
        width:100%;        
    }

    .view-panel{

        background:rgba(245,242,235,.82);

        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);

        border-radius:24px;

        padding:40px;

        box-shadow:
            0 10px 35px rgba(0,0,0,.12);

        border:1px solid rgba(255,255,255,.25);
    }

    .footer-content{
        background:rgba(245,242,235,.82);
         backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }

    .bg-parallax{
        position:fixed;
        inset:0;

        z-index:-1;
        pointer-events:none;
    }

    .mobile-toggle{

        display:none;

        position:fixed;

        top:15px;
        left:15px;

        width:40px;
        height:40px;

        border:none;
        border-radius:50%;

        background:#000;

        color:#fff;

        cursor:pointer;

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

        line-height:1;

        font-size:1.5rem;

        z-index:4000;

        box-shadow:0 4px 12px rgba(0,0,0,.25);

        transition:
            transform .3s ease,
            left .4s ease,
            background .3s ease;
    }

    .mobile-toggle:hover{
        transform:scale(1.08);
        background:#222;
    }

    .mobile-toggle.active{
        left:270px;
    }

    @media(max-width:992px){

        body{
            overflow:auto;
        }

        .sidebar{
            transform:translateX(-100%);
            transition:.4s;
        }

        .sidebar.active{
            transform:translateX(0);
        }

        .content-wrapper{
            margin-left:0;
            width:100%;
            padding:1rem;
        }

        .mobile-toggle{
            display:flex;
        }

    }

    #global-loader{
        position:fixed;
        inset:0;
        background:#ece9e2;
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:9999;
        opacity:1;
        visibility:visible;

        transition:
        opacity .35s ease,
        visibility .35s ease;
    }

    #global-loader.hide{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    .spinner{
        width:50px;
        height:50px;
        border:4px solid rgba(0,0,0,.1);
        border-top-color:#111;
        border-radius:50%;
        animation:spin 1s linear infinite;
    }

    @keyframes spin{
        to{ transform:rotate(360deg); }
    }


/*Home*/
    .home-hero{
        position:relative;
        height:70vh;
        min-height:650px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        overflow:visible;
        border-radius:20px;
    }

    .home-page{
        overflow:visible;
    }

    .hero-banner{
        position:absolute;
        inset:0;        
        transform:scale(1.05);
        background:
        url('../img/app/collage-home.png')
        center 50% / cover
        no-repeat;
    }

    .hero-overlay{
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.45);
    }

    .hero-content{
        position:relative;
        z-index:2;
        color:#fff;
    }

    .hero-title{
        font-size:3.5rem;
        letter-spacing:6px;
    }

    .hero-subtitle{
        font-size:1.2rem;
        opacity:.85;
    }

    .hero-avatar{
        width:140px;
        height:140px;
        border-radius:50%;
        overflow:hidden;

        border:4px solid #fff;

        position:absolute;
        bottom:-70px;
        left:50%;
        transform:translateX(-50%);

        z-index:10;
    }

    .hero-avatar img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .home-bio{
        margin-top:100px;
        text-align:center;
        max-width:700px;
        margin-left:auto;
        margin-right:auto;
        font-size:1.1rem;
        line-height:1.6;
    }

    .home-cta{
        margin-top:2rem;
        display:flex;
        justify-content:center;
        gap:1rem;
        flex-wrap:wrap;
    }

    .btn-home{
        padding:.9rem 1.5rem;
        border-radius:30px;
        background:#111;
        color:#fff;
        text-decoration:none;
        transition:.3s;
    }

    .btn-home:hover{
        transform:translateY(-3px);
    }

    .btn-home.outline{
        background:transparent;
        border:2px solid #111;
        color:#111;
    }
/*Gallery*/
.gallery-page{
    width:100%;
    }

    .gallery-header{
        margin-bottom:2rem;
    }

    .gallery-header h1{
        font-size:3rem;
        letter-spacing:4px;
    }

    .gallery-filters{

        display:flex;
        flex-wrap:wrap;

        gap:1rem;

        margin-bottom:3rem;
    }

    .filter-btn{

        border:none;

        padding:.8rem 1.5rem;

        background:#111;

        color:#fff;

        border-radius:30px;

        cursor:pointer;

        transition:.3s;
    }

    .filter-btn:hover{
        transform:translateY(-2px);
    }

    .filter-btn.active{
        background:#b84c3d;
    }

    .gallery-grid{

        display:grid;

        grid-template-columns:
            repeat(auto-fit, minmax(280px,1fr));

        gap:1.5rem;
    }

    .gallery-item{

        overflow:hidden;

        border-radius:18px;

        background:#fff;

        box-shadow:
            0 8px 25px rgba(0,0,0,.08);

        transition:.4s;
    }

    .gallery-item img{

        width:100%;

        height:350px;

        object-fit:cover;

        display:block;

        transition:.4s;
    }

    .gallery-item:hover img{

        transform:scale(1.05);
    }

    .gallery-modal{

        position:fixed;

        top:0;
        right:0;
        bottom:0;
        left:320px;

        background:rgba(0,0,0,.92);

        display:none;

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

        z-index:5000;
    }

    .gallery-modal.active{
        display:flex;
    }

    .gallery-modal img{

        max-width:88%;
        max-height:85vh;

        border-radius:18px;

        box-shadow:
            0 15px 40px rgba(0,0,0,.35);
    }

    .modal-prev,
    .modal-next,
    .modal-close{

        position:absolute;

        border:none;

        backdrop-filter:blur(10px);

        background:rgba(255,255,255,.08);

        transition:.3s;

        color:#fff;

        cursor:pointer;

        border-radius:50%;
    }

    .modal-prev{
        left:30px;
    }

    .modal-next{
        right:30px;
    }

    .modal-close{
        top:20px;
        right:20px;
    }

    .modal-prev,
    .modal-next{

        width:60px;
        height:60px;

        font-size:2rem;
    }

    .modal-prev:hover,
    .modal-next:hover{

        transform:scale(1.08);

        background:rgba(255,255,255,.18);
    }

    .modal-close{

        width:50px;
        height:50px;

        font-size:1.2rem;
    }

    @media(max-width:992px){

        .gallery-modal{
            left:0;
        }

    }

    /*Commissions*/
    .commission-grid{

        display:grid;

        grid-template-columns:
            repeat(auto-fit, minmax(280px,1fr));

        gap:2rem;

        margin-top:3rem;
    }

    .commission-card{

        background:
            rgba(255,255,255,.65);

        backdrop-filter:blur(10px);

        border-radius:24px;

        padding:2rem;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        transition:.3s;
    }

    .commission-card:hover{

        transform:translateY(-5px);

        box-shadow:
            0 20px 40px rgba(0,0,0,.12);
    }

    .commission-image{

        width:100%;

        height:300px;

        object-fit:cover;

        border-radius:18px;

        margin-bottom:1rem;

        justify-content: center;
        align-items: center;
    }

    .price-row{

        display:flex;

        justify-content:space-between;

        margin-bottom:.75rem;

        padding-bottom:.75rem;

        border-bottom:
            1px solid rgba(0,0,0,.08);
    }

    .extras-grid{

        display:grid;

        grid-template-columns:
            repeat(auto-fit, minmax(220px,1fr));

        gap:1rem;

        background:
            rgba(255,255,255,.65);

        backdrop-filter:blur(10px);

        border-radius:24px;

        padding:2rem;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        transition:.3s;
    }

    .extras-grid:hover{

        transform:translateY(-5px);

        box-shadow:
            0 20px 40px rgba(0,0,0,.12);
    }

    /*Contact*/
    .contact-card{
        background:
            rgba(255,255,255,.65);

        backdrop-filter:blur(10px);

        border-radius:24px;

        padding:2rem;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        transition:.3s;
    }

    /*Policies*/
    .policies-card{
        background:
            rgba(255,255,255,.65);

        backdrop-filter:blur(10px);

        border-radius:24px;

        padding:2rem;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        transition:.3s;
    }  
    
    /*Calendar*/
    .calendar-card{
        background:
            rgba(255,255,255,.65);

        backdrop-filter:blur(10px);

        border-radius:24px;

        padding:2rem;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        transition:.3s;
    } 

    /* Admin */
    .admin-card{
        background:
            rgba(255,255,255,.65);

        backdrop-filter:blur(10px);

        border-radius:24px;

        padding:2rem;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        transition:.3s;
    }

    
/*POLITICAS*/
.commissions-page{

    display:flex;
    flex-direction:column;
    gap:2rem;

}

.commission-hero{

    text-align:center;
    padding:3rem 2rem;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

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

    border-radius:24px;

}

.commission-tabs{

    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:center;

}

.tab-btn{

    border:none;

    padding:.9rem 1.5rem;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:#1a1919;

    transition:.3s;

}

.tab-btn.active{

    background:#b84c3d;
    color:#fff;

}

.tab-panel{

    display:none;

}

.tab-panel.active{

    display:block;

    animation:fadeContent .4s ease;

}

.policy-card{

    margin-bottom:1rem;

    border-radius:18px;

    overflow:hidden;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(8px);

}

.policy-header{

    width:100%;

    border:none;

    background:none;

    color:#1a1919;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.2rem;

    font-size:1rem;

}

.policy-body{

    display:none;

    padding:0 1.2rem 1.2rem;

    color:#3d3b3b;

}

.policy-card.active .policy-body{

    display:block;

}