:root{
  --branco:#f4ede9;
  --azul:#232d5c;
  --bege:#d1af8b;
  --azul-escuro:#141b3d;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--sans);color:var(--azul);background:var(--branco);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);line-height:1.08;margin:0;font-weight:600}
h2{font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:1.25rem;max-width:20ch}
h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:.6rem;line-height:1.15}
p{margin:0 0 1rem;font-size:clamp(.98rem,1.2vw,1.08rem)}
a{color:inherit}
:focus-visible{outline:3px solid var(--bege);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto}

/* Topbar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--azul-escuro);color:var(--branco);border-bottom:1px solid rgba(209,175,139,.3);transition:box-shadow .35s}
.topbar.scrolled{box-shadow:0 6px 26px rgba(0,0,0,.35)}
.topbar__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: .7rem var(--pad);
  display: flex;
  align-items: center; /* Removido o space-between e o gap daqui */
}

.topbar nav {
  flex: 1; /* Ocupa todo o espaço vazio entre o logo e o fim da tela */
  display: flex;
  align-items: center;
  justify-content: center; /* Centraliza os links comuns */
  gap: 1.8rem;
}

/* Esta regra empurra apenas o botão de contato para a extremidade direita */
.topbar nav .btn {
  margin-left: auto; 
}

/* No media query @media (max-width:980px), mantenha a lógica mas garanta que o toggle vá para a direita */
@media (max-width:980px) {
  .topbar__in {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: block;
    margin-left: auto; /* Empurra o botão de menu para a direita */
  }
}

.brand{display:block;justify-self:start;line-height:0}
.brand img{height:46px;width:auto}
.topbar nav{display:flex;align-items:center;justify-content:center;gap:1.8rem}
.topbar nav a:not(.btn){text-decoration:none;font-size:.93rem;font-weight:500;position:relative;padding:.2rem 0}
.topbar nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--bege);transition:width .3s}
.topbar nav a:not(.btn):hover::after{width:100%}
.btn--sm{padding:.65rem 1.3rem;font-size:.9rem}
.nav-toggle{display:none;justify-self:end;width:46px;height:46px;border:1px solid var(--bege);border-radius:10px;background:transparent;cursor:pointer;padding:0;position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:var(--bege);border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
.nav-toggle span:nth-child(1){top:15px}.nav-toggle span:nth-child(2){top:22px}.nav-toggle span:nth-child(3){top:29px}
.menu-open .nav-toggle span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .nav-toggle span:nth-child(2){opacity:0}
.menu-open .nav-toggle span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* Botões */
.btn{display:inline-block;padding:1rem 1.8rem;border-radius:999px;font-weight:600;font-size:.98rem;text-decoration:none;text-align:center;transition:transform .25s,background .25s,color .25s,box-shadow .25s;border:2px solid transparent}
.btn--bege{background:var(--bege);color:var(--azul)}
.btn--bege:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.28);background:var(--branco)}
.btn--outline{border-color:var(--bege);color:var(--branco)}
.btn--outline:hover{background:var(--bege);color:var(--azul);transform:translateY(-3px)}

/* Hero */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* Aumenta a proporção da área azul (esquerda) */
  background: var(--azul);
  color: var(--branco);
  overflow: hidden;
}

.hero__text {
  align-self: center;
  /* Substituímos '+ 3rem' por '+ var(--pad)' para sincronizar a margem com a navbar */
  padding: 8rem 2.5rem 4rem max(var(--pad), calc((100vw - 1180px)/2 + var(--pad)));
  max-width: none;
}
.hero h1{font-size:clamp(2.3rem,4.4vw,4.1rem);margin-bottom:1.4rem;max-width:15ch}
.hero p {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  max-width: 38ch; /* Reduza este valor (antes era 46ch) até alinhar com o título */
  opacity: .92;
  margin-bottom: 2rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__media{position:relative;min-height:100%;overflow:hidden}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* Ajuste o percentual (20%) para centralizar o rosto da foto conforme desejado */
  animation: heroIn 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

/* Seções */
.section{padding:clamp(4rem,9vw,8rem) var(--pad)}
.section--light{background:var(--branco);color:var(--azul)}
.section--blue{background:var(--azul);color:var(--branco)}
.section--blue h2,.section--blue h3{color:var(--branco)}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:60ch;opacity:.92}

