/* Preguntas frecuentes (home v5) · acordeón editorial, sin números ni panel lateral */
.fh__rejilla { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: start; }
.fh__lado { position: sticky; top: 112px; }
.fh__lado .parrafo { max-width: 32ch; }
.fh__lista { border-top: 1px solid rgba(31, 26, 21, .12); }
.fh__item { border-bottom: 1px solid rgba(31, 26, 21, .12); }
.fh__item h3 { margin: 0; font: inherit; }
.fh__btn { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 16px; width: 100%; padding: 24px 0; text-align: left; }
.fh__q { font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; transition: color .3s var(--curva-hover); }
.fh__signo { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--crema); transition: background-color .3s var(--curva-hover), color .3s var(--curva-hover); }
.fh__signo::before, .fh__signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .4s var(--curva); }
.fh__signo::after { transform: rotate(90deg); }
.fh__btn:hover .fh__q { color: var(--acento-hondo); }
.fh__btn:hover .fh__signo { background: var(--acento-suave); }
.fh__item.abierto .fh__signo { background: var(--acento); color: var(--blanco); }
.fh__item.abierto .fh__signo::after { transform: rotate(0deg); }
.fh__resp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--curva); }
.fh__resp > div { overflow: hidden; }
.fh__resp p { max-width: 56ch; padding: 0 60px 26px 0; font-size: 16px; line-height: 1.6; color: var(--texto-60); }
.fh__item.abierto .fh__resp { grid-template-rows: 1fr; }

@media (max-width: 1100px) { .fh__rejilla { gap: 48px; } }
@media (max-width: 900px) {
  .fh__rejilla { grid-template-columns: 1fr; gap: 28px; }
  .fh__lado { position: static; }
  .fh__btn { grid-template-columns: 1fr 38px; padding: 20px 0; }
  .fh__q { font-size: 20px; }
  .fh__signo { width: 38px; height: 38px; }
  .fh__resp p { padding-right: 0; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fh__resp, .fh__signo::after { transition: none; } }
.fh__todas { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; color: var(--acento-hondo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fh__todas .lucide { width: 16px; height: 16px; }
.fh__todas:hover { color: var(--texto); }