/* Bordes del FAQ (fallback + soporte para color-mix) */
:root{
  --faq-border:#cfd9e2;
  --faq-border-strong:#b7c6d3;
}
@supports (color: color-mix(in srgb, black, white)){
  :root{
    --faq-border: color-mix(in srgb, var(--ink) 30%, #dbe6ec);
    --faq-border-strong: color-mix(in srgb, var(--ink) 45%, #dbe6ec);
  }
}

/* ====== LAYOUT FAQ ====== */
#faq{ width:min(900px, 92%); margin:auto; padding: clamp(28px, 5vw, 54px) 0 }
#faq .titulo{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom: 12px;
}

.faq-search{ margin: 10px 0 18px }
#faq #faqSearch{
  width:100%;
  background:#fff;
  border:1px solid var(--faq-border);
  color:var(--ink);
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(2,6,23,.05);
}
#faq #faqSearch::placeholder{ color: color-mix(in srgb, var(--muted) 60%, #94a3b8) }
#faq #faqSearch:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--brand2) 55%, var(--brand) 45%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand2) 18%, transparent);
}

#faq .faq-empty{ display:none; color:var(--muted); margin-top:8px }

/* ====== CATEGORÍAS (acordeón) ====== */
#faq .faq-cat{
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid var(--faq-border);
  border-radius: 18px;
  margin: 10px 0 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
#faq .faq-cat[open]{ border-color: var(--faq-border-strong) }

#faq .faq-cat > summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#faq .faq-cat > summary::-webkit-details-marker{ display:none }
#faq .faq-cat > summary::marker{ content:'' }
#faq .faq-cat > summary::after{
  content:"";
  width:22px; height:22px; border-radius:999px; flex:0 0 22px;
  border:1px solid var(--faq-border-strong);
  background:
    conic-gradient(from 45deg at 50% 50%, var(--brand) 0 25%, transparent 25% 100%),
    radial-gradient(circle at 50% 50%, #fff, #f7fbfa);
}
#faq .faq-cat[open] > summary::after{ transform: rotate(90deg) }

#faq .faq-list{ padding: 10px 12px 16px }

/* ====== ITEMS (preguntas) ====== */
#faq .faq-item{
  background: var(--card);
  border:1px solid var(--faq-border-strong);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 10px 0;
  box-shadow: 0 6px 14px rgba(2,6,23,.06);
  transition: border-color .2s, box-shadow .2s;
}
#faq .faq-item:hover{ box-shadow: 0 12px 24px rgba(2,6,23,.10) }
#faq .faq-item[open]{ border-color: var(--faq-border-strong) }

#faq .faq-item > summary{
  list-style:none; cursor:pointer; font-weight:700; color:var(--ink);
  display:grid; grid-template-columns: 1fr auto; align-items:center;
}
#faq .faq-item > summary::-webkit-details-marker{ display:none }
#faq .faq-item > summary::marker{ content:'' }
#faq .faq-item > summary::after{
  content:"+";
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:999px; font-weight:900; line-height:1;
  border:1px solid var(--faq-border-strong);
  background:#fff; color:var(--ink);
}
#faq .faq-item[open] > summary::after{
  content:"–";
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color:#fff; border-color: color-mix(in srgb, var(--brand2) 55%, var(--brand) 45%);
}

#faq .faq-item p{ color:var(--muted); margin:10px 0 0 }

/* Resaltado del buscador */
/* Resaltado sutil (no pinta toda la línea) */
#faq mark.faq-hit{
  background: none;
  box-shadow: inset 0 -0.6em color-mix(in srgb, var(--brand) 22%, #e9f7f2);
  border-radius: 4px;
  padding: 0 .05em;
}


/* ====== BOTONES MODERNOS (CTAs) ====== */
#faq .faq-cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem }
#faq a.btn, #faq button.btn{
  padding:.7rem 1rem; border-radius:999px; font-weight:700;
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  border:1px solid var(--faq-border-strong);
  box-shadow:0 8px 20px rgba(2,6,23,.08);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
#faq a.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(2,6,23,.12) }

#faq .btn-primary{
  background: linear-gradient(90deg,#06c090,#1196b7);
  color:#fff; border-color:#1093b3;
  box-shadow:0 10px 22px rgba(16,147,179,.25);
}
#faq .btn-outline-primary{
  background:#fff; color:#0a7fa3;
}
/* Compacta layout cuando hay texto en el buscador */
#faq.faq--searching .faq-cat{
  margin: 6px 0;
  border-color: var(--faq-border-strong);
  box-shadow: 0 6px 16px rgba(2,6,23,.08);
}
#faq.faq--searching .faq-cat > summary{ padding: 12px 14px }
#faq.faq--searching .faq-list{ padding: 6px 8px 10px }

#faq .faq-item{ width:100% }                 /* asegura ancho completo */
#faq.faq--searching .faq-item{ margin:6px 0; }

/* El resaltado no “rompe” la línea */
#faq mark.faq-hit{ padding:.02em .18em }

/* Responsive */
@media (max-width:640px){
  #faq .faq-cat > summary{ padding:14px }
  #faq .faq-item{ padding:12px 14px }
}
/* Asegura que el texto (incluyendo <mark>) quede en la columna 1 */
#faq .faq-item > summary > * { grid-column: 1 / 2; }
#faq .faq-item > summary::after { grid-column: 2 / 3; }

/* Aplica lo mismo al summary de la categoría */
#faq .faq-cat > summary { display:grid; grid-template-columns: 1fr auto; align-items:center; }
#faq .faq-cat > summary > * { grid-column: 1 / 2; }
#faq .faq-cat > summary::after { grid-column: 2 / 3; }