/*==========================
        AJUSTES GENERALES
===========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#000;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

section,
main{
    scroll-margin-top:85px;
}


/*==========================
          HEADER
===========================*/

.header{
    position:fixed;
    top:0;
    left:0;

    width:100%;

    background:#fff;

    z-index:1000;

    box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.navbar{
    width:90%;
    max-width:1400px;
    height:85px;

    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo img{
    height:60px;
    display:block;
}


/*==========================
            MENÚ
===========================*/

.nav-menu{
    display:flex;

    list-style:none;

    gap:45px;
}

.nav-menu a{
    text-decoration:none;

    color:#FF5B04;

    font-size:16px;
    font-weight:600;

    transition:.3s;
}

.nav-menu a:hover{
    color:#d94800;
}


/* El isotipo de fondo permanece oculto
   en computadora */

.menu-bg{
    display:none;
}


/*==========================
      BOTÓN DEL MENÚ
===========================*/

.hamburger{
    display:none;

    cursor:pointer;

    z-index:1001;
}

.hamburger img{
    width:45px;
    height:45px;

    display:block;

    object-fit:contain;
}


/*==========================
           INICIO
===========================*/

.seccion-inicio{
    width:100%;
    height:calc(100vh - 85px);
    min-height:500px;

    position:relative;
    overflow:hidden;

    margin-top:85px;
}

.slider-inicio{
    width:100%;
    height:100%;

    position:relative;

    overflow:hidden;
}


/* Imágenes del inicio */

.slide-inicio{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    opacity:0;

    transition:opacity 1.5s ease-in-out;
}

.slide-inicio.active{
    opacity:1;
}

.slide-inicio img{
    width:100%;
    height:100%;

    object-fit:cover;
}


/* Botones del inicio */

.anterior-inicio,
.siguiente-inicio{
    position:absolute;
    top:50%;

    transform:translateY(-50%);

    width:55px;
    height:55px;

    background:rgba(0,0,0,.45);

    color:white;

    border:none;

    font-size:35px;

    cursor:pointer;

    z-index:100;

    transition:.3s;
}

.anterior-inicio:hover,
.siguiente-inicio:hover{
    background:#FF5B04;
}

.anterior-inicio{
    left:20px;
}

.siguiente-inicio{
    right:20px;
}


/* Indicadores del inicio */

.indicadores-inicio{
    position:absolute;

    bottom:30px;
    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:100;
}

.dot-inicio{
    width:14px;
    height:14px;

    border-radius:50%;

    background:white;

    opacity:.4;

    cursor:pointer;

    transition:.3s;
}

.dot-inicio.active{
    background:#FF5B04;
    opacity:1;
}


/*==========================
          NOSOTROS
===========================*/

.seccion-nosotros{
    position:relative;

    width:100%;
    height:auto;

    background:#fff;

    overflow:hidden;
}

.slider-nosotros{
    position:relative;

    width:100%;
}

.slide-nosotros{
    position:absolute;
    top:0;
    left:0;

    width:100%;

    opacity:0;

    transform:scale(1);

    transition:opacity 1.4s ease-in-out;

    pointer-events:none;
}

.slide-nosotros.active{
    position:relative;

    opacity:1;

    pointer-events:auto;
}

.slide-nosotros.active .img-nosotros{
    animation:zoomNosotros 6s ease-in-out forwards;
}

.img-nosotros{
    width:100%;
    height:auto;

    display:block;
}

@keyframes zoomNosotros{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.05);
    }

}

/*==========================
     SLIDERS DE SERVICIOS
===========================*/

.hero-servicio{
    width:100%;
    height:100vh;

    position:relative;

    overflow:hidden;

    background:#000;
}


/* Contenedor horizontal */

.slider-servicio{
    width:300%;
    height:100%;

    display:flex;

    transition:transform .9s ease-in-out;
}


/* Cada diapositiva */

.slide-servicio{
    width:100vw;
    height:100vh;

    flex-shrink:0;
}

