/* Letícia Marques Padilha — estilos, layout, cores e animações. */

:root {
  --green:#0b2b25;
  --gold:#caa657;
  --cream:#fbf4e9;
  --ink:#183b33;
  --muted:#52645d
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:105px
}
body {
  margin:0;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  line-height:1.65;
  background:var(--cream)
}
a {
  color:inherit
}
header {
  background:#fff;
  border-bottom:1px solid #e7e6df
}
 .nav {
  max-width:1320px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 36px;
  gap:28px
}
.logo {
  width:310px;
  max-width:100%;
  height:auto;
  display:block
}
nav {
  display:flex;
  gap:30px;
  align-items:center
}
nav a {
  text-decoration:none;
  font-size:17px
}
nav a:hover {
  text-decoration:underline
}
 .nav-cta {
  border:1px solid var(--green);
  padding:11px 20px
}
.wrap {
  max-width:1248px;
  margin:auto;
  padding:0 36px
}
.hero {
  display:grid;
  grid-template-columns:1.16fr .84fr;
  gap:65px;
  align-items:center;
  padding-top:48px;
  padding-bottom:52px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:2.4px;
  font-size:15px;
  font-weight:700;
  color:#80653d;
  margin:0 0 21px
}
h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.14;
  margin:0
}
h1 {
  font-size:clamp(42px,4.4vw,65px);
  letter-spacing:-1.8px
}
h1 em {
  color:#947747;
  font-weight:400
}
p {
  margin:22px 0
}
.lead {
  font-size:21px;
  line-height:1.65;
  color:var(--muted);
  max-width:590px
}
.button {
  background:var(--green);
  color:white;
  display:inline-flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:18px 24px;
  font-weight:600;
  font-size:18px;
  line-height:1.4;
  border:1px solid var(--green);
  transition:background .2s
}
.button:hover {
  background:#174a3e
}
.button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #bd8e36;
  outline-offset:5px
}
.wa {
  font-size:25px;
  line-height:1
}
.micro {
  font-size:16px;
  color:var(--muted);
  margin:15px 0 0
}
.portrait {
  margin:0;
  position:relative
}
.portrait img {
  display:block;
  width:100%;
  height:auto
}
.portrait figcaption {
  background:var(--green);
  color:#fff;
  padding:16px 22px;
  font-size:17px
}
.portrait figcaption span {
  color:#dfca9b
}
.trust {
  background:var(--green);
  color:#fff
}
.trust-inner {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-top:29px;
  padding-bottom:29px;
  gap:30px
}
.trust-inner div {
  padding:0 22px;
  border-left:1px solid #8a916f
}
.trust strong {
  font:28px Georgia,serif;
  color:#e1c88d;
  display:block
}
.trust span {
  font-size:17px
}
section {
  padding:84px 0
}
h2 {
  font-size:clamp(35px,3.5vw,49px);
  letter-spacing:-.8px
}
.intro {
  max-width:700px;
  color:var(--muted)
}
.services {
  margin-top:40px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:22px
}
.service {
  border-top:2px solid var(--gold);
  padding:30px 27px;
  background:#fff
}
.number {
  font-family:Georgia,serif;
  color:#947747;
  font-size:24px
}
.service h3 {
  font-size:31px;
  margin:22px 0
}
.service p {
  font-size:18px;
  line-height:1.7
}
.service a {
  font-weight:600;
  font-size:17px;
  text-underline-offset:6px
}
.section-cta {
  margin-top:35px
}
.about {
  background:#fff
}
.about-grid {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:65px;
  align-items:center
}
.about img {
  display:block;
  width:100%;
  height:auto
}
.about h3 {
  font-size:36px;
  margin:15px 0
}
.credentials {
  border-top:1px solid #d7dacd;
  margin-top:28px;
  padding-top:23px
}
.credentials p {
  margin:9px 0;
  font-size:18px
}
.care {
  background:var(--green);
  color:#fff
}
.care .eyebrow {
  color:#e1c88d
}
.care p {
  color:#e1e7e0
}
.care-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:start
}
.care h3 {
  font-size:27px;
  color:#e1c88d
}
.care-item {
  border-bottom:1px solid #557166;
  padding:0 0 18px;
  margin-bottom:24px
}
.care-item p {
  font-size:18px;
  margin-bottom:0
}
.care .button {
  background:var(--gold);
  color:var(--green);
  border-color:var(--gold)
}
.faq {
  max-width:900px
}
details {
  border-bottom:1px solid #d7d5c7;
  padding:23px 0
}
summary {
  font-size:21px;
  font-weight:600;
  cursor:pointer
}
details p {
  color:var(--muted);
  font-size:18px
}
.contact {
  background:#ebe5d8
}
.contact-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:65px
}
.contact-data {
  border-left:1px solid #b9ad92;
  padding-left:36px
}
.contact-data p {
  margin-top:0
}
.contact-data strong {
  display:block
}
.contact .button {
  margin-top:14px
}
footer {
  background:var(--green);
  color:#fff;
  padding:32px 0 100px;
  font-size:16px
}
footer p {
  margin:7px 0
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:30px
}
.floating {
  position:fixed;
  right:24px;
  bottom:22px;
  background:var(--green);
  color:white;
  border:1px solid #bfa46f;
  box-shadow:0 5px 22px #0002;
  padding:14px 23px;
  text-decoration:none;
  font-size:17px;
  font-weight:600;
  z-index:3
}
.floating:hover {
  background:#174a3e
}
@media(min-width:1500px) {
  .hero {
  padding-top:55px
}

}
@media(max-width:950px) {
  nav a:not(.nav-cta) {
  display:none
}
.nav {
  padding:17px 24px
}
.logo {
  width:270px
}
.hero {
  gap:32px
}
.wrap {
  padding-left:25px;
  padding-right:25px
}
h1 {
  font-size:46px
}
.services {
  grid-template-columns:1fr
}
.service p {
  max-width:700px
}
.about-grid,.care-grid,.contact-grid {
  gap:35px
}
.button {
  font-size:17px;
  padding:17px
}
.hero .lead {
  font-size:19px
}

}
@media(max-width:650px) {
  body {
  font-size:18px
}
.nav {
  padding:17px 20px
}
.logo {
  width:250px
}
nav {
  display:none
}
.hero {
  grid-template-columns:1fr;
  padding-top:37px;
  gap:32px;
  padding-bottom:34px
}
h1 {
  font-size:43px;
  letter-spacing:-1px
}
.eyebrow {
  font-size:13px;
  letter-spacing:1.6px
}
.hero .button {
  width:100%
}
.portrait {
  max-width:390px;
  margin:auto
}
.trust-inner {
  grid-template-columns:1fr;
  gap:20px
}
.trust strong {
  font-size:26px
}
.trust-inner div {
  padding-left:17px
}
section {
  padding:55px 0
}
.about-grid,.care-grid,.contact-grid {
  grid-template-columns:1fr
}
.about-grid .photo {
  max-width:330px;
  margin:auto
}
.about-copy {
  grid-row:1
}
.about h3 {
  font-size:32px
}
.contact-data {
  border-left:0;
  border-top:1px solid #b9ad92;
  padding:25px 0 0
}
.footer-inner {
  display:block
}
.floating {
  left:16px;
  right:16px;
  bottom:12px;
  text-align:center;
  padding:15px;
  font-size:18px
}
summary {
  font-size:19px
}
h2 {
  font-size:36px
}

}


