/* =====================================================================
   AquaSmart — apresentação pública (index.php)
   Usa os tokens compartilhados; nada de cor solta além dos degradês da
   marca, que se repetem no menu lateral e na tela de acesso.
   ===================================================================== */

.inicio { overflow-x: clip; }

.inicio__container {
  width: 100%;
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: 0 var(--esp-6);
}

@media (max-width: 519px) {
  .inicio__container { padding: 0 var(--esp-4); }
}

/* ------------------------------------------------------------- Abertura */

.inicio__heroi {
  position: relative;
  padding: var(--esp-12) 0 var(--esp-20);
  background: var(--gradiente-heroi), linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-superficie) 100%);
  border-bottom: 1px solid var(--cor-borda);
}

.inicio__abertura {
  display: grid;
  gap: var(--esp-12);
  align-items: center;
}

.inicio__chamada { min-width: 0; }

.inicio__pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 32px;
  margin: 0 0 var(--esp-6);
  padding: 0 14px;
  border: 1px solid var(--cor-primaria-media);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-primaria-texto);
  font-size: var(--texto-2s);
  font-weight: var(--peso-forte);
  box-shadow: var(--sombra-xs);
}

.inicio__pilula span {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--cor-agua);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-agua) 22%, transparent);
}

.inicio h1 {
  max-width: 17ch;
  margin: 0 0 var(--esp-6);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.inicio h1 span {
  display: block;
  background: linear-gradient(100deg, #1d8fe1 0%, #0a66c2 45%, #2a9fd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.inicio__resumo {
  max-width: 50ch;
  margin: 0 0 var(--esp-8);
  color: var(--cor-texto-suave);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}

/* Botões lado a lado com a mesma largura (AGENTS.md 2.1, 11/10/2026): o
   rótulo mais longo define as duas colunas. No celular, um embaixo do outro,
   na largura toda. */
.inicio__acoes {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--esp-3);
}

.inicio__botao {
  min-height: 52px;
  padding-inline: var(--esp-6);
  font-size: 15px;
}

.inicio__garantias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-6);
  margin: var(--esp-8) 0 0;
  padding: 0;
  list-style: none;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.inicio__garantias li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.inicio__garantias svg { width: 18px; height: 18px; color: var(--cor-sucesso); }

@media (max-width: 519px) {
  .inicio__acoes { display: grid; grid-auto-flow: row; }
  .inicio__heroi { padding: var(--esp-8) 0 var(--esp-12); }
}

@media (min-width: 1024px) {
  .inicio__abertura { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--esp-16); }
  .inicio__heroi { padding: var(--esp-16) 0 var(--esp-20); }
}

/* --------------------------------------------- Demonstração do painel */

.inicio__demonstracao {
  position: relative;
  margin: 0;
}

.inicio__demonstracao::before {
  content: "";
  position: absolute;
  inset: 8% -4% -6% 10%;
  z-index: 0;
  border-radius: 40px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cor-agua) 30%, transparent), transparent);
  filter: blur(30px);
}

.demo {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--esp-5);
  max-width: 460px;
  margin: 0 auto;
  padding: var(--esp-6);
  border: 1px solid var(--cor-borda);
  border-radius: 24px;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-elevada);
}

.demo__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
}

.demo__tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-destaque);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo__tipo svg { width: 14px; height: 14px; color: var(--cor-primaria); }

.demo__nome {
  margin: 0;
  font-size: var(--texto-ml);
  font-weight: var(--peso-destaque);
}

.demo__corpo {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
  padding: var(--esp-4);
  border-radius: 18px;
  background:
    radial-gradient(260px 180px at 0% 100%, color-mix(in srgb, var(--cor-agua) 16%, transparent), transparent 70%),
    var(--cor-superficie-2);
}

@media (min-width: 420px) {
  .demo__corpo { grid-template-columns: 170px minmax(0, 1fr); }
}

