/**
* Template Name: Active
* Template URL: https://bootstrapmade.com/active-bootstrap-website-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Roboto",  sans-serif;
  --nav-font: "Lato",  sans-serif;
}

body{
  font-family: helvetica;
  background-color: #d1e7f8;
}



/* Menu */

/* 🟢 Estilos para el menú */
.menu-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: #fff;
  padding: 10px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  z-index: 1050; /* Asegura que esté sobre el carrusel */
}

/* 🟢 Ajustar el `main` para que no quede oculto por el menú */
main {
  padding-top: 80px; /* Ajusta según la altura del menú */
}

.navbar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; /* Corregido */
   margin: 0 auto; /* Centra el navbar en la página */
  background-color: ;
  padding: 0.938rem;
  font-family: helvetica ;
  justify-content: center; /* Centra el contenido */
  max-width: 1200px; /* Máximo ancho del navbar */
}

/* Estilo general de los enlaces */
.navbar a {
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

/* Estilo del logo */
.logo {
  margin-right: auto; /* Empuja la lista a la izquierda */
  
}

/* Lista de navegación */
.list {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: center; /* Alinea verticalmente todos los elementos */
  gap: 2rem; /* Espaciado entre opciones */
  padding: 0; /* Evita márgenes extra */
  margin: 0 auto; /* Centra horizontalmente */
  background-color: ;
 
}

/* Oculta el checkbox y el icono del menú en desktop */
#toggler,
.navbar label {
  display: none;
}

/* 📱 Estilos para móviles */
@media screen and (max-width: 600px) {
  .menu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* Animación suave */
  }

  .list {
    flex-direction: column;
    align-items: center;
    padding: 1.25rem;
    gap: 1rem; /* Espacio entre elementos en móvil */
  }

  .navbar label {
    display: inline-flex;
    align-items: center;
    cursor: pointer; /* Corregido */
    font-size: 1.5rem;
  }

  #toggler:checked ~ .menu {
    max-height: 100%;
  }
}

.navbar ul li a:hover {
  color: #007bff;
}

/* 🔹 Estilos base: Todos los enlaces en negro sin línea al inicio */
.navbar ul li a {
  position: relative;
  padding-bottom: 5px;
  color: black; /* Todos inician negros */
  transition: color 0.3s ease-in-out;
}

/* 🔹 Línea invisible por defecto */
.navbar ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: transparent; /* Inicialmente no visible */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* 🔹 Cuando se hace clic (activo), cambia color y aparece la línea */
.navbar ul li a.active {
  color: #007bff; /* Color al hacer clic */
}

.navbar ul li a.active::after {
  background-color: #007bff; /* Línea azul al hacer clic */
  transform: scaleX(1);
}

/* 🔹 También efecto en hover */
.navbar ul li a:hover {
  color: #007bff;
}

.navbar ul li a:hover::after {
  background-color: #007bff;
  transform: scaleX(1);
}


/* CArousel */

/* Contenedor principal */
.row {
  margin: 5rem 0;
}



/* Contenedor interno */
.contenedor-1 {
  width: 80%;
  height: auto;
  word-wrap: break-word;
  background-color: ;
  margin: auto;
}

#club{
  color: #1565c0;
  text-align: start;
}

.carousel-item {
  height: 400px; /* Ajusta la altura que desees para el carrusel */
}

.carousel-item img {
  width: 100%;   /* Ocupa todo el ancho del contenedor */
  height: 100%;  /* Ocupa toda la altura del contenedor */
  object-fit: cover; /* Hace que la imagen cubra todo el contenedor sin distorsionarse */
}


/* SECCIÓN ACTUALITAT*/

