@charset "utf-8";

/* ==========================================================
   Base do site: Ernesto Khulmann, 146 | Centro, Campinas SP
   Paleta: creme quente, verde profundo, terracota, teal

   Regra da casa sobre botao:
   toda classe de botao declara a propria cor de fundo,
   a propria cor de borda e a propria cor de texto,
   inclusive em :hover e em :focus-visible, para que nenhum
   rotulo herde a cor da secao em que o botao esta apoiado.

   Conferencia de contraste (texto sobre o fundo DO BOTAO):
   .btn-zap        #FFF8F2 sobre #A84A12 .... aprox 6,3:1
   .btn-teal       #F4FBF8 sobre #245F51 .... aprox 7,4:1
   .btn-linha      #16302B sobre #FAF6F0 .... aprox 13,5:1
   .btn-claro      #0E211D sobre #FAF6F0 .... aprox 16,1:1
   .btn-linha-claro #F1EDE6 sobre #16302B ... aprox 11,9:1
   ========================================================== */

:root{
  --cream:#FAF6F0;
  --sand:#F2E9DC;
  --sand-2:#EADFCD;
  --line:#E1D5C3;
  --ink:#16302B;
  --ink-deep:#0E211D;
  --teal:#2F7A68;
  --teal-dark:#245F51;
  --terra:#C9611F;
  --terra-dark:#A84A12;
  --text:#27302C;
  --muted:#5C6963;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 14px 34px rgba(22,48,43,.09);
  --shadow-sm:0 6px 16px rgba(22,48,43,.07);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:'Outfit','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  color:var(--ink);
  line-height:1.14;
  letter-spacing:-.015em;
  font-weight:600;
  margin:0 0 .55em;
  overflow-wrap:break-word;
}
h1{font-size:clamp(2.05rem,8.4vw,3.5rem);font-weight:800;line-height:1.06}
h2{font-size:clamp(1.6rem,5.6vw,2.4rem)}
h3{font-size:clamp(1.2rem,4vw,1.45rem)}
h4{font-size:1.02rem;font-weight:600}

p{margin:0 0 1.05em;overflow-wrap:break-word}
p:last-child{margin-bottom:0}

a{color:var(--teal-dark);text-decoration:none}
a:hover,a:focus{text-decoration:underline}

ul{margin:0;padding:0}

:focus-visible{outline:3px solid var(--terra-dark);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.wrap-estreito{max-width:760px}

.eyebrow{
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--teal-dark);
  margin:0 0 .9em;
}
.lead{font-size:1.1rem;color:var(--muted)}

/* ---------------- Topo ---------------- */

.topo{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:40;
}
.topo-in{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:12px;
  padding-bottom:10px;
}
.marca{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  text-decoration:none;
}
.marca:hover{text-decoration:none}
.marca-sig{
  width:42px;height:42px;flex:0 0 42px;
  border-radius:12px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);
}
.marca-sig svg{width:26px;height:26px;display:block}
.marca-txt{display:flex;flex-direction:column;line-height:1.18}
.marca-txt strong{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
.marca-txt small{
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px}
.nav a{
  display:inline-block;
  font-size:.9rem;
  font-weight:500;
  color:var(--muted);
  padding:4px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--sand-2)}
.nav a.ativo{color:var(--ink);border-bottom-color:var(--terra-dark)}

@media (min-width:820px){
  .topo-in{flex-direction:row;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:14px}
  .nav ul{gap:22px}
  .nav a{font-size:.95rem}
}

/* ==========================================================
   Botoes
   Cada regra abaixo declara background, border-color e color.
   Nenhuma depende da cor herdada da secao.
   ========================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 22px;
  border-radius:999px;
  font-family:'Outfit','Helvetica Neue',Arial,sans-serif;
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.01em;
  background:transparent;
  color:var(--ink);
  border:2px solid transparent;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  line-height:1.2;
  max-width:100%;
  transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover,.btn:focus{text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:19px;height:19px;flex:0 0 19px}

/* botao escrito com a tag button nao herda nada do formulario */
button.btn{
  -webkit-appearance:none;
  appearance:none;
  font-family:'Outfit','Helvetica Neue',Arial,sans-serif;
  width:100%;
}
@media (min-width:520px){button.btn{width:auto}}

