/* Páginas de guia e artigos (avaliacoes/guia-pagina.php): por cima do main.css e do palestra.css */

/* ---------- Topo (celular primeiro): foto grande, selo da nota e o texto numa folha roxa que sobe por cima da foto ---------- */
.gtopo { position: relative; background: var(--purple-900); color: #fff; padding-top: 46px; overflow: hidden; }  /* 46px = barra do topo (bege) no celular */
.gtopo__foto { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #3a1846; }
.gtopo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.gtopo__legenda {
  position: absolute; left: 16px; top: 16px; max-width: calc(100% - 32px);
  font-family: var(--font-comic); font-weight: 700; font-size: .85rem; line-height: 1.2; text-transform: uppercase;
  background: var(--yellow); color: var(--purple-900); border: var(--border); border-radius: 10px; padding: .35em .7em;
  transform: rotate(-3deg); transform-origin: left top;
}
.gtopo__selo {
  position: absolute; right: 16px; bottom: 44px; z-index: 2; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 4px; text-decoration: none;
  background: var(--yellow); color: var(--purple-900); border: var(--border); box-shadow: 4px 4px 0 var(--purple-900);
  transform: rotate(8deg);
}
.gtopo__selo strong { font-size: 2.1rem; line-height: .9; font-weight: 900; }
.gtopo__selo span { font-family: var(--font-comic); font-weight: 700; font-size: .68rem; line-height: 1.1; text-transform: uppercase; max-width: 8em; }
.gtopo__texto { position: relative; z-index: 1; margin-top: -28px; background: var(--purple-900); border-radius: 28px 28px 0 0; padding: 26px var(--gutter) 44px; }
.gtopo .trilha-site { padding-right: 120px; }
.gtopo h1 { font-size: clamp(2.3rem, 7.4vw + .5rem, 3.4rem); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; color: var(--yellow); margin: 0 0 .3em; }
.gtopo__sub { font-size: clamp(1.15rem, 1vw + 1rem, 1.6rem); line-height: 1.2; font-weight: 700; margin: 0 0 .9em; }
.guia-resposta { font-size: clamp(1.05rem, .4vw + .98rem, 1.25rem); line-height: 1.5; max-width: 36em; }
.guia-resposta p { margin: 0 0 .8em; }
.gtopo__ctas { display: grid; gap: 12px; margin: 1.3em 0 0; }
.gtopo__zap { background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.35); }
.gtopo__zap:hover { box-shadow: 6px 6px 0 rgba(255,255,255,.45); }
.guia-datas { font-size: .9rem; line-height: 1.4; opacity: .85; margin: 1.3em 0 0; }
.gtopo :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

@media (min-width: 600px) { .gtopo__ctas { grid-template-columns: auto auto; justify-content: start; } }
@media (min-width: 600px) and (max-width: 899px) { .gtopo__foto { aspect-ratio: 16 / 10; } }

@media (min-width: 900px) {
  .gtopo { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); min-height: min(100svh, 940px); padding-top: 0; }
  .gtopo__foto { grid-column: 2; grid-row: 1; aspect-ratio: auto; height: 100%; min-height: 640px; overflow: visible; }
  .gtopo__foto img { position: absolute; inset: 0; }
  .gtopo__legenda { top: 104px; left: 28px; font-size: .95rem; }
  .gtopo__selo { right: auto; left: -70px; bottom: 56px; width: 148px; height: 148px; }
  .gtopo__selo strong { font-size: 2.9rem; }
  .gtopo__selo span { font-size: .78rem; }
  .gtopo__texto { grid-column: 1; grid-row: 1; align-self: center; margin: 0; border-radius: 0; background: none;
    padding: 128px clamp(56px, 4.5vw, 84px) 72px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
  .gtopo .trilha-site { padding-right: 0; }
  .gtopo h1 { font-size: clamp(3rem, 4.3vw, 5.2rem); }
}

/* Movimento: a foto aproxima devagar, a legenda cai, o selo gira e entra, o texto sobe. Só transform (não atrasa a nota do PageSpeed) */
@media (prefers-reduced-motion: no-preference) {
  .gtopo__foto img { animation: gtopo-zoom 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  .gtopo__legenda { animation: gtopo-cai .7s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
  .gtopo__selo { animation: gtopo-selo .8s .55s cubic-bezier(.3, 1.5, .5, 1) both; transition: transform .25s; }
  .gtopo__selo:hover { transform: rotate(-4deg) scale(1.06); }
  .gtopo__texto > * { animation: gtopo-sobe .7s cubic-bezier(.2, .7, .2, 1) both; }
  .gtopo__texto > :nth-child(2) { animation-delay: .06s; }
  .gtopo__texto > :nth-child(3) { animation-delay: .12s; }
  .gtopo__texto > :nth-child(4) { animation-delay: .18s; }
  .gtopo__texto > :nth-child(n+5) { animation-delay: .24s; }
}
@keyframes gtopo-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes gtopo-cai { from { transform: translateY(-40px) rotate(-14deg); } to { transform: rotate(-3deg); } }
@keyframes gtopo-selo { from { transform: scale(.3) rotate(-60deg); } to { transform: rotate(8deg); } }
@keyframes gtopo-sobe { from { transform: translateY(22px); } to { transform: none; } }

/* ---------- Texto ---------- */
.guia-texto { max-width: 42em; }
.guia-texto h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.2rem); line-height: 1.1; text-transform: uppercase; color: var(--purple-900); margin: 1.8em 0 .5em; }
.guia-texto > h2:first-child { margin-top: 0; }
.guia-texto h3 { font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); color: var(--purple-900); margin: 1.4em 0 .4em; }
.guia-texto p, .guia-texto li { line-height: 1.5; }
.guia-texto ul:not([class]), .guia-texto ol:not([class]) { padding-left: 1.15em; margin: 0 0 1.2em; }   /* só listas sem classe: as listas com estilo próprio (outras páginas) não mudam */
.guia-texto ul:not([class]) { list-style: disc; }
.guia-texto ol:not([class]) { list-style: decimal; }
.guia-texto li::marker { color: var(--purple-700); font-weight: 900; }
.guia-texto li { margin-bottom: .45em; }
.guia-texto a { color: var(--purple-700); font-weight: 700; text-underline-offset: 3px; }
.guia-texto .pal-dados { margin: 1.2em 0 1.6em; padding: 0; }

