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

.footer{
    background:#111;
    color:#fff;
    overflow:hidden;
}


.footer-top{
    display:grid;
    grid-template-columns:2.2fr 1.3fr 1.3fr 1fr;
    gap:50px;
    padding: 3rem clamp(110px, calc(235px - 9vw), 160px);
}

/* COLUMNAS */

.footer-col{
    position:relative;
}

.footer-col:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-25px;
    top:0;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.12);
}


/* LOGO */

.footer-logo{
    width:240px;
    margin-bottom:20px;
}

.footer-text{
    color:#d2d2d2;
    line-height:1.8;
    font-size:.95rem;
    max-width:320px;
}


/*=========================
        TITULOS
=========================*/

.footer-col h3{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 28px;
    padding-left:16px;
    position:relative;
    font-size:1.45rem;
    font-weight:700;
    color:#fff;
    letter-spacing:.5px;
}

.footer-col h3::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:5px;
    height:28px;
    background:#EFB81B;
    border-radius:20px;
}

.footer-col h3 svg{
    width:24px;
    height:24px;
    stroke:#EFB81B;
}


/*=========================
        LISTAS
=========================*/

.footer-col ul{
    list-style:none;
    margin:0;
    padding-left:18px;   /* Tabulación */
}

.footer-col ul li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
    color:#cfcfcf;
    font-size:1rem;
    line-height:1.6;
    transition:.3s;
}

.footer-col ul li svg{
    width:18px;
    height:18px;
    stroke:#EFB81B;
    margin-top:3px;
    flex-shrink:0;
}

.footer-col ul li:hover{
    color:#EFB81B;
    transform:translateX(5px);
}

.footer-col a{
    color:inherit;
    text-decoration:none;
}


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

.footer-redes{
    display:flex;
    flex-direction:column;
    align-items:center;      /* Centra la imagen e íconos */
    justify-content:center;
    margin-left:auto;        /* Mueve todo el bloque a la derecha */
    width:fit-content;       /* El bloque ocupa solo su contenido */
}

.footer-redes-icono{
    width:70px;
    margin-bottom:20px;
}

