/* =============================================================
   SININHOS OPORTUNOS — base.css
   Tokens (verde do logótipo + âmbar de apoio), reset, tipografia,
   primitivos partilhados por todas as páginas.
   ============================================================= */
:root {
  /* ---- Marca ---- */
  --green:#2e7d32;        /* verde principal (o do logótipo) */
  --green-600:#276b2b;
  --green-700:#1b5e20;
  --green-300:#66bb6a;
  --green-050:#e8f5e9;    /* fundos suaves, círculos de ícone */
  --green-deep:#1b4d3e;   /* topo do gradiente dos heros */
  --green-mid:#2d7a4f;    /* base do gradiente dos heros */

  /* ---- Acento ---- */
  --amber:#ffc107;
  --amber-600:#ffb300;
  --amber-ink:#332b00;    /* texto sobre âmbar (contraste AA) */

  /* ---- Neutros ---- */
  --white:#fff;
  --paper:#fff;
  --bg-soft:#f9fafb;
  --bg-mut:#f3f4f6;
  --ink:#111827;          /* títulos */
  --ink-2:#1f2937;
  --body:#4b5563;         /* texto corrente */
  --muted:#6b7280;
  --faint:#9ca3af;
  --line:#e5e7eb;
  --line-2:#d1d5db;

  /* ---- Escuros (footer) ---- */
  --dark:#111827;
  --dark-deep:#0f1219;
  --dark-line:#1f2937;

  /* ---- Tipografia ---- */
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Forma / profundidade ---- */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-pill:999px;
  --shadow-sm:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -1px rgb(0 0 0 / .06);
  --shadow:0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -2px rgb(0 0 0 / .04);
  --shadow-lg:0 20px 25px -5px rgb(0 0 0 / .1), 0 10px 10px -5px rgb(0 0 0 / .04);
  --shadow-amber:0 4px 10px -2px rgb(255 193 7 / .45);

  /* ---- Movimento ---- */
  --t-fast:.16s ease;
  --t:.28s ease;

  /* ---- Layout ---- */
  --gutter:clamp(1rem, 4vw, 2rem);
  --maxw:1200px;
  --header-h:80px;
  --header-h-sm:64px;
  color-scheme: light;
}

/* ---------------- RESET ---------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);font-size:1rem;line-height:1.65;color:var(--body);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select,button{font:inherit}
ul[class],ol[class]{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
::selection{background:var(--green-050);color:var(--green-700)}

/* ---------------- TIPOGRAFIA ---------------- */
h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(2rem, 5vw, 3rem);font-weight:800}
h2{font-size:clamp(1.8rem, 3.6vw, 2.25rem)}
h3{font-size:clamp(1.15rem, 2vw, 1.35rem)}
p{text-wrap:pretty}
strong{font-weight:600;color:var(--ink-2)}

/* ---------------- LAYOUT ---------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:900px}
.section{padding-block:clamp(3rem, 7vw, 4.5rem)}
.section--soft{background:var(--bg-soft)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--green);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;font-weight:600;
}
.skip-link:focus{left:0}

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

/* ---------------- TÍTULO DE SECÇÃO ---------------- */
.section-title{text-align:center;color:#374151;margin-bottom:2.5rem}
.section-title::after{
  content:'';display:block;width:60px;height:4px;background:var(--green);
  margin:.75rem auto 0;border-radius:2px;
}
.section-head{text-align:center;margin-bottom:3rem}
.section-head h2{margin-bottom:.5rem}
.section-head p{font-size:1.1rem;color:var(--muted)}

/* ---------------- BOTÕES ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.75rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:1rem;line-height:1.2;text-align:center;
  border:2px solid transparent;cursor:pointer;
  transition:background-color var(--t), color var(--t), box-shadow var(--t), transform var(--t), border-color var(--t);
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}

.btn--amber{background:var(--amber);color:var(--amber-ink);box-shadow:var(--shadow-amber)}
.btn--amber:hover{background:var(--amber-600);box-shadow:0 6px 14px -2px rgb(255 193 7 / .55);transform:translateY(-2px)}

.btn--green{background:var(--green);color:#fff;box-shadow:var(--shadow-sm)}
.btn--green:hover{background:var(--green-700);box-shadow:var(--shadow);transform:translateY(-2px)}

.btn--white{background:#fff;color:var(--green);box-shadow:0 4px 6px rgb(0 0 0 / .2)}
.btn--white:hover{background:var(--green-050);transform:translateY(-2px)}

.btn--ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .7)}
.btn--ghost:hover{background:rgb(255 255 255 / .12);border-color:#fff}

.btn--outline{background:transparent;color:var(--green);border-color:var(--green)}
.btn--outline:hover{background:var(--green-050)}

.btn--lg{font-size:1.1rem;padding:.9rem 2.1rem}
.btn--block{width:100%}

/* ---------------- HERO (partilhado) ---------------- */
.hero{
  position:relative;color:#fff;text-align:center;
  padding-block:clamp(3.5rem, 9vw, 6rem);
  background-color:var(--green-deep);
  /* 0.92 de opacidade (em vez de 0.85) para o texto branco passar o contraste AA
     por cima das zonas claras das fotografias. */
  background-image:linear-gradient(rgb(27 77 62 / .92), rgb(45 122 79 / .92)), var(--hero-img);
  background-size:cover;background-position:center;
}
.hero__inner{max-width:800px;margin-inline:auto;padding-inline:var(--gutter)}
.hero h1{color:#fff;text-shadow:0 2px 4px rgb(0 0 0 / .3);margin-bottom:1rem}
.hero__sub{
  font-size:clamp(1.05rem, 2.6vw, 1.35rem);line-height:1.6;
  text-shadow:0 1px 2px rgb(0 0 0 / .3);margin-inline:auto;max-width:700px;
}
.hero__actions{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* ---------------- CARTÕES ---------------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem;box-shadow:var(--shadow);
  transition:transform var(--t), box-shadow var(--t);
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

/* Círculo de ícone */
.icon-circle{
  width:80px;height:80px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;
  background:var(--green-050);color:var(--green);
}
.icon-circle svg{width:38px;height:38px;fill:currentColor}

/* ---------------- REVELAR AO SCROLL (substitui o AOS) ---------------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
[data-reveal="down"]{transform:translateY(-18px)}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}