.primeview-faq {
--pv-faq-green: #22c55e;
--pv-faq-text: #0f172a;
--pv-faq-muted: #64748b;
--pv-faq-radius: 22px;
--pv-faq-shadow: 0 12px 32px rgba(15, 23, 42, 0.09);
position: relative;
width: 100%;
background: #ffffff;
color: var(--pv-faq-text);
padding: 58px 48px 96px;
}
.primeview-faq__inner {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
.primeview-faq__header {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.primeview-faq__eyebrow {
margin: 0 0 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.3;
text-transform: uppercase;
color: var(--pv-faq-green);
}
.primeview-faq__headline {
margin: 0 0 16px;
font-size: clamp(2rem, 3.6vw, 3.15rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--pv-faq-text);
text-wrap: balance;
}
.primeview-faq__subhead {
margin: 0 auto;
max-width: 560px;
font-size: 1.05rem;
line-height: 1.6;
color: var(--pv-faq-muted);
}
.primeview-faq__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
.primeview-faq__item {
border-radius: var(--pv-faq-radius);
background: #ffffff;
box-shadow: var(--pv-faq-shadow);
overflow: hidden;
border: 1px solid transparent;
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease,
box-shadow 0.3s ease;
transition-delay: var(--pv-faq-delay, 0ms);
}
.primeview-faq.is-visible .primeview-faq__item {
opacity: 1;
transform: translateY(0);
}
.primeview-faq__item.is-open {
border-color: rgba(34, 197, 94, 0.45);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}
.primeview-faq__trigger {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 20px 22px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
color: inherit;
}
.primeview-faq__q-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: #f0fdf4;
color: var(--pv-faq-green);
font-size: 15px;
font-weight: 700;
}
.primeview-faq__question {
flex: 1 1 auto;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.35;
color: var(--pv-faq-text);
}
.primeview-faq__toggle {
position: relative;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.primeview-faq__toggle::before,
.primeview-faq__toggle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #94a3b8;
border-radius: 2px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.primeview-faq__toggle::before {
width: 14px;
height: 2px;
transform: translate(-50%, -50%);
}
.primeview-faq__toggle::after {
width: 2px;
height: 14px;
transform: translate(-50%, -50%);
}
.primeview-faq__item.is-open .primeview-faq__toggle::after {
transform: translate(-50%, -50%) scaleY(0);
}
.primeview-faq__item.is-open .primeview-faq__toggle::before {
background: var(--pv-faq-green);
}
.primeview-faq__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.primeview-faq__item.is-open .primeview-faq__panel {
grid-template-rows: 1fr;
}
.primeview-faq__answer {
overflow: hidden;
margin: 0;
padding: 0 22px 0 70px;
font-size: 15px;
line-height: 1.6;
color: var(--pv-faq-muted);
min-height: 0;
}
.primeview-faq__item.is-open .primeview-faq__answer {
padding-bottom: 20px;
}
.primeview-faq__support {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 40px;
padding: 22px 28px;
border-radius: var(--pv-faq-radius);
background: #f8fafc;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.primeview-faq.is-visible .primeview-faq__support {
opacity: 1;
transform: translateY(0);
}
.primeview-faq__support-copy {
display: flex;
align-items: center;
gap: 16px;
}
.primeview-faq__support-icon {
display: block;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: #f0fdf4;
-webkit-mask: none;
position: relative;
}
.primeview-faq__support-icon::after {
content: '';
position: absolute;
inset: 12px;
background-color: var(--pv-faq-green);
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 14v3a2 2 0 0 0 2 2h2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M20 14v3a2 2 0 0 1-2 2h-2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4 12a8 8 0 0 1 16 0' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 12v2M16 12v2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 14v3a2 2 0 0 0 2 2h2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M20 14v3a2 2 0 0 1-2 2h-2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4 12a8 8 0 0 1 16 0' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 12v2M16 12v2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.primeview-faq__support-title {
margin: 0 0 2px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--pv-faq-text);
}
.primeview-faq__support-sub {
margin: 0;
font-size: 15px;
color: var(--pv-faq-muted);
}
.primeview-faq__whatsapp {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border-radius: 999px;
border: 1.5px solid var(--pv-faq-green);
background: #ffffff;
color: var(--pv-faq-green);
font-size: 15px;
font-weight: 650;
text-decoration: none;
white-space: nowrap;
transition:
background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
color 0.35s ease,
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s ease;
}
.primeview-faq__whatsapp:hover,
.primeview-faq__whatsapp:focus-visible {
background: var(--pv-faq-green);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(34, 197, 94, 0.22);
outline: none;
}
.primeview-faq__whatsapp-icon {
display: block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 14.9L2 22l5.24-1.37A9.9 9.9 0 1 0 12.04 2Zm0 1.8a8.1 8.1 0 0 1 6.8 12.5l-.3.46.7 2.55-2.62-.69-.45.27a8.1 8.1 0 1 1-4.13-15.1Zm-3.5 3.7c-.2 0-.5.07-.72.35-.23.28-.87.85-.87 2.07s.89 2.4 1.02 2.56c.12.17 1.76 2.8 4.35 3.82 2.15.86 2.58.69 3.05.64.46-.05 1.5-.61 1.71-1.2.21-.59.21-1.1.15-1.2-.06-.1-.23-.17-.48-.3-.25-.12-1.5-.74-1.73-.82-.23-.09-.4-.12-.57.12-.17.25-.66.82-.81.99-.15.17-.3.19-.55.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.3.37-.45.12-.15.17-.25.25-.42.09-.17.04-.32-.02-.45-.06-.12-.57-1.37-.78-1.88-.2-.48-.41-.42-.57-.42Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 14.9L2 22l5.24-1.37A9.9 9.9 0 1 0 12.04 2Zm0 1.8a8.1 8.1 0 0 1 6.8 12.5l-.3.46.7 2.55-2.62-.69-.45.27a8.1 8.1 0 1 1-4.13-15.1Zm-3.5 3.7c-.2 0-.5.07-.72.35-.23.28-.87.85-.87 2.07s.89 2.4 1.02 2.56c.12.17 1.76 2.8 4.35 3.82 2.15.86 2.58.69 3.05.64.46-.05 1.5-.61 1.71-1.2.21-.59.21-1.1.15-1.2-.06-.1-.23-.17-.48-.3-.25-.12-1.5-.74-1.73-.82-.23-.09-.4-.12-.57.12-.17.25-.66.82-.81.99-.15.17-.3.19-.55.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.3.37-.45.12-.15.17-.25.25-.42.09-.17.04-.32-.02-.45-.06-.12-.57-1.37-.78-1.88-.2-.48-.41-.42-.57-.42Z'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
.primeview-faq {
padding: 45px 24px 80px;
}
.primeview-faq__grid {
grid-template-columns: 1fr;
}
.primeview-faq__support {
flex-direction: column;
align-items: flex-start;
padding: 20px 22px;
}
}
@media (max-width: 639.98px) {
.primeview-faq {
padding: 38px 20px 72px;
}
.primeview-faq__answer {
padding-left: 22px;
}
.primeview-faq__whatsapp {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.primeview-faq__item,
.primeview-faq__support,
.primeview-faq__panel {
transition: none;
opacity: 1;
transform: none;
}
}