:root{
  --creme:#f5efe6;
  --creme-2:#efe6d9;
  --papel:#f8f3ec;
  --tinta:#2b2621;
  --texto:#5a5048;
  --suave:#8a7d70;
  --verde:#4f5b44;
  --verde-esc:#414b38;
  --salvia:#e3e2d6;
  --rosa:#ecd6cb;
  --areia:#efe5d8;
  --ouro:#b39062;
  --ouro-claro:#d7c09a;
  --terra:#c27c5c;
  --borda:rgba(179,144,98,.42);
  --sombra:0 10px 26px -14px rgba(74,58,40,.38);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  min-height:100vh;
  background:#e9e3d9;
  background-image:radial-gradient(1200px 800px at 15% 85%,rgba(120,130,100,.18),transparent 60%),radial-gradient(900px 700px at 90% 10%,rgba(255,255,255,.6),transparent 60%);
  color:var(--texto);
  font-family:"Lora",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  padding:0;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.cartao{
  position:relative;width:100%;max-width:460px;min-height:100vh;
  background:var(--papel);
  overflow:hidden;
}
@media (min-width:520px){
  body{padding:40px 16px}
  .cartao{min-height:0;border-radius:28px;box-shadow:0 30px 70px -30px rgba(60,48,34,.45)}
}

/* ===== capa ===== */
.capa{position:relative}
.capa-foto{position:relative;aspect-ratio:600/663;overflow:hidden}
.capa-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.04);animation:respira 1.6s cubic-bezier(.2,.7,.2,1) both}
.capa-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(248,243,236,0) 55%,rgba(248,243,236,.75) 82%,var(--papel) 100%);
}
.folhas{position:absolute;top:-6px;right:-14px;width:150px;opacity:.95;pointer-events:none;z-index:2;transform-origin:85% 0;animation:balanca 9s ease-in-out infinite}
.sol{position:absolute;right:22px;bottom:30px;width:34px;color:var(--ouro);z-index:2;opacity:.9;animation:gira 40s linear infinite}

.capa-texto{position:relative;z-index:3;margin-top:-58px;padding:0 26px;text-align:left}
.rotulo{display:flex;align-items:center;gap:12px;font-family:"Raleway",sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ouro)}
.rotulo::before{content:"";width:34px;height:1px;background:var(--ouro)}
h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:var(--tinta);font-size:clamp(48px,14vw,62px);line-height:.92;letter-spacing:-.01em;margin:10px 0 14px}
.sub{font-size:15.5px;line-height:1.55;color:var(--texto);max-width:34ch}

/* ===== conteúdo ===== */
.conteudo{padding:22px 22px 0;display:flex;flex-direction:column;gap:14px}

.cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px;
  min-height:62px;padding:0 22px 0 20px;border-radius:18px;
  background:linear-gradient(180deg,#58654c,var(--verde-esc));color:#f6efe3;
  box-shadow:0 14px 26px -14px rgba(52,62,42,.75),inset 0 1px 0 rgba(255,255,255,.12);
  font-size:19px;letter-spacing:.005em;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.cta .txt{flex:1;text-align:center}
.cta svg{flex:none}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);animation:brilho 6s ease-in-out 2.2s infinite}

