/* ==========================================================================
   Pluma Lavanderia — sistema visual
   Direção: "vitrine adesivada". A porta de vidro da loja já é a peça de
   comunicação da marca (navy, discos azuis sobrepostos, números condensados
   gigantes). A página repete esse vocabulário para que quem clica no anúncio
   reconheça a fachada quando chegar.

   Paleta: o ciano #00AEEF sai do vetor oficial do logo. O navy do vetor
   (#000066) NÃO é usado como campo — ver nota abaixo. Os escuros e os tons de
   texto do hero saem das fotos das fachadas, medidos, não estimados.
   Contraste conferido — quatro limites que o CSS respeita em todo lugar:
     branco sobre #25D366 = 1.98 REPROVA  -> botão WhatsApp leva texto navy (8.17)
     branco sobre #00AEEF = 2.53 REPROVA  -> sobre ciano, texto sempre escuro
     #00AEEF sobre claro  = 2.31 REPROVA  -> ciano nunca é texto sobre claro
     #0086BE sobre claro  = 3.77 SÓ GRANDE-> ciano de texto é #006C9B (5.37)
   ========================================================================== */

/* ---------- Fontes auto-hospedadas ------------------------------------------
   Archivo variável: um arquivo cobre peso 400-800 E largura 62-125%.
   A marca usa os dois extremos fisicamente — letreiro expandido no PLUMA,
   condensado nos adesivos de preço — então o eixo de largura não é enfeite.
   Sem fonts.googleapis.com: aquilo custa ~750ms de bloqueio de renderização.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-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;
}

/* ---------- Tokens ---------------------------------------------------------
   Os escuros NÃO são o #000066 do vetor. Aquilo é HSL(240, 100%, 20%) — mesmo
   matiz e mesma saturação do "Navy" do HTML 4, a barra de título do Windows 95,
   cinco pontos de luminosidade abaixo. Saturação 100% em matiz primário puro é
   assinatura de cor de sistema operacional, e como campo grande a página inteira
   lê assim. A marca também não se apresenta desse jeito: medido nas fachadas, o
   campo do letreiro de Itararé é #4A4358 (saturação 14%) e o lettering PLUMA é
   #5A5266 (11%). A marca aplicada é quase neutra com viés roxo.
   Por isso o escuro do sistema é #1E1B44 — HSL(244, 43%, 19%).
--------------------------------------------------------------------------- */
:root {
  --navy:    #1E1B44;   /* campo escuro: header, CTA final, passos, discos      */
  --navy-90: #171434;   /* um degrau abaixo: pilares e a camada de baixo da onda */
  --ciano:   #00AEEF;   /* do vetor. Preenchimento e fundo — nunca texto claro   */
  --ciano-esc: #0090C8;
  --ciano-txt: #006C9B; /* o ciano QUANDO É TEXTO sobre fundo claro (5.37:1)     */
  --roxo:    #4B4576;
  --tinta:   #14122B;
  --grafite: #4A4F68;
  --gelo:    #F2F5F9;
  --branco:  #FFFFFF;
  --linha:   #D9E1EC;
  --wa:      #25D366;
  --wa-hover:#1FBA5A;

  /* Hero claro — fiel ao interior da loja: branco, piso claro, iluminado.
     Os tons de texto são as cores medidas na fachada, não uma escala de cinza:
     o sub é o campo do letreiro, o micro é o lettering PLUMA. */
  --hero-bg:    #F4F6FB;
  --hero-h1:    #2E2A47;   /* 12.63:1 */
  --hero-sub:   #4A4358;   /*  8.69:1 — campo do letreiro de Itararé */
  --hero-micro: #5A5266;   /*  6.85:1 — lettering PLUMA */
  --hero-linha: #D8DCE9;

  --wrap: 1180px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --secao-y: clamp(3.6rem, 8vw, 6.5rem);
  --r: 14px;
  --r-lg: 22px;

  --sombra: 0 2px 4px rgba(20,18,43,.05), 0 12px 32px rgba(20,18,43,.09);
  --sombra-alta: 0 4px 8px rgba(20,18,43,.07), 0 24px 56px rgba(20,18,43,.16);
}

