/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 20px 0;
}

/* A linha do cabeçalho tem a altura do slogan (duas linhas de 11.33px): o logo fica centralizado nela e
   na mesma posição em todas as páginas, seja qual for o elemento da direita (slogan ou selo do parceiro) */
.site-header__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 28px;
}

.site-header__logo img {
  width: 162.84px;
  height: 24px;
}

/* No desktop a navbar fica centralizada no cabeçalho; no mobile ela vai para o dock */
.site-header .nav-pill {
  position: absolute;
  top: 24px;
  left: 50%;
  display: none;
  translate: -50% 0;
}

@media (min-width: 1024px) {
  .site-header {
    padding: 31px 32px 0;
  }

  .site-header .nav-pill {
    display: flex;
  }
}

/* ==========================================================================
   Navbar em pílula
   ========================================================================== */

.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 21px;
}

/* Fundo branco numa camada própria: a pílula verde passa entre o fundo e os textos */
.nav-pill__surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #fff;
  box-shadow: var(--shadow-2xs);
}

/* Dock mobile: ocupa a largura toda distribuindo os itens */
.nav-pill--full {
  width: 100%;
  justify-content: space-between;
  gap: 0;
}

/* Pílula do item ativo: um único elemento que viaja entre os itens (animado por js/nav-pill.js) */
.nav-pill__indicator {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
  background-color: var(--color-menta-100);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

/* Carregando a próxima página (js/nav-pill.js): um brilho atravessa a pílula, em loop, para a tela não ficar
   parada enquanto a rede responde. Só transform, que o navegador anima sem refazer o layout */
.nav-pill[data-loading] .nav-pill__indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, transparent 15%, rgb(255 255 255 / 0.75) 50%, transparent 85%);
  animation: nav-pill-loading 1100ms ease-in-out infinite;
}

@keyframes nav-pill-loading {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill[data-loading] .nav-pill__indicator::after {
    animation: none;
    opacity: 0.4;
  }
}

.nav-pill__item {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 50px;
  white-space: nowrap;
  color: var(--color-neutro-600);
  transition: var(--transition-colors);
}

.nav-pill__item[aria-current="page"] {
  color: var(--color-verde-atlantico-950);
}

/* Área clicável: além da pílula do item, a faixa do menu acima e abaixo dele e metade do espaço até cada
   vizinho (nas pontas, até a borda do menu), medidos por js/nav-pill.js (--hit-*); sem JS, só o padding
   e metade do espaço de 8px. Assim nenhum ponto do menu fica sem link (e sem a mãozinha do cursor), e cada
   ponto leva ao item mais próximo */
a.nav-pill__item::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hit-top, 7px)) calc(-1 * var(--hit-right, 4px)) calc(-1 * var(--hit-bottom, 7px))
    calc(-1 * var(--hit-left, 4px));
}

/* Hover: o item inteiro, no formato de pílula, ganha fundo (o link ocupa a pílula toda, que é clicável). O
   item ativo não muda: já tem a pílula verde por baixo */
@media (hover: hover) {
  a.nav-pill__item:hover {
    color: var(--color-verde-atlantico-950);
  }

  a.nav-pill__item:not([aria-current="page"]):hover {
    background-color: var(--color-neutro-100);
  }
}

/* Sem JS (ou antes de ele assumir) o fundo fica no próprio item ativo */
.nav-pill:not([data-enhanced]) [aria-current="page"] {
  background-color: var(--color-menta-100);
}

.nav-pill__label {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 20px;
}

/* Item ainda sem página: mesma aparência, sem link */
.nav-pill__item[aria-disabled="true"] {
  cursor: default;
}

.nav-pill__locale {
  gap: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: calc(1 / 0.75);
}

/* Ícones exportados do Figma aplicados como máscara para herdar a cor do texto.
   Embutidos como data URI: máscara exige CORS, que não existe ao abrir o site via file:// */
