/*==================================================
FUENTE
==================================================*/

.newsletter,
.newsletter *{

    font-family: 'Poppins', sans-serif;

}
html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/*==================================================
BANNER BOLETÍN
==================================================*/

.newsletter-banner{

    width:100%;

    height:360px;

    margin:0;
    padding:0;

    background:
    linear-gradient(
        rgba(10,25,55,.42),
        rgba(10,25,55,.42)
    ),
    url("../assets/img/bans.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

.newsletter-overlay{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;

}

.newsletter-container{

    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 60px;

}

.newsletter-banner h1{

    color:#ffffff;

    font-family:'Poppins',sans-serif;

    font-size:84px;

    font-weight:800;

    line-height:1;

    letter-spacing:-2px;

}

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

@media(max-width:992px){

.newsletter-banner{

height:300px;

}

.newsletter-container{

padding:0 40px;

}

.newsletter-banner h1{

font-size:62px;

}

}

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

@media(max-width:768px){

.newsletter-banner{

height:240px;

}

.newsletter-container{

padding:0 24px;

}

.newsletter-banner h1{

font-size:46px;

}

}

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

@media(max-width:480px){

.newsletter-banner{

height:200px;

}

.newsletter-container{

padding:0 18px;

}

.newsletter-banner h1{

font-size:36px;

}

}
/*==================================================
PORTAFOLIOS POR MES
==================================================*/

.newsletter{

    width:100%;
    padding:90px 0 100px;
    background:#fff;

}

.newsletter-container{

    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:0 40px;

}

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

.newsletter-subtitle{

    display:block;

    color:#F5A000;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:12px;

}

.newsletter h2{

    color:#123D83;

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:26px;

}

.newsletter-description{

    color:#222;

    font-size:18px;

    line-height:1.8;

    margin-bottom:55px;

    max-width:760px;

}

/*==================================================
GRID
==================================================*/

.newsletter-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:34px;

}

/*==================================================
CARD
==================================================*/

.newsletter-card{

    position:relative;

    background:#fff;

    border-radius:18px;

    padding:26px;

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

    transition:.35s;

}

.newsletter-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/*==================================================
MES
==================================================*/

.newsletter-month{

    position:absolute;

    top:10px;      /* antes 14px */
    right:18px;

    background:#D9EAFF;

    color:#123D83;

    font-size:17px;

    font-weight:700;

    padding:8px 20px;

    border-radius:30px;

    line-height:1;

}
/*==================================================
IMAGEN
==================================================*/

.newsletter-image{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

    margin-bottom:28px;

}

.newsletter-image img{

    width:185px;

    display:block;

    filter:drop-shadow(0 10px 10px rgba(0,0,0,.28));

    transition:.35s;

}

.newsletter-card:hover .newsletter-image img{

    transform:scale(1.03);

}

/*==================================================
TEXTOS
==================================================*/

.newsletter-card h3{

    color:#111;

    font-size:24px;

    font-weight:800;

    margin-bottom:22px;

}

/*==================================================
BOTÓN
==================================================*/

.newsletter-btn{

    width:100%;

    height:56px;

    background:#F5A000;

    color:#fff;

    border-radius:6px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:22px;

    font-weight:700;

    transition:.30s;

}

.newsletter-btn:hover{

    background:#123D83;

}

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

@media(max-width:1200px){

.newsletter-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:992px){

.newsletter{

padding:70px 0;

}

.newsletter-container{

padding:0 30px;

}

.newsletter-grid{

grid-template-columns:repeat(2,1fr);

}

.newsletter h2{

font-size:42px;

}

.newsletter-description{

font-size:17px;

}

.newsletter-image img{

width:165px;

}

}

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

@media(max-width:768px){

.newsletter{

    padding:60px 0;

}

.newsletter-container{

    padding:0 20px;

}

.newsletter-grid{

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.newsletter-subtitle{

    font-size:15px;

}

.newsletter h2{

    font-size:34px;

}

.newsletter-description{

    font-size:16px;

    margin-bottom:35px;

}

.newsletter-card{

    padding:18px;

}

.newsletter-month{

    font-size:14px;

    padding:6px 14px;

}

.newsletter-image img{

    width:125px;

}

.newsletter-placeholder{

    height:220px;

}

.newsletter-placeholder img{

    width:70px;

    height:70px;

}

.newsletter-card h3{

    font-size:18px;

}

.newsletter-btn{

    height:46px;

    font-size:16px;

}

}
/*==================================================
PLACEHOLDER (JULIO - AGOSTO - SEPTIEMBRE...)
==================================================*/

.newsletter-placeholder{

    width:100%;
    height:360px;

    background:#CFCFCF;

    border-radius:8px;

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

    overflow:hidden;

    margin-top:20px;
    margin-bottom:28px;

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

}

.newsletter-placeholder img{

    width:150px;
    height:150px;

    object-fit:contain;

    filter:none;

}

/*==================================================
BOTÓN PRÓXIMAMENTE
==================================================*/

.newsletter-coming{

    background:#6D86B8 !important;

    color:#fff !important;

}

.newsletter-coming:hover{

    background:#123D83 !important;

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

@media(max-width:992px){

.portfolio-container{

padding:0 25px;

}

.portfolio-content h2{

font-size:40px;

}

.portfolio-item{

gap:22px;

padding:20px;

}

.portfolio-info h3{

font-size:24px;

}

.portfolio-info p{

font-size:18px;

}

}

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

@media(max-width:768px){

.portfolio-content{

padding:70px 0;

}

.portfolio-container{

padding:0 18px;

}

.portfolio-content h2{

font-size:32px;

}

.portfolio-item{

flex-direction:column;

text-align:center;

padding:22px;

}

.portfolio-icon{

width:66px;
height:66px;

}

.portfolio-icon img{

width:40px;

}

.portfolio-info h3{

font-size:21px;

}

.portfolio-info p{

font-size:16px;

}

}
/*==================================================
CONTENIDO DEL PORTAFOLIO
==================================================*/

.portfolio-content{

    width:100%;
    padding:90px 0 100px;
    background:#fff;

}

.portfolio-container{

    width:100%;
    max-width:1320px;

    margin:auto;

    padding:0 40px;

}

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

.portfolio-subtitle{

    display:block;

    color:#F5A000;

    font-size:18px;

    font-weight:700;

    margin-bottom:12px;

}

.portfolio-content h2{

    color:#123D83;

    font-size:54px;

    font-weight:800;

    margin-bottom:55px;

    line-height:1.2;

}

/*==================================================
ITEMS
==================================================*/

.portfolio-item{

    display:flex;

    align-items:center;

    gap:34px;

    background:#fff;

    border-radius:20px;

    padding:24px 30px;

    margin-bottom:24px;

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

    transition:.30s;

}

.portfolio-item:hover{

    transform:translateY(-5px);

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

}

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

.portfolio-icon{

    width:72px;
    height:72px;

    border-radius:12px;

    background:#C9D7EA;

    display:flex;

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

    flex-shrink:0;

}

.portfolio-icon img{

    width:80px;

    object-fit:contain;

}

/*==================================================
TEXTOS
==================================================*/

.portfolio-info{

    flex:1;

}

.portfolio-info h3{

    font-size:31px;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

}

.portfolio-info p{

    font-size:26px;

    color:#6C6F92;

    line-height:1.6;

}
/*==================================================
FORZAR POPPINS
==================================================*/

.portfolio-content,
.portfolio-content *{

    font-family: 'Poppins', sans-serif !important;

}

.portfolio-content h2{

    font-family:'Poppins', sans-serif !important;
    font-weight:800;
    font-size:52px;
    color:#123D83;

}

.portfolio-subtitle{

    font-family:'Poppins', sans-serif !important;
    font-weight:700;
    color:#F5A000;
    text-transform:uppercase;

}

.portfolio-info h3{

    font-family:'Poppins', sans-serif !important;
    font-weight:700;
    font-size:18px;
    color:#111827;

}

.portfolio-info p{

    font-family:'Poppins', sans-serif !important;
    font-weight:400;
    font-size:18px;
    line-height:1.7;
    color:#666A86;

}