/* ============================================================
   Patas Lavadas Express — estilos compartilhados (todas as páginas)
   Paleta (Manual da Marca 2026):
   Azul Empoeirado #4A7FA5 · Off-White #F8F6F2 · Argila #A0826D
   Verde Floresta  #3D6B2C · Carvão   #3A3A3A
   Tipografia: Syne (títulos) · Spectral (corpo) · Quicksand (apoio)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { background:#F8F6F2; color:#3A3A3A; font-family:'Spectral',serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ---------- Animações de entrada (reveal) ---------- */
.reveal        { opacity:0; transform:translateY(22px);  transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-left   { opacity:0; transform:translateX(-24px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right  { opacity:0; transform:translateX(24px);  transition:opacity .7s ease, transform .7s ease; }
.reveal-right.visible{ opacity:1; transform:translateX(0); }
.stagger > *   { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.stagger.visible > *:nth-child(1){ opacity:1; transform:translateY(0); transition-delay:0s;   }
.stagger.visible > *:nth-child(2){ opacity:1; transform:translateY(0); transition-delay:.10s; }
.stagger.visible > *:nth-child(3){ opacity:1; transform:translateY(0); transition-delay:.20s; }
.stagger.visible > *:nth-child(4){ opacity:1; transform:translateY(0); transition-delay:.30s; }
.stagger.visible > *:nth-child(5){ opacity:1; transform:translateY(0); transition-delay:.40s; }
.stagger.visible > *:nth-child(6){ opacity:1; transform:translateY(0); transition-delay:.50s; }
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right,.stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Padrão de patinhas (textura institucional) ---------- */
.paw-pattern::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url('../PatasLavadas_Site_Assets/padrao_patinhas.png');
  background-repeat:repeat; background-size:220px auto; opacity:.06;
}
/* Sobre fundo escuro o padrão precisa de um pouco mais de presença */
.paw-pattern-dark::before { opacity:.10; mix-blend-mode:screen; }

/* ---------- Navegação ---------- */
#nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(248,246,242,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .3s, box-shadow .3s; }
#nav.scrolled { background:rgba(248,246,242,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.nav-link { position:relative; }
.nav-link.active { color:#4A7FA5; }
.nav-link.active::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:#4A7FA5; }

/* ---------- Botões ---------- */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:100px; background:#4A7FA5; color:#fff; font-family:'Spectral',serif; font-size:.95rem; font-weight:500; text-decoration:none; transition:background .2s,transform .15s,box-shadow .2s; white-space:nowrap; cursor:pointer; border:none; }
.btn-primary:hover { background:#3d6e91; transform:translateY(-1px); box-shadow:0 8px 24px rgba(74,127,165,.25); }
/* WhatsApp = estilo SECUNDÁRIO da marca (contorno azul), sem o verde padrão.
   Em fundo escuro/azul, usar .btn-outline-white no HTML. */
.btn-wa { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:100px; background:transparent; border:1.5px solid rgba(74,127,165,.45); color:#4A7FA5; font-family:'Spectral',serif; font-size:.95rem; font-weight:500; text-decoration:none; transition:border-color .2s,background .2s,transform .15s; white-space:nowrap; }
.btn-wa:hover { border-color:#4A7FA5; background:rgba(74,127,165,.06); transform:translateY(-1px); }
.btn-outline-white { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:100px; border:1.5px solid rgba(255,255,255,.45); color:#fff; font-family:'Spectral',serif; font-size:.95rem; font-weight:500; text-decoration:none; transition:border-color .2s,background .2s,transform .15s; white-space:nowrap; }
.btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-1px); }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:100px; border:1.5px solid rgba(58,58,58,.25); color:#3A3A3A; font-family:'Spectral',serif; font-size:.95rem; font-weight:500; text-decoration:none; transition:border-color .2s,background .2s,transform .15s; white-space:nowrap; }
.btn-outline:hover { border-color:rgba(58,58,58,.5); background:rgba(58,58,58,.04); transform:translateY(-1px); }
.btn-solid-light { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:100px; background:#F8F6F2; color:#4A7FA5; font-family:'Spectral',serif; font-size:.95rem; font-weight:600; text-decoration:none; transition:background .2s,transform .15s,box-shadow .2s; white-space:nowrap; }
.btn-solid-light:hover { background:#fff; transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.18); }

/* ---------- Cards do problema (versão escura — legada) ---------- */
.problem-card { border:1px solid rgba(255,255,255,.1); border-radius:24px; padding:40px; transition:border-color .3s; }
.problem-card:hover { border-color:rgba(255,255,255,.2); }

/* ---------- Cards emocionais (fundo claro, borda Argila) ---------- */
.card-emocional { background:#FFFDF9; border:1px solid #ECE3D7; border-left:3px solid #A0826D; border-radius:20px; padding:34px 32px; transition:transform .25s, box-shadow .25s; height:100%; }
.card-emocional:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(166,130,109,.16); }

/* ---------- Cards de seleção de público ---------- */
.path-card { background:#FFFDF9; border:1px solid #ECE3D7; border-radius:24px; padding:40px 34px; transition:transform .25s, box-shadow .25s, border-color .25s; display:flex; flex-direction:column; height:100%; }
.path-card:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.08); }
.path-card.tutor:hover   { border-color:#4A7FA5; }
.path-card.sindico:hover { border-color:#3D6B2C; }

/* ---------- Numeração de passos ---------- */
.step-num { font-family:'Syne',sans-serif; font-weight:700; font-size:4rem; line-height:1; color:rgba(74,127,165,.16); margin-bottom:8px; }

/* ---------- Divisores ---------- */
.div-c { width:48px; height:1.5px; background:#4A7FA5; margin:0 auto 24px; }
.div-l { width:48px; height:1.5px; background:#4A7FA5; margin:0 0 24px; }
.div-w { width:48px; height:1.5px; background:rgba(255,255,255,.45); margin:0 auto 24px; }

/* ---------- Cards de benefício (Condomínios) ---------- */
.benefit-card { background:#fff; border:1px solid #ECE3D7; border-radius:20px; padding:28px; transition:transform .2s, box-shadow .2s, border-color .2s; height:100%; }
.benefit-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.06); border-color:#D8CEBF; }
.benefit-feature { background:#4A7FA5; border-radius:24px; padding:36px 40px; position:relative; overflow:hidden; }
.benefit-feature::before { content:''; position:absolute; inset:0; background-image:url('../PatasLavadas_Site_Assets/padrao_patinhas.png'); background-repeat:repeat; background-size:200px auto; opacity:.10; mix-blend-mode:screen; pointer-events:none; }
/* Variante azul do benefit-card: mesma caixa dos demais, destaque só na cor */
.benefit-card--blue { background:#4A7FA5; border-color:#4A7FA5; position:relative; overflow:hidden; }
.benefit-card--blue::before { content:''; position:absolute; inset:0; background-image:url('../PatasLavadas_Site_Assets/padrao_patinhas.png'); background-repeat:repeat; background-size:200px auto; opacity:.10; mix-blend-mode:screen; pointer-events:none; }
.benefit-card--blue:hover { border-color:#3C6A8C; box-shadow:0 12px 30px rgba(74,127,165,.25); }
.benefit-card--blue > * { position:relative; z-index:1; }

/* ---------- Cards de preço ---------- */
.price-card { border:1px solid #E8DECF; border-radius:24px; padding:36px 28px; text-align:center; background:#fff; transition:border-color .25s,transform .25s,box-shadow .25s; }
.price-card:hover { border-color:#4A7FA5; transform:translateY(-4px); box-shadow:0 16px 40px rgba(74,127,165,.12); }

/* ---------- Formulário ---------- */
.f-input { width:100%; padding:13px 16px; border:1.5px solid #D8CEBF; border-radius:14px; background:#FFFDF9; color:#3A3A3A; font-family:'Spectral',serif; font-size:1rem; outline:none; transition:border-color .2s,box-shadow .2s; appearance:none; }
.f-input:focus { border-color:#4A7FA5; box-shadow:0 0 0 3px rgba(74,127,165,.12); }
.f-input::placeholder { color:#B8AFA5; }
.f-input.error { border-color:#c0392b; }

/* ---------- Menu mobile ---------- */
#mobile-nav { max-height:0; overflow:hidden; transition:max-height .4s ease; }
#mobile-nav.open { max-height:460px; }

/* ---------- Itens de infraestrutura ---------- */
.infra-item { display:flex; align-items:flex-start; gap:16px; padding:20px 0; border-bottom:1px solid #EDE5DA; }
.infra-item:last-child { border-bottom:none; }

/* ---------- Rodapé ---------- */
.footer-link { color:rgba(255,255,255,.5); transition:color .2s; }
.footer-link:hover { color:rgba(255,255,255,.9); }