/* Dark palette drawn from the original identity. Photographs stay untouched. */
:root {
  color-scheme:dark;
  --green:#0b2b25;
  --ink:#f7f0e4;
  --muted:#c4d0c8;
  --cream:#0b2b25;
  --whatsapp:#25d366
}

body {
  background:#0b2b25
}
header {
  background:#fff;
  border-color:#fff
}
header nav {
  color:#0b2b25
}
.nav-cta {
  background:var(--whatsapp);
  border-color:var(--whatsapp);
  color:#062b16;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px
}
.eyebrow {
  color:#d5b779
}
h1 em {
  color:#d9bb7c
}
.hero {
  background:#0b2b25
}
.hero .lead {
  color:#d2dcd4
}
.portrait figcaption {
  background:#123b31
}
.trust {
  background:#123b31;
  border-top:1px solid #365044;
  border-bottom:1px solid #365044
}
.trust-inner div {
  border-color:#817447
}
.service {
  background:#12382f;
  border-color:#caa657;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease
}
.number {
  color:#d5b779
}
.service a {
  color:#49e687;
  display:inline-flex;
  align-items:center;
  gap:9px
}
.about {
  background:#102f28
}
.credentials {
  border-color:#496052
}
.care {
  background:#0b2b25
}
.care-item {
  border-color:#426050
}
.contact {
  background:#153d32
}
.contact-data {
  border-color:#6b7861
}
details {
  border-color:#466052
}
summary {
  transition:color .2s ease
}
details[open] summary {
  color:#d9bb7c
}
details p {
  color:#cbd8cf
}
footer {
  background:#071f1a
}
a.button,.care .button,.floating {
  background:var(--whatsapp);
  border-color:var(--whatsapp);
  color:#062b16;
  font-weight:700
}
.whatsapp-icon {
  width:23px;
  height:23px;
  flex-shrink:0;
  vertical-align:middle
}
.button,.floating,.nav-cta {
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease
}
.floating {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  box-shadow:0 6px 24px #0005
}
nav a {
  transition:color .2s ease
}
.button {
  min-height:58px
}
summary {
  min-height:44px
}
.logo {
  height:auto
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #f3d592;
  outline-offset:5px
}

