/* Relevo — preguntas frecuentes (faq.html). Hoja propia de la página; ds.css es la hoja común.
   Fuente: marketing/web/traspaso-web-v4/preguntas-frecuentes/ (02-especificacion.md, 06-desviaciones.md). */

/* ===== Presentación ===== */
/* El main ya reserva el alto de la cabecera fija: aquí solo el aire del diseño */
.faq-presentacion{padding:72px 0 56px}
.faq-presentacion .contenedor{display:flex;flex-direction:column;gap:36px}
.faq-intro{display:flex;flex-direction:column;gap:16px;max-width:760px}
.faq-h1{font-size:56px;line-height:1.04}
.faq-controles{display:flex;flex-direction:column;gap:18px}

.faq-buscador{position:relative;display:block;max-width:760px}
.faq-buscador-ico{position:absolute;left:16px;top:16px;display:inline-flex;color:var(--ink-muted);pointer-events:none}
.faq-buscador-ico .icono{width:22px;height:22px}
#faq-buscar{width:100%;height:56px;padding:0 16px 0 50px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--surface);color:var(--ink);font:500 16px/24px var(--font-sans)}
#faq-buscar::placeholder{color:var(--ink-subtle)}
#faq-buscar:hover{border-color:var(--ink)}
#faq-buscar:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}

.faq-rail{display:flex;flex-wrap:wrap;gap:8px}

/* ===== Preguntas =====
   Un .faq-group por categoría (activaFaq() en app.js alterna .on según el chip o la búsqueda;
   los que no coinciden se ocultan con display:none). Cada uno es la rejilla 280 + preguntas
   del diseño. */
.faq-preguntas{padding:0 0 120px}
.faq-group{display:none;grid-template-columns:280px minmax(0,1fr);gap:40px}
.faq-group.on{display:grid}
.faq-group + .faq-group{margin-top:32px}
.faq-grupo-nombre{display:flex;flex-direction:column;gap:6px;padding-top:26px}
.faq-grupo-lista{border-bottom:1px solid var(--line)}

/* Cada pregunta con su aire y una línea: Manrope 600 (menos peso que un titular) para que la lista se lea de corrido */
.faq-qa{border-top:1px solid var(--line)}
.faq-qa:first-child{border-top:0}
.faq-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;
  padding:18px 0;font-family:var(--font-sans);font-weight:600;letter-spacing:0;font-size:18px;line-height:26px;color:var(--ink)}
.faq-qa summary:hover{color:var(--brand-text)}
.faq-qa[open] summary{color:var(--brand-text)}
.faq-qa summary::-webkit-details-marker{display:none}
.faq-qa summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.faq-qa p{margin:0;padding:0 46px 22px 0;max-width:680px}

/* La pregunta pasó de <span> a <h3> (SEO y accesibilidad), así que hereda la tipografía del
   <summary> en vez de usar la del encabezado por defecto del navegador */
.faq-qa-pregunta{margin:0;font:inherit;font-weight:inherit;color:inherit}

/* Icono más/menos en círculo, sin SVG: dos barras en pseudo-elementos; la vertical desaparece
   al abrir el <details> (selector nativo [open], sin JS propio). */
.faq-qa-ico{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-soft)}
.faq-qa-ico::before,.faq-qa-ico::after{content:"";position:absolute;top:50%;left:50%;background:var(--action);border-radius:2px}
.faq-qa-ico::before{width:14px;height:2.5px;transform:translate(-50%,-50%)}
.faq-qa-ico::after{width:2.5px;height:14px;transform:translate(-50%,-50%)}
.faq-qa[open] .faq-qa-ico::after{opacity:0}

.faq-vacio{display:none;margin:0;padding:32px 0;text-align:center;font-size:16px;line-height:24px;font-weight:500;color:var(--ink-muted)}
.faq-vacio a{color:var(--brand-text);font-weight:700;text-decoration:none}
.faq-vacio a:hover{text-decoration:underline;text-underline-offset:4px}

/* ===== Tablet estrecho (rejillas apiladas por debajo de 1024) ===== */
@media (max-width:1023px){
  .faq-group.on{grid-template-columns:1fr;gap:8px}
  .faq-grupo-nombre{padding-top:0}
}

/* ===== Móvil ===== */
@media (max-width:767px){
  .faq-presentacion{padding:40px 16px 32px}
  .faq-presentacion .contenedor{gap:28px}
  .faq-h1{font-size:34px}
  #faq-buscar{font-size:15px}

  .faq-preguntas{padding:0 16px 64px}
  .faq-group + .faq-group{margin-top:24px}
  .faq-qa summary{font-size:17px;line-height:25px;padding:16px 0}
  .faq-qa p{padding-right:0}
}

/* Objetivo táctil de 44 px (auditoría 28/09) */
.faq-qa summary{min-height:var(--touch)}