/* ===== Paleta (da identidade BE: azul do logo + preto Bodoni + branco do estúdio + cacau da foto) ===== */
:root {
  --nevoa: #F4F6F9;        /* fundo geral, branco frio do estúdio */
  --papel: #FFFFFF;
  --tinta: #17171B;        /* preto do monograma */
  --tinta-2: #55565E;      /* texto secundário */
  --azul: #5A8BBF;         /* azul do logo */
  --azul-escuro: #2E5B88;  /* hover / links */
  --azul-claro: #DCE7F3;   /* faixas e fundos suaves */
  --cacau: #6E3B2B;        /* acento quente, usar pouco */
  --nude: #EBD8D0;         /* tom de unha natural */
  --linha: #D9DEE6;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --raio: 18px;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--nevoa); color: var(--tinta); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--azul-escuro); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h3 { font-size: 1.5rem; }
h1 em, h2 em { font-style: italic; color: var(--azul); }

.rotulo { font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--azul); margin-bottom: 14px; }

/* ===== Botões ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font: 600 .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: .2s; border: 1.5px solid transparent; }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-escuro); }
.btn-escuro { background: var(--tinta); color: #fff; }
.btn-escuro:hover { background: var(--azul-escuro); }
.btn-linha { border-color: var(--tinta); color: var(--tinta); }
.btn-linha:hover { background: var(--tinta); color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.centro { display: flex; width: fit-content; margin: 40px auto 0; }

/* ===== Topo ===== */
.topo { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter); background: color-mix(in srgb, var(--nevoa) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topo.rolou { border-color: var(--linha); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); margin-right: auto; }
.marca-be { font: 500 2rem/1 var(--serif); letter-spacing: -0.06em; }
.marca-img { display: block; height: 38px; width: auto; }
.marca-nome { font: 500 .78rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.marca-nome small { display: block; font-size: .62rem; color: var(--azul); letter-spacing: .3em; }
.menu { display: flex; gap: 28px; }
.menu a { color: var(--tinta); text-decoration: none; font-size: .85rem; font-weight: 500; }
.menu a:hover { color: var(--azul); }
.topo-cta { padding: 11px 20px; }
.menu-btn { display: none; }

/* ===== Hero ===== */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 6vw, 80px); max-width: var(--max); margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 110px); }
.hero-logo { display: block; width: clamp(150px, 22vw, 210px); height: auto; margin: 0 0 18px -8px; }
.hero-sub { font-size: 1.08rem; color: var(--tinta-2); max-width: 30em; margin-top: 22px; }
.selo-google { display: inline-flex; gap: 8px; align-items: center; margin-top: 28px; font-size: .85rem; color: var(--tinta-2); text-decoration: none; }
.estrelas { color: #E3A93B; letter-spacing: 2px; }
.hero-foto { position: relative; width: 100%; max-width: 460px; justify-self: end; }
.hero-foto img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 240px 240px var(--raio) var(--raio); }
.hero-arco { position: absolute; inset: -18px 18px 18px -18px; border: 1.5px solid var(--azul); border-radius: 240px 240px var(--raio) var(--raio); }

/* ===== Seções ===== */
.secao { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 9vw, 110px) var(--gutter); }
.secao-cabeca { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.secao-cabeca > p:last-child:not(.rotulo) { margin-top: 12px; color: var(--tinta-2); }

/* Serviços */
.servicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.servico { background: var(--papel); border-radius: var(--raio); padding: 32px 26px; border: 1px solid var(--linha); transition: transform .25s, box-shadow .25s; }
.servico:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(46, 91, 136, .45); }
.servico-num { font: italic 500 1.1rem var(--serif); color: var(--azul); }
.servico h3 { margin: 18px 0 10px; }
.servico p { color: var(--tinta-2); font-size: .94rem; }
.servicos-rodape { text-align: center; margin-top: 32px; color: var(--tinta-2); }
.servicos-rodape a { font-weight: 600; }

/* Sobre */
.sobre { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.sobre-texto p:not(.rotulo) { color: var(--tinta-2); margin-top: 16px; }
.sobre-texto h2 { margin-bottom: 8px; }
.sobre-pontos { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 10px; }
.sobre-pontos li { padding-left: 28px; position: relative; font-weight: 500; }
.sobre-pontos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--azul-claro); border: 1.5px solid var(--azul); }

