:root{
  --papel:#FDFBF8; --pedra:#F1E9DF; --areia:#E6D9C9; --tinta:#231C1A; --tinta-2:#5A4E47;
  --garrafa:#133524; --garrafa-2:#1E4A34; --nogueira:#8E6549; --caramelo-claro:#C9A283;
  --vinho:#3F1521; --oliva:#3B3C1C; --linha:#E0D4C5;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --medida:68ch; --raio:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px}

body{margin:0; background:var(--papel); color:var(--tinta); font:17px/1.6 var(--sans)}
img{max-width:100%; height:auto; display:block}
a{color:var(--garrafa-2); text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--nogueira); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.5vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 40px); margin-inline:auto}
.texto{max-width:var(--medida)}
.texto p,.texto li{font-family:var(--serif); font-size:1.15rem; line-height:1.7}
.skip{position:absolute; left:-999px; top:8px; background:var(--tinta); color:#fff; padding:8px 12px; z-index:99}
.skip:focus{left:8px}

/* Cabeçalho */
.topo{position:sticky; top:0; z-index:20; background:rgba(253,251,248,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px}
.marca{text-decoration:none; color:var(--tinta); display:flex; flex-direction:column; line-height:1.15}
.marca strong{font-family:var(--serif); font-weight:500; font-size:1.4rem}
.marca span{font-size:.8rem; color:var(--tinta-2)}
.nav{display:flex; align-items:center; gap:26px}
.nav a{color:var(--tinta); text-decoration:none; font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--garrafa-2); text-decoration:underline}
.nav .btn{color:#fff; text-decoration:none}
.menu{display:none}

/* Botões */
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--garrafa); color:#fff; text-decoration:none; font-weight:600; font-size:1rem; padding:14px 22px; border-radius:var(--raio); border:0; cursor:pointer; transition:background .15s}
.btn:hover{background:var(--garrafa-2)}
.btn svg{width:20px; height:20px; flex:none}
.btn-sm{padding:10px 16px; font-size:.92rem}
.btn-claro{background:#fff; color:var(--garrafa)}
.btn-claro:hover{background:var(--areia)}
.link-sec{font-weight:600; color:var(--tinta)}

/* Hero */
.hero{padding:clamp(40px,7vw,96px) 0 0; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:end}
.hero-texto{padding-bottom:clamp(40px,7vw,96px)}
.hero .lead{font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.5; color:var(--tinta-2); max-width:36ch}
.hero .acoes{display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:28px}
.inscricao{margin-top:26px; font-size:.92rem; color:var(--tinta-2)}
.retrato{position:relative; isolation:isolate}
.retrato img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--raio) var(--raio) 0 0}
.retrato::before{content:""; position:absolute; inset:16% -14% 0 22%; background:var(--areia); z-index:-1}