.servico{
  display:grid;grid-template-columns:35% 1fr;min-height:124px;
  border-radius:18px;overflow:hidden;box-shadow:var(--sombra);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.servico .foto{overflow:hidden}
.servico img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.servico .corpo{position:relative;padding:14px 48px 14px 16px;display:flex;flex-direction:column;justify-content:center}
.servico h2{font-family:"Lora",serif;font-weight:500;font-size:17px;line-height:1.18;color:var(--tinta);margin-bottom:6px}
.servico p{font-size:12.5px;line-height:1.42;color:var(--suave)}
.servico .seta{position:absolute;right:13px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.s1{background:var(--areia)} .s1 .seta{background:#c9ad87}
.s2{background:var(--salvia)} .s2 .seta{background:#c4a982}
.s3{background:var(--rosa)} .s3 .seta{background:var(--terra)}

.linha{
  display:flex;align-items:center;gap:16px;min-height:56px;padding:0 20px;
  border:1px solid var(--borda);border-radius:16px;background:rgba(255,255,255,.35);
  color:var(--tinta);font-size:16.5px;
  transition:background .3s,border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1);
}
.linha .ic{width:26px;height:26px;flex:none;color:var(--tinta)}
.linha .txt{flex:1}
.linha .vai{flex:none;color:var(--texto);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.linhas{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.servicos{display:flex;flex-direction:column;gap:14px}

@media (hover:hover){
  .cta:hover{transform:translateY(-2px);box-shadow:0 20px 32px -16px rgba(52,62,42,.8),inset 0 1px 0 rgba(255,255,255,.12)}
  .cta:hover .seta-cta{transform:translateX(4px)}
  .servico:hover{transform:translateY(-3px);box-shadow:0 18px 32px -16px rgba(74,58,40,.45)}
  .servico:hover img{transform:scale(1.06)}
  .servico:hover .seta{transform:translateX(3px)}
  .linha:hover{background:rgba(255,255,255,.7);border-color:var(--ouro)}
  .linha:hover .vai{transform:translateX(4px)}
}
.cta:active,.servico:active,.linha:active{transform:scale(.985)}
.seta-cta{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}

/* ===== rodapé ===== */
.rodape{position:relative;margin-top:30px;padding:0 24px;text-align:center}
.divisor{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--ouro)}
.divisor::before,.divisor::after{content:"";height:1px;width:110px;background:linear-gradient(90deg,transparent,var(--ouro-claro))}
.divisor::after{background:linear-gradient(270deg,transparent,var(--ouro-claro))}
.frase{font-family:"Allura",cursive;color:#a8835a;font-size:31px;line-height:1.15;margin:12px 0 0}
.colinas{position:relative;height:150px;margin:-8px -24px 0}
.colinas svg.morro{position:absolute;left:0;bottom:0;width:100%;height:120px}
.colinas .ramo{position:absolute;left:6px;bottom:22px;width:76px;transform-origin:50% 100%;animation:balanca 8s ease-in-out infinite}
.local{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:14px;color:#3a362e;z-index:2}
.credito{position:absolute;left:0;right:0;bottom:6px;font-family:"Raleway",sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);z-index:2}
.credito a{color:inherit}

/* ===== entrada ===== */
.sobe{opacity:0;transform:translateY(14px);animation:sobe .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.15s}.d2{animation-delay:.28s}.d3{animation-delay:.4s}.d4{animation-delay:.52s}.d5{animation-delay:.64s}.d6{animation-delay:.76s}.d7{animation-delay:.86s}.d8{animation-delay:.96s}.d9{animation-delay:1.06s}

@keyframes sobe{to{opacity:1;transform:none}}
@keyframes respira{from{transform:scale(1.1)}to{transform:scale(1.04)}}
@keyframes balanca{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes brilho{0%{left:-60%}18%,100%{left:130%}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sobe{opacity:1;transform:none}
}

.faixa{display:none}
.credito{bottom:4px}
.local{bottom:26px}

/* ===== computador ===== */
@media (min-width:900px){
  body{padding:0 24px 40px;align-items:flex-start}
  .cartao{max-width:940px;background:transparent;box-shadow:none;border-radius:0;overflow:visible}

  .capa{display:grid;grid-template-columns:440px 1fr;align-items:center;gap:48px}
  .capa-foto{aspect-ratio:auto;height:470px;border-radius:0 0 30px 30px;box-shadow:0 24px 50px -28px rgba(60,48,34,.55)}
  .capa-foto::after{background:linear-gradient(180deg,transparent 70%,rgba(43,38,33,.18))}
  .capa-texto{margin:0;padding:30px 30px 60px 0}
  h1{font-size:76px;margin:14px 0 18px}
  .sub{font-size:17px;max-width:36ch}
  .folhas{right:-10px;top:-10px;width:190px}
  .sol{right:40px;bottom:70px;width:40px}

  .conteudo{position:relative;z-index:4;margin-top:-34px;padding:30px;gap:22px;border-radius:30px;
    background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);
    box-shadow:0 30px 60px -36px rgba(60,48,34,.5);backdrop-filter:blur(6px)}
  .cta{min-height:76px;font-size:24px;justify-content:center}
  .cta .txt{flex:none}

  .servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
  .servico{grid-template-columns:1fr;grid-template-rows:170px 1fr;min-height:0}
  .servico .corpo{padding:20px 20px 64px;justify-content:flex-start}
  .servico h2{font-size:21px;margin-bottom:8px}
  .servico p{font-size:13.5px}
  .servico .seta{top:auto;bottom:18px;left:20px;right:auto;margin:0;width:38px;height:38px}

  .linhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:0}
  .linha{font-size:14.5px;gap:12px;padding:0 16px;white-space:nowrap;background:rgba(255,255,255,.55)}

  .faixa{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:36px;margin-top:34px;padding:38px 46px;border-radius:30px;
    background:radial-gradient(500px 220px at 0% 100%,rgba(255,255,255,.07),transparent 70%),linear-gradient(135deg,#5b6850,#3f4936);color:#efe6d6;
    box-shadow:0 26px 50px -30px rgba(52,62,42,.8)}
  .faixa-frase{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:29px;line-height:1.2;padding-right:32px;border-right:1px solid rgba(239,230,214,.25)}
  .pilares{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-family:"Raleway",sans-serif;font-size:12.5px;letter-spacing:.02em}
  .pilares li{display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .pilares svg{width:38px;height:38px;color:var(--ouro-claro)}
  .pilares li:hover{transform:translateY(-3px)}

  .rodape{margin-top:36px;padding:0}
  .frase{display:none}
  .colinas{height:auto;margin:14px 0 0}
  .colinas .morro,.colinas .ramo{display:none}
  .local,.credito{position:static}
  .local{color:var(--suave)}
  .credito{margin-top:8px;color:var(--suave);opacity:.8}
  .credito a{color:var(--ouro);font-weight:600}
}
@media (max-width:360px){
  .servico{grid-template-columns:32% 1fr}
  .servico h2{font-size:16px}
  .cta{font-size:17px}
}

/* ===== botões extras e aviso de cookies ===== */
.linhas .linha .txt{overflow:hidden;text-overflow:ellipsis}
.aviso-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:16px;
  padding:14px 16px;border-radius:16px;background:rgba(43,38,33,.94);color:#f3ece0;font-size:13.5px;line-height:1.45;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:sobe .6s cubic-bezier(.2,.7,.2,1) both}
.aviso-cookies[hidden]{display:none}
.aviso-cookies p{flex:1}
.aviso-cookies div{display:flex;gap:8px;flex:none}
.aviso-cookies button{font:inherit;font-size:13px;border:1px solid rgba(243,236,224,.35);background:transparent;color:inherit;border-radius:12px;padding:8px 12px;cursor:pointer}
.aviso-cookies button[data-consentir="sim"]{background:var(--ouro-claro);border-color:var(--ouro-claro);color:#2b2621}
@media (max-width:420px){.aviso-cookies{flex-direction:column;align-items:stretch}.aviso-cookies div{justify-content:flex-end}}


/* v2.2: frase da capa mais longa não encosta no sol decorativo */
@media (max-width:899px){.sub{max-width:calc(100% - 50px)}}