/* ==========================================================================
   Ecoh — Soluções Ambientais Integradas
   Estilos próprios (o utilitário vem do Tailwind; aqui ficam marca,
   componentes e movimento).

   Depende de assets/css/root.css, que precisa ser carregado antes.
   ========================================================================== */

html{ -webkit-text-size-adjust:100%; }
body{ font-family:'Instrument Sans',system-ui,sans-serif; color:var(--ink); background:#fff; overflow-x:hidden; }

@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
main section[id], footer[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

::selection{ background:var(--eco); color:var(--floresta); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--eco-600); outline-offset:3px; border-radius:6px;
}


/* ==========================================================================
   Marca: logo com fundo transparente
   ========================================================================== */

.logo-img{ display:block; flex-shrink:0; }


/* ==========================================================================
   Botões
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:.9375rem; line-height:1; letter-spacing:-.01em;
  padding:.9rem 1.4rem; border-radius:999px; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; flex:none; }

.btn-solid{ background:var(--eco); color:var(--floresta); box-shadow:0 8px 22px -12px rgba(20,48,31,.55); }
.btn-solid:hover{ background:#8fd68f; box-shadow:0 16px 30px -14px rgba(20,48,31,.6); }

.btn-ink{ background:var(--floresta); color:#fff; }
.btn-ink:hover{ background:#1c422b; }

.btn-outline-light{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-outline-light:hover{ border-color:var(--eco); color:var(--eco); background:rgba(124,205,124,.08); }

.btn-outline-dark{ border-color:rgba(31,41,55,.18); color:var(--ink); background:#fff; }
.btn-outline-dark:hover{ border-color:var(--eco-700); color:var(--eco-700); }


/* ==========================================================================
   Revelação ao rolar
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms); }
.reveal.is-in{ opacity:1; transform:none; }


/* ==========================================================================
   Trilho-caule: indicador de seção
   ========================================================================== */

.stem-rail{ position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:40; display:none; }
@media (min-width:1280px){ .stem-rail{ display:block; } }

.stem-track{ position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:rgba(31,41,55,.14); border-radius:2px; transition:background-color .4s; }
.stem-fill{ position:absolute; left:11px; top:6px; width:2px; background:var(--eco-600); border-radius:2px; height:0; transition:height .12s linear, background-color .4s; }
.stem-rail.on-dark .stem-track{ background:rgba(255,255,255,.18); }
.stem-rail.on-dark .stem-fill{ background:var(--eco); }

.stem-node{ position:relative; display:flex; align-items:center; gap:.6rem; height:56px; background:none; border:0; cursor:pointer; padding:0; }
.stem-dot{ width:24px; height:24px; display:grid; place-items:center; flex:none; }
.stem-dot svg{ width:13px; height:13px; color:rgba(31,41,55,.28); transform:rotate(-30deg) scale(.85); transition:color .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.stem-rail.on-dark .stem-dot svg{ color:rgba(255,255,255,.35); }

.stem-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; white-space:nowrap;
}
.stem-rail.on-dark .stem-label{ color:#fff; }
.stem-node:hover .stem-label, .stem-node[aria-current="true"] .stem-label{ opacity:.85; transform:none; }

/* Abaixo de 1440px a coluna de texto chega perto do trilho: só os brotos, sem rótulo */
@media (max-width:1439px){ .stem-label{ display:none; } }

.stem-node[aria-current="true"] .stem-dot svg{ color:var(--eco-700); transform:rotate(-30deg) scale(1.25); }
.stem-rail.on-dark .stem-node[aria-current="true"] .stem-dot svg{ color:var(--eco); }


/* ==========================================================================
   Cartões
   ========================================================================== */

.card{
  position:relative; background:#fff; border:1px solid rgba(31,41,55,.08); border-radius:20px;
  box-shadow:0 1px 2px rgba(16,39,24,.04), 0 12px 28px -22px rgba(16,39,24,.35);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--eco),var(--terra)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.card:hover{ transform:translateY(-6px); border-color:rgba(124,205,124,.5); box-shadow:0 1px 2px rgba(16,39,24,.05), 0 30px 50px -30px rgba(16,39,24,.5); }
.card:hover::after{ transform:scaleX(1); }

.card-icon{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:#E2F4E3; color:var(--eco-700);
  transition:background-color .35s, color .35s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-icon{ background:var(--floresta); color:var(--eco); transform:rotate(-4deg); }
.card-icon svg{ width:26px; height:26px; }
.card-icon.is-sm{ width:44px; height:44px; border-radius:12px; }
.card-icon.is-sm svg{ width:22px; height:22px; }

/* Cartão compacto (Soluções em 4 colunas): ícone ao lado do título; a lista
   absorve a sobra de altura para as siglas ficarem alinhadas na base */
.card-compact{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto 1fr auto;
  column-gap:.75rem;
}
/* Com subgrid, título, descrição, lista e siglas ficam na mesma altura entre cartões vizinhos */
@supports (grid-template-rows: subgrid){
  .card-compact{ grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
}
.card-compact > :not(.card-icon):not(.card-title){ grid-column:1 / -1; }
.card-compact .card-title{ align-self:center; }


/* ==========================================================================
   Lista com marcador-folha
   ========================================================================== */

.leaf-list li{ position:relative; padding-left:1.6rem; }
.leaf-list li::before{
  content:""; position:absolute; left:0; top:.5em; width:11px; height:9px;
  background:var(--eco-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 7Q9 0 18 7Q9 14 0 7Z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 7Q9 0 18 7Q9 14 0 7Z'/%3E%3C/svg%3E") no-repeat center/contain;
  transform:rotate(-25deg);
}
.leaf-list.is-compact li{ padding-left:1.3rem; }
.leaf-list.is-compact li::before{ top:.4em; width:10px; height:8px; }


/* ==========================================================================
   Etiquetas normativas (mono)
   ========================================================================== */

.code-chip{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
  padding:.28rem .5rem; border-radius:6px; background:rgba(31,41,55,.05); color:#4b5563; white-space:nowrap;
}
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; }


/* ==========================================================================
   Sobre: valores em acordeão editorial
   ========================================================================== */

.value-item{ border-bottom:1px solid #e5e7eb; }
.value-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.1rem; cursor:pointer; list-style:none;
}
.value-item summary::-webkit-details-marker{ display:none; }

.value-title{
  display:flex; align-items:center; gap:.85rem;
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height:1.2; color:var(--ink);
  transition:color .2s;
}
.value-title svg{ flex:none; width:14px; height:11px; color:var(--eco-600); transform:rotate(-25deg); }
.value-item summary:hover .value-title,
.value-item[open] .value-title{ color:var(--eco-700); }

/* Botão +/− : a barra vertical gira até deitar quando o item abre */
.value-toggle{
  position:relative; flex:none; width:34px; height:34px; border-radius:9999px;
  border:1px solid #e5e7eb; transition:border-color .2s, background-color .2s;
}
.value-toggle::before,
.value-toggle::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; border-radius:2px;
  background:var(--ink); transform:translate(-50%,-50%); transition:transform .3s ease;
}
.value-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.value-item summary:hover .value-toggle{ border-color:var(--eco-600); }
.value-item[open] .value-toggle{ border-color:var(--eco-600); background:var(--eco); }
.value-item[open] .value-toggle::after{ transform:translate(-50%,-50%) rotate(0deg); }

.value-text{
  max-width:46rem; padding:0 0 1.4rem calc(14px + .85rem); margin-top:-.25rem;
  font-size:15.5px; line-height:1.7; color:#4b5563;
}

/* Abertura suave onde o navegador suporta animar até height:auto */
@supports (interpolate-size: allow-keywords){
  .value-item{ interpolate-size:allow-keywords; }
  .value-item::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .35s cubic-bezier(.2,.7,.2,1), content-visibility .35s allow-discrete;
  }
  .value-item[open]::details-content{ block-size:auto; }
}


/* ==========================================================================
   Hero: foto da árvore com anéis de eco
   ========================================================================== */

/* O palco é um container: a foto ocupa 82% do maior quadrado que cabe nele,
   deixando folga para os anéis */
.hero-stage{ display:flex; align-items:center; justify-content:center; container-type:size; }
.hero-photo{ position:relative; width:calc(min(100cqw, 100cqh) * .82); aspect-ratio:1; }
.hero-photo img{ position:relative; display:block; width:100%; height:100%; }

/* SVG com 3x o diâmetro da foto, centrado nela; o painel recorta o excesso */
.hero-rings{
  position:absolute; left:50%; top:50%; width:300%; height:300%;
  transform:translate(-50%,-50%); overflow:visible; pointer-events:none;
}
.hero-rings circle{
  fill:none; stroke:var(--eco); stroke-width:1; opacity:var(--o, .2);
  vector-effect:non-scaling-stroke;
}
.hero-rings .ring-terra{ stroke:#A27554; --o:.6; }
.hero-rings .ring-dots{ stroke-width:2; stroke-linecap:round; stroke-dasharray:0 7; --o:.4; }

/* Ondas que saem da borda da foto e se dissolvem */
.hero-rings .ring-echo{
  opacity:0; transform-box:fill-box; transform-origin:center;
  animation:eco-echo 7.5s cubic-bezier(.2,.6,.35,1) infinite;
}
.hero-rings .ring-echo:nth-of-type(8){ animation-delay:2.5s; }
.hero-rings .ring-echo:nth-of-type(9){ animation-delay:5s; }
@keyframes eco-echo{
  0%  { transform:scale(1);   opacity:.5; }
  100%{ transform:scale(2.6); opacity:0; }
}


/* ==========================================================================
   Textura sutil para blocos escuros
   ========================================================================== */

.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   Formulário
   ========================================================================== */

.field{
  width:100%; background:#fff; border:1px solid rgba(31,41,55,.14); border-radius:12px;
  padding:.85rem 1rem; font-size:.9375rem; color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.field::placeholder{ color:#9CA3AF; }
.field:focus{ outline:none; border-color:var(--eco-600); box-shadow:0 0 0 4px rgba(124,205,124,.22); }
.field-label{ display:block; font-size:.8125rem; font-weight:600; letter-spacing:.01em; color:#374151; margin-bottom:.4rem; }

select.field{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px; padding-right:2.6rem;
}

/* Armadilha para robôs: fora da tela, mas não escondida de scripts */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */

.wa{ position:fixed; right:18px; bottom:18px; z-index:50; display:flex; align-items:center; gap:.6rem; }
.wa-label{
  background:#fff; color:var(--ink); font-size:.8125rem; font-weight:600; padding:.6rem .9rem; border-radius:999px;
  box-shadow:0 10px 30px -12px rgba(16,39,24,.5); opacity:0; transform:translateX(8px); transition:opacity .3s, transform .3s;
  pointer-events:none; display:none;
}
@media (min-width:768px){ .wa-label{ display:block; } }
.wa:hover .wa-label{ opacity:1; transform:none; }

.wa-btn{
  width:58px; height:58px; border-radius:999px; display:grid; place-items:center; background:#25D366; color:#0B1C12;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.7); transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.wa-btn:hover{ transform:scale(1.07); }
.wa-btn svg{ width:28px; height:28px; }


/* ==========================================================================
   Menu mobile
   ========================================================================== */

#mobileMenu{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.7,.2,1); }
#mobileMenu.open{ max-height:520px; }


/* ==========================================================================
   Como funciona: numeração dos passos
   ========================================================================== */

.step-num{ font-family:'Bricolage Grotesque',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }


/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn:hover, .card:hover, .wa-btn:hover{ transform:none; }
  .hero-rings .ring-echo{ animation:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}