@media(hover:hover) and (pointer:fine) {
  .service:hover {
  transform:translateY(-5px);
  background:#194438;
  box-shadow:0 16px 28px #0002
}
a.button:hover,.care .button:hover,.floating:hover,.nav-cta:hover {
  background:#4ce488;
  transform:translateY(-3px);
  box-shadow:0 8px 24px #25d36625
}
summary:hover {
  color:#e4c587
}
nav a:not(.nav-cta):hover {
  color:#80653d
}
.service a:hover {
  text-decoration-thickness:2px
}

}

@media(max-width:650px) {
  .wrap {
  padding-left:22px;
  padding-right:22px
}
.hero {
  padding-top:32px
}
h1 {
  font-size:clamp(35px,9.4vw,43px)
}
h2 {
  font-size:clamp(31px,8.5vw,36px)
}
.button {
  font-size:17px;
  gap:10px;
  max-width:100%
}
.contact .button,.care .button {
  width:100%
}
.service {
  padding:27px 23px
}
.service a {
  min-height:44px
}
.floating {
  min-height:54px;
  padding:13px 16px
}
.portrait {
  width:100%
}
.trust-inner {
  padding-top:25px;
  padding-bottom:25px
}
.about-copy {
  min-width:0
}
footer {
  padding-bottom:105px
}
.contact-data {
  overflow-wrap:anywhere
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  transition:none!important;
  animation:none!important
}

}


.areas-contact {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:32px;
  border-top:1px solid #496052;
  padding-top:26px
}
.areas-contact p {
  margin:0;
  font-size:21px
}
.service {
  padding-bottom:22px
}
.floating {
  width:66px;
  height:66px;
  min-height:66px;
  border-radius:50%;
  padding:0;
  right:25px;
  bottom:25px;
  left:auto;
  isolation:isolate;
  animation:whatsapp-glow 3s ease-in-out infinite
}
.floating .whatsapp-icon {
  width:34px;
  height:34px
}
.floating::before {
  content:"";
  position:absolute;
  inset:-7px;
  border:2px solid #25d36688;
  border-radius:50%;
  z-index:-1;
  animation:whatsapp-ring 3s ease-out infinite;
  pointer-events:none
}
.notification {
  position:absolute;
  right:-3px;
  top:-4px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dc2626;
  color:#fff;
  border:2px solid #fff;
  border-radius:50%;
  font:700 14px/1 Arial,sans-serif;
  box-shadow:0 2px 5px #0004
}
.floating:active {
  transform:scale(.94)
}
@keyframes whatsapp-ring {
  0%,15% {
  transform:scale(.9);
  opacity:.7
}
75%,100% {
  transform:scale(1.35);
  opacity:0
}

}
@keyframes whatsapp-glow {
  0%,100% {
  box-shadow:0 5px 22px #0004
}
50% {
  box-shadow:0 0 0 5px #25d36620,0 5px 28px #25d36650
}

}
@media(max-width:650px) {
  .areas-contact {
  display:block;
  text-align:center
}
.areas-contact p {
  font-size:20px;
  margin-bottom:20px
}
.areas-contact .button {
  width:100%
}
.floating {
  left:auto;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:62px;
  height:62px;
  min-height:62px;
  padding:0
}
.floating .whatsapp-icon {
  width:32px;
  height:32px
}
footer {
  padding-bottom:110px
}
.hero h1 {
  font-size:clamp(34px,9.2vw,42px)
}

}
@media(prefers-reduced-motion:reduce) {
  .floating,.floating::before {
  animation:none!important
}

}