/* Seções */
.secao{padding:clamp(64px,9vw,120px) 0}
.secao-pedra{background:var(--pedra)}
.secao-escura{background:var(--garrafa); color:#F4EEE6}
.secao-escura a{color:#fff}
.secao-escura h2,.secao-escura h3{color:#fff}
.intro{max-width:56ch; color:var(--tinta-2); font-size:1.08rem}
.secao-escura .intro{color:#D8CCBC}

/* Áreas */
.areas{margin-top:40px; border-top:1px solid var(--tinta)}
.area{display:grid; grid-template-columns:minmax(220px,1fr) 2fr minmax(120px,auto); gap:24px; padding:28px 0; border-bottom:1px solid var(--linha); align-items:baseline}
.area h3{margin:0}
.area p{margin:0; color:var(--tinta-2)}
.area a{white-space:nowrap; font-weight:600}

/* Sobre */
.sobre{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,88px); align-items:start}
.sobre img{border-radius:var(--raio); aspect-ratio:4/5; object-fit:cover}
.formacao{list-style:none; padding:0; margin:28px 0 0; border-top:1px solid var(--linha)}
.formacao li{padding:12px 0; border-bottom:1px solid var(--linha); font-size:1rem}

/* Etapas (sequências reais) */
.etapas{list-style:none; counter-reset:e; padding:0; margin:40px 0 0}
.etapas li{counter-increment:e; display:grid; grid-template-columns:64px 1fr; gap:20px; padding:22px 0; border-top:1px solid rgba(230,217,201,.22)}
.etapas li::before{content:counter(e); font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--caramelo-claro)}
.etapas h3{margin:0 0 6px; font-size:1.25rem}
.etapas p{margin:0; color:#D8CCBC; max-width:60ch}
.etapas.clara li{border-top-color:var(--linha)}
.etapas.clara li::before{color:var(--nogueira)}
.etapas.clara p{color:var(--tinta-2)}

/* Linha do tempo das primeiras 24 horas */
.tempo{position:relative; margin:48px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr)}
.tempo::before{content:""; position:absolute; top:11px; left:0; right:0; height:2px; background:var(--nogueira)}
.tempo li{position:relative; padding:40px 18px 0 0}
.tempo li::before{content:""; position:absolute; top:3px; left:0; width:18px; height:18px; border-radius:50%; background:var(--pedra); border:3px solid var(--nogueira)}
.tempo .quando{display:block; font-size:.85rem; font-weight:600; color:var(--nogueira); margin-bottom:6px}
.tempo h3{font-size:1.15rem; margin-bottom:6px}
.tempo p{font-size:.95rem; color:var(--tinta-2); margin:0}

/* Conteúdo e perguntas */
.colunas{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px)}
.lista-simples{padding-left:1.2em; margin:0}
.lista-simples li{margin-bottom:.6em}
.faq{margin-top:32px; border-top:1px solid var(--tinta); max-width:860px}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer; list-style:none; font-family:var(--serif); font-size:1.25rem; padding:20px 44px 20px 0; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:16px; font-size:1.6rem; color:var(--nogueira); font-family:var(--sans); font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 22px; max-width:var(--medida); color:var(--tinta-2)}
.aviso{font-size:.9rem; color:var(--tinta-2); border-left:3px solid var(--nogueira); padding:4px 0 4px 16px; margin-top:40px; max-width:var(--medida)}

