/* ============================================================
   KEYAH — design system v2 · "a fotografia manda"
   Identidade preservada do site original: terracota #A67C65,
   dourado #D4A574, areia #F5F1ED, Cormorant Garamond + Montserrat.
   Estratégia de cor: comprometida — a terracota carrega seções
   inteiras; a areia é o respiro entre elas.
   ============================================================ */

:root{
  --terra:#A67C65;
  --terra-esc:#8B5E4F;      /* texto branco em cima: 5.51:1 */
  --terra-fundo:#7A4F42;    /* seções drenadas: 6.94:1 */
  --cacau:#2A201C;
  --dourado:#D4A574;
  --dourado-claro:#EBD3B4;

  --areia:#F5F1ED;
  --areia-2:#EFE7DF;
  --papel:#FDFCFB;
  --branco:#FFFFFF;

  --tinta:#33291F;
  --tinta-2:#5E4E45;        /* corpo sobre areia: 7.3:1 */
  --tinta-3:#7D6B61;        /* apoio sobre areia: 4.7:1 */
  --linha:#E2D6CB;
  --linha-clara:rgba(255,255,255,.2);
  --whats:#1FA855;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;

  --saida:cubic-bezier(.16,1,.3,1);       /* ease-out-expo */
  --gutter:clamp(20px,5vw,56px);
  --secao:clamp(80px,12vw,160px);
  --raio:14px;

  --z-flutuante:40; --z-topo:50; --z-dialogo:80;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--areia);color:var(--tinta-2);font-family:var(--sans);
  font-size:16.5px;font-weight:400;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:clip}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--tinta);
  text-wrap:balance;line-height:1.08;letter-spacing:-.012em}
h1{font-size:clamp(2.6rem,5.6vw,4.7rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.7rem)}
h3{font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.16}
p{margin:0;text-wrap:pretty}
em,.it{font-style:italic}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra-esc);text-underline-offset:4px}
button{font:inherit;cursor:pointer}

.env{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.secao{padding-block:var(--secao)}
.lead{font-size:clamp(1.05rem,1.55vw,1.2rem);line-height:1.8;max-width:58ch}
.cor-terra{color:var(--terra-esc)}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--terra-esc);outline-offset:3px;border-radius:4px}
.drenado :where(a,button,summary):focus-visible{outline-color:#fff}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.02em;line-height:1;
  padding:19px 32px;border-radius:999px;border:1px solid transparent;text-decoration:none;
  transition:background .3s var(--saida),color .3s var(--saida),border-color .3s var(--saida),
    transform .3s var(--saida)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .35s var(--saida)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn--cheio{background:var(--terra-esc);color:#fff}
.btn--cheio:hover{background:var(--cacau)}
.btn--linha{border-color:var(--terra-esc);color:var(--terra-esc);background:transparent}
.btn--linha:hover{background:var(--terra-esc);color:#fff}
.btn--claro{background:#fff;color:var(--terra-fundo)}
.btn--claro:hover{background:var(--dourado-claro)}
.btn--fantasma{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--fantasma:hover{background:#fff;color:var(--terra-fundo)}
.elo{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:14.5px;
  color:var(--terra-esc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px;
  background:none;border-top:0;border-inline:0;border-radius:0}
.elo svg{width:16px;height:16px;transition:transform .35s var(--saida)}
.elo:hover svg{transform:translateX(5px)}

/* ---------- cabeçalho ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:var(--z-topo);
  transition:background .4s var(--saida),box-shadow .4s var(--saida)}
.topo--solido{position:sticky;top:0;background:var(--papel);box-shadow:0 1px 0 var(--linha)}
.topo.rolou{background:rgba(253,252,251,.94);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--linha)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:22px;transition:padding .4s var(--saida)}
.topo.rolou .topo__in{padding-block:14px}
.logo{display:block;flex:none}
.logo img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(22px,2.8vw,40px)}
.nav a{position:relative;font-size:14px;font-weight:500;color:var(--tinta);text-decoration:none;
  padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--terra-esc);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--saida)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.topo__acoes{display:flex;align-items:center;gap:10px}
.topo .btn{padding:14px 24px;font-size:13.5px}
.menu-btn{display:none;background:none;border:0;padding:10px;color:var(--tinta);margin-right:-10px}
.menu-btn svg{width:26px;height:26px;display:block}

/* ---------- hero: a foto é o layout ---------- */
.hero{position:relative;isolation:isolate;min-height:clamp(640px,96svh,940px);
  display:flex;align-items:center;overflow:clip}
.hero__foto{position:absolute;inset:0;z-index:-2}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:68% 32%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(245,241,237,.96) 0%,rgba(245,241,237,.9) 30%,
    rgba(245,241,237,.5) 48%,rgba(245,241,237,0) 66%)}
.hero::after{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;
  background:linear-gradient(180deg,rgba(245,241,237,.9) 0%,rgba(245,241,237,.55) 45%,rgba(245,241,237,0) 100%)}
.hero__texto{max-width:600px;padding-block:128px 64px}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .l>span{display:block}
.hero h1 .it{color:var(--terra-esc)}
.hero .lead{margin-top:24px;color:var(--tinta);max-width:46ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:34px}
.hero__cred{margin-top:clamp(32px,4.4vw,52px);padding-top:22px;border-top:1px solid rgba(51,41,31,.22);
  font-size:13.5px;line-height:1.65;color:var(--tinta);max-width:46ch}
.hero__cred strong{font-weight:600}

/* ---------- faixa ---------- */
.faixa{background:var(--terra-fundo);color:#F6E9DD;overflow:hidden;padding-block:20px}
.faixa__trilho{display:flex;gap:64px;width:max-content;animation:faixa 46s linear infinite}
.faixa span{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.7rem);font-style:italic;
  white-space:nowrap;display:flex;align-items:center;gap:64px}
.faixa span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--dourado)}
@keyframes faixa{to{transform:translateX(-50%)}}

/* ---------- sobre ---------- */
.sobre{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,110px);
  align-items:center}
.sobre__foto{position:relative}
.sobre__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:var(--raio)}
.sobre__texto{display:grid;gap:22px}
.sobre__texto h2{margin-bottom:6px}
.citacao{margin:18px 0 0;padding-top:30px;border-top:1px solid var(--linha)}
.citacao p{font-family:var(--serif);font-style:italic;color:var(--terra-esc);
  font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.28}
.citacao cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:var(--tinta-3)}

