/* =========================================================
   MARÉ — estilos da landing page
   Organização: 1) cores e medidas  2) base  3) componentes
   4) seções  5) telas pequenas
   ========================================================= */

/* 1) CORES E MEDIDAS DA MARCA ------------------------------ */
:root {
  --rio: #0A5B8C;      /* Azul Rio Profundo: títulos, botões */
  --agua: #0BB1D4;     /* Azul Água: interações e gráficos */
  --amazonia: #168B68; /* Verde Amazônia: complementos */
  --sol: #F4A261;      /* Sol da Amazônia: destaques pontuais (código do Prompt Mestre) */
  --areia: #F2F7FB;    /* Areia e Nuvens: fundos claros */
  --texto: #1d3b4f;
  --texto-suave: #45606f;
  --branco: #ffffff;

  --fonte-titulo: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Lato", "Segoe UI", Arial, sans-serif;

  --largura: 1120px;
  --raio: 20px;
}

/* 2) BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--branco);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--rio); line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--rio); }
:focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; }

.container { width: min(100% - 40px, var(--largura)); margin-inline: auto; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--rio); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.pular:focus { left: 8px; }

/* 3) COMPONENTES --------------------------------------------- */
.rotulo {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amazonia); margin-bottom: .8em;
}
.rotulo--claro { color: #bfe9f4; }
.selo {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 700; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--rio);
  background: #fff; border: 1px solid #cfe3ef; border-radius: 999px;
  padding: 7px 16px; margin-bottom: 1.3em;
}
.botao {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem;
  text-decoration: none; border-radius: 999px; padding: 15px 30px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s, background .15s;
}
.botao:hover { transform: translateY(-2px); }
.botao--primario { background: var(--rio); color: #fff; box-shadow: 0 8px 20px rgba(10,91,140,.25); }
.botao--primario:hover { background: #084a73; }
.botao--secundario { color: var(--rio); border-color: var(--rio); background: #fff; }
.botao--secundario:hover { background: var(--areia); }
.botao--sol { background: var(--sol); color: #14324a; width: 100%; font-size: 1.05rem; }
.botao--sol:hover { background: #f09550; }
.botao--pequeno { background: var(--rio); color: #fff !important; padding: 10px 20px; font-size: .9rem; }

.tag {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px;
}
.tag--mvp { background: #e3f4ee; color: #0e6b4f; }
.tag--futuro { background: #fff1e4; color: #9a5412; }
.tag--claro { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); }

/* Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); transition: box-shadow .2s; }
.topo.com-sombra { box-shadow: 0 2px 16px rgba(10,91,140,.12); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.topo__logo img { height: 54px; width: auto; }
.topo__menu { display: flex; align-items: center; gap: 26px; }
.topo__menu a:not(.botao) { font-family: var(--fonte-titulo); font-weight: 500; font-size: .93rem; text-decoration: none; color: var(--texto); }
.topo__menu a:not(.botao):hover { color: var(--rio); }
.topo__menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.topo__menu-btn span { display: block; width: 26px; height: 3px; background: var(--rio); margin: 5px 0; border-radius: 2px; }

/* 4) SEÇÕES -------------------------------------------------- */
.secao { padding: 96px 0; }
.secao--areia { background: var(--areia); }
.secao__intro { max-width: 800px; color: var(--texto-suave); }

/* Início */
.hero { position: relative; padding-top: 36px; overflow: hidden;
  background: radial-gradient(circle at 78% 30%, #fff3e6 0%, rgba(255,255,255,0) 45%), linear-gradient(180deg, #fff 0%, var(--areia) 100%); }
.hero__grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero__lead { font-size: 1.2rem; color: var(--texto-suave); max-width: 600px; }
.hero__botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; }
.hero__imagem { position: relative; display: grid; place-items: center; }
.hero__sol { position: absolute; width: min(78%, 420px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #ffe3bf 0%, #ffd29c 45%, rgba(255,210,156,0) 72%); }
.hero__imagem img { position: relative; max-height: 640px; width: auto; filter: drop-shadow(0 18px 24px rgba(10,91,140,.2)); }
.hero__onda { width: min(1000px, 92%); margin: 8px auto 0; }

/* Faixa com a ideia-força */
.faixa { background: var(--rio); color: #fff; padding: 56px 0; text-align: center; }
.faixa__texto { font-family: var(--fonte-titulo); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.35; max-width: 860px; margin: 0 auto; }

/* Problemas */
.problemas { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.problemas li { position: relative; padding: 16px 18px 16px 52px; background: var(--areia); border-radius: 14px; font-size: 1.02rem; }
.problemas li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--agua); box-shadow: 0 0 0 5px rgba(11,177,212,.18); }

/* Ciclo */
.ciclo { list-style: none; padding: 0; margin: 2.4rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; counter-reset: c; }
.ciclo li { position: relative; flex: 1 1 140px; text-align: center; background: var(--rio); color: #fff; font-family: var(--fonte-titulo); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; padding: 18px 10px; border-radius: 14px; }
.ciclo li:nth-child(2) { background: #0b6c9e; }
.ciclo li:nth-child(3) { background: #0a8aaa; }
.ciclo li:nth-child(4) { background: #0f9a90; }
.ciclo li:nth-child(5) { background: #138f7a; }
.ciclo li:nth-child(6) { background: var(--amazonia); }

/* Módulos */
.modulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 2.4rem; }
.modulo { background: #fff; border: 1px solid #dbe9f2; border-top: 5px solid var(--rio); border-radius: var(--raio); padding: 28px; box-shadow: 0 8px 24px rgba(10,91,140,.07); display: flex; flex-direction: column; }
.modulo--futuro { border-top-color: var(--sol); background: #fffaf5; }
.modulo__icone { height: 56px; width: auto; max-width: 110px; object-fit: contain; object-position: left center; margin-bottom: 16px; }
.modulo__num { font-family: var(--fonte-titulo); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amazonia); margin-bottom: .3em; }
.modulo p:not(.modulo__num) { color: var(--texto-suave); font-size: 1rem; flex: 1; }
.modulo .tag { align-self: flex-start; margin-top: 8px; }

/* Como funciona */
.passos { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.passos li { background: #fff; border-radius: var(--raio); padding: 22px; box-shadow: 0 6px 20px rgba(10,91,140,.07); }
.passos li p { margin: 12px 0 0; font-size: 1rem; color: var(--texto); }
.passos__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amazonia); color: #fff; font-family: var(--fonte-titulo); font-weight: 800; }
.papel { margin-top: 2.6rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; background: #fff; border-radius: var(--raio); padding: 34px; box-shadow: 0 6px 20px rgba(10,91,140,.07); }
.papel p { color: var(--texto-suave); margin-bottom: 0; }
.papel__nota { background: #fff8e6; border-left: 5px solid var(--sol); border-radius: 10px; padding: 16px 18px; font-size: 1rem; color: var(--texto) !important; }

/* Hipóteses e limites */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lista-marcada { list-style: none; padding: 0; margin: 1.4rem 0; }
.lista-marcada li { position: relative; padding-left: 34px; margin-bottom: 14px; }
.lista-marcada li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--agua); }
.lista-marcada--verde li::before { background: var(--amazonia); }
.nota { font-size: 1rem; color: var(--texto-suave); border-top: 1px solid #dbe9f2; padding-top: 16px; }
.cartao { background: var(--areia); border: 1px solid #dbe9f2; border-radius: var(--raio); padding: 32px; }
.cartao h3 { font-size: 1.25rem; }
.cartao .lista-marcada { margin-bottom: 0; }

/* Etapas */
.etapas { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.etapa { background: #fff; border: 1px solid #dbe9f2; border-radius: var(--raio); padding: 26px; }
.etapa--atual { border: 2px solid var(--amazonia); box-shadow: 0 8px 22px rgba(22,139,104,.15); }
.etapa__fase { display: inline-block; font-family: var(--fonte-titulo); font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amazonia); margin-bottom: .5em; }
.etapa p { margin: 0; color: var(--texto-suave); font-size: 1rem; }
.etapas__legenda { margin: 1.4rem 0 0; font-size: 1rem; color: var(--texto-suave); display: flex; align-items: center; gap: 10px; }
.ponto { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--amazonia); background: #fff; flex: none; }

/* Mara: o busto fica dentro de uma moldura, para o corte reto da imagem parecer proposital */
.secao--mara { background: linear-gradient(135deg, #e9f6fb 0%, #fff 60%); }
.mara { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.mara__moldura { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 32px; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; margin-inline: auto;
  background: radial-gradient(circle at 50% 18%, #7fd8ec 0%, #0BB1D4 38%, #0A5B8C 100%); box-shadow: 0 20px 44px rgba(10,91,140,.25); }
.mara__moldura img { width: 94%; height: auto; margin-bottom: -2px; }
.mara__ola { font-family: var(--fonte-titulo); font-style: italic; font-weight: 500; font-size: 2.4rem; color: var(--rio); margin: 0 0 .1em; }
.mara__fala { font-size: 1.35rem; color: var(--texto); max-width: 520px; }

/* Contato */
.secao--contato { background: linear-gradient(160deg, #084a73 0%, var(--rio) 55%, #0b7aa0 100%); color: #e8f3fa; }
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contato h2 { color: #fff; }
.contato__acesso { margin-top: 1.6rem; }
.formulario { background: #fff; color: var(--texto); border-radius: var(--raio); padding: 32px; box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.formulario label { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem; color: var(--rio); margin: 14px 0 6px; }
.formulario label span { font-weight: 500; color: var(--texto-suave); }
.formulario input[type="text"], .formulario select, .formulario textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--texto); border: 1.5px solid #bcd2e0; border-radius: 12px; padding: 12px 14px; background: #fff; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 3px solid rgba(11,177,212,.35); border-color: var(--agua); }
.formulario .formulario__aceite { display: flex; gap: 12px; align-items: flex-start; font-family: var(--fonte-texto); font-weight: 400; font-size: .92rem; color: var(--texto); margin: 18px 0 20px; }
.formulario__aceite input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--rio); }
.formulario__status { margin: 14px 0 0; font-size: .98rem; min-height: 1.4em; }
.formulario__status.erro { color: #a3260f; }
.formulario__status.ok { color: #0e6b4f; }
.formulario .invalido { border-color: #c9402a; }

/* Rodapé */
.rodape { background: #073f61; color: #e8f3fa; padding-top: 64px; }
.rodape__grade { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }
.rodape__logo { width: 220px; }
.rodape__titulo { font-family: var(--fonte-titulo); font-weight: 700; color: #fff; font-size: 1.2rem; margin-bottom: .4em; }
.rodape__autoria { font-size: 1rem; opacity: .85; margin-bottom: 0; }
.rodape__fim { text-align: center; font-size: .9rem; opacity: .75; margin: 48px 0 0; padding: 22px 20px; border-top: 1px solid rgba(255,255,255,.18); }

/* Entrada suave dos blocos (ligada pelo main.js) */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* 5) TELAS PEQUENAS ------------------------------------------ */
@media (max-width: 960px) {
  .hero__grade, .mara, .contato, .duas-colunas, .papel { grid-template-columns: 1fr; }
  .hero__imagem { order: -1; }
  .hero__imagem img { max-height: 400px; }
  .modulos { grid-template-columns: 1fr 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
  .etapas { grid-template-columns: 1fr 1fr; }
  .secao { padding: 68px 0; }
  .rodape__grade { grid-template-columns: 1fr; text-align: center; }
  .rodape__logo { margin-inline: auto; width: 180px; }

  .topo__menu-btn { display: block; }
  .topo__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; box-shadow: 0 12px 20px rgba(10,91,140,.12); }
  .topo__menu.aberto { display: flex; }
  .topo__menu a:not(.botao) { padding: 16px 24px; border-top: 1px solid #e6eef4; }
  .topo__menu .botao { margin: 14px 24px; text-align: center; }
}
@media (max-width: 600px) {
  .problemas, .modulos, .passos, .etapas { grid-template-columns: 1fr; }
  .formulario { padding: 24px; }
  .papel { padding: 24px; }
}

/* FUNDADOR --------------------------------------------------- */
.fundador { max-width: 760px; text-align: center; }
.fundador h2 { margin-bottom: .4rem; }
.fundador__nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.5rem; color: var(--rio); margin: .2rem 0 1rem; }
.fundador__texto { color: var(--texto-suave); margin: 0 auto 1rem; }
.fundador__links { font-size: 1rem; margin: 0; }
.fundador__links a { color: var(--rio); font-weight: 700; }