.nav-pill__icon {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.nav-pill__icon--house {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.999V8.66568C10 8.48887 9.92976 8.3193 9.80474 8.19428C9.67971 8.06926 9.51014 7.99902 9.33333 7.99902H6.66667C6.48986 7.99902 6.32029 8.06926 6.19526 8.19428C6.07024 8.3193 6 8.48887 6 8.66568V13.999M2 6.66568C1.99995 6.47173 2.04222 6.2801 2.12386 6.10416C2.20549 5.92822 2.32453 5.77222 2.47267 5.64702L7.13933 1.64702C7.37999 1.44362 7.6849 1.33203 8 1.33203C8.3151 1.33203 8.62001 1.44362 8.86067 1.64702L13.5273 5.64702C13.6755 5.77222 13.7945 5.92822 13.8761 6.10416C13.9578 6.2801 14 6.47173 14 6.66568V12.6657C14 13.0193 13.8595 13.3584 13.6095 13.6085C13.3594 13.8585 13.0203 13.999 12.6667 13.999H3.33333C2.97971 13.999 2.64057 13.8585 2.39052 13.6085C2.14048 13.3584 2 13.0193 2 12.6657V6.66568Z'/%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
}

.nav-pill__icon--globe {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8337 6.99935C12.8337 10.221 10.222 12.8327 7.00033 12.8327M12.8337 6.99935C12.8337 3.77769 10.222 1.16602 7.00033 1.16602M12.8337 6.99935H1.16699M7.00033 12.8327C3.77866 12.8327 1.16699 10.221 1.16699 6.99935M7.00033 12.8327C5.50246 11.2599 4.66699 9.17125 4.66699 6.99935C4.66699 4.82745 5.50246 2.73877 7.00033 1.16602M7.00033 12.8327C8.49819 11.2599 9.33366 9.17125 9.33366 6.99935C9.33366 4.82745 8.49819 2.73877 7.00033 1.16602M1.16699 6.99935C1.16699 3.77769 3.77866 1.16602 7.00033 1.16602'/%3E%3C/svg%3E");
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Dock mobile: navegação fixa no rodapé (e conteúdo extra opcional acima dela)
   ========================================================================== */

.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom));
}

/* A mesma sombra em todas as páginas (e no CTA do app que fica acima da navegação no Score e no Check-up,
   .score__dock-cta, em css/pages.css) */
.dock__panel {
  width: 100%;
  border-radius: 21px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@media (min-width: 480px) {
  .dock__panel {
    max-width: 362px;
  }
}

@media (min-width: 1024px) {
  .dock {
    display: none;
  }
}

/* ==========================================================================
   Card da home
   Hover como em travalyst.org: overlay de 30% → 60% e cantos +5px, em 0.3s
   ========================================================================== */

.feature-card {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* 264px, menos em telas baixas: os dois cards empilhados cabem na tela junto com cabeçalho, margens e
     navegação fixa (164px) */
  min-height: clamp(230px, (100dvh - 164px) / 2, 264px);
  overflow: hidden;
  padding: 16px;
  border-radius: 10px;
  transition: border-radius 300ms ease;
}

/* Foco só de teclado: no toque o link também ganha foco, e cantos e overlay animariam justo quando a
   transição para a página começa */
.feature-card:has(:focus-visible) {
  border-radius: 15px;
}

@media (hover: hover) {
  .feature-card:hover {
    border-radius: 15px;
  }
}

/* Fundo do card: céu, recorte da pessoa e overlay. Ao abrir o card ele dá lugar à camada que cresce até
   cobrir a tela (js/card-open.js) */
.feature-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

/* Céu ao fundo: cobre o card inteiro e pode ser cortado à vontade */
.feature-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A figura nunca é cortada: ancorada na base, com 92% da altura do card, limitada a 100% da largura
   (cqw). A regra é a mesma para todas as figuras — como os recortes têm a mesma altura no Figma,
   homem e médico escalam juntos; o médico, mais largo, fica com no máximo ~54% da largura.
   A proporção visível de cada recorte vem de --figure-aspect; o excesso embaixo fica oculto. */
.feature-card__figure {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  aspect-ratio: var(--figure-aspect);
  height: min(92%, 100cqw);
}

.feature-card__figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
}

