/* ===== REDES SOCIALES ================================= */

.floating-social {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Elimina la separación entre botones */
    z-index: 999;
}


.floating-social .social {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Mueve el icono a la izquierda */
    padding-left: 20px; /* Controla qué tan separado está el icono del borde izquierdo */
    width: 80px; /* x2.5 del tamaño original (42px * 2.5) */
    height: 60px; /* Un poco más largo verticalmente */
    border-radius: 20px 0 0 20px; /* Mantiene esquinas redondeadas solo a la izquierda */
    color: #fff;
    font-size: 35px; /* Icono un poco más grande acorde al nuevo tamaño */
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-sizing: border-box; /* Asegura que el padding no rompa las dimensiones */
}


.floating-social .social .svg-icon {
    width: 32px;        /* Escala perfecta respecto a tus botones de 80x60px */
    height: 32px;       
    fill: #ffffff;      /* Hace que todos los iconos sean completamente blancos */
    transition: transform 0.2s ease;
}


.floating-social .social:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

/* Instagram - degradado */
.floating-social .instagram {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
}

/* Facebook - azul */
.floating-social .facebook {
    background: #3b82f6;
}

/* X (Twitter) - negro */
.floating-social .twitter {
    background: #000000;
}

/* LinkedIn - azul */
.floating-social .linkedin {
    background: #0a66c2;
}

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

.floating-contact{
    position: fixed;
    left: 25px;
    bottom: 25px;
    z-index: 999999;
}

/* ---------- Botón principal ---------- */

.contact-toggle{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 110px;
    height: 110px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: #93bd3d;
    cursor: pointer;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0,0,0,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
    will-change: transform;

    position: relative;
    z-index: 999999;

    color: #ffffff;
    font-size: 60px;
    font-weight: 500;
}

.contact-toggle:hover{
    transform: scale(1.05);
    box-shadow: 0 14px 28px rgba(0,0,0,.28);
}

.contact-toggle img{
    width: 58px;
    height: 58px;
    object-fit: contain;
    pointer-events: none;
}

/* ---------- Menú ---------- */

.contact-menu{
    position: absolute;
    left: 0;
    bottom: 125px;

    display: flex;
    flex-direction: column;
    gap: 14px;

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

    transform: translateY(20px);

    transition:
        opacity .30s ease,
        transform .30s ease,
        visibility .30s;
}

.contact-menu.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ---------- Opciones ---------- */

.contact-option{
    display: flex;
    align-items: center;

    width: 215px;
    min-height: 60px;

    padding: 0 22px;
    gap: 18px;

    border: none;
    border-radius: 18px;

    background: #fff;

    color: #20458a;
    font-size: 17px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

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

    transition:
        transform .20s ease,
        box-shadow .20s ease;

    text-decoration: none;
}

.contact-option:hover{
    transform: translateX(6px);
    box-shadow: 0 12px 22px rgba(0,0,0,.22);
    text-decoration: none;
}

.contact-option__icon{
    width:30px;
    height:30px;
    flex-shrink:0;
    display:block;
}

.contact-option__text{
    line-height:1.2;
    color:#20458a;
    font-size:17px;
    font-weight:500;
}

/* ===== ACCESIBILIDAD ================================= */

/* Botón principal */

.accessibility-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:999999;

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

    width:110px;
    height:110px;

    padding:0;
    margin:0;

    border:none;
    border-radius:50%;

    background:#e3f541;
    cursor:pointer;
    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
    will-change: transform;
}

.accessibility-btn:hover{
    transform:scale(1.05);
    box-shadow:0 14px 28px rgba(0,0,0,.28);
}

.accessibility-btn .svg-icon{
    width:58px;
    height:58px;
    fill:#fff;
    pointer-events:none;
}

/* Menú */

.accessibility-menu{
    position:fixed;
    right:25px;
    bottom:145px;

    width:320px;
    max-width:calc(100vw - 40px);
    box-sizing:border-box;

    background:#f0edea;
    border-radius: 15px 15px 45px 15px;

    box-shadow:0 10px 25px rgba(0,0,0,.22);

    padding:15px 18px;

    display:none;

    z-index:999999;

    font-family:inherit;

    overflow:hidden;
}

@media (max-width:420px){
    .accessibility-menu{
        right:15px;
        bottom:135px;
        width:calc(100vw - 30px);
    }
}

.accessibility-menu.show{
    display:block;
}

/* Cabecera */

.menu-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.icon-btn:hover{
    transform:scale(1.1);
}

.close-btn{
    color:#c1272d;
}

.reset-btn{
    color:#194788;
}

.icon-btn{
    width:48px;
    height:48px;

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

    background:none;
    border:none;
    cursor:pointer;
}

.header-icon{
    display:block;
}

/* La X es visualmente más grande, la reducimos */
.header-icon-close{
    width:28px;
    height:28px;
}

/* El icono de recargar necesita un poco más de tamaño */
.header-icon-reset{
    width:32px;
    height:32px;
}

/* Opciones */

.menu-options{
    margin:0;
    padding:0;
    list-style:none;
}

.menu-options li{
    border-bottom:1px solid #c8c5c2;
}

.menu-options li:last-child{
    border-bottom:none;
}

.option-btn{
    display:flex;
    align-items:center;
    gap:14px;

    width:100%;
    box-sizing:border-box;

    padding:14px 8px;

    background:none;
    border:none;

    color:#003060;

    text-align:left;
    font-size:15.5px;
    font-weight:600;
    line-height:1.25;

    cursor:pointer;

    transition:background .2s ease;
}

