/* ============================================================
   PAGINA DE PERGUNTAS FREQUENTES — /perguntas-frequentes/
   Template faq-pagina.php · enfileirado em inc/faq-pagina.php

   Nao reaproveita as classes de assets/css/faq.css: aquelas sao
   da secao #faq da pagina de hotel e reservam 340px a direita
   para o box #reserva, que aqui nao existe.
   Breakpoints alinhados aos do tema: 1220 / 970 / 680.
   ============================================================ */

/* A folga do #breadcrumb sob o header fixo saiu daqui: virou uma regra so,
   em base.css, valida em qualquer pagina que abra pela trilha. Os 86px
   daqui eram da epoca do header de 70px — hoje ele tem 56. */

.faqp { padding: 34px 0px 80px 0px; background-color: #fff; }

/* ---------- cabecalho: titulo, texto e busca ---------- */
.faqp .faqp-head { padding-bottom: 30px; margin-bottom: 36px; border-bottom: 1px solid #e0e0e0; }
.faqp .faqp-head h1 {
  display: block; margin: 0px; font-weight: 900; font-size: 34px; line-height: 1.15;
  text-transform: uppercase; color: var(--black);
}
.faqp .faqp-head > p { display: block; max-width: 720px; margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--gray); }

.faqp .faqp-busca { display: block; max-width: 560px; margin-top: 26px; }
.faqp .faqp-busca label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--blue); }
.faqp .faqp-busca-campo { position: relative; display: block; }
.faqp .faqp-busca-campo > i {
  position: absolute; top: 50%; left: 16px; transform: translateY(-50%);
  font-size: 15px; color: #9aa5ad; pointer-events: none;
}
.faqp .faqp-busca input[type="search"] {
  display: block; width: 100%; height: 52px; padding: 0px 46px 0px 42px; margin: 0px;
  border: 1px solid #ccd4da; border-radius: 8px; background-color: #fff;
  font-family: inherit; font-size: 15px; color: var(--black); box-shadow: none; -webkit-appearance: none; appearance: none;
}
.faqp .faqp-busca input[type="search"]::-webkit-search-cancel-button { display: none; }
.faqp .faqp-busca input[type="search"]:focus { outline: none; border-color: var(--blue); box-shadow: 0px 0px 0px 3px rgba(0,109,177,.14); }
.faqp .faqp-busca-limpar {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: none;
  width: 34px; height: 34px; padding: 0px; border: none; border-radius: 50%; background: none;
  color: #7b868e; font-size: 15px; cursor: pointer;
}
.faqp .faqp-busca-limpar:hover { background-color: #f0f2f4; color: var(--black); }
.faqp .faqp-busca.tem-texto .faqp-busca-limpar { display: block; }
.faqp .faqp-busca-status { display: none; margin-top: 10px; font-size: 14px; color: var(--gray); }
.faqp .faqp-busca.tem-texto .faqp-busca-status { display: block; }

/* ---------- duas colunas: indice + conteudo ---------- */
.faqp .faqp-corpo { display: flex; align-items: flex-start; gap: 46px; }

.faqp .faqp-indice { flex: 0 0 268px; position: sticky; top: 110px; }
.faqp .faqp-indice strong { display: block; margin-bottom: 14px; font-weight: 900; font-size: 13px; text-transform: uppercase; color: var(--gray); }
.faqp .faqp-indice ul { display: block; border-left: 2px solid #e6eaee; }
.faqp .faqp-indice li { display: block; }
.faqp .faqp-indice a {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 16px; margin-left: -2px;
  border-left: 2px solid transparent; font-weight: 600; font-size: 14px; line-height: 1.35; color: #3a4550;
}
.faqp .faqp-indice a:hover { border-left-color: var(--blue); color: var(--blue); }
.faqp .faqp-indice a i { flex: 0 0 auto; width: 16px; font-size: 14px; color: var(--blue); text-align: center; }
.faqp .faqp-indice a span { flex: 1 1 auto; }
.faqp .faqp-indice a b {
  flex: 0 0 auto; min-width: 24px; height: 20px; padding: 0px 6px; border-radius: 100px;
  background-color: #eef2f5; color: #6b7680; font-weight: 700; font-size: 12px; line-height: 20px; text-align: center;
}

.faqp .faqp-conteudo { flex: 1 1 auto; min-width: 0px; }

/* ---------- categorias ---------- */
.faqp .faqp-cat { display: block; scroll-margin-top: 110px; }
.faqp .faqp-cat + .faqp-cat { margin-top: 44px; }
.faqp .faqp-cat h2 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
  font-weight: 900; font-size: 22px; color: var(--black);
}
.faqp .faqp-cat h2 i { font-size: 18px; color: var(--blue); }

/* ---------- acordeao (details/summary nativos, sem JS) ---------- */
.faqp .faqp-lista { display: block; border-top: 1px solid #e2e6ea; }
.faqp .faqp-item { display: block; border-bottom: 1px solid #e2e6ea; }
.faqp .faqp-item summary {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 8px 20px 0px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--blue);
  transition: color .2s ease;
}
/* remove o triangulo padrao do <details> nos varios engines */
.faqp .faqp-item summary::-webkit-details-marker { display: none; }
.faqp .faqp-item summary::marker { content: ''; }
.faqp .faqp-item summary:hover { color: var(--darkblue); }
.faqp .faqp-item summary span { flex: 1 1 auto; }
.faqp .faqp-item summary i { flex: 0 0 auto; font-size: 20px; color: var(--blue); transition: transform .3s ease; }
.faqp .faqp-item[open] summary i { transform: rotate(180deg); }

.faqp .faqp-a { padding: 0px 40px 24px 0px; animation: qsFaqpIn .25s ease; }
.faqp .faqp-a p { display: block; font-size: 15px; line-height: 1.7; color: #333; }
.faqp .faqp-a p + p { margin-top: 12px; }
.faqp .faqp-a a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.faqp .faqp-a strong { font-weight: 700; color: var(--black); }

@keyframes qsFaqpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* busca sem resultado */
.faqp .faqp-vazio { display: block; padding: 30px 0px; font-size: 15px; line-height: 1.6; color: var(--gray); }
/* o display: block das regras acima vence o [hidden] da folha do navegador —
   sem estas duas linhas o aviso de "nada encontrado" fica sempre na tela */
.faqp .faqp-vazio[hidden], .faqp .faqp-item[hidden], .faqp .faqp-cat[hidden] { display: none; }

/* ---------- atalho para o FAQ de cada hotel ---------- */
.faqp .faqp-hoteis { display: block; margin-top: 54px; padding-top: 34px; border-top: 1px solid #e0e0e0; }
.faqp .faqp-hoteis h2 { display: block; font-weight: 900; font-size: 22px; color: var(--black); }
.faqp .faqp-hoteis > p { display: block; max-width: 640px; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--gray); }
.faqp .faqp-hoteis ul { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.faqp .faqp-hoteis li {
  flex: 1 1 260px; display: block; padding: 20px 22px; border: 1px solid #dfe4e8; border-radius: 10px;
  background-color: #fff; transition: box-shadow .2s ease, border-color .2s ease;
}
.faqp .faqp-hoteis li:hover { border-color: #c7d2db; box-shadow: 0px 4px 14px rgba(0,0,0,.06); }
.faqp .faqp-hoteis li strong { display: block; font-weight: 900; font-size: 16px; line-height: 1.3; color: var(--black); }
.faqp .faqp-hoteis li span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--gray); }
.faqp .faqp-hoteis li a {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-weight: 700; font-size: 14px; color: var(--blue);
}
.faqp .faqp-hoteis li a i { font-size: 12px; }
.faqp .faqp-hoteis li a:hover { color: var(--darkblue); text-decoration: underline; }

/* ---------- contato da central ---------- */
.faqp .faqp-ajuda { display: block; margin-top: 40px; padding: 28px 30px; border-radius: 10px; background-color: #eef4f9; border: 1px solid #d5e3ef; }
.faqp .faqp-ajuda h2 { display: block; font-weight: 900; font-size: 20px; color: var(--blue); }
.faqp .faqp-ajuda > p { display: block; max-width: 620px; margin-top: 8px; font-size: 15px; line-height: 1.6; color: #3a4550; }
.faqp .faqp-ajuda ul { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 20px; }
.faqp .faqp-ajuda li { display: flex; align-items: center; gap: 12px; }
.faqp .faqp-ajuda li i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background-color: #fff; color: var(--blue); font-size: 15px; line-height: 38px; text-align: center; }
.faqp .faqp-ajuda li span { display: block; font-size: 12px; text-transform: uppercase; color: var(--gray); }
.faqp .faqp-ajuda li a { display: block; font-weight: 700; font-size: 15px; color: var(--blue); }
.faqp .faqp-ajuda li a:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVO — 1220 / 970 / 680
   ============================================================ */

@media (max-width: 1220px) {
  .faqp .faqp-corpo { gap: 34px; }
  .faqp .faqp-indice { flex-basis: 230px; }
}

/* o indice deixa de ser coluna e vira uma fila de atalhos */
@media (max-width: 970px) {
  .faqp { padding: 24px 0px 60px 0px; }
  .faqp .faqp-head h1 { font-size: 28px; }
  .faqp .faqp-head { padding-bottom: 24px; margin-bottom: 26px; }
  .faqp .faqp-corpo { display: block; }
  .faqp .faqp-indice { position: static; margin-bottom: 28px; }
  .faqp .faqp-indice ul { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 6px; border-left: none; -webkit-overflow-scrolling: touch; }
  .faqp .faqp-indice li { flex: 0 0 auto; }
  .faqp .faqp-indice a {
    margin-left: 0px; padding: 10px 16px; border: 1px solid #dfe4e8; border-radius: 100px;
    white-space: nowrap; background-color: #fff;
  }
  .faqp .faqp-indice a:hover { border-color: var(--blue); }
  .faqp .faqp-indice a b { display: none; }
  .faqp .faqp-cat, .faqp .faqp-item { scroll-margin-top: 90px; }
}

@media (max-width: 680px) {
  .faqp { padding: 18px 0px 48px 0px; }
  .faqp .faqp-head h1 { font-size: 24px; }
  .faqp .faqp-head > p { font-size: 15px; }
  .faqp .faqp-busca input[type="search"] { height: 48px; font-size: 14px; }
  .faqp .faqp-cat h2 { font-size: 19px; }
  .faqp .faqp-item summary { gap: 12px; padding: 17px 4px 17px 0px; font-size: 15px; }
  .faqp .faqp-item summary i { font-size: 18px; }
  .faqp .faqp-a { padding: 0px 8px 20px 0px; }
  .faqp .faqp-a p { font-size: 14px; }
  .faqp .faqp-hoteis { margin-top: 40px; }
  .faqp .faqp-hoteis h2, .faqp .faqp-ajuda h2 { font-size: 18px; }
  .faqp .faqp-hoteis ul { display: block; }
  .faqp .faqp-hoteis li + li { margin-top: 14px; }
  .faqp .faqp-ajuda { padding: 22px 20px; }
  .faqp .faqp-ajuda ul { display: block; }
  .faqp .faqp-ajuda li + li { margin-top: 14px; }
}