/* FreshLoop — reforma visual da página de condomínios.
   Carregado DEPOIS do site.css e só por /lavanderia-para-condominios/.

   Por que um arquivo à parte, e não site.css: o site.css é compartilhado pelas 14
   páginas e traz um mapeamento de tokens diferente do guia de marca — nele
   --bg é #F7F4EE (a superfície) e --border é #E8DCC8 (o divisor fino). O guia
   (brand/tokens.css) usa #EFEBDE como fundo de página, #F7F4EE como superfície e
   #D8CBB5 como borda. Esta página segue o guia; as outras seguem o site.css.
   Trocar isso no site.css mexeria nas 14 de uma vez — assunto de outra rodada.

   Tudo aqui está sob .cd (classe do <body>), então nada vaza para as outras páginas.
   O cabeçalho e o rodapé continuam sendo os do site.css: são os mesmos em todo o
   site e não é este o lugar de bifurcá-los. */

.cd{
  --cd-bg:#EFEBDE;        /* fundo da página */
  --cd-surface:#F7F4EE;   /* cards, faixas claras */
  --cd-sand:#E8DCC8;      /* faixa de destaque, divisor interno de card */
  --cd-line:#D8CBB5;      /* borda */
  --cd-ink:#223036;
  --cd-muted:#5F6B6F;
  --cd-brand:#1F4D60;
  --cd-deep:#12343F;      /* texto sobre turquesa, fundo de card no escuro */
  --cd-accent:#66C7C1;
  --cd-accent-ink:#256F68;/* turquesa legível sobre fundo claro */
  --cd-on-dark:#8FD6D1;   /* turquesa legível sobre o petróleo */
  --cd-in:1080px;         /* igual ao .wrap do site.css: alinha com cabeçalho e rodapé */
  background:var(--cd-bg);
}

/* estrutura ---------------------------------------------------------- */
.cd-sec{padding:clamp(56px,7vw,96px) 0}
.cd-in{max-width:var(--cd-in); margin:0 auto; padding:0 20px}
.cd-sec--tight{padding:clamp(48px,6vw,80px) 0}
.cd-in--narrow{max-width:820px}
.cd-sec--surface{background:var(--cd-surface); border-top:1px solid var(--cd-line); border-bottom:1px solid var(--cd-line)}
.cd-sec--sand{background:var(--cd-sand)}
.cd-sec--dark{background:var(--cd-brand); color:var(--cd-surface)}

/* Marca d'água do anel. A section precisa de overflow:hidden porque o anel é
   posicionado fora da caixa de propósito. */
.cd-sec--ring{position:relative; overflow:hidden}
.cd-sec--ring > .cd-in{position:relative}
.cd-ring{position:absolute; pointer-events:none; user-select:none}
.cd-ring--hero{right:-160px; top:-140px; width:520px; opacity:.12}
.cd-ring--cta{left:-120px; bottom:-160px; width:420px; opacity:.10}

/* tipografia --------------------------------------------------------- */
.cd .cd-eyebrow{margin:0 0 14px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--cd-accent-ink); max-width:none}
.cd .cd-eyebrow--dark{color:var(--cd-on-dark)}
.cd h1{margin:0; font-size:clamp(36px,5.6vw,60px); line-height:1.05; font-weight:900; letter-spacing:-1.5px; color:var(--cd-surface); max-width:none; text-wrap:balance}
.cd .cd-h2{margin:0; font-size:clamp(28px,4vw,38px); line-height:1.12; font-weight:900; letter-spacing:-1.2px; color:var(--cd-brand); max-width:24ch; text-wrap:balance}
.cd .cd-h2--sm{font-size:clamp(26px,3.4vw,34px); line-height:1.2; letter-spacing:-.9px; max-width:34ch}
.cd .cd-h2--dark{color:var(--cd-surface)}
.cd .cd-h2--plain{max-width:none}
.cd .cd-h2--mini{margin:0 0 28px; font-size:22px; line-height:1.2; letter-spacing:0; font-weight:700; max-width:none}
.cd .cd-p{margin:20px 0 0; font-size:17px; line-height:1.6; color:var(--cd-ink); max-width:70ch; text-wrap:pretty}
.cd .cd-p + .cd-p{margin-top:18px}
.cd .cd-note{margin:24px 0 0; font-size:15.5px; line-height:1.6; color:var(--cd-muted); max-width:80ch; text-wrap:pretty}
.cd .cd-p--dark{color:rgba(239,235,222,.9)}
.cd strong{color:var(--cd-brand)}
.cd .cd-sec--dark strong{color:var(--cd-surface)}

