/* ============================================================
   EJE INTELIGENTE — Página: Preguntas frecuentes
   Reutiliza el acordeón .faq de style.css. Solo añade hero,
   categorías y cierre.
   ============================================================ */

/* ---------- Hero de la página ---------- */
.faq-hero{
  position:relative;
  padding-top:clamp(140px,19vh,188px);
  padding-bottom:clamp(40px,5.5vw,64px);
  text-align:center;
}
.faq-hero .k{justify-content:center}
.faq-hero .k::before{
  content:"";flex:0 0 42px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.65));
}
.faq-hero h1{
  font-size:clamp(2.5rem,6.6vw,4.6rem);letter-spacing:-.035em;line-height:1.02;
  max-width:15ch;margin-inline:auto;
}
.faq-hero h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--green-bright);
}
.faq-hero .lead{margin-inline:auto;margin-top:20px}

/* ---------- Índice de categorías ---------- */
.faq__toc{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(22px,3.2vw,34px);
}
.faq__toc a{
  display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-2);border-radius:99px;padding:15px 17px;
  background:rgba(242,244,239,.03);
  transition:border-color .3s var(--ease),color .3s,background .3s,transform .35s var(--ease);
}
.faq__toc a:hover{
  border-color:rgba(74,222,128,.5);color:var(--green-bright);
  background:rgba(47,164,83,.08);transform:translateY(-2px);
}

/* ---------- Categorías de preguntas ---------- */
.faq-cat{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,60px);
  padding-block:clamp(38px,5.4vw,60px);
  border-top:1px solid var(--line);
}
.faq-cat:first-of-type{border-top:0}
.faq-cat .k{margin-bottom:16px}
.faq-cat .h2{font-size:clamp(1.6rem,2.7vw,2.25rem)}
.faq-cat .lead{margin-top:12px;font-size:.98rem}

/* el <h3> que envuelve cada pregunta solo agrupa: el botón lleva la tipografía */
.faq__h{margin:0}

/* ---------- Cierre dentro de la sección ---------- */
.faq-close{margin-top:clamp(30px,4vw,44px);text-align:center}
.faq-close .btn{width:100%;justify-content:center}

@media (max-width:600px){
  .faq-hero h1{max-width:12ch}
}