@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

:root{
  --bg-color:#acc0f7;
  --primary-color:brown;
  --muted:#666;
  --nav-height:70px;
  --max-width:1000px;
  --bs-body-font-family: 'Comic Neue', sans-serif, Arial;
}

/* Tipografia global */
html{
  height: 100%;
  margin:0;
  padding:0;
  font-family: 'Comic Neue', Arial, Times, serif;
  color:brown;
  font-size: medium;
  background-color: #acc0f7;  /* Fondo de color de respaldo */
}

/* 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: brown;
  height:  100%;  /*CAMBIO: Aseguramos que el body ocupe el 100% de la altura de html */
  background-color: #ffffff;  /* Fondo de color de respaldo */
  background-image: url('img/fons_pantalla_1.png');/* 1. Establece la imagen como fondo */
 /* 2. Propiedades para que la imagen se vea bien */
  background-size: contain;          /* 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;
}

/* 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;
}
/* 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;
}

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