/* ===========================================================================
   FUNERARIA SANTA ISABEL — folha de estilo unica do site

   PALETA
     Espresso  #2C1B0E   base escura (fundo das secoes escuras, texto no claro)
     Cocoa     #4D3221   superficie elevada sobre a base (cartoes)
     Stone     #685543   bordas no escuro e texto de apoio no claro
     Almond    #9E8975   etiquetas, linhas e apoio
     Ivory     #F8F4EE   fundo claro quente, cartao do rodape
     Branco    #ffffff   secoes claras
     Acento    #9E8975   Almond: botoes, icones, hover, barra de rolagem
     Acento/tx #4D3221   Cocoa: o acento quando e TEXTO sobre fundo claro

   TIPOGRAFIA
     General Sans no texto geral; Georgia so no nome da marca no cabecalho.

   Ordem do arquivo:
     01. tokens        06. our work
     02. base/reset    07. solutions (cards sticky)
     03. utilitarios   08. projects
     04. header        09. why choose us
     05. hero          10. testimonials / faq / blogs / footer
   =========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root{
  --ink:      #2C1B0E;   /* Espresso — base escura */
  --ink-2:    #4D3221;   /* Cocoa — cartao sobre a base escura */
  --ink-3:    #685543;   /* Stone — borda sutil no escuro */
  /* Acento. Guarda o nome --gold por historico; o valor agora e Almond.
     Usado como PREENCHIMENTO (botao, selo) com texto escuro por cima. */
  --gold:     #9E8975;   /* Almond — acento */
  --gold-2:   #B5A190;   /* Almond claro — hover do acento */

  /* Acento como TEXTO sobre fundo claro: Almond reprovaria em contraste
     (2,8:1 sobre branco), entao ali usamos Cocoa. */
  --acento-2: #4D3221;   /* Cocoa — acento sobre fundo claro */

  --sand:     #C0AF9C;   /* Almond claro — apoio, linhas, texto secundario */
  --on-gold:  #2C1B0E;   /* texto sobre o acento */

  --paper:    #ffffff;
  --paper-2:  #F8F4EE;   /* Ivory — cartao do rodape */
  --mist:     #F1EAE0;   /* Ivory rebaixado — fundo dos acordeoes */

  --muted:    #DED3C7;   /* texto secundario no escuro (quente) */
  --muted-2:  #9E8975;   /* Almond — texto pequeno no escuro */

  --shell:    1200px;    /* largura maxima do container */
  --gutter:   16px;
  --nav-h:    96px;      /* altura da faixa do cabecalho */
  --r-card:   16px;
  --r-lg:     24px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* serifa da marca — conversa com o letreiro da logo */
  --serif-marca: Georgia, "Times New Roman", "Droid Serif", serif;
}

/* ------------------------------------------------------------ 02 base/reset */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  scrollbar-color: var(--gold) var(--ink);   /* Firefox */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  /* General Sans (Fontshare). A pilha de sistema fica como reserva, para
     o texto nao ficar sem fonte enquanto a webfont carrega. Para o
     PageSpeed final: auto-hospedar o .woff2 e cortar a requisicao. */
  font-family:"General Sans","General Sans Placeholder",
              -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:500; }
ul{ margin:0; padding:0; list-style:none; }

/* barra de rolagem fininha, nas cores da marca */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-2); }

/* selecao de texto nas cores da marca */
::selection{ background:var(--gold); color:var(--on-gold); }
::-moz-selection{ background:var(--gold); color:var(--on-gold); }

/* Lenis (smooth scroll) — regras que a lib pede para nao brigar com o CSS.
   O scroll-behavior nativo precisa sair do caminho: quem conduz e o Lenis. */
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--on-gold);
  padding:12px 20px; border-radius:0 0 12px 0; font-weight:500;
}
.skip-link:focus{ left:0; }

/* -------------------------------------------------------- 03 utilitarios */
.container{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

/* tipografia do layout original, remapeada em classes */
.h1{ font-size:48px; line-height:1.2;  font-weight:600; }
.h2{ font-size:32px; line-height:1.4;  font-weight:500; }
.h3{ font-size:48px; line-height:1;    font-weight:400; }
.h4{ font-size:22px; line-height:1.4;  font-weight:500; letter-spacing:.44px; }
.h5{ font-size:18px; line-height:1.4;  font-weight:500; letter-spacing:-.72px; }
.h6{ font-size:16px; line-height:1.4;  font-weight:500; letter-spacing:-.32px; }
.lead{ font-size:18px; line-height:1.3; font-weight:400; }
.body{ font-size:16px; line-height:1.8; letter-spacing:-.32px; }
.small{ font-size:14px; line-height:1.2; }
.tiny{ font-size:12px; line-height:1.2; font-weight:500; }

/* etiqueta redonda de secao ("About us", "Solutions"...) */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:100px;
  font-size:14px; line-height:1.2;
  background:rgba(44,27,14,.08); color:var(--ink);
  width:max-content;
}
.on-dark .tag{ background:rgba(255,255,255,.12); color:#fff; }

/* botao: o preenchimento escuro sobe de baixo no hover (como no original) */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; border-radius:32px;
  font-size:18px; line-height:1.4; font-weight:500;
  border:0; cursor:pointer;
  transition:color .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before{ transform:translateY(0); }

.btn-primary{ background:var(--gold); color:var(--on-gold); }
.btn-primary:hover,
.btn-primary:focus-visible{ color:var(--gold); }

/* ---------------------------------------------------- revelacao no scroll
   Medido no layout de referencia:
     - texto das secoes  -> so opacidade, sem deslocamento;
     - hero              -> entra deslizando 250px da esquerda;
     - esteira de depoimentos -> empurrao curto de 8px.
   So entra em cena se o JS estiver de pe: quem chega sem JS
   (crawler, agente, leitor de tela) ve tudo pronto. */
.js .reveal{ opacity:0; }
.js .reveal.is-in{ opacity:1; transition:opacity .8s var(--ease); }

/* hero: deslize longo vindo da esquerda */
.js .reveal--left{ opacity:.001; transform:translateX(-250px); }
.js .reveal--left.is-in{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}

/* esteira de depoimentos: so um empurrao */
.js .reveal--nudge{ opacity:0; transform:translateX(-8px); }
.js .reveal--nudge.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* fundo do hero: abre com um leve afastamento de zoom */
.js .hero__bg{ opacity:0; transform:scale(1.2); }
.js .hero__bg.is-in{
  opacity:1; transform:none;
  transition:opacity 1.2s var(--ease), transform 1.6s var(--ease);
}

/* Entrada das imagens: leve afastamento de zoom, mesmo gesto do fundo do
   hero (que no original sai de scale(1.2)). A moldura .media corta o
   excedente para o zoom nao vazar do canto arredondado. */
.media{ display:block; overflow:clip; border-radius:var(--r-card); }
.media > img{ display:block; width:100%; height:100%; object-fit:cover; }

.js .reveal--zoom{ opacity:0; transform:scale(1.08); }
.js .reveal--zoom.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}

