html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', sans-serif;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}


.hero { 
  background-image: url('../img/fondos/fondo (1).jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  text-align: center;
  transition: background-image 1s ease-in-out;
}

body, html {
  margin: 0;
  padding: 0;
}


.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 0;
}
.contenido {
  position: relative;
  z-index: 1;
  margin: 80px;
  padding: 20px;
}

/* Estilos principales */
.distrito-info {
	width: 100%;
  height: 100%;
  padding: 40px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.container {
	width: 100%;
  height: auto;
  margin: 0 auto;
}

.distrito-info h2 {
  text-align: center;
  color: #0b3d91;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.descripcion {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  color: #333;
}

.distrito-info h3 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #064663;
}

.grupos-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.grupo-card {
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 20px;
  max-width: 300px;
  flex: 1 1 250px;
  transition: transform 0.3s;

}

.berthier{
  border: 6px solid;
  border-image: linear-gradient(20deg, red, yellow, green);
  border-image-slice: 1;
  padding: 20px;
}
.berthier a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid red;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: red;
}
.berthier a:hover{
  color: white;
  background-color: red;
}

.meli{
  border: 6px solid;
  border-image: linear-gradient(45deg,#151935,#151935,white,yellow,yellow,red,red);
  border-image-slice: 1;
  padding: 20px;
}
.meli a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #151935;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #151935;
}
.meli a:hover{
  color: white;
  background-color: #151935;
}

.muller{
  border: 6px solid;
  border-image: linear-gradient(45deg,#2d83ff,#2d83ff,black,red);
  border-image-slice: 1;
  padding: 20px;
}
.muller a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #2d83ff;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #2d83ff;
}
.muller a:hover{
  color: white;
  background-color: #2d83ff;
}


.sagrada{
  border: 6px solid;
  border-image: linear-gradient(45deg,green,yellow,green,yellow);
  border-image-slice: 1;
  padding: 20px;  
}
.sagrada a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid green;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: green;
}
.sagrada a:hover{
  color: white;
  background-color: green;
}


.houssay{
  border: 6px solid;
  border-image: linear-gradient(45deg,#329b45,#d3ff5f,#d3ff5f,#329b45,red);
  border-image-slice: 1;
  padding: 20px;
}
.houssay a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #329b45;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #329b45;
}
.houssay a:hover{
  color: white;
  background-color: #329b45;
}

.sumampa{
  border: 6px solid;
  border-image: linear-gradient(45deg,red,yellow,yellow,red,red,red,blue,blue,red,red,red);
  border-image-slice: 1;
  padding: 20px;
}
.sumampa a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid red;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: red;
}
.sumampa a:hover{
  color: white;
  background-color: red;
}

.page{
  border: 6px solid;
  border-image: linear-gradient(45deg,darkblue,darkblue,white,red);
  border-image-slice: 1;
  padding: 20px;  
}
.page a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid darkblue;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: darkblue;
}
.page a:hover{
  color: white;
  background-color: darkblue;
}

.antartida{
  border: 6px solid;
  border-image: linear-gradient(45deg,black,lightblue,white,lightblue,black);
  border-image-slice: 1;
  padding: 20px;
}
.antartida a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid black;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: black;
}
.antartida a:hover{
  color: white;
  background-color: black;
}


.esposito{
  border: 6px solid;
  border-image: linear-gradient(45deg,#ff002b,#ff002b,white,#6c00ff,white,yellow);
  border-image-slice: 1;
  padding: 20px;  
}
.esposito a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #ff002b;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #ff002b;
}
.esposito a:hover{
  color: white;
  background-color: #ff002b;
}


.marie{
  border: 6px solid;
  border-image: linear-gradient(45deg,orange,orange,#6e007f,orange,red,blue,green,yellow);
  border-image-slice: 1;
  padding: 20px;  
}
.marie a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid orange;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: orange;
}
.marie a:hover{
  color: white;
  background-color: orange;
}


.carlo{
  border: 6px solid;
  border-image: linear-gradient(45deg,#352500,#352500,#ffb200,white);
  border-image-slice: 1;
  padding: 20px;  
}
.carlo a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #352500;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #352500;
}
.carlo a:hover{
  color: white;
  background-color: #352500;
}

