/*==========================================
AREAS PREMIUM
==========================================*/

.areas-premium{

padding:140px 0;

background:#f8f9fc;

position:relative;

overflow:hidden;

}

.areas-heading{

margin-bottom:80px;

}

.areas-heading .section-title{

max-width:850px;

margin:auto;

margin-bottom:20px;

}

.areas-heading .section-text{

max-width:700px;

margin:auto;

font-size:19px;

}


/*==========================================
CARDS
==========================================*/

.area-card{

position:relative;

background:#fff;

border-radius:24px;

padding:45px;

height:100%;

border:1px solid #ececec;

overflow:hidden;

transition:.35s;

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

}

.area-card:hover{

transform:translateY(-12px);

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

border-color:var(--dorado);

}

.area-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:transparent;

transition:.35s;

}

.area-card:hover::before{

background:var(--dorado);

}


/*==========================================
NUMERO
==========================================*/

.area-number{

display:block;

font-size:13px;

font-weight:700;

letter-spacing:3px;

color:var(--dorado);

margin-bottom:20px;

}


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

.area-icon{

width:82px;

height:82px;

border-radius:50%;

background:#eef3fb;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:var(--azul);

margin-bottom:30px;

transition:.35s;

}

.area-card:hover .area-icon{

background:var(--azul);

color:white;

transform:rotate(-8deg);

}


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

.area-card h3{

font-size:34px;

color:var(--azul);

margin-bottom:18px;

}

.area-card p{

font-size:17px;

line-height:1.8;

margin-bottom:25px;

color:#666;

}


/*==========================================
LISTA
==========================================*/

.area-list{

padding:0;

margin:0 0 30px;

list-style:none;

}

.area-list li{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:14px;

font-size:16px;

color:#555;

}

.area-list i{

color:var(--dorado);

font-size:18px;

margin-top:2px;

}


/*==========================================
LINK
==========================================*/

.area-link{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

text-decoration:none;

color:var(--azul);

transition:.35s;

}

.area-link:hover{

color:var(--dorado);

}

.area-link i{

transition:.35s;

}

.area-link:hover i{

transform:translateX(8px);

}


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

.area-card-featured{

background:linear-gradient(135deg,#10224d,#1b3167);

}

.area-card-featured h3,

.area-card-featured p,

.area-card-featured li,

.area-card-featured .area-link{

color:white;

}

.area-card-featured .area-number{

color:#f5d28d;

}

.area-card-featured .area-icon{

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

color:white;

}

.area-card-featured .area-link:hover{

color:#f5d28d;

}


/*==========================================
BLOQUE INFERIOR
==========================================*/

.areas-bottom{

margin-top:80px;

background:white;

padding:40px 45px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

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

}

.areas-bottom-icon{

width:80px;

height:80px;

min-width:80px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#eef3fb;

font-size:34px;

color:var(--azul);

}

.areas-bottom-content{

flex:1;

}

.areas-bottom-content span{

display:block;

font-size:28px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:var(--azul);

margin-bottom:10px;

}

.areas-bottom-content p{

margin:0;

color:#666;

}


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

@media(max-width:991px){

.areas-premium{

padding:90px 0;

}

.area-card{

padding:35px;

}

.area-card h3{

font-size:30px;

}

.areas-bottom{

flex-direction:column;

text-align:center;

}

}

@media(max-width:576px){

.areas-premium{

padding:70px 0;

}

.area-card{

padding:28px;

}

.area-card h3{

font-size:27px;

}

.area-icon{

width:70px;

height:70px;

font-size:28px;

}

.areas-bottom{

padding:30px;

}

.areas-bottom-content span{

font-size:24px;

}

}