/* =============================================================================
   Higi Place Uberaba — folha de estilo única
   -----------------------------------------------------------------------------
   Publicado em: https://higiplace.com/
   Paridade com: https://higiplaceuberaba.com.br/limpeza-de-estofado-em-uberaba/ (origem)
   (WordPress 6.8.6 + tema twentytwentyfive + Elementor 4.1.4)

   Cada valor abaixo foi extraído de uma destas duas fontes, nunca estimado:
     · global styles do tema  (theme.json → :root / body / h2)
     · uploads/elementor/css/post-6.css (kit) e post-7.css (página)

   Organização (uma responsabilidade por bloco):
     01 tokens · 02 base · 03 primitivas de layout · 04 componentes
     05 seções (1–9, na ordem do documento) · 06 animações · 07 responsivo
   ========================================================================== */


/* =============================================================================
   01 · TOKENS
   ========================================================================== */
:root{
  /* --- tema twentytwentyfive (theme.json) --- */
  --wp-base:#FFFFFF;
  --wp-contrast:#111111;

  /* Fórmulas fluidas do tema, reproduzidas literalmente.
     Não são valores fixos de propósito: é a mesma clamp() que gera
     22px @1440px e 18.2744px @390px — logo, bate em QUALQUER viewport,
     não só nos dois que foram medidos. */
  --fs-large:clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
  --fs-x-large:clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);

  /* --- kit do Elementor (post-6.css) --- */
  --color-primary:#6EC1E4;
  --color-secondary:#54595F;
  --color-text:#7A7A7A;
  --color-accent:#61CE70;
  --container:1140px;
  /* Medido em runtime no original: `--kit-widget-spacing` NÃO está definido, então
     todo calc(var(--kit-widget-spacing, 0px) + Npx) resolve para Npx puro.
     A altura vem de outro lugar: o tema dá `margin: 1em 0` a cada <p>, em cima
     E embaixo, com 1em = o font-size do próprio bloco. Era essa margem dupla
     que faltava — é a causa dos 413px a menos no desktop. */
  --widgets-spacing:20px;

  /* --- paleta da página (post-7.css) --- */
  --green:#1AA70D;           /* botões md   */
  --green-hover:#5EFFCAB5;
  --green-benefits:#2BA000;  /* botão da seção de benefícios */
  --green-cta:#3ACC5C;       /* CTA grande  */
  --deep-blue:#1D6B92;
  --shape-blue:#68ACFF42;
  --card-blue:#68ACFFCC;
  --heading-dark:#3F3D3D;

  /* --- famílias --- */
  --font-base:"Manrope",sans-serif;    /* body — vem do tema  */
  --font-widget:"Roboto",Sans-serif;   /* widgets do Elementor */
  --font-display:"Poppins",Sans-serif; /* títulos de seção     */

  /* --- geometria medida no original ---
     ATENÇÃO: estes caps são POR BREAKPOINT. No mobile o original faz o
     contrário do desktop — as imagens CRESCEM. Aplicá-los globalmente foi a
     causa da regressão de −13,88% na altura mobile (BUG-005, rodada 2).
     Os valores mobile estão redeclarados no bloco @media (max-width:767px). */
  --about-img-width:400px;    /* desktop: 400×294 (tamanho natural)  */
  --testimonial-width:238px;  /* desktop: 238×423                    */
  --carousel-img-width:300px; /* medido no original: 300x300 natural  */
}


/* =============================================================================
   02 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

/* Espelha a regra `body` dos global styles do tema. */
body{
  margin:0;
  background-color:var(--wp-base);
  color:var(--wp-contrast);
  font-family:var(--font-base);
  font-size:var(--fs-large);
  font-weight:300;
  letter-spacing:-0.1px;
  line-height:1.4;
  overflow-x:hidden;
}

h1,h2{font-size:var(--fs-x-large)}   /* h1 aqui para o título da hero manter o tamanho do tema */