/* --- btn-zap: terracota escuro #A84A12 com rotulo claro #FFF8F2 --- */
.btn-zap{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark)}
.btn-zap:hover{background:#8F3D0D;color:#FFF8F2;border-color:#8F3D0D}
.btn-zap:focus{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark)}
.btn-zap:focus-visible{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark);outline-color:var(--ink)}
.btn-zap:active{background:#7E350B;color:#FFF8F2;border-color:#7E350B}
.btn-zap svg{color:#FFF8F2}

/* --- btn-teal: verde profundo #245F51 com rotulo claro #F4FBF8 --- */
.btn-teal{background:var(--teal-dark);color:#F4FBF8;border-color:var(--teal-dark)}
.btn-teal:hover{background:#1C4C41;color:#F4FBF8;border-color:#1C4C41}
.btn-teal:focus{background:var(--teal-dark);color:#F4FBF8;border-color:var(--teal-dark)}
.btn-teal:focus-visible{background:var(--teal-dark);color:#F4FBF8;border-color:var(--teal-dark);outline-color:var(--ink)}
.btn-teal:active{background:#163C33;color:#F4FBF8;border-color:#163C33}
.btn-teal svg{color:#F4FBF8}

/* --- btn-linha: contorno sobre fundo claro.
   fundo transparente apoiado no creme, entao o rotulo e escuro.
   no hover o fundo vira escuro e o rotulo vira claro no mesmo passo. --- */
.btn-linha{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-linha:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-linha:focus{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-linha:focus-visible{background:transparent;color:var(--ink);border-color:var(--ink);outline-color:var(--terra-dark)}
.btn-linha:active{background:var(--ink-deep);color:var(--cream);border-color:var(--ink-deep)}
.btn-linha svg{color:currentColor}

/* --- btn-claro: usado dentro da faixa escura.
   o fundo do botao e creme, portanto o rotulo e escuro #0E211D. --- */
.btn-claro{background:var(--cream);color:var(--ink-deep);border-color:var(--cream)}
.btn-claro:hover{background:#FFFFFF;color:var(--ink-deep);border-color:#FFFFFF}
.btn-claro:focus{background:var(--cream);color:var(--ink-deep);border-color:var(--cream)}
.btn-claro:focus-visible{background:var(--cream);color:var(--ink-deep);border-color:var(--cream);outline-color:#E7C39C}
.btn-claro:active{background:#F0E9DF;color:var(--ink-deep);border-color:#F0E9DF}
.btn-claro svg{color:var(--ink-deep)}

/* --- btn-linha-claro: contorno sobre fundo escuro.
   rotulo claro #F1EDE6 sobre o verde #16302B da faixa.
   no hover o fundo vira claro e o rotulo vira escuro no mesmo passo. --- */
.btn-linha-claro{background:transparent;color:#F1EDE6;border-color:#8FA69F}
.btn-linha-claro:hover{background:#F1EDE6;color:var(--ink-deep);border-color:#F1EDE6}
.btn-linha-claro:focus{background:transparent;color:#F1EDE6;border-color:#F1EDE6}
.btn-linha-claro:focus-visible{background:transparent;color:#F1EDE6;border-color:#F1EDE6;outline-color:#E7C39C}
.btn-linha-claro:active{background:#E4DFD6;color:var(--ink-deep);border-color:#E4DFD6}
.btn-linha-claro svg{color:currentColor}

/* reforco: dentro da faixa escura cada botao mantem a cor da propria classe */
.faixa .btn{color:var(--ink)}
.faixa .btn-claro{background:var(--cream);color:var(--ink-deep);border-color:var(--cream)}
.faixa .btn-claro:hover{background:#FFFFFF;color:var(--ink-deep);border-color:#FFFFFF}
.faixa .btn-claro:focus-visible{background:var(--cream);color:var(--ink-deep);border-color:var(--cream)}
.faixa .btn-linha-claro{background:transparent;color:#F1EDE6;border-color:#8FA69F}
.faixa .btn-linha-claro:hover{background:#F1EDE6;color:var(--ink-deep);border-color:#F1EDE6}
.faixa .btn-linha-claro:focus-visible{background:transparent;color:#F1EDE6;border-color:#F1EDE6}
.faixa .btn-zap{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark)}
.faixa .btn-zap:hover{background:#8F3D0D;color:#FFF8F2;border-color:#8F3D0D}
.faixa .btn-teal{background:var(--teal-dark);color:#F4FBF8;border-color:var(--teal-dark)}
.faixa .btn-teal:hover{background:#1C4C41;color:#F4FBF8;border-color:#1C4C41}

/* reforco: dentro do rodape escuro, se algum botao for colocado ali */
.rodape .btn-zap{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark)}
.rodape .btn-claro{background:var(--cream);color:var(--ink-deep);border-color:var(--cream)}
.rodape .btn-linha-claro{background:transparent;color:#F1EDE6;border-color:#8FA69F}
.rodape .btn-linha-claro:hover{background:#F1EDE6;color:var(--ink-deep);border-color:#F1EDE6}

.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn-bloco{width:100%}
@media (min-width:520px){.btn-bloco{width:auto}}

/* ---------------- Hero ---------------- */

.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(170deg,var(--sand) 0%,var(--cream) 62%);
  border-bottom:1px solid var(--line);
  padding:56px 0 60px;
}
.hero-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.55;
}
.hero-in{position:relative;z-index:2;max-width:660px}
.hero h1{margin-bottom:.35em}
.hero .lead{font-size:1.12rem;max-width:34em}
.hero .btns{margin-top:26px}
.hero-nota{
  margin-top:26px;
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.hero-nota svg{width:18px;height:18px;flex:0 0 18px;margin-top:3px;color:var(--teal-dark)}

@media (min-width:820px){.hero{padding:88px 0 96px}}

/* ---------------- Secoes ---------------- */

.sec{padding:52px 0}
.sec-sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-cab{max-width:620px;margin-bottom:34px}
@media (min-width:820px){.sec{padding:76px 0}}

/* faixa escura: declara a propria cor de texto */
.faixa{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:#EDEAE3;
  padding:56px 0;
}
.faixa h2,.faixa h3,.faixa h4{color:#FBF7F1}
.faixa p{color:#D5DCD8}
.faixa li{color:#D5DCD8}
.faixa a:not(.btn){color:#EFE3D4;text-decoration:underline}
.faixa-art{position:absolute;inset:0;width:100%;height:100%;opacity:.16;pointer-events:none}
.faixa-in{position:relative;z-index:2}
@media (min-width:820px){.faixa{padding:80px 0}}

/* ---------------- Grades e cartoes ---------------- */

.grade{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.grade-2,.grade-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grade-3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:#FFFDFA;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.4em}
.card p{font-size:.97rem;color:var(--muted)}
.card-num{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.5rem;
  font-weight:800;
  color:var(--terra-dark);
  display:block;
  margin-bottom:6px;
}

.icone{
  width:52px;height:52px;
  border-radius:15px;
  background:var(--sand);
  color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.icone svg{width:27px;height:27px;display:block}
.icone-terra{background:#F7E6D8;color:var(--terra-dark)}
.icone-escuro{background:rgba(250,246,240,.12);color:#F3E7D9}

/* lista com marcador desenhado */
.lista{list-style:none;display:grid;gap:12px}
.lista li{
  position:relative;
  padding-left:30px;
  font-size:1rem;
}
.lista li::before{
  content:"";
  position:absolute;
  left:0;top:.52em;
  width:14px;height:14px;
  border-radius:50%;
  border:3px solid var(--terra-dark);
}
.lista-clara li::before{border-color:#E4B98F}

/* painel de destaque */
.painel{
  background:#FFFDFA;
  border:1px solid var(--line);
  border-left:6px solid var(--terra-dark);
  border-radius:var(--radius);
  padding:24px 22px;
  box-shadow:var(--shadow-sm);
}

.divisor{
  display:block;
  width:100%;
  height:22px;
  color:var(--line);
  margin:6px 0 28px;
}

/* duas colunas de texto */
.duplo{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:860px){.duplo{grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}}

/* ---------------- Duvidas ---------------- */

.faq{display:grid;gap:12px}
.faq details{
  background:#FFFDFA;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:4px 18px;
  box-shadow:var(--shadow-sm);
}
.faq summary{
  cursor:pointer;
  list-style:none;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
  padding:16px 30px 16px 0;
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;right:0;top:12px;
  font-family:'Outfit',Arial,sans-serif;
  font-size:1.5rem;
  color:var(--terra-dark);
  line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 16px;font-size:.98rem;color:var(--muted)}

/* ---------------- Contato ---------------- */

.dados{display:grid;gap:14px;list-style:none}
.dados li{display:flex;gap:13px;align-items:flex-start}
.dados svg{width:21px;height:21px;flex:0 0 21px;margin-top:4px;color:var(--teal-dark)}
.dados strong{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dados span{font-size:1.02rem;color:var(--ink)}

.form{display:grid;gap:15px}
.campo{display:grid;gap:6px}
.campo label{font-size:.83rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.campo input,.campo textarea{
  width:100%;
  max-width:100%;
  font-family:'Outfit','Helvetica Neue',Arial,sans-serif;
  font-size:1rem;
  color:var(--text);
  background:#FFFDFA;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 14px;
}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo textarea:focus{border-color:var(--teal-dark);outline:none;box-shadow:0 0 0 3px rgba(47,122,104,.18)}
.form-nota{font-size:.86rem;color:var(--muted)}

/* botao de envio do formulario de contato */
.form button.btn-teal{background:var(--teal-dark);color:#F4FBF8;border-color:var(--teal-dark)}
.form button.btn-teal:hover{background:#1C4C41;color:#F4FBF8;border-color:#1C4C41}
.form button.btn-teal:focus-visible{background:var(--teal-dark);color:#F4FBF8;border-color:var(--teal-dark);outline-color:var(--ink)}
.form button.btn-zap{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark)}
.form button.btn-zap:hover{background:#8F3D0D;color:#FFF8F2;border-color:#8F3D0D}
.form button.btn-zap:focus-visible{background:var(--terra-dark);color:#FFF8F2;border-color:var(--terra-dark);outline-color:var(--ink)}

/* ---------------- 404 ---------------- */

.erro{
  min-height:66vh;
  display:flex;
  align-items:center;
  padding:60px 0;
  background:linear-gradient(170deg,var(--sand) 0%,var(--cream) 70%);
}
.erro-num{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(4rem,22vw,8rem);
  font-weight:800;
  color:var(--terra-dark);
  line-height:.9;
  margin:0 0 18px;
}

/* ---------------- Rodape ---------------- */

.rodape{
  background:var(--ink-deep);
  color:#CBD4D0;
  padding:48px 0 30px;
  font-size:.95rem;
}
.rodape h3{color:#FBF7F1;font-size:1.25rem;margin-bottom:.35em}
.rodape h4{color:#F1E6D7;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-family:'Outfit',Arial,sans-serif;margin-bottom:.9em}
.rodape a{color:#E6DDD1;text-decoration:none}
.rodape a:hover{color:#FFFFFF;text-decoration:underline}
.rodape-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:760px){.rodape-grid{grid-template-columns:1.3fr 1fr 1fr;gap:36px}}
.rodape-links{list-style:none;display:grid;gap:8px}
.rodape-nota{
  margin-top:36px;
  padding-top:18px;
  border-top:1px solid rgba(233,224,210,.18);
  font-size:.8rem;
  color:#9AA6A1;
  line-height:1.55;
}
.rodape-fim{
  margin-top:10px;
  font-size:.8rem;
  color:#8C9893;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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