.page-faqs {
  --brand-1:#7025E0; /* violeta */
  --brand-2:#A172FF; /* lila */
  --text-900:#111827;
  --text-600:#6B7280;
  --ring: rgba(112,37,224,.45);
}

/* ---------- Search wrapper ---------- */
.page-faqs .hero-search{
  width:min(1180px,92vw);
  margin:3rem auto 0;
  position:relative; z-index:3;
}

/* ---------- Glass search box ---------- */
.page-faqs .hero-search__box{
  display:grid;
  grid-template-columns:28px 1fr auto auto;
  align-items:center; gap:.75rem;
  height:72px;
  padding: .25rem 1rem .25rem 2rem;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(16,24,40,.08);
  box-shadow:0 8px 26px rgba(16,24,40,.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.page-faqs .hero-search__box i{ font-size:1.15rem; opacity:.85; }

.page-faqs .hero-search__box input[type="search"]{
  min-width:0; border:0; outline:0; background:transparent;
  font:inherit; color:var(--text-900);
  font-size:clamp(1rem,2.1vw,1.125rem);
  padding:.65rem .25rem;
}
.page-faqs .hero-search__box input::placeholder{ color:var(--text-600); opacity:1; }

/* ---------- Button: outline violeta -> hover relleno violeta ---------- */
/* Increase specificity to beat global .btn / .btn-gradient rules from styles.css */
.page-faqs .hero .hero-search__box .btn.btn-gradient,
.page-faqs .hero-search .hero-search__box .btn.btn-gradient{
  appearance:none;
  cursor:pointer;
  border-radius:999px;
  min-height:48px;
  min-width:180px;
  font-weight:800;
  padding:.75rem 1.25rem;
  background:transparent;            /* override gradient */
  color:var(--brand-1);
  border:2px solid var(--brand-1);
  box-shadow:0 6px 18px rgba(16,24,40,.10);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.page-faqs .hero .hero-search__box .btn.btn-gradient:hover,
.page-faqs .hero-search .hero-search__box .btn.btn-gradient:hover{
  background:var(--brand-1);
  color:#fff;
  transform:translateY(-1px);
}
.page-faqs .hero .hero-search__box .btn.btn-gradient:active,
.page-faqs .hero-search .hero-search__box .btn.btn-gradient:active{ transform:translateY(0); }
.page-faqs .hero .hero-search__box .btn.btn-gradient:focus-visible,
.page-faqs .hero-search .hero-search__box .btn.btn-gradient:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring), 0 6px 18px rgba(16,24,40,.18);
}

/* ---------- Chips row ---------- */
.page-faqs .hero-search__chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem; margin-top:.9rem;
}

/* Chips: HTML uses .chip */
.page-faqs .hero-search__chips .chip{
  appearance:none; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--brand-1) 35%, transparent);
  background:rgba(255,255,255,.96);
  color:var(--brand-1);
  font-weight:800; padding:.55rem 1rem; border-radius:999px;
  box-shadow:0 6px 18px rgba(16,24,40,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  user-select:none; white-space:nowrap;
}
.page-faqs .hero-search__chips .chip:hover{
  background:var(--brand-1); color:#fff; border-color:transparent;
  transform:translateY(-1px);
}
.page-faqs .hero-search__chips .chip:active{ transform:translateY(0); }
/* Estado activo si marcás .is-active o aria-pressed */
.page-faqs .hero-search__chips .chip.is-active,
.page-faqs .hero-search__chips .chip[aria-pressed="true"]{
  background:var(--brand-1); color:#fff; border-color:transparent;
}

/* ---------- Accordion spacing ---------- */
.page-faqs #faq-accordion{ margin-top:1rem; }

/* ---------- Optional: hide floating bot only here ---------- */
.page-faqs .qs-bot{ display:none!important; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1024px){
  .page-faqs .hero-search__box{ height:66px; }
  .page-faqs .hero .hero-search__box .btn.btn-gradient{ min-width:160px; padding:.65rem 1.1rem; }
}
@media (max-width: 768px){
  .page-faqs .hero-search__box{ grid-template-columns:24px 1fr auto; height:60px; }
  .page-faqs .hero-search__box input[type="search"]{ font-size:1rem; }
  .page-faqs .hero .hero-search__box .btn.btn-gradient{ min-width:140px; }
}
@media (max-width: 480px){
  .page-faqs .hero-search__box{
    grid-template-columns:22px 1fr auto; gap:.5rem; height:56px;
    padding:.25rem .25rem .25rem .75rem;
  }
  .page-faqs .hero .hero-search__box .btn.btn-gradient{
    min-width:120px; padding:.55rem .9rem; font-weight:800;
  }
  .page-faqs .hero-search__chips{ gap:.55rem; }
}

