/* Página de preguntas frecuentes (todo va dentro de .vg-faq para no
   chocar con los estilos del tema de la tienda). */
.vg-faq {
  --vg-bg: #f7f6f3; --vg-card: #ffffff; --vg-text: #1d1d1b; --vg-muted: #5c5a55;
  --vg-line: #e2dfd8; --vg-accent: #1f5f8b; --vg-accent-soft: #e6eff6;
  --vg-mark: #fff1a8; --vg-mark-text: #4a3b00; --vg-radius: 12px;
  background: var(--vg-bg); color: var(--vg-text);
  border-radius: var(--vg-radius); padding: 24px 20px 8px;
  max-width: 860px; margin: 0 auto 32px;
  font-size: 17px; line-height: 1.6; box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  .vg-faq {
    --vg-bg: #161614; --vg-card: #201f1d; --vg-text: #ecebe7; --vg-muted: #a8a59e;
    --vg-line: #34322e; --vg-accent: #7fb6dc; --vg-accent-soft: #1c2b36;
    --vg-mark: #4a3f10; --vg-mark-text: #fff1a8;
  }
}
.vg-faq *, .vg-faq *::before, .vg-faq *::after { box-sizing: border-box; }
.vg-faq a { color: var(--vg-accent); }
.vg-faq :focus-visible { outline: 3px solid var(--vg-accent); outline-offset: 2px; border-radius: 4px; }

.vg-faq .vg-entrada { color: var(--vg-muted); margin: 0 0 20px; }
.vg-faq .vg-aviso-revision {
  background: var(--vg-mark); color: var(--vg-mark-text);
  padding: 8px 12px; border-radius: 8px; font-size: 15px; margin: 0 0 16px;
}

.vg-faq .vg-buscador label { display: block; font-weight: 600; margin-bottom: 6px; }
.vg-faq .vg-buscador input {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: var(--vg-radius);
  border: 1px solid var(--vg-line); background: var(--vg-card); color: var(--vg-text);
}
.vg-faq .vg-resultado { font-size: 14px; color: var(--vg-muted); min-height: 1.6em; margin: 6px 0 0; }

.vg-faq .vg-temas { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vg-faq .vg-temas a {
  display: inline-block; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: var(--vg-accent-soft); color: var(--vg-accent); font-size: 15px;
}

.vg-faq .vg-video {
  display: flex; gap: 16px; align-items: center; margin: 28px 0 8px;
  background: var(--vg-card); border: 1px solid var(--vg-line); border-radius: var(--vg-radius); padding: 16px;
}
.vg-faq .vg-marco {
  flex: 0 0 160px; aspect-ratio: 16/9; border-radius: 8px; background: var(--vg-accent-soft);
  display: grid; place-items: center; color: var(--vg-accent);
}
.vg-faq .vg-video h2 { font-size: 18px; margin: 0 0 4px; color: var(--vg-text); }
.vg-faq .vg-video p { margin: 0; color: var(--vg-muted); font-size: 15px; }

.vg-faq .vg-tema { margin: 36px 0 0; scroll-margin-top: 16px; }
.vg-faq .vg-tema h2 { font-size: 22px; margin: 0 0 12px; color: var(--vg-text); }
.vg-faq .vg-acciones { display: flex; justify-content: flex-end; margin-top: 20px; }
.vg-faq .vg-acciones button {
  font: inherit; font-size: 15px; background: none; border: 0; color: var(--vg-accent);
  cursor: pointer; text-decoration: underline; padding: 4px;
}

.vg-faq details {
  background: var(--vg-card); border: 1px solid var(--vg-line); border-radius: var(--vg-radius);
  margin-bottom: 8px; scroll-margin-top: 16px;
}
.vg-faq summary {
  list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; font-weight: 600;
  position: relative; border-radius: var(--vg-radius); color: var(--vg-text);
}
.vg-faq summary::-webkit-details-marker { display: none; }
.vg-faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--vg-muted); border-bottom: 2px solid var(--vg-muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.vg-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vg-faq summary:hover { color: var(--vg-accent); }
.vg-faq .vg-respuesta { padding: 0 16px 16px; }
.vg-faq .vg-respuesta p { margin: 0; }

.vg-faq mark.pendiente {
  background: var(--vg-mark); color: var(--vg-mark-text); padding: 0 4px; border-radius: 4px;
}
.vg-faq mark.pendiente::before { content: "Pendiente: "; font-weight: 600; }
.vg-faq mark.busqueda { background: var(--vg-accent-soft); color: inherit; }

.vg-faq .vg-contacto {
  margin: 40px 0 16px; padding: 24px; border-radius: var(--vg-radius);
  background: var(--vg-accent-soft); text-align: center;
}
.vg-faq .vg-contacto h2 { margin: 0 0 8px; font-size: 22px; color: var(--vg-text); }
.vg-faq .vg-contacto p { margin: 0; }
.vg-faq .vg-vacio { display: none; margin-top: 32px; color: var(--vg-muted); }

@media (max-width: 520px) {
  .vg-faq { font-size: 16px; padding: 16px 12px 4px; }
  .vg-faq .vg-video { flex-direction: column; align-items: stretch; }
  .vg-faq .vg-marco { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-faq * { transition: none !important; }
  html { scroll-behavior: auto !important; }
}
@media print {
  .vg-faq .vg-buscador, .vg-faq .vg-temas, .vg-faq .vg-acciones, .vg-faq .vg-video { display: none; }
  .vg-faq details { break-inside: avoid; }
}