/* Sobre */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.about__text p{max-width:62ch;line-height:1.75}
.carousel{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 24px 50px rgba(35,45,92,.28);aspect-ratio:4/5;background:var(--azul)}
.carousel__track{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,.05,.25,1);touch-action:pan-y}
.carousel__slide{flex:0 0 100%;margin:0;height:100%}
.carousel__slide img{width:100%;height:100%;object-fit:cover}
.carousel__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:0;background:rgba(244,237,233,.92);color:var(--azul);font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px;transition:background .25s,transform .25s}
.carousel__btn:hover{background:var(--bege);transform:translateY(-50%) scale(1.08)}
.carousel__btn--prev{left:1.4rem}
.carousel__btn--next{right:1.4rem}
.carousel__dots{position:absolute;bottom:1.5rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:4}
.carousel__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(244,237,233,.55);cursor:pointer;transition:width .3s,background .3s}
.carousel__dots button.active{width:26px;border-radius:6px;background:var(--bege)}

/* Serviços */
/* Cards interativos */
.card{position:relative;overflow:hidden;cursor:pointer;border-radius:16px;outline-offset:4px;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background .4s,color .4s,border-color .4s}
.card:not(.in){opacity:0}
.card.in{animation:cardIn .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(50px) scale(.94)}to{opacity:1;transform:none}}
.card::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--bege);transition:width .5s}
.card:hover,.card:focus-visible,.card.active{transform:scale(1.06) translateY(-6px);z-index:3}
.card:hover::after,.card:focus-visible::after,.card.active::after{width:100%}
.card h3,.card p{position:relative;z-index:1;transition:color .4s,transform .4s}
.card:hover h3,.card.active h3{transform:translateX(6px)}

.services{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}
.service{padding:2.2rem;background:rgba(244,237,233,.06);border:1px solid rgba(209,175,139,.45)}
.service h3{color:var(--bege)}
.service p{opacity:.92;max-width:52ch;margin:0}
.service:hover,.service:focus-visible,.service.active{background:rgba(244,237,233,.13);border-color:var(--bege);box-shadow:0 22px 44px rgba(0,0,0,.4)}

/* Por que */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.why__item{padding:2.2rem 2rem;background:#fbf8f6;border:1px solid rgba(35,45,92,.12);border-top:4px solid var(--bege)}
.why__item p{line-height:1.75;margin:0}
.why__item:hover,.why__item:focus-visible,.why__item.active{background:var(--azul);color:var(--branco);border-color:var(--azul);box-shadow:0 24px 46px rgba(35,45,92,.35)}
.why__item:hover h3,.why__item.active h3{color:var(--bege)}

/* Final */
.final__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.contacts{list-style:none;margin:0;padding:2rem;border:1px solid var(--bege);border-radius:6px;display:grid;gap:1.4rem;overflow-wrap:anywhere}
.contacts span{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--bege);font-weight:600;margin-bottom:.1rem}
.contacts a{text-decoration:none;border-bottom:1px solid var(--bege)}
.final .btn{margin-top:.8rem}
.footer{background:var(--azul);color:var(--branco);text-align:center;padding:1.4rem var(--pad);font-size:.85rem;border-top:1px solid rgba(209,175,139,.35);opacity:.95}

/* Animações de surgimento */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.reveal--left{transform:translateX(-50px)}
.reveal--right{transform:translateX(50px)}
.reveal.in{opacity:1;transform:none}

/* Tablet */
@media (max-width:980px){
  .topbar__in{grid-template-columns:1fr auto}
  .nav-toggle{display:block}
  .topbar nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--azul-escuro);border-bottom:1px solid rgba(209,175,139,.3);max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .3s,padding .3s}
  .menu-open nav{max-height:420px;opacity:1;padding:.6rem var(--pad) 1.4rem}
  .topbar nav a:not(.btn){width:100%;text-align:center;padding:.95rem 0;border-bottom:1px solid rgba(209,175,139,.18)}
  .topbar nav a:not(.btn)::after{display:none}
  .topbar nav .btn{margin-top:1rem;width:100%}
  .about,.final__grid{grid-template-columns:1fr}
  .carousel{max-width:520px;margin-inline:auto;width:100%}
  .why{grid-template-columns:1fr}
}