/* Faixa de destaque em areia, fecho da primeira seção. */
.cd .cd-callout{margin:32px 0 0; padding:24px 26px; background:var(--cd-sand); border-radius:12px; font-size:17px; line-height:1.6; color:var(--cd-ink); max-width:80ch; text-wrap:pretty}

/* grades e cards ----------------------------------------------------- */
.cd-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--min,260px),1fr)); gap:16px; margin-top:36px}
.cd-card{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:12px; padding:24px; box-shadow:0 1px 3px rgba(31,45,54,.10)}
.cd-card--alt{background:var(--cd-bg); box-shadow:none; padding:26px}
/* A borda âmbar marca a reclamação recorrente — é o card que o síndico reconhece. */
.cd-card--warn{border-left:3px solid #E59A3A}
.cd-card--dark{background:rgba(18,52,63,.4); border:1px solid rgba(239,235,222,.2); border-radius:12px; padding:16px 18px; box-shadow:none}
.cd .cd-card h3{margin:0 0 10px; font-size:18px; font-weight:700; color:var(--cd-brand)}
.cd .cd-card p{margin:0; font-size:15.5px; line-height:1.55; color:var(--cd-muted); max-width:none; text-wrap:pretty}
.cd .cd-card--dark h3{margin:0 0 6px; font-size:15.5px; color:var(--cd-on-dark)}
.cd .cd-card--dark p{font-size:14.5px; line-height:1.5; color:rgba(239,235,222,.8)}

/* botões ------------------------------------------------------------- */
.cd .cd-btn{display:inline-flex; align-items:center; height:52px; padding:0 30px; border-radius:14px; font-size:16px; font-weight:700; text-decoration:none; background:var(--cd-accent); color:var(--cd-deep); box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cd .cd-btn:hover{background:#7FD3CE; color:var(--cd-deep)}
/* borda a 55% (não 35%): abaixo disso o contorno do botão fica em 2,3:1 contra o
   petróleo e some — é a única pista visual de que ali existe um botão. */
.cd .cd-btn--ghost{background:none; box-shadow:none; padding:0 26px; font-weight:500; color:var(--cd-surface); border:1px solid rgba(239,235,222,.55)}
.cd .cd-btn--ghost:hover{background:rgba(239,235,222,.08); color:var(--cd-surface)}

/* herói -------------------------------------------------------------- */
.cd-hero{padding:clamp(24px,4vw,36px) 0 clamp(56px,7vw,88px)}
.cd .cd-crumbs{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--cd-on-dark); margin-bottom:clamp(32px,5vw,56px); padding:0}
.cd .cd-crumbs a{color:var(--cd-on-dark)}
.cd .cd-crumbs .sep{opacity:.5}
.cd .cd-crumbs .cur{color:rgba(239,235,222,.8)}
.cd-hero-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,5vw,56px); align-items:center}
.cd .cd-hero-lead{margin:24px 0 0; font-size:clamp(17px,2vw,19px); line-height:1.55; color:rgba(239,235,222,.9); max-width:52ch; text-wrap:pretty}
.cd-hero-acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.cd .cd-hero-alt{margin:28px 0 0; padding-top:22px; border-top:1px solid rgba(239,235,222,.16); font-size:15.5px; line-height:1.55; color:rgba(239,235,222,.76); max-width:52ch}
.cd .cd-hero-alt a{color:var(--cd-on-dark); font-weight:700}
.cd-hero-shot{width:100%; max-width:520px; height:auto; display:block; justify-self:center; border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.3)}

