/* v0.43.8 — tela inicial (landing). Carregado depois do v060.css.
   Tudo aqui é restrito à tela de entrada (#authView), ao cabeçalho, ao rodapé
   e ao aviso de cookies: painel, agenda pública e telas de admin não mudam. */

/* Fonte Inter hospedada no próprio servidor (subconjunto latino, licença OFL
   em /fonts/OFL.txt). Antes o CSS pedia "Inter" mas nenhum arquivo era
   carregado, então cada aparelho mostrava uma fonte diferente. */
@font-face{font-family:"Inter Landing";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-regular.woff") format("woff")}
@font-face{font-family:"Inter Landing";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-semibold.woff") format("woff")}
@font-face{font-family:"Inter Landing";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-bold.woff") format("woff")}
@font-face{font-family:"Inter Landing";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/inter-extrabold.woff") format("woff")}
#authView,.topbar,.site-footer,.cookie-banner{font-family:"Inter Landing",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
#authView button,.topbar button,.site-footer button,.cookie-banner button{font-family:inherit}

/* Contraste: o texto pequeno do logo e o aviso do Mercado Pago estavam abaixo
   de 4,5:1 (mínimo recomendado para leitura). */
.brand small{color:#5b687c}
.payment-provider-note{color:#566377;font-size:11px;opacity:1}

/* Cabeçalho: "Entrar" e "Testar grátis" só na tela de entrada (a classe
   auth-mode é ligada em showView, em app.js). */
.topbar-actions{align-items:center;display:none;gap:8px}
body.auth-mode .topbar-actions{display:flex}
.topbar-actions .button{font-size:13px;padding:9px 15px}

/* Rótulos de "antes/depois": texto normal, sem caixa-alta espaçada. */
#authView .comparison-label{font-size:12px;letter-spacing:0;text-transform:none}

/* Comparação e perguntas frequentes deixam de ser um cartão dentro de outro:
   os cartões internos ficam direto sobre o fundo e os títulos alinham à
   esquerda, como o título principal. */
.landing-content .comparison-section,.landing-content .faq-section{background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(6px,1.5vw,14px) 0}
.landing-content .comparison-section .landing-section-heading.centered,.landing-content .faq-section .landing-section-heading.centered{text-align:left}
.landing-content .comparison-section .landing-section-heading.centered h2,.landing-content .faq-section .landing-section-heading.centered h2{margin-inline:0}
.landing-content .faq-list{margin-inline:0;max-width:none}
.landing-content .faq-section .landing-final-cta{margin-top:26px}

/* Como o cliente agenda: texto + celular de exemplo (desenhado em HTML/CSS, com
   dados fictícios). */
.landing-demo{align-items:center;background:linear-gradient(135deg,#fff 0%,#fff8ec 100%);display:grid;gap:clamp(24px,5vw,64px);grid-template-columns:minmax(0,1fr) minmax(260px,330px)}
.landing-demo .landing-section-heading h2{max-width:560px}
.demo-steps{counter-reset:demo;display:grid;gap:18px;list-style:none;margin:28px 0 0;padding:0}
.demo-steps li{column-gap:14px;counter-increment:demo;display:grid;grid-template-columns:34px minmax(0,1fr)}
.demo-steps li:before{align-items:center;background:#071327;border-radius:50%;color:#fff;content:counter(demo);display:flex;font-size:14px;font-weight:800;grid-row:span 2;height:34px;justify-content:center;width:34px}
.demo-steps strong{font-size:15px;line-height:1.35}
.demo-steps span{color:var(--muted);font-size:13px;line-height:1.55}
.demo-visual{justify-self:center;margin:0;max-width:310px;position:relative;width:100%}
.demo-phone{background:#fff;border:8px solid #071327;border-radius:36px;box-shadow:0 26px 60px rgba(7,19,39,.22);display:grid;gap:11px;padding:20px 14px 16px;pointer-events:none;user-select:none}
.demo-brand{font-size:13px;font-weight:800;text-align:center}
.demo-lead{color:var(--muted);font-size:10.5px;line-height:1.45;margin:0;text-align:center}
.demo-services{display:grid;gap:7px;grid-template-columns:repeat(3,1fr)}
.demo-service{border:1.5px solid #dfe5ef;border-radius:12px;display:grid;gap:3px;justify-items:center;padding:7px 4px;text-align:center}
.demo-service.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,91,215,.1)}
.demo-thumb{border-radius:9px;height:34px;width:100%}
.demo-service:nth-child(1) .demo-thumb{background:linear-gradient(135deg,#ffb648,#ff8a3d)}
.demo-service:nth-child(2) .demo-thumb{background:linear-gradient(135deg,#6aa3ff,#0f5bd7)}
.demo-service:nth-child(3) .demo-thumb{background:linear-gradient(135deg,#7fd9ae,#1f9d6b)}
.demo-service b{font-size:9.5px;line-height:1.25}
.demo-service small{color:var(--muted);font-size:9px}
.demo-field{border:1px solid #d7deea;border-radius:10px;display:grid;font-size:11px;gap:2px;padding:8px 10px}
.demo-field small{color:var(--muted);font-size:9.5px;font-weight:700}
.demo-slots{display:grid;gap:6px;grid-template-columns:repeat(4,1fr)}
.demo-slots span{border:1px solid #d7deea;border-radius:9px;font-size:10.5px;font-weight:700;padding:7px 0;text-align:center}
.demo-slots .on{background:var(--blue);border-color:var(--blue);color:#fff}
.demo-total{align-items:center;background:#f3f7fd;border-radius:10px;display:flex;font-size:11px;justify-content:space-between;padding:8px 10px}
.demo-button{background:var(--blue);border-radius:11px;color:#fff;font-size:12px;font-weight:800;padding:11px;text-align:center}
.demo-confirmed{align-items:center;background:#fff;border:1px solid #f3d9a8;border-radius:16px;bottom:20px;box-shadow:0 14px 34px rgba(7,19,39,.18);display:flex;gap:10px;left:50%;padding:10px 14px;position:absolute;transform:translateX(-50%);white-space:nowrap}
.demo-confirmed i{align-items:center;background:var(--amber);border-radius:50%;display:flex;flex:0 0 auto;font-style:normal;font-weight:900;height:28px;justify-content:center;width:28px}
.demo-confirmed b,.demo-confirmed span{display:block}
.demo-confirmed b{font-size:12px}
.demo-confirmed span{color:var(--muted);font-size:10.5px;margin-top:1px}
.demo-caption{color:var(--muted);font-size:11px;margin:38px 0 0;text-align:center}

/* Depoimento ao lado do preço (preenche o espaço da seção e fica perto do
   botão de contratar). */
.landing-quote{border-left:3px solid var(--amber);margin:30px 0 0;max-width:520px;padding:2px 0 2px 18px}
.landing-quote blockquote{margin:0}
.landing-quote blockquote p{color:var(--ink);font-size:1.08rem;font-weight:600;line-height:1.55;margin:0;max-width:none}
.landing-quote figcaption{color:var(--muted);font-size:12px;line-height:1.5;margin-top:12px}
.landing-quote figcaption strong{color:var(--ink);display:block;font-size:13px}

/* Rodapé: e-mail de contato visível. */
.site-footer .footer-contact{color:var(--muted);font-weight:600}

@media(max-width:850px){
  .landing-demo{grid-template-columns:1fr}
  .demo-visual{margin-top:6px}
}
@media(max-width:700px){
  /* O aviso de cookies na tela de entrada não precisa subir 84px (essa folga
     é para a barra inferior do painel) e cobria o formulário de login. */
  body.auth-mode .cookie-banner{bottom:10px;gap:7px;padding:11px 12px}
  body.auth-mode .cookie-banner p{font-size:10.5px;line-height:1.4}
}
@media(max-width:520px){
  .topbar-actions .button{font-size:12px;padding:8px 12px}
}
@media(max-width:420px){
  .topbar-actions .button.ghost{display:none}
}