/* Mobile: texto, subtítulo e botões primeiro; foto depois */
@media (max-width:760px){
  .hero{display:flex;flex-direction:column;min-height:auto}
  .hero__text{padding:7.5rem var(--pad) 2.5rem}
  .hero h1{max-width:none}
  .hero__cta .btn{flex:1 1 100%}
  .hero__media{width:100%;min-height:0;aspect-ratio:4/3}
  .hero__media img{object-position:center 25%}
  .services{grid-template-columns:1fr}
  .service{padding:1.6rem}
  .contacts{padding:1.4rem}
  .final .btn{display:block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__media img{animation:none}
  .card.in{animation:none}
  .card{transition:none}
  .carousel__track{transition:none}
}

@media (max-width:980px) {
  .about {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  
  .about__text {
    order: -1; /* Força o texto a aparecer antes do carrossel */
  }
}

.topbar nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

/* Aplica margem automática antes do primeiro link para empurrar o grupo para o centro */
.topbar nav > a:first-of-type {
  margin-left: auto;
}

/* Aplica margem automática antes do botão para empurrá-lo para a direita */
.topbar nav .btn {
  margin-left: auto; 
}

/* Organiza os botões da seção Sobre um ao lado do outro */
.about__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

/* Novo botão vazado escuro para fundos claros */
.btn--outline-dark {
  border-color: var(--azul);
  color: var(--azul);
}

.btn--outline-dark:hover {
  background: var(--azul);
  color: var(--branco);
  transform: translateY(-3px);
}

/* Mobile: texto, subtítulo e botões primeiro; foto depois */
@media (max-width:760px){
  .hero{display:flex;flex-direction:column;min-height:auto}
  .hero__text{padding:7.5rem var(--pad) 2.5rem}
  .hero h1{max-width:none}
  
  .hero__cta .btn {flex:1 1 100%} /* Botões da hero no mobile */
  .about__cta .btn {flex:1 1 100%} /* ADICIONE ESTA LINHA: Botões do Sobre nós no mobile */
  
  .hero__media{width:100%;min-height:0;aspect-ratio:4/3}
  .hero__media img{object-position:center 25%}
  .services{grid-template-columns:1fr}
  .service{padding:1.6rem}
  .contacts{padding:1.4rem}
  .final .btn{display:block}
}

/* Atualize a regra do h2 (Títulos das seções) */
h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem); /* Tamanhos originais restaurados para boa leitura no mobile */
  margin-bottom: 1.25rem;
  max-width: 22ch;
  text-wrap: balance; /* Mantemos isso para evitar as viúvas */
}

/* Atualize a regra do .hero h1 (Título principal) */
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 4.1rem); /* Tamanhos originais restaurados para boa leitura no mobile */
  margin-bottom: 1.4rem;
  max-width: 16ch; 
  text-wrap: balance; /* Mantemos isso para evitar as viúvas */
}

/* =========================================
   NOVO DESIGN: SEÇÃO SERVIÇOS (DESKTOP)
   ========================================= */
@media (min-width: 981px) {
  /* O grid agora divide perfeitamente a nova div de texto e a div de cards */
  #servicos .wrap {
    display: grid;
    grid-template-columns: 1.1fr 1.9fr;
    gap: 4rem;
    align-items: start;
  }

  .services {
    margin-top: 0; 
  }
}

/* =========================================
   REFINAMENTO DOS CARDS DE SERVIÇO
   ========================================= */
.service {
  padding: 2.5rem 2rem;
  /* Fundo com leve gradiente para destacar do fundo sólido e criar profundidade */
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(209,175,139,.2);
  /* Linha de destaque no topo para ancorar o olhar */
  border-top: 3px solid var(--bege);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s;
}

.service:hover, .service:focus-visible {
  background: linear-gradient(145deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 100%);
  border-color: var(--bege);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  transform: translateY(-6px);
}

.service h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 1rem;
}

.service p {
  opacity: 0.85;
  line-height: 1.6;
}

/* =========================================
   ÍCONES DOS CARDS DE SERVIÇO
   ========================================= */
.service-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1.25rem;
  color: var(--bege); /* Puxa a cor dourada/bege da identidade */
  display: block;
  /* Transição suave caso queira adicionar um efeito ao passar o mouse depois */
  transition: transform 0.4s ease; 
}

/* Opcional: Faz o ícone subir de leve junto com o texto quando passa o mouse no card */
.service:hover .service-icon,
.service.active .service-icon {
  transform: translateY(-3px) scale(1.05);
}

html, body {
  overflow-x: hidden; /* Trava a tela para impedir que as animações de entrada criem margens fantasmas */
}

.topbar__in {
  max-width: 1180px;
  width: 100%; /* Garante que a barra respeite milimetricamente a tela do celular */
  margin: 0 auto;
  padding: .7rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between; /* Coloca o logo totalmente à esquerda e o botão totalmente à direita */
}

.topbar nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
}

/* Substituímos o bloco antigo que causava o corte por este: */
@media (max-width:980px) {
  .nav-toggle {
    display: block;
    /* Removemos o margin-left: auto e o flex-wrap que estavam forçando o corte */
  }
}