/* ---------- atendimentos: linhas, não cartões ---------- */
.atend{background:var(--papel)}
.atend__cab{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(40px,6vw,80px)}
.atend__cab p{max-width:40ch}
.servico{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,6vw,96px);align-items:center;padding-block:clamp(36px,5.5vw,72px);
  border-top:1px solid var(--linha)}
.servico:nth-of-type(even) .servico__foto{order:2}
.servico__foto{overflow:hidden;border-radius:var(--raio)}
.servico__foto img{width:100%;aspect-ratio:5/4;object-fit:cover;
  transition:transform 1.2s var(--saida)}
.servico:hover .servico__foto img{transform:scale(1.04)}
.servico__texto{display:grid;gap:18px;justify-items:start}
.servico__sub{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--terra-esc);
  line-height:1.2}
.servico__lista{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:0;width:100%}
.servico__lista li{padding-block:13px;border-top:1px solid var(--linha);font-size:15.5px;
  color:var(--tinta)}
.servico__lista li:last-child{border-bottom:1px solid var(--linha)}

/* ---------- método: seção drenada ---------- */
.drenado{background:var(--terra-fundo);color:#F3E4D8}
.drenado h2,.drenado h3{color:#fff}
.metodo__cab{max-width:34ch;margin-bottom:clamp(44px,7vw,92px)}
.metodo__cab h2 .it{color:var(--dourado-claro)}
.metodo__col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.metodo__col>div{padding:6px clamp(20px,3vw,44px) 6px 0;display:grid;gap:16px;align-content:start}
.metodo__col>div+div{padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--linha-clara)}
.metodo__col p{font-size:16px;line-height:1.75}

/* ---------- o que você busca ---------- */
.busca{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,7vw,110px);
  align-items:start}
.busca__cab{position:sticky;top:120px;display:grid;gap:22px;justify-items:start}
.busca__lista{list-style:none;margin:0;padding:0}
.busca__lista li{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.2;
  color:var(--tinta);padding-block:clamp(18px,2.4vw,28px);border-top:1px solid var(--linha);
  transition:color .4s var(--saida),padding-left .5s var(--saida)}
.busca__lista li:last-child{border-bottom:1px solid var(--linha)}
.busca__lista li:hover{color:var(--terra-esc);padding-left:14px}

/* ---------- dúvidas ---------- */
.duvidas{background:var(--papel)}
.duvidas__grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(32px,7vw,110px);align-items:start}
.duvidas__cab{position:sticky;top:120px;display:grid;gap:22px;justify-items:start}
.faq details{border-top:1px solid var(--linha)}
.faq details:last-child{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:24px;padding-block:26px;font-family:var(--serif);
  font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.22;color:var(--tinta);
  transition:color .3s var(--saida)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--terra-esc)}
