 body{
    font-family: 'Montserrat', sans-serif !important;
}
 /*ANIMACION PARA TEXTO*/
.animation {
    animation: aparecerI 1.5s ease-out;
}
@keyframes aparecerI {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
 /* MODAL*/
.modal-cerrado {
    background-color: #04809c;
    padding: 5px 15px;
    border-radius: 5px;
    color: #ffffff;
}
#modal::backdrop {
    background-color: rgba(0, 0, 0, .55);
}
#modal {
    max-width: 0%;
}
.modal-abierto {
    background: #04809c;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    animation: curso 2s infinite;
}
@keyframes curso {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(19, 116, 145, 0);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(19, 116, 145, .7);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(19, 116, 145, 0);
    }
}
/*Card universal para pantalla completa*/
.card {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
    transition: .3s;
}
 /* Card texto */
.hero-i {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.hero-texto {
    flex: 1;
}
.linea {
    width: 90px;
    height: 5px;
    background: #f87902;
    border-radius: 10px;
    margin-bottom: 20px;
}
 /* Frase destacada */
.frase {
    background: #eef8fc;
    padding: 20px;
    border-radius: 12px;
    margin-top: 30px;
    border-left: 5px solid #04809c;
    font-family: 'Montserrat', sans-serif !important;
}
.frase strong {
    color: #04809c;
}
 /* Imagen */
.hero-imagen {
    flex: 1;
    text-align: center;
}
.hero-imagen img {
    width: 100%;
    max-width: 550px;
}
 /* Responsive */
@media(max-width:992px) {
    .hero-ingles {
        flex-direction: column;
        text-align: center;
    }
    .beneficios {
        grid-template-columns: repeat(2, 1fr);
    }
 }
 @media(max-width:600px) {
     .beneficios {
         grid-template-columns: 1fr;
     }
 }

 /*Card animacion vuelta*/
 .cont {
     perspective: 800px;
     width: 300px;
     height: 250px;
 }
 .doubleCard {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
 }
 .cont:hover .doubleCard {
     transform: rotateY(180deg);
 }
 .frontCard,
 .backCard {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     backface-visibility: hidden;
 }
 .backCard {
     transform: rotateY(180deg);
 }
 /* IMPORTANTE */
 .frontCard img,
 .backCard img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* MODAL*/
.modal-cerrado {
  background-color: #04809c !important;
  padding: 5px 15px;
  border-radius: 5px;
  color: #ffffff;
}
.modal-general {
    width: 80%;
    max-width: 900px;
    border: none;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}
.modal-general img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}
.modal-general::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
/* botn CTA para rectoria*/
.cta{
    display:flex;
    align-items:center;
    gap:12px;
    width:60px;
    height:60px;
    overflow:hidden;
    padding:10px 15px;
    border-radius:30px;
    background:#ddd;
    transition:.4s;
    text-decoration:none;
}
.cta:hover{
    width:220px;
    background:#6caad7;
}
.cta span{
    font-family: 'Montserrat', sans-serif !important;
    text-align: justify;
    white-space:nowrap;
    opacity:0;
    transform:translateX(20px);
    transition:.3s;
    font-weight:bold;
    color:#111;
}
.cta:hover span{
    opacity:1;
    transform:translateX(0);
}
.icono{
    width:40px;
    height:40px;
    flex-shrink:0;
}