/* ---------- Base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.06; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* fixed, não absolute: com absolute o link salta para o topo do DOCUMENTO e some
   da tela quando a pessoa está no meio da página — que é quando ela tabula. */
.pular {
  position: fixed; left: -9999px; top: 1rem; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem;
  border-radius: 6px; font-weight: 700; text-decoration: none;
}
.pular:focus { left: 1rem; }

/* ---------- Tipografia ----------------------------------------------------- */
/* Expandido pesado = o letreiro PLUMA na fachada. */
.display {
  font-stretch: 118%;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.02;
}
/* Condensado pesado = os adesivos de preço na vitrine. */
.condensado {
  font-stretch: 70%;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
}
/* Utilitário: eyebrows, rótulos de tabela, legendas. */
.rotulo {
  font-stretch: 78%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .775rem;
  line-height: 1.35;
}

/* O teto caiu de 3.95rem para 3.7rem quando a foto passou a sangrar: a coluna
   de texto encolheu para 635px, e a 63.2px o H1 não fecha mais em três linhas. */
.h1     { font-size: clamp(2.3rem, 5.6vw, 3.7rem); }
.h2     { font-size: clamp(1.85rem, 4.4vw, 2.95rem); }
.h3     { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-stretch: 105%; font-weight: 700; letter-spacing: -.01em; }
.lead   { font-size: clamp(1.06rem, 1.9vw, 1.24rem); line-height: 1.55; }
.miudo  { font-size: .92rem; line-height: 1.5; }

/* O destaque de cor do H1. O padrão é a versão escura, porque o hero é claro;
   sobre campo escuro ele volta a ser o ciano do vetor. #0086BE, que o estudo de
   hero propunha, dá 3.77:1 e só passaria em texto grande — não serve de token. */
.ciano-txt { color: var(--ciano-txt); }
.secao--navy .ciano-txt,
.hero--escuro .ciano-txt { color: var(--ciano); }

