/* Define la animación */
@keyframes fade {
    0% { opacity: 3; } /* Inicio: totalmente visible */
    50% { opacity: 0.5; } /* Mitad: semi-transparente */
    100% { opacity: 1; } /* Fin: totalmente visible nuevamente */
}

.mision{
    padding: 0% 0 0 0 ;
    font-family: 'Courier New';
    font-weight: bold;
    line-height: 2; /* Espaciado entre líneas */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    color: #2c19ad; /* Color del texto */
    margin-bottom: 1%; /* Márgenes inferiores */
    margin-top: 2%; /* Agregar margen en la parte superior */
    animation: fade 2s ease-in-out infinite; /* Nombre de la animación, duración, función de temporización, repetición */
    font-size: 50px; /* Tamaño de la fuente */
}

.mision:hover{
    font-size: 350%; /* Aumenta el tamaño de la fuente*/
}

.beneficios{
    background-color: #f2f2f2; /* Color de fondo */
    border-radius: 20px; /* Borde redondeado */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

.beneficios h2{
    font-family: 'Verdana';
    font-weight: bold;
    color: teal; /* Color del título */
}

.beneficios p {
    font-family: 'Verdana', sans-serif; /* Tipografía */ 
    font-weight: bold;
    font-style: italic;
    font-size: 16px; /* Tamaño de fuente */
    line-height: 1.6; /* Espaciado entre líneas */
    text-transform: none; /* Evitar que las letras se vuelvan mayúsculas */
    transition: color 0.3s ease; /* Transición de color */
}

.beneficios p:hover {
    color: #312fc1; /* Cambiar color al pasar el mouse */
    transform: translateX(5px); /* Desplazamiento hacia la derecha */
    transition: transform 0.5s ease; /* Transición de desplazamiento */
}

.beneficios ul {
    list-style-type: disc; /* Estilo de viñetas */
    margin-bottom: 20px; /* Margen inferior entre la lista y otros elementos */
    padding-left: 20px; /* Espaciado a la izquierda para la viñeta */
    font-family: Candara, sans-serif;
  }

  .beneficios li {
    font-size: 15px; /* Tamaño de fuente */
    line-height: 2; /* Espaciado entre líneas */
    font-family: Ginebra, sans-serif;
  }
  
  /* Estilo para resaltar los elementos de la lista */
  .beneficios li:hover {
    background-color: #69e4c7; /* Color de fondo al pasar el mouse */
    transition: background-color 0.5s ease; /* Transición suave */
    transform: scale(1.05) translateX(10px); /* Aumentar ligeramente el tamaño y mover hacia la derecha 5px */
    padding-left: 25px; /* Ajusta el espacio a la izquierda para dejar espacio a la viñeta */
}

body {
    background-image: url('/img/redesfondohd.jpg.jpeg'); /* Ruta de la imagen */
    background-size: cover; /* Cubre todo el área del cuerpo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: scroll; /* Fija la imagen en su posición original */
}

header {
    background-color: #00a1e1;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

h1, h2 {
    margin: 20px 0;
    text-align: center;
}

.beneficios, .descuentos, .recibo-electrico {
    padding: 20px;
    margin: 20px;
    display: inline-block;
    padding: 10px;
    background-color: #77bae0ee;
    transform: rotateY(30deg);
    transform-origin: center;
    box-shadow: 10px 10px 5px #888888;
}

.registro {
    background-color: #00a1e1;
    color: #322d38;
    text-align: center;
    padding: 20px;
    margin: 20px;
    border-radius: 5px; /* Bordes redondeados */
    font-family: 'Verdana', sans-serif; /* Tipografía */ 
    font-weight: bold;
    transition: color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

/* Efecto de aumento ligero al acercar el mouse */
.registro:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.boton {
    display: inline-block;
    padding: 10px 20px;
    background-color: #48208d92; /* Cambio de color de fondo */
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-family: Cambria; /* Tipo de fuente */
    font-weight: bold;
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cambio de cursor al pasar por encima */
    transition: background-color 0.3s ease; /* Transición suave del color de fondo */
}

.boton:hover {
    background-color: #46998d; /* Cambio de color de fondo al pasar el mouse */
    transform: scale(1.09); /* Aumenta ligeramente el tamaño */
    box-shadow: 0 0 20px rgba(54, 45, 140, 0.792); /* Agrega una sombra */
}