/* ===== 20/10/2026 — cabeçalho padrão de TODAS as páginas (pedido da autora pelo WhatsApp): logo roxa sem moldura + menu em texto simples,
         tudo com a mesma fonte, cor e tamanho: Home · Livro · Garanta seu exemplar · Book Trailer · Projeto · Clube de Cartas · Universo Criativo · Blog.
         A Home tem o mesmo visual no CSS próprio dela (author-home-updates); aqui valem a página do Livro (.site-header) e a do Projeto (.project-header). ===== */
      header .site-header-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        text-decoration: none;
      }

      header .site-header-brand:focus-visible {
        outline: 2px solid rgba(239, 130, 124, .5);
        outline-offset: 3px;
      }

      header .site-header-brand-logo {
        display: block;
        width: clamp(150px, 16vw, 225px);
        height: auto;
        object-fit: contain;
      }

      body .site-header nav,
      body .project-nav {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: clamp(18px, 1.7vw, 25px);
        padding: 0;
        overflow: visible;
        color: #42354d;
        font-size: 16px;
        font-weight: 400;
      }

      body .site-header nav a,
      body .project-nav a {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        border: 0;
        color: #42354d;
        font-size: inherit;
        font-weight: 400;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
      }

      body .site-header nav a::after,
      body .project-nav a::after {
        position: absolute;
        bottom: -7px;
        left: 0;
        display: block;
        width: 0;
        height: 2px;
        background: #ef827c;
        content: "";
        transition: width .25s;
      }

      body .site-header nav a:hover::after,
      body .site-header nav a:focus-visible::after,
      body .project-nav a:hover::after,
      body .project-nav a:focus-visible::after {
        width: 100%;
      }

      body .site-header nav a.site-home-link,
      body .project-nav a.site-home-link {
        gap: 7px;
      }

      header nav .site-home-icon {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
      }

      /* o selo "lançamento 2026" e o link "← Página do livro" saem do cabeçalho (o menu já tem Livro; o cabeçalho fica só com logo + menu) */
      body .site-header .launch-chip,
      body .project-header .back-link {
        display: none !important;
      }

      /* botão vermelho de compra: só no celular/tablet do livro (na tela larga ele é o item "Garanta seu exemplar" do menu) */
      body .site-header .site-presale-cta {
        display: none;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 9px 14px;
        border-radius: 9px;
        color: #fff;
        background: #c91f4d;
        box-shadow: 4px 4px 0 #f6d368;
        font-size: 12px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
      }

      /* notebook pequeno / tablet deitado: letra e espaços um pouco menores para os 8 itens caberem ao lado da logo */
      @media (min-width: 981px) and (max-width: 1180px) {
        body .project-nav {
          gap: 14px;
          font-size: 15px;
        }
      }

      @media (min-width: 981px) and (max-width: 1059px) {
        body .site-header nav,
        body .project-nav {
          gap: 10px;
          font-size: 14.5px;
        }
      }

      /* tablet e celular (até 980 px): o cabeçalho passa a ficar no fluxo da página — logo (e o botão vermelho, no livro) em cima e o menu logo abaixo,
         em texto menor, centralizado e quebrando em linhas */
      @media (max-width: 980px) {
        body main > .site-header.site-header {
          box-sizing: border-box;
          position: relative !important;
          inset: auto !important;
          top: auto !important;
          left: auto !important;
          right: auto !important;
          transform: none !important;
          display: flex !important;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 10px 16px;
          width: 100% !important;
          height: auto !important;
          min-height: 0;
          margin: 0 !important;
          padding: 14px max(20px, env(safe-area-inset-left)) 12px !important;
        }

        body .site-header .site-presale-cta {
          display: inline-flex;
        }

        body .site-header nav a[data-menu="comprar"] {
          display: none !important;
        }

        body .site-header nav,
        body .project-nav {
          order: 3;
          flex: 0 0 100%;
          width: 100%;
          justify-content: center;
          flex-wrap: wrap;
          gap: 6px 16px;
          font-size: 14px;
        }

        body .project-header {
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 10px 16px;
          padding: 14px 20px 12px;
        }

        .site-header + .hero,
        .site-header ~ .hero#inicio {
          margin-top: 0 !important;
          padding-top: 42px !important;
        }
      }

      @media (max-width: 680px) {
        header .site-header-brand-logo {
          width: clamp(125px, 42vw, 170px);
        }
      }

      footer .site-footer-brand-logo {
        display: block;
        width: clamp(230px, 25vw, 360px);
        max-width: 100%;
        height: auto;
        object-fit: contain;
      }

      footer .site-footer-brand,
      footer a.site-footer-brand {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        color: inherit;
        text-decoration: none;
      }

      /* rodapé de TODAS as páginas (pedido de 20/10): a logo é um link para a Home e o menu é o mesmo do cabeçalho (mesmos itens, mesma ordem) */
      footer .site-footer-brand-link {
        display: inline-flex;
        align-items: center;
        color: inherit;
        text-decoration: none;
      }

      footer .site-footer-brand-link:focus-visible,
      footer a.site-footer-brand:focus-visible {
        outline: 2px solid rgba(239, 130, 124, .7);
        outline-offset: 4px;
      }

      /* Home: o menu agora tem 8 itens e a coluna das redes sociais, 6 — as duas listas começam juntas, no topo (a logo continua centralizada na linha) */
      .home-footer > nav,
      .home-footer .footer-social {
        align-self: start;
      }

      /* Projeto: rodapé claro — logo roxa centralizada e o menu em uma faixa logo abaixo dela (Home e Livro mantêm o menu em coluna ao lado da logo) */
      .institutional-footer .footer-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 26px;
        max-width: 1000px;
        margin: 22px auto 34px;
        padding: 0 20px;
        font-size: 16px;
        font-weight: 400;
      }

      .institutional-footer .footer-menu a {
        color: inherit;
        font-size: inherit;
        font-weight: 400;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
      }

      .institutional-footer .footer-menu a:hover,
      .institutional-footer .footer-menu a:focus-visible {
        text-decoration: underline;
        text-decoration-color: #ef827c;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
      }

      @media (max-width: 680px) {
        footer .site-footer-brand-logo {
          width: min(285px, 78vw);
        }

        .institutional-footer .footer-menu {
          gap: 8px 18px;
          margin: 18px auto 26px;
          font-size: 15px;
        }
      }