/* ------------------------------------------------------------------
   Rosana Pereira Advogados — estilos do site
   O layout usa estilos inline (vindos do desenho aprovado); aqui ficam
   apenas os estados que o atributo style não alcança: hover, foco,
   responsividade e os comportamentos que funcionam sem JavaScript.
   ------------------------------------------------------------------ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #f3eee9;
  color: #2b2927;
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #a8603c; text-decoration: none; }
a:hover { color: #2b2927; }
::selection { background: #c07a55; color: #fff; }
input, textarea, button { font-family: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid #c07a55;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Âncoras não podem ficar escondidas sob o cabeçalho fixo. */
section[id] { scroll-margin-top: 86px; }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #2b2927; color: #f3eee9; padding: 14px 22px; border-radius: 0 0 4px 0;
}
.pular-para-conteudo:focus { left: 0; color: #f3eee9; }

/* ------------------------------------------------------------ cabeçalho */

.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; color: #f3eee9; box-shadow: none;
  transition: background .35s, box-shadow .35s, color .35s;
  backdrop-filter: blur(12px);
}
.cabecalho.solido {
  background: rgba(243, 238, 233, .94);
  color: #2b2927;
  box-shadow: 0 1px 0 rgba(43, 41, 39, .08);
}

.link-nav { color: inherit; opacity: .85; transition: opacity .2s, color .2s; }
.link-nav:hover { opacity: 1; color: #c07a55; }

.botao-cta { background: #c07a55; color: #fff; transition: background .2s; }
.botao-cta:hover { background: #a8603c; color: #fff; }

.icone-social { color: inherit; transition: color .2s, background .2s; }
.icone-social:hover { color: #c07a55; background: rgba(192, 122, 85, .12); }
.rodape .icone-social:hover { color: #d9a07f; }

/* menu de celular — funciona sem JavaScript, via checkbox */
#menu-mobile { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.menu-painel { display: none; }
#menu-mobile:checked ~ .menu-painel { display: flex; }
.menu-rotulo-fechar { display: none; }
#menu-mobile:checked ~ * .menu-rotulo-abrir { display: none; }
#menu-mobile:checked ~ * .menu-rotulo-fechar { display: inline; }
/* com o menu aberto o cabeçalho fica sólido, como no desenho original */
.cabecalho:has(#menu-mobile:checked) {
  background: rgba(243, 238, 233, .94);
  color: #2b2927;
  box-shadow: 0 1px 0 rgba(43, 41, 39, .08);
}
#menu-mobile:focus-visible ~ * .botao-menu { outline: 2px solid currentColor; outline-offset: 3px; }

.botao-menu {
  background: none; border: 1px solid currentColor; color: inherit;
  border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 13px;
  cursor: pointer; min-height: 44px; display: none; align-items: center;
}

.nav-desktop { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }

@media (max-width: 959px) {
  .nav-desktop { display: none; }
  .botao-menu { display: inline-flex; }
}

/* ----------------------------------------------------------------- topo */

.botao-hero-1 { transition: transform .25s, background .25s; }
.botao-hero-1:hover { background: #d08e69; color: #fff; transform: translateY(-2px); }
.botao-hero-2 { transition: border-color .25s, color .25s; }
.botao-hero-2:hover { border-color: #d9a07f; color: #d9a07f; }

.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; opacity: 0; z-index: 1;
  transform: scale(1); clip-path: inset(0 0 0 100%);
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1),
              transform 6s cubic-bezier(.2, .6, .2, 1),
              clip-path 1.1s cubic-bezier(.7, 0, .2, 1);
}
.hero-slide.ativo { opacity: 1; z-index: 2; transform: scale(1.06); clip-path: inset(0 0 0 0); }

.hero-legenda { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.hero-legenda.ativo { opacity: 1; transform: none; }

.hero-barra-interna {
  position: absolute; inset: 0; background: #c07a55;
  transform-origin: left; transform: scaleX(0); transition: transform .3s;
}
.hero-barra.ativo .hero-barra-interna { transform: scaleX(1); transition: transform 6s linear; }

/* --------------------------------------------------------- diferenciais */

.cartao-diferencial { transition: transform .35s; }
.cartao-diferencial:hover { transform: translateY(-4px); }

/* ---------------------------------------------- áreas de atuação (abas) */

.area-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.area-aba {
  display: flex; align-items: center; gap: 22px; padding: 24px 4px; padding-left: 4px;
  border-bottom: 1px solid rgba(243, 238, 233, .15);
  color: rgba(243, 238, 233, .55); cursor: pointer;
  transition: color .25s, padding .3s;
  width: 100%; text-align: left;
}
.area-aba:hover { color: rgba(243, 238, 233, .85); }
.area-aba .marcador { width: 10px; height: 10px; transform: rotate(45deg);
  background: #c07a55; opacity: 0; transition: opacity .25s; flex: none; }

.area-painel { display: none; }

.areas-grid > .area-radio:nth-of-type(1):checked ~ .areas-colunas .area-painel[data-indice="1"],
.areas-grid > .area-radio:nth-of-type(2):checked ~ .areas-colunas .area-painel[data-indice="2"],
.areas-grid > .area-radio:nth-of-type(3):checked ~ .areas-colunas .area-painel[data-indice="3"],
.areas-grid > .area-radio:nth-of-type(4):checked ~ .areas-colunas .area-painel[data-indice="4"],
.areas-grid > .area-radio:nth-of-type(5):checked ~ .areas-colunas .area-painel[data-indice="5"],
.areas-grid > .area-radio:nth-of-type(6):checked ~ .areas-colunas .area-painel[data-indice="6"],
.areas-grid > .area-radio:nth-of-type(7):checked ~ .areas-colunas .area-painel[data-indice="7"],
.areas-grid > .area-radio:nth-of-type(8):checked ~ .areas-colunas .area-painel[data-indice="8"],
.areas-grid > .area-radio:nth-of-type(9):checked ~ .areas-colunas .area-painel[data-indice="9"],
.areas-grid > .area-radio:nth-of-type(10):checked ~ .areas-colunas .area-painel[data-indice="10"] {
  display: flex;
}

.areas-grid > .area-radio:nth-of-type(1):checked ~ .areas-colunas .area-aba[data-indice="1"],
.areas-grid > .area-radio:nth-of-type(2):checked ~ .areas-colunas .area-aba[data-indice="2"],
.areas-grid > .area-radio:nth-of-type(3):checked ~ .areas-colunas .area-aba[data-indice="3"],
.areas-grid > .area-radio:nth-of-type(4):checked ~ .areas-colunas .area-aba[data-indice="4"],
.areas-grid > .area-radio:nth-of-type(5):checked ~ .areas-colunas .area-aba[data-indice="5"],
.areas-grid > .area-radio:nth-of-type(6):checked ~ .areas-colunas .area-aba[data-indice="6"],
.areas-grid > .area-radio:nth-of-type(7):checked ~ .areas-colunas .area-aba[data-indice="7"],
.areas-grid > .area-radio:nth-of-type(8):checked ~ .areas-colunas .area-aba[data-indice="8"],
.areas-grid > .area-radio:nth-of-type(9):checked ~ .areas-colunas .area-aba[data-indice="9"],
.areas-grid > .area-radio:nth-of-type(10):checked ~ .areas-colunas .area-aba[data-indice="10"] {
  color: #f3eee9; padding-left: 16px;
}

.areas-grid > .area-radio:nth-of-type(1):checked ~ .areas-colunas .area-aba[data-indice="1"] .marcador,
.areas-grid > .area-radio:nth-of-type(2):checked ~ .areas-colunas .area-aba[data-indice="2"] .marcador,
.areas-grid > .area-radio:nth-of-type(3):checked ~ .areas-colunas .area-aba[data-indice="3"] .marcador,
.areas-grid > .area-radio:nth-of-type(4):checked ~ .areas-colunas .area-aba[data-indice="4"] .marcador,
.areas-grid > .area-radio:nth-of-type(5):checked ~ .areas-colunas .area-aba[data-indice="5"] .marcador,
.areas-grid > .area-radio:nth-of-type(6):checked ~ .areas-colunas .area-aba[data-indice="6"] .marcador,
.areas-grid > .area-radio:nth-of-type(7):checked ~ .areas-colunas .area-aba[data-indice="7"] .marcador,
.areas-grid > .area-radio:nth-of-type(8):checked ~ .areas-colunas .area-aba[data-indice="8"] .marcador,
.areas-grid > .area-radio:nth-of-type(9):checked ~ .areas-colunas .area-aba[data-indice="9"] .marcador,
.areas-grid > .area-radio:nth-of-type(10):checked ~ .areas-colunas .area-aba[data-indice="10"] .marcador {
  opacity: 1;
}

.area-radio:focus-visible ~ .areas-colunas .area-aba[data-indice] { outline: none; }
.area-aba:focus-within { color: #f3eee9; }

.link-area { color: #a8603c; border-bottom: 1px solid #a8603c; transition: color .2s, border-color .2s; }
.link-area:hover { color: #2b2927; border-color: #2b2927; }

/* --------------------------------------------------------------- equipe */

.cartao-equipe { transition: box-shadow .35s, transform .35s; }
.cartao-equipe:hover { box-shadow: 0 30px 60px -30px rgba(46, 43, 41, .35); transform: translateY(-4px); }

.bio-toggle { position: absolute; opacity: 0; pointer-events: none; }
.bio-caixa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2, .7, .2, 1); }
.bio-interna { overflow: hidden; min-height: 0; }
.bio-resto { margin: 0; font-size: 15px; line-height: 1.7; color: #5e5650;
  opacity: 0; transform: translateY(-10px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.bio-toggle:checked ~ .bio-caixa { grid-template-rows: 1fr; }
.bio-toggle:checked ~ .bio-caixa .bio-resto { opacity: 1; transform: none; transition-delay: .2s; }

.bio-botao {
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: #2b2927; align-self: flex-start; min-height: 44px;
}
.bio-botao:hover { color: #a8603c; }
.bio-mais-vertical { position: absolute; width: 1.5px; height: 10px; background: currentColor;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.bio-toggle:checked ~ .bio-botao .bio-mais-vertical { transform: rotate(90deg) scaleY(0); }
.bio-rotulo-menos { display: none; }
.bio-toggle:checked ~ .bio-botao .bio-rotulo-mais { display: none; }
.bio-toggle:checked ~ .bio-botao .bio-rotulo-menos { display: inline; }
.bio-toggle:focus-visible ~ .bio-botao { outline: 2px solid #c07a55; outline-offset: 3px; }

.link-email-equipe { color: #a8603c; transition: color .2s; }
.link-email-equipe:hover { color: #2b2927; }

/* ---------------------------------------------------------------- sobre */

.link-mapa { color: #d9a07f; border-bottom: 1px solid #d9a07f; transition: color .2s, border-color .2s; }
.link-mapa:hover { color: #fff; border-color: #fff; }

.caixa-mapa { filter: grayscale(1) contrast(.95); transition: filter .5s; }
.caixa-mapa:hover { filter: grayscale(0); }

/* ------------------------------------------------- faixa do Instagram */

.instagram-trilho-area { position: relative; }

/* esmaecimento à direita sugerindo que há mais fotos ao lado */
.instagram-trilho-area::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 14px; width: 64px;
  background: linear-gradient(to right, rgba(250, 247, 244, 0), #faf7f4);
  pointer-events: none; opacity: 1; transition: opacity .3s;
}
.instagram-trilho-area.no-fim::after { opacity: 0; }

.instagram-trilho {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: #d8cec5 transparent;
  -webkit-overflow-scrolling: touch;
}
.instagram-trilho::-webkit-scrollbar { height: 6px; }
.instagram-trilho::-webkit-scrollbar-track { background: #efe8e1; border-radius: 999px; }
.instagram-trilho::-webkit-scrollbar-thumb { background: #d8cec5; border-radius: 999px; }
.instagram-trilho::-webkit-scrollbar-thumb:hover { background: #c07a55; }

.post-instagram {
  position: relative; flex: none; width: 240px; aspect-ratio: 1 / 1;
  border-radius: 4px; overflow: hidden; background: #e9e5e0;
  scroll-snap-align: start; display: block; color: inherit;
  box-shadow: 0 1px 0 #e3d9d0; transition: transform .35s, box-shadow .35s;
}
.post-instagram:hover, .post-instagram:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -26px rgba(46, 43, 41, .55);
}

.post-instagram img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.post-instagram:hover img, .post-instagram:focus-visible img { transform: scale(1.06); }

.post-cobertura {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; padding: 16px 16px 14px; color: #f3eee9;
  background: linear-gradient(to top, rgba(43, 41, 39, .88) 0%, rgba(43, 41, 39, .45) 45%, rgba(43, 41, 39, 0) 80%);
  opacity: 0; transition: opacity .35s;
}
.post-instagram:hover .post-cobertura,
.post-instagram:focus-visible .post-cobertura { opacity: 1; }

.post-legenda {
  font-size: 13px; line-height: 1.5; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-data { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #d9a07f; font-weight: 600; }

/* selo de vídeo / carrossel, sempre visível */
.post-selo {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(43, 41, 39, .55); color: #fff;
  backdrop-filter: blur(4px);
}

.seta-instagram {
  display: none; position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: #fffdfb; color: #2b2927; border: 1px solid #e3d9d0;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -12px rgba(46, 43, 41, .5);
  transition: background .2s, color .2s, opacity .2s;
}
.seta-instagram:hover { background: #c07a55; color: #fff; border-color: #c07a55; }
.seta-instagram[disabled] { opacity: 0; pointer-events: none; }
.seta-instagram.anterior { left: -14px; }
.seta-instagram.proxima { right: -14px; }
.js .instagram-trilho-area.tem-setas .seta-instagram { display: flex; }

.link-instagram { color: #a8603c; font-weight: 600; transition: color .2s; }
.link-instagram:hover { color: #2b2927; }

/* convite exibido enquanto não houver publicações */
.convite-instagram {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px;
  background: #fffdfb; border: 1px solid #e3d9d0; border-radius: 4px;
  padding: 26px 28px;
}
.convite-icone {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: rgba(192, 122, 85, .12); color: #a8603c;
}
.convite-texto { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.convite-texto strong { font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 600; line-height: 1.15; }
.convite-texto span { font-size: 14px; color: #6b625b; letter-spacing: .04em; }
.convite-botao { padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 14.5px; flex: none; }

@media (max-width: 600px) {
  .post-instagram { width: 200px; }
  .seta-instagram { display: none !important; }
}

/* -------------------------------------------------------------- contato */

.link-canal { transition: padding .25s, color .25s; color: #2b2927; }
.link-canal:hover { padding-left: 8px; color: #a8603c; }

.campo-form {
  border: 0; border-bottom: 1px solid #cfc3b8; background: transparent;
  padding: 10px 0; font-size: 16px; color: #2b2927; outline: none;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  transition: border-color .2s;
  width: 100%;
}
.campo-form:focus { border-bottom-color: #c07a55; }
.campo-form[aria-invalid="true"] { border-bottom-color: #b4432f; }

.erro-campo { color: #b4432f; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.botao-enviar {
  margin-top: 6px; align-self: flex-start; background: #2b2927; color: #fff; border: 0;
  border-radius: 999px; padding: 17px 32px; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: background .25s, transform .25s;
}
.botao-enviar:hover { background: #c07a55; transform: translateY(-2px); }

.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- rodapé */

.link-rodape { color: #a79c92; transition: color .2s; }
.link-rodape:hover { color: #d9a07f; }

/* ------------------------------------------------------------ whatsapp */

.whatsapp-flutuante { transition: transform .25s; }
.whatsapp-flutuante:hover { transform: translateY(-3px); color: #fff; }

/* -------------------------------------------------- animação de entrada */

.revelar { opacity: 1; }
.js .revelar { opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}