/* SinoeTV - Mobile First CSS (starter)
   Aquest fitxer és una base neta pensada per substituir l'actual.
   Pots ampliar-lo segons les necessitats.
*/
*{box-sizing:border-box}
:root{
 --primary:#3d2b56;
 --secondary:#8f6bbf;
 --gold:#c9a227;
 --light:#faf8f5;
 --dark:#333;
 --header-height:88px;
 --radius:12px;
}
html{scroll-behavior:smooth}
body{
 margin:0;
 padding-top:var(--header-height);
 font-family:"Segoe UI",Arial,sans-serif;
 background:var(--light);
 color:var(--dark);
 line-height:1.6;
}
.header{
 position:fixed;top:0;left:0;right:0;
 z-index:1000;
 background:var(--primary);
 color:#fff;
 box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.navbar{
 max-width:1200px;
 margin:auto;
 padding:10px 16px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 flex-wrap:wrap;
}
.logo{display:flex;flex-direction:column;align-items:center;color:#fff;text-decoration:none}
.logo-img{width:130px;height:auto}
.logo-text{font-weight:700;font-size:1.1rem}
.menu-toggle{
 display:block;background:none;border:0;color:#fff;
 font-size:2rem;cursor:pointer;
}
.nav-menu{
 display:none;
 width:100%;
 list-style:none;
 margin:10px 0 0;
 padding:0;
 flex-direction:column;
}
.nav-menu.active{display:flex}
.nav-menu>li{width:100%;position:relative}
.nav-menu a{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:14px 16px;
 color:#fff;
 text-decoration:none;
}
.nav-menu a:hover{background:rgba(255,255,255,.12)}
.submenu{
 display:none;
 list-style:none;
 margin:0;
 padding:0;
 background:#fff;
 border-radius:0 0 var(--radius) var(--radius);
}
.has-submenu.open>.submenu{display:block}
.submenu a{
 color:var(--dark);
 padding:12px 18px;
 white-space:normal;
 word-break:break-word;
}
.submenu a:hover{background:#f0eafa;color:var(--primary)}
.hero{
 min-height:70vh;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 color:#fff;
 padding:40px 20px;
 background:
 linear-gradient(rgba(61,43,86,.75),rgba(61,43,86,.75)),
 url("../img/hero.jpg") center/cover no-repeat;
}
.hero-content{max-width:820px}
.hero h1{font-size:2.5rem;margin:.2em 0}
.hero h2{font-weight:400}
.button{
 display:inline-block;
 margin:8px;
 padding:12px 26px;
 border-radius:999px;
 text-decoration:none;
 background:var(--gold);
 color:#fff;
}
.button.secondary{background:#fff;color:var(--primary)}
.section{max-width:1200px;margin:auto;padding:60px 20px}
.section h2{text-align:center;color:var(--primary)}
.cards{
 display:grid;
 grid-template-columns:1fr;
 gap:20px;
}
.card{
 background:#fff;
 padding:24px;
 border-radius:var(--radius);
 box-shadow:0 5px 20px rgba(0,0,0,.08);
}
footer{
 background:var(--primary);
 color:#fff;
 text-align:center;
 padding:24px;
}
@media(min-width:768px){
 .menu-toggle{display:none}
 .navbar{flex-wrap:nowrap}
 .nav-menu{
  display:flex!important;
  width:auto;
  flex-direction:row;
  margin:0;
  gap:8px;
 }
 .nav-menu>li{width:auto}
 .submenu{
  position:absolute;
  display:block;
  opacity:0;
  visibility:hidden;
  left:50%;
  top:100%;
  min-width:280px;
  transform:translateX(-50%);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
 }
 .has-submenu:hover>.submenu{
  opacity:1;
  visibility:visible;
 }
 .cards{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 }
 .hero h1{font-size:3.8rem}
}