/*festa colonias nadal */
/* Contenedor principal */
.contenedor_informativo {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

/* Fila horizontal */
.contenedor_informativo .fila-horizontal {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor_informativo .contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.festa {
  text-align: center;
}

/* Columnas */
.contenedor_informativo .columna {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Encabezado */
.act {
  text-align: center;
}


/* Imagen */
.columna img {
  width: 100%;
  max-width: 400px;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_festa {
    width: 95%;
    padding: 1rem;
  }

  .contenedor_festa .contenedor-columnas {
    flex-direction: column;
  }

  .contenedor_festa .columna {
    text-align: left;
    padding: 1rem;
  }

 
}


/*festa castanyada */
/* Contenedor principal */
.contenedor_informativo {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

/* Fila horizontal */
.contenedor_informativo .fila-horizontal {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor_informativo .contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.festa {
  text-align: center;
}

/* Columnas */
.contenedor_informativo .columna {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Encabezado */
.act {
  text-align: center;
}


/* Imagen */
.columna img {
  width: 100%;
  max-width: 400px;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_festa {
    width: 95%;
    padding: 1rem;
  }

  .contenedor_festa .contenedor-columnas {
    flex-direction: column;
  }

  .contenedor_festa .columna {
    text-align: left;
    padding: 1rem;
  }

 
}


/* PROGRAMA DE ACTIVIDADES 2025/2026 */
/* Contenedor principal */
.contenedor_informativo {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

/* Fila horizontal */
.contenedor_informativo .fila-horizontal {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

.aniversari {
  text-align: center;
}

/* Encabezado */
.act {
  text-align: center;
}
/* Contenedor de columnas */
.contenedor_informativo .contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start; /* ✅ evita que las columnas se estiren en altura */
}

/* Columna de texto (ocupa el resto) */
.contenedor_informativo .columna.texto {
  flex: 1; /* ocupa el espacio disponible */
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Columna de imagen (solo lo que ocupa su contenido) */
.contenedor_informativo .columna.imagen-tallers {
  flex: 0 0 auto;
  padding: 1.5rem;
  background: #ffffff;
  text-align: center;
}

.columna.imagen-tallers img {
  width: 100%;
  max-width: 500px; /* ajusta según lo grande que quieras */
  height: auto;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}


/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_informativoo {
    width: 95%;
    padding: 1rem;
  }

  .contenedor_informativoo .contenedor-columnas {
    flex-direction: column; /* apila texto e imagen */
  }

  .contenedor_informativoo .columna {
    text-align: left;
    padding: 1rem;
  }

  .columna.imagen-tallers {
    text-align: center;
  }
}



/*ACTUALITAT DEL VERANO*/

.contenedor_casalestiu {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

.act, .text {
  text-align: center;
}

.columna-horizontal {
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Fila con texto + imágenes verticales */
.fila-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.columna-texto {
  flex: 2;
  min-width: 280px;
  background: #fff;
  padding: 1.5rem;
}

.columna-texto .vertical {
  display: block;
  margin: 1rem auto 0 auto; /* top margin + auto en laterales */
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 0.5rem;

}

.columna-vertical {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 1.5rem;
}

.columna-vertical img {
  width: 100%;
  max-width: 300px;
  border-radius: 0.5rem;
}

/* Fila con imágenes horizontales */
.fila-horizontal {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  background: #fff;
}

.fila-horizontal img {
  width: 48%;
  max-width: 600px;
  height: auto;
  border-radius: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .fila-1 {
    flex-direction: column;
  }

  .fila-horizontal {
    flex-direction: column;
    align-items: center;
  }

  .fila-horizontal img {
    width: 100%;
    max-width: 90%;
  }
}


/*ACTUALITAT NOTICIES ANIVERSARI*/

/* Contenedor principal */
.contenedor_casalestiu {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

/* Fila horizontal */
.contenedor_casalestiu .columna-horizontal {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor_casalestiu .contenedor-columnass {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.text {
  text-align: center;
}

/* Columnas */
.contenedor_casalestiu .columnaa {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Encabezado */
.act {
  text-align: center;
}


/* Imagen */
.columnaa img {
  width: 100%;
  max-width: 400px;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_casalestiu {
    width: 95%;
    padding: 1rem;
  }

  .contenedor_casalestiu .contenedor-columnass {
    flex-direction: column;
  }

  .contenedor_casalestiu .columnaa {
    text-align: left;
    padding: 1rem;
  }

 
}




/*ACTUALITAT NOTICIES ANIVERSARI*/

/* Contenedor principal */
.contenedor_informativo {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

/* Fila horizontal */
.contenedor_informativo .fila-horizontal {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor_informativo .contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.aniversari {
  text-align: center;
}

/* Columnas */
.contenedor_informativo .columna {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Encabezado */
.act {
  text-align: center;
}


/* Imagen */
.columna img {
  width: 100%;
  max-width: 400px;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_informativo {
    width: 95%;
    padding: 1rem;
  }

  .contenedor_informativo .contenedor-columnas {
    flex-direction: column;
  }

  .contenedor_informativo .columna {
    text-align: left;
    padding: 1rem;
  }

 
}


/*ACTUALITAT NOTICIES CASAL*/

/* Contenedor principal */
.contenedor_noti {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
  
}

/* Fila horizontal */
.contenedor_noti .fila-horizontal {
  background: #ffffff ;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor_noti .contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.casal{
  text-align: center;
}
/* Columnas */
.contenedor_noti .columna {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Encabezado */
.act {
  text-align: center;
}

/* Botón */
.btn {
  background-color: #e1c405 ; 

  border: none;
  color: white;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn:hover {
  background-color: #f4e841;
  transform: scale(1.05);
}

/* Imagen */
.columna img {
  width: 100%;
  max-width: 400px;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_noti {
      width: 95%;
      padding: 1rem;
  }

  .contenedor_noti .contenedor-columnas {
      flex-direction: column;
  }

  .contenedor_noti .columna {
      text-align: left;
      padding: 1rem;
  }

  .btn {
      width: 100%;
      text-align: center;
  }
}
*/


/*COLONIES I CAMPAMENTS*/


/*ACTUALITAT NOTICIES*/

/* Contenedor principal */
.contenedor_noti {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
}

/* Fila horizontal */
.contenedor_noti .fila-horizontal {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: justify;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor_noti .contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.casal {
  text-align: center;
}

/* Columnas */
.contenedor_noti .columna {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: black;
  text-align: start;
}

/* Encabezado */
.act {
  text-align: center;
}

/* Botón */
.btn {
  background-color: #e1c405;
  border: none;
  color: white;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn:hover {
  background-color: #f4e841;
  transform: scale(1.05);
}

/* Imagen */
.columna img {
  width: 100%;
  max-width: 400px;
  border-radius: 0.5rem;
  display: block;
  margin: 0 auto;
}

/* RESPONSIVE: Diseño para móviles */
@media (max-width: 768px) {
  .contenedor_noti {
    width: 95%;
    padding: 1rem;
  }

  .contenedor_noti .contenedor-columnas {
    flex-direction: column;
  }

  .contenedor_noti .columna {
    text-align: left;
    padding: 1rem;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}


/*COLONIES I CAMPAMENTS*/

/* Contenedor principal */
.colonias-campamento {
  width: 80%;
  margin: 2rem auto;
  background: #f0f0f0;
  padding: 2rem;
  display: block;
}

/* Filas horizontales */
.fila-horizontal-superior,
.fila-horizontal-inferior {
  background: #ffffff;
  color: #000;
  padding: 1.5rem;
  text-align: start;
  margin-bottom: 1.5rem;
}

/* Contenedor de columnas */
.contenedor-columnas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Columnas */
.subcolumna {
  flex: 1;
  padding: 1.5rem;
  background: #ffffff;
  color: #000;
  text-align: start;
  border-radius: 0rem;
  min-width: 250px;
}

/* Encabezado */
.notici {
  text-align: center;
}

/* Bloque inferior: Inscripció + Imatge */
.fila-horizontal-inferior-doscolumnas {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: #ffffff;
  padding: 2rem;
  margin-top: 2rem;
  border-radius: 0rem;
  align-items: flex-start;
}

/* Columna de texto */
.texto-inscripcion {
  flex: 1;
  min-width: 280px;
  text-align: start;
  background-color: ;
}

/* Columna de imagen */
.imagen-inscripcion {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ;
  
}

.imagen-inscripcion img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.imagen-inscripcion img:hover {
  transform: scale(1.1);
}

/* RESPONSIVE: Móviles */
@media (max-width: 768px) {
  .colonias-campamento {
    width: 95%;
    padding: 1rem;
  }

  .contenedor-columnas {
    flex-direction: column;
    align-items: center;
  }

  .subcolumna {
    width: 100%;
    text-align: left;
    padding: 1rem;
  }

  .fila-horizontal-inferior-doscolumnas {
    flex-direction: column;
  }

  .imagen-inscripcion img {
    max-width: 100%;
  }
}



/* QUI SOM*/

/* Ajuste del contenedor principal */
.contenedor-2 {
  width: 100%;
  min-height: 10rem; /* O un valor menor si es necesario */
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Reduce el espacio entre elementos */
  margin-top: 8rem; /* Asegura que no tenga margen extra */
  padding-top: 2rem; /* Agrega un pequeño espacio para no chocar con el menú */
}
.qui{
  color: #000;
  text-align: center;
}
/* Ajuste del contenedor superior */
.contenedor-superior {
  background-color: #fff;
  width: 100%;
  height: 20rem;
  text-align: center;
  margin-top: 0;
  padding-top: 1rem;
  background-image: url(../img/20240726_124331.jpg);
  background-size: cover; /* La imagen se ajusta al contenedor */
  background-position: center 60%; /* Ajusta un poco el eje vertical */
  background-repeat: no-repeat;
}


/* Ajuste de las cajas inferiores */
.contenedor-inferior {
  display: flex;
  gap: 1rem; /* Espacio entre las cajas */
}

.caja {
  flex: 1;
  height: auto;
  word-wrap: break-word; /* Asegura que las palabras largas se dividan para evitar desbordamiento */
  margin: 1rem; /* Reduce los márgenes */
}

.fundesplai {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background-color: ; /* Puedes cambiar el color de fondo si lo prefieres */
  flex-wrap: wrap; /* Esto permite que las imágenes se ajusten si no caben en una sola fila */
}

.fundesplai-img,
.fundesplai-img2 {
  height: auto;
  max-width: 100%; /* Las imágenes no superarán el 100% del ancho disponible */
  object-fit: contain;
  margin: 0 1em;
}

/* Opcional: un tamaño máximo para la imagen */
.fundesplai-img {
  max-height: 150px; /* Tamaño máximo para la primera imagen */
}

.fundesplai-img2 {
  max-height: 100px; /* Tamaño máximo para la segunda imagen */
}

/* Responsive: Cuando la pantalla es pequeña, las imágenes se ajustan */
@media (max-width: 768px) {
  .fundesplai {
      justify-content: center; /* Alinea las imágenes al centro */
  }

  .fundesplai-img,
  .fundesplai-img2 {
      max-height: 120px; /* Ajusta el tamaño para pantallas pequeñas */
      margin: 0.5em; /* Reduce el margen */
  }
}


/* QUÈ FEM? */

/* Contenedor del slider */
.slider {
  background-color: #83b2d9;
  max-width: 1400px;
  color: #fff;
  grid-template-columns: 35% 65%;
  display: grid;
  position: relative;
  font-family: sans-serif; /* Se aplica solo dentro del slider */
  margin: auto;
  padding: 1rem;
  margin-top: 10rem; /* Ajusta este valor según necesites */
  
}



/* Contenedor de contenido */
.slider .content_container {
  padding: 40px;
}

/* Navegación de slides */
.slider .slide_navigation {
  list-style: none;
  padding: 0;
}

.slider .slide_navigation li {
  display: block;
  margin-bottom: 10px;
}

.slider .slide_navigation a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  transition: 0.3s ease-in-out;
  display: inline-block;
}

.slider .slide_navigation a:hover,
.slider .slide_navigation a.active {
  font-weight: bold;
  color: yellow;
}

/* Contenedor de slides */
.slider .slides {
  overflow-y: hidden; /* Evita el scroll manual */
  max-height: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espaciado entre slides */
  scroll-behavior: smooth;
}

/* Estilos de cada slide */
.slider .slide {
  min-height: 500px;
  background-color: #ffff7f;
  display: flex;
  padding: 40px;
  color: #333;
  align-items: center;
  transition: 0.5s ease-in-out;
}

/*Fon size*/
.inner_content, #descripcio{
  font-size: 1.8rem;
}



/* Alternancia de colores */
.slider .slide:nth-child(even) {
  background-color: #fca0a0;
}

@media screen and (max-width: 768px) {
  .slider {
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-template-columns: 1fr; /* Elimina la división de columnas */
      padding: 0.5rem;
      margin-top: 7rem; /* Aumenta la distancia en móviles */
  }

  .slider .slides {
      max-height: unset; /* Permitir que los slides crezcan */
      overflow-y: auto; /* Permitir scroll si es necesario */
  }

  .slider .slide {
      min-height: auto; /* Permitir que la altura se adapte al contenido */
      padding: 20px; /* Reducir el padding en pantallas pequeñas */
      text-align: center; /* Centrar texto */
  }

  .slider .content_container {
      padding: 20px;
  }

  .slider .slide_navigation {
      text-align: center; /* Centrar navegación */
      margin-top: 10px;
  }

  .slider .slide_navigation a {
      font-size: 0.9rem; /* Reducir el tamaño del texto */
  }
}


h1 {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 400;
}

.gallery-fem {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background: #f2f2f2;
  padding: 2rem;
  color: #333;
}

.polaroid {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  text-align: center;
  position: relative;
}

.polaroid:hover {
  transform: rotate(-2deg) scale(1.03);
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

.polaroid img {
  width: 100%;
  height: auto; /* Mantiene la proporción sin estirarlas verticalmente */
  object-fit: cover; /* Asegura que se recorten si es necesario para llenar el contenedor sin deformarse */
  max-height: 400px; /* Límite de altura para que no se haga tan grande */
  border-radius: 8px;
  transition: transform 0.4s ease;
}

.polaroid:hover img {
  transform: scale(1.05);
}

/* Responsive para pantallas pequeñas */
@media(max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 600px) {
  .gallery-fem {
    grid-template-columns: 1fr;
  }
}


/*GALERIA*/

/* Estilos generales */
.body-gallery {
  font-family: Arial, sans-serif;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column; /* Asegura que los elementos estén en columna */
  align-items: center;
  margin-top: 12rem;
  

}

/* Contenedor de la galería */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas grandes */
  grid-auto-rows: 200px; /* Altura base de los elementos */
  gap: 10px;
  width: 90%;
  max-width: 1200px;
}

/* Estilos de las imágenes */
.item {
  overflow: hidden;
  border-radius: 10px;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.item:hover img {
  transform: scale(1.1);
}

/* Distribución de imágenes como en la referencia */
.item1 { grid-column: span 1; grid-row: span 2; } /* Imagen grande */
.item2 { grid-column: span 1; grid-row: span 3; }
.item3 { grid-column: span 1; grid-row: span 2; } /* Imagen vertical */
.item4 { grid-column: span 1; grid-row: span 1; }
.item5 { grid-column: span 1; grid-row: span 1; }
.item6 { grid-column: span 2; grid-row: span 2; } /* Imagen horizontal */
.item7 { grid-column: span 1; grid-row: span 2; }
.item8 { grid-column: span 1; grid-row: span 2; }
.item9 { grid-column: span 2; grid-row: span 2; }
.item10 { grid-column: span 1; grid-row: span 2; }
.item11 { grid-column: span 1; grid-row: span 2; }
.item12 { grid-column: span 1; grid-row: span 2; }

/* Adaptación para pantallas medianas */
@media (max-width: 768px) {
  .gallery {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 150px;
  }

  .item1, .item6 {
      grid-column: span 2;
  }
}

/* Adaptación para móviles */
@media (max-width: 480px) {
  .gallery {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
  }

  .item {
      grid-column: span 1;
  }
}



/*TREBALLLA AMB NOSALTRES*/
/* Contenedor principal */
.contenedor-treballa {
  display: flex;
  justify-content: space-between; /* Espaciado uniforme entre columnas */
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  min-height: 100vh;
  flex-wrap: nowrap; /* Evita que las columnas se vayan abajo en pantallas grandes */
  margin: auto;
  margin-top: 5rem;
}

.textre{
  color: #83b2d9;
}

/* Estilo de las columnas */
.columna1, .columna2, .columna3 {
  background: #ffffff;
  padding: 20px;
  width: 33.3%; /* Todas ocupan el mismo ancho */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box; /* Evita que padding afecte el tamaño */
}

/* Ajuste para imágenes dentro de cada columna */
.foto1, .foto2, .foto3, .foto4 {
  width: 100%;
  height: 250px; /* Tamaño fijo para evitar desbordes */
  margin: 10px 0;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

.foto2 {
  background-image: url(../img/WhatsApp\ Image\ 2025-03-27\ at\ 13.26.28\ \(2\).jpeg);
}

.foto4 {
  background-image: url(../img/WhatsApp\ Image\ 2025-03-27\ at\ 13.26.28\ \(1\).jpeg);
}

/* RESPONSIVE */

/* En tablets (dos columnas) */
@media (max-width: 1024px) {
  .contenedor-treballa {
    flex-wrap: wrap; /* Permite que las columnas bajen */
    justify-content: center; /* Centra las columnas */
  }

  .columna1, .columna2, .columna3 {
    width: 48%; /* Pasa de 3 columnas a 2 */
  }
}

/* En móviles (una columna) */
@media (max-width: 768px) {
  .contenedor-treballa {
    flex-direction: column; /* Hace que las columnas se pongan en vertical */
    align-items: center; /* Centra las columnas */
  }

  .columna1, .columna2, .columna3 {
    width: 100%; /* Cada columna ocupa el 100% */
  }
}



/*CONTACTE*/

/* Estilos generales */
.contacte {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, sans-serif;
  margin-top: 10rem; /* Ajusta este valor según necesites */
}

/* Contenedor principal */
.subpiso1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start; /* Alinea desde arriba */
  gap: 40px; /* Espacio entre columnas */
  padding: 4rem;
  max-width: 1200px; /* Máximo ancho */
  margin: auto; /* Centrado */
}

/* Estilos de las columnas */
.subcolumna1, .subcolumna2 {
  width: 45%; /* Cada columna ocupa casi la mitad */
  min-width: 320px;
  background: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden; /* Evita que el contenido sobresalga */
}

/* Ajuste de altura para evitar desbordamiento */
.subcolumna1 {
  align-self: flex-start;
}

/* Centrar verticalmente la segunda columna */
.subcolumna2 {
  align-self: center; /* Centra con respecto a la primera */
}


/* Sección interna con fondo amarillo */
.onsom {
  width: 100%;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box; /* Evita que el padding cause desbordamiento */
}

/* Ajuste del mapa */
iframe {
  width: 100%;
  height: 250px;
  border: none;
  border-radius: 10px;
}


/* Alinear iconos con el texto */
.contacto-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
}

/* Ajuste de tamaño de iconos */
.contacto-item i {
  font-size: 2rem;
  color: blue;
}

/* Ajuste del texto de contacto */
.contacto-item p {
  font-size: 1.5rem;
  color: blue;
  margin: 0;
}

/* Formulario */
.form-container {
  width: 100%;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* Solo los estilos dentro de .form-container */
        .form-container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .form-container body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

        /* Estilos para el contenedor del formulario */
        .form-container {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            margin: auto;
        }

        .form-container h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-container .form-group {
            margin-bottom: 15px;
        }

        .form-container label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-container input, .form-container textarea {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 16px;
        }

        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .form-container button:hover {
            background-color: #45a049;
        }

        .form-container .response-message {
            margin-top: 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: green;
        }

        .form-container small {
            display: block;
            font-size: 12px;
            color: #777;
        }

/* Responsive para tablets y móviles */
@media (max-width: 1024px) {
  .subpiso1 {
    padding: 2rem;
    gap: 20px;
  }

  .subcolumna1, .subcolumna2 {
    width: 100%; /* Se expanden para ocupar el ancho disponible */
    min-width: auto;
  }

  .subcolumna2 {
    align-self: flex-start; /* Elimina la alineación centrada en pantallas pequeñas */
  }
}

/* Responsive para móviles pequeños */
@media (max-width: 600px) {
  .subpiso1 {
    padding: 1rem;
  }

  .onsom {
    padding: 15px;
  }

  .form-container {
    padding: 15px;
  }

  .form-container h1 {
    font-size: 1.5rem;
  }

  .form-group input, 
  .form-group textarea {
    font-size: 14px;
    padding: 8px;
  }

  .form-container button {
    font-size: 14px;
    padding: 8px;
  }

  .contacto-item {
    flex-direction: column;
    gap: 5px;
  }

  .contacto-item i {
    font-size: 1.5rem;
  }

  .contacto-item p {
    font-size: 1.2rem;
  }
}


/*REDES */
/* Estilos generales */
.xarxes {
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
  margin-top: 5rem;
}
.redes{
  color: #d71f10 ;
}
/* Contenedor de los iconos */
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem; /* Ajusta el espacio entre iconos */
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Estilo de cada contacto */
.contacto-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Iconos más grandes */
.contacto-item i {
  font-size: 2.5rem;
  color: #000;
}

/* Ajuste del texto */
.contacto-item p {
  font-size: 1.4rem;
  color: #000;
  margin: 0;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .social-links {
    flex-direction: column;
    align-items: flex-start; /* 🔹 Alinea a la izquierda */
    justify-content: flex-start;
    gap: 15px;
  }

  .contacto-item {
    width: 100%;
    justify-content: flex-start; /* 🔹 Asegura que el icono y el texto estén alineados */
  }

  .contacto-item i {
    font-size: 2rem;
  }

  .contacto-item p {
    font-size: 1.2rem;
  }

}