.slide-servicio img{
    width:100%;
    height:100%;

    object-fit:cover;
}


/* Capa oscura */

.overlay-servicio{
    position:absolute;

    inset:0;

    background:rgba(0,0,0,.30);

    pointer-events:none;

    z-index:10;
}


/* Título PNG */

.titulo-servicio{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:100;

    pointer-events:none;
}

.titulo-servicio img{
    width:700px;
    max-width:90vw;
}


/* Botones de servicios */

.prev-servicio,
.next-servicio{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.18);

    color:white;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

    z-index:200;
}

.prev-servicio:hover,
.next-servicio:hover{
    background:#FF5B04;
}

.prev-servicio{
    left:25px;
}

.next-servicio{
    right:25px;
}


/* Indicadores de servicios */

.indicadores-servicio{
    position:absolute;

    bottom:35px;
    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:200;
}

.dot-servicio{
    width:13px;
    height:13px;

    border-radius:50%;

    background:white;

    opacity:.4;

    transition:.3s;

    cursor:pointer;
}

.dot-servicio.active{
    background:#FF5B04;
    opacity:1;
}


/*==========================
          CONTACTO
===========================*/

.seccion-contacto{
    width:100%;
    min-height:100vh;

    background:#111;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:100px 5%;
}

.espacio-contacto{
    width:100%;
    max-width:1200px;

    text-align:center;

    color:white;
}

.espacio-contacto h2{
    margin-bottom:20px;

    color:#FF5B04;

    font-size:42px;
}

.espacio-contacto p{
    font-size:18px;
    line-height:1.7;
}


/*==========================
   ANIMACIÓN AL HACER SCROLL
===========================*/