img{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{text-decoration:none}

/* Sprite de ícones: presente no DOM, nunca renderizado. */
.sprite{display:none}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* =============================================================================
   03 · PRIMITIVAS DE LAYOUT
   ========================================================================== */
.sec{position:relative;width:100%}

.inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:10px 0;
  display:flex;
  flex-direction:column;
}

/* Divisores de forma — mesmos paths SVG e mesmas dimensões do original. */
.shape{
  position:absolute;left:0;width:100%;
  overflow:hidden;line-height:0;direction:ltr;
  z-index:1;pointer-events:none;
}
.shape-top{top:-1px}
.shape-bottom{bottom:-1px}
.shape svg{display:block;width:100%;position:relative;left:50%;transform:translateX(-50%)}
.shape-bottom svg{transform:translateX(-50%) rotate(180deg)}


/* =============================================================================
   04 · COMPONENTES
   ========================================================================== */

/* --- Botão -----------------------------------------------------------------
   O original aplica `text-transform:uppercase` nos quatro botões `md`
   (1142496a, 250a995c, 65180aa1, 586326bb) e NÃO aplica no CTA grande
   (4f4a2420), cujo rótulo já vem em caixa alta no HTML.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background-color:var(--green);
  color:#FFFFFF;
  fill:#FFFFFF;
  font-family:var(--font-widget);
  font-size:18px;
  font-weight:500;
  line-height:1;
  letter-spacing:normal;
  text-transform:uppercase;
  border-radius:19px;
  padding:14px 60px;
  transition:background-color .3s;
}
.btn:hover,.btn:focus-visible{background-color:var(--green-hover)}
.btn .icon{width:1em;height:1em;fill:currentColor;flex:none}

.btn-wrap{display:flex;justify-content:center;margin:20px 0}

/* CTA grande — sem uppercase (rótulo já em caixa alta no HTML). */
.btn--cta{
  background-color:var(--green-cta);
  text-transform:none;
  padding:20px 40px;
  text-shadow:0 0 56px rgba(0,0,0,.3);
  box-shadow:0 5px 40px -8px rgba(0,0,0,.5) inset;
}
.btn--cta:hover,.btn--cta:focus-visible{background-color:var(--green-cta);opacity:.92}

/* Botão da seção de benefícios — verde próprio e métricas próprias no mobile. */
.btn--benefits{background-color:var(--green-benefits)}

/* --- Carrossel -------------------------------------------------------------- */
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;transition:transform .3s ease}
.carousel-slide{flex:0 0 33.3333%;padding:0 5px}
.carousel-slide img{width:100%;max-width:var(--carousel-img-width);margin-inline:auto}

.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:rgba(0,0,0,.5);
  border:0;padding:0;cursor:pointer;
}
.car-btn .icon{width:20px;height:20px;fill:#FFFFFF}
.car-prev{left:10px}
.car-next{right:10px}

.car-dots{display:flex;justify-content:center;gap:8px;margin-top:30px}
.car-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.2);cursor:pointer;transition:background-color .2s;
}
.car-dots button[aria-current="true"]{background:var(--color-primary)}


/* =============================================================================
   05 · SEÇÕES
   ========================================================================== */

/* --- 1 · Hero ---------------------------------------------------------------
   BUG-002: o rebuild empilhava margens negativas (-31/-39/-26/-38px) para imitar
   o espaçamento do Elementor; elas sobrepunham logo, "UBERABA", H2 e o bloco de
   avaliação sobre o botão. Aqui o fluxo é normal e a centralização é do flex.
   -------------------------------------------------------------------------- */
/* BUG-002 causa A: o PNG é byte-idêntico ao do original (SHA-1 8f17e240451d).
   O WebP q80 é re-encode com perda e quebrava a paridade de pixel — o
   image-set() servia ele por primeiro. Paridade venceu performance aqui. */
