/* ==========================================================================
   guia.css — estilos da seção /aprenda/ (Guia de Astrologia)
   Prefixo: .guia-
   Assume que :root (cores) e o starfield (body::before) já vêm do CSS
   global do site, carregado ANTES deste arquivo. Não redefine tokens aqui.
   Tokens usados (ver 10-Style.md):
     --deep --void --cosmos --nebula --gold --gold-light --silver --white --muted
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.guia-breadcrumb {
  font-family: 'Jost', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 2.5rem;
}

.guia-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}

.guia-breadcrumb a:hover {
  color: var(--gold);
}

.guia-breadcrumb span[aria-current] {
  color: var(--silver);
}

/* --------------------------------------------------------------------------
   Divisor com label (ex.: "— TEMAS EM DESTAQUE —")
   -------------------------------------------------------------------------- */
.guia-divider-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 2.5rem;
  /* tipografia igual à .mapa-label real (mapa.css), não ao valor genérico do 10-Style.md */
  font-family: 'Jost', sans-serif;
  font-size: .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
}

.guia-divider-label::before,
.guia-divider-label::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: rgba(201, 168, 76, .35);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.guia-hero {
  max-width: 760px;
  margin: 0 auto 3.5rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.guia-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 1.25rem;
}

.guia-hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-light);
}

.guia-hero .guia-intro {
  font-family: 'Jost', sans-serif;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--silver);
  max-width: 60ch;
  margin: 0 auto 2.25rem;
}

/* --------------------------------------------------------------------------
   Busca (client-side, índice via search-index.json — ver 14 §5.3)
   Reaproveita o padrão real de input do site: fundo creme, texto escuro.
   -------------------------------------------------------------------------- */
.guia-search {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

.guia-search input[type="search"] {
  width: 100%;
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  color: #5a5248;
  background: #f5f0ea;
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 0;
  padding: .85em 3em .85em 1.25em;
  outline: none;
  transition: border-color .2s ease;
}

.guia-search input[type="search"]::placeholder {
  color: #5a5248;
  opacity: .55;
}

.guia-search input[type="search"]:focus {
  border-color: rgba(201, 168, 76, .55);
}

.guia-search button {
  position: absolute;
  right: .25em;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: 2.4em;
  height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a5248;
  cursor: pointer;
}

.guia-search button svg { width: 1.1em; height: 1.1em; }

/* resultado do filtro client-side */
.guia-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .5rem);
  background: var(--cosmos);
  border: 1px solid rgba(201, 168, 76, .25);
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
  z-index: 5;
  display: none;
}

.guia-search-results.is-open { display: block; }

.guia-search-results a {
  display: block;
  padding: .75em 1.1em;
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, .08);
}

.guia-search-results a:hover { color: var(--gold); }

.guia-search-results .guia-search-cat {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: .5em;
}

/* sem JS: a busca não aparece — graceful degradation (14 §5.3) */
.no-js .guia-search { display: none; }

/* --------------------------------------------------------------------------
   Card (reaproveitado em "Temas em destaque" e em "Seções por categoria")
   -------------------------------------------------------------------------- */
.guia-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(26, 26, 62, .6), rgba(17, 17, 40, .8));
  border: 1px solid rgba(201, 168, 76, .15);
  border-radius: 0;
  padding: 2rem 1.75rem;
  text-align: center;
  transition: border-color .2s ease, transform .2s ease;
}

.guia-card:hover {
  border-color: rgba(201, 168, 76, .55);
  transform: translateY(-2px);
}

.guia-card .guia-card-icon {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 1.1rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  /* glifo de texto (☉ ☽ ♀ ASC etc.) — mesma família de .mapa-lista-glifo */
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
}

.guia-card .guia-card-icon.guia-card-icon--texto {
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  letter-spacing: .05em;
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 50%;
}

.guia-card .guia-card-icon.guia-card-icon--numero {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  background: rgba(201, 168, 76, .12);
  border-radius: 50%;
}

.guia-card .guia-card-icon svg { width: 100%; height: 100%; }

.guia-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--white);
  margin: 0 0 .65rem;
}

.guia-card p {
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--silver);
  margin: 0 0 1.4rem;
  flex-grow: 1;
}

.guia-card a.guia-card-link {
  font-family: 'Jost', sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .75);
  text-decoration: none;
  align-self: center;
  transition: color .2s ease;
}

.guia-card a.guia-card-link:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Temas em destaque (faixa curada — 14 §5.2)
   -------------------------------------------------------------------------- */
.guia-destaque { margin: 0 0 4rem; }

.guia-destaque-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   Seções por categoria (14 §5.1.4)
   -------------------------------------------------------------------------- */
.guia-categoria { margin: 0 0 4rem; }

.guia-categoria-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(201, 168, 76, .15);
}

.guia-categoria-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--white);
  margin: 0;
}

.guia-categoria-header a.guia-ver-todos {
  flex-shrink: 0;
  font-family: 'Jost', sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .75);
  text-decoration: none;
  transition: color .2s ease;
}

.guia-categoria-header a.guia-ver-todos:hover { color: var(--gold); }

