/* ========================= */
/* BASE */
/* ========================= */

body{

background:#f5f6f8;

}

/* ========================= */
/* HERO */
/* ========================= */

.faq-hero{

background:#fff;

padding:70px 0 55px;

text-align:center;

border-bottom:1px solid #eee;

}

.faq-hero h1{

font-size:46px;

font-weight:700;

color:#222;

margin-bottom:12px;

}

.faq-hero p{

font-size:17px;

color:#777;

margin:0;

}

/* ========================= */
/* FAQ */
/* ========================= */

.faq-premium{

padding:70px 0;

}

/* GRID */

.faq-grid{

display:grid;

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

gap:20px;

}

/* ITEM */

.faq-item{

background:#fff;

border:1px solid #e8e8e8;

border-radius:14px;

overflow:hidden;

transition:.2s;

}

.faq-item:hover{

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

}

/* PREGUNTA */

.faq-question{

width:100%;

background:#fff;

border:none;

padding:24px;

display:flex;

align-items:center;

justify-content:space-between;

cursor:pointer;

text-align:left;

}

.faq-left{

display:flex;

align-items:center;

gap:16px;

}

.faq-left i{

font-size:22px;

color:#b720eb;

min-width:24px;

}

.faq-left span{

font-size:18px;

font-weight:500;

color:#222;

line-height:1.4;

}

/* FLECHA */

.faq-arrow{

font-size:16px;

color:#222;

transition:.25s;

}

/* RESPUESTA */

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .3s ease;

padding:0 24px;

}

.faq-answer p{

font-size:15px;

line-height:1.7;

color:#666;

padding-bottom:24px;

margin:0;

}

/* ACTIVE */

.faq-item.active .faq-answer{

max-height:300px;

}

.faq-item.active .faq-arrow{

transform:rotate(90deg);

}

/* RESPONSIVE */

@media(max-width:992px){

.faq-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.faq-hero{

padding:55px 20px 40px;

}

.faq-hero h1{

font-size:34px;

}

.faq-question{

padding:20px;

}

.faq-left span{

font-size:16px;

}

}