/* ---------- Seções --------------------------------------------------------- */
.secao { padding-block: var(--secao-y); }
.secao--gelo   { background: var(--gelo); }
.secao--navy   { background: var(--navy); color: #fff; }
.secao--ciano  { background: var(--ciano); color: var(--tinta); }
.secao--branco { background: var(--branco); }

.secao__topo { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao__eyebrow { color: var(--roxo); margin-bottom: .85rem; }
.secao--navy  .secao__eyebrow { color: var(--ciano); }
.secao--ciano .secao__eyebrow { color: var(--navy); }
.secao__sub { margin-top: 1.1rem; color: var(--grafite); }
.secao--navy  .secao__sub { color: #C6CBE8; }
.secao--ciano .secao__sub { color: #0d2b3d; }

/* ---------- Botões --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.02rem 1.65rem;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 1.02rem; font-stretch: 96%; font-weight: 700;
  letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__ico { flex: none; width: 20px; height: 20px; fill: currentColor; }

/* Texto navy sobre o verde: branco daria 1.98:1. Navy dá 8.88:1 e mantém a cor. */
.btn--wa { background: var(--wa); color: var(--navy); box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.btn--wa:hover { background: var(--wa-hover); }

.btn--rota { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.42); }
.btn--rota:hover { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 2px #fff; }

/* O par do btn--rota para fundo claro — é o que o hero usa desde que virou claro. */
.btn--rota-escuro { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px rgba(30,27,68,.30); }
.btn--rota-escuro:hover { background: rgba(30,27,68,.06); box-shadow: inset 0 0 0 2px var(--navy); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #00004d; }

.btn-linha { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header --------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.topo__grid {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; padding-block: .65rem;
}
.topo__logo { flex: none; }
.topo__logo img { width: 148px; height: auto; }

/* Switch de unidade: a raiz é Itaporanga, então quem é de Itararé precisa de
   uma saída VISÍVEL na primeira dobra, não de um link escondido no menu. */
.unidades {
  display: flex; gap: 3px; margin-left: auto;
  padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.11);
}
.unidades__op {
  padding: .44rem .82rem; border-radius: 999px;
  color: #C6CBE8; text-decoration: none; white-space: nowrap;
  font-stretch: 80%; font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .07em;
  transition: background-color .16s ease, color .16s ease;
}
.unidades__op:hover { color: #fff; background: rgba(255,255,255,.13); }
.unidades__op[aria-current="page"] { background: var(--ciano); color: var(--navy); }
.unidades__op[aria-current="page"]:hover { background: var(--ciano); }

.topo__wa { display: none; }

/* Abaixo de 400px o logo a 148px mais os dois pills a 196px somam 397px de
   conteúdo — em 360px isso empurra a barra de rolagem horizontal na página
   inteira. Encolher o switch é preferível a escondê-lo: quem é de Itararé cai
   na raiz, que é Itaporanga, e precisa da saída visível na primeira dobra. */
@media (max-width: 399px) {
  .topo__logo img { width: 108px; }
  .unidades { gap: 2px; padding: 2px; }
  .unidades__op { padding: .4rem .55rem; font-size: .7rem; letter-spacing: .03em; }
}

@media (min-width: 900px) {
  .topo__wa {
    display: inline-flex; margin-left: 1rem;
    padding: .68rem 1.15rem; font-size: .93rem;
  }
}

/* ---------- Hero -----------------------------------------------------------
   Campo claro, fiel ao que a pessoa encontra na loja: branco, piso claro,
   iluminado. O peso que o campo escuro dava agora vem da tipografia — Archivo
   expandido a 118% e peso 800, que é o letreiro da fachada — e da onda na base.
   Não existe halo aqui: o gradiente radial ciano que ficava atrás do texto era
   luz de vitrine à noite sobre campo escuro. Sobre #F4F6FB ele não lê como luz,
   lê como mancha, e foi removido em vez de desligado.

   A foto NÃO fica dentro do .wrap: ela sangra até a borda direita da viewport.
   Por isso a <figure> é filha direta da <section> e não entra na grade de
   conteúdo. Abaixo de 900px ela volta ao fluxo, em largura total, logo depois
   do texto — e a onda cruza a base dela.
--------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-sub);
  padding-top: clamp(2.6rem, 6vw, 4.5rem);
  /* zero no mobile de propósito: a foto vai até a base e a onda passa por cima
     dela. No desktop o padding volta, porque lá quem fica embaixo da curva é a
     coluna de texto. */
  padding-bottom: 0;
  overflow: hidden;
}
/* Acima da foto: entre 900 e 1100px a coluna de texto e a foto chegam perto, e
   o texto tem de vencer a sobreposição. */
.hero__conteudo { position: relative; z-index: 3; }

.hero__eyebrow { color: var(--ciano-txt); margin-bottom: 1.1rem; }
.hero__h1 { color: var(--hero-h1); margin-bottom: 1.5rem; }
.hero__sub { color: var(--hero-sub); max-width: 34rem; margin-bottom: 1.5rem; }
.hero__ctas { margin-bottom: 1.4rem; }

/* Versal só nos CTAs do hero. No .btn global isto vazaria para a barra fixa e
   para os CTAs de seção, que são frase corrida e ficam gritados em caixa alta. */
.hero__ctas .btn { text-transform: uppercase; letter-spacing: .045em; font-size: .96rem; }

/* ---------- Selo do hero (o que já vai incluso) ----------------------------
   Responde à objeção que mais aparece no WhatsApp antes da primeira visita.
   O campo tem de ficar em #EDF3FA ou mais claro: com --ciano-txt no título este
   par dá ~4.8:1, e escurecer o fundo derruba abaixo dos 4.5 exigidos.
--------------------------------------------------------------------------- */
.hero-selo {
  display: grid; grid-template-columns: 42px 1fr; gap: .95rem;
  align-items: start;
  max-width: 34rem; margin-bottom: 1.4rem;
  padding: 1.05rem 1.25rem;
  background: #EDF3FA;
  border: 1px solid var(--hero-linha);
  border-radius: var(--r);
}
.hero-selo__ico { width: 42px; height: 42px; color: var(--ciano-txt); }
.hero-selo__titulo { display: block; font-stretch: 104%; font-weight: 700; color: var(--ciano-txt); margin-bottom: .12rem; }
.hero-selo__txt { display: block; color: var(--hero-sub); font-size: .96rem; line-height: 1.45; }

/* ---------- Faixa de preço — só mobile -------------------------------------
   No desktop o disco sobre a foto já entrega o 39,80 na mesma dobra, a poucos
   centímetros daqui, e os 135px desta faixa jogam o CTA para fora da dobra em
   1366x768. No mobile a foto só começa ~1.000px abaixo do topo: sem a faixa o
   preço estrearia perto de 1.300px, quase duas telas de rolagem.
   O asterisco some junto — sem a faixa ele fica apontando para um número que
   está do outro lado da tela, dentro do disco.
--------------------------------------------------------------------------- */
.faixa-preco {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .35rem 1.1rem;
  max-width: 34rem; margin-bottom: .9rem;
  padding: 1.1rem 1.3rem 1rem;
  background: var(--navy); color: #fff;
  border-radius: var(--r);
}
.faixa-preco__rot b {
  display: block; color: var(--ciano);
  font-stretch: 78%; font-weight: 800; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.faixa-preco__rot span {
  display: block; color: #C9CEEA;
  font-stretch: 78%; font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.faixa-preco__valor {
  display: flex; align-items: flex-start; justify-content: flex-end; gap: .16em;
  font-size: clamp(2.5rem, 12vw, 3.2rem); line-height: .95;
}
.faixa-preco__cifra { font-size: .38em; font-weight: 700; letter-spacing: 0; margin-top: .5em; }
.faixa-preco__nota { grid-column: 1 / -1; margin: .3rem 0 0; color: #C9CEEA; font-size: .84rem; line-height: 1.4; }

.hero__asterisco { max-width: 34rem; margin-bottom: 1.4rem; color: var(--hero-micro); }

/* O corte é 1180px (= --wrap) e não 900px porque é aí que a foto passa a sangrar
   e o disco entra na mesma dobra. Entre 900 e 1180 o hero ainda é empilhado, a
   foto só começa ~700px abaixo, e sem esta faixa o preço sumiria da dobra. */
@media (min-width: 1180px) {
  .faixa-preco, .hero__asterisco { display: none; }
}

/* Em 320px o rótulo e o número não cabem lado a lado por ~4px. Empilhar é mais
   honesto que encolher o número, que é o elemento que a faixa existe para dar. */
@media (max-width: 399px) {
  .faixa-preco { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .25rem; }
  .faixa-preco__valor { justify-content: center; }
}

/* ---------- Endereço do hero ----------------------------------------------- */
.hero-nap {
  display: grid; grid-template-columns: 22px 1fr; gap: .04rem .7rem;
  max-width: 30rem; color: var(--hero-micro);
  font-size: .95rem; line-height: 1.5;
}
.hero-nap__ico {
  grid-row: 1 / span 3; width: 22px; height: 22px;
  margin-top: .2rem; color: var(--ciano-txt); fill: currentColor;
}
.hero-nap b { color: var(--ciano-txt); font-stretch: 100%; font-weight: 700; }

/* ---------- A onda da fachada (assinatura) ---------------------------------
   Três faixas curvas — lavanda, ciano, escuro — que atravessam a placa do
   letreiro e reaparecem na vitrine e no logo. É o elemento visual mais
   distintivo que a marca já tem, e com o hero claro ele passa a ter função
   além de assinatura: faz a passagem para a faixa escura dos pilares.
   Fica DENTRO da <section>, ancorada na base. Fora dela, a área acima da curva
   mostraria o fundo da página em vez do fundo do hero.
   A camada de baixo (--f3) tem de ser exatamente a cor dos pilares, senão
   aparece um filete de outra cor na emenda.
   As cores entram por variável porque <use> cria shadow DOM e seletor externo
   não atravessa — variável atravessa.
--------------------------------------------------------------------------- */
.onda {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  display: block; width: 100%; height: clamp(38px, 5vw, 66px);
  --f1: #8D93C7;          /* faixa lavanda da placa, medida */
  --f2: #5EBEE6;          /* ciano da onda — o da placa, não o do vetor */
  --f3: var(--navy-90);   /* casa com .pilares */
}

/* ---------- Foto do hero ---------------------------------------------------
   Abaixo de 900px: largura total, altura fixa, e a onda cruza a base.
   De 900px para cima: sai do fluxo e sangra até a borda direita da viewport.
   A borda esquerda é ancorada na GRADE (metade da viewport + metade do wrap,
   menos a largura que a coluna de texto precisa), não numa porcentagem da
   viewport: com % a coluna de texto encolhe quanto mais larga fica a tela e o
   H1 ganha uma quarta linha em 1920px. O max() garante que em 900-1000px a
   foto não coma mais que 52% da largura.
   O object-position muda por unidade porque as duas fotos são diferentes —
   interior em Itaporanga, fachada noturna em Itararé. O CSS é o mesmo arquivo
   nas duas páginas; o que troca é a classe aplicada no HTML.
--------------------------------------------------------------------------- */
.hero__figura { position: relative; z-index: 1; margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; }
.hero__figura img {
  width: 100%; height: clamp(330px, 58vw, 470px);
  object-fit: cover;
}
.hero__figura--ita img { object-position: 52% 30%; }
.hero__figura--itr img { object-position: 50% 24%; }

/* Disco de preço: o mesmo adesivo que está colado na porta de vidro. */
.disco {
  display: grid; place-content: center; text-align: center;
  aspect-ratio: 1; border-radius: 50%;
  background: var(--ciano); color: var(--navy);
}
.disco__topo  { font-stretch: 80%; font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.disco__valor { font-stretch: 68%; font-weight: 800; line-height: .92; letter-spacing: -.02em; }
.disco__base  { font-stretch: 82%; font-weight: 600; font-size: .68rem; line-height: 1.25; opacity: .82; }
/* O cronômetro só entra no disco do hero em desktop — ver .hero__disco abaixo. */
.disco__ico   { display: none; width: 26px; height: 26px; margin: 0 auto .2rem; }

.hero__disco {
  position: absolute;
  right: var(--gut); bottom: clamp(46px, 7vw, 74px);
  width: clamp(142px, 34vw, 168px);
  /* sombra em tinta, não em preto: sobre o hero claro o preto a 30% suja o
     campo em vez de descolar o disco da foto. */
  box-shadow: 0 14px 34px rgba(20,18,43,.28);
}
.hero__disco .disco__valor { font-size: clamp(2.1rem, 5.6vw, 2.5rem); }
.hero__disco .disco__base  { font-size: .625rem; }

/* 1180px (= --wrap) e não 900px: abaixo disso a coluna da foto fica estreita
   demais e o object-fit come quase metade da imagem — em 1024 o slot cai para
   0.49 de proporção contra 0.90 do arquivo, ou seja 46% da foto fora de quadro.
   De 900 a 1180 o hero segue empilhado, que é o que a faixa de preço pressupõe. */
@media (min-width: 1180px) {
  /* De volta o espaço da onda: aqui quem fica sob a curva é a coluna de texto.
     Os dois clamps têm de acompanhar o clamp de .onda. */
  .hero { padding-bottom: calc(clamp(2.6rem, 6vw, 4rem) + clamp(38px, 5vw, 66px)); }
  /* O texto NÃO pode contar com a barriga do clip-path como folga: no topo, que
     é onde o H1 está, a curva ainda não recuou e as últimas palavras caem em
     cima da foto. Então a coluna é derivada da MESMA constante que posiciona a
     figura (505px), e não estimada: acima de 1180px a conta se reduz a 635px
     fixos, e abaixo disso ela encolhe junto com a viewport.
     635px é o piso para o H1 fechar em três linhas — "apenas 75 minutos" ocupa
     631px no Archivo a 59.2px/118%. Abaixo disso "apenas" cai sozinho numa
     quarta linha, órfã que custa 64px e tira o CTA da dobra em 1366x768.
     Se o H1 mudar de texto, remeça essa string antes de mexer aqui. */
  .hero__txt { max-width: min(635px, calc(100vw - 505px - var(--gut))); }

  .hero__figura {
    position: absolute; top: 0; right: 0; bottom: 0; margin: 0;
    left: max(48%, calc(50% + var(--wrap) / 2 - 505px));
  }
  .hero__figura img { height: 100%; clip-path: url(#recorte-hero); }
  .hero__figura--ita img { object-position: 54% center; }
  .hero__figura--itr img { object-position: 48% center; }

  /* O disco cabe com o cronômetro só a partir de 158px de diâmetro: o quadrado
     inscrito num disco de 142px dá 100px de altura útil, e ícone + rótulo +
     número + duas linhas de base pedem ~98px. Não sobra respiro no mobile. */
  .hero__disco { right: clamp(1.2rem, 5%, 3.2rem); bottom: 19%; width: clamp(158px, 15vw, 190px); }
  .hero__disco .disco__ico { display: block; }
  /* sobram 27px do quadrado inscrito a 190px: a base volta ao corpo padrão */
  .hero__disco .disco__base { font-size: .68rem; }
}

/* ---------- Pilares --------------------------------------------------------
   Sem border-top: quem faz a emenda com o hero agora é a onda, e um filete
   claro reto atravessando logo abaixo de uma curva denuncia os dois como
   elementos separados. */
.pilares { background: var(--navy-90); color: #fff; }
.pilares__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(255,255,255,.14);
}
.pilar {
  padding: 1.5rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  border-right: 1px solid rgba(255,255,255,.14);
}
.pilar:nth-child(2n) { border-right: 0; }
.pilar__chave { display: block; font-stretch: 72%; font-weight: 800; font-size: 1.42rem; color: var(--ciano); line-height: 1.12; }

.pilar__txt   { display: block; margin-top: .4rem; font-size: .93rem; line-height: 1.45; color: #C9CEEA; }

@media (min-width: 780px) {
  .pilares__grid { grid-template-columns: repeat(4, 1fr); border-bottom: 0; }
  .pilar { border-bottom: 0; padding: 2rem 1.4rem; }
  .pilar:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.14); }
  .pilar:last-child { border-right: 0; }
}

/* ---------- Passos --------------------------------------------------------- */
/* Numerado porque a ordem é real: um procedimento que a pessoa executa em
   sequência. O filete liga os números como a régua liga os minutos. */
.passos { display: grid; gap: 0; counter-reset: passo; }
.passo {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr; gap: 1.15rem;
  padding-bottom: 2.1rem;
}
.passo:last-child { padding-bottom: 0; }
.passo::before {
  counter-increment: passo; content: counter(passo);
  display: grid; place-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-stretch: 72%; font-weight: 800; font-size: 1.32rem;
}
.passo::after {
  content: ""; position: absolute; left: 22px; top: 46px; bottom: 8px;
  width: 2px; background: var(--linha);
}
.passo:last-child::after { display: none; }
.passo__titulo { margin-bottom: .5rem; }
.passo__txt { color: var(--grafite); }

/* O passo virou lista de instruções, e não parágrafo corrido, quando o cliente
   mandou o texto de "como funciona" em 12/08/2026: cada passo é uma sequência
   de 2-3 ações executadas em ordem, e em bloco corrido a pessoa perde o lugar
   no meio do procedimento. Sem marcador — a numeração do passo já é a ordem, e
   um segundo nível de bullet dentro de um <ol> numerado lê como sub-etapa. */
.passo__lista {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: .42rem;
  color: var(--grafite);
}
.passo__lista li { line-height: 1.5; }

.passo__selo {
  display: inline-block; margin-top: .8rem;
  padding: .3rem .72rem; border-radius: 999px;
  background: var(--ciano); color: var(--navy);
  font-stretch: 78%; font-weight: 800; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .07em;
}

@media (min-width: 860px) {
  .passos { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
  .passo::after { display: none; }
}

/* ---------- Soma do ciclo --------------------------------------------------
   A régua 0/35/75 saiu do hero em 11/08/2026. O tempo volta aqui, onde é
   verificável: os dois números que a pessoa acabou de ler nos passos, somados.
   Não é enfeite — é a única peça da página que mostra de ONDE vêm os 75
   minutos que o H1 promete.
--------------------------------------------------------------------------- */
.soma {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  margin-top: 2.2rem; padding: 1.1rem 1.3rem;
  background: var(--gelo); border-radius: var(--r);
}
.secao--gelo .soma { background: var(--branco); }
.soma__parcela { font-stretch: 76%; font-weight: 700; font-size: 1.02rem; color: var(--grafite); }
.soma__op { font-stretch: 76%; font-weight: 800; font-size: 1.02rem; color: var(--roxo); }
.soma__total { font-stretch: 72%; font-weight: 800; font-size: 1.42rem; color: var(--ciano-txt); letter-spacing: -.01em; }
.soma__nota { flex: 1 1 14rem; color: var(--grafite); font-size: .92rem; line-height: 1.45; }

.passos__rodape {
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
}
.passos__rodape p { color: var(--grafite); }

/* ---------- Preços --------------------------------------------------------- */
.precos { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 900px) { .precos { grid-template-columns: 1fr 300px; align-items: start; } }

.tabela { width: 100%; border-collapse: collapse; text-align: left; }
.tabela caption { text-align: left; padding-bottom: .9rem; color: var(--grafite); font-size: .92rem; }
.tabela th, .tabela td { padding: .95rem .6rem; border-bottom: 1px solid var(--linha); vertical-align: baseline; }
.tabela thead th { padding-block: .5rem; color: var(--roxo); border-bottom: 2px solid var(--roxo); }
.tabela th:first-child, .tabela td:first-child { padding-left: 0; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.tabela__serv { font-stretch: 104%; font-weight: 700; }
.tabela__cap  { color: var(--grafite); font-size: .92rem; }
.tabela__val  { font-stretch: 72%; font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; }
.tabela__nota { margin-top: 1rem; color: var(--grafite); }

/* A linha do combo é a decisão que a página quer que a pessoa tome. */
.tabela tr[data-destaque] td { background: rgba(0,174,239,.13); border-bottom-color: var(--ciano); }
.tabela tr[data-destaque] td:first-child { box-shadow: inset 4px 0 0 var(--ciano); padding-left: 1rem; }
.tabela tr[data-destaque] .tabela__val { font-size: 1.5rem; }

/* Em celular a tabela vira lista: nome e capacidade empilhados à esquerda,
   preço à direita. Três colunas em 390px espremem "Máquina grande" em 3 linhas. */
@media (max-width: 599px) {
  .tabela thead th:nth-child(2) { display: none; }
  .tabela thead th:first-child  { width: 100%; }
  .tabela tbody tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
  .tabela tbody td { border-bottom: 0; padding: .55rem 0; }
  .tabela tbody tr { border-bottom: 1px solid var(--linha); padding-block: .45rem; }
  .tabela .tabela__serv { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .tabela .tabela__cap  { grid-column: 1; grid-row: 2; padding-top: .1rem; }
  .tabela .tabela__val  { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-left: 1rem; }
  .tabela tr[data-destaque] { background: rgba(0,174,239,.13); border-bottom-color: var(--ciano); box-shadow: inset 4px 0 0 var(--ciano); }
  .tabela tr[data-destaque] td { background: none; }
  .tabela tr[data-destaque] td:first-child { box-shadow: none; }
  .tabela tr[data-destaque] .tabela__serv,
  .tabela tr[data-destaque] .tabela__cap { padding-left: .9rem; }
  .tabela tr[data-destaque] .tabela__val { padding-right: .7rem; }
}

/* Um disco só na página de preços — a oferta central. Mais que isso vira ruído. */
.preco-destaque {
  position: sticky; top: 90px;
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
  padding: 1.9rem 1.4rem;
  background: var(--navy); color: #fff; border-radius: var(--r-lg);
}
.preco-destaque .disco { width: 172px; }
.preco-destaque .disco__valor { font-size: 2.5rem; }
.preco-destaque__txt { color: #C9CEEA; font-size: .95rem; }

/* ---------- Bloco de destaque (secagem / edredom / assistido) -------------- */
.destaque { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .destaque { grid-template-columns: 1.05fr .95fr; }
  .destaque--inverso .destaque__figura { order: -1; }
}
.destaque__figura img { border-radius: var(--r-lg); box-shadow: var(--sombra); width: 100%; }
.destaque__txt > p { margin-bottom: 1.1rem; }
.destaque__cta { margin-top: 1.6rem; }

/* ---------- Por que a Pluma ------------------------------------------------ */
.motivos { display: grid; gap: 1px; background: var(--linha); border-block: 1px solid var(--linha); }
@media (min-width: 760px) { .motivos { grid-template-columns: repeat(2, 1fr); } }
.motivo { background: var(--branco); padding: 1.55rem 1.3rem; }
.secao--gelo .motivo { background: var(--gelo); }
.motivo__titulo { display: block; font-stretch: 104%; font-weight: 700; font-size: 1.04rem; margin-bottom: .3rem; }
.motivo__txt { color: var(--grafite); font-size: .96rem; }

/* ---------- Galeria -------------------------------------------------------- */
.galeria { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.foto { margin: 0; }
.foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r); box-shadow: var(--sombra);
}
.foto figcaption { margin-top: .6rem; color: var(--grafite); font-size: .86rem; line-height: 1.4; }
.foto--larga { grid-column: span 2; }
.foto--larga img { aspect-ratio: 16 / 10; }
@media (min-width: 860px) { .foto--larga { grid-column: span 1; } .foto--larga img { aspect-ratio: 4 / 5; } }

/* Card de preço no lugar de foto — quando não existe foto que ilustre o
   serviço de verdade, o preço prova melhor que uma imagem aproximada. */
.cartao-preco {
  display: grid; gap: 1.2rem; justify-items: center; text-align: center;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--navy); color: #fff; border-radius: var(--r-lg);
}
.cartao-preco .disco { width: clamp(158px, 34vw, 200px); }
.cartao-preco .disco__valor { font-size: clamp(2.1rem, 5vw, 2.7rem); }
.cartao-preco__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; width: 100%; }
.cartao-preco__lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: .95rem; text-align: left;
}
.cartao-preco__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.cartao-preco__lista span { color: #C9CEEA; }

/* ---------- FAQ ------------------------------------------------------------ */
.faq { max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-stretch: 104%; font-weight: 700; font-size: 1.05rem; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-stretch: 70%; font-weight: 800; font-size: 1.5rem; line-height: 1;
  color: var(--ciano-esc); transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__resp { padding-bottom: 1.3rem; color: var(--grafite); max-width: 46rem; }

/* ---------- Endereço ------------------------------------------------------- */
.endereco { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); }
@media (min-width: 900px) { .endereco { grid-template-columns: .9fr 1.1fr; } }
.endereco__mapa {
  border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg);
  box-shadow: var(--sombra); background: var(--gelo);
}
.endereco address { font-style: normal; }
.endereco__linha { display: grid; gap: .2rem; padding-block: .95rem; border-bottom: 1px solid var(--linha); }
.endereco__linha:first-of-type { padding-top: 0; }
.endereco__chave { color: var(--roxo); }
.endereco__raio { margin-top: 1.4rem; color: var(--grafite); font-size: .95rem; }

/* ---------- CTA final ------------------------------------------------------ */
.final { text-align: center; }
.final__txt { max-width: 40rem; margin-inline: auto; color: #C9CEEA; margin-top: 1.1rem; }
.final .btn-linha { justify-content: center; margin-top: 2rem; }

/* ---------- Rodapé --------------------------------------------------------- */
.footer { background: var(--tinta); color: #C9CEEA; padding-block: clamp(2.6rem, 5vw, 3.6rem); font-size: .95rem; }
.footer__nap { display: grid; gap: 1.9rem; }
@media (min-width: 820px) { .footer__nap { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2.2rem; } }
.footer__nap img { width: 160px; height: auto; }
.footer address { font-style: normal; line-height: 1.65; }
.footer strong { color: #fff; font-stretch: 100%; font-weight: 700; }
.footer a { color: #fff; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.footer a:hover { text-decoration-color: #fff; }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .86rem;
}
.footer__bar p { margin: 0; }

/* ---------- Barra fixa mobile ---------------------------------------------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(30,27,68,.96);   /* = --navy a 96%; o token não entra em rgba() */
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.16);
}
.barra .btn { padding: .82rem .9rem; font-size: .95rem; }
body { padding-bottom: 78px; }

@media (min-width: 900px) {
  .barra { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Movimento reduzido --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}