.seccion-animada{
    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.seccion-animada.seccion-visible{
    opacity:1;

    transform:translateY(0);
}


/*==========================
          RESPONSIVE
===========================*/

@media(max-width:768px){

    .seccion-inicio{
        height:calc(100vh - 85px);
        min-height:500px;
    }

    .slide-inicio img{
        object-position:center;
    }


    .hamburger{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-menu{
        position:fixed;

        top:0;
        right:-300px;

        width:300px;
        height:100vh;

        background:white;

        display:flex;
        flex-direction:column;
        align-items:flex-start;

        padding:110px 30px 40px;

        gap:28px;

        overflow:hidden;

        transition:right .4s ease;

        z-index:999;

        box-shadow:-8px 0 25px rgba(0,0,0,.18);
    }

    .nav-menu::before{
        content:"";

        position:absolute;
        top:0;
        left:0;

        width:6px;
        height:100%;

        background:#FF5B04;
    }

    .nav-menu.active{
        right:0;
    }

    .nav-menu li{
        position:relative;
        z-index:3;
    }

    .nav-menu a{
        color:#FF5B04;

        font-size:18px;
        font-weight:600;

        position:relative;

        z-index:3;
    }

    .menu-bg{
        display:block;

        position:absolute;

        left:95%;
        bottom:-10px;

        transform:translateX(-50%);

        width:450px;
        height:auto;

        opacity:.15;

        pointer-events:none;
        user-select:none;

        z-index:1;
    }

}
/*==========================
     PANTALLAS PEQUEÑAS
===========================*/

@media(max-width:480px){

        .seccion-inicio{
        height:calc(100vh - 75px);
        min-height:420px;
        margin-top:75px;
    }

    .slide-inicio img{
        object-fit:cover;
        object-position:center;
    }

    .navbar{
        width:92%;
        height:75px;
    }

    .logo img{
        height:50px;
        max-width:210px;
        object-fit:contain;
    }

    .hamburger img{
        width:38px;
        height:38px;
    }

    .seccion-inicio{
        margin-top:75px;
    }

    section,
    main{
        scroll-margin-top:75px;
    }

    .dot-inicio,
    .dot-servicio{
        width:11px;
        height:11px;
    }

    .nav-menu{
    width:285px;
    right:-285px;
    }

    .menu-bg{
    width:240px;
    bottom:45px;
    }
}

/*==========================
          CONTACTO
===========================*/

.contacto-seccion{
    position:relative;

    width:100%;

    background:#000;

    overflow:hidden;

    padding-bottom:70px;
}


/* Imagen de fondo */

.contacto-fondo{
    width:100%;
    height:auto;

    display:block;

    object-fit:contain;
}


/* Imagen del título */

.contacto-titulo{
    position:absolute;

    top:-1%;
    left:50%;

    transform:translateX(-50%);

    width: 100%;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:10;

    pointer-events:none;
}

.contacto-titulo img{
    width: 500px;
    max-width:85vw;

    height: auto;

    display:block;
}


/*==========================
          RESPONSIVE
===========================*/

@media(max-width:1000px){

    .contacto-titulo{
        top:20px;
    }

    .contacto-overlay{
        width:90%;
        max-width:700px;

        margin:-520px auto 0;

        grid-template-columns:1fr;

        gap:25px;
    }

}

@media(max-width:600px){

    .contacto-seccion{
        padding-bottom:40px;
    }

    .contacto-titulo{
        top:10px;
    }

    .contacto-titulo img{
        width:88vw;
    }

    .contacto-overlay{
        width:92%;

        margin:-250px auto 0;

        grid-template-columns:1fr;
    }

    .tarjeta-asesor,
    .formulario-contacto{
        padding:24px 20px;

        border-radius:14px;
    }

    .fila-formulario{
        grid-template-columns:1fr;
    }

}

/*==========================
   CONTENIDO DE CONTACTO
===========================*/

.contacto-overlay{
    position:relative;

    width:90%;
    max-width:1250px;

    margin:-610px auto 0;

    display:grid;
    grid-template-columns:340px minmax(0, 1fr);

    gap:35px;

    align-items:stretch;

    z-index:20;
}


/*==========================
       TARJETA ASESOR
===========================*/

.tarjeta-asesor{
    background:rgba(255,255,255,.85);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:18px;

    padding:32px;

    box-shadow:0 18px 45px rgba(0,0,0,.28);

    display:flex;
    flex-direction:column;

    color:#222;
}

.logo-asesor{
    width:190px;
    max-width:100%;

    display:block;

    margin:0 auto 24px;
}

.tarjeta-asesor h3{
    color:#FF5B04;

    font-size:25px;

    margin-bottom:8px;
}

.nombre-asesor{
    color:#000000;

    font-size:18px;
    font-weight:700;

    margin-bottom:22px;
}

.datos-asesor{
    display:flex;
    flex-direction:column;

    gap:14px;
}

.datos-asesor p{
    color:#000000;

    font-size:15px;
    line-height:1.55;
}

.qr-contacto img{

    width:180px;

    height: 200px;

    object-fit:contain;

    display:block;

    margin:30px auto;

}

/*==========================
         FORMULARIO
===========================*/

.formulario-contacto{
    background:rgba(255,255,255,.85);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:18px;

    padding:32px;

    box-shadow:0 18px 45px rgba(0,0,0,.28);

    display:flex;
    flex-direction:column;

    gap:16px;
}

.formulario-contacto h3{
    color:#FF5B04;

    font-size:27px;

    margin-bottom:2px;

    text-align:center;
}

.fila-formulario{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:16px;
}

.grupo-formulario{
    width:100%;

    display:flex;
    flex-direction:column;

    gap:7px;
}

.grupo-formulario label{
    color:#000000;

    font-size:14px;
    font-weight:600;
}

.grupo-formulario input,
.grupo-formulario select,
.grupo-formulario textarea{
    width:100%;

    padding:13px 14px;

    border:1px solid #d8d8d8;
    border-radius:8px;

    background:#fff;

    color:#222;

    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;

    outline:none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.grupo-formulario textarea{
    min-height:105px;
    max-height:180px;

    resize:vertical;
}

.grupo-formulario input:focus,
.grupo-formulario select:focus,
.grupo-formulario textarea:focus{
    border-color:#FF5B04;

    box-shadow:0 0 0 3px rgba(255,91,4,.13);
}


/* Política */

.aceptar-politica{
    display:flex;
    align-items:flex-start;

    gap:9px;

    color:#555;

    font-size:13px;
    line-height:1.45;

    cursor:pointer;
}

.aceptar-politica input{
    width:16px;
    height:16px;

    margin-top:2px;

    accent-color:#FF5B04;
}

.aceptar-politica a{
    color:#FF5B04;

    font-weight:600;
}


/* Botón enviar */

.boton-enviar-contacto{
    width:100%;

    padding:15px;

    border:none;
    border-radius:8px;

    background:#FF5B04;

    color:#fff;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}

.boton-enviar-contacto:hover{
    background:#df4d00;

    transform:translateY(-2px);
}


/* Mensaje de validación */

.mensaje-formulario{
    min-height:18px;

    text-align:center;

    font-size:14px;
    font-weight:600;
}

.mensaje-formulario.correcto{
    color:#15803d;
}

.mensaje-formulario.error{
    color:#c62828;
}


/*==========================
       RESPONSIVE CONTACTO
===========================*/

@media(max-width:1000px){

    .contacto-seccion{
        height:auto;
        min-height:100vh;

        padding-bottom:60px;
    }

    .contacto-fondo{
        position:absolute;

        width:100%;
        height:100%;

        object-fit:cover;
    }

    .contacto-overlay{
        position:relative;

        top:auto;
        left:auto;

        transform:none;

        width:90%;
        max-width:700px;

        margin:300px auto 0;

        grid-template-columns:1fr;

        gap:25px;
    }

}


@media(max-width:600px){

    .contacto-seccion{
        padding-bottom:40px;
    }

    .contacto-titulo{
        top:-2%;
    }

    .contacto-titulo img{
        width:88vw;
        height:auto;
    }

    .contacto-overlay{
        width:92%;

        margin-top:240px;
    }

    .tarjeta-asesor,
    .formulario-contacto{
        padding:24px 20px;

        border-radius:14px;
    }

    .fila-formulario{
        grid-template-columns:1fr;
    }

    .logo-asesor{
        width:170px;
    }

    .tarjeta-asesor h3{
        font-size:22px;
    }

    .formulario-contacto h3{
        font-size:23px;
    }

}


@media(max-width:380px){

    .contacto-overlay{
        margin-top:215px;
    }

    .tarjeta-asesor,
    .formulario-contacto{
        padding:22px 17px;
    }

}

/*==========================
          FOOTER
===========================*/

.footer{

    width:100%;

    background:#0f0f0f;

    color:#fff;

    padding:20px 8% 15px;

}

.footer-contenedor{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    flex-wrap:nowrap;

    gap:50px;

}

.footer-logo{

    width:240px;

    flex-shrink:0;

}

.footer-logo img{

    display:block;

    width:210px;

    height:auto;

    margin:0;

}

.footer-logo p{

    margin:0;

    color:#bdbdbd;

    line-height:1.5;

}

.footer-contacto,
.footer-atencion{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

    gap:10px;

}

.footer-contacto{

    width:390px;

}

.footer-atencion{

    width:260px;

}

.footer-contacto h3,
.footer-atencion h3{

    margin:0 0 5px;

    color:#FF5B04;

}

.footer-contacto p,
.footer-atencion p{

    margin:0;

    color:#d8d8d8;

}

.footer-contacto i,
.footer-atencion i{

    width:20px;

    margin-right:10px;

    color:#FF5B04;

    text-align:center;

}

.footer-contacto a,
.footer-atencion a{

    color:inherit;

    text-decoration:none;

    transition:.3s;

}

.footer-contacto a:hover,
.footer-atencion a:hover{

    color:#FF5B04;

}

.footer-texto-legal{

    max-width:280px;

    margin:0 0 4px;

    color:#bdbdbd;

    line-height:1.5;

}

.footer-enlace-legal{

    display:flex;

    align-items:center;

    gap:-15px;

    width:fit-content;

    margin:4px 0;

    padding:0;

    background:none;

    border:none;

    color:#fff;

    font:inherit;

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

}

.footer-enlace-legal:hover{

    color:#FF5B04;

}

.footer-libro-imagen{

    display:flex;

    justify-content:center;

    align-items:center;

    width:180px;

    height:90px;

    margin:10px 0 0 10px;

    padding:0;

    overflow:hidden;

    background:transparent;

    border:none;

    cursor:pointer;

}

.footer-libro-imagen img{

    display:block;

    width:170px;

    max-height:85px;

    height:auto;

    object-fit:contain;

    transition:transform .3s ease,
               opacity .3s ease;

}

.footer-libro-imagen:hover img{

    transform:scale(1.05);

    opacity:.85;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    margin-top:18px;

    padding:10px 0 5px;

    text-align:center;

    color:#9d9d9d;

    font-size:13px;

    line-height:1.5;

}

.footer-bottom p{

    margin:2px 0;

}

@media(max-width:900px){

    .footer-contenedor{

        flex-direction:column;

        align-items:center;

        gap:25px;

    }

    .footer-logo,
    .footer-contacto,
    .footer-atencion{

        width:100%;

        align-items:center;

        text-align:center;

    }

    .footer-logo img{

        margin:auto;

    }

    .footer-contacto h3,
    .footer-atencion h3,
    .footer-texto-legal{

        text-align:center;

    }

    .footer-enlace-legal,
    .footer-libro-imagen{

        margin-left:auto;

        margin-right:auto;

    }

}

/*==========================
        MODALES LEGALES
===========================*/

.modal-legal{
    position:fixed;
    inset:0;

    z-index:9999;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:25px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.modal-legal.activo{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.modal-legal-fondo{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.modal-legal-contenido{
    position:relative;
    z-index:1;

    width:min(720px, 100%);
    max-height:88vh;
    overflow-y:auto;

    padding:38px;

    background:#fff;
    color:#222;

    border-radius:20px;

    box-shadow:0 25px 70px rgba(0,0,0,.4);

    transform:translateY(25px) scale(.97);
    transition:transform .3s ease;
}

.modal-legal.activo .modal-legal-contenido{
    transform:translateY(0) scale(1);
}

.modal-legal-contenido h2{
    padding-right:45px;
    margin-bottom:22px;

    color:#FF5B04;
    font-size:30px;
}

.modal-legal-contenido h3{
    margin-top:24px;
    margin-bottom:8px;

    color:#222;
    font-size:18px;
}

.modal-legal-texto p,
.modal-legal-introduccion{
    color:#555;
    line-height:1.75;
}

.modal-legal-cerrar{
    position:absolute;
    top:15px;
    right:18px;

    width:42px;
    height:42px;

    background:#f1f1f1;
    border:none;
    border-radius:50%;

    color:#333;
    font-size:30px;
    line-height:1;

    cursor:pointer;
    transition:.3s;
}

.modal-legal-cerrar:hover{
    background:#FF5B04;
    color:#fff;
    transform:rotate(90deg);
}

body.modal-abierto{
    overflow:hidden;
}


/*==========================
   LIBRO DE RECLAMACIONES
===========================*/

.modal-reclamaciones-contenido{
    width:min(850px, 100%);
}

#formulario-reclamaciones{
    display:flex;
    flex-direction:column;
    gap:18px;

    margin-top:25px;
}

.reclamo-fila{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.reclamo-grupo{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.reclamo-grupo label{
    color:#333;
    font-weight:600;
}

.reclamo-grupo input,
.reclamo-grupo select,
.reclamo-grupo textarea{
    width:100%;

    padding:13px 14px;

    background:#f7f7f7;
    border:1px solid #d5d5d5;
    border-radius:10px;

    color:#222;
    font-family:inherit;
    font-size:15px;

    outline:none;
    transition:.3s;
}

.reclamo-grupo input:focus,
.reclamo-grupo select:focus,
.reclamo-grupo textarea:focus{
    background:#fff;
    border-color:#FF5B04;
    box-shadow:0 0 0 3px rgba(255,91,4,.12);
}

.reclamo-grupo textarea{
    resize:vertical;
}

.reclamo-aceptacion{
    display:flex;
    align-items:flex-start;
    gap:10px;

    color:#555;
    line-height:1.5;
}

.reclamo-aceptacion input{
    margin-top:4px;
}

.reclamo-enviar{
    align-self:flex-start;

    padding:14px 24px;

    background:#FF5B04;
    border:none;
    border-radius:10px;

    color:#fff;
    font-size:16px;
    font-weight:600;

    cursor:pointer;
    transition:.3s;
}

.reclamo-enviar:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,91,4,.3);
}

.reclamo-mensaje{
    display:none;

    padding:12px;

    background:#eef8ee;
    border-radius:8px;

    color:#267326;
}


/*==========================
      RESPONSIVE MODALES
===========================*/

@media(max-width:700px){

    .modal-legal{
        padding:15px;
    }

    .modal-legal-contenido{
        max-height:90vh;
        padding:30px 20px;
        border-radius:16px;
    }

    .modal-legal-contenido h2{
        font-size:24px;
    }

    .reclamo-fila{
        grid-template-columns:1fr;
    }

    .reclamo-enviar{
        width:100%;
    }

}

.footer-contacto a{

    color:inherit;

    text-decoration:none;

    transition:.3s;

}

.footer-contacto a:hover{

    color:#FF5B04;

}

/*==========================
     WHATSAPP FLOTANTE
===========================*/

.whatsapp-float{

    position:fixed;

    bottom:30px;

    right:30px;

    width:65px;

    height:65px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    text-decoration:none;

    box-shadow:0 8px 25px rgba(0,0,0,.35);

    z-index:999;

    transition:.3s;

}

.whatsapp-float:hover{

    transform:scale(1.12);

    box-shadow:0 12px 35px rgba(37,211,102,.45);

}

/*==========================
   TEXTO WHATSAPP
===========================*/

.whatsapp-float::before{

    content:"Contáctanos";

    position:absolute;

    right:80px;

    top:50%;

    transform:translateY(-50%);

    background:#fff;

    color:#333;

    padding:10px 15px;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    box-shadow:0 6px 20px rgba(0,0,0,.2);

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

.whatsapp-float:hover::before{

    opacity:1;

    visibility:visible;

}

.whatsapp-float::after{

    content:"";

    position:absolute;

    right:70px;

    top:50%;

    transform:translateY(-50%);

    border:8px solid transparent;

    border-left-color:#fff;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

.whatsapp-float:hover::after{

    opacity:1;

    visibility:visible;

}

/*==========================
   LIBRO DE RECLAMACIONES
===========================*/

.footer-libro-imagen{

    display:flex;

    justify-content:center;

    align-items:center;

    width:220px;

    height:110px;

    margin:-10px 0 0 -40px;

    padding:0;

    background:transparent;

    border:none;

    overflow:visible;

    cursor:pointer;

}

.footer-libro-imagen img{

    display:block;

    width:200px;

    height:auto;

    object-fit:contain;

    transition:transform .3s ease,
               opacity .3s ease;

}

.footer-libro-imagen:hover img{

    transform:scale(1.05);

    opacity:.9;

}

/* ==========================
   RESPONSIVE CELULARES
========================== */
@media (max-width: 768px) {

    .footer-libro-imagen{
        margin: 15px auto 0 !important;
        transform: translateX(0) !important;
        display: flex;
        justify-content: center;
    }

    .footer-libro-imagen img{
        margin: 0 auto;
        display: block;
    }

}