.faq .mais{width:22px;height:22px;flex:none;color:var(--terra-esc);
  transition:transform .5s var(--saida)}
.faq details[open] .mais{transform:rotate(45deg)}
.faq__r{padding:0 46px 30px 0;max-width:62ch;font-size:16px;line-height:1.8}

/* ---------- chamada final ---------- */
.final{position:relative;isolation:isolate;overflow:clip;color:#fff;text-align:center;
  padding-block:clamp(110px,16vw,210px)}
.final__foto{position:absolute;inset:0;z-index:-2}
.final__foto img{width:100%;height:100%;object-fit:cover;object-position:18% 60%;
  transform:scale(1.15)}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(92,54,43,.74)}
.final h2{color:#fff;max-width:17ch;margin-inline:auto;font-size:clamp(2.4rem,5.6vw,4.6rem)}
.final h2 .it{color:var(--dourado-claro)}
.final p{max-width:44ch;margin:26px auto 40px;font-size:1.1rem;color:#F6E9DD}
.final__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- rodapé ---------- */
.rodape{background:var(--cacau);color:#C9B8AC;padding-top:clamp(64px,9vw,120px)}
.rodape a{color:#E6D7CB;text-decoration:none;transition:color .3s var(--saida)}
.rodape a:hover{color:var(--dourado)}
.rodape__alto{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,2fr) minmax(0,3fr);
  gap:clamp(32px,6vw,90px);padding-bottom:clamp(48px,7vw,88px)}
.rodape__frase{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.14;
  color:#fff;max-width:15ch}
.rodape__frase .it{color:var(--dourado)}
.rodape__t{font-size:13px;font-weight:600;color:#fff;margin:0 0 20px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;font-size:15px}
.rodape__marca{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding-block:30px;border-top:1px solid rgba(255,255,255,.12)}
.rodape__marca img{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.rodape__aviso{font-size:13.5px;line-height:1.7;max-width:64ch;color:#B5A397}
.rodape__aviso strong{color:#E6D7CB;font-weight:500}
.rodape__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:22px 30px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#9D8C81}

/* ---------- whatsapp flutuante ---------- */
.flutuante{position:fixed;right:clamp(16px,2.6vw,30px);bottom:clamp(16px,2.6vw,30px);
  z-index:var(--z-flutuante);width:58px;height:58px;border-radius:50%;background:var(--whats);
  display:grid;place-items:center;color:#fff;box-shadow:0 10px 28px -8px rgba(20,90,45,.6);
  transition:transform .4s var(--saida)}
.flutuante:hover{transform:translateY(-4px)}
.flutuante svg{width:29px;height:29px}

/* ---------- diálogo de contato ---------- */
.dlg{border:0;padding:0;overflow:hidden;border-radius:20px;background:var(--papel);color:var(--tinta-2);
  width:min(640px,calc(100vw - 28px));max-height:min(92svh,860px);
  box-shadow:0 40px 100px -30px rgba(42,32,28,.55)}
.dlg::backdrop{background:rgba(42,32,28,.55);backdrop-filter:blur(5px)}
.dlg[open]{animation:dlg .5s var(--saida)}
@keyframes dlg{from{opacity:0;transform:translateY(22px) scale(.98)}}
.dlg__in{padding:clamp(26px,4.4vw,46px);overflow-y:auto;max-height:inherit}
.dlg__cab{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:8px}
.dlg__cab h2{font-size:clamp(1.9rem,4vw,2.5rem)}
.dlg__x{background:none;border:0;padding:8px;margin:-8px -8px 0 0;color:var(--tinta-3);
  border-radius:50%;transition:color .3s,background .3s}
.dlg__x:hover{color:var(--tinta);background:var(--areia-2)}
.dlg__x svg{width:22px;height:22px;display:block}
.dlg__sub{margin-bottom:28px;font-size:15.5px}
.grupo{border:0;margin:0 0 24px;padding:0;min-width:0}
.grupo legend,.campo label{display:block;padding:0;margin-bottom:10px;font-size:14.5px;
  font-weight:500;color:var(--tinta)}
.grupo legend small{font-weight:400;color:var(--tinta-3);font-size:13.5px}
.opcoes{display:flex;flex-wrap:wrap;gap:9px}
.opcao{position:relative}
.opcao input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opcao span{display:block;padding:11px 18px;border:1px solid var(--linha);border-radius:999px;
  font-size:14.5px;color:var(--tinta);background:var(--branco);
  transition:background .3s var(--saida),color .3s var(--saida),border-color .3s var(--saida)}
.opcao input:hover+span{border-color:var(--terra)}
.opcao input:checked+span{background:var(--terra-esc);border-color:var(--terra-esc);color:#fff}
.opcao input:focus-visible+span{outline:2px solid var(--terra-esc);outline-offset:3px}
.campo{margin-bottom:20px}
.campo input,.campo textarea,.campo select{width:100%;font:inherit;font-size:16px;color:var(--tinta);
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:14px 16px;
  transition:border-color .3s var(--saida),box-shadow .3s var(--saida)}
.campo textarea{min-height:104px;resize:vertical;line-height:1.65}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--terra-esc);
  box-shadow:0 0 0 4px rgba(139,94,79,.14)}
.campo.erro input,.campo.erro textarea{border-color:#A03B2B}
.msg-erro{display:none;font-size:13.5px;color:#A03B2B;margin-top:7px}
.erro .msg-erro,.grupo.erro .msg-erro{display:block}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.dlg__pe{font-size:13px;color:var(--tinta-3);line-height:1.6;margin:4px 0 22px}
.dlg .btn{width:100%}
.dlg__ok{text-align:center;padding-block:28px 12px}
.dlg__ok svg{width:54px;height:54px;color:var(--terra-esc);margin:0 auto 22px;display:block}
.dlg__ok h2{margin-bottom:12px}

/* ---------- movimento ---------- */
@media(prefers-reduced-motion:no-preference){
  .anima .hero h1 .l>span{transform:translateY(105%);animation:sobe 1.15s var(--saida) forwards}
  .anima .hero h1 .l:nth-child(2)>span{animation-delay:.09s}
  .anima .hero h1 .l:nth-child(3)>span{animation-delay:.18s}
  .anima .hero .lead,.anima .hero__ctas,.anima .hero__cred{opacity:0;animation:surge 1.1s var(--saida) .5s forwards}
  .anima .hero__ctas{animation-delay:.62s}
  .anima .hero__cred{animation-delay:.76s}
  .anima .hero__foto img{animation:assenta 2.4s var(--saida) both}
  .anima .ver{opacity:0;transform:translateY(26px);
    transition:opacity 1s var(--saida),transform 1.1s var(--saida)}
  .anima .ver.visto{opacity:1;transform:none}
  .anima .ver-foto{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--saida)}
  .anima .ver-foto.visto{clip-path:inset(0)}
  @keyframes sobe{to{transform:none}}
  @keyframes surge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes assenta{from{transform:scale(1.08)}to{transform:none}}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .faixa__trilho{animation:none}
}

/* ---------- responsivo ---------- */
@media(max-width:960px){
  .nav{display:none}
  .menu-btn{display:block}
  .nav.aberto{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--papel);padding:6px var(--gutter) 22px;
    box-shadow:0 24px 40px -24px rgba(42,32,28,.35)}
  .nav.aberto a{padding-block:17px;border-bottom:1px solid var(--linha);font-size:16px}
  .topo:has(.nav.aberto){background:var(--papel)}
  .sobre,.servico,.busca,.duvidas__grade{grid-template-columns:1fr}
  .servico:nth-of-type(even) .servico__foto{order:0}
  .busca__cab,.duvidas__cab{position:static}
  .metodo__col{grid-template-columns:1fr}
  .metodo__col>div,.metodo__col>div+div{padding:26px 0;border-left:0;
    border-top:1px solid var(--linha-clara)}
  .rodape__alto{grid-template-columns:1fr 1fr}
  .rodape__frase{grid-column:1/-1}
  .sobre__foto{max-width:520px}
}
@media(max-width:700px){
  .hero{display:block;min-height:0}
  .hero__foto{position:relative;display:block;height:min(62svh,520px);z-index:0}
  .hero__foto img{object-position:72% 22%}
  .hero::before{inset:auto 0 auto 0;top:calc(min(62svh,520px) - 150px);height:151px;z-index:1;
    background:linear-gradient(180deg,rgba(245,241,237,0) 0%,rgba(245,241,237,1) 100%)}
  .hero::after{z-index:1;height:120px}
  .hero__texto{position:relative;z-index:2;margin-top:-56px;padding-block:0 52px}
  .hero__ctas .btn{width:100%}
  .hero__cred{margin-top:32px}
  .topo .btn{display:none}
  .logo img{height:36px}
  .dupla{grid-template-columns:1fr}
  .faq__r{padding-right:0}
  .rodape__alto{grid-template-columns:1fr}
  .final__ctas .btn{width:100%}
}