:root{
  --bg:#dbe3f9;
  --primary:#0d6efd;
  --muted:#666;
  --nav-height:70px;
  --max-width:1000px;
  --bs-body-font-family: 'Playwrite ES Deco', sans-serif, Arial;
}

/* Tipografia global */
html{
  height: 100%;
  margin:0;
  padding:0;
  font-family: "Comic Neue", Arial, Times, serif;
  color:#040c4e;
  font-size: medium;
  background-color: #dbe3f9;  /* Fondo de color de respaldo */
  background-image: url('img/fons_pantalla_2.png');/* 1. Establece la imagen como fondo */
  /* 2. Propiedades para que la imagen se vea bien */
  background-size: cover;          /* Cubre todo el fondo sin distorsión */
  background-position: center;     /* Centra la imagen */
  background-repeat: no-repeat;    /* Evita que la imagen se repita */
  background-attachment: fixed;    /* Fija la imagen para que no se mueva al hacer scroll (opcional) */
}

/* Asegura que el body ocupe toda la altura de la vista del navegador */
body{
  font-size: medium;
  font-family: "Comic Neue", Arial, Times, serif;
  color: #040c4e;
  height: 100%; /* CAMBIO: Aseguramos que el body ocupe el 100% de la altura de html */
  position: relative; /* CAMBIO: Necesario para que el posicionamiento 'absolute' del .lang-selector funcione */
  background-color: #dbe3f9;  /* Fondo de color de respaldo */
  background-image: url('../img/fons_pantalla_2.png');/* 1. Establece la imagen como fondo */
  /* 2. Propiedades para que la imagen se vea bien */
  background-size: cover;          /* Cubre todo el fondo sin distorsión */
  background-position: center;     /* Centra la imagen */
  background-repeat: no-repeat;    /* Evita que la imagen se repita */
  background-attachment: fixed;    /* Fija la imagen para que no se mueva al hacer scroll (opcional) */
}

/* CAMBIO NUEVO: Regla para hacer el fondo del card-body blanco con 50% de transparencia */
.card-body {
    background-color: rgba(242, 161, 161, 0.1); 
}

/* CAMBIO NUEVO: Posicionamiento del contenedor de las tarjetas de idioma en la parte inferior */
.lang-selector {
    position: absolute;
    bottom: 20px; /* Distancia desde el borde inferior. Ajusta si es necesario. */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    max-width: var(--max-width); 
}

/* 1. Contenedor de la bandera para posicionar la señal */
.flag-container {
    position: relative; /* Establece un contexto de posicionamiento para el icono */
    display: inline-block;
}

/* Encabezats */
h1{
  font-family: "Comic Neue", Arial, Times, serif;
  font-size:2.4rem ; 
  margin:0 0 0.5rem 0 ;
  color: #0d6efd;
}
h2{
  font-family: "Comic Neue", Arial, Times, serif;
  font-size:2.0rem ; 
  margin:0 0 0.5rem 0;
  color: #0d6efd;  
}
h3{
  font-family: "Comic Neue", Arial, Times, serif;
  font-size:1.8rem ; 
  margin:0 0 0.5rem 0;
  color: black;
}
h4{
  font-family: "Comic Neue", Arial, Times, serif;
  font-size:1.6rem ; 
  margin:0 0 0.5rem 0;
  color: black;
}
h5{
  font-family: "Comic Neue", Arial, Times, serif;
  font-size:1.4rem ; 
  margin:0 0 0.5rem 0;
  color: black;
}
h6{
  font-family: "Comic Neue", Arial, Times, serif;
  font-size:1.2rem ; 
  margin:0 0 0.5rem 0;
  color: black;
}


/* Enllaços sense decoració i efecte hover */
a{
  text-decoration:none;
  color:var(--primary);
}

a:hover, a:focus{
  text-decoration:underline;
  color: #0d6efd;
  outline:none;
}

ul {
  list-style: none; /* o list-style-type: none; */
}

/* cants la finestra de les lletres */
#lyrics {
    display: none;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }

  /* Navegació fixa superior */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  background:#0d6efd;
  z-index:1000;
}

.navbar .nav-left,
.navbar .nav-right{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

/* Botons simples */
.button{
  display:inline-block;
  padding:0.45rem 0.75rem;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.08);
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  color:#eee;
}
.button:hover{
  background:rgba(11,116,222,0.06);
}

/* Estil específic per al botó tornar (esquerra) */
.btn-back::before{
  content:"←";
  margin-right:0.45rem;
}

/* Estil específic per a botó inici (dreta) */
.btn-home::after{
  content:"⟲";
  margin-left:0.45rem;
}

/* Contingut principal: deixem espai per la navbar */
.main-content{
  padding-top:calc(var(--nav-height) + 1rem);
  max-width:var(--max-width);
  margin:0 auto;
  padding-left:1rem;
  padding-right:1rem;
  box-sizing:border-box;
}

/* Div de contingut i peu de pàgina */
.content{
  margin:1rem 0 2rem 0;
}

.footer{
  border-top:1px solid #eee;
  padding:1rem;
  text-align:center;
  font-size:0.95rem;
  color:var(--muted);
}

/* Imatge forçada a 600x800 (mida fixa) */
.img-600x800{
  width:600px;
  height:800px;
  object-fit:cover; /* preserva aspect ratio omplint el contenedor */
  display:block;
  max-width:100%; /* responsiu: s'encollirà a pantalles petites */
}

/* fotos: Estilos para el contenedor de la galería y las imágenes */
.gallery-item {
  /* Añade un pequeño margen entre los contenedores de las fotos (opcional) */
  margin-bottom: 1rem; 
  
  /* Usa padding y fondo blanco para simular un marco/margen */
  padding: 10px; /* Tamaño del "margen" blanco */
 /* background-color: white; /* Color del "margen" */
  border-radius: 4px; /* Opcional: añade esquinas redondeadas al marco */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opcional: añade una ligera sombra */
  
  /* Asegura que el contenido (la imagen) esté contenido en el padding */
  box-sizing: border-box; 
}

.gallery-item img {
  /* Asegura que la imagen ocupe todo el espacio disponible menos el padding */
  display: block;
  width: 100%;
  height: auto;
}

/* Nuevo estilo para el fondo blanco transparente del área de contenido */
.qa-content-box {
    background-color: rgba(255, 255, 255, 0.2); /* Blanco amb 50% de transparència */
    padding: 1rem; /* Opcional: afegim espaiat interior */
    border-radius: 8px; /* Opcional: cantonades arrodonides */
}

/* Paràgrafs amb diferents alineacions */
.p-justificat{
  text-align:justify;
}
.p-centre{
  text-align:center;
}
.p-esquerra{
  text-align:left;
}
.p-dreta{
  text-align:right;
}

.dropdown-toggle::after {
  display: none !important;
}

/* Responsivitat petita */
@media (max-width:640px){
  .navbar{padding:0 0.5rem;}
  .img-600x800{width:100%; height:auto;}
  h1{font-size:1.6rem;} 
}