/* faq Section Styles */
.faq-section {
position: relative;
width: 100%;
height: 180vw;
overflow: hidden;
background-color: var(--bg-azul);
padding-top: 10vw;
}
.faq-envelope-container {
position: absolute;
bottom: 0;
z-index: 2;
height: auto;
width: 96vw;
left: 2vw;
}
.faq-envelope-base {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
transition: transform 0.5s cubic-bezier(.77, 0, .18, 1);
}
.faq-envelope-front {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}
.faq-paper-container {
position: absolute;
width:96vw;
left: 0;
right: 0;
margin: 0 auto;
bottom: 4vw;
transform: translateY(110%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
will-change: transform;
pointer-events: auto;
transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}
.faq-paper-container.slide-up {
transform: translateY(0);
}
.faq-paper-container {
transform: translateY(110%);
transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}
.faq-paper-container.slide-up {
transform: translateY(0);
}
.faq-paper {
width: 93%;
display: block;
}
.faq-content {
position: absolute;
top: 0vw;
left: 0vw;
width: 100%;
height: 100vw;
padding: 10vw 6vw 6vw 6vw;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 10;
}
h2.faq-title {
font-size: 9vw;
line-height: 11vw;
font-family: var(--euphorigenic);
margin-bottom: 6vw;
color: var(--karazan-bordo);
text-align: center;
font-weight: bold;
margin-top: 3vw;
}
.faq-accordion {
width: 100%;
max-width: 60vw;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2vw;
z-index: 11;
}
.faq-item {
background: none;
border: none;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 0;
}
.faq-question {
width: 100%;
background: none;
border: none;
outline: none;
font-size: 3.5vw;
line-height: 5vw;
font-family: 'Ibarra Real Nova', serif;
font-weight: normal;
color: var(--karazan-bordo);
padding: 0;
margin: 0;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 1vw;
position: relative;
transition: color 0.2s;
}
.faq-question::after {
content: '\25BC';
font-size: 2.5vw;
color: var(--karazan-bordo);
margin-left: 1vw;
transition: transform 0.3s;
}
.faq-item.active .faq-question::after {
transform: rotate(-180deg);
}
.faq-item.active .faq-question {
font-weight: bold;
}
.faq-answer {
max-height: 0;
overflow: hidden;
background: none;
padding: 0;
display: block;
transition: max-height 0.4s cubic-bezier(0.77, 0, 0.18, 1), padding 0.4s;
}
.faq-answer p {
font-family: var(--linbiolinum);
color: var(--karazan-bordo);
font-size: var(--fontSizeTexto);
line-height: var(--lineHeightTexto);
text-align: center;
}
.faq-item.active .faq-answer {
max-height: 200vw;
padding: 2vw 0 2vw 0;
display: block;
}