/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Tema hijo de Hello Elementor
Author: TOGA
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* 01. BASE */

.arvia-header,
.arvia-header * {
    box-sizing: border-box;
}

.arvia-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9999;

    width: 100%;
    height: 88px;

    background: #ffffff;

    transition:
        height 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 02. CONTENEDOR EXTERIOR */

.arvia-header__container {
    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;

    padding: 0 clamp(20px, 2.5vw, 40px);

    transition: padding 0.3s ease;
}

/* 03. CONTENEDOR INTERIOR */

.arvia-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    height: 100%;

    padding: 0 clamp(20px, 3vw, 48px);

    background: transparent;

    border-radius: 0;

    transition:
        height 0.3s ease,
        padding 0.3s ease,
        background-color 0.3s ease,
        border-radius 0.3s ease,
        box-shadow 0.3s ease;
}

/* 04. LOGOTIPO */

.arvia-header__logo {
    position: relative;

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

    width: 102px;
    height: 43px;

    flex-shrink: 0;

    text-decoration: none;
}

.arvia-header__logo-img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: opacity 0.25s ease;
}

/* 05. LOGOS INICIALES */

.arvia-header__logo-img--dark {
    opacity: 1;
}

.arvia-header__logo-img--light {
    opacity: 0;
}

/* =====================================================
   06. HEADER CUANDO HAY SCROLL
===================================================== */

.arvia-header.is-scrolled {
    height: 68px;

    background: rgba(0, 40, 112, 0.90);

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

    border-radius: 0 0 14px 14px;

    box-shadow: 0 5px 22px rgba(9, 28, 65, 0.12);
}

/* Eliminar los márgenes laterales de la cápsula */

.arvia-header.is-scrolled .arvia-header__container {
    width: 100%;
    height: 100%;

    padding: 0;
}

/* Contenido alineado dentro del header azul */

.arvia-header.is-scrolled .arvia-header__inner {
    width: 100%;
    height: 100%;

    padding: 0 clamp(24px, 4.5vw, 72px);

    background: transparent;

    border-radius: 0;

    box-shadow: none;
}

/* 07. CAMBIO DE LOGO */

.arvia-header.is-scrolled
.arvia-header__logo-img--dark {
    opacity: 0;
}

.arvia-header.is-scrolled
.arvia-header__logo-img--light {
    opacity: 1;
}

/* =====================================================
   08. TABLET
===================================================== */

@media (max-width: 1024px) {

    .arvia-header {
        height: 78px;
    }

    .arvia-header__container {
        padding: 0 20px;
    }

    .arvia-header__inner {
        padding: 0 15px;
    }

    .arvia-header.is-scrolled {
        height: 62px;
        border-radius: 0 0 12px 12px;
    }

    .arvia-header.is-scrolled
    .arvia-header__inner {
        padding: 0 28px;
    }

}

/* =====================================================
   09. MOBILE
===================================================== */

@media (max-width: 767px) {

    .arvia-header {
        height: 72px;
    }

    .arvia-header__container {
        padding: 0 10px;
    }

    .arvia-header__inner {
        padding: 0 10px;
    }

    .arvia-header__logo {
        width: 92px;
        height: 39px;
    }

    .arvia-header.is-scrolled {
        height: 56px;

        border-radius: 0 0 12px 12px;
    }

    .arvia-header.is-scrolled
    .arvia-header__inner {
        padding: 0 20px;
    }

}


/* =====================================================
   ARVIA - HEADER AZUL PERMANENTE EN SINGLE PRODUCT
===================================================== */

/* 01. HEADER AZUL DESDE LA PRIMERA CARGA */

body.single-product .arvia-header {
    height: 68px;

    background: rgba(0, 40, 112, 0.90);

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

    border-radius: 0 0 14px 14px;

    box-shadow: 0 5px 22px rgba(9, 28, 65, 0.12);
}

/* 02. CONTENEDOR SIN MÁRGENES LATERALES */

body.single-product .arvia-header__container {
    width: 100%;
    height: 100%;
    padding: 0;
}

/* 03. LOGO ALINEADO DENTRO DE LA BARRA */