.hero{
  background:#000000 url("img/hero-bg.webp") center center/cover no-repeat;
  display:flex;
  flex-direction:column;
}
.hero::before{content:'';position:absolute;inset:0;background-color:#000000;opacity:.63}

.hero .inner{
  position:relative;z-index:1;
  max-width:784px;              /* --content-width do container 5c43ffd4 */
  /* BUG-002 causa B: seção precisa de 580px de altura (tinha 559). Os 21px
     entram como padding-bottom para não deslocar o texto, que já está
     pixel-perfect no desktop. */
  padding:10px 20px 31px;
  align-items:center;           /* centraliza o eixo transversal */
  text-align:center;
}

/* Âncoras medidas no original @1440×900 (topo absoluto):
     logo 24 · UBERABA 96 · H2 149 · checks 293 · CTA 436 · avaliações 487
   Cada margem abaixo é o delta necessário para o bloco seguinte cair no alvo.
   O original SOBREPÕE ~28px de UBERABA sobre o logo de propósito — por isso a
   margem negativa aqui é intencional, ao contrário das que foram removidas na
   rodada 1 (que jogavam texto sobre o botão). */
.hero-logo{width:200px;height:100px;object-fit:contain;margin:14px auto -28px}

.hero-city{
  margin:0 0 25px;
  font-family:var(--font-widget);
  font-weight:700;
  color:#FFFFFF;
}

.hero h1{
  margin:0 0 20px;
  font-family:var(--font-widget);
  font-weight:600;
  line-height:1;                /* .elementor-heading-title */
  color:#FCFCFC;
}

.hero-sub{
  margin:0;
  font-family:var(--font-widget);
  font-size:24px;
  font-weight:400;
  color:#FFFFFF;
}
.hero-sub .u{display:block;margin-bottom:1em;text-decoration:underline;font-weight:700}
.hero-checks{text-align:left;font-weight:700}

/* No original o CTA fica 143px abaixo do bloco de checks (era 121 aqui). */
.hero .btn-wrap{margin:42px 0 0}

.hero-rating{
  margin:5px 0 0;               /* 5px após o fim do botão, como no original */
  font-family:var(--font-widget);
  font-weight:700;
  color:#FFFFFF;
}

/* --- 2 · Resultados --------------------------------------------------------- */
.results .inner{padding:10px 20px;gap:20px}
.results h2{
  margin:0;
  text-align:center;
  font-family:var(--font-widget);
  font-weight:600;
  line-height:1;
  color:var(--heading-dark);
}

/* --- 3 · Sobre -------------------------------------------------------------- */
.about .inner{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:0;
  padding:0;                    /* container 6f47c692: 0px nos 4 lados */
}
/* BUG-010: as ondas da seção são `position:absolute; z-index:1` e pintavam
   por cima da metade inferior da foto. A geometria já estava certa nos dois
   lados — o que divergia era a ordem de pintura. */
.about-media{flex:0 0 auto;max-width:50%;position:relative;z-index:3}

/* BUG-004: era width:102.978% (→412px). O original exibe em tamanho natural. */
.about-media img{width:100%;max-width:var(--about-img-width)}

.about-body{
  flex:1 1 0;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  gap:0;
  padding:10px 0;
}
.about .btn-wrap{margin:0}
.about-kicker{
  margin:30px 0;padding:0 0 10px;
  text-align:center;
  font-family:var(--font-display);
  font-size:30px;font-weight:600;line-height:1.2em;
  color:var(--color-text);
}
.about-text{
  margin:18px 0;padding:0 0 5px;
  text-align:center;
  font-family:var(--font-widget);
  font-size:18px;font-weight:400;line-height:1.2em;
  color:var(--color-text);
}
.about-nudge{
  margin:22px 0;padding:0 0 5px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--color-primary);
}
.about .shape-bottom svg{height:313px;width:255%}
.about .shape-bottom .shape-fill{fill:var(--shape-blue)}

/* --- 4 · Como funciona ------------------------------------------------------ */
.how{background-color:var(--color-primary)}
/* A foto EXISTE no original (verificado em runtime: ::before com url(14.jpg),
   opacity .35, blend multiply, e a faixa medindo 650px justamente COM ela).
   O que divergia era o recorte: no desktop o original usa
   `background-attachment: fixed`, então o `cover` é calculado contra a
   VIEWPORT (1440×900 → escala 1,5) e não contra a seção (1440×650 → 1,083).
   Em 1024 e 390 o original volta para `scroll`. */