/* ---------- A11y helper ---------- */
.page-faqs .visually-hidden{
  position:absolute!important; height:1px;width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; clip-path:inset(50%);
  border:0; padding:0; margin:-1px;
}

/* ===== Control del ancho del INPUT (no rompe el layout) =====
   Ajustá --faq-input-w y el input se centra en desktop.
   En mobile/tablet sigue ocupando todo el ancho disponible.
*/
.page-faqs{ --faq-input-w: 640px; } /* <- cambiá 640px por 560px, 720px, etc. */

@media (min-width: 1024px){
  .page-faqs .hero-search__box input[type="search"]{
    width: min(100%, var(--faq-input-w));
    justify-self: center;      /* centra el campo dentro del track 1fr */
  }
}


/* ===== PATCH: ancho del INPUT + alineación icono/hint (SCOPED) ===== */
.page-faqs{ --faq-input-w: 560px; } /* <- ajustá acá el ancho deseado del input */

@media (min-width: 1024px){
  .page-faqs .hero-search__box{
    /* icono | input (ancho controlado) | botón */
    grid-template-columns: 32px minmax(280px, var(--faq-input-w)) auto !important;
    justify-content: center;
    gap: .5rem;
  }
}

/* Alinear icono y hint (placeholder) */
.page-faqs .hero-search__box i,
.page-faqs .hero-search__box .search-icon{
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
}

.page-faqs .hero-search__box input[type="search"]{
  padding-left: .25rem !important; /* quita padding extra a la izquierda */
  text-indent: 0 !important;       /* evita indent heredado */
  line-height: 1.2;
}


/* ===== FINAL FIX: input adaptable (crece/encoge) con tope de ancho ===== */
.page-faqs{ --faq-input-max: 560px; } /* cambiá este valor si querés otro tope */

@media (min-width: 1024px){
  /* Devolvemos el track del input a 1fr (fluido) */
  .page-faqs .hero-search__box{
    grid-template-columns: 32px minmax(0, 1fr) auto auto !important;
    gap: .6rem;
  }
  /* El input ocupa todo el track, pero no supera el máximo */
  .page-faqs .hero-search__box input[type="search"]{
    width: 100% !important;
    max-width: var(--faq-input-max);
    justify-self: stretch !important; /* nada de centrar: que se estire */
  }
}


/* === FAQ Search: Clear "X" button (scoped) === */
.page-faqs input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; height:0; width:0; margin:0; padding:0;
}
.page-faqs .hero-search__clear[hidden]{ display:none !important; }
.page-faqs .hero-search__clear{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.12);
  background:transparent;
  color:var(--brand-1);
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.page-faqs .hero-search__clear:hover{ background: color-mix(in srgb, var(--brand-1) 8%, transparent); }
.page-faqs .hero-search__clear:active{ transform: scale(.98); }
.page-faqs .hero-search__clear:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring), 0 6px 18px rgba(16,24,40,.18);
}


/* === Mobile UX: hide the 'Buscar' button ONLY when a query is active (clear X visible) === */
@media (max-width: 768px){
  .page-faqs .hero-search.has-query #site-search-btn{
    display: none !important;
  }
}

/* === Mobile spacing: reduce gap between hero and FAQ list === */
@media (max-width: 768px){
  .page-faqs .hero{ padding-bottom:.5rem; margin-bottom:0; }
  .page-faqs #faq-accordion{ margin-top:.5rem; }
}

.page-faqs .hero + .container{
  padding: 1rem 1.5rem;
  margin-top: -130px;              /* mismo “sube” que faq-overlap en desktop */
}
@media (min-width: 768px){
  .page-faqs .hero + .container{ margin-top: -84px; }
}
@media (max-width: 767.98px){
  .page-faqs .hero + .container{ margin-top: -42px; }
}