body.single-product .arvia-header__inner {
    width: 100%;
    height: 100%;

    padding: 0 clamp(24px, 4.5vw, 72px);

    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* 04. MOSTRAR SIEMPRE EL LOGO BLANCO */

body.single-product .arvia-header__logo-img--dark {
    opacity: 0;
}

body.single-product .arvia-header__logo-img--light {
    opacity: 1;
}

/* 05. TABLET */

@media (max-width: 1024px) {

    body.single-product .arvia-header {
        height: 62px;
        border-radius: 0 0 12px 12px;
    }

    body.single-product .arvia-header__inner {
        padding: 0 28px;
    }

}

/* 06. MOBILE */

@media (max-width: 767px) {

    body.single-product .arvia-header {
        height: 56px;
    }

    body.single-product .arvia-header__inner {
        padding: 0 20px;
    }

}


/* =====================================================
   10. ACCESIBILIDAD
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .arvia-header,
    .arvia-header__container,
    .arvia-header__inner,
    .arvia-header__logo-img {
        transition: none;
    }

}


/* =====================================================
   ARVIA - FOOTER V1
   Desktop + Tablet + Mobile
===================================================== */

/* 02. FOOTER BASE */

.arvia-footer,
.arvia-footer * {
    box-sizing: border-box;
}

.arvia-footer {
    position: relative;
    width: 100%;

    background: #030724;
    color: #ffffff;

    font-family: 'Montserrat', Arial, sans-serif;
}

/* 03. CONTENEDOR */

.arvia-footer__container {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    padding:
        34px
        clamp(24px, 7.6vw, 110px)
        20px;
}

/* =====================================================
   04. PARTE SUPERIOR
===================================================== */

.arvia-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    gap: 32px;

    margin-bottom: 28px;
}

/* 05. LOGOTIPO */

.arvia-footer__brand {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
    flex-shrink: 0;
}

.arvia-footer__logo {
    display: block;

    width: clamp(140px, 13.5vw, 175px);
    height: auto;

    object-fit: contain;
}

/* =====================================================
   06. REDES SOCIALES
===================================================== */

.arvia-footer__social {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 14px;
}

/* Botones circulares */

.arvia-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

/* Iconos */

.arvia-footer__social-link svg {
    display: block;

    width: 18px;
    height: 18px;

    flex-shrink: 0;
}

/* YouTube utiliza el SVG original de 15px */

.arvia-footer__social-link:last-child svg {
    width: 15px;
    height: 15px;
}

/* Interacción */

.arvia-footer__social-link {
    cursor: pointer;
}

.arvia-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);

    transform: translateY(-2px);
}
/* =====================================================
   07. PARTE INFERIOR
===================================================== */

.arvia-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    gap: 14px;

    text-align: center;
}

/* 08. ENLACES LEGALES */

.arvia-footer__legal {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
    gap: 14px;
}

.arvia-footer__legal a {
    color: #b4b6c5;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: underline;
    text-underline-offset: 2px;

    transition: color 0.25s ease;
}

.arvia-footer__legal a:hover {
    color: #ffffff;
}

/* =====================================================
   09. COPYRIGHT
===================================================== */

