/* 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)}
.boto{
    display:inline-block;
 margin:8px;
 padding:8px 15px;
 border-radius:777px;
 text-decoration:none;
 background:var(--gold);
 color:#f00505;
}
.boto2{
    display:inline-block;
 margin:8px;
 padding:8px 15px;
 border-radius:777px;
 text-decoration:none;
 background:var(--gold);
 color:#2014c5;
}
.section{max-width:1200px;margin:auto;padding:60px 20px}
.section h2{text-align:center;color:var(--primary)}

.section2 {
   
    width: 60%;
    margin: 30px auto;
    text-align: center;
}

.section2 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);
}
.card2{
 background:#2536d3;
 padding:24px;
 border-radius:var(--radius);
 box-shadow:0 5px 20px rgba(0,0,0,.08);
}
footer{
 background-color: #00aaaa;
    color: #FFFF00;
    text-align: center;
    padding: 30px 15px;
}
@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}

/* Estil general dels enllaços */
a {
    color: #0b4fa2;
}

a:hover {
    color: #0b4fa2;
    
}

a:visited {
    color: #0b4fa2;
    
}

/* Enllaços dins de targetes */
.card a {
    color: #1a73e8;
}

.card a:hover {
    color: #0b4fa2;
}

/* Enllaços dins de targetes */
.card a {
    color: #1a73e8;
}

.card a:hover {
    color: #0b4fa2;
}

/* Enllaços del footer */
.footer-links {
     text-align: center;
    margin-top: 25px;
}

.footer-links a{
   color: #d0e8ff;
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: #d0e8ff;
    
}
.footer-links a:visited { 
	color: #d0e8ff;
}

.footer-links a:active {
    color: #d0e8ff;
}

/* Enllaços footer2*/

.footer-links2 {
     text-align: center;
    margin-top: 25px;
	color: #ffffff;
}

.footer-links2 a{
   color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    font-size: 0.95rem;
}

.footer-links2 a:hover {
    color: #ffffff;
    
}
.footer-links2 a:visited { 
	color: #ffffff;
}

.footer-links2 a:active {
    color: #ffffff;
}

/* Imatges Activitats */

.img_activitats{
  display: block;
    margin: 35px auto;
    max-width: 90%;
    height: auto;
} 

/* Per a REELS */
.reel-container {
    width: 50%;
    max-width: 300px;
    margin: 30px auto;
}

.reel-container video {
    display: block;
    width: 100%;
    height: auto;
}

/* Per a Flags - Banderes */
.flag-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;   
}

.flag-only {

   
    width: 35px;
    display: flex;

    justify-content: center;

    }

/*   Advertències i altre elements */
.advertencia {
    display: block;
    margin: 20px auto;
   
  
    }
.advertencia2 {
    display: block;
    margin: 20px auto;
    width: 100%;
    max-width: 175px;
    height: auto;
    }
.tematica {
    display: block;
    margin: 20px auto;
    width: 30%;
    height: auto;
}

@media (max-width: 600px) {
    .tematica {
        width: 135px;
         height: auto;
    }
}

.uLoginIMG{
    display: block;
    margin: 20px auto;
    width: 15%;
    height: auto;
}
@media (max-width: 600px) {
    .tematica {
        width: 5%;
         height: auto;
    }
}
/* -------- Invisible -------- */
.invisible {
    display: none;
}
.visible {
    display: block;
}

}

/*-----SPONSORING --------------*/
.PreuEsponsor {
    font-weight: bold;
    color: #dc2626;
    font-size: 14px;
    background-color: #fbbf24;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.3s ease;
}

.PreuEsponsor:hover {
    background-color: #f59e0b;
    transform: scale(1.05);
}

/* --------Tables----------------*/
/*table {
    width: 80%;
    margin: 0 auto;
}

table {
    width: 80%;
    max-width: 1200px;
    margin: 30px auto;
    border-collapse: collapse;
}

@media (max-width: 600px) {
    table {
        width: 95%;
    }
}*/

.taula-responsive {
    width: 100%;
    overflow-x: auto;
}
@media (max-width: 600px) {
    taula-responsive {
        width: 95%;
    }
}

.taula-responsive table {
    width: 100%;
    border-collapse: collapse;
}

.taula-responsive th,
.taula-responsive td {
    padding: 8px;
}