/* Versão "fachada" (fachada.html): parede branca, verde do letreiro e placa de empresa homologada.
   Carrega depois de styles.css e só redefine cor e alguns detalhes; a estrutura é a mesma. */

.t-fachada {
  --f-green: #027a36;        /* verde do letreiro */
  --f-green-deep: #015a24;   /* frente do toldo, na sombra */
  --f-navy: #0f1e66;         /* "Carretinhas" da logo */
  --f-yellow: #ecdf1c;       /* topo do mapa da logo */

  --ink: var(--f-navy);
  --ink-2: #ffffff;
  --ink-3: rgba(255, 255, 255, .28);
  --green: var(--f-green);
  --green-hi: var(--f-green-deep);
  --green-soft: #e4f2e9;
  --leaf: var(--f-yellow);
  --yellow: var(--f-yellow);
  --paper: #ffffff;
  --tint: #eff5f1;
  --line: #d6e2da;
  --text: #17203a;
  --muted: #556070;
  --on-dark: #ffffff;
  --on-dark-muted: #d9eee1;
}
.t-fachada h2, .t-fachada h3 { color: var(--f-navy); }
.t-fachada :focus-visible { outline-color: var(--f-navy); }

/* ---------- Topo: parede branca com a faixa verde do telhado ---------- */
.t-fachada .top { background: #fff; color: var(--text); border-bottom: 0; box-shadow: 0 1px 0 var(--line); border-top: 6px solid var(--f-green); }
.t-fachada .nav a { color: var(--muted); }
.t-fachada .nav a:hover { color: var(--f-green); }

/* ---------- Hero: o painel verde do letreiro ---------- */
.t-fachada .hero { background: var(--f-green); }
.t-fachada .hero h1 { color: #fff; }
.t-fachada .hero :focus-visible, .t-fachada .sec--dark :focus-visible, .t-fachada .final :focus-visible { outline-color: var(--f-yellow); }
.t-fachada .hero .btn--wa, .t-fachada .sec--dark .btn--wa, .t-fachada .custom .btn--wa { background: var(--f-yellow); color: var(--f-navy); }
.t-fachada .hero .btn--wa:hover, .t-fachada .sec--dark .btn--wa:hover, .t-fachada .custom .btn--wa:hover { background: #fff; }
.t-fachada .btn--ghost { border-color: rgba(255, 255, 255, .6); }
.t-fachada .hero__fig img { border: 4px solid #fff; }
.t-fachada .plate { background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }

/* A faixa refletiva dá lugar à frente do toldo: verde na sombra sobre telha clara */
.t-fachada .tape { height: 18px; background: linear-gradient(var(--f-green-deep) 0 8px, transparent 8px), repeating-linear-gradient(90deg, #c9d3d0 0 6px, #e7ecea 6px 12px); }

.t-fachada .homolog h2 { color: var(--f-green); }

/* ---------- Blocos escuros viram verde ---------- */
.t-fachada .sec--dark { background: var(--f-green-deep); }
.t-fachada .sec--dark h2, .t-fachada .sec--dark h3, .t-fachada .custom h3 { color: #fff; }
.t-fachada .custom { background: var(--f-green); }
.t-fachada .form h2, .t-fachada .form h3 { color: var(--f-navy); }
.t-fachada .card { box-shadow: 0 1px 0 var(--line); }
.t-fachada .card__flag { background: var(--f-green); color: #fff; }
.t-fachada .steps li::before { background: var(--f-green); color: #fff; }
.t-fachada .ceo { border-left-color: var(--f-green); }
.t-fachada .final h2 { color: #fff; }

/* Faixa diagonal da escada, no CTA final */
.t-fachada .final { background: linear-gradient(115deg, var(--f-green-deep) 0 14%, var(--f-green) 14% 86%, var(--f-green-deep) 86%); }

/* ---------- Rodapé: parede branca ---------- */
.t-fachada .foot { background: #fff; color: var(--muted); border-top: 6px solid var(--f-green); }
.t-fachada .foot h3 { color: var(--f-navy); }
.t-fachada .foot a:hover { color: var(--f-green); }
.t-fachada .foot__copy p { border-top-color: var(--line); }

/* ---------- Barra do celular ---------- */
.t-fachada .dock { border-top: 0; box-shadow: 0 -1px 0 var(--line); }

/* Dentro do cartão branco do formulário o botão volta a ser verde */
.t-fachada .form .btn--wa { background: var(--f-green); color: #fff; }
.t-fachada .form .btn--wa:hover { background: var(--f-green-deep); }