.guia-categoria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   Faixa de conversão (banner único da home — distinto do .guia-cta de artigo)
   -------------------------------------------------------------------------- */
.guia-conversao {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(26, 26, 62, .6), rgba(17, 17, 40, .8));
  border: 1px solid rgba(201, 168, 76, .25);
  padding: 2.25rem 2.5rem;
  margin: 0 0 4rem;
}

.guia-conversao .guia-conversao-icon {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, .12), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.guia-conversao .guia-conversao-icon svg { width: 2rem; height: 2rem; }

.guia-conversao-texto { flex-grow: 1; }

.guia-conversao h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--gold-light);
  margin: 0 0 .5rem;
  line-height: 1.3;
}

.guia-conversao p {
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--silver);
  margin: 0;
  max-width: 46ch;
}

/* Reaproveita .mapa-btn-primary (já existe em mapa.css) — aqui ele não é
   full-width porque está numa faixa horizontal, não num form vertical. */
.guia-conversao .mapa-btn-primary {
  display: inline-block;
  flex-shrink: 0;
  width: auto;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Utilitário
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.guia-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid rgba(201, 168, 76, .1);
}

.guia-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.guia-trust-item .guia-trust-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.guia-trust-icon svg { width: 1.1rem; height: 1.1rem; }

.guia-trust-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--white);
  margin: 0 0 .35rem;
}

.guia-trust-item p {
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--silver);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Painel de leitura do artigo ("pergaminho") — componente PRÓPRIO do Guia.
   Não é .mapa-modal (aquela é o popup de leitura gratuita do natal — não
   tocar, pra não mudar nada fora do /aprenda/). Os filhos continuam usando
   .mapa-modal-corpo / .mapa-texto-* porque essas regras são só tipografia,
   escopadas pelo nome da classe, não pelo pai visual.
   -------------------------------------------------------------------------- */
.guia-corpo-wrap {
  margin: 0 0 3.5rem;
}

.guia-leitura {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  padding: 3rem 3rem 2.5rem;
  border-radius: 6px;

  background-color: #f3e8d2;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(150, 110, 40, .06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(150, 110, 40, .05) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 95%, rgba(150, 110, 40, .04) 0%, transparent 60%);

  box-shadow:
    0 0 0 1px rgba(180, 150, 80, .25),       /* fio de borda, como antes */
    0 0 60px 14px rgba(232, 200, 122, .12),  /* halo quente — suaviza o corte pro fundo escuro */
    inset 0 0 50px rgba(140, 105, 45, .10),  /* "envelhecido" nas bordas internas */
    0 30px 70px rgba(0, 0, 0, .45);          /* profundidade, como se estivesse pousado */
}

/* estrela dourada "furando" a borda de cima — marca a transição como proposital */
.guia-leitura::before {
  content: '✦';
  position: absolute;
  top: -.55em;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 1.1rem;
  background: var(--deep);
  padding: 0 .6em;
  line-height: 1;
}

@media (max-width: 768px) {
  .guia-leitura {
    padding: 2.4rem 1.6rem 2rem;
    box-shadow:
      0 0 0 1px rgba(180, 150, 80, .25),
      0 0 40px 10px rgba(232, 200, 122, .10),
      inset 0 0 35px rgba(140, 105, 45, .10),
      0 20px 45px rgba(0, 0, 0, .4);
  }
}

/* --------------------------------------------------------------------------
   CTA fixo de artigo (#guia-cta) — reaproveita .mapa-teaser-card inteiro;
   só corrige o link funcionando como botão (o original é <button>).
   -------------------------------------------------------------------------- */
.guia-cta .mapa-btn-teaser {
  display: inline-block;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Q&A — answer-first, sem FAQPage (14 §2.2.3). <details> nativo, sem JS.
   -------------------------------------------------------------------------- */
.guia-qa { margin: 0 0 3.5rem; }

.guia-qa h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--white);
  margin: 0 0 1.5rem;
}

.guia-qa details {
  border-bottom: 1px solid rgba(201, 168, 76, .15);
  padding: 1.1rem 0;
}

.guia-qa summary {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}

.guia-qa summary::-webkit-details-marker { display: none; }

.guia-qa summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 1.2rem;
}

.guia-qa details[open] summary::after { content: '−'; }

.guia-qa p {
  font-family: 'Jost', sans-serif;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--silver);
  margin: .9rem 0 0;
}

/* --------------------------------------------------------------------------
   Continue no Guia (3 §3 — aqui só 1 link, conforme brief do §4.1)
   -------------------------------------------------------------------------- */
.guia-continue {
  margin: 0 0 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 168, 76, .15);
}

.guia-continue .mapa-label { margin-bottom: .75rem; }

.guia-continue ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.guia-continue a {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  color: var(--gold-light);
  text-decoration: none;
}

.guia-continue a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .guia-destaque-grid,
  .guia-categoria-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .guia-trust {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .guia-conversao {
    flex-direction: column;
    text-align: center;
  }

  .guia-conversao p { max-width: none; }
}

@media (max-width: 560px) {
  .guia-destaque-grid,
  .guia-categoria-grid {
    grid-template-columns: 1fr;
  }

  .guia-categoria-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
}