/* O médico fica espelhado (como na página de Check-up) */
.feature-card--checkup .feature-card__figure img {
  transform: scaleX(-1);
}

.feature-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-overlay);
  opacity: 0.3;
  transition: opacity 300ms ease;
}

.feature-card:has(:focus-visible) .feature-card__overlay {
  opacity: 0.6;
}

@media (hover: hover) {
  .feature-card:hover .feature-card__overlay {
    opacity: 0.6;
  }
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.feature-card__title {
  width: fit-content;
  max-width: 190px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

/* CTA mobile e desktop têm texto diferente no Figma (o destino é o mesmo: a página do card). No tablet em
   pé (wide) vale o texto do mobile com o tamanho do botão desktop */
.feature-card__cta {
  align-items: center;
  background-color: var(--color-verde-atlantico-950);
  font-family: var(--font-display);
  transition: var(--transition-colors);
}

a.feature-card__cta::after {
  /* Link "esticado": cobre o card inteiro, tornando-o todo clicável */
  content: "";
  position: absolute;
  inset: 0;
}

span.feature-card__cta {
  cursor: default;
}

@media (hover: hover) {
  a.feature-card__cta:hover {
    background-color: #065a52;
  }
}

.feature-card__cta--mobile {
  display: inline-flex;
  gap: 5px;
  padding: 8px 14px 8px 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: normal;
  color: #bae7c9;
}

.feature-card__cta--desktop {
  display: none;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 56px;
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-menta-100);
}

.feature-card__arrow--sm {
  width: 12.444px;
  height: 16px;
}

.feature-card__arrow {
  width: 14px;
  height: 18px;
}

.feature-card__cta--mobile .feature-card__arrow {
  display: none;
}

@media (min-width: 768px) {
  .feature-card {
    height: 360px;
  }
}

@media (min-width: 1024px) {
  .feature-card__cta--mobile {
    display: none;
  }

  .feature-card__cta--desktop {
    display: inline-flex;
  }
}

@media (min-width: 1024px), (min-width: 600px) and (min-height: 501px) {
  /* 400px, menos em telas abaixo de 640px de altura, para a home caber nelas (css/pages.css) */
  .feature-card {
    height: 100%;
    min-height: min(400px, 100dvh - 240px);
    padding: 24px;
    border-radius: 12px;
  }

  .feature-card:has(:focus-visible) {
    border-radius: 17px;
  }

  .feature-card__body {
    gap: 20px;
  }

  .feature-card__title {
    max-width: 290px;
    font-size: min(40px, calc((50vw - 66px) / 7));
    line-height: 1.1;
  }

  .feature-card__cta--mobile {
    gap: 8px;
    padding: 13px 20px;
    border-radius: 56px;
    font-size: 17px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-menta-100);
  }

  .feature-card__cta--mobile .feature-card__arrow--sm {
    display: none;
  }

  .feature-card__cta--mobile .feature-card__arrow {
    display: block;
  }
}