/* Icones do About: entram crescendo, com um retoque elastico no fim,
   e reagem ao hover do bloco. */
.js .stat__icon{ opacity:0; transform:scale(.6); }
.js .stat.is-in .stat__icon{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease),
             transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay:.15s;
}
.stat__icon svg{ transition:transform .45s var(--ease); }
.stat:hover .stat__icon svg{ transform:scale(1.12) rotate(-6deg); }

.js .reveal.d1{ transition-delay:.10s; }
.js .reveal.d2{ transition-delay:.20s; }
.js .reveal.d3{ transition-delay:.30s; }
.js .reveal.d4{ transition-delay:.40s; }

/* Movimento reduzido: tira o DESLOCAMENTO, mantem o fade.
   Antes aqui tinha um "*{transition-duration:.01ms !important}" que zerava
   o site inteiro — inclusive hover de botao, roll do menu e esteiras. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  .js .reveal,
  .js .reveal--left,
  .js .reveal--nudge,
  .js .hero__bg{ opacity:0; transform:none; }

  .js .reveal.is-in,
  .js .reveal--left.is-in,
  .js .reveal--nudge.is-in,
  .js .hero__bg.is-in{
    opacity:1; transform:none;
    transition:opacity .4s linear;
  }

  /* imagens e icones: fica o fade, sai o zoom */
  .js .reveal--zoom{ opacity:0; transform:none; }
  .js .reveal--zoom.is-in{ opacity:1; transform:none; transition:opacity .4s linear; }
  .js .stat__icon{ opacity:0; transform:none; }
  .js .stat.is-in .stat__icon{ opacity:1; transform:none; transition:opacity .4s linear; }
  .stat:hover .stat__icon svg{ transform:none; }

  /* esteiras param de correr */
  .marquee ul,
  .logo-strip ul{ animation:none; }

  /* hover sem deslize: fica so a troca de cor */
  .nav-link:hover .roll > span,
  .nav-link:focus-visible .roll > span{ transform:none; }
  .btn::before{ transition:none; }
}

