/* ---------- Variables globales ---------- */
:root {
  /* Estableciendo colores fijos */
  --Principal1: #fad768;
  --Principal2: #060401;
  --Principal3: #3F9384;
  --Secundario1: #E36900;
  --Secundario2: #F1F4FA;

  --fuentePrincipal: "Roboto", sans-serif;
}

html {
  font-family: var(--fuentePrincipal);
  scroll-behavior: smooth;
}

body {
  background-color: var(--Secundario2);
  margin: 0;
}

html,
body {
  height: 100%;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1.5rem;
}



/* Contenido página */
.contenedor-general {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente el contenido */
}

.grupo {
  text-align: center; /* Centra el texto dentro del grupo */
  width: 100%; /* Asegura que el grupo ocupe todo el ancho */
  max-width: 800px; /* Limita el ancho máximo del grupo (ajusta según necesites) */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.grupo h2 {
  font-size: 3rem;
}

.imagen-grupo {
  width: 100%;
  height: auto;
  display: flex; /* Añade flex para centrar la imagen */
  justify-content: center; /* Centra horizontalmente la imagen */
}

.imagen-grupo img {
  border-radius: 2rem;
  max-width: 100%; /* Asegura que la imagen sea responsiva */
  height: auto;
}

.texto-grupo {
  text-align: justify;
  font-size: 2rem;
  width: 100%; /* El texto ocupa el 100% del ancho del grupo */
  box-sizing: border-box; /* Incluye padding y border en el ancho total */
  padding: 0 10px; /* Añade padding horizontal al texto */
}


/*Beneficios*/
.contenedor-beneficios{
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}
.contenido-ben{
  text-align: center; /* Centra el texto dentro del grupo */
  width: 100%; /* Asegura que el grupo ocupe todo el ancho */
  max-width: 800px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
  padding: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.contenido-ben h2{
  font-size: 3rem;
}
.contenido-ben ul{
  text-align: start;
}
.contenido-ben li{
  font-size: 2rem;
}
.contenido-ben p{
 font-size: 2rem;
 text-align: justify;
}

@media (max-width: 1024px){
  .contenido-ben li{
    font-size: 1.5rem;
  }
  .contenido-ben p{
   font-size: 1.5rem;
   text-align: justify;
  }
}

/*Botones*/
.botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; 
  margin-top: 3rem;
  margin-bottom: 3rem;
}