/* REURBE — camada visual compartilhada (animações e interações) */

/* Vidro do header. Fica aqui porque o loader da home termina o colapso
   exatamente nesta cor — é o que faz a camada virar a barra do menu sem
   emenda visível. O site.js lê esta variável, então os dois nunca divergem. */
:root {
  --rb-header-bg: rgba(244,248,240,.86);
  --rb-header-border: rgba(26,59,33,.12);
  --rb-header-blur: 12px;
}

/* ---------- Entrada de página (fade suave; a home tem o loader por cima) */
@keyframes rb-pagein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  body { animation: rb-pagein .65s ease both; }
}

/* ---------- Títulos: palavras sobem de uma máscara */
/* padding + margem negativa dão folga p/ acentos e descendentes (g, j) não
   serem cortados pela máscara de overflow, sem alterar o layout */
.rb-split .rb-wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .06em .04em .2em;
  margin: -.06em -.04em -.2em;
}
.rb-split .rb-w {
  display: inline-block;
  transform: translateY(135%);
  transition: transform 1.5s cubic-bezier(.22,.82,.28,1);
  will-change: transform;
}
.rb-split.rb-on .rb-w { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rb-split .rb-w { transform: none; transition: none; }
}

/* ---------- Zoom suave nas imagens dos cards (hover) */
a .rb-img img, article .rb-img img {
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) {
  a:hover .rb-img img:not([data-plx]),
  article:hover .rb-img img:not([data-plx]) { transform: scale(1.055); }
}

/* ---------- Cards de projeto: o card inteiro vira área clicável
   O link "Ver o projeto" se estica por cima do card (foto, título e texto) via
   ::after, então continua existindo um único link de verdade — o leitor de tela
   e o teclado enxergam a mesma coisa de antes. */
.rb-card { position: relative; }
.rb-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 6px;
}
/* Passar o mouse em qualquer canto do card responde na foto e no botão.
   O zoom vai na moldura, não na <img>: as fotos grandes levam data-plx e têm o
   transform reescrito pelo parallax a cada frame de scroll, então qualquer
   transform aplicado nelas some. A moldura é recortada pelo wrapper de
   overflow:hidden, então o crescimento aparece sem vazar o arredondamento. */
.rb-card .rb-img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .rb-card:hover .rb-img { transform: scale(1.03); }
  .rb-card:hover .rb-card-link {
    gap: 15px !important;
    color: #235323 !important;
    border-color: #235323 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rb-card .rb-img { transition: none; }
  .rb-card:hover .rb-img { transform: none; }
}

/* (O lightbox da galeria vive em projeto-uvaia.html, com estilo e script próprios.) */

/* ---------- Menu mobile (hambúrguer)
   O botão e a gaveta são montados pelo site.js, que também marca
   html.rb-navjs. Tudo que esconde o menu horizontal depende dessa classe: se o
   JS não rodar, a página continua exatamente como era antes — apertada em tela
   pequena, mas com os seis links à mão. A gaveta reaparece como menu normal
   acima de 860px, então nada fica preso se a tela girar com ela aberta. */

.rb-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1A3B21;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rb-burger i {
  display: block;
  width: 24px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.rb-burger i + i { margin-top: 6px; }
/* as duas barras se cruzam no meio: 6px de respiro + 1,6px de traço = 3,8px
   para cada uma percorrer até o centro */
.rb-burger[aria-expanded="true"] i:first-child { transform: translateY(3.8px) rotate(45deg); }
.rb-burger[aria-expanded="true"] i:last-child  { transform: translateY(-3.8px) rotate(-45deg); }
.rb-burger:focus-visible { outline: 2px solid #1A3B21; outline-offset: 2px; }

@media (max-width: 860px) {
  /* !important porque o menu horizontal traz display:flex no atributo style */
  html.rb-navjs .rb-nav-desk { display: none !important; }
  html.rb-navjs .rb-burger { display: inline-flex; }
}

.rb-mnav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  transition: visibility 0s linear .6s;
}
.rb-mnav.rb-on { visibility: visible; transition-delay: 0s; }
.rb-mnav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(26,59,33,.42);
  opacity: 0;
  transition: opacity .5s ease;
}
.rb-mnav.rb-on .rb-mnav-scrim { opacity: 1; }
.rb-mnav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 340px);
  display: flex;
  flex-direction: column;
  /* o topo é vazado na altura do header: a barra continua por cima, com o X no
     lugar exato onde estava o hambúrguer */
  padding: calc(env(safe-area-inset-top, 0px) + 96px) 28px calc(env(safe-area-inset-bottom, 0px) + 30px);
  background: #F4F8F0;
  box-shadow: -26px 0 64px rgba(26,59,33,.20);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.rb-mnav.rb-on .rb-mnav-panel { transform: none; }
/* o painel recebe o foco ao abrir só para ancorar o teclado e o leitor de tela
   — o anel de foco é dos links, não dele */
.rb-mnav-panel:focus { outline: none; }

.rb-mnav a {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .03em;
  color: #1A3B21;
  text-decoration: none;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(26,59,33,.10);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.rb-mnav.rb-on a { opacity: .74; transform: none; }
.rb-mnav.rb-on a.rb-mnav-cur { opacity: 1; font-weight: 600; }
.rb-mnav a.rb-mnav-cta {
  margin-top: auto;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: #1A3B21;
  color: #F4F8F0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.rb-mnav.rb-on a.rb-mnav-cta { opacity: 1; }
.rb-mnav a:focus-visible { outline: 2px solid #1A3B21; outline-offset: 3px; }

/* com a gaveta aberta o header sobe de camada e assume o vidro sólido: sem isso
   o logotipo ficaria por baixo do véu escuro, ilegível, nas páginas cujo header
   nasce transparente */
html.rb-nav-open #rb-header {
  z-index: 210 !important; /* o header traz z-index:50 no atributo style */
  background: var(--rb-header-bg) !important;
  border-bottom-color: var(--rb-header-border) !important;
  backdrop-filter: saturate(1.3) blur(var(--rb-header-blur)) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(var(--rb-header-blur)) !important;
}
html.rb-nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rb-mnav-panel, .rb-mnav-scrim, .rb-mnav a, .rb-burger i { transition: none; }
}

/* ---------- Botão flutuante de WhatsApp (FAB) */
.rb-wa {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  height: 58px;
  width: 58px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(26,59,33,.28);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  transition: width .45s cubic-bezier(.2,.7,.2,1),
              box-shadow .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
  -webkit-tap-highlight-color: transparent;
}
.rb-wa.rb-wa-in { opacity: 1; transform: none; }
.rb-wa svg { flex: none; width: 30px; height: 30px; margin: 14px; }
.rb-wa .rb-wa-label {
  white-space: nowrap;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  padding-right: 22px;
  opacity: 0;
  transition: opacity .3s ease .05s;
}
@media (hover: hover) {
  .rb-wa:hover { width: 214px; box-shadow: 0 16px 40px rgba(26,59,33,.36); }
  .rb-wa:hover .rb-wa-label { opacity: 1; }
}
.rb-wa:focus-visible { outline: 3px solid #1A3B21; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .rb-wa { transition: box-shadow .3s ease; opacity: 1; transform: none; }
}