/* Plantero — site principal (landing "em construção").
   Paleta e tipografia do Manual de Identidade (identidade/):
   oliva #657247 · terracota #C47B46 · areia #E3D6C5 · creme #F0EDE4 · ardósia #5D7982.
   Títulos: Alte Haas Grotesk (não existe como webfont) -> Hanken Grotesk. Textos: Nunito Sans.
   Fontes servidas daqui mesmo (sem Google Fonts em tempo de uso), licença OFL. */

@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans-latin.woff2) format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --oliva:#657247; --oliva-escura:#4b5634; --terracota:#C47B46; --terracota-escura:#8a4c24;
  --areia:#E3D6C5; --creme:#F0EDE4; --ardosia:#5D7982;
  --texto:#2b3022; --texto-suave:#545947;
  --titulo:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --corpo:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--texto);font-family:var(--corpo);font-size:1.0625rem;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--terracota);outline-offset:3px;border-radius:6px}

.pagina{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  overflow:hidden;overflow:clip;
  padding:0 max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}

/* ---------- topo ---------- */
.topo{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding:28px 0 0}
.marca{display:inline-block;border-radius:6px}
.marca img{width:clamp(150px,18vw,210px);height:auto}

/* ---------- palco ---------- */
.palco{position:relative;z-index:1;flex:1;width:100%;max-width:1160px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px;padding:32px 0 48px}

.aviso{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 14px 7px 12px;border-radius:99px;
  background:#f3e6d6;color:var(--terracota-escura);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.ponto{width:9px;height:9px;border-radius:99px;background:var(--terracota);flex:none;animation:pulsar 2.4s ease-in-out infinite}

h1{font-family:var(--titulo);font-weight:800;color:var(--oliva);margin:0 0 18px;
  font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.02;letter-spacing:-.025em;max-width:17ch;text-wrap:balance}
.lead{margin:0 0 30px;max-width:46ch;color:var(--texto-suave);font-size:clamp(1.02rem,1.5vw,1.15rem)}

.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.botao{display:inline-flex;align-items:center;gap:10px;background:var(--oliva);color:#fcfbf6;text-decoration:none;
  font-weight:700;padding:13px 22px 13px 18px;border-radius:99px;transition:background .15s ease,transform .15s ease}
.botao:hover{background:var(--oliva-escura);transform:translateY(-1px)}
.ig{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.ig .cheio{fill:currentColor;stroke:none}
.email{color:var(--texto-suave);font-weight:600;text-decoration:underline;text-decoration-color:rgba(101,114,71,.45);
  text-underline-offset:4px;text-decoration-thickness:2px;overflow-wrap:anywhere}
.email:hover{color:var(--oliva);text-decoration-color:var(--oliva)}

/* ---------- selo + formas orgânicas ---------- */
.selo{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:1}
.selo-disco{position:absolute;inset:0;z-index:2}
.selo-disco img{position:absolute;inset:0;width:100%;height:100%}
.engrenagem{animation:girar 140s linear infinite}
.forma{position:absolute;pointer-events:none;user-select:none}
.forma-terracota{z-index:1;width:78%;right:-24%;bottom:-30%}
.forma-ardosia{z-index:3;width:21%;left:-6%;top:2%;transform:rotate(-12deg)}
.forma-areia{z-index:0;width:min(560px,70vw);left:-180px;bottom:-200px;transform:rotate(18deg)}

/* ---------- rodapé ---------- */
.rodape{position:relative;z-index:2;width:100%;max-width:1160px;margin:0 auto;padding:0 0 26px;
  color:var(--texto-suave);font-size:.85rem}

@keyframes girar{to{transform:rotate(360deg)}}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.engrenagem,.ponto{animation:none}}

/* ---------- celular / tablet estreito ---------- */
@media (max-width:860px){
  .palco{grid-template-columns:1fr;gap:28px;padding:20px 0 40px}
  .selo{order:-1;width:min(64vw,250px);justify-self:start;margin-left:6px}
  .forma-terracota{width:66%;right:-40%;bottom:-10%}
  .forma-areia{left:-160px;bottom:-140px;width:360px}
  .topo{padding-top:22px}
}
@media (max-width:380px){
  .botao{width:100%;justify-content:center}
}