@charset "UTF-8";

/* =====================================================
   NEWSLETTER / SUSCRIPCION
===================================================== */

.newsletter{

    position:relative;

    padding:50px 0;

    background:
        linear-gradient(
            135deg,
            #0f4cc9,
            #1e5cc8,
            #2563eb
        );

    overflow:hidden;
}

/* =====================================================
   EFECTOS FONDO
===================================================== */

.newsletter::before{

    content:"";

    position:absolute;

    top:-140px;
    right:-120px;

    width:320px;
    height:320px;

    background:
        radial-gradient(
            rgba(255,255,255,.16),
            transparent 70%
        );

    pointer-events:none;
}

.newsletter::after{

    content:"";

    position:absolute;

    bottom:-120px;
    left:-100px;

    width:260px;
    height:260px;

    background:
        radial-gradient(
            rgba(255,255,255,.12),
            transparent 70%
        );

    pointer-events:none;
}

/* =====================================================
   CONTENEDOR
===================================================== */

.newsletter-inner{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:34px 38px;

    border-radius:28px;

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

    backdrop-filter:blur(14px);

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);
}

/* =====================================================
   BLOQUE TEXO
===================================================== */

.newsletter-content{

    max-width:560px;
}

/* =====================================================
   TITULO
===================================================== */

.newsletter h3{

    margin:0 0 12px;

    font-size:34px;

    line-height:1.15;

    font-weight:800;

    color:#fff;

    letter-spacing:-0.6px;
}

/* =====================================================
   DESCRIPCION
===================================================== */

.newsletter p{

    margin:0;

    color:
        rgba(255,255,255,.88);

    font-size:16px;

    line-height:1.8;
}

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

.newsletter-form{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    max-width:560px;

    flex-shrink:0;
}

/* =====================================================
   INPUT
===================================================== */

.newsletter-form input{

    flex:1;

    min-width:0;

    height:58px;

    padding:0 20px;

    border:none;

    border-radius:18px;

    background:#fff;

    color:#0f172a;

    font-size:15px;

    outline:none;

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

    transition:.3s ease;
}

/* PLACEHOLDER */

.newsletter-form input::placeholder{

    color:#94a3b8;
}

/* FOCUS */

.newsletter-form input:focus{

    box-shadow:
        0 0 0 5px rgba(255,255,255,.18),
        0 12px 28px rgba(0,0,0,.12);
}

/* =====================================================
   BOTON
===================================================== */

.newsletter-form button{

    height:58px;

    padding:0 26px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;

    transition:.32s ease;

    box-shadow:
        0 12px 28px rgba(15,23,42,.25);
}

/* HOVER */

.newsletter-form button:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 18px 35px rgba(15,23,42,.32);
}

/* =====================================================
   MENSAJE
===================================================== */

.newsletter-note{

    margin-top:14px;

    font-size:13px;

    color:
        rgba(255,255,255,.78);
}

/* =====================================================
   ICONO
===================================================== */

.newsletter-icon{

    width:78px;
    height:78px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    margin-bottom:20px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.12);
}

.newsletter-icon i{

    font-size:34px;

    color:#fff;
}

/* =====================================================
   MONITORES GRANDES
   24" / 27"
===================================================== */

@media (min-width:1600px){

    .newsletter{

        padding:70px 0;
    }

    .newsletter-inner{

        padding:46px 52px;

        border-radius:34px;
    }

    .newsletter h3{

        font-size:48px;
    }

    .newsletter p{

        font-size:19px;
    }

    .newsletter-form{

        max-width:700px;
    }

    .newsletter-form input{

        height:68px;

        font-size:17px;
    }

    .newsletter-form button{

        height:68px;

        font-size:17px;

        padding:0 34px;
    }

    .newsletter-icon{

        width:92px;
        height:92px;
    }

    .newsletter-icon i{

        font-size:40px;
    }
}

/* =====================================================
   LAPTOPS 14"
===================================================== */

@media (max-width:1200px){

    .newsletter-inner{

        gap:28px;

        padding:30px;
    }

    .newsletter h3{

        font-size:30px;
    }

    .newsletter-form{

        max-width:480px;
    }
}

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

@media (max-width:992px){

    .newsletter{

        padding:38px 0;
    }

    .newsletter-inner{

        flex-direction:column;

        align-items:flex-start;

        gap:26px;
    }

    .newsletter-content{

        max-width:none;
    }

    .newsletter-form{

        width:100%;

        max-width:none;
    }

    .newsletter h3{

        font-size:28px;
    }
}

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

@media (max-width:768px){

    .newsletter{

        padding:32px 0;
    }

    .newsletter-inner{

        padding:24px;

        border-radius:22px;
    }

    .newsletter-icon{

        width:66px;
        height:66px;

        border-radius:18px;

        margin-bottom:16px;
    }

    .newsletter-icon i{

        font-size:28px;
    }

    .newsletter h3{

        font-size:24px;

        margin-bottom:10px;
    }

    .newsletter p{

        font-size:14px;

        line-height:1.7;
    }

    .newsletter-form{

        flex-direction:column;

        align-items:stretch;

        gap:12px;
    }

    .newsletter-form input{

        width:100%;

        height:54px;

        border-radius:16px;

        font-size:14px;
    }

    .newsletter-form button{

        width:100%;

        height:54px;

        border-radius:16px;

        font-size:14px;
    }

    .newsletter-note{

        font-size:12px;
    }
}

/* =====================================================
   TELEFONOS GRANDES
===================================================== */

@media (max-width:580px){

    .newsletter{

        padding:26px 0;
    }

    .newsletter-inner{

        padding:20px;

        border-radius:18px;
    }

    .newsletter h3{

        font-size:21px;
    }

    .newsletter p{

        font-size:13px;
    }

    .newsletter-form input{

        height:50px;

        padding:0 16px;

        border-radius:14px;
    }

    .newsletter-form button{

        height:50px;

        border-radius:14px;

        font-size:13px;
    }

    .newsletter-icon{

        width:58px;
        height:58px;

        border-radius:16px;
    }

    .newsletter-icon i{

        font-size:24px;
    }
}

/* =====================================================
   TELEFONOS PEQUEÑOS
===================================================== */

@media (max-width:420px){

    .newsletter-inner{

        padding:18px;
    }

    .newsletter h3{

        font-size:18px;
    }

    .newsletter p{

        font-size:12px;
    }

    .newsletter-form input{

        height:46px;

        font-size:12px;
    }

    .newsletter-form button{

        height:46px;

        font-size:12px;
    }

    .newsletter-note{

        font-size:11px;
    }
}