.arvia-footer__copyright {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
    gap: 12px;

    color: #b4b6c5;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}



/* Separador vertical */

.arvia-footer__separator {
    color: rgba(255, 255, 255, 0.65);
}

/* Enlace TOGA */

.arvia-footer__copyright a {
    color: #b4b6c5;
    text-decoration: underline;
    text-underline-offset: 2px;

    transition: color 0.25s ease;
}

.arvia-footer__copyright a:hover {
    color: #ffffff;
}

/* =====================================================
   10. TABLET
===================================================== */

@media (max-width: 1024px) {

    .arvia-footer__container {
        padding: 34px 40px 24px;
    }

    .arvia-footer__top {
        margin-bottom: 30px;
    }

    .arvia-footer__logo {
        width: 155px;
    }

    .arvia-footer__social {
        gap: 10px;
    }

}

/* =====================================================
   ARVIA - FOOTER MOBILE V2
   Diseño fiel a referencia
   Logo izquierda + redes derecha
===================================================== */

@media (max-width: 767px) {

    /* 01. CONTENEDOR */

    .arvia-footer__container {
        padding: 26px 18px 24px;
    }

    /* 02. LOGO + REDES EN UNA FILA */

    .arvia-footer__top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 10px;
        width: 100%;

        margin-bottom: 30px;
    }

    /* 03. LOGOTIPO */

    .arvia-footer__brand {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;

        flex: 0 1 auto;
        min-width: 0;
    }

    .arvia-footer__logo {
        display: block;

        width: clamp(90px, 29vw, 120px);
        max-width: 100%;
        height: auto;

        object-fit: contain;
    }

    /* 04. REDES SOCIALES */

    .arvia-footer__social {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        flex: 0 0 auto;
        flex-wrap: nowrap;

        gap: clamp(6px, 2vw, 11px);
    }

    .arvia-footer__social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: clamp(32px, 9.5vw, 38px);
        height: clamp(32px, 9.5vw, 38px);

        flex-shrink: 0;
        padding: 0;

        border-radius: 50%;
    }

    .arvia-footer__social-link svg {
        display: block;

        width: 18px;
        height: 18px;

        flex-shrink: 0;
    }

    /* YouTube mantiene su SVG de 15px */

    .arvia-footer__social-link:last-child svg {
        width: 15px;
        height: 15px;
    }

    /* 05. PARTE INFERIOR */

    .arvia-footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 24px;

        width: 100%;
        text-align: center;
    }

    /* 06. ENLACES LEGALES */

    .arvia-footer__legal {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        flex-wrap: nowrap;

        gap: clamp(10px, 3vw, 16px);
        width: 100%;
    }

    .arvia-footer__legal a {
        color: #b4b6c5;

        font-size: clamp(10px, 2.9vw, 12px);
        font-weight: 400;
        line-height: 1.5;

        white-space: nowrap;

        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* 07. COPYRIGHT */

    .arvia-footer__copyright {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 12px;

        width: 100%;
        max-width: none;

        color: #b4b6c5;

        font-size: clamp(10px, 2.8vw, 12px);
        font-weight: 400;
        line-height: 1.5;

        text-align: center;
    }

    /* Primera línea */

    .arvia-footer__copyright > span:first-child {
        display: block;
        white-space: nowrap;
    }

    /* Ocultar separador vertical */

    .arvia-footer__separator {
        display: none;
    }

    .arvia-footer__copyright > span:last-child {
    display: block;
    position: relative;

    width: max-content;
    max-width: 100%;

    margin: 0 auto;
    padding-top: 14px;

    white-space: nowrap;

    text-align: center;
    line-height: 1.5;
}

/* Raya decorativa centrada */

.arvia-footer__copyright > span:last-child::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 15px;
    height: 1px;

    background: rgba(255, 255, 255, 0.6);

    transform: translateX(-50%);
}

/* Enlace TOGA */

.arvia-footer__copyright > span:last-child a {
    display: inline;

    color: #b4b6c5;
    text-decoration: underline;
    text-underline-offset: 2px;

    white-space: nowrap;
}
}

/* =====================================================
   MOBILE PEQUEÑO
   320px - 380px
===================================================== */

@media (max-width: 380px) {

    .arvia-footer__container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .arvia-footer__top {
        gap: 6px;
    }

    .arvia-footer__logo {
        width: clamp(82px, 27vw, 105px);
    }

    .arvia-footer__social {
        gap: 5px;
    }

    .arvia-footer__social-link {
        width: 30px;
        height: 30px;
    }

    .arvia-footer__social-link svg {
        width: 16px;
        height: 16px;
    }

    .arvia-footer__social-link:last-child svg {
        width: 14px;
        height: 14px;
    }

    /* Mantener enlaces legales juntos */

    .arvia-footer__legal {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .arvia-footer__legal a {
        font-size: 10px;
    }

    .arvia-footer__copyright {
        font-size: 10px;
    }

}

/* =====================================================
   13. ACCESIBILIDAD
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .arvia-footer__social-link,
    .arvia-footer__legal a,
    .arvia-footer__copyright a {
        transition: none;
    }

}