/* ═══════════════════════════════════════════════════════════════
CA CONTAINERS UY — faq.css
Requiere: header.css (variables :root)
Nota: usa Font Awesome para el ícono chevron.
Si no está cargado, agregar en :
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
SECCIÓN RAÍZ
═══════════════════════════════════════════════════════════════ */
.faq {
position: relative;
background: #f7faf8;
padding: 96px 24px 96px;
overflow: hidden;
}
/* Patrón de puntos — sutil, industrial */
.faq::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(
circle,
rgba(29, 137, 111, 0.12) 1px,
transparent 1px
);
background-size: 28px 28px;
opacity: 0.5;
pointer-events: none;
}
/* Gradiente que desvanece el patrón en los bordes */
.faq::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, #f7faf8 100%);
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
LAYOUT INTERIOR
═══════════════════════════════════════════════════════════════ */
.faq-info {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 48px;
}
/* ── Título ─────────────────────────────────────────────────── */
.faq-title {
font-family: var(--font-display);
font-size: clamp(30px, 4vw, 48px);
font-weight: 700;
line-height: 1.10;
letter-spacing: -0.01em;
color: #111c18;
margin: 0;
text-align: center;
text-wrap: balance;
}
/* Acento en la segunda línea via la
— no hay span, pero
podemos dar color al ::first-line si se desea.
En vez de eso, añadimos una barra decorativa debajo */
.faq-title::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: var(--clr-brand);
border-radius: 2px;
margin: 16px auto 0;
}
/* ═══════════════════════════════════════════════════════════════
LISTA DE PREGUNTAS
═══════════════════════════════════════════════════════════════ */
.faq-container {
display: flex;
flex-direction: column;
gap: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(29, 137, 111, 0.14);
background: #ffffff;
box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
/* ── Item ───────────────────────────────────────────────────── */
.faq-item {
border-bottom: 1px solid rgba(29, 137, 111, 0.10);
transition: background var(--transition-fast);
/* Entrada animada */
opacity: 0;
transform: scale(0.98) translateY(10px);
transition:
opacity 0.5s cubic-bezier(.22,1,.36,1),
transform 0.5s cubic-bezier(.22,1,.36,1),
background var(--transition-fast);
}
.faq-item:last-child {
border-bottom: none;
}
.faq-item.is-visible {
opacity: 1;
transform: none;
}
/* Delays escalonados */
.faq-item:nth-child(1) { transition-delay: 0s; }
.faq-item:nth-child(2) { transition-delay: 0.06s; }
.faq-item:nth-child(3) { transition-delay: 0.12s; }
.faq-item:nth-child(4) { transition-delay: 0.18s; }
.faq-item:nth-child(5) { transition-delay: 0.24s; }
.faq-item:nth-child(6) { transition-delay: 0.30s; }
.faq-item:nth-child(7) { transition-delay: 0.36s; }
.faq-item.active {
background: #fafffe;
}
/* ── Botón pregunta ─────────────────────────────────────────── */
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 28px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 15.5px;
font-weight: 600;
color: #111c18;
line-height: 1.4;
transition: color var(--transition-fast), background var(--transition-fast);
}
.faq-question:hover {
color: var(--clr-brand);
background: rgba(29, 137, 111, 0.03);
}
/* Línea izquierda de acento cuando está activo */
.faq-item.active .faq-question {
color: var(--clr-brand);
border-left: 3px solid var(--clr-brand);
padding-left: 25px; /* compensar el border */
}
/* ── Ícono chevron ──────────────────────────────────────────── */
.faq-icon {
font-size: 13px;
color: var(--clr-brand);
flex-shrink: 0;
transition: transform var(--transition-med);
opacity: 0.7;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
opacity: 1;
}
/* ── Respuesta — acordeón con max-height ────────────────────── */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.38s cubic-bezier(.4,0,.2,1);
}
/* Cuando el JS quita hidden, el CSS expande */
.faq-answer:not([hidden]) {
max-height: 400px; /* suficiente para cualquier respuesta */
}
/* El atributo hidden lo maneja el JS — override para la transición */
.faq-answer[hidden] {
display: block !important; /* necesario para la transición de max-height */
max-height: 0;
}
.faq-answer p {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.70;
color: #4a5e54;
margin: 0;
padding: 0 28px 24px 28px;
/* Padding izquierdo mayor cuando item activo tiene border-left */
}
.faq-item.active .faq-answer p {
padding-left: 25px;
}
/* Focus visible */
.faq-question:focus-visible {
outline: 2px solid var(--clr-brand);
outline-offset: -2px;
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.faq { padding: 72px 20px 80px; }
.faq-info { gap: 36px; }
.faq-question {
padding: 18px 20px;
font-size: 14.5px;
}
.faq-answer p {
padding: 0 20px 20px 20px;
font-size: 14px;
}
.faq-item.active .faq-question {
padding-left: 17px;
}
.faq-item.active .faq-answer p {
padding-left: 17px;
}
}
/* Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
.faq-item {
opacity: 1;
transform: none;
transition: background var(--transition-fast);
}
.faq-answer {
transition: none;
}
.faq-icon {
transition: none;
}
}