/* ════════════════════════════════════════════════════════════════════
   PREGUNTAS — la página de ayuda y su ayudante
   ════════════════════════════════════════════════════════════════════
   La lista de preguntas vivía al final de la portada, donde casi nadie
   llegaba y donde no se podía buscar. Aquí tiene sitio propio, buscador
   y un ayudante que lleva de la mano a quien no sabe cómo se llama lo
   que necesita.

   El ayudante que vivía aquí dentro se mudó a `bot.css` / `bot.js`: ahora
   es una burbuja que está en todas las páginas y no pierde el hilo al
   cambiar de una a otra. Esta página se queda con lo suyo —el buscador y
   la lista—, que además es de donde el ayudante saca las respuestas: una
   sola copia del texto, y sirve con el JavaScript apagado.
   ════════════════════════════════════════════════════════════════════ */

/* ── Cabecera ─────────────────────────────────────────────────── */
/* A la izquierda, no al medio. El `h1` global de la portada lleva
   `max-width` y márgenes automáticos para quedar centrado bajo la barra; aquí
   eso dejaba el título flotando en mitad de la página con el buscador pegado
   al borde izquierdo, y se leía como un descuido. */
.phero{padding:112px 0 0}
.phero h1{font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;max-width:14ch;margin:0}
.phero .sub{margin:14px 0 0;max-width:54ch}

/* El buscador. Filtra la lista entera, no solo los títulos: quien busca
   «WhatsApp» lo tiene en el cuerpo de una respuesta, no en su pregunta. */
.pbusca{position:relative;margin-top:26px;max-width:520px}
.pbusca input{width:100%;box-sizing:border-box;height:50px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--bone);padding:0 16px 0 44px;
  font:inherit;font-size:15.5px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.pbusca input::placeholder{color:var(--soft)}
.pbusca input:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 4px rgba(14,159,110,.13)}
.pbusca svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--soft);pointer-events:none}
.pcuenta{margin-top:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--soft);min-height:15px}

/* ── La lista ─────────────────────────────────────────────────── */
.pgrupo{margin-top:44px}
.pgrupo > h2{font-size:14px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--deep);margin:0 0 4px}
.pgrupo > p{font-size:14.5px;color:var(--soft);margin:0 0 6px}
/* La lista de la portada iba centrada en 760 px; aquí el rótulo del grupo
   está a la izquierda y dejarla centrada parecía un desencaje. */
.pgrupo .faq-list{margin:14px 0 0;max-width:880px}
/* Al llegar desde el ayudante, la pregunta se resalta un momento: si no, se
   abre una de catorce y no se ve cuál. */
.faq-list details.resaltada{background:var(--mist);border-radius:12px;
  animation:pdestello 2.4s ease-out both}
@keyframes pdestello{0%,55%{background:var(--mist)}100%{background:transparent}}
.faq-list details.oculta{display:none}

.pvacio{padding:34px 4px;color:var(--soft);font-size:15.5px;display:none}
.pvacio.puesto{display:block}
.pvacio b{color:var(--ink)}

/* ── El cierre ────────────────────────────────────────────────── */
.pcierre{margin:56px 0 0;border:1.5px dashed var(--line);border-radius:20px;
  padding:26px 26px 28px;display:flex;align-items:center;gap:20px;
  flex-wrap:wrap}
.pcierre h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 5px}
.pcierre p{margin:0;font-size:14.5px;color:var(--soft);line-height:1.6;
  max-width:52ch}
.pcierre .btn{margin-left:auto;flex:0 0 auto}
@media(max-width:700px){.pcierre .btn{margin-left:0}}

@media(max-width:700px){
  .phero{padding:92px 0 0}
  .bot-hilo{padding:16px;max-height:none}
  .bot-form{margin-left:0}
  .bot-esc{margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  .bot-entra,.faq-list details.resaltada{animation:none}
  .bot-esc i{animation:none;opacity:.5}
  .bot-hilo{scroll-behavior:auto}
}