body {
    background: #1f1f1f;
}

*{
    font-family: "Montserrat";
}

.card{
    max-width: 400px;
    height: 400px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    background: transparent;
    border: none;
    border-radius: 10px;
}

.box{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition: 2s ease;
}

.card-img{
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    height: 500px;
    border-radius: 10px;
}

.card-body{
    position: absolute;
    top: 0;
    left: 0;
    background: #1f1f1f;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.card-body .description{
    transform-style: preserve-3d;
    padding: 30px 20px;
    color: #f1f1f1;
    transform: translateZ(100px) !important;
    height: 80%;
    background: #642B73;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #3649dd, #2d42dd);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #3649dd, #2d42dd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.description span{
    color: #f0f0f0;
}

.card:hover .box {
    transform: rotateY(180deg);
    font-size: .9rem;
}

.banner-frase {
    width: 100%;
    height: 200px; /* Ajusta la altura según necesites */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow: hidden;
    margin-top: 20px;
}

.frase-container {
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.frase-container h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    position: absolute; /* Ambos en el mismo sitio */
}

/* EL DESTELLO DE FONDO */
.banner-frase {
    position: relative;
    width: 100%;
    height: 300px; /* Un poco más de espacio para el resplandor */
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(45, 66, 221, 0.15) 0%, transparent 70%);
}

/* El círculo de luz que se mueve suavemente */
.banner-frase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(54, 73, 221, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(50px);
    animation: pulseLight 8s infinite alternate;
    z-index: 0;
}

.marco-gerentes {
    /* Color azul de tus destellos (basado en rgba(54, 73, 221, 0.4)) */
    background: #3649dd; 
    
    /* EL SECRETO DEL REDONDEO: */
    border-radius: 40px !important; 
    overflow: hidden; /* Esto obliga a la imagen a heredar el redondeo */
    
    padding: 15px; /* Espacio para que se vea el fondo azul como un marco */
    display: inline-block;
    box-shadow: 0 15px 40px rgba(54, 73, 221, 0.3); /* Sombra azulada */
    
    /* Para bajarlo un poco más */
    margin-top: 40px; 
}

.img-gerentes {
    display: block;
    max-width: 100%;
    height: auto;
    /* Redondeamos también la imagen internamente por seguridad */
    border-radius: 30px; 
}

/* Ajuste para que en móviles no se rompa */
@media (max-width: 768px) {
    .marco-gerentes {
        border-radius: 20px !important;
        margin: 20px 10px;
    }
    .img-gerentes {
        border-radius: 15px;
    }
}

.banner-cotiza {
    position: relative;
    width: 100%;
    height: 400px; /* Un poco más alto para que quepan las 4 líneas y el brillo */
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, rgba(45, 66, 221, 0.15) 0%, transparent 70%);
    overflow: hidden;
    margin-top: 20px;
}

/* EL CÍRCULO DE LUZ (Mismo efecto que el tuyo) */
.banner-cotiza::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(54, 73, 221, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(50px);
    animation: pulseLight 8s infinite alternate; /* Usa la misma animación que ya tienes */
    z-index: 0;
}

/* CONTENEDOR DE TEXTOS */
.cotiza-glow-container {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column; /* LA CLAVE: los pone uno abajo de otro */
    gap: 10px; /* Espacio entre líneas */
}

/* ESTILO DE TEXTOS SIMILAR A TUS H1 */
.cotiza-glow-container h2, 
.cotiza-glow-container h3, 
.cotiza-glow-container p, 
.cotiza-glow-container a {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    margin: 0;
    color: #fff; /* O el color que prefieras */
}

.cotiza-principal {
    font-size: 3.5rem; /* Más grande como pediste */
    font-weight: 900;
}

.cotiza-sub {
    font-size: 1.8rem;
    font-weight: 700;
}

.cotiza-tel {
    font-size: 1.5rem;
    font-weight: 600;
}

.cotiza-email {
    font-size: 1.3rem;
    text-decoration: none;
    text-transform: lowercase !important; /* Mails mejor en minúscula */
}

.imagen_corp {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente si el contenedor tiene altura */
    padding-top: 20px;       /* Control extra para bajarla más si necesitas */
}

.responsive {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacios extra en la base de la imagen */
}


.texto-largo {
    font-size: clamp(1rem, 3vw, 2.2rem);
    color: #ffffff;
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
    animation: fadeLoop 15s infinite ease-in-out;
}

.texto-corto {
    font-size: clamp(3rem, 12vw, 10rem); 
    font-weight: 900;
    background: linear-gradient(135deg, #00d2ff, #3649dd, #9d50bb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 0px 20px rgba(54, 73, 221, 0.8));
    opacity: 0;
    /* Inicia a los 5 segundos */
    animation: zoomLoop 15s infinite ease-in-out 5s; 
}

.texto-eslogan {
    font-size: clamp(1.5rem, 5vw, 4rem);
    font-weight: 800;
    font-style: italic;
    letter-spacing: 3px;
    opacity: 0;
    
    /* EFECTO ORO METÁLICO */
    background: linear-gradient(
        to bottom, 
        #BF953F, 
        #FCF6BA, 
        #B38728, 
        #FBF5B7, 
        #AA771C
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Resplandor dorado para que destaque en la oscuridad */
    filter: drop-shadow(0px 0px 15px rgba(191, 149, 63, 0.6));
    
    /* Inicia a los 10 segundos del ciclo de 15s */
    animation: zoomLoop 15s infinite ease-in-out 10s; 
    z-index: 3;
}

/* --- ANIMACIONES RECALIBRADAS --- */

@keyframes fadeLoop {
    0%, 25% { opacity: 1; transform: scale(1); filter: blur(0); }
    33.33%, 100% { opacity: 0; transform: scale(0.8); filter: blur(10px); }
}

@keyframes zoomLoop {
    0% { opacity: 0; transform: scale(0.1); filter: blur(20px); }
    /* Se mantiene visible un 25% del tiempo total (aprox 4s) */
    10%, 30% { opacity: 1; transform: scale(1); filter: blur(0); } 
    40%, 100% { opacity: 0; transform: scale(2.5); filter: blur(20px); }
}

/* Ajuste sutil al destello de fondo para que también se torne dorado al final */
@keyframes pulseLight {
    0%, 33% { background: radial-gradient(circle, rgba(54, 73, 221, 0.3) 0%, transparent 70%); }
    34%, 66% { background: radial-gradient(circle, rgba(157, 80, 187, 0.3) 0%, transparent 70%); }
    /* Tono ámbar/dorado para el eslogan */
    67%, 100% { background: radial-gradient(circle, rgba(170, 119, 28, 0.3) 0%, transparent 70%); }
}