/* FreshLoop — estilos das páginas internas.
   Mesmos tokens visuais da home (que é um export da ferramenta de design,
   com estilos inline). Aqui usamos classes porque estas páginas são escritas à mão. */

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-stretch:100%;font-display:swap;src:url('fonts/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Arial com as medidas da Roboto: o texto não pula quando a fonte chega (CLS 0,19 → ver docs/site/README.md). */
@font-face{font-family:'Roboto Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');size-adjust:100.3%;ascent-override:92.77%;descent-override:24.41%;line-gap-override:0%}

:root{
  --bg:#F7F4EE; --bg-alt:#EFEBDE; --border:#E8DCC8;
  --ink:#223036; --muted:#5F6B6F;
  --brand:#1F4D60; --brand-dark:#1a4252; --accent:#66C7C1; --on-dark:#8fd6d1;
  /* turquesa escuro: o --accent tem 1,82:1 no fundo claro e não serve para texto */
  --accent-ink:#256F68;
  --wrap:1080px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Roboto,'Roboto Fallback',Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
a{color:var(--brand)}
a:hover{color:var(--accent-ink)}

/* cabeçalho / rodapé ------------------------------------------------ */
.top{position:sticky; top:0; z-index:20; background:rgba(247,244,238,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding-top:14px; padding-bottom:14px}
/* Seletor de público no topo. Com um link só ("Para condomínios"), o site parecia ser
   apenas de condomínio; são dois públicos e os dois precisam aparecer lado a lado.
   O wrap é deliberado: em tela estreita, duas linhas é melhor que conteúdo cortado. */
.aud{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-left:auto}
.aud .para{font-size:13px; color:var(--muted)}
.aud .pub{font-size:14px; font-weight:500; color:var(--brand); text-decoration:none; white-space:nowrap; padding:5px 0; border-bottom:2px solid transparent}
.aud .pub:hover{color:var(--accent-ink); border-bottom-color:var(--accent)}
.aud .pub[aria-current="true"]{border-bottom-color:var(--brand); font-weight:700}
@media (max-width:640px){.aud{gap:4px 12px} .aud .pub{font-size:13.5px} .aud .para{display:none}}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none}
.mark{width:26px; height:26px; border-radius:50%; border:3.5px solid var(--brand); border-right-color:var(--accent)}
.brand span{font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--brand)}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; background:var(--brand); color:#F7F4EE; font-weight:700; padding:15px 26px; border-radius:14px; box-shadow:0 6px 18px rgba(31,77,96,.22)}
.btn:hover{background:var(--brand-dark); color:#F7F4EE}
.btn-sm{padding:9px 16px; font-size:13.5px; font-weight:500; border-radius:10px; box-shadow:none; white-space:nowrap}

.foot{background:var(--brand-dark); color:#EFEBDE; padding:40px 20px 48px; margin-top:8px}
.foot .cols{max-width:var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start}
.foot .mark{border-color:#EFEBDE; border-right-color:var(--accent); width:24px; height:24px}
.foot p{margin:0; font-size:14.5px; color:var(--on-dark); max-width:34ch}
.foot nav{display:grid; gap:8px}
.foot a{font-size:14.5px; color:#EFEBDE; text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .legal{max-width:var(--wrap); margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(239,235,222,.15); font-size:13px; color:var(--on-dark)}
/* link dentro de texto precisa de sublinhado: só a cor não distingue (1.39:1) */
.foot .legal a{text-decoration:underline}

/* conteúdo ----------------------------------------------------------- */
.crumbs{font-size:13.5px; color:var(--muted); padding:18px 0 0}
.crumbs a{color:var(--muted)}
.hero{padding:26px 0 8px}
h1{margin:0 0 18px; font-size:38px; line-height:1.12; letter-spacing:-1.2px; font-weight:900; color:var(--brand); max-width:18ch; text-wrap:balance}
.lead{margin:0 0 28px; font-size:19px; line-height:1.55; color:var(--muted); max-width:62ch; text-wrap:pretty}
h2{margin:44px 0 14px; font-size:26px; line-height:1.2; letter-spacing:-.7px; font-weight:900; color:var(--brand); max-width:24ch; text-wrap:balance}
h3{margin:26px 0 8px; font-size:18px; font-weight:700; color:var(--brand)}
p{margin:0 0 16px; max-width:68ch; color:var(--ink); text-wrap:pretty}
.muted{color:var(--muted)}
ul,ol{margin:0 0 18px; padding-left:22px; max-width:68ch}
code{font-size:.92em; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:1px 5px}
li{margin-bottom:9px}
strong{color:var(--brand)}
section{padding:6px 0}
.band{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:8px 0 30px; margin:44px 0}
.band h2{margin-top:34px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:20px 0 8px}
.card{background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:22px}
.band .card{background:var(--bg)}
.card h3{margin:0 0 8px}
.card p{margin:0; font-size:15px; line-height:1.55; color:var(--muted)}

/* Tabelas comparativas (área de condomínios). O wrapper .tbl não é enfeite: o body tem
   overflow-x:hidden, então uma tabela mais larga que a tela seria CORTADA em vez de rolar.
   O min-width segura a leitura em três colunas; abaixo disso, rola dentro do próprio bloco. */
.tbl{overflow-x:auto; margin:20px 0 8px; border:1px solid var(--border); border-radius:16px; background:var(--bg); -webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse; width:100%; min-width:540px; font-size:15px}
.tbl th,.tbl td{text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--border); line-height:1.5}
.tbl thead th{background:var(--bg-alt); color:var(--brand); font-weight:700; font-size:14px}
.tbl tbody th{color:var(--brand); font-weight:700}
.tbl tbody td{color:var(--muted)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}

figure{margin:26px 0}
figure img{display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--border)}
figcaption{margin-top:10px; font-size:13.5px; color:var(--muted)}

.faq{border-top:1px solid var(--border); margin-top:8px}
.faq details{border-bottom:1px solid var(--border); padding:16px 0}
.faq summary{cursor:pointer; font-weight:700; color:var(--brand); font-size:17px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--accent-ink); font-weight:900}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0; color:var(--muted)}