.champagnat{
  border: 6px solid;
  border-image: linear-gradient(45deg,red,#fdfd48,red,#56fd48,red,white,red);
  border-image-slice: 1;
  padding: 20px;  
}
.champagnat a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid red;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: red;
}
.champagnat a:hover{
  color: white;
  background-color: red;
}
.libertador{
  border: 6px solid;
  border-image: linear-gradient(45deg,darkblue,lightblue,lightblue,white,lightblue,lightblue,darkblue);
  border-image-slice: 1;
  padding: 20px;  
}
.libertador a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid darkblue;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: darkblue;
}
.libertador a:hover{
  color: white;
  background-color: darkblue;
}


.guadalupe{
  border: 6px solid;
  border-image: linear-gradient(45deg,red,darkblue,red,darkblue,red,darkblue);
  border-image-slice: 1;
  padding: 20px;  
}
.guadalupe a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid darkblue;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: darkblue;
}
.guadalupe a:hover{
  color: white;
  background-color: darkblue;
}



.maria{
  border: 6px solid;
  border-image: linear-gradient(45deg,#27A6F5,yellow,#27A6F5,yellow,#27A6F5);
  border-image-slice: 1;
  padding: 20px;  
}
.maria a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #27A6F5;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #27A6F5;
}
.maria a:hover{
  color: white;
  background-color: #27A6F5;
}

.auxi{
  border: 6px solid;
  border-image: linear-gradient(45deg,#733100,yellow,red);
  border-image-slice: 1;
  padding: 20px;  
}
.auxi a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #733100;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #733100;
}
.auxi a:hover{
  color: white;
  background-color: #733100;
}


.fatima{
  border: 6px solid;
  border-image: linear-gradient(45deg,white,yellow,red,white);
  border-image-slice: 1;
  padding: 20px;  
}
.fatima a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid yellow;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: yellow;
}
.fatima a:hover{
  color: white;
  background-color: yellow;
}



.apostol{
  border: 6px solid;
  border-image: linear-gradient(45deg,yellow,yellow,yellow,yellow,#27A6F5,#27A6F5,#27A6F5,#27A6F5);
  border-image-slice: 1;
  padding: 20px;  
}
.apostol a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid red;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: red;
}
.apostol a:hover{
  color: white;
  background-color: red;
}

.roque{
  border: 6px solid;
  border-image: linear-gradient(45deg,#361700,#361700,yellow,green,#361700,#361700);
  border-image-slice: 1;
  padding: 20px;  
}
.roque a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #361700;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #361700;
}
.roque a:hover{
  color: white;
  background-color: #361700;
}

.barroso{
  border: 6px solid;
  border-image: linear-gradient(45deg,#0043C9,white,#0043C9,white,#0043C9,white,#0043C9);
  border-image-slice: 1;
  padding: 20px;  
}
.barroso a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #0043C9;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #0043C9;
}
.barroso a:hover{
  color: white;
  background-color: #0043C9;
}


.pablo{
  border: 6px solid;
  border-image: linear-gradient(45deg,darkblue,darkblue,white,red,darkblue,red,red,white,darkblue,red);
  border-image-slice: 1;
  padding: 20px;  
}
.pablo a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #0043C9;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #0043C9;
}
.pablo a:hover{
  color: white;
  background-color: #0043C9;
}

.rosario{
  border: 6px solid;
  border-image: linear-gradient(45deg,#699AFF,white,#699AFF,white,#699AFF,white,#699AFF);
  border-image-slice: 1;
  padding: 20px;  
}
.rosario a{
  text-decoration: none;
  font-weight: 700;
  border: 3px solid #699AFF;
  border-radius: 20px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  font-size: 10.5pt;
  color: #699AFF;
}
.rosario a:hover{
  color: white;
  background-color: #699AFF;
}



.grupo-card:hover {
  transform: scale(1.03);
}

.grupo-card h4 {
	text-align: center;
  margin-bottom: 10px;
  color: #005f73;
}

.grupo-card p {
  color: #444;
  font-size: 0.95rem;
  text-align: center;
}

/* ✅ Responsive para celulares */
@media (max-width: 768px) {

  .distrito-info {
    padding: 30px 15px;
  }

  .distrito-info h2 {
    font-size: 2rem;
  }

  .distrito-info h3 {
    font-size: 1.5rem;
  }

  .descripcion {
    font-size: 1rem;
    padding: 0 10px;
  }

  .grupos-lista {
    flex-direction: column;
    align-items: center;
  }

  .grupo-card {
    max-width: 90%;
  }
}