/* Chamada */
.chamada .wrap{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.chamada h2{margin:0 0 8px}
.chamada p{margin:0; color:#D8CCBC; max-width:52ch}

/* Contato */
.contato{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(28px,5vw,64px)}
.contato dl{margin:24px 0 32px}
.contato dt{font-size:.85rem; color:var(--tinta-2); margin-top:18px}
.contato dd{margin:2px 0 0; font-size:1.1rem}
.mapa{border:0; width:100%; min-height:380px; border-radius:var(--raio); background:var(--pedra)}

/* Rodapé */
.rodape{background:var(--oliva); color:#D8CCBC; padding:56px 0; font-size:.9rem}
.rodape .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
.rodape strong{color:#fff; font-family:var(--serif); font-weight:500; font-size:1.2rem; display:block; margin-bottom:6px}
.rodape a{color:var(--areia)}
.rodape p{margin:0 0 .5em}


@media (max-width:900px){
  body{font-size:16px}
  .hero .wrap,.sobre,.colunas,.contato,.rodape .wrap{grid-template-columns:minmax(0,1fr)}
  .retrato{max-width:380px; width:88%; margin-inline:auto}
  .hero-texto{padding-bottom:0}
  .area{grid-template-columns:1fr; gap:8px}
  .sobre img{width:100%; max-width:380px}
  .tempo{grid-template-columns:1fr; padding-left:30px}
  .tempo::before{top:0; bottom:0; left:8px; right:auto; width:2px; height:auto}
  .tempo li{padding:0 0 28px 0}
  .tempo li::before{left:-30px}
  .nav{display:none}
  .menu{display:block; position:relative}
  .menu summary{list-style:none; cursor:pointer; padding:10px 14px; border:1px solid var(--linha); border-radius:var(--raio); font-size:.95rem}
  .menu summary::-webkit-details-marker{display:none}
  .menu nav{position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:8px; min-width:240px; display:flex; flex-direction:column}
  .menu nav a{padding:12px; color:var(--tinta); text-decoration:none}
}

/* Atendimento com foto */
.atendimento{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,6vw,80px); align-items:center}
.foto-atendimento{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--raio)}
@media (max-width:900px){
  .atendimento{grid-template-columns:minmax(0,1fr)}
  .foto-atendimento{max-width:380px}
}

/* Entrada da foto do topo */
@keyframes subir{from{opacity:0; transform:translateY(90px)} to{opacity:1; transform:none}}
@keyframes painel{from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none}}
.retrato img{animation:subir 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.retrato::before{animation:painel 1s ease-out both}

/* Faixa rolante */
.faixa{background:var(--vinho); color:var(--areia); overflow:hidden; padding:18px 0; font-family:var(--serif); font-size:1.2rem}
.faixa-trilho{display:flex; width:max-content; animation:rolar 45s linear infinite}
.faixa-trilho>div{display:flex; align-items:center}
.faixa span{white-space:nowrap; padding:0 26px}
.faixa i{width:7px; height:7px; background:var(--caramelo-claro); transform:rotate(45deg); flex:none}
.faixa:hover .faixa-trilho{animation-play-state:paused}
@keyframes rolar{to{transform:translateX(-50%)}}

/* Botão flutuante do WhatsApp */
.wa-flutuante{position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:40; width:62px; height:62px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 8px 22px rgba(35,28,26,.28); animation:pular 4s ease-in-out 2.5s infinite}
.wa-flutuante svg{width:32px; height:32px}
.wa-flutuante::before{content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1; animation:pulso 2.2s ease-out 2.5s infinite}
.wa-dica{position:absolute; right:74px; top:50%; transform:translateY(-50%); background:#fff; color:var(--tinta); font-size:.9rem; font-weight:600; white-space:nowrap; padding:8px 14px; border-radius:20px; box-shadow:0 4px 14px rgba(26,31,36,.18); opacity:0; animation:dica .5s ease-out 3.5s forwards; pointer-events:none}
@keyframes pular{0%,18%,100%{transform:translateY(0)} 5%{transform:translateY(-14px)} 10%{transform:translateY(0)} 14%{transform:translateY(-6px)}}
@keyframes pulso{from{transform:scale(1); opacity:.55} to{transform:scale(1.6); opacity:0}}
@keyframes dica{to{opacity:1}}
@media (max-width:900px){ .wa-dica{display:none} .wa-flutuante{right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px))} }

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

/* Serviços em blocos alternados */
.servicos-topo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:end}
.servicos-topo p{margin:0; color:var(--tinta-2); font-family:var(--serif); font-size:1.18rem; line-height:1.65}
.servico{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:center; padding:clamp(40px,5vw,64px) 0; border-top:1px solid var(--linha)}
.servico:first-of-type{margin-top:48px; border-top:1px solid var(--tinta)}
.servico:nth-of-type(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.servico:nth-of-type(even) .painel{order:2}
.painel{position:relative; overflow:hidden; min-height:340px; padding:32px 34px; border-radius:var(--raio); color:var(--areia); display:flex; flex-direction:column; justify-content:space-between}
.painel::after{content:"§"; position:absolute; right:-14px; bottom:-78px; font-family:var(--serif); font-size:17rem; line-height:1; color:rgba(230,217,201,.1)}
.painel small{font-size:.88rem; letter-spacing:.02em; color:var(--caramelo-claro)}
.painel strong{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.1; max-width:12ch; color:#FBF6EF; position:relative; z-index:1}
.painel-floresta{background:var(--garrafa)}
.painel-vinho{background:var(--vinho)}
.painel-oliva{background:var(--oliva)}
.painel-caramelo{background:var(--nogueira)}
.painel-caramelo small{color:var(--areia)}
.servico h3{font-size:clamp(1.5rem,2.4vw,1.9rem); margin-bottom:.6em}
.servico .texto p{font-size:1.1rem; color:var(--tinta)}
.servico .acoes{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin-top:8px}
.link-tema{font-weight:600; color:var(--garrafa); text-decoration:none; border-bottom:1px solid var(--nogueira); padding-bottom:2px}
.link-tema:hover{color:var(--nogueira)}
@media (max-width:900px){
  .servicos-topo,.servico{grid-template-columns:minmax(0,1fr)}
  .servico:nth-of-type(even) .painel{order:0}
  .painel{min-height:220px}
}
.secao-escura .btn-claro{color:var(--garrafa)}

/* Galeria do escritório */
.galeria{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,3vw,32px); margin-top:40px}
.galeria figure{margin:0}
.galeria img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--raio)}
.galeria figcaption{margin-top:10px; font-size:.92rem; color:var(--tinta-2)}
@media (max-width:640px){ .galeria{grid-template-columns:minmax(0,1fr)} }

/* Logo */
.marca{flex-direction:row; align-items:center; gap:12px}
.marca img{height:44px; width:auto; flex:none}
.marca-texto{display:flex; flex-direction:column; line-height:1.15}
.rodape-logo{width:170px; height:auto; margin-bottom:18px}
@media (max-width:420px){ .marca img{height:38px} .marca strong{font-size:1.2rem} }
@media (max-width:900px){ .marca-texto>span{font-size:.72rem; white-space:nowrap} }