/* Hoja de estilo usada por pantalla Contacto de la Aplicación */
body#page-contacto .container-lg {    
    padding-bottom: 100px;
}
body#page-contacto .wrapper-opciones {
   margin-bottom: 0;
}
#bloque-02,
#bloque-04,
#bloque-06,
#bloque-08,
#bloque-10 {       
    background: #D5EDCE;
}
.wrapper-contacto {
    padding-top: 32px;
    padding-bottom: 32px;
    row-gap: 50px;
    padding-left: 6px;
    padding-right: 6px;
}
#bloque-01 .titulo-area-contacto {
    margin-bottom: 8px;
}
.titulo-area-contacto {
    font-family: "Montserrat";
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
    color: #668392;
    margin: 0;
}
.titulo-area-contacto span,
.numero-area-contacto span {    
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.30000001192092896px;
    text-align: left;
}
.descripcion-area-contacto {
    font-family: "Montserrat";
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #668392;
    margin: 0;
}
div.numero-area-contacto:nth-child(1) {
    margin-bottom: 16px;
}
.numero-area-contacto a {     
    font-family: "Montserrat";
    font-size: 19px;
    font-weight: 600;
    line-height: 32px;
    text-align: left;
    color: #668392;
    text-decoration: none;
    display: flex;
    align-items: center;
    column-gap: 8px;
}
.numero-area-contacto a img {
    width: 40px;
    height: 40px;
}
.numero-area-contacto a span {
    color: #2BA309;
    font-weight: 600;
    padding-left: 5px;
}
.numero-area-contacto a span i {
    margin-right: 3px;
}
/* Estilo base del QR */
.qr-container img {
    width: 220px;   /* tamaño estándar */
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 90%;
    animation: zoomBlurBounce 2.5s ease forwards; /* animación con rebote */
}

/* Animación personalizada */
@keyframes zoomBlurBounce {
    0% {
        transform: scale(0.1);   /* empieza muy pequeño */
        opacity: 0;              /* invisible al inicio */
        filter: blur(20px);      /* desenfoque fuerte */
    }
    70% {
        transform: scale(1.05);  /* un poco más grande que el final */
        opacity: 1;              /* ya visible */
        filter: blur(0);         /* sin desenfoque */
    }
    85% {
        transform: scale(0.95);  /* se achica un poco */
    }
    100% {
        transform: scale(1);     /* tamaño normal */
    }
}