.demo__gota {
  position: relative;
  width: min(100%, 190px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
}

.inicio__gota { display: block; width: 100%; height: 100%; overflow: visible; }
.inicio__gota-fundo { fill: var(--cor-agua-fundo); }
.inicio__gota-cor-topo { stop-color: var(--cor-gota-topo); }
.inicio__gota-cor-base { stop-color: var(--cor-gota-base); }
.inicio__gota-onda-suave { fill: var(--cor-agua); opacity: .35; }
.inicio__gota-contorno { fill: none; stroke: var(--cor-primaria); stroke-width: 2; }
.inicio__gota-reflexo { fill: none; stroke: var(--cor-gota-texto); stroke-width: 4; stroke-linecap: round; opacity: .25; }

.inicio__gota-valor {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--cor-gota-texto);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.inicio__gota-valor p {
  margin: 0;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.inicio__gota-valor p span { font-size: var(--texto-xl); }
.inicio__gota-valor > span { font-size: var(--texto-xs); font-weight: var(--peso-forte); opacity: .9; }

.demo__dados {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
}

.demo__dados div { padding-bottom: var(--esp-3); border-bottom: 1px solid var(--cor-borda); }
.demo__dados div:last-child { padding-bottom: 0; border-bottom: 0; }

.demo__dados dt {
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.demo__dados dd {
  margin: 2px 0 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-destaque);
  font-variant-numeric: tabular-nums;
}

.demo__grafico svg { display: block; width: 100%; height: 64px; }
.demo__area-topo { stop-color: var(--cor-agua); stop-opacity: .28; }
.demo__area-base { stop-color: var(--cor-agua); stop-opacity: 0; }
.demo__area { fill: url(#demo-area); }
.demo__linha { fill: none; stroke: var(--cor-agua); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Canal do módulo de relés na demonstração (10/10/2026): a mesma leitura
   do card do painel — nome, regra e estado da saída. */
.demo__canal {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}

.demo__canal > svg { flex: none; width: 20px; height: 20px; color: var(--cor-primaria); }
.demo__canal > div { flex: 1 1 auto; min-width: 0; }
.demo__canal p { margin: 0; }
.demo__canal-nome { font-size: var(--texto-sm); font-weight: var(--peso-destaque); }
.demo__canal-regra { color: var(--cor-texto-suave); font-size: var(--texto-xs); }
.demo__canal .selo { flex: none; }

/* No celular estreito o selo desce para baixo do texto, alinhado com ele
   (ícone de 20 px + espaço de 12 px), e nome e regra ganham a largura. */
@media (max-width: 419px) {
  .demo__canal { flex-wrap: wrap; }
  .demo__canal > div { flex-basis: calc(100% - 32px); }
  .demo__canal .selo { margin-left: 32px; }
}

.demo__rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: 12px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-texto);
}

.demo__rodape svg { flex: none; width: 20px; height: 20px; }
.demo__rodape p { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-medio); }

.inicio__demonstracao figcaption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  max-width: 460px;
  margin: var(--esp-4) auto 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  text-align: center;
}

/* ------------------------------------------------------------ Seções */

.inicio__secao { padding-top: var(--esp-20); scroll-margin-top: var(--esp-16); }

.inicio__titulo-secao {
  max-width: 680px;
  margin: 0 auto var(--esp-10);
  text-align: center;
}

.inicio__titulo-secao .sobretitulo { justify-content: center; }

.inicio h2 {
  margin: 0 0 var(--esp-3);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.inicio__titulo-secao p:last-child,
.inicio__clareza p,
.inicio__convite p {
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

.inicio__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cor-primaria-clara), var(--cor-primaria-media));
  color: var(--cor-primaria);
}

.inicio__icone svg { width: 24px; height: 24px; }

/* Benefícios */
.inicio__beneficios {
  display: grid;
  gap: var(--esp-5);
  margin-top: calc(var(--esp-12) * -1);
  position: relative;
}

.inicio__beneficios article {
  display: grid;
  gap: var(--esp-3);
  align-content: start;
  min-width: 0;
  padding: var(--esp-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-card);
}

.inicio .inicio__beneficios h2 { margin: var(--esp-2) 0 0; font-size: var(--texto-ml); letter-spacing: -0.01em; font-weight: var(--peso-destaque); }
.inicio__beneficios p { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); }

@media (min-width: 768px) {
  .inicio__beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Como funciona */
.inicio__passos {
  display: grid;
  gap: var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.inicio__passos li {
  position: relative;
  display: grid;
  gap: var(--esp-3);
  align-content: start;
  padding: var(--esp-8) var(--esp-6) var(--esp-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
}

.inicio__passos h3 { margin: 0; font-size: var(--texto-ml); }
.inicio__passos p { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); }

.inicio__passo-numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gradiente-marca);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(10, 102, 194, .28);
}

@media (min-width: 900px) {
  .inicio__passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
  .inicio__passos li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 52px;
    right: calc(var(--esp-6) * -1);
    width: var(--esp-6);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cor-borda-forte) 0 6px, transparent 6px 10px);
  }
}

