/*
 * CSS exclusivo da home. Carrega depois de app-blue.css e sobrescreve por
 * especificidade -- todo seletor aqui comeca com ".home-page" (wrapper
 * proprio da view app/Views/site/home.php) para nunca vazar estilo para as
 * paginas internas, que nao tem esse wrapper.
 */
:root{
  --cta:#15803d;      /* verde de acao: unico significado em toda a home = "isto converte" */
  --cta-dark:#116932;
  --cta-shadow:rgba(21,128,61,.28);
}

/* ------------------------------------------------------------ ritmo geral */
.home-page .section-head{position:relative;padding-left:20px}
.home-page .section-head::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--accent),var(--cta));
}
.home-page section.section{padding-top:64px;padding-bottom:64px}
.home-page section.compact-band{padding-top:30px;padding-bottom:30px}

/* Botao padrao da home: verde = acao principal em qualquer secao. */
.home-page .btn{background:var(--cta);border-color:var(--cta);color:#fff;box-shadow:0 10px 24px var(--cta-shadow)}
.home-page .btn:hover{background:var(--cta-dark);border-color:var(--cta-dark)}
.home-page .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}
.home-page .btn-light{background:transparent;color:inherit;border-color:var(--line);box-shadow:none}

/* ------------------------------------------------------------------ hero */
/* Tres botoes de mesmo peso visual obrigavam o visitante a escolher sem
   pista de qual e a acao principal. Agora ha uma hierarquia clara:
   1) verde solido (converte agora) 2) contorno (fala com humano)
   3) texto sublinhado (so quer olhar as solucoes antes). */
.home-page .hero .actions .btn{box-shadow:none}
.home-page .hero .actions .btn:nth-child(1){
  background:var(--cta);border-color:var(--cta);color:#fff;
  box-shadow:0 14px 30px rgba(21,128,61,.38);
}
.home-page .hero .actions .btn:nth-child(1):hover{background:var(--cta-dark);border-color:var(--cta-dark)}
.home-page .hero .actions .btn:nth-child(2){
  background:transparent;border-color:rgba(255,255,255,.55);color:#fff;
}
.home-page .hero .actions .btn:nth-child(2):hover{border-color:#fff}
.home-page .hero .actions .btn:nth-child(3){
  background:transparent;border-color:transparent;color:#dbe8f7;
  text-decoration:underline;text-underline-offset:3px;padding-left:8px;padding-right:8px;
}

/* --------------------------------------------------- produtos (atalhos) */
.home-page .product-buttons-section{background:var(--soft)}
.home-page .product-button small{color:var(--cta)}

/* ---------------------------------------------------- grade de solucoes */
/*
 * O dono do site reclamou que os 6 cards competem entre si sem foco. SCI e
 * ZWeb sao os dois produtos que sustentam a recorrencia do negocio (sistema
 * do escritorio + ERP dos clientes do escritorio); os outros quatro sao
 * complementares. A grade agora tem dois niveis: SCI/ZWeb em destaque
 * (classe "featured", ocupam metade da largura cada) e os quatro restantes
 * como acesso rapido menor (classe "compact"), sem remover nenhum link
 * interno existente -- so muda tamanho e peso visual.
 */
.home-page .solution-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.home-page .solution-card{
  min-height:0;
}
.home-page .solution-card.featured{
  grid-column:span 2;
}
.home-page .solution-card.compact{
  grid-column:span 1;
  padding:16px;
  gap:9px;
}
.home-page .solution-card.compact h3{font-size:18px}
.home-page .solution-card.compact p{font-size:14.5px}
.home-page .solution-card.compact .mini-links a{padding:6px 8px;font-size:11.5px}
.home-page .solution-card.compact > img{margin:-16px -16px 6px}

/* Distincao clara entre "clicavel" (verde, botao) e "navegacao secundaria"
   (chip cinza, ja existente). O antigo .text-link era so texto colorido,
   dificil de reconhecer como botao. */
.home-page .solution-card .text-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;margin-top:2px;
  border-radius:8px;background:var(--cta);color:#fff;
  font-weight:900;font-size:14px;white-space:nowrap;
  box-shadow:0 10px 22px var(--cta-shadow);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.home-page .solution-card .text-link:hover{
  background:var(--cta-dark);transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(21,128,61,.34);
}
.home-page .solution-card .text-link::after{content:"\2192"}

/* numero da posicao mais discreto para nao competir com o titulo */
.home-page .solution-card > span{
  width:32px;height:32px;font-size:13px;
}

@media (max-width:1120px){
  .home-page .solution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .solution-card.featured{grid-column:span 2}
  .home-page .solution-card.compact{grid-column:span 1}
}
@media (max-width:620px){
  .home-page .solution-grid{grid-template-columns:1fr}
  .home-page .solution-card.featured,
  .home-page .solution-card.compact{grid-column:span 1}
  .home-page .solution-card.compact > img{aspect-ratio:16/9}
}

/* ------------------------------------------------------------- parceiros */
.home-page .partners-section{background:var(--soft)}
.home-page .partner-card{background:#fff}
.home-page .partner-card .btn{min-height:44px}

/* --------------------------------------------------------- faixa de valor */
.home-page .value-strip div{box-shadow:0 8px 22px rgba(7,26,51,.05)}

/* ------------------------------------------------ produtos em destaque */
.home-page .grid .product .btn{min-height:44px}

/* ---------------------------------------------------------- chamada final */
.home-page .final-cta .btn{background:var(--cta);border-color:var(--cta);color:#fff}
.home-page .final-cta .btn:hover{background:var(--cta-dark);border-color:var(--cta-dark)}

/* ------------------------------------------------------- mapa de solucoes */
.home-page .link-map{background:#fff}

/* --------------------------------------------------------------- ajustes */
@media (max-width:900px){
  .home-page section.section{padding-top:46px;padding-bottom:46px}
}
@media (max-width:620px){
  .home-page .section-head{padding-left:16px}
  .home-page section.section{padding-top:36px;padding-bottom:36px}
  .home-page .hero .actions .btn:nth-child(3){padding-left:2px;padding-right:2px}
}