.cta{background:var(--bg-alt); border:1px solid var(--border); border-radius:24px; padding:34px 26px; margin:48px 0 8px}
.cta h2{margin:0 0 12px; font-size:27px; max-width:20ch}
.cta p{margin:0 0 24px; color:var(--muted)}

.next{margin:44px 0 0}
.next h2{font-size:22px; margin-bottom:6px}
.next .cards{margin-top:16px}
.next .card a{font-weight:700; text-decoration:none}
.next .card a::after{content:" →"}

/* calculadora ------------------------------------------------------- */
.calc{background:var(--bg-alt); border:1px solid var(--border); border-radius:20px; padding:24px; margin:8px 0 34px}
.calc-hint{margin:0 0 18px; font-size:14.5px; color:var(--muted); max-width:56ch}
.calc-rows{display:grid; gap:10px}
.calc-head{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:12px; font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted)}
.calc-head span:first-child{visibility:hidden}
.calc-row{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:12px; align-items:center}
.calc-row label{font-weight:700; color:var(--brand); font-size:16px}
.calc-ticket{grid-template-columns:1fr 1.3fr; margin-top:18px; padding-top:18px; border-top:1px solid var(--border)}
.calc-ticket label{font-weight:500; color:var(--ink); font-size:15.5px}
.fld{display:flex; align-items:center; gap:0; background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:0 12px; min-height:46px}
.fld:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(102,199,193,.25)}
.fld i{font-style:normal; font-size:14.5px; color:var(--muted); flex:none}
.fld input{flex:1 1 auto; min-width:0; border:0; background:transparent; font:inherit; font-size:16.5px; color:var(--ink); padding:10px 8px; outline:none; text-align:right}
.fld input.bad{color:#a8322f}
.fld:has(input.bad){border-color:#a8322f; box-shadow:0 0 0 3px rgba(168,50,47,.15)}
.calc-erro{margin:16px 0 0; font-size:14.5px; color:#a8322f; background:#fdf1f0; border:1px solid #f0cfcd; border-radius:11px; padding:11px 14px}
.calc-erro strong{color:#a8322f}
.calc-out{margin-top:22px; padding-top:20px; border-top:1px solid var(--border)}
.calc-line{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; font-size:16.5px; color:var(--muted)}
.calc-line strong{font-size:19px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc-line em{font-style:normal; font-size:14px}
.calc-liq{margin-top:8px; padding-top:14px; border-top:1px solid var(--border)}
.calc-liq span{font-weight:700; color:var(--brand)}
.calc-liq strong{font-size:27px; font-weight:900; letter-spacing:-.5px; color:var(--brand)}
.calc-year{margin:16px 0 0; font-size:15.5px; line-height:1.5; color:var(--brand-dark); background:var(--bg); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; padding:12px 14px}

@media (max-width:640px){
  .calc{padding:18px}
  .calc-head{display:none}
  .calc-row,.calc-ticket{grid-template-columns:1fr; gap:7px}
  .calc-row{padding-bottom:14px; border-bottom:1px solid var(--border)}
  .calc-rows .calc-row:last-child{border-bottom:0; padding-bottom:0}
  .fld input{text-align:left}
  .calc-liq strong{font-size:24px}
}

@media (max-width:640px){
  h1{font-size:31px; letter-spacing:-.9px}
  h2{font-size:23px}
  body{font-size:16.5px}
  .top .wrap{padding-top:11px; padding-bottom:11px}
}

/* WhatsApp flutuante ------------------------------------------------ */
/* Um só por página, no canto inferior direito. O href é o mesmo wa.me da página
   (texto "cheguei pela página: X"), então a atribuição e o evento do analytics.js
   valem para ele sem mudança. Acima do cabeçalho fixo (z-index 20), abaixo do lightbox. */
.zap{position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom));
  z-index:30; display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px;
  border-radius:50%; background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(31,77,96,.28); transition:transform .15s ease, box-shadow .15s ease}
.zap svg{width:32px; height:32px; fill:currentColor; display:block}
.zap:hover{background:#1EBE5A; color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(31,77,96,.32)}
.zap:focus-visible{outline:3px solid var(--brand); outline-offset:3px}
.zap .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:640px){ .zap{width:54px; height:54px} .zap svg{width:30px; height:30px} }
@media (prefers-reduced-motion:reduce){ .zap{transition:none} .zap:hover{transform:none} }
@media print{ .zap{display:none} }

/* Filme "Por trás do Lavar" ----------------------------------------- */
/* A moldura escura é a do design; dentro dela o motor (React) escala o palco 1920×1080 + barra
   de 44px, por isso a proporção 1920/1124. Em tela cheia a moldura vira o próprio viewport. */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--border); border-radius:999px; padding:6px 14px 6px 11px; margin:0 0 14px; font-size:12.5px; font-weight:500; color:#556069}
.pill-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); display:block}
.filme-frame{position:relative; background:var(--ink); border-radius:18px; padding:12px; box-shadow:0 12px 32px rgba(31,77,96,.18); margin:6px 0 14px}
.filme-stage{position:relative; width:100%; aspect-ratio:1920 / 1124; border-radius:8px; overflow:hidden; background:#1A4252}
.filme-carregando{position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; color:var(--on-dark); font-size:15px}
.filme-aviso{position:absolute; left:0; right:0; bottom:0; margin:0; padding:10px 14px; background:rgba(34,48,54,.9); color:#F7F4EE; font-size:14px; text-align:center}
.filme-cheia{position:absolute; top:22px; right:22px; z-index:5; appearance:none; border:1px solid rgba(247,244,238,.35); background:rgba(34,48,54,.7); color:#F7F4EE; font:500 12.5px Roboto,'Roboto Fallback',Helvetica,Arial,sans-serif; padding:6px 10px; border-radius:8px; cursor:pointer; opacity:.75}
.filme-cheia:hover,.filme-cheia:focus-visible{opacity:1; background:var(--brand)}
.filme-frame:fullscreen{padding:0; border-radius:0; background:#000; display:flex; align-items:center; justify-content:center}
.filme-frame:fullscreen .filme-stage{aspect-ratio:auto; width:100%; height:100%; border-radius:0}
.filme-legenda{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 10px}
.filme-legenda span{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.filme-legenda i{width:9px; height:9px; border-radius:50%; display:block}
.filme-opcoes{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; margin:0 0 8px; font-size:14px; color:var(--muted)}
.filme-opcoes label{display:inline-flex; align-items:center; gap:7px; cursor:pointer}
.filme-opcoes input{accent-color:var(--brand); width:16px; height:16px; margin:0}
.filme-dica{font-size:13px}
.cenas{margin:0 0 18px; padding-left:24px; max-width:68ch}
.cenas li{margin-bottom:10px}
@media (max-width:640px){
  .filme-frame{padding:7px; border-radius:12px}
  .filme-cheia{top:14px; right:14px}
  .filme-dica{display:none}
}

/* Conversa simulada (página do Gerente de Plantão). É ilustração em HTML, não print: o texto é o mesmo
   que o sistema manda (templates e SaleTexts do backend), com dados de exemplo. Sem logo nem marca do
   WhatsApp — só o formato de conversa, para o dono reconhecer o canal. */
.duo{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; margin:20px 0 8px}
.duo > div > h2:first-child{margin-top:0}
@media (max-width:860px){ .duo{grid-template-columns:1fr} .duo .chat{max-width:380px; margin:0 auto} }
.duo .chat{margin:0; position:sticky; top:20px}
.cards.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.chat{background:#E9E4D8; border:1px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:0 12px 32px rgba(31,77,96,.14); font-size:14px; line-height:1.45}
.chat-top{display:flex; align-items:center; gap:10px; background:var(--brand); color:#F7F4EE; padding:12px 14px}
.chat-top .av{width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none}
.chat-top b{display:block; font-size:14px}
.chat-top small{display:block; font-size:11.5px; color:var(--on-dark)}
.chat-body{display:flex; flex-direction:column; gap:7px; padding:14px 12px 16px}
.chat-day{align-self:center; background:#F7F4EE; color:var(--muted); font-size:11.5px; border-radius:8px; padding:3px 10px; margin:2px 0}
.msg{max-width:86%; padding:8px 11px 6px; border-radius:12px; background:#fff; color:var(--ink); align-self:flex-start; box-shadow:0 1px 1px rgba(0,0,0,.06); overflow-wrap:anywhere}
.msg.eu{align-self:flex-end; background:#D7F1EE}
.msg time{display:block; text-align:right; font-size:10.5px; color:#7b8589; margin-top:2px}
.msg .pix{display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; background:var(--bg-alt); border-radius:6px; padding:6px 7px; margin:6px 0; color:var(--brand)}
.msg + .opts{margin-top:-4px}
.opts{display:flex; flex-direction:column; gap:3px; align-self:flex-start; width:86%}
.opts span{display:block; text-align:center; background:#fff; color:#1c7f78; font-weight:500; border-radius:10px; padding:8px; font-size:13.5px; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.opts span.on{outline:2px solid var(--accent)}
.tap{align-self:flex-end; font-size:11.5px; color:var(--muted); font-style:italic; margin:-2px 2px 0}
.chat-note{font-size:12px; color:var(--muted); text-align:center; padding:0 14px 14px; margin:0}

/* Selo de "em breve" nos cartões e títulos da página do Gerente. */
.soon{display:inline-block; vertical-align:middle; background:var(--bg-alt); border:1px solid var(--border); color:var(--accent-ink); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600; margin-left:6px; letter-spacing:.2px}
.card .soon{margin:0 0 8px; margin-left:0}