.footer-social{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

/*
.footer-social a{
    text-decoration:none;
}

.footer-social a i{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    font-size:1.45rem;
    transition:.3s;
}

.footer-social a:hover i{
    color:#111;
    transform:translateY(-4px);
}
*/

/* IMAGEN INFERIOR */

.footer{
    background:#111;
    color:#fff;
    overflow:hidden;

    display:flex;
    flex-direction:column;
}

.footer{
    position:relative;
    background:#111;
    color:#fff;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.footer-bottom{
    position:absolute;
    left:50%;
    bottom:5px;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    color:#000;
    background:transparent;
    padding:0;
    margin:0;
    line-height:1.2;
    z-index:10;
    box-shadow:none;
    font-size:.8rem;      /* Más pequeño */
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;  /* Menos separación */
}

.footer-bottom strong{
    color:#ffffff;
    font-weight:600;
}

.decoracion-footer {
    margin-bottom: 0;
}

.footer-copy {
    margin-top: -5px;
    padding: 3px 15px 15px;
    text-align: center;
}

.footer-copy p {
    margin: 0;
    font-size: 13px;
}

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

@media (max-width: 991px) {

    .footer {
        width: 100%;
        overflow: hidden;
    }

    .footer-top {
        width: 100%;
        padding: 45px 6% 40px;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 30px;
    }

    .footer-col {
        width: 100%;
        min-width: 0;
    }

    .footer-col:not(:last-child)::after {
        display: none;
    }

    .footer-logo {
        width: 210px;
        max-width: 100%;
        margin-bottom: 18px;
    }

    .footer-text {
        max-width: 100%;
        font-size: .95rem;
        line-height: 1.7;
    }

    .footer-col h3 {
        font-size: 1.3rem;
        margin-bottom: 22px;
    }

    .footer-col ul {
        padding-left: 0;
    }

    .footer-col ul li {
        font-size: .95rem;
        margin-bottom: 13px;
    }

    .footer-redes {
        width: 100%;
        margin: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .footer-redes-icono {
        display: none !important;
    }


    .footer-social {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }



    .footer-bottom {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;

        width: 100%;
        padding: 15px 5%;

        font-size: .75rem;
        text-align: center;
        color: #aaa;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .footer {
        width: 100%;
        overflow: hidden;
    }

    .footer-top {
        width: 100%;

        padding: 35px 6% 30px;

        display: grid;

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

        gap: 30px 20px;

        box-sizing: border-box;
    }


    /* =====================================================
       1. LOGO ARRIBA + TEXTO DEBAJO
       ===================================================== */

    .footer-col:first-child {

        grid-column: 1 / -1;

        width: 100%;

        display: flex;
        flex-direction: column;

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

        text-align: center;

        gap: 0;
    }


    .footer-col:first-child .footer-logo {

        display: block;

        width: 160px;
        max-width: 70%;

        height: auto;

        margin: 0 auto 18px;
    }


    .footer-col:first-child .footer-text {

        width: 100%;

        max-width: 350px;

        margin: 0 auto;

        font-size: .85rem;

        line-height: 1.6;

        text-align: center;

        color: #d2d2d2;
    }


    /* =====================================================
       2. ENLACES
       ===================================================== */

    .footer-col:nth-child(2) {

        grid-column: 1;

        width: 100%;
    }


    /* =====================================================
       3. CONTACTO
       ===================================================== */

    .footer-col:nth-child(3) {

        grid-column: 2;

        width: 100%;
    }


    .footer-col:not(:last-child)::after {
        display: none;
    }


    /* =====================================================
       TÍTULOS
       ===================================================== */

    .footer-col h3 {

        font-size: 1rem;

        gap: 7px;

        margin: 0 0 17px;

        padding-left: 11px;

        line-height: 1.3;
    }


    .footer-col h3::before {

        width: 4px;

        height: 22px;
    }


    .footer-col h3 svg {

        width: 18px;
        height: 18px;
    }


    /* =====================================================
       LISTAS
       ===================================================== */

    .footer-col ul {

        width: 100%;

        padding: 0;

        margin: 0;

        list-style: none;
    }


    .footer-col ul li {

        width: 100%;

        display: flex;

        align-items: flex-start;

        gap: 6px;

        margin-bottom: 10px;

        font-size: .78rem;

        line-height: 1.45;
    }


    .footer-col ul li svg {

        width: 14px;

        height: 14px;

        margin-top: 2px;

        flex-shrink: 0;
    }


    /* =====================================================
       4. REDES ABAJO
       ===================================================== */

    .footer-col:last-child {

        grid-column: 1 / -1;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .footer-redes {

        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }


    /* IMAGEN ARRIBA */

    .footer-redes-icono {
        display: none !important;
    }


    


    /* REDES DEBAJO EN FILA */

    .footer-social {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }


    .footer-social a {
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .footer-social a i {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        font-size: 1.1rem;
    }


    /* =====================================================
       COPYRIGHT
       ===================================================== */

    .footer-bottom {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        padding: 14px 5%;
        margin: 0;
        background: #111;
        color: #999;
        font-size: .65rem;
        line-height: 1.4;
        text-align: center;
    }


    .footer-bottom strong {
        color: #fff;
        font-weight: 600;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {

    .footer-top {

        padding: 30px 5% 25px;

        gap: 27px 15px;
    }


    /* LOGO */

    .footer-col:first-child .footer-logo {

        width: 140px;

        margin-bottom: 15px;
    }


    /* TEXTO */

    .footer-col:first-child .footer-text {

        font-size: .78rem;

        line-height: 1.55;

        max-width: 320px;
    }


    /* TÍTULOS */

    .footer-col h3 {

        font-size: .9rem;

        padding-left: 9px;

        gap: 5px;

        margin-bottom: 14px;
    }


    .footer-col h3::before {

        width: 3px;

        height: 19px;
    }


    .footer-col h3 svg {

        width: 16px;
        height: 16px;
    }


    /* LISTAS */

    .footer-col ul li {

        font-size: .72rem;

        gap: 4px;

        margin-bottom: 8px;

        line-height: 1.4;
    }


    .footer-col ul li svg {

        width: 12px;
        height: 12px;
    }


    /* REDES */

    .footer-redes-icono {
        display: none !important;
    }



    .footer-social {

        gap: 7px;
    }


    .footer-social a i {

        width: 38px;
        height: 38px;

        font-size: 1rem;

        border-radius: 9px;
    }


    .footer-bottom {

        font-size: .6rem;

        padding: 12px 4%;
    }
}

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: max-content;
    padding: 8px 18px;
    background: #111;
    border-radius: 4px;
}

.footer-bottom p {
    margin: 0;
    color: #EFB81B;
    font-size: 13px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .footer-bottom {
        max-width: 85%;
        padding: 9px 18px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}


/* =========================================================
   TABLET PEQUEÑA
   ========================================================= */

@media (max-width: 768px) {

    .footer-bottom {
        width: auto;
        max-width: 88%;
        padding: 8px 16px;
    }

    .footer-bottom p {
        font-size: 12px;
        line-height: 1.4;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 480px) {

    .footer-bottom {
        width: auto;
        max-width: 92%;
        padding: 8px 12px;
    }

    .footer-bottom p {
        font-size: 11px;
        line-height: 1.4;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    .footer-bottom {
        max-width: 94%;
        padding: 7px 10px;
    }

    .footer-bottom p {
        font-size: 10px;
    }
}


/* =========================================
   DECORACIÓN FOOTER
========================================= */

.decoracion-footer {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: visible;
    z-index: 9999;
}


/* =========================================
   OLAS
========================================= */

.decor-ola {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10000;
    pointer-events: none;
}


/* Ola inferior */
.decor-ola-left {
    bottom: -5px;
    animation: olaMovimientoIzq 4s ease-in-out infinite;
}


/* Ola superior */
.decor-ola-right {
    bottom: 55px;
    animation: olaMovimientoDer 5s ease-in-out infinite;
}


/* =========================================
   BARCOS
========================================= */

.decor-barco {
    position: absolute;
    width: 200px;
    height: auto;
    z-index: 10001;
    pointer-events: none;
}


/* Barco izquierdo */
.decor-barco-left {
    left: 130px;
    bottom: 35px;
    animation: barcoMovimientoIzq 5s ease-in-out infinite;
}


/* Barco derecho */
.decor-barco-right {
    right: 120px;
    bottom: 35px;
    animation: barcoMovimientoDer 5s ease-in-out infinite;
}


/* =========================================
   ANIMACIÓN OLAS
========================================= */

@keyframes olaMovimientoIzq {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes olaMovimientoDer {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================
   ANIMACIÓN BARCOS
========================================= */

@keyframes barcoMovimientoIzq {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}

@keyframes barcoMovimientoDer {
    0%, 100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(-8px) rotate(-2deg);
    }
}

@media (max-width: 768px) {

    /* =========================================
       DECORACIÓN EN CELULAR
    ========================================= */

    .decoracion-footer {
        height: 110px;
        overflow: visible;
    }


    /* =========================================
       OLAS MÁS GRANDES
    ========================================= */

    .decor-ola {
        width: 125%;
        max-width: none;
        left: -12.5%;
    }


    /* Ola inferior */
    .decor-ola-left {
        bottom: 5px;
        animation: olaMovimientoMobile 4s ease-in-out infinite;
    }


    /* Ola superior, más pegada */
    .decor-ola-right {
        bottom: 38px;
        animation: olaMovimientoMobile2 5s ease-in-out infinite;
    }


    /* =========================================
       SOLO UN BARCO
    ========================================= */

    .decor-barco-right {
        display: none;
    }


    .decor-barco-left {
        width: 140px;
        left: 50%;
        bottom: 40px;
        animation: barcoMovimientoMobile 5s ease-in-out infinite;
    }

}


/* =========================================
   ANIMACIÓN OLAS MOBILE
========================================= */

@keyframes olaMovimientoMobile {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


@keyframes olaMovimientoMobile2 {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


/* =========================================
   ANIMACIÓN BARCO MOBILE
========================================= */

@keyframes barcoMovimientoMobile {

    0%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateX(-50%) translateY(-6px) rotate(2deg);
    }

}