/* =========================================================
   FOOTER RECONSTRUIDO DESDE REFERENCIA
   Bootstrap 5.3 + CSS personalizado
   ========================================================= */

.site-footer {
    --footer-bg: #000;
    --footer-text: #f1f1f1;
    --footer-muted: #737373;
    --footer-icon-bg: #e8e8e8;
    --footer-icon-color: #080808;
    --footer-focus: #fff;

    position: relative;
    clear: both;
    width: 100%;
    overflow: hidden;
    background: var(--footer-bg);
    color: var(--footer-text);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 200px;
    padding: 60px 0 32px; /* Reducimos el padding superior para dar espacio al menú */
}

.site-footer .container {
    max-width: 1040px;
}
.footer-image img {
    max-width: 100%;
    height: auto;
    display: block;
    opacity: 0.8;
}
/* ---------------------------------------------------------
   Bloque superior
   --------------------------------------------------------- */
footer .footer-image {
    position: relative;
    /* Centrado horizontal mediante márgenes automáticos */
    margin: 30px auto 40px auto; 
    
    /* Manejo del ancho responsivo */
    width: 100%;
    max-width: 1296px;
    
    /* Alineación y capa */
    display: flex;
    justify-content: center;
    z-index: 1;
}

/* Asegura que la imagen interior escale de manera fluida */
.footer-image img {
    max-width: 100%;
    height: auto;
    display: block;
    opacity: 0.8;
}
/* Ajuste del bloque de redes sociales para alineación */
.footer-social {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0; /* Ajustado */
}

.footer-logo {
    display: inline-flex;
    width: 64px;
    height: 64px;
    margin-bottom: 27px;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
}

.footer-logo-mark {
    display: block;
    width: 100%;
    height: 100%;
}

.footer-heading {
    margin: 0;
    color: var(--footer-text);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.footer-subtitle {
    margin: 11px 0 0;
    color: #858585;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
}

/* ---------------------------------------------------------
   Redes sociales
   --------------------------------------------------------- */

.footer-social-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    column-gap: 82px;
    margin-top: 20px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #d7d7d7;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, opacity .2s ease;
}

.footer-social-link:focus-visible,
.footer-menu a:focus-visible,
.footer-back-top:focus-visible,
.footer-logo:focus-visible,
.footer-top-button:focus-visible {
    outline: 2px solid var(--footer-focus);
    outline-offset: 5px;
    border-radius: 3px;
}

.footer-social-icon {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    border-radius: 50%;
    background: var(--footer-icon-bg);
    color: var(--footer-icon-color);
}

.footer-social-icon svg {
    width: 13px;
    height: 13px;
    display: block;
    fill: currentColor;
}
.x-twitter-color{
    color: #1DA1F2;
}
.x-twitter{
    background-color: #1DA1F2;
}
.facebook-color{
    color: #1877F2;
}
.facebook{
    background-color: #1877F2;
}
.instagram-color{
    color: #E1306C;
}
.instagram{
    background-color: #E1306C;
}
.linkedin{
    background-color: #0A66C2;
}
.linkedin-color{
    color: #0A66C2;
}
.x-twitter:hover {
	background-color: #fff;
}
/* Transiciones suaves para el texto, el fondo del icono y el SVG */
.footer-social-link,
.footer-social-icon,
.footer-social-icon svg {
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Al pasar el cursor sobre el enlace completo: */
.footer-social-link:hover {
    color: #ffffff; /* Cambia el color del texto */
}

.footer-social-link:hover .footer-social-icon {
    background-color: #ffffff; /* Cambia el fondo del círculo a blanco */
    color: #000000;            /* Cambia el color del icono SVG dentro del círculo */
}

/* Opcional: Elimina la regla individual previa si ya no es necesaria */
/* .x-twitter:hover { background-color: #fff; } */
/* ---------------------------------------------------------
   Barra inferior
   --------------------------------------------------------- */

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
}

/* ---------------------------------------------------------
   Navegación del Footer (Menú Superior)
   --------------------------------------------------------- */