.how::before{
  content:'';position:absolute;inset:0;
  background:url("img/como-funciona-bg.webp") center center/cover no-repeat;
  opacity:.35;
  mix-blend-mode:multiply;
}
@media (min-width:1025px){
  .how::before{background-attachment:fixed}
}
/* Padding horizontal na SEÇÃO, não no .inner — mesmo motivo da seção de
   benefícios: no Elementor o boxed aplica padding no container externo e o
   .e-con-inner de 1140px fica íntegro. Com os 20px dentro do .inner, a área
   útil caía para 1100 e o cartão de 23% media 253px em vez de 258px. */
.how{padding-inline:20px}
.how .inner{
  position:relative;z-index:2;
  justify-content:space-evenly;align-items:center;
  gap:5px;
  padding:80px 0;
}
.how .shape-fill{fill:#FFFFFF}
.how .shape svg{height:auto;width:calc(100% + 1.3px)}

/* BUG-011: o original é calc(--kit-widget-spacing + -8px) = 20-8 = +12px,
   não -8px. Era isso que colava o subtítulo no título. */
.how-title{
  margin:30px 0 22px;padding:0;
  text-align:center;
  font-family:var(--font-display);
  font-size:30px;font-weight:600;line-height:1.2em;
  text-shadow:5px 4px 7px rgba(255,255,255,.34);
  color:#FFFFFF;
}
.how-sub{
  margin:18px 0;padding:0;
  text-align:center;
  font-family:var(--font-widget);
  font-size:18px;font-weight:400;line-height:1.2em;
  text-shadow:5px 4px 7px rgba(255,255,255,.34);
  color:#FFFFFF;
}

.how-grid{
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:space-evenly;
  min-height:239px;
  gap:0;
  width:100%;
  padding:10px;      /* container aninhado do original: 1140-20 = 1120 uteis */
}
.how-card{
  width:23%;max-width:23%;
  padding:23px;
  border-radius:15px;
  box-shadow:8px 8px 23px 0 rgba(0,0,0,.5);
  text-align:center;              /* BUG-011: o original centraliza */
}
/* Só o primeiro card tem fundo no original — não é engano. */
.how-card:first-child{background-color:var(--card-blue)}
.how-card .box{display:flex;flex-direction:column;align-items:center;gap:15px}
.how-card .icon{width:99px;height:99px;fill:#FFFFFF;color:#FFFFFF}
.how-card .desc{
  margin:0;
  font-family:var(--font-widget);
  font-weight:400;
  text-shadow:0 0 10px rgba(255,255,255,.34);
  color:#FFFFFF;
}

/* --- 5 · Serviços ----------------------------------------------------------- */
.services{background-color:#FFFFFF}
.services .inner{padding:100px 20px 35px;gap:20px}
.services .btn-wrap{margin:0}
.services .shape-top svg{height:155px;width:274%}
.services .shape-top .shape-fill{fill:var(--shape-blue)}

.services-title{
  margin:30px 0;padding:0 0 10px;
  text-align:center;
  font-family:var(--font-display);
  font-size:30px;font-weight:600;line-height:1.2em;
  color:var(--color-primary);
}
.services-grid{
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  width:100%;
  padding:10px 0;    /* container aninhado do original */
}
.service-card{
  width:13%;max-width:13%;
  padding:12px;
  border-radius:15px;
  box-shadow:8px 8px 23px 0 rgba(0,0,0,.5);
  text-align:center;
}
.service-card .icon{width:59px;height:59px;fill:var(--color-primary);display:block;margin-inline:auto}
.service-card h3{
  margin:22px 0 0;
  font-family:var(--font-display);
  font-size:22px;font-weight:500;line-height:38px;
  color:var(--color-text);
}

/* --- 6 · Prova social ------------------------------------------------------- */
.loved{background-color:var(--deep-blue)}
.loved .inner{padding:10px 20px}
.loved .shape-top svg{height:43px;width:190%}
.loved .shape-top .shape-fill{fill:#FFFFFF}
.loved h3{
  margin:15px;
  text-align:center;
  font-family:var(--font-widget);
  font-size:var(--fs-large);   /* o tema define h3 com a mesma clamp do body */
  font-weight:600;
  line-height:1;
  color:#FFFFFF;
}

/* BUG-009: as três fotos formam um grupo CENTRADO com 19px de gap
   (3×238 + 2×19 = 754px → primeira foto em x=344, como o original).
   Antes, `flex:1 1 0` criava 3 colunas de 380px e espalhava as fotos. */
.testimonials{background-color:var(--deep-blue)}
.testimonials .inner{
  flex-direction:row;flex-wrap:wrap;
  justify-content:center;
  gap:19px;
  padding:10px 0;
}
.testimonial{flex:0 0 auto;display:flex;flex-direction:column;padding:10px 0}

/* BUG-004: era width:100% da coluna (→380px). Medido no original: 238×423. */
.testimonial img{width:100%;max-width:var(--testimonial-width);margin-inline:auto}

/* --- 7 · CTA ---------------------------------------------------------------- */
.cta{background-color:var(--deep-blue);padding-block:10px}
.cta .inner{padding:10px 20px;gap:20px}
.cta-kicker{
  /* wrapper -1/-49 somado a margem 1em (22px) do <p> = 21 / -27 */
  margin:21px 0 -27px;
  text-align:center;
  font-family:var(--font-widget);
  font-style:italic;font-weight:700;
  text-decoration:underline;
  color:#FFFFFF;
}
.cta .btn-wrap{margin:19px 0}

/* --- 8 · Benefícios --------------------------------------------------------- */
/* O padding horizontal fica na SEÇÃO, não no .inner — é assim que o Elementor
   trata um container boxed: os 20px afetam o container externo e o .e-con-inner
   de 1140px continua íntegro. Com o padding dentro do .inner a área útil caía
   para 1100px e o 4º cartão (que precisa de 1110px) quebrava para baixo. */
.benefits{padding-inline:20px}
.benefits .inner{padding:120px 0;gap:20px}
.benefits .shape svg{height:124px;width:300%}
.benefits .shape .shape-fill{fill:var(--shape-blue)}

.benefits-title{
  margin:30px 0;padding:0;
  text-align:center;
  font-family:var(--font-display);
  font-size:30px;font-weight:600;line-height:1.2em;
  color:var(--color-text);
  order:-99999;                 /* "order start hack" do Elementor */
}
.benefits-title .brand{color:#0072fe}

/* BUG-008: os 4 cartões ficam em UMA linha no desktop — 4×270 + 3×10 = 1110,
   centrados no container de 1140, o que põe o primeiro em x=165 e dá o passo
   de 280px em x, exatamente como o original. */
.benefits-grid{
  display:flex;flex-direction:row;
  flex-wrap:nowrap;    /* entre 1025 e ~1180px os cartões encolhem juntos em
                          vez de um só cair para a linha de baixo */
  justify-content:center;
  gap:10px;
  width:100%;
  padding:20px 0;
}
.benefit-card{
  width:270px;
  align-self:stretch;
  background-color:#FFFFFF;
  padding:52px 22px;
  border-radius:30px;
  box-shadow:5px 5px 26px -9px rgba(0,0,0,.5);
}
.benefit-card h3{
  margin:16px 0;
  font-family:var(--font-display);
  font-size:16px;font-weight:700;line-height:1.2em;
  color:var(--color-text);
}
.benefit-card p{
  margin:0;
  font-family:var(--font-widget);
  font-size:13px;font-weight:400;line-height:1.2em;
  color:var(--color-text);
}
.benefits .btn-wrap{order:99999;align-self:center;margin:0;padding:10px 0}

/* --- 9 · Rodapé -------------------------------------------------------------
   BUG-003: o link computa #7A7A7A (cor herdada do widget text-editor) e o texto
   visível é branco por um <span> interno — exatamente como no original.
   -------------------------------------------------------------------------- */
.footer{background-color:#000000}
.footer .inner{flex-direction:row;flex-wrap:wrap;gap:0;padding:10px 20px}
.footer-col{flex:1 1 0;display:flex;flex-direction:column;padding:10px 0;gap:20px}
.footer-col p{
  margin:10px 0;
  font-family:var(--font-widget);
  font-size:10px;font-weight:400;
  color:var(--color-text);
}
.footer-col a{color:var(--color-text)}
.footer-col .txt-white{color:#FFFFFF}
.footer-col a:hover .txt-white{text-decoration:underline}

/* --- Botão flutuante de WhatsApp -------------------------------------------- */
.whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:9999;cursor:pointer}
.pulse-circle{position:relative;width:75px;height:75px;border-radius:50%}
.pulse-circle::before{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  background-color:rgba(37,211,102,.5);
  animation:pulse-circle 1.8s infinite;
  z-index:-1;
}
.pulse-circle .icon{width:75px;height:75px;border-radius:50%;display:block}


/* =============================================================================
   06 · ANIMAÇÕES
   ========================================================================== */
.anim{opacity:0}
.anim.is-visible{opacity:1}
.anim--pulse.is-visible{animation:pulse 1s}
.anim--slide.is-visible{animation:slideInDown 1s}
.pulse-loop{animation:pulse 2s infinite}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
@keyframes slideInDown{
  from{transform:translate3d(0,-100%,0);visibility:visible}
  to{transform:translate3d(0,0,0)}
}
@keyframes pulse-circle{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.8);opacity:0}
  100%{transform:scale(1);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .anim{opacity:1}
  .anim--pulse.is-visible,
  .anim--slide.is-visible,
  .pulse-loop,
  .pulse-circle::before{animation:none}
  .carousel-track{transition:none}
}


/* =============================================================================
   07 · RESPONSIVO — breakpoints do Elementor (1024px / 767px)
   ========================================================================== */

/* --- Tablet ≤1024px --------------------------------------------------------- */
@media (max-width:1024px){
  .inner{max-width:1024px}

  .btn{font-size:15px;border-radius:12px;padding:10px 30px}
  .btn--cta{font-size:18px;padding:20px 40px}

  .carousel-slide{flex:0 0 50%}

  .about .inner{flex-direction:column;padding:80px 40px 50px}
  .about-media{max-width:100%}
  .about .shape-bottom svg{height:200px}

  .how{padding-inline:40px}
  .how .inner{padding:50px 0}

  .how-grid{min-height:0}
  .how-card{width:30%;max-width:30%;padding:30px 20px 0;text-align:center}
  .how-card .box{align-items:center}
  .how-card .icon{width:88px;height:88px}
  .how-card .desc{font-size:14px;line-height:1.2em}

  .services .inner{padding:87px 40px 5px}
  .service-card{width:22%;max-width:22%;padding:11px 0 0}
  .service-card .icon{width:48px;height:48px}
  .service-card h3{font-size:18px}

  /* 4×270 não cabe em 1024 — no tablet vira 2×2, como os dois sub-containers
     do original. Padding horizontal na seção, mesma lógica do desktop. */
  .benefits{padding-inline:40px}
  .benefits .inner{padding:80px 0}
  .benefits-grid{flex-wrap:wrap}
  .benefit-card{width:calc(50% - 5px)}
}

/* --- Mobile ≤767px ---------------------------------------------------------- */
@media (max-width:767px){
  /* No mobile o original AUMENTA as imagens de conteúdo. Redeclarar os tokens
     aqui é o que impede o cap de desktop de vazar para baixo (BUG-005). */
  :root{
    --about-img-width:310px;    /* mobile: 310×228 */
    --testimonial-width:320px;  /* mobile: 320×569 */
    --carousel-img-width:300px; /* mobile: 300×300 */
  }

  .inner{max-width:767px}

  /* Botões md: 17px / raio 18px / padding 12px 30px (medido no original). */
  .btn{font-size:17px;border-radius:18px;padding:12px 30px}
  .btn--cta{font-size:18px;border-radius:19px;padding:20px 40px}
  .btn--benefits{font-size:15px;padding:12px}

  /* BUG-002 mobile, cadeia de deltas medidos na rodada 4:
       logo −51px  → margin-top 14 → −37, que põe o topo em −27 (o original
                     REALMENTE corta o logo no topo; confirmado no post-7.css)
       UBERABA      → já estava certo em y=35; o −38 no fecho devolve os 51px
                     para que ela não suba junto com o logo
       "Sofá Sujo?" −12px → city 25 → 13
       CTA          +44px, mais os 12 que ele herda do H2 = +56 → 42 → 98
       altura 570px (era 506): +44 vêm da cadeia, +20 do padding-bottom */
  .hero .inner{padding:10px 20px 30px}
  .hero-logo{margin:-37px auto -38px}
  .hero-city{margin:0 0 13px}
  .hero .btn-wrap{margin:98px 0 0}
  .hero h1{font-size:33px}      /* único override explícito do original */
  .hero-sub{font-size:19px}

  .carousel-slide{flex:0 0 100%}

  .about .inner{padding:50px 30px 60px}
  .about .shape-bottom svg{height:120px}

  /* Faixa "Como funciona" no mobile, medida no original: os dois textos caem
     para 21px/15px (o wrapper do título ainda leva o -8px), e a grade usa
     gap 20px com padding 11px/0 — 11 + 3x181 + 2x20 = 594. */
  .how{padding-inline:30px}
  .how .inner{padding:50px 0}
  .how-title{font-size:21px;margin:21px 0 13px}
  .how-sub{font-size:15px;margin:15px 0}
  .how-grid{padding:11px 0 0;gap:20px}
  .how-card{width:100%;max-width:100%;padding:20px}
  .how-card .icon{width:90px;height:90px}
  .how-card .desc{font-size:15px}

  .services .inner{padding:50px 30px}
  .services-grid{gap:18px}
  .service-card{width:44%;max-width:44%;padding:13px 10px 10px}
  .service-card .icon{width:46px;height:46px}
  .service-card h3{font-size:18px}

  /* BUG-009 mobile: gap vertical medido 50px (era 30). Também devolve ~40px
     de altura, o que ajuda o BUG-005. */
  .testimonials .inner{flex-direction:column;gap:0}
  .testimonial{margin:25px 15px}

  /* O original NÃO reduz o padding do card no mobile — só a largura e as
     fontes. Os 52px de cima e de baixo permanecem. */
  .benefits{padding-inline:30px}
  .benefits .inner{padding:80px 0}
  /* Mobile já passava (os cartões empilham): 267.2px não cabe duas vezes em
     390px, então o flex-wrap resolve o empilhamento sozinho. */
  .benefit-card{width:267.2px}

  /* ---- Métricas mobile medidas no original (NÃO derivam do desktop) -------
     Os títulos de seção caem de 30px para 21px, o cartão de benefício usa
     padding 30/30 em vez de 52/52, e cada margem de 1em acompanha o
     font-size do próprio bloco. Aplicar os valores de desktop aqui foi o que
     estourou a altura mobile em +467px. */
  .about-kicker{font-size:21px;margin:21px 0}
  .about-text{font-size:15px;margin:15px 0}
  .about-nudge{font-size:14px;margin:14px 0;padding:4px 0 0}
  .about .btn-wrap{padding-top:10px}

  .services .btn-wrap{padding-top:10px}
  .services-title{font-size:21px;margin:21px 0}
  .services-grid{padding:0}
  .service-card h3{margin-top:18px}

  .testimonial{margin:15px}

  .benefits-title{font-size:21px;margin:21px 0}
  .benefit-card{padding:30px 22px}
  .benefit-card h3{font-size:14px;margin:14px 0}
  .benefits .btn-wrap{margin-top:-20px}

  .footer .inner{flex-direction:column;text-align:center}
  .footer-col{align-items:center}

  .pulse-circle,.pulse-circle .icon{width:60px;height:60px}
}