/* Estilos exclusivos da home (hub de soluções). A base vem de style.css */

/* Hero com foto da marca */
.home-hero {
  position: relative; padding: 112px 0 120px;
  background:
    linear-gradient(100deg, rgba(25,23,28,.96) 0%, rgba(25,23,28,.88) 45%, rgba(25,23,28,.55) 100%),
    linear-gradient(0deg, rgba(211,136,62,.35), rgba(211,136,62,.35)),
    url("../img/hero-fundo.jpg") center / cover no-repeat;
}
.home-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
.home-hero .container { grid-template-columns: 1.2fr 1fr; }

.home-hero .credencial { margin: 28px 0 0; font-size: .95rem; opacity: .75; padding-left: 14px; border-left: 3px solid var(--cor-destaque); }

/* Painel ilustrativo */
.hub-painel {
  background: rgba(46,43,51,.92); border-radius: var(--raio); padding: 24px 28px 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); border-bottom: 6px solid var(--cor-destaque);
  backdrop-filter: blur(6px);
}
.painel-topo { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.pontos { display: flex; gap: 6px; }
.pontos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.pontos i:first-child { background: var(--cor-destaque); }
.painel-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .95rem;
  opacity: 0; transform: translateX(-12px); animation: entra .5s ease forwards;
}
.painel-linha:nth-of-type(2) { animation-delay: .4s; }
.painel-linha:nth-of-type(3) { animation-delay: .8s; }
.painel-linha:nth-of-type(4) { animation-delay: 1.2s; }
.painel-linha:nth-of-type(5) { animation-delay: 1.6s; }
.painel-linha:nth-of-type(6) { animation-delay: 2s; }
.painel-linha span { color: rgba(255,255,255,.85); }
.painel-linha strong { font-size: .8rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.painel-linha .ok { background: rgba(211,136,62,.2); color: var(--cor-destaque); }
.painel-linha .alerta { background: #fff; color: var(--cor-escura); }
.painel-barra { height: 6px; background: rgba(255,255,255,.1); border-radius: 999px; margin-top: 20px; overflow: hidden; }
.painel-barra span { display: block; height: 100%; width: 0; background: var(--cor-destaque); animation: enche 2.4s ease .3s forwards; }
.painel-rodape { margin-top: 12px; font-size: .85rem; color: rgba(255,255,255,.6); }
@keyframes entra { to { opacity: 1; transform: none; } }
@keyframes enche { to { width: 93%; } }

/* Dores */
.dores { background: var(--cor-destaque); padding: 80px 0; }
.dores h2 { max-width: 760px; }
.dores h2 em { font-style: normal; color: #fff; }
.dores-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 36px 0; }
.dores-grade p {
  background: rgba(25,23,28,.92); color: rgba(255,255,255,.85); border-radius: var(--raio);
  padding: 24px; font-size: 1rem;
}
.dores-grade strong { display: block; color: var(--cor-destaque); font-family: "Sora", sans-serif; font-size: 1.2rem; margin-bottom: 6px; }
.dores-virada { font-size: 1.2rem; font-weight: 600; color: var(--cor-escura); max-width: 760px; }

/* Soluções */
.solucoes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.produto { position: relative; transition: transform .2s, box-shadow .2s; }
.produto:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(25,23,28,.14); }
.produto.destaque { background: var(--cor-escura); }
.produto.destaque h3 { color: #fff; }
.produto.destaque p, .produto.destaque li { color: rgba(255,255,255,.75); }
.produto.destaque .selo { background: var(--cor-destaque); color: var(--cor-escura); }
.cartao .icone svg { width: 26px; height: 26px; fill: none; stroke: var(--cor-destaque); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.selo {
  position: absolute; top: 20px; right: 20px; font-size: .72rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
  background: var(--cor-escura); color: #fff;
}
.cartao .subtitulo { color: var(--cor-destaque); font-weight: 600; margin: -4px 0 10px; font-size: .95rem; }
.cartao-medida { border: 2px dashed rgba(25,23,28,.2); border-top: 4px solid var(--cor-escura); background: transparent; box-shadow: none; }

/* Resultados */
.resultados { background: var(--cor-escura); color: #fff; }
.resultados h2 { color: #fff; margin-bottom: 36px; }
.resultados .rotulo { color: var(--cor-destaque); }
.experiencia {
  display: flex; align-items: center; gap: 28px; margin-bottom: 44px; padding: 28px 32px;
  border-radius: var(--raio); background: rgba(255,255,255,.05); border-left: 4px solid var(--cor-destaque);
}
.experiencia strong { font-family: "Sora", sans-serif; font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; color: var(--cor-destaque); }
.experiencia p { color: rgba(255,255,255,.75); max-width: 640px; }
.experiencia span { display: block; color: #fff; font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.2rem; margin-bottom: 4px; }
.resultados-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.resultados-grade div { border-top: 3px solid var(--cor-destaque); padding-top: 20px; }
.resultados-grade h3 { color: #fff; font-size: 1.15rem; margin-bottom: 8px; }
.resultados-grade p { color: rgba(255,255,255,.7); }

/* Como funciona */
.passos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; counter-reset: passo; }
.passos li { background: var(--cor-cartao); border-radius: var(--raio); padding: 28px; box-shadow: var(--sombra); }
.passos .numero {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--cor-destaque); color: var(--cor-escura); font-family: "Sora", sans-serif;
  font-weight: 700; margin-bottom: 16px;
}
.passos h3 { font-size: 1.1rem; margin-bottom: 8px; }
.passos p { color: var(--cor-texto-suave); }

/* Para quem */
.para-quem { background: #fff; }
.publicos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.publico { background: var(--cor-fundo); border-radius: var(--raio); padding: 32px 28px; border-left: 4px solid var(--cor-destaque); }
.publico h3 { font-size: 1.2rem; margin-bottom: 8px; }
.publico p { color: var(--cor-texto-suave); margin-bottom: 12px; }

/* Consultoria */
.sobre .foto { padding: 0; }
.sobre .btn { margin-top: 24px; }

/* Formulário */
.interesses { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.interesses legend { font-weight: 500; font-size: .9rem; margin-bottom: 8px; }
.interesses label { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 0; cursor: pointer; }
.interesses input { width: 18px; height: 18px; accent-color: var(--cor-destaque); flex-shrink: 0; }

/* Entrada ao rolar */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar, .painel-linha { opacity: 1; transform: none; transition: none; animation: none; }
  .painel-barra span { width: 93%; animation: none; }
  .produto:hover { transform: none; }
}

@media (max-width: 900px) {
  .home-hero .container, .solucoes-grade, .publicos, .passos { grid-template-columns: 1fr; }
  .dores-grade, .resultados-grade { grid-template-columns: 1fr 1fr; }
  .hub-painel { max-width: 520px; }
}
@media (max-width: 560px) {
  .home-hero { padding: 72px 0 80px; }
  .dores-grade, .resultados-grade, .interesses { grid-template-columns: 1fr; }
  .experiencia { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
}