@media (min-width: 1024px) and (hover: hover), (min-width: 600px) and (min-height: 501px) and (hover: hover) {
  .feature-card:hover {
    border-radius: 17px;
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 500px) {
  /* Cards lado a lado: cabem na altura com cabeçalho, margem e navegação fixa (134px, css/pages.css) */
  .feature-card {
    height: 100%;
    min-height: clamp(200px, 100dvh - 134px, 264px);
    padding: 12px;
  }
}

/* ==========================================================================
   Selo de vidro do card: mobile 96×100, desktop 122.88×128 (escala 1.28)
   ========================================================================== */

.partner-badge {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  width: 96px;
  height: 100px;
  padding: 8px 11px;
  border-width: 0.3px;
  border-radius: 14.29px;
  -webkit-backdrop-filter: blur(9.5px);
  backdrop-filter: blur(9.5px);
}

.partner-badge--score {
  border-color: rgb(218 255 215 / 0.3);
  background-color: rgb(186 231 201 / 0.5);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.partner-badge--checkup {
  border-color: rgb(197 218 246 / 0.3);
  background-color: rgb(197 218 246 / 0.5);
}

.partner-badge__top {
  display: flex;
  flex-direction: column;
  gap: 3.6px;
}

.partner-badge__icon {
  width: 18.75px;
  height: 18.75px;
}

.partner-badge__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.42px;
  line-height: 1.32;
  text-transform: uppercase;
  color: var(--color-neutro-950);
}

.partner-badge__bottom {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.partner-badge--checkup .partner-badge__bottom {
  gap: 6px;
}

.partner-badge__partner {
  font-size: 8.33px;
  line-height: 1.21;
  letter-spacing: var(--tracking-inter);
  color: var(--color-neutro-900);
}

.partner-badge__logo--mude {
  width: 34.76px;
  height: 14.29px;
}

.partner-badge__logo--mar {
  width: 49.02px;
  height: 13.33px;
}

@media (min-width: 1024px), (min-width: 600px) and (min-height: 501px) {
  .partner-badge {
    gap: 4.48px;
    width: 122.88px;
    height: 128px;
    padding: 10.24px 14.08px;
    border-width: 0.38px;
    border-radius: 18.29px;
    -webkit-backdrop-filter: blur(12.2px);
    backdrop-filter: blur(12.2px);
  }

  .partner-badge__top {
    gap: 4.6px;
  }

  .partner-badge__icon {
    width: 24px;
    height: 24px;
  }

  .partner-badge__eyebrow {
    font-size: 13.33px;
  }

  .partner-badge__bottom {
    gap: 3.84px;
  }

  .partner-badge--checkup .partner-badge__bottom {
    gap: 7.68px;
  }

  .partner-badge__partner {
    font-size: 10.67px;
  }

  .partner-badge__logo--mude {
    width: 44.49px;
    height: 18.29px;
  }

  .partner-badge__logo--mar {
    width: 62.74px;
    height: 17.07px;
  }
}

/* ==========================================================================
   Selos das lojas (Google Play / App Store)
   ========================================================================== */

.store-badge {
  display: block;
  flex-shrink: 0;
}

.store-badge img {
  width: auto;
  height: 100%;
}

/* Badge da loja no mobile: Android por padrão; iOS quando detectado (script no <head>) */
.store-badge.store-badge-ios {
  display: none;
}
html[data-os="ios"] .store-badge.store-badge-ios {
  display: block;
}
html[data-os="ios"] .store-badge.store-badge-android {
  display: none;
}

/* ==========================================================================
   Aviso de cookies (js/cookie-notice.js)
   Cartão flutuante. No mobile, de borda a borda, logo acima da navegação fixa (--cookie-notice-bottom, medido
   pelo script); no desktop, no canto inferior direito, para não cobrir o botão de nenhum card da home
   ========================================================================== */

.cookie-notice {
  position: fixed;
  right: 12px;
  bottom: var(--cookie-notice-bottom, calc(84px + env(safe-area-inset-bottom)));
  left: 12px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  background-color: rgb(244 242 237 / 0.96);
  box-shadow: 0 8px 24px -8px rgb(4 66 60 / 0.3), var(--shadow-2xs);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  letter-spacing: var(--tracking-inter);
  line-height: 1.35;
  color: var(--color-neutro-800);
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition:
    opacity 400ms ease,
    translate 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-notice.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.cookie-notice p {
  flex: 1 1 220px;
}

.cookie-notice a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-verde-atlantico-950);
}

/* Recusar (contorno) e Entendi (cheio), à direita; quebram para baixo do texto quando não cabem ao lado */
.cookie-notice__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.cookie-notice__ok,
.cookie-notice__decline {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-verde-atlantico-950);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 18px;
  color: #bae7c9;
  cursor: pointer;
  transition: var(--transition-colors);
}