/* passos numerados --------------------------------------------------- */
.cd-step{padding:22px; box-shadow:none}
.cd-step-n{width:34px; height:34px; border-radius:9999px; background:var(--cd-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; margin-bottom:14px}
.cd .cd-step h3{margin:0 0 6px; font-size:17px}
.cd .cd-step p{font-size:15px; line-height:1.5}

/* listas com filete turquesa ----------------------------------------- */
.cd .cd-bullets{margin:0; padding:0; list-style:none; display:grid; gap:12px; max-width:none}
.cd .cd-bullets li{margin:0; font-size:15.5px; line-height:1.5; color:var(--cd-ink); padding-left:18px; border-left:2px solid var(--cd-accent)}
.cd .cd-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,48px); margin-top:clamp(40px,5vw,56px)}
.cd .cd-split--tight{margin-top:24px}
.cd-stack{display:grid; gap:16px}
.cd .cd-stack .cd-card h3{margin-bottom:16px}

/* par de fotos de area comum -----------------------------------------
   As duas fotos existem para serem comparadas -- conjugada empilhada contra par
   lado a lado -- entao as duas passam pelo mesmo recorte 4/3. Os originais sao
   retratos 3/4, e o object-position de cada uma vai inline, porque o ponto de
   interesse (a maquina, a bancada) fica em altura diferente em cada foto. */
.cd-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:20px; margin-top:clamp(28px,3.5vw,40px)}
.cd .cd-gallery figure{margin:0}
.cd .cd-gallery img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:0}
.cd .cd-gallery figcaption{margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--cd-muted); max-width:none}
.cd .cd-gallery figcaption strong{color:var(--cd-brand); font-weight:700}

/* painel de exemplo --------------------------------------------------
   Ilustração de produto, não um gráfico de verdade: os números são fixos e a
   legenda diz isso. Por isso as barras podem ficar em tom baixo de contraste —
   não há informação a extrair delas. */
.cd-panel{margin:0; background:var(--cd-bg); border-radius:12px; padding:14px; box-shadow:0 18px 44px rgba(0,0,0,.28)}
.cd-panel-frame{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:8px; overflow:hidden}
.cd-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--cd-line)}
.cd-panel-id{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--cd-brand)}
.cd-panel-id img{width:20px; height:20px}
.cd-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--cd-line)}
.cd-kpi{background:var(--cd-surface); padding:14px 16px}
.cd .cd-kpi dt{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--cd-muted)}
.cd .cd-kpi dd{margin:0; font-size:22px; font-weight:700; color:var(--cd-brand)}
.cd-chart{padding:18px 16px; border-top:1px solid var(--cd-line)}
.cd .cd-chart-label{margin:0 0 14px; font-size:13.5px; font-weight:500; color:var(--cd-muted); max-width:none}
.cd-bars{display:flex; align-items:flex-end; gap:6px; height:96px}
.cd-bars i{flex:1; background:#C9BDA6; border-radius:4px 4px 0 0}
.cd-bars i.hi{background:var(--cd-accent)}
.cd-rows{border-top:1px solid var(--cd-line)}
.cd-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--cd-sand)}
.cd-row:last-child{border-bottom:0}
.cd-row-name{font-size:14.5px; font-weight:500; color:var(--cd-ink)}
.cd-row-state{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cd-muted)}
.cd-badge{padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap}
.cd-badge--ok{background:rgba(61,170,135,.15); color:#2E8A6C}
.cd-badge--idle{background:var(--cd-sand); color:var(--cd-muted)}
.cd-badge--warn{background:rgba(229,154,58,.15); color:#8A6A2E}
.cd-badge--accent{background:var(--cd-accent); color:var(--cd-deep)}
.cd .cd-panel-caption{margin:12px 4px 2px; font-size:12.5px; color:var(--cd-muted); max-width:none}
/* No celular o painel cabe em ~305px e as três colunas de indicador ficam com 69px
   úteis cada — "R$ 4.180" a 22px não cabe e o frame tem overflow:hidden, então o
   valor sairia cortado em vez de rolar. Aperta a densidade em vez de quebrar a
   grade de três, que é o desenho. */
@media (max-width:600px){
  .cd .cd-kpi{padding:12px 8px}
  .cd .cd-kpi dt{font-size:10px; letter-spacing:.3px}
  .cd .cd-kpi dd{font-size:16px}
  .cd-row{padding:12px}
  .cd-row-name{font-size:14px}
  .cd-row-state{gap:8px; font-size:12.5px}
  .cd-badge{padding:2px 8px; letter-spacing:.3px}
}

/* bloco de destaque: texto de um lado, imagem do outro -----------------
   Duas ocorrencias com a mesma anatomia e pesos diferentes: o aviso do WhatsApp
   sobre areia, fechado como um cartao, e o totem separado so por um filete. */
.cd-feature{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:center; margin-top:clamp(40px,5vw,56px)}
.cd-feature--sand{gap:clamp(24px,4vw,48px); padding:clamp(24px,3vw,32px); background:var(--cd-sand); border-radius:12px}
.cd-feature--rule{gap:clamp(28px,4vw,48px); padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--cd-line)}
.cd .cd-feature .cd-eyebrow{margin:0 0 12px}
.cd .cd-feature h3{margin:0; font-size:clamp(21px,2.6vw,26px); line-height:1.2; font-weight:900; letter-spacing:-.7px; color:var(--cd-brand); text-wrap:balance}
.cd .cd-feature-p{margin:16px 0 0; font-size:16.5px; line-height:1.6; color:var(--cd-ink); max-width:none; text-wrap:pretty}
.cd .cd-feature-link{display:inline-flex; align-items:center; margin-top:18px; font-size:16px; font-weight:700; color:var(--cd-accent-ink)}
.cd-feature-shot{width:100%; max-width:300px; height:auto; display:block; justify-self:center; border-radius:12px; box-shadow:0 6px 18px rgba(31,77,96,.22)}
.cd .cd-feature figure{margin:0; justify-self:center; width:100%; max-width:420px}
.cd .cd-feature figure img{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--cd-line)}
.cd .cd-feature figcaption{margin:12px 0 0; font-size:13.5px; font-weight:500; color:var(--cd-muted); max-width:none}