/* Quadro de destaque (resumo, aviso) */
.guia-quadro { background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hard); padding: 18px 22px; margin: 1.4em 0; }
.guia-quadro > :last-child { margin-bottom: 0; }
.guia-quadro h3 { margin-top: 0; }

/* Tabela simples que vira cartões no celular */
.guia-tabela { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; background: #fff; border: var(--border); border-radius: 14px; overflow: hidden; font-size: .95rem; }
.guia-tabela th, .guia-tabela td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 2px solid #E7DEF7; }
.guia-tabela th { background: var(--purple-900); color: var(--yellow); }
.guia-tabela td:first-child { width: 34%; font-weight: 700; }
.guia-tabela tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .guia-tabela thead { display: none; }
  .guia-tabela tr { display: block; border-bottom: 2px solid #E7DEF7; padding: 8px 0; }
  .guia-tabela td { display: block; border: 0; padding: 4px 14px; }
  .guia-tabela td:first-child { width: auto; font-weight: 900; color: var(--purple-900); padding-top: 10px; }
}

/* Lista de artigos e de matérias */
.guia-lista, .guia-texto .guia-lista { list-style: none; margin: 1em 0 1.4em; padding: 0; display: grid; gap: 14px; }
.guia-lista li { margin: 0; }
.guia-lista a { display: block; background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--purple-900); padding: 16px 20px; text-decoration: none; color: var(--ink); font-weight: 400; }
.guia-lista a:hover { background: var(--yellow); }
.guia-lista b { display: block; font-size: 1.15rem; line-height: 1.2; color: var(--purple-900); }
.guia-lista small { display: block; margin-top: .35em; font-size: .95rem; line-height: 1.4; opacity: .85; }
@media (min-width: 900px) { .guia-lista--2 { grid-template-columns: 1fr 1fr; } }

/* Item da lista com foto (artigos) ou miniatura de vídeo (na mídia) */
.guia-lista a.guia-lista__com-foto { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 12px; }
.guia-lista__com-foto img { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; }
.guia-lista__com-foto--video { grid-template-columns: 128px 1fr; }
.guia-lista__com-foto--video img { width: 128px; height: 72px; }
@media (min-width: 700px) { .guia-lista a.guia-lista__com-foto { grid-template-columns: 140px 1fr; gap: 22px; } .guia-lista__com-foto img { width: 140px; height: 175px; }
  .guia-lista a.guia-lista__com-foto--video { grid-template-columns: 200px 1fr; } .guia-lista__com-foto--video img { width: 200px; height: 112px; } }

/* Foto no meio do texto */
.guia-foto { margin: 1.6em 0 2em; }
.guia-foto img { display: block; width: 100%; height: auto; border: var(--border); border-radius: var(--radius); }
.guia-vertodos a { display: inline-block; padding: 8px 0; }
.guia-foto figcaption { margin-top: .6em; font-size: .95rem; color: var(--purple-700); }

/* Entradas ao rolar, sem JavaScript (onde o navegador não sabe fazer, tudo aparece parado) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .guia-texto > *, .pal-eventos li, .guia-lista li, .pal-faq details, .guia-tabela tr {
      animation: guia-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes guia-entra { from { transform: translateY(28px); } to { transform: none; } }   /* sem opacidade: o texto nunca fica apagado (contraste) */