.cookie-notice__decline {
  padding: 8px 15px;
  border: 1px solid rgb(4 66 60 / 0.35);
  background-color: transparent;
  color: var(--color-verde-atlantico-950);
}

.cookie-notice__ok:focus-visible,
.cookie-notice__decline:focus-visible {
  outline: 2px solid var(--color-verde-atlantico-950);
  outline-offset: 2px;
}

.cookie-notice__ok:focus-visible {
  background-color: #065a52;
}

.cookie-notice__decline:focus-visible {
  background-color: rgb(4 66 60 / 0.08);
}

@media (hover: hover) {
  .cookie-notice__ok:hover {
    background-color: #065a52;
  }

  .cookie-notice__decline:hover {
    background-color: rgb(4 66 60 / 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .cookie-notice {
    right: 24px;
    bottom: 24px;
    left: auto;
    max-width: 400px;
  }
}

/* ==========================================================================
   Rodapé (o mesmo nas 10 páginas), como o de travalyst.org/about
   Fundo branco (o da página Sobre). Duas colunas de links: os principais (as páginas Score e Check-up) e,
   juntos, os secundários (Sobre, Política) e os externos (Mude e Mar Saúde, menores, com a seta de link
   externo); e o copyright. Tamanhos da Travalyst: links de 20px (16px no mobile) e entrelinha 1.05, links
   externos e copyright de 14px. No desktop, copyright à esquerda e as colunas em 50% e 75% da largura (grade
   2fr 1fr 1fr); no mobile tudo empilhado, com o copyright no fim. Termina com o logo gigante (neutro-100),
   cortado pela borda de baixo. Fica preso à base da tela (sticky), por baixo do conteúdo de cada página, que tem
   fundo próprio e rola por cima dele: o rodapé só aparece no fim, como na Travalyst. No mobile, o rodapé
   reserva embaixo a altura do dock fixo: o logo termina logo acima do menu flutuante
   ========================================================================== */

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  padding-bottom: var(--score-dock-height, calc(62px + env(safe-area-inset-bottom)));
  background-color: #fff;
  color: var(--color-verde-atlantico-950);
}

/* Conteúdo (links e copyright), com o recuo; o logo, embaixo, vai de borda a borda (8px para dentro) */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 40px 20px;
}

.site-footer__nav,
.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.site-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__primary,
.site-footer__secondary {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.site-footer__external,
.site-footer__copy {
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: var(--tracking-inter);
}

/* Copyright em cinza; os links externos (Mude, Mar Saúde) na cor do rodapé, a da marca Tempo */
.site-footer__copy {
  color: var(--color-neutro-600);
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 300ms ease;
}

/* Página atual: esmaecida (55% do verde-atlântico sobre o branco), sem sublinhado, nem no hover */
.site-footer__nav a[aria-current="page"] {
  color: color-mix(in srgb, currentColor 55%, transparent);
  text-decoration-color: transparent;
}

/* A seta dos links externos acompanha a cor do texto (a da marca Tempo, verde-atlântico) */
.site-footer__nav a svg {
  width: 14px;
  height: 14px;
}

.site-footer__nav a:focus-visible {
  outline: 2px solid var(--color-verde-atlantico-950);
  outline-offset: 3px;
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .site-footer__nav a:not([aria-current="page"]):hover {
    text-decoration-color: currentColor;
  }
}

/* Logo gigante (Tempo Health). Uma margem negativa embaixo corta o que fica abaixo da base do T (a perna do p):
   a base do T encosta no topo do menu flutuante (mobile) ou na borda da tela (desktop). A margem em % é da
   largura: (225.424 - 179.605) / 1529.5, a altura do SVG menos a base do T, sobre a largura dele */
.site-footer__logo {
  margin: 0 8px;
  overflow: hidden;
}

.site-footer__logo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-bottom: -2.996%;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: start;
    padding: 60px 20px 64px;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 2 / -1;
    gap: 0;
  }

  /* A 32px da borda da tela, como o logo do cabeçalho (o recuo do rodapé é de 20px; as colunas de links
     ficam onde estão) */
  .site-footer__copy {
    grid-row: 1;
    grid-column: 1;
    margin-left: 12px;
  }

  .site-footer__primary,
  .site-footer__secondary {
    font-size: 20px;
  }

  .site-footer {
    padding-bottom: 0;
  }
}