.footer-menu {
    position: relative;
    z-index: 2; /* Asegura que el menú quede por encima de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin-bottom: 10px; /* Espacio para que la imagen no se choque con los iconos sociales */
}
.footer-menu a {
position: relative;
    color: #a3a3a3; /* Color sobrio por defecto */
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none; /* Quitamos subrayados estáticos */
    padding: 8px 14px;
    border-radius: 20px; /* Borde redondeado estilo cápsula o pill */
    background-color: transparent;
    transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

.footer-menu a:hover {
color: #000000; /* Texto resalta a blanco puro */
    background-color: rgba(255, 255, 255, 1); /* Fondo sutil semi-transparente */
    transform: translateY(-2px); /* Eleva ligeramente el botón */
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Resplandor / Glow tenue */
}
/* Estado activo/presionado */
.footer-menu a:active {
    transform: translateY(0);
}
.footer-back-top {
    color: #e1e1e1;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-back-top:hover {
    color: #fff;
}

.footer-copyright {
    justify-self: start;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

.footer-back-top {
   justify-self: end;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.footer-back-top span {
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
}

/* ---------------------------------------------------------
   Botón circular fijo
   --------------------------------------------------------- */

.footer-top-button {
    position: fixed;
    z-index: 20;
    right: 31px;
    bottom: 31px;

    width: 32px;
    height: 32px;

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

    border-radius: 50%;
    background: #f4f4f4;
    color: #080808;
    text-decoration: none;

    font-size: 17px;
    line-height: 1;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform .2s ease, background-color .2s ease;
}

.footer-top-button:hover {
    background: #fff;
    transform: translateY(-2px);
}

.footer-top-button:focus-visible {
    border-radius: 50%;
}

/* ---------------------------------------------------------
   1200 px
   --------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .site-footer .container {
        max-width: 960px;
    }

    .footer-social-links {
        column-gap: 65px;
    }
}

/* ---------------------------------------------------------
   992 px
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .site-footer {
        min-height: auto;
        padding-top: 90px;
    }

    .site-footer .container {
        max-width: 720px;
    }

    .footer-social-links {
        column-gap: 42px;
    }

    .footer-bottom {
        margin-top: 105px;
    }
}

/* ---------------------------------------------------------
   768 px
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    .site-footer {
        padding: 72px 0 28px;
    }

    .footer-heading {
        font-size: 18px;
    }

    .footer-social-links {
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        column-gap: 55px;
        row-gap: 25px;
        margin-top: 48px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 25px;
        margin-top: 85px;
    }

    .footer-menu {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-copyright {
        order: 3;
    }

    .footer-back-top {
        order: 2;
        justify-self: center;
    }

    .footer-top-button {
        right: 20px;
        bottom: 20px;
    }
}

/* ---------------------------------------------------------
   576 px
   --------------------------------------------------------- */

@media (max-width: 575.98px) {
    .site-footer {
        padding-top: 60px;
    }

    .site-footer .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .footer-logo {
        width: 58px;
        height: 58px;
        margin-bottom: 24px;
    }

    .footer-heading {
        font-size: 17px;
    }

    .footer-subtitle {
        font-size: 10px;
    }

    .footer-social-links {
        width: 100%;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
        row-gap: 24px;
        margin-top: 45px;
    }

    .footer-social-link {
        justify-content: center;
        font-size: 12px;
    }

    .footer-bottom {
        margin-top: 75px;
    }

    .footer-menu {
        gap: 18px;
    }
}

/* ---------------------------------------------------------
   390 px
   --------------------------------------------------------- */

@media (max-width: 390px) {
    .site-footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-social-links {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }

    .footer-social-link {
        justify-content: center;
    }

    .footer-bottom {
        margin-top: 65px;
    }

    .footer-menu {
        gap: 14px 18px;
    }

    .footer-menu a,
    .footer-back-top,
    .footer-copyright {
        font-size: 11px;
    }
}

/* ---------------------------------------------------------
   360 px
   --------------------------------------------------------- */

@media (max-width: 359.98px) {
    .site-footer {
        padding-top: 50px;
    }

    .footer-heading {
        font-size: 16px;
    }

    .footer-menu {
        gap: 12px 16px;
    }

    .footer-top-button {
        right: 14px;
        bottom: 14px;
    }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .footer-social-link,
    .footer-top-button {
        transition: none;
    }
}

/* =========================================================
   Ajuste exclusivo para Header Aviso de Privacidad
   ========================================================= */

/* 1. Flexbox centrado con altura mínima suficiente */
.header-inner.header-aviso {
  min-height: 280px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* El padding superior libra la barra de navegación fija */
  padding-top: 130px !important; 
  padding-bottom: 50px !important;
  box-sizing: border-box !important;
}

/* 2. Asegurar que el contenedor del texto no tenga márgenes negativos ni desbordes */
.header-aviso .container {
  position: relative !important;
  z-index: 2 !important;
}

.header-aviso .header-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. En dispositivos móviles */
@media (max-width: 768px) {
  .header-inner.header-aviso {
    min-height: 220px !important;
    padding-top: 100px !important;
    padding-bottom: 30px !important;
  }
}


/* Ajustes para móviles */
@media (max-width: 991.98px) {
    footer .footer-image {
        top: 0;
    }
    .footer-menu {
        margin-bottom: 32px;
    }
}

@media (max-width: 767.98px) {
    footer .footer-image {
        top: 0;
    }
    .footer-menu {
        gap: 12px 16px;
        margin-bottom: 32px;
    }
    .footer-menu a {
        font-size: 12px;
    }
}

/* Pantallas medianas (Laptops pequeñas / Tablets en horizontal) */
@media (max-width: 1199.98px) {
    footer .footer-image {
        max-width: 100%;
        margin: 25px auto 35px auto;
    }
}

/* Tablets en vertical */
@media (max-width: 991.98px) {
    footer .footer-image {
        margin: 20px auto 30px auto;
    }
}

/* Celulares */
@media (max-width: 767.98px) {
    footer .footer-image {
        margin: 15px auto 25px auto;
    }
}

/* Celulares pequeños */
@media (max-width: 575.98px) {
    footer .footer-image {
        margin: 10px auto 20px auto;
    }
}

@media (max-width: 767.98px) {
    .footer-bottom {
        grid-template-columns: 1fr; /* Pasa a 1 sola columna vertical */
        justify-items: center;      /* Centra ambos elementos horizontalmente */
        text-align: center;
        gap: 15px;
    }

    .footer-copyright,
    .footer-back-top {
        justify-self: center; /* Centra ambos elementos en móvil */
    }
}

/* A masked reflection follows the original letter contours, not the image box. */
.site-footer .footer-wordmark {
    position: relative;
    width: 100%;
    isolation: isolate;
}

.site-footer .footer-wordmark img {
    width: 100%;
    aspect-ratio: 1916 / 399;
}

.site-footer .footer-wordmark-light {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    -webkit-mask: url('../images/footer-letter-contours-v23.png') center / 100% 100% no-repeat;
    mask: url('../images/footer-letter-contours-v23.png') center / 100% 100% no-repeat;
    filter: drop-shadow(0 0 3px #a1cdff);
}

.site-footer .footer-wordmark-light::before {
    content: '';
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
    top: 50%;
    left: 0;
    background: conic-gradient(from 0deg,
        transparent 0deg 26deg, #83bfff33 42deg, #edf7ffdf 49deg,
        #a6d3ff66 56deg, transparent 78deg 204deg,
        #8cbfff20 218deg, #eaf5ff99 226deg, #8cbfff33 233deg,
        transparent 254deg 360deg);
    animation: footer-letter-orbit 12s linear infinite;
    animation-play-state: paused;
    transform: translateY(-50%) rotate(-25deg);
}

.site-footer.is-shimmer-running .footer-wordmark-light {
    opacity: .8;
}

.site-footer.is-shimmer-running .footer-wordmark-light::before {
    animation-play-state: running;
}

.site-footer .footer-shimmer-toggle {
    position: absolute;
    right: 4%;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ffffff24;
    border-radius: 50%;
    background: #080808;
    color: #a6b5c5;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.site-footer .footer-shimmer-toggle[hidden] { display: none; }
.site-footer .footer-shimmer-toggle:hover { color: #fff; border-color: #a6cfff80; }
.site-footer .footer-shimmer-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@keyframes footer-letter-orbit {
    from { transform: translateY(-50%) rotate(-25deg); }
    to { transform: translateY(-50%) rotate(335deg); }
}

@media (max-width: 767.98px) {
    .site-footer .footer-image { margin-bottom: 44px; }
    .site-footer .footer-shimmer-toggle { bottom: -28px; right: 0; }
    .site-footer .footer-copyright {
        white-space: normal;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer .footer-wordmark-light { display: none; }
    .site-footer .footer-wordmark-light::before { animation: none; }
    .site-footer .footer-shimmer-toggle { display: none; }
}