.option-btn:hover{
    background:rgba(0,0,0,.05);
    border-radius:8px;
}

.option-btn .icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;
    flex-shrink:0;
}

.option-btn .icon svg{
    width:100%;
    height:100%;
    display:block;
}

.option-btn__text{
    flex:1 1 auto;
    min-width:0;
    white-space:normal;
    word-break:break-word;
}

/* ===== FUNCIONALIDAD ACCESIBILIDAD ================================= */

/* Invertir colores */
html.accessibility-invert{
    filter: invert(1) hue-rotate(180deg);
}

/* Evita que imágenes y videos se vean raros */
html.accessibility-invert img,
html.accessibility-invert video,
html.accessibility-invert iframe{
    filter: invert(1) hue-rotate(180deg);
}

/* Escala de grises */
html.accessibility-grayscale{
    filter: grayscale(100%);
}

/* Cursor grande */
html.accessibility-big-cursor,
html.accessibility-big-cursor *{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath fill='black' d='M0 0 L0 36 L8 28 L14 46 L20 44 L14 26 L26 26 Z'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* Guía de lectura */
#reading-guide-line{
    position: fixed;
    left:0;
    width:100%;
    height:4px;
    background:#a70000;
    pointer-events:none;
    z-index:99999999;
    display:none;
}

/* ==========================================================
   ELEMENTOS EXCLUIDOS DEL ESCALADO
========================================================== */

/* Revolution Slider */

.rev_slider,
.rev_slider *,
.rev_slider_wrapper,
.rev_slider_wrapper *,
.tp-caption,
.tp-caption *,
.tp-static-layer,
.tp-static-layer *,
.tp-mask-wrap,
.tp-mask-wrap *,
.tp-parallax-wrap,
.tp-parallax-wrap *,
.forcefullwidth_wrapper_tp_banner,
.forcefullwidth_wrapper_tp_banner *,
.tparrows,
.tp-bullets,

/* Botones flotantes */
.floating-contact,
.floating-contact *,
.accessibility-btn,
.accessibility-btn *,
.contact-toggle,
.contact-toggle *,
.contact-menu,
.contact-menu *,
.accessibility-menu,
.accessibility-menu *,
.option-btn,
.option-btn *{
    --no-accessibility-scale: 1;
}

/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 768px) {

    /* Ocultar redes sociales */
    .floating-social{
        display: none;
    }

    /* Ocultar botón y menú de accesibilidad */
    .accessibility-btn,
    .accessibility-menu{
        display: none !important;
    }

    /* Reducir el botón de contacto */
    .floating-contact{
        left: 15px;
        bottom: 15px;
    }

    .contact-toggle{
        width: 72px;
        height: 72px;
    }

    .contact-toggle svg{
        width: 50px;
        height: 50px;
    }

    /* Ajustar el menú de contacto */
    .contact-menu{
        bottom: 82px;
    }

    .contact-option{
        width: 190px;
        min-height: 52px;
        padding: 0 18px;
        gap: 14px;
    }

    .contact-option__icon{
        width:24px;
        height:24px;
    }

    .contact-option__text{
        font-size:15px;
    }
}

/* ===== REDES SOCIALES MÓVIL ============================= */

.floating-social-mobile {
    display: none; /* Solo visible en móvil */
}

@media (max-width: 768px) {
    .floating-social-mobile {
        display: block;
        position: fixed;
        right: 15px;
        bottom: 15px;
        z-index: 999999;
    }

    /* ---------- Botón principal ---------- */
    .social-toggle {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 70px;
        height: 70px;

        padding: 0;
        margin: 0;

        border: none;
        border-radius: 50%;

        background: #e3f541; 
        color: #ffffff;
        cursor: pointer;

        overflow: hidden;

        box-shadow: 0 10px 25px rgba(0,0,0,.22);

        transition:
            transform .25s ease,
            box-shadow .25s ease;
        will-change: transform;

        position: relative;
        z-index: 999999;
    }

    .social-toggle:hover,
    .social-toggle:active {
        transform: scale(1.05);
        box-shadow: 0 14px 28px rgba(0,0,0,.28);
    }

    .social-toggle svg {
        width: 23px;
        height: 23px;
        stroke: #000000;
        pointer-events: none;
    }

    /* ---------- Menú ---------- */
    .social-menu {
        position: absolute;
        right: 0;
        bottom: 82px;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

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

        transform: translateY(20px);

        transition:
            opacity .30s ease,
            transform .30s ease,
            visibility .30s;
    }

    .social-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* ---------- Círculos de redes ---------- */
    .social-circle {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 56px;
        height: 56px;

        border-radius: 50%;
        color: #fff;
        text-decoration: none;

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

        transition:
            transform .20s ease,
            box-shadow .20s ease;
    }

    .social-circle:hover,
    .social-circle:active {
        transform: scale(1.1);
        box-shadow: 0 10px 22px rgba(0,0,0,.28);
    }

    .social-circle .svg-icon {
        width: 26px;
        height: 26px;
        fill: #fff;
    }

    /* Colores específicos */
    .social-circle.instagram {
        background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    }

    .social-circle.facebook {
        background: #3b82f6;
    }

    .social-circle.twitter {
        background: #000000;
    }

    .social-circle.linkedin {
        background: #0a66c2;
    }
}