/* Celular deitado: o rodapé fica mais alto que a tela; preso à base, o topo dele nunca apareceria. Volta ao
   fluxo da página */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 500px) {
  .site-footer {
    position: relative;
  }
}

/* ==========================================================================
   Newsletter (página Sobre), como o "Join the Movement" de travalyst.org/about
   Bloco verde-atlântico (como o do título do Sobre) com o título, o campo de e-mail grande e sublinhado, o
   botão redondo de seta e o texto. O envio vai direto do navegador para a lista da Tempo (js/newsletter.js).
   Altura como a da Travalyst: 100px acima e abaixo do conteúdo (165px no desktop). Embaixo já há a linha da
   resposta do envio (32px, vazia até o primeiro envio), descontada do padding
   ========================================================================== */

/* Até o desktop, recuo lateral da Travalyst: com o card a 6,25px da tela, os textos ficam a 25px */
.newsletter {
  position: relative;
  z-index: 1;
  padding: 100px 18.75px 68px;
  border-radius: 10px;
  background-color: var(--color-verde-atlantico-950);
  color: #bae7c9;
}

/* Título e campo de e-mail no mesmo tamanho e colados um no outro, como em travalyst.org/about (36px no
   mobile, 67px no desktop) */
.newsletter__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

.newsletter__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  border-bottom: 1px solid rgb(186 231 201 / 0.6);
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 0 0 5px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.15;
  color: #fff;
}

.newsletter__input::placeholder {
  color: rgb(186 231 201 / 0.55);
}

.newsletter__input:focus {
  outline: none;
}

/* Foco do campo: o sublinhado fica cheio */
.newsletter__form:focus-within {
  border-bottom-color: #bae7c9;
}

.newsletter__submit {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border: 0;
  border-radius: 50%;
  background-color: #bae7c9;
  color: var(--color-verde-atlantico-950);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), opacity 150ms var(--ease-out);
}

.newsletter__submit svg {
  width: 20px;
  height: 20px;
  transition: translate 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.newsletter__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (hover: hover) {
  .newsletter__submit:not(:disabled):hover {
    background-color: #fff;
  }

  .newsletter__submit:not(:disabled):hover svg {
    translate: 3px 0;
  }
}

/* Aviso da política: no tamanho do copyright do rodapé (14px) em qualquer tela */
.newsletter__text {
  max-width: 600px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: var(--tracking-inter);
}

.newsletter__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Resposta do envio (aria-live): vazia até o primeiro envio */
.newsletter__status {
  min-height: 1.4em;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}

.newsletter__status[data-type="warning"] {
  color: #fde68a;
}

.newsletter__status[data-type="error"] {
  color: #fecaca;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__nav a,
  .newsletter__submit,
  .newsletter__submit svg {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .newsletter {
    padding: 165px 8px 133px 18.07%;
    border-radius: 15px;
  }

  .newsletter__title {
    font-size: 67px;
  }

  .newsletter__form {
    margin-right: 48px;
  }

  .newsletter__input {
    font-size: 67px;
  }

  .newsletter__submit {
    width: 56px;
    height: 56px;
  }
}