/* Clareza: faixa escura da marca */
.inicio__clareza {
  display: grid;
  gap: var(--esp-8);
  padding: var(--esp-10) var(--esp-6);
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(77, 163, 255, .25), transparent 60%),
    linear-gradient(150deg, #0b1b33 0%, #0e2a52 60%, #0b3d73 100%);
  color: #e7eef8;
}

.inicio__clareza .sobretitulo { color: #7cc4ff; }
.inicio .inicio__clareza h2 { color: #ffffff; }
.inicio__clareza > div > p { color: #b8c9e0; margin: 0; }

.inicio__estados { display: grid; gap: var(--esp-3); margin: 0; }

.inicio__estado {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}

.inicio__estado dd { margin: 0; color: #cddaeb; font-size: var(--texto-sm); }

@media (min-width: 900px) {
  .inicio__clareza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: var(--esp-12); gap: var(--esp-12); }
}

/* Requisitos e recursos do módulo (10/10/2026): a mesma lista em cartões,
   três por linha a partir de 900 px. Linhas iguais: cartão irmão com a
   mesma altura também no celular, onde ficam empilhados. */
.inicio__requisitos,
.inicio__recursos {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inicio__requisitos li,
.inicio__recursos li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
}

.inicio__requisitos strong,
.inicio__recursos strong { display: block; font-size: var(--texto-md); }
.inicio__requisitos span:not(.inicio__icone),
.inicio__recursos span:not(.inicio__icone) { display: block; margin-top: var(--esp-1); color: var(--cor-texto-suave); font-size: var(--texto-sm); }

@media (min-width: 900px) {
  .inicio__requisitos,
  .inicio__recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Perguntas frequentes */
.inicio__faq {
  display: grid;
  gap: var(--esp-3);
  max-width: 860px;
  margin: 0 auto;
}

.inicio__faq details {
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: var(--cor-superficie);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.inicio__faq details[open] { border-color: var(--cor-primaria-media); box-shadow: var(--sombra-card); }

.inicio__faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 60px;
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--texto-md);
  font-weight: var(--peso-forte);
  list-style: none;
  cursor: pointer;
}

.inicio__faq summary::-webkit-details-marker { display: none; }

.inicio__faq summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-pilula);
  background:
    linear-gradient(var(--cor-primaria), var(--cor-primaria)) center / 12px 2px no-repeat,
    linear-gradient(var(--cor-primaria), var(--cor-primaria)) center / 2px 12px no-repeat,
    var(--cor-primaria-clara);
  transition: transform var(--transicao);
}

.inicio__faq details[open] summary::after {
  background:
    linear-gradient(var(--cor-primaria), var(--cor-primaria)) center / 12px 2px no-repeat,
    var(--cor-primaria-clara);
}

.inicio__faq summary:focus-visible { outline-offset: -3px; border-radius: 14px; }

.inicio__faq details p {
  margin: 0;
  padding: 0 var(--esp-5) var(--esp-5);
  color: var(--cor-texto-suave);
  line-height: 1.65;
}

/* Convite final */
.inicio__convite {
  display: grid;
  gap: var(--esp-8);
  margin-bottom: var(--esp-20);
  padding: var(--esp-10) var(--esp-6);
  border-radius: 28px;
  background:
    radial-gradient(500px 260px at 100% 100%, rgba(255, 255, 255, .16), transparent 60%),
    var(--gradiente-marca);
  color: #ffffff;
  box-shadow: 0 24px 48px rgba(10, 102, 194, .25);
}

.inicio__convite .sobretitulo { color: #cfe6ff; }
.inicio .inicio__convite h2 { color: #ffffff; }
.inicio__convite > div > p { margin: 0; color: #dcebff; }

.inicio__convite .botao--primario {
  --botao-fundo: #ffffff;
  --botao-texto: #0a4f99;
  --botao-borda: #ffffff;
  --botao-fundo-hover: #eaf3ff;
  box-shadow: 0 6px 16px rgba(3, 30, 66, .25);
}

.inicio__convite .botao--secundario {
  --botao-fundo: transparent;
  --botao-texto: #ffffff;
  --botao-borda: rgba(255, 255, 255, .5);
  --botao-fundo-hover: rgba(255, 255, 255, .12);
  box-shadow: none;
}

.inicio__convite .botao--secundario:hover { border-color: #ffffff; }

@media (min-width: 900px) {
  .inicio__convite { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: var(--esp-12); }
  .inicio__convite-acoes { display: flex; justify-content: flex-end; }
}