/*==================================================

FAQ PREMIUM V2

==================================================*/

.faq-premium{

position:relative;

padding:150px 0;

background:linear-gradient(135deg,#10224d,#16306b);

overflow:hidden;

}

.faq-background-question{

position:absolute;

right:-60px;

top:-120px;

font-size:650px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

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

line-height:1;

pointer-events:none;

user-select:none;

}


/*====================================

FOTO

====================================*/

.faq-photo{

position:relative;

}

.faq-photo img{

width:100%;

height:760px;

object-fit:cover;

border-radius:30px;

box-shadow:

0 40px 90px rgba(0,0,0,.30);

}


/*====================================

CARD

====================================*/

.faq-photo-card{

position:absolute;

left:40px;

bottom:40px;

width:340px;

padding:35px;

border-radius:24px;

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

backdrop-filter:blur(18px);

box-shadow:

0 20px 60px rgba(0,0,0,.15);

}

.faq-photo-card span{

display:inline-block;

padding:8px 18px;

background:#eef3fb;

border-radius:50px;

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:var(--azul);

margin-bottom:15px;

}

.faq-photo-card h3{

font-size:34px;

color:var(--azul);

line-height:1.2;

margin:0;

}


/*====================================

TEXTOS

====================================*/

.section-tag-light{

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

color:white;

}

.faq-title{

font-size:64px;

line-height:1.05;

color:white;

margin:28px 0;

}

.faq-text{

font-size:20px;

line-height:2;

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

margin-bottom:50px;

}


/*====================================

LISTA

====================================*/

.faq-list{

display:flex;

flex-direction:column;

gap:18px;

}


/*====================================

ITEM

====================================*/

.faq-item{

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

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

border-radius:20px;

overflow:hidden;

transition:.35s;

backdrop-filter:blur(18px);

}

.faq-item:hover{

border-color:rgba(255,255,255,.18);

transform:translateX(8px);

}

.faq-item.active{

background:white;

}


/*====================================

QUESTION

====================================*/

.faq-question{

display:flex;

justify-content:space-between;

align-items:center;

padding:28px 35px;

cursor:pointer;

}

.faq-question span{

font-size:22px;

font-weight:600;

color:white;

transition:.3s;

}

.faq-item.active .faq-question span{

color:var(--azul);

}


/*====================================

ICONO

====================================*/

.faq-icon{

width:48px;

height:48px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

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

color:white;

transition:.35s;

font-size:20px;

}

.faq-item.active .faq-icon{

background:var(--azul);

color:white;

transform:rotate(45deg);

}


/*====================================

RESPUESTA

====================================*/

.faq-answer{

max-height:0;

overflow:hidden;

padding:0 35px;

transition:

max-height .45s ease,

padding .45s ease;

font-size:17px;

line-height:1.9;

color:#666;

}

.faq-item.active .faq-answer{

max-height:260px;

padding:0 35px 30px;

}


/*====================================

CTA

====================================*/

.faq-contact-box{

margin-top:45px;

padding:35px 40px;

background:white;

border-radius:24px;

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

box-shadow:

0 20px 60px rgba(0,0,0,.18);

}

.faq-contact-box h3{

font-size:36px;

color:var(--azul);

margin-bottom:10px;

}

.faq-contact-box p{

margin:0;

color:#666;

}


/*====================================

RESPONSIVE

====================================*/

@media(max-width:1200px){

.faq-title{

font-size:54px;

}

}

@media(max-width:991px){

.faq-premium{

padding:100px 0;

}

.faq-photo img{

height:auto;

}

.faq-photo-card{

position:relative;

left:auto;

bottom:auto;

margin-top:-80px;

width:90%;

margin-left:auto;

margin-right:auto;

}

.faq-title{

font-size:46px;

}

.faq-contact-box{

flex-direction:column;

text-align:center;

}

.faq-background-question{

display:none;

}

}

@media(max-width:576px){

.faq-premium{

padding:70px 0;

}

.faq-title{

font-size:34px;

}

.faq-text{

font-size:17px;

line-height:1.8;

}

.faq-question{

padding:22px;

}

.faq-question span{

font-size:18px;

}

.faq-answer{

font-size:16px;

}

.faq-photo-card{

padding:25px;

}

.faq-photo-card h3{

font-size:28px;

}

.faq-contact-box{

padding:28px;

}

.faq-contact-box h3{

font-size:28px;

}

}