/* Estilos autorais extraídos da página publicada. */
/*
 * O preview original roda em um iframe com barra de rolagem sobreposta.
 * Ocultar apenas o trilho mantém os mesmos 1280 px úteis sem impedir a rolagem.
 */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

:root {
--paper: #f5f0e9;
--ink: #171411;
--muted: #7d7267;
--taupe: #a67b4f;
--panel: #eee5da;
}
body {
margin: 0;
font-family: "Manrope", sans-serif;
background:
radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.82), transparent 30%),
radial-gradient(circle at 82% 10%, rgba(221, 211, 198, 0.34), transparent 34%),
var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.font-logo {
font-family: "Cormorant Garamond", serif;
}
.font-display {
font-family: "Newsreader", serif;
}
.premium-panel {
border: 1px solid #d8c9b8;
background: #eee5da;
box-shadow:
0 24px 64px rgba(42, 31, 22, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.material-dot:nth-child(1) {
background: radial-gradient(circle at 35% 25%, #e6dfd5, #bfb5aa);
}
.material-dot:nth-child(2) {
background: linear-gradient(90deg, #786653, #b39a82, #705844);
}
.material-dot:nth-child(3) {
background: radial-gradient(circle at 30% 20%, #333638, #111314);
}
.material-dot:nth-child(4) {
background: radial-gradient(circle at 40% 20%, #d8ceb9, #a9967f);
}
.material-dot:nth-child(5) {
background: linear-gradient(120deg, #6d452d, #b57b4d, #553722);
}
.material-dot:nth-child(6) {
background: radial-gradient(circle at 35% 25%, #e1dcd5, #bdb5ac);
}
.z-35 {
z-index: 35;
}
.z-55 {
z-index: 55;
}
@media (max-width: 1023px) {
.hero-side {
min-height: auto !important;
}
.hero-image-frame {
height: 640px !important;
border-radius: 1.35rem !important;
}
.hero-visual-bleed {
margin-right: 0 !important;
}
}
@media (max-width: 640px) {
.hero-image-frame {
height: 560px !important;
}
}

.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition-property: opacity, transform;
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.animate-in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
transition: none;
opacity: 1;
transform: none;
}
}

/* Regras responsivas que a publicação da Aura injeta no preview público. */
@media (max-width: 639px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #root {
    max-width: 100% !important;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .aura-share-mobile-grid-stack {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: min(1rem, 4vw) !important;
  }

  .aura-share-mobile-grid-stack > * {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Mantém o estado selecionado dos controles de cobrança claro e consistente. */
.billing-toggle.is-active {
  background: #171614;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(25, 21, 18, 0.18);
}

/* Evita que o hover neutralize o contraste do botão de cobrança ativo. */
.billing-toggle.is-active:hover {
  color: #ffffff;
}

/* Bloqueia a rolagem do documento enquanto o aviso de portfólio está aberto. */
body.portfolio-modal-open {
  overflow: hidden;
}

/* Camada principal do modal demonstrativo. */
.portfolio-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.5rem;
  position: fixed;
  z-index: 1000;
}

/* Garante que o atributo nativo hidden sempre remova o modal da tela. */
.portfolio-modal[hidden] {
  display: none;
}

/* Fundo clicável que separa o aviso do restante da página. */
.portfolio-modal__backdrop {
  backdrop-filter: blur(8px);
  background: rgba(23, 20, 17, 0.72);
  border: 0;
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: absolute;
}

/* Cartão do aviso, alinhado ao acabamento editorial do projeto. */
.portfolio-modal__panel {
  background: #f5f0e9;
  border: 1px solid #d8c9b8;
  border-radius: 1.5rem;
  box-shadow: 0 40px 120px rgba(20, 16, 12, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  max-width: 34rem;
  padding: 2.25rem;
  position: relative;
  text-align: center;
  width: 100%;
}

/* Selo visual do modal usando paleta em vez do ícone associado a IA. */
.portfolio-modal__icon {
  align-items: center;
  background: #eee5da;
  border: 1px solid #d6c5b2;
  border-radius: 999px;
  color: #9d7650;
  display: inline-flex;
  height: 3.25rem;
  justify-content: center;
  width: 3.25rem;
}

/* Linha editorial que contextualiza o aviso. */
.portfolio-modal__eyebrow {
  color: #9a744d;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
  text-transform: uppercase;
}

/* Título principal do aviso. */
.portfolio-modal__title {
  color: #171411;
  font-family: "Newsreader", serif;
  font-size: clamp(2.15rem, 6vw, 3.15rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1;
  margin-top: 0.8rem;
}

/* Texto explicativo do aviso. */
.portfolio-modal__description {
  color: #62584f;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.65;
  margin: 1.25rem auto 0;
  max-width: 27rem;
}

/* Ação que encerra o modal. */
.portfolio-modal__action {
  background: #171614;
  border: 0;
  border-radius: 0.85rem;
  box-shadow: 0 18px 42px rgba(25, 21, 18, 0.18);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 800;
  margin-top: 1.75rem;
  min-height: 3.25rem;
  padding: 0.8rem 2rem;
}

/* Destaca navegação por teclado nas ações do modal. */
.portfolio-modal__action:focus-visible,
.portfolio-modal__backdrop:focus-visible {
  outline: 3px solid rgba(157, 118, 80, 0.55);
  outline-offset: 3px;
}

/* Reduz o espaçamento do cartão em telas estreitas. */
@media (max-width: 639px) {
  /* Mantém o título traduzido dentro da largura útil sem mudar sua quebra editorial. */
  main h1 {
    font-size: clamp(3rem, 15.25vw, 3.75rem) !important;
  }

  /* Permite que colunas editoriais e cards encolham até a largura do celular. */
  main > section .grid > * {
    min-width: 0;
  }

  /* Preserva as três linhas intencionais do título sem recortar a última frase. */
  main > section:nth-of-type(6) h2 {
    font-size: clamp(2.1rem, 11.1vw, 3.35rem) !important;
  }

  /* Organiza os três diferenciais em uma coluna legível nas telas estreitas. */
  main > section:nth-of-type(2) .mt-14 > .flex {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Remove os divisores verticais, que não fazem sentido na composição empilhada. */
  main > section:nth-of-type(2) .mt-14 > .flex > .w-px {
    display: none;
  }

  /* Faz cada diferencial ocupar a largura disponível sem alterar seu conteúdo. */
  main > section:nth-of-type(2) .mt-14 > .flex > div:not(.w-px) {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .portfolio-modal {
    padding: 1rem;
  }

  .portfolio-modal__panel {
    padding: 1.75rem 1.35rem;
  }
}