/* ---------- 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.8rem;
  }
  
  
  
  /* Contenido página */
  .contenedor-general {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente el contenido */
    margin-top: 5rem;
  }
  
  .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: 35rem;
    height: auto;
    display: flex; /* Añade flex para centrar la imagen */
    justify-content: center; /* Centra horizontalmente la imagen */
    margin: 0 auto;
  }
  
  .imagen-grupo img {
    border-radius: 2rem;
    max-width: 100%; /* Asegura que la imagen sea responsiva */
    height: auto;
    margin: 0 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;
  }