.hero-action {
  font-size:20px;
  line-height:1.65;
  color:#f7f0e4;
  max-width:590px;
  margin:20px 0 26px
}
details p a {
  color:#49e687;
  text-underline-offset:4px
}
@media(max-width:650px) {
  .hero-action {
  font-size:19px
}

}

/* Navegação móvel e acessibilidade */
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:20;
  background:#fff;
  color:#0b2b25;
  padding:10px 18px;
  transform:translateY(-200%)
}

.skip-link:focus {
  transform:translateY(0)
}

.menu-toggle {
  display:none;
  background:transparent;
  border:1px solid #0b2b25;
  color:#0b2b25;
  padding:10px 13px;
  align-items:center;
  gap:9px;
  font:600 16px Arial,sans-serif;
  min-height:44px;
  cursor:pointer
}

.menu-toggle[hidden] {
  display:none
}

@media(max-width:950px) {
  
.nav {
  flex-wrap:wrap;
  gap:14px
}
.nav .menu-toggle:not([hidden]) {
  display:inline-flex;
  margin-left:auto
}

.nav nav {
  display:flex;
  width:100%;
  flex-wrap:wrap;
  gap:8px 22px;
  padding-top:10px;
  border-top:1px solid #e7e6df
}

.nav nav a:not(.nav-cta) {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.nav nav .nav-cta {
  min-height:44px
}

.nav nav.is-collapsed {
  display:none
}


}

@media(max-width:420px) {
  .nav .logo {
  width:min(215px,100%)
}
.menu-toggle {
  padding:9px;
  font-size:15px
}

}


/* Localização do escritório: mapa quadrado e responsivo */
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,65px)}
.contact-copy{min-width:0}.contact-copy .contact-data{border-left:0;padding-left:0;margin-top:32px}
.office-map{width:100%;aspect-ratio:1;overflow:hidden;border-radius:20px;border:1px solid #a38d5855;box-shadow:0 18px 45px #0003;background:#e6e2d8}
.office-map iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:850px){.contact-grid{grid-template-columns:minmax(0,1fr)}.office-map{max-width:600px;justify-self:center}}

/* Serviços em destaque, inspirados na referência aprovada */
.service-highlights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:36px 0 42px}
.service-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:210px;padding:28px 18px;background:#ad8937;color:#fff9e9;text-align:center;text-decoration:none;border:1px solid #d3b56c;border-radius:6px;box-shadow:0 10px 25px #0002;transition:transform .25s,background .25s,box-shadow .25s}
.service-tile svg{display:block;flex-shrink:0;width:76px;height:76px}.service-tile span{font-size:clamp(19px,1.6vw,23px);font-weight:600;line-height:1.35}
.service-tile:focus-visible{outline:3px solid #fff4d2;outline-offset:5px}
#familia,#sucessoes,#civel{scroll-margin-top:110px}
@media(hover:hover){.service-tile:hover{transform:translateY(-6px);background:#96732a;box-shadow:0 18px 32px #0004}}
@media(max-width:850px){.service-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.service-highlights{gap:10px}.service-tile{min-height:190px;padding:20px 10px}.service-tile svg{width:64px;height:64px}.service-tile span{font-size:18px}}
@media(prefers-reduced-motion:reduce){.service-tile{transition:none}.service-tile:hover{transform:none}}