/* Faixas coloridas */
.trabalhos { max-width: none; background: var(--azul-claro); }
.trabalhos > * { max-width: calc(var(--max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }

/* ===== Carrossel (scroll-snap + setas) ===== */
.carrossel { position: relative; min-width: 0; }
.carrossel-trilho { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--raio); }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * { flex: 0 0 100%; min-width: 0; height: auto; scroll-snap-align: start; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--raio); }
.carrossel-largo .carrossel-trilho > * { flex-basis: calc((100% - 28px) / 3); }
.carrossel-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.seta { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tinta); background: transparent; font: 400 1.5rem/1 var(--serif); cursor: pointer; color: var(--tinta); transition: .2s; }
.seta:hover { background: var(--tinta); color: #fff; }
.pontos { display: flex; gap: 8px; }
.pontos button { width: 8px; height: 8px; padding: 0; border-radius: 99px; border: 0; background: var(--linha); cursor: pointer; transition: .25s; }
.pontos button[aria-current="true"] { width: 26px; background: var(--azul); }
.antes-depois { margin-top: clamp(40px, 6vw, 72px); text-align: center; }
.antes-depois h3 { margin-bottom: 20px; }
.carrossel-trilho > figure { position: relative; }
.carrossel-trilho > figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); }
.carrossel-trilho > figure figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--papel); color: var(--tinta); font: 600 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.vaga { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--nude) 0 14px, #f3e6e0 14px 28px); color: var(--cacau); font: italic 500 1.1rem var(--serif); text-align: center; padding: 20px; }

/* Avaliações */
.nota { font-size: 1.3em; }
.avaliacoes h2 .estrelas { font-size: .6em; vertical-align: middle; }
.depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.depoimentos blockquote { background: var(--papel); border-radius: var(--raio); padding: 30px 28px; font: italic 400 1.18rem/1.5 var(--serif); border: 1px solid var(--linha); }
.depoimentos cite { display: block; margin-top: 18px; font: 600 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--azul); font-style: normal; }

/* Contato */
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: stretch; }
.contato-texto > p:not(.rotulo) { color: var(--tinta-2); margin-top: 16px; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linha); }
.info dt { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--azul); padding-top: 4px; }
.mapa { min-height: 360px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); }
.mapa iframe { width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(.4) contrast(1.05); }

/* Rodapé */
.rodape { background: var(--tinta); color: #cfd3da; text-align: center; padding: 56px var(--gutter) 90px; display: grid; gap: 8px; }
.rodape .marca-be { color: #fff; font-size: 2.6rem; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { color: var(--azul-claro); }
.credito { font-size: .75rem; opacity: .6; margin-top: 12px; }

/* WhatsApp flutuante */
.zap-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); transition: transform .2s; }
.zap-flutuante:hover { transform: scale(1.07); }

/* Animação de entrada */
.surge { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.surge.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .surge { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ===== Responsivo ===== */
@media (max-width: 980px) {
  .servicos { grid-template-columns: repeat(2, 1fr); }
  .carrossel-largo .carrossel-trilho > * { flex-basis: calc((100% - 14px) / 2); }
  .depoimentos { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 820px) {
  .menu { position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0; background: var(--nevoa); border-bottom: 1px solid var(--linha); padding: 8px var(--gutter) 20px; transform: translateY(-120%); transition: transform .3s; z-index: -1; }
  .menu.aberto { transform: none; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 1rem; }
  .menu-btn { display: grid; gap: 6px; background: none; border: 0; padding: 8px; cursor: pointer; }
  .menu-btn span { width: 24px; height: 1.5px; background: var(--tinta); transition: .25s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .topo-cta { display: none; }
  .marca-nome { display: none; }
  .hero, .sobre, .contato { grid-template-columns: 1fr; }
  .hero-foto { order: -1; max-width: 420px; margin: 0 auto 8px; width: 88%; }
  .hero-arco { inset: -12px 12px 12px -12px; }
  .hero-texto { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero .acoes { justify-content: center; }
}
@media (max-width: 560px) {
  .servicos { grid-template-columns: 1fr; }
  .carrossel-largo .carrossel-trilho > * { flex-basis: 82%; }
  .acoes .btn { flex: 1 1 100%; }
  .info { grid-template-columns: 1fr; gap: 4px; }
  .info dd { margin-bottom: 10px; }
}