/* /public_html/web_site/assets/css/website.css */
:root{
  --bg:#0f1115; 
  --card:#171a21; 
  --line:#242a34; 
  --muted:#a8b0bf; 
  --txt:#e7ebf3; 
  --accent:#7c5cff; 
  --accent-2:#f4c430; 
  --white:#fff;
}

*{
    box-sizing:border-box
}

html,body{
    margin:0;
    padding:0
}

body{
    background:var(--bg);
    color:var(--txt);
    font:400 16px/1.5 "Raleway",system-ui,-apple-system,Segoe UI,Roboto,sans-serif
}

h1,h2,h3{
    font-family:"Playfair Display",serif;margin:0 0 .4rem
}

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

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 18px;
    background:#0d0f14;
    border-bottom:1px solid var(--line)
}

.logo{
    font-weight:700;
    letter-spacing:.5px
}

.site-nav{
    display:flex;
    gap:14px;
    align-items:center
}

.site-nav a{
    padding:8px 8px;
    border-radius:8px;
    color:var(--muted)
}

.site-nav a:hover{
    color:var(--white);
    background:#10151f
}

.btn-login{
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:10px
}

.btn-login:hover{
    background:#10151f
}

.nav-toggle{
    display:none;
    background:none;
    border:0;
    color:var(--txt);
    font-size:20px
}

/* Mobile menu */
@media (max-width: 840px){
    .nav-toggle{
        display:block
    }

    .site-nav{
        position:absolute;
        left:0;
        right:0;
        top:56px;
        flex-direction:column;
        gap:0;
        background:#0d0f14;
        border-bottom:1px solid var(--line);
        padding:8px 12px;
        display:none
    }

    .site-nav.open{
        display:flex
    }

    .site-nav a{
        width:100%;
        padding:10px;
        border-radius:8px
    }
    .btn-login{
        display:none
    }
}

/* Hero */
.hero{
    position:relative;
    min-height:58vh;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,#121725 0%,#0f1115 100%)
}

.hero-overlay{
    text-align:center;
    padding:30px 18px
}

.hero-overlay h1{
    font-size:clamp(28px,4vw,44px)
}

.hero-overlay h1 span{
    color:var(--accent)
}

.hero-overlay p{
    color:var(--muted);
    margin:.2rem 0 1rem
}

.botones{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap
}

.btn{
    background:var(--accent);
    color:#fff;
    padding:10px 14px;
    border-radius:12px;
    border:0;
    cursor:pointer;
    display:inline-block
}

.btn:hover{
    filter:brightness(1.05)
}

/* Home Destacados */
.home-featured{
    padding:26px 0
}

.wrap{
    max-width:1100px;
    margin:0 auto;
    padding:0 16px
}

.row-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px
}

.row-head h2{
    font-size:20px
}

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

.muted{
    color:var(--muted);
    font-size:12px
}

.link-all{
    color:#cfe3ff
}

.link-all:hover{
    text-decoration:underline
}

.featured-scroller{
    position:relative
}

.featured-track{
    display:flex;
    gap:14px;
    overflow:hidden;
    padding:6px 2px
}

.scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#0f131b;
    color:var(--txt);
    cursor:pointer;
    display:grid;
    place-items:center
}

.scroll-btn.prev{
    left:-4px
}

.scroll-btn.next{
    right:-4px
}

.scroll-btn:disabled{
    opacity:.4;
    cursor:default
}

.card{
    min-width:240px;
    max-width:260px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden
}

.thumb{
    aspect-ratio:4/3;
    background:#0e1218;
    display:grid;
    place-items:center
}

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

.fallback{
    font-size:28px;
    color:#3b4353
}

.body{
    padding:10px
}

.title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}

.name{
    font-weight:600;
    margin:0
}

.star{
    color:var(--accent-2)
}

.meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:6px;
    font-weight:600
}

.cat{
    color:var(--muted);
    font-size:12px;
    font-weight:500
}

.empty{
    margin:10px 0;
    padding:14px;
    border:1px dashed var(--line);
    border-radius:12px;
    color:var(--muted);
    text-align:center
}