/* ------------------------------------------------------------- 04 header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:16px 0;
  transition:transform .45s var(--ease);
}
.site-header .container{ padding-inline:80px; }
.site-header.is-hidden{ transform:translateY(-140%); }

.nav-pill{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:64px; padding:8px 8px 8px 24px;
  background:var(--ink-2); border-radius:40px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.nav-logo{ display:flex; align-items:center; flex:0 0 auto; gap:11px; }
.nav-logo img{ width:38px; height:38px; object-fit:contain; flex:0 0 auto; }

.nav-burger{ display:none; }                   /* hamburguer so no mobile com JS */
.nav-links{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.nav-links > ul{ display:flex; align-items:center; gap:16px; }

/* Link do menu: no hover o texto rola PARA BAIXO e a copia identica,
   que espera uma linha acima, desce para o lugar dele.
   (medido no original: os dois filhos recebem o mesmo translateY(+21.6px)) */
.nav-link{ display:inline-flex; align-items:center; }
.nav-link .roll{ position:relative; display:block; overflow:hidden; height:21px; }
.nav-link .roll > span{
  display:block; height:21px;
  font-size:16px; line-height:21px; font-weight:500; letter-spacing:-.32px;
  color:#fff;
  transition:transform .42s var(--ease), color .42s var(--ease);
}
.nav-link .roll > span + span{ position:absolute; top:-21px; left:0; }
.nav-link:hover .roll > span,
.nav-link:focus-visible .roll > span{ transform:translateY(21px); color:var(--gold); }

.nav-link--dark .roll > span{ color:var(--ink); }
.nav-link--dark:hover .roll > span,
.nav-link--dark:focus-visible .roll > span{ color:var(--gold); }

.nav-cta{ flex:0 0 auto; }
.nav-cta-mobile{ display:none; }

/* ---------------------------------------------------------------- 05 hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--nav-h) + 48px);
  color:#fff;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.hero__scrim{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.65); }
.hero .container{ position:relative; z-index:2; }

.hero__inner{ display:flex; flex-direction:column; gap:40px; }

.hero__title{ max-width:550px; display:flex; flex-direction:column; gap:40px; }
.hero__text{ display:flex; flex-direction:column; gap:16px; }
.hero h1{ color:#fff; }
.hero__text p{ color:#fff; }

.hero__proof{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  padding:32px 0;
}
.hero__proof-left{ display:flex; flex-direction:column; gap:16px; }
.hero__proof-left h2{ color:var(--muted-2); font-size:16px; line-height:1.4;
                      font-weight:500; letter-spacing:-.32px; }

/* faixa de logotipos que corre sozinha */
.logo-strip{
  width:450px; max-width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.logo-strip ul{ display:flex; align-items:center; gap:32px; width:max-content;
                animation:strip 22s linear infinite; }
.logo-strip img{ height:28px; width:auto; opacity:.7; filter:grayscale(1) brightness(2.2); }
@keyframes strip{ to{ transform:translateX(-50%); } }
.logo-strip:hover ul{ animation-play-state:paused; }

.hero__features{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.hero__features li{
  display:flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:12px;
  background:rgba(158,137,117,.22);
  font-size:14px; line-height:1.2;
}

/* --------------------------------------------------------------- 06 about */
.about{
  max-width:var(--shell); margin-inline:auto;
  position:relative; z-index:3;
  background:var(--paper);
  border-radius:80px 80px 0 0;
  padding:104px var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:80px;
}
.about__head{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.about__head h2{ max-width:800px; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.stat{ display:flex; flex-direction:column; gap:32px; padding:24px 16px; }
.stat__icon{
  width:60px; height:60px; border-radius:100px;
  background:var(--ink); color:var(--gold);
  display:grid; place-items:center;
}
.stat__icon svg{ width:28px; height:28px; }
.stat__body{ display:flex; flex-direction:column; gap:24px; }
.stat h3 small{ display:block; font-size:inherit; line-height:inherit; }

/* ------------------------------------------------------------ 06 our work */
.work{ background:var(--ink); color:#fff; padding:104px 0; }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:center; }
.work__intro{ display:flex; flex-direction:column; gap:16px; }
.work__intro h2, .work__intro p{ color:#fff; }
.work__photo{ width:100%; aspect-ratio:368/419; object-fit:cover; border-radius:var(--r-card); }
.work__steps{ display:flex; flex-direction:column; gap:24px; }
.step{ display:flex; gap:8px; }
.step__n{ color:var(--gold); font-size:16px; line-height:1.3; flex:0 0 auto; min-width:26px; }
.step__body{ display:flex; flex-direction:column; gap:8px; }
.step__body h3{ font-size:18px; line-height:1.3; font-weight:400; }
.step__body p{ color:var(--muted); }

/* ------------------------------------------- 07 solutions (cards sticky) */
.solutions{ background:var(--paper); padding:104px 0; }
.solutions__grid{ display:grid; grid-template-columns:350px 1fr; gap:80px; align-items:start; }

.solutions__intro{
  position:sticky; top:calc(var(--nav-h) + 32px);
  display:flex; flex-direction:column; gap:40px;
}
.solutions__intro .inner{ display:flex; flex-direction:column; gap:16px; }
.solutions__intro h2, .solutions__intro p{ max-width:300px; }

.solutions__list{ display:flex; flex-direction:column; gap:24px; }
/* cada cartao gruda no mesmo topo: eles se empilham um sobre o outro */
.solution{ position:sticky; top:120px; }
.solution__row{ display:grid; grid-template-columns:235px 1fr; gap:8px; min-height:200px; }
.solution__img{ width:100%; height:100%; min-height:200px; object-fit:cover; border-radius:var(--r-card); }
.solution__body{
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:32px 24px; border-radius:var(--r-card);
  background:var(--gold); color:var(--on-gold);
}

/* ------------------------------------------------------------ 08 projects */
.projects{ background:var(--ink); color:#fff; padding:104px 0; }
.projects__head{ display:flex; flex-direction:column; align-items:center; gap:16px;
                 text-align:center; margin-bottom:80px; }
.projects__head h2{ color:#fff; max-width:300px; }
.projects__list{ display:flex; flex-direction:column; gap:16px; }

.project{ background:var(--ink-2); border-radius:var(--r-lg); padding:32px;
          transition:background .35s var(--ease); }
.project:hover{ background:#5C4231; }
.project__row{ display:grid; grid-template-columns:331px 1fr; gap:32px; padding:24px 0; align-items:center; }
.project__img{ width:100%; height:100%; min-height:243px; object-fit:cover; border-radius:var(--r-card); }
.project__body{ display:flex; flex-direction:column; gap:40px; }
.project__text{ display:flex; flex-direction:column; gap:8px; }
.project__place, .project__text h3{ color:#fff; }
.project__text p{ color:var(--muted); }
.project .btn{ align-self:flex-start; }

/* ------------------------------------------------------- 09 why choose us */
.why{ background:var(--paper); padding:104px 0; }
.why__grid{ display:grid; grid-template-columns:1fr 520px; gap:24px; align-items:end; }
.why__left{ display:flex; flex-direction:column; gap:40px; }
.why__head{ display:flex; flex-direction:column; gap:16px; }

.why__media{ position:relative; aspect-ratio:520/616; border-radius:var(--r-lg); overflow:hidden; }
.why__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease);
}
.why__media img.is-on{ opacity:1; }

/* acordeao nativo: <details> — abre sem JS e mantem o texto no DOM */
.acc{ display:flex; flex-direction:column; gap:8px; }
.acc details{ background:var(--mist); border-radius:12px; padding:24px; }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  list-style:none; cursor:pointer; min-height:32px;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary h3{ font-size:16px; line-height:1.4; font-weight:500; letter-spacing:-.32px; }
.acc__icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:100px;
  background:var(--gold); color:var(--on-gold);
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.acc details[open] .acc__icon{ transform:rotate(45deg); }
.acc__icon svg{ width:20px; height:20px; }
.acc__answer p{ padding-top:8px; color:var(--ink-2); max-width:600px; }
/* animacao de abrir/fechar onde o browser ja suporta */
@supports (interpolate-size: allow-keywords){
  .acc details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .4s var(--ease), content-visibility .4s allow-discrete;
  }
  .acc details[open]::details-content{ block-size:auto; }
}

/* -------------------------------------------------------- 10 testimonials */
.testimonials{ background:var(--ink); color:#fff; padding:104px 0; overflow:hidden; }
.testimonials__head{ display:flex; flex-direction:column; align-items:center; gap:16px;
                     text-align:center; margin-bottom:40px; }
.testimonials__head h2{ color:#fff; max-width:300px; }

.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee ul{ display:flex; gap:24px; width:max-content; animation:marq 46s linear infinite; }
.marquee:hover ul{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(calc(-50% - 12px)); } }

.quote{
  width:350px; min-height:420px; flex:0 0 auto;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  padding:32px; border-radius:var(--r-card); background:var(--ink-2);
}
.quote__top{ display:flex; flex-direction:column; gap:32px; }
.quote__avatar{ display:flex; align-items:center; gap:16px; }
.quote__avatar img{ width:48px; height:48px; border-radius:100px; object-fit:cover; }
.quote__stars{ display:flex; gap:4px; color:var(--gold); }
.quote__stars svg{ width:16px; height:16px; }
.quote blockquote{ margin:0; color:#fff; }
.quote__who h3{ color:#fff; font-size:22px; line-height:1.4; font-weight:500; letter-spacing:.44px; }
.quote__who p{ font-size:14px; line-height:1.2; color:var(--muted); }

/* ------------------------------------------------------------------ faq */
.faq{ background:var(--paper); padding:104px 0; }
.faq__grid{ display:grid; grid-template-columns:400px 1fr; gap:16px; align-items:center; }
.faq__head{ display:flex; flex-direction:column; gap:16px; }
.faq__head h2{ max-width:300px; }

/* ---------------------------------------------------------------- blogs */
.blogs{ background:var(--paper); padding:104px 0; }
.blogs__head{ display:flex; flex-direction:column; align-items:center; gap:16px;
              text-align:center; margin-bottom:40px; }
.blogs__head h2{ max-width:300px; }
.blogs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.post{ display:flex; flex-direction:column; gap:8px; }
/* sem zoom no hover: no layout de referencia a imagem do blog e estatica,
   o unico realce e a cor do titulo */
.post__frame{ overflow:clip; border-radius:var(--r-card); }
.post__img{ width:100%; aspect-ratio:373/200; object-fit:cover; }
.post__meta{ display:flex; align-items:center; gap:8px; }
.post__dot{ width:6px; height:6px; border-radius:100px; background:var(--ink); }
.post h3{ transition:color .3s var(--ease); }
.post:hover h3{ color:var(--acento-2); }

/* ---------------------------------------------------------------- footer */
.site-footer{ position:relative; padding:104px 0; background:var(--ink); overflow:hidden; }
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:url("/assets/img/fundo-rodape.png") center/cover no-repeat;
  opacity:.55;
}
.site-footer .container{ position:relative; z-index:1; padding-inline:24px; }

.footer-card{
  background:var(--paper-2); border-radius:var(--r-card); padding:40px;
  display:flex; flex-direction:column; gap:80px;
}
.footer-top{ display:flex; flex-direction:column; gap:8px; }
.footer-top p{ max-width:342px; font-size:16px; line-height:1.8; letter-spacing:-.32px; }

.footer-mid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.footer-title{ font-size:18px; line-height:1.4; font-weight:500; letter-spacing:-.72px; }
.footer-quick{ display:flex; flex-direction:column; gap:24px; }
.footer-quick ul{ display:flex; justify-content:space-between; gap:16px; }

.footer-social-contact{ display:flex; justify-content:space-between; gap:40px; }
.footer-social{ display:flex; flex-direction:column; gap:16px; }
.social-list{ display:flex; gap:8px; }
.social-list a{
  width:40px; height:40px; border-radius:100px;
  display:grid; place-items:center; color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.social-list a:hover{ background:var(--gold); color:var(--on-gold); }

.footer-contact{ display:flex; flex-direction:column; gap:16px; }
.footer-contact p{ font-size:16px; line-height:1.8; letter-spacing:-.32px; }
.footer-contact a{ transition:color .3s var(--ease); }
.footer-contact a:hover{ color:var(--acento-2); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:24px; border-top:1px solid rgba(44,27,14,.1);
}
.footer-bottom p{ font-size:14px; line-height:1.2; }
.footer-bottom a{ color:var(--ink); border-bottom:1px solid var(--sand); }
.footer-bottom a:hover{ color:var(--acento-2); }

/* ===========================================================================
   RESPONSIVO
   Os cortes seguem o layout original: acima de 1120 tudo em grade larga,
   entre 1120 e 900 a grade aperta, abaixo de 900 vira coluna unica.
   =========================================================================== */

/* ---------------------------------------------------- ate 1200: respiro lateral */
@media (max-width:1200px){
  .site-header .container,
  .site-footer .container{ padding-inline:24px; }
  .about{ border-radius:56px 56px 0 0; }
}

/* ------------------------------------------------------------- ate 1024 */
@media (max-width:1024px){
  .solutions__grid{ grid-template-columns:300px 1fr; gap:40px; }
  .why__grid{ grid-template-columns:1fr 380px; }
  .faq__grid{ grid-template-columns:300px 1fr; gap:32px; }
  .project__row{ grid-template-columns:280px 1fr; gap:24px; }
  .work__grid{ gap:24px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .blogs__grid{ grid-template-columns:repeat(2,1fr); }
  .footer-mid{ grid-template-columns:1fr; gap:40px; }
}

/* --------------------------------------- ate 900: cabecalho vira hamburguer */
@media (max-width:900px){
  :root{ --nav-h:88px; }

  .site-header .container{ padding-inline:16px; }

  .nav-pill{
    position:relative; flex-wrap:wrap; align-items:center;
    padding:8px 8px 8px 12px; border-radius:40px;
  }

  /* hamburguer: so faz sentido se o JS estiver de pe para abrir/fechar.
     Sem JS ele fica escondido e a lista de links aparece aberta. */
  .js .nav-burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
    width:54px; height:48px; padding:0;
    background:none; border:0; cursor:pointer;
  }
  .nav-burger span{
    display:block; width:30px; height:2px; background:#fff; border-radius:2px;
    transition:transform .35s var(--ease), opacity .25s var(--ease);
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

  .nav-links{
    order:3; flex:1 0 100%;
    flex-direction:column; align-items:stretch; gap:8px;
    padding:8px 12px 16px;
  }
  .js .nav-links{ display:none; }               /* com JS nasce fechado */
  .js .nav-links.is-open{ display:flex; }
  .nav-links > ul{ flex-direction:column; align-items:stretch; gap:4px; }
  .nav-links li a{ display:block; padding:10px 4px; }
  .nav-link .roll{ height:auto; }               /* sem rolagem de texto no toque */
  .nav-link .roll > span:last-child{ display:none; }

  .nav-cta{ display:none; }                     /* o CTA desce para dentro do menu */
  .nav-cta-mobile{ display:inline-flex; margin-top:8px; }

  /* tipografia mobile do layout original */
  .h1{ font-size:32px; line-height:1.2; }
  .h2{ font-size:20px; line-height:1.4; }
  .h3{ font-size:31px; line-height:1; }

  .about{ border-radius:40px 40px 0 0; padding:80px var(--gutter); gap:56px; }
  .about__head h2{ max-width:none; }
  .stats{ grid-template-columns:1fr; gap:8px; }

  .work{ padding:80px 0; }
  .work__grid{ grid-template-columns:1fr; gap:32px; }
  .work__photo{ aspect-ratio:16/10; }

  .solutions{ padding:80px 0; }
  .solutions__grid{ grid-template-columns:1fr; gap:56px; }
  .solutions__intro{ position:static; gap:32px; }
  .solutions__intro h2, .solutions__intro p{ max-width:none; }
  .solution{ position:static; }                 /* sem empilhamento no mobile */
  .solution__row{ grid-template-columns:1fr; gap:8px; }
  .solution__img{ aspect-ratio:358/200; min-height:0; }

  .projects{ padding:80px 0; }
  .projects__head{ margin-bottom:56px; }
  .projects__head h2{ max-width:300px; }
  .project{ padding:24px; }
  .project__row{ grid-template-columns:1fr; gap:32px; padding:8px 0; }
  .project__img{ aspect-ratio:294/300; min-height:0; }
  .project__body{ gap:32px; }

  .why{ padding:80px 0; }
  .why__grid{ grid-template-columns:1fr; gap:32px; }
  .why__media{ order:-1; aspect-ratio:16/11; }

  .testimonials{ padding:80px 0; }
  .quote{ width:300px; min-height:0; padding:24px; }

  .faq{ padding:80px 0; }
  .faq__grid{ grid-template-columns:1fr; gap:32px; }
  .faq__head h2{ max-width:none; }

  .blogs{ padding:80px 0; }
  .blogs__grid{ grid-template-columns:1fr; gap:32px; }

  .site-footer{ padding:80px 0; }
  .site-footer .container{ padding-inline:16px; }
  .footer-card{ padding:24px; gap:40px; }
  .footer-quick ul{ flex-direction:column; gap:4px; }
  .footer-social-contact{ flex-direction:column; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-top p{ max-width:none; }
}

/* ------------------------------------------------------------- ate 560 */
@media (max-width:560px){
  .hero__proof{ flex-direction:column; align-items:flex-start; gap:32px; }
  .hero__features{ gap:12px; }
  .hero__features li{ padding:8px 14px; }
  .logo-strip{ width:100%; }
}

/* ===========================================================================
   BOTAO FIXO DE WHATSAPP — canto inferior direito
   Pedido do briefing. Fica acima de tudo, mas encolhe no mobile para nao
   cobrir conteudo.
   =========================================================================== */
.zap-fixo{
  position:fixed; right:22px; bottom:22px; z-index:150;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px 14px 16px; border-radius:100px;
  background:#25D366; color:#0b2e18;
  font-size:15px; font-weight:600; line-height:1;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.zap-fixo:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,0,0,.34); }
.zap-fixo svg{ flex:0 0 auto; }

@media (max-width:560px){
  .zap-fixo{ right:14px; bottom:14px; padding:13px; }
  .zap-fixo__txt{ display:none; }   /* so o icone no celular */
}

/* faixa de plantao no topo: o telefone e a informacao mais importante do site */
.plantao{
  position:fixed; inset:0 0 auto 0; z-index:101;
  background:var(--ink); border-bottom:1px solid var(--ink-3);
}
.plantao__in{
  display:flex; align-items:center; justify-content:center; gap:16px;
  min-height:38px; flex-wrap:wrap; text-align:center;
}
.plantao__tag{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sand); font-weight:600;
}
.plantao__fone{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; color:var(--gold);
  transition:color .25s var(--ease);
}
.plantao__fone:hover{ color:var(--gold-2); }

/* o cabecalho desce para caber a faixa de plantao */
.site-header{ top:38px; }
:root{ --nav-h:134px; }

@media (max-width:560px){
  .plantao__in{ gap:8px; padding-block:7px; }
  .plantao__tag{ font-size:11px; }
}

/* ===========================================================================
   RODAPE — ajustes de conteudo
   O cartao claro e a estrutura (topo / meio / base) sao os mesmos do layout
   base. O meio ganhou uma terceira coluna porque a funeraria tem mais dados
   obrigatorios: contatos, horario e as duas unidades.
   =========================================================================== */
.footer-mid{ grid-template-columns:1.1fr 1fr 1.1fr; }

.footer-quick ul{ flex-direction:column; justify-content:flex-start; gap:10px; }

.footer-contato{ display:flex; flex-direction:column; gap:11px; }
.footer-contato li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; }
.footer-contato svg{ flex:0 0 auto; color:var(--ink-3); margin-top:5px; }
.footer-contato a{ transition:color .28s var(--ease); }
.footer-contato a:hover{ color:var(--acento-2); }

.footer-title--sep{ margin-top:26px; }
.footer-horario{ font-size:15px; line-height:1.7; }
.footer-horario strong{ color:var(--ink); }

.footer-unidade + .footer-unidade{ margin-top:20px; }
.footer-unidade h3{
  font-size:15px; font-weight:600; margin-bottom:5px;
}
.footer-unidade address{
  font-style:normal; font-size:15px; line-height:1.65; color:#685543;
}
.footer-mapa{
  display:inline-block; margin-top:6px;
  font-size:14px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--sand);
  transition:color .28s var(--ease), border-color .28s var(--ease);
}
.footer-mapa:hover{ color:var(--acento-2); border-bottom-color:var(--acento-2); }

.footer-bottom__links{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.footer-bottom__links a{ border-bottom:1px solid var(--sand); }
.footer-bottom__links a:hover{ color:var(--acento-2); border-bottom-color:var(--acento-2); }
.footer-bottom p{ line-height:1.7; }

@media (max-width:1024px){
  .footer-mid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .footer-mid{ grid-template-columns:1fr; }
}

/* faixa corrida do hero: no lugar de logotipos de cliente (que uma funeraria
   nao tem), os proprios servicos passam correndo */
.strip-item{
  display:inline-block; white-space:nowrap;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sand);
}
.logo-strip ul{ gap:28px; }
.logo-strip li::after{
  content:"·"; margin-left:28px; color:var(--sand); opacity:.55;
}

/* ===========================================================================
   MARCA — icone na pilula, logo cheia no banner
   =========================================================================== */

/* pilula do menu: pomba (icone) + nome ao lado */
.nav-logo__txt{
  display:flex; flex-direction:column; line-height:1.05;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sand); white-space:nowrap;
}
.nav-logo__txt strong{
  font-size:14px; font-weight:600; letter-spacing:.06em; color:#fff;
}
@media (max-width:420px){
  .nav-logo__txt{ display:none; }   /* so a pomba nos telefones estreitos */
}

/* banner: a logo cheia, grande, acima do titulo */
.hero__logo{
  display:block; width:min(430px,78vw); height:auto;
  margin-bottom:8px;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55));
}
@media (max-width:900px){
  .hero__logo{ width:min(330px,80vw); }
}

/* ===========================================================================
   SELO DO GOOGLE — nota real da ficha do Maps
   =========================================================================== */
.google-selo{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 20px; border-radius:100px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.google-selo:hover{ background:rgba(255,255,255,.12); border-color:var(--gold); }
.google-selo__g{ flex:0 0 auto; width:22px; height:22px; }
.google-selo__nota{
  font-size:20px; font-weight:600; color:#fff; line-height:1;
}
.google-selo__estrelas{ display:flex; gap:2px; color:#FBBC04; }
.google-selo__estrelas svg{ width:15px; height:15px; }
.google-selo__txt{ font-size:13px; color:var(--muted); line-height:1.3; }
.google-selo__txt b{ color:#fff; font-weight:600; }

.testimonials__head .google-selo{ margin-top:6px; }

/* cada depoimento leva a fonte real */
.quote__fonte{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; font-size:12px; color:var(--muted-2);
  transition:color .25s var(--ease);
}
.quote__fonte:hover{ color:var(--gold); }
.quote__fonte svg{ width:13px; height:13px; }

/* ===========================================================================
   AJUSTES DE MARCA, TELEFONE E ICONES
   =========================================================================== */

/* Marca na pilula: so o nome, em serifa, para conversar com o letreiro da
   logo. O flaticon (pomba) e exclusivo do icone do site. */
.nav-logo__txt{
  font-family:var(--serif-marca);
  font-size:12px; letter-spacing:.20em;
}
.nav-logo__txt strong{
  font-family:var(--serif-marca);
  font-size:19px; letter-spacing:.05em; margin-top:1px;
}

/* Sem a pomba, esconder o texto deixaria o link da marca vazio.
   No lugar disso, so encolhemos. */
@media (max-width:420px){
  .nav-logo__txt{ display:flex; font-size:10px; letter-spacing:.16em; }
  .nav-logo__txt strong{ font-size:16px; }
}

/* telefone do hero vira link de WhatsApp */
.proof-fone{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--gold); white-space:nowrap;
  transition:color .28s var(--ease);
}
.proof-fone:hover{ color:var(--gold-2); }

/* logo do rodape: estava em 116px, pequena demais para o cartao claro */

/* ------------------------------------------------------- icones animados */

/* Icones do About: as linhas se desenham quando o bloco entra na tela.
   Sao icones de traco, entao stroke-dashoffset da o efeito de escrita. */
.js .stat__icon svg path,
.js .stat__icon svg circle,
.js .stat__icon svg line{
  stroke-dasharray:120;
  stroke-dashoffset:120;
}
.js .stat.is-in .stat__icon svg path,
.js .stat.is-in .stat__icon svg circle,
.js .stat.is-in .stat__icon svg line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease);
  transition-delay:.45s;
}

/* icone do WhatsApp: leve pulsar, para o botao chamar o clique */
.ico-zap{ transform-origin:center; }
@keyframes zap-pulso{
  0%,88%,100%{ transform:scale(1); }
  92%{ transform:scale(1.16); }
  96%{ transform:scale(1.04); }
}
.ico-zap{ animation:zap-pulso 3.6s ease-in-out infinite; }
a:hover > .ico-zap{ animation-play-state:paused; transform:scale(1.14); transition:transform .3s var(--ease); }

/* botao fixo: respira devagar para nao passar despercebido */
@keyframes zap-fixo-brilho{
  0%,100%{ box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.42); }
  55%{ box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 0 14px rgba(37,211,102,0); }
}
.zap-fixo{ animation:zap-fixo-brilho 3.2s ease-out infinite; }
.zap-fixo:hover{ animation-play-state:paused; }

/* icone do acordeao ja gira; aqui so suavizamos a volta */
.acc__icon svg{ transition:transform .35s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .js .stat__icon svg path,
  .js .stat__icon svg circle,
  .js .stat__icon svg line{ stroke-dasharray:none; stroke-dashoffset:0; }
  .ico-zap,
  .zap-fixo{ animation:none; }
}

/* ===========================================================================
   FOTOS QUADRADAS EM MOLDURAS LARGAS
   As imagens novas sao 1254x1254 (quadradas). O cartao de Orientacoes usa
   373x200 (proporcao 1,87), entao um corte centralizado cortaria os rostos.
   Deslocamos o enquadramento para cima, onde estao as pessoas.
   =========================================================================== */
.post__img{ object-position:center 38%; }

/* cartoes de servico (235x200): corte suave, mantem o assunto no centro */
.solution__img > img{ object-position:center 45%; }

/* ===========================================================================
   CARROSSEL DO BANNER
   Duas fotos em fusao cruzada, so com CSS. A primeira nasce visivel, entao
   sem JS (ou com movimento reduzido) o banner continua correto e parado.
   =========================================================================== */
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__slides .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@keyframes hero-troca{
  0%   { opacity:1; }
  44%  { opacity:1; }
  50%  { opacity:0; }
  94%  { opacity:0; }
  100% { opacity:1; }
}
@keyframes hero-aproxima{
  0%   { transform:scale(1.06); }
  100% { transform:scale(1.14); }
}

.hero__slides .hero__bg{
  animation:hero-troca 16s ease-in-out infinite,
            hero-aproxima 16s ease-in-out infinite alternate;
}
.hero__slides .hero__bg:nth-child(2){ animation-delay:-8s, -8s; }

/* a revelacao de entrada do banner nao deve brigar com o carrossel */
.js .hero__slides .hero__bg{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hero__slides .hero__bg{ animation:none; }
  .hero__slides .hero__bg:nth-child(2){ opacity:0; }
}

/* link "Saiba mais" dentro do cartao de servico */
.solution__link{
  display:inline-block; margin-left:4px;
  font-weight:600; color:var(--on-gold);
  border-bottom:1px solid rgba(44,27,14,.45);
  transition:border-color .25s var(--ease);
}
.solution__link:hover{ border-bottom-color:var(--on-gold); }

/* ===========================================================================
   SUBPAGINAS
   Cabecalho interno compacto (no lugar do banner de tela cheia da home),
   trilha de navegacao e blocos de texto corrido.
   =========================================================================== */
.pagina-topo{
  position:relative; isolation:isolate;
  padding:calc(var(--nav-h) + 72px) 0 72px;
  background:var(--ink); color:#fff; overflow:hidden;
}
.pagina-topo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 90% at 22% 12%, rgba(158,137,117,.20), transparent 62%);
}
.pagina-topo__in{ display:flex; flex-direction:column; gap:18px; max-width:760px; }
.pagina-topo h1{ color:#fff; }
.pagina-topo .lead{ color:var(--muted); }
.pagina-topo__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }

/* trilha */
.trilha{ font-size:14px; color:var(--muted-2); }
.trilha ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.trilha li{ display:flex; align-items:center; gap:8px; }
.trilha li+li::before{ content:"/"; color:var(--sand); opacity:.7; }
.trilha a{ color:var(--muted-2); transition:color .25s var(--ease); }
.trilha a:hover{ color:var(--gold); }
.trilha [aria-current]{ color:#fff; }

/* texto corrido das subpaginas */
.prosa{ max-width:72ch; display:flex; flex-direction:column; gap:20px; }
.prosa h2{ margin-top:18px; }
.prosa h3{ font-size:20px; font-weight:600; margin-top:10px; }
.prosa p{ font-size:17px; line-height:1.85; }
.prosa ul{ display:flex; flex-direction:column; gap:12px; }
.prosa ul li{ display:flex; gap:12px; align-items:flex-start; font-size:17px; line-height:1.75; }
.prosa ul li::before{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-top:12px;
  border-radius:50%; background:var(--gold);
}
.prosa strong{ font-weight:600; }
.prosa a:not(.btn){ color:var(--ink); border-bottom:1px solid var(--sand); }
.prosa a:not(.btn):hover{ color:var(--acento-2); border-bottom-color:var(--acento-2); }

/* grade de duas colunas (texto + foto) nas subpaginas */
.dupla{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.dupla .media{ border-radius:var(--r-lg); }
.dupla .media img{ aspect-ratio:4/3; }

/* lista de servicos em grade (pagina de servicos e unidades) */
.grade-servicos{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cartao{
  display:flex; flex-direction:column; gap:12px; height:100%;
  padding:28px 26px; background:var(--paper);
  border:1px solid #E7DDD0; border-radius:var(--r-lg);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cartao:hover{
  border-color:var(--sand); transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(44,27,14,.08);
}
.on-dark .cartao{ background:var(--ink-2); border-color:var(--ink-3); }
.on-dark .cartao:hover{ border-color:var(--gold); }
.cartao__ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--ink); color:var(--gold);
}
.on-dark .cartao__ico{ background:rgba(158,137,117,.14); }
.cartao__ico svg{ width:23px; height:23px; }
.cartao h3{ font-size:19px; font-weight:600; }
.cartao p{ font-size:16px; line-height:1.7; color:var(--ink-3); }
.on-dark .cartao p{ color:var(--muted); }

@media (max-width:1024px){ .grade-servicos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .pagina-topo{ padding:calc(var(--nav-h) + 48px) 0 56px; }
  .dupla{ grid-template-columns:1fr; gap:32px; }
  .grade-servicos{ grid-template-columns:1fr; }
}

/* ===========================================================================
   SUBMENU DE NAVEGACAO
   Os links do submenu ficam SEMPRE no HTML entregue — o hover so muda a
   visibilidade. Assim crawler, leitor de tela e agente leem a navegacao
   inteira, e o teclado alcanca tudo via :focus-within.
   =========================================================================== */
.tem-sub{ position:relative; }

.submenu{
  position:absolute; top:100%; left:-14px; z-index:5;
  min-width:264px; margin-top:12px; padding:10px;
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:var(--r-card);
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.tem-sub:hover > .submenu,
.tem-sub:focus-within > .submenu{ opacity:1; visibility:visible; transform:none; }

.submenu a{
  display:block; padding:10px 14px; border-radius:9px;
  font-size:15px; line-height:1.4; color:#fff;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.submenu a:hover,
.submenu a:focus-visible{ background:rgba(158,137,117,.14); color:var(--gold); }

@media (max-width:900px){
  /* no toque o submenu fica sempre aberto, recuado sob o item pai */
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; margin:2px 0 8px; padding:0 0 0 14px;
    background:none; border:0; border-left:1px solid var(--ink-3);
    border-radius:0; box-shadow:none;
  }
  .submenu a{ padding:9px 8px; font-size:15px; color:var(--muted); }
}

/* ===========================================================================
   CORRECOES DE LEGIBILIDADE E ESPACAMENTO
   =========================================================================== */

/* --- 1. Numeros do bloco "Quem somos" -------------------------------------
   Estavam em 48px com a legenda tambem em 48px, quebrando em duas linhas
   enormes. Agora o numero manda e a legenda vira apoio. */
.stat .h3{ font-size:34px; line-height:1.12; font-weight:500; }
.stat .h3 small{
  display:block; margin-top:6px;
  font-size:13px; font-weight:600; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase;
  color:#685543;
}
.stat__body{ gap:14px; }
.stat p.body{ font-size:15px; line-height:1.7; }

@media (max-width:900px){
  .stat .h3{ font-size:30px; }
}

/* --- 2. Etiquetas de secao ("Quem somos", "Serviços"...) -------------------
   Estavam quase invisiveis: cinza claro sobre claro. Agora tem contorno,
   peso e caixa alta. */
.tag{
  padding:9px 16px;
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  background:rgba(158,137,117,.18);
  color:#4D3221;
  border:1px solid rgba(158,137,117,.45);
}
.on-dark .tag,
.pagina-topo .tag{
  background:rgba(158,137,117,.15);
  color:var(--gold);
  border-color:rgba(158,137,117,.38);
}

/* --- 3. Selo com risco (subpaginas) --------------------------------------
   Faltava no CSS: as subpaginas usavam .selo sem estilo nenhum. */
.selo{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#685543;
}
.selo::before{ content:""; width:28px; height:1px; background:var(--sand); }
.on-dark .selo{ color:var(--gold); }
.on-dark .selo::before{ background:var(--gold); }

/* --- 4. Bloco de chamada final -------------------------------------------
   Faltava no CSS por completo — por isso saia branco, sem espacamento e com
   o texto no cinza padrao do browser. Fundo claro para nao empilhar dois
   blocos escuros antes do rodape. */
.cta{
  background:var(--cream,#F8F4EE);
  border-top:1px solid #E7DDD0;
}
.cta__in{
  display:flex; flex-direction:column; align-items:center;
  gap:20px; text-align:center;
  padding:96px 0 104px;      /* respiro generoso antes do rodape */
}
.cta__in h2{ color:var(--ink); max-width:22ch; }
.cta__in p{ color:#4D3221; max-width:58ch; font-size:17px; line-height:1.8; }
.cta__acoes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; }

/* o segundo botao do par vira contorno, para nao competir com o WhatsApp */
.cta__acoes .btn + .btn{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.cta__acoes .btn + .btn:hover{ color:var(--acento-2); }

/* separa a chamada do rodape */
.site-footer{ border-top:1px solid var(--ink-3); }

@media (max-width:900px){
  .cta__in{ padding:72px 0 80px; }
  .cta__acoes{ width:100%; }
  .cta__acoes .btn{ width:100%; }
}

/* secao de texto+foto das subpaginas */
.secao-dupla{ background:var(--paper); }

/* ===========================================================================
   AJUSTES FINAIS DE LAYOUT
   =========================================================================== */

/* --- Rodape: texto ao lado da logo, nao embaixo ---------------------------
   Empilhado, o bloco comia altura a toa. Lado a lado, a coluna da marca
   fica compacta e o cartao inteiro encurta. */
.footer-top{
  flex-direction:row; align-items:center; gap:26px;
}
/* Logo do rodape: bem maior. Como o bloco e uma linha (logo + texto),
   ela ganha largura fixa e o texto ocupa o resto. */
.footer-logo{
  flex:0 0 auto; width:340px; height:auto;
  object-fit:contain; margin-bottom:0;
}
.footer-top p{ flex:1 1 auto; max-width:52ch; }

@media (max-width:700px){
  /* no celular volta a empilhar, senao a logo espreme o texto */
  .footer-top{ flex-direction:column; align-items:flex-start; gap:14px; }
  .footer-top p{ max-width:none; }
}

/* --- "Quem somos": centralizar no mobile ---------------------------------
   Em coluna unica, o texto alinhado a esquerda com o icone solto em cima
   ficava desequilibrado. */
@media (max-width:900px){
  .stats{ gap:28px; }
  .stat{ align-items:center; text-align:center; padding:8px 4px; }
  .stat__body{ align-items:center; }
  .stat .h3{ text-align:center; }
  .stat p.body{ max-width:34ch; margin-inline:auto; }
}

/* ===========================================================================
   ICONE SOBRE A FOTO DOS SERVICOS (home)
   Mesmo icone da pagina /servicos/, aqui aplicado como selo sobre a imagem.
   Fundo escuro solido garante contraste em qualquer foto — as imagens vao
   de recepcao clara a patio de aeroporto escuro.
   =========================================================================== */
.solution__img{ position:relative; }

.solution__ico{
  position:absolute; z-index:2;
  left:12px; top:12px;
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--ink); color:var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.solution__ico svg{ width:21px; height:21px; }

/* o cartao inteiro reage: o selo cresce junto com o zoom da foto */
.solution:hover .solution__ico{ transform:scale(1.08); background:#1E1108; }

@media (max-width:900px){
  .solution__ico{ left:14px; top:14px; width:46px; height:46px; }
  .solution__ico svg{ width:23px; height:23px; }
}

@media (prefers-reduced-motion: reduce){
  .solution:hover .solution__ico{ transform:none; }
}

/* ===========================================================================
   BOTAO PRINCIPAL EM CLARO
   O acento Almond deixava o botao amarronzado e apagado. Em Ivory ele ganha
   contraste alto sobre as secoes escuras (15,8:1 com o texto Espresso) e o
   contorno garante que ele continue visivel sobre fundo branco/creme.
   =========================================================================== */
.btn-primary{
  background:#F8F4EE;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(44,27,14,.14);
}
/* no hover o preenchimento Espresso sobe e o texto vira claro */
.btn-primary:hover,
.btn-primary:focus-visible{ color:#F8F4EE; }

/* o botao fixo do WhatsApp segue verde — e a cor da propria plataforma */

/* ===========================================================================
   "QUEM SOMOS" NO RESPONSIVO
   Estava centralizado com paragrafo limitado a 34ch, o que sobrava muito
   espaco vazio nas laterais. Agora os blocos ocupam a largura disponivel:
   duas colunas no tablet, coluna unica cheia no celular.
   =========================================================================== */
@media (max-width:1024px){
  .about{ padding-inline:24px; border-radius:56px 56px 0 0; }
}

@media (max-width:900px){
  .about{ padding:72px 20px; gap:44px; border-radius:40px 40px 0 0; }
  .about__head h2{ max-width:none; }

  /* duas colunas aproveitam a largura do tablet e do celular deitado */
  .stats{ grid-template-columns:repeat(2,1fr); gap:24px 20px; }
  .stat{ padding:0; align-items:flex-start; text-align:left; }
  .stat__body{ align-items:flex-start; gap:10px; }
  .stat .h3{ text-align:left; }
  .stat p.body{ max-width:none; margin-inline:0; }   /* sem o 34ch */
}

@media (max-width:560px){
  .about{ padding:56px 16px; gap:36px; border-radius:32px 32px 0 0; }
  .stats{ grid-template-columns:1fr; gap:28px; }
  .stat{ flex-direction:row; gap:16px; align-items:flex-start; }
  .stat__icon{ width:48px; height:48px; flex:0 0 auto; }
  .stat__icon svg{ width:23px; height:23px; }
  .stat .h3{ font-size:26px; }
  .stat .h3 small{ margin-top:3px; }
}

/* logo do rodape nas telas menores */
@media (max-width:1024px){ .footer-logo{ width:290px; } }
@media (max-width:700px){  .footer-logo{ width:min(280px,80%); } }

/* ===========================================================================
   HERO: DOIS BOTOES EMPILHADOS
   O WhatsApp segue como principal (preenchido); a ligacao vem logo abaixo, em
   contorno claro, para quem prefere falar por telefone sem competir com ele.
   A coluna encolhe para o conteudo e os dois botoes ficam com a largura do
   maior.
   =========================================================================== */
.hero__acoes{ display:flex; flex-direction:column; align-self:flex-start; gap:12px; }
.btn-contorno{
  background:transparent;
  color:#F8F4EE;
  box-shadow:inset 0 0 0 1px rgba(248,244,238,.6);
}
/* no hover o preenchimento claro sobe e o texto vira Espresso */
.btn-contorno::before{ background:#F8F4EE; }
.btn-contorno:hover,
.btn-contorno:focus-visible{ color:var(--ink); }