/* quatro telas do morador ---------------------------------------------
   Fita horizontal: as molduras sao desenhadas em 402x874 (o tamanho real de um
   iPhone em pontos) e a fita inteira e reduzida com zoom, que e o que mantem as
   proporcoes internas de cada tela sem reescrever medida por medida. Quatro
   molduras nunca cabem em 1080px, entao a fita rola na horizontal de proposito.

   A legenda vai a 22px porque tambem passa pelo zoom: 22 x .66 da os 14.5px que
   o design pede. Herdar os 14.5 la dentro renderizaria 9.6px, pequeno demais
   para um rotulo de pagina. */
.cd-phones{margin-top:clamp(32px,4vw,48px); overflow-x:auto; padding-bottom:8px}
.cd-phones-zoom{zoom:.66; width:max-content; margin:0 auto}
.cd-phones-row{display:flex; flex-wrap:wrap; gap:clamp(24px,3vw,40px); align-items:flex-start; justify-content:center}
.cd .cd-phones figure{margin:0; display:grid; gap:16px; justify-items:center}
.cd .cd-phones figcaption{margin:0; font-size:22px; font-weight:500; color:var(--cd-muted); max-width:none}

/* moldura do aparelho: o componente do styleguide e React, aqui e HTML seco --- */
.ios{width:402px; height:874px; border-radius:48px; overflow:hidden; position:relative; background:#F2F2F7; box-shadow:0 40px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.12); font-family:-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased}
.ios--dark{background:#000}
.ios-island{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:126px; height:37px; border-radius:24px; background:#000; z-index:50}
.ios-status{position:absolute; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:center; gap:154px; padding:21px 24px 19px; box-sizing:border-box; color:#000}
.ios--dark .ios-status{color:#fff}
.ios-time{flex:1; height:22px; display:flex; align-items:center; justify-content:center; padding-top:1.5px; font-size:17px; font-weight:590; line-height:22px}
.ios-glyphs{flex:1; height:22px; display:flex; align-items:center; justify-content:center; gap:7px; padding:1px 1px 0 0}
.ios-screen{height:100%; display:flex; flex-direction:column}
.ios-scroll{flex:1; overflow:auto; scrollbar-width:none}
.ios-scroll::-webkit-scrollbar{display:none}
.ios-home{position:absolute; bottom:0; left:0; right:0; z-index:60; height:34px; display:flex; justify-content:center; align-items:flex-end; padding-bottom:8px; pointer-events:none}
.ios-home i{width:139px; height:5px; border-radius:100px; background:rgba(0,0,0,.25)}
.ios--dark .ios-home i{background:rgba(255,255,255,.7)}

/* modalidades -------------------------------------------------------- */
.cd-mods{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:40px}
.cd-mod{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:12px; padding:clamp(24px,3vw,32px); box-shadow:0 1px 3px rgba(31,45,54,.10)}
.cd-mod--dark{background:var(--cd-brand); border-color:var(--cd-brand); color:var(--cd-surface); box-shadow:0 6px 18px rgba(31,77,96,.22)}
.cd .cd-mod h3{margin:0 0 8px; font-size:22px; font-weight:700; color:var(--cd-brand)}
.cd .cd-mod--dark h3{margin:0; color:var(--cd-surface)}
.cd-mod-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.cd .cd-mod-profile{margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--cd-muted); max-width:none}
.cd .cd-mod--dark .cd-mod-profile{color:rgba(239,235,222,.8)}
.cd-dl{margin:0}
.cd-dl > div{padding:14px 0; border-top:1px solid var(--cd-sand)}
.cd-mod--dark .cd-dl > div{border-top-color:rgba(239,235,222,.2)}
.cd .cd-dl dt{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--cd-muted); margin-bottom:5px}
.cd .cd-mod--dark .cd-dl dt{color:var(--cd-on-dark)}
.cd .cd-dl dd{margin:0; font-size:15.5px; line-height:1.5; color:var(--cd-ink)}
.cd .cd-mod--dark .cd-dl dd{color:rgba(239,235,222,.95)}
.cd .cd-dl dd.strong{font-size:17px; line-height:1.4; font-weight:700; color:var(--cd-brand)}
.cd .cd-mod--dark .cd-dl dd.strong{color:var(--cd-surface)}
.cd .cd-mod-link{display:inline-flex; align-items:center; margin-top:20px; font-size:15.5px; font-weight:700; color:var(--cd-on-dark)}

/* equipamentos ------------------------------------------------------- */
.cd-eq{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:36px}
.cd-eq article{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(31,45,54,.10)}
/* Placa branca: as fotos de catálogo vêm recortadas em fundo branco; qualquer
   outro tom deixaria a moldura do recorte visível. */
/* Altura fixa, nao proporcao: com aspect-ratio as duas placas mudavam de altura
   conforme a largura da coluna e as maquinas apareciam em escalas diferentes
   nos dois cards. Alinhadas embaixo, as duas apoiam na mesma linha. */
.cd-eq-shot{height:266px; background:#fff; display:flex; align-items:flex-end; justify-content:center; padding:18px 18px 26px}
.cd-eq-shot img{max-width:100%; max-height:100%; width:auto; height:auto; display:block; object-fit:contain}
/* Placa com dois modelos lado a lado (a LG tem as duas versoes). Grade chapada,
   sem div por coluna: e o que faz as duas fotos apoiarem na mesma linha de base
   e as duas legendas alinharem entre si. A segunda foto fica limitada a 76% da
   altura porque o par lado a lado e mesmo mais baixo que a conjugada -- deixar
   as duas encherem a caixa mentiria sobre a proporcao entre os dois modelos. */
.cd-eq-shot--duo{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) auto; column-gap:8px; row-gap:8px; padding:18px}
.cd-eq-shot--duo img{justify-self:center; align-self:end}
.cd-eq-shot--duo img:nth-of-type(1){grid-area:1 / 1}
.cd-eq-shot--duo img:nth-of-type(2){grid-area:1 / 2; max-height:72%}
.cd .cd-eq-shot--duo p{grid-row:2; margin:0; max-width:none; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; letter-spacing:.3px; color:var(--cd-muted)}
.cd .cd-eq-shot--duo p:nth-of-type(1){grid-column:1}
.cd .cd-eq-shot--duo p:nth-of-type(2){grid-column:2}
.cd-eq-body{padding:26px}
.cd .cd-eq-body h3{margin:0 0 10px; font-size:18px; font-weight:700; color:var(--cd-brand)}
.cd .cd-eq-body p{margin:0 0 18px; font-size:15.5px; line-height:1.55; color:var(--cd-muted); max-width:none; text-wrap:pretty}
.cd-specs{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.cd .cd-specs dt{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--cd-muted)}
.cd .cd-specs dd{margin:2px 0 0; font-size:16px; font-weight:700; color:var(--cd-brand)}

/* cinco passos ------------------------------------------------------- */
.cd .cd-steps{margin:36px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; max-width:none}
.cd .cd-steps li{margin:0; background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:12px; padding:22px}
.cd .cd-steps .cd-eyebrow{margin-bottom:12px; font-size:11px; letter-spacing:.5px}
.cd .cd-steps h3{margin:0 0 6px; font-size:17px; font-weight:700; color:var(--cd-brand)}
.cd .cd-steps p{margin:0; font-size:15px; line-height:1.5; color:var(--cd-muted); max-width:none}

/* FAQ ---------------------------------------------------------------- */
.cd-faq{display:grid; gap:12px; margin-top:32px}
.cd-faq details{background:var(--cd-surface); border:1px solid var(--cd-line); border-radius:12px; padding:20px 24px}
.cd-faq summary{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; font-size:17px; font-weight:700; color:var(--cd-brand); cursor:pointer; list-style:none}
.cd-faq summary::-webkit-details-marker{display:none}
/* O sinal é a única pista de que o bloco abre — em #66C7C1 ele fica em 1,82:1
   contra a superfície clara (o mesmo motivo do comentário no site.css). Vai no
   turquesa escuro, e vira "–" quando aberto em vez de ficar sempre "+". */
.cd-faq summary::after{content:"+"; color:var(--cd-accent-ink); font-size:20px; line-height:1.2; flex:none}
.cd-faq details[open] summary::after{content:"–"}
.cd .cd-faq p{margin:14px 0 0; font-size:16px; line-height:1.6; color:var(--cd-ink); max-width:none; text-wrap:pretty}

/* continue lendo ----------------------------------------------------- */
.cd-next{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.cd-next a{display:block; background:var(--cd-bg); border:1px solid var(--cd-line); border-radius:12px; padding:22px; text-decoration:none}
.cd-next a:hover{border-color:var(--cd-brand)}
.cd .cd-next h3{margin:0 0 8px; font-size:17px; font-weight:700; color:var(--cd-brand)}
.cd .cd-next p{margin:0; font-size:15px; line-height:1.5; color:var(--cd-muted); max-width:none}

/* atalho flutuante do WhatsApp ----------------------------------------
   Mora fora do <main>: e um atalho persistente, nao conteudo da pagina. O
   z-index fica acima do cabecalho fixo (que esta em 20 no site.css). O nome
   acessivel vem do aria-label do link, entao o alt da imagem vai vazio -- os
   dois juntos fariam o leitor de tela anunciar o botao duas vezes. */
.cd-fab{position:fixed; right:20px; bottom:20px; z-index:40; display:block; width:64px; height:64px; filter:drop-shadow(0 10px 22px rgba(18,52,63,.32)); transition:transform .15s ease}
.cd-fab img{width:100%; height:100%; display:block}
.cd-fab:hover{transform:scale(1.05)}
.cd-fab:focus-visible{outline:3px solid var(--cd-brand); outline-offset:3px; border-radius:9999px}
@media (prefers-reduced-motion:reduce){
  .cd-fab{transition:none}
  .cd-fab:hover{transform:none}
}

/* Enquanto o banner de cookies esta aberto, o botao flutuante sai: os dois
   moram no canto inferior e o banner tem prioridade -- e uma decisao que a
   pessoa precisa tomar antes de qualquer outra coisa na pagina. */
body.fl-consent-aberto .cd-fab{display:none}

/* chamada final ------------------------------------------------------ */
.cd-cta{text-align:center; max-width:820px}
.cd .cd-cta h2{margin:0; font-size:clamp(26px,3.6vw,36px); line-height:1.16; font-weight:900; letter-spacing:-1px; color:var(--cd-surface); max-width:none; text-wrap:balance}
.cd .cd-cta p{margin:18px auto 0; max-width:52ch; font-size:17px; line-height:1.6; color:rgba(239,235,222,.9)}
.cd .cd-cta .cd-btn{margin-top:32px; padding:0 34px}
/* A chamada final é petróleo e o rodapé do site é petróleo escuro: sem o filete
   os dois viram um bloco escuro só. */
.cd .foot{border-top:1px solid rgba(239,235,222,.15); margin-top:0}