/* ==========================================================================
   Pluma Lavanderia — camada de personagens
   Carrega DEPOIS de style.css. Nao redefine token nenhum: herda a paleta,
   a tipografia e os limites de contraste ja fixados la.

   O problema que esta folha resolve: os personagens sao renders 3D saturados
   e brilhantes; o sistema da marca e' dessaturado de proposito (o letreiro
   real mede 11-14% de saturacao). Colocar os renders soltos sobre as secoes
   faria os dois brigarem. A reconciliacao e' o CHAO: cada personagem pisa
   numa onda — a mesma curva em S da placa da fachada, ja no #onda do HTML —
   e a onda e' quem carrega o ciano. O personagem fica por cima, ancorado,
   e a saturacao vira continuidade em vez de ruido.
   ========================================================================== */

/* ---------- Personagem sobre a onda ---------------------------------------- */
.figura-onda {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
  /* Contem a onda dentro do card: solta, ela invadia a margem da secao e lia
     como defeito. */
  overflow: hidden;

  /* Altura fixa, nao ditada pela imagem. Os personagens tem alturas de
     exibicao diferentes; sem esta trava a base de cada figura cai num lugar,
     as tres ondas param em linhas diferentes e o trilho se desfaz -- e os
     titulos dos tres cards deixam de alinhar junto. */
  height: 232px;
}

/* Cada card mostra UM TERCO da mesma onda: o SVG tem 3x a largura do card e
   desliza uma largura por etapa, com o overflow do pai fazendo o recorte.
   Lado a lado os tres remontam a curva inteira da placa da fachada, entao o
   trilho e' a onda da marca de verdade e nao tres copias iguais enfileiradas.

   O deslocamento e' por CSS e nao por viewBox no SVG: <use> de um <symbol>
   reescala o simbolo para o viewport em vez de recortar por coordenada, entao
   viewBox deslocado nao corta -- so o primeiro card mostrava onda. */
.figura-onda__onda {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300%;
  height: 58px;
  z-index: 0;
  --f1: #BFE9FA;
  --f2: #7FD3F4;
  --f3: #00AEEF;
}
.etapa:nth-child(2) .figura-onda__onda { left: -100%; }
.etapa:nth-child(3) .figura-onda__onda { left: -200%; }

/* Altura de exibicao por personagem, nao um teto unico. Eles foram gerados em
   proporcoes diferentes -- o Foguinho e' esguio e alto, o Zezinho e' baixo e
   largo -- entao a mesma max-height faz um parecer o dobro do outro. Os valores
   abaixo equalizam a MASSA aparente, nao a altura da caixa. */
.figura-onda__img {
  position: relative;
  z-index: 1;
  width: auto;
  height: var(--h, 180px);
  margin-bottom: 12px;
  filter: drop-shadow(0 12px 18px rgba(20, 18, 43, .18));
}
.bicho--zezinho  { --h: 168px; }
.bicho--pluminha { --h: 182px; }
.bicho--foguinho { --h: 206px; }
.bicho--gotinha  { --h: 176px; }
.bicho--robo     { --h: 190px; }

/* Solto, sem fila para formar: a onda vira um bloco de cantos retos porque nao
   ha vizinho para continuar nela. Aqui o chao e' uma elipse de contato. */
.figura-onda--solo { overflow: visible; height: auto; padding-bottom: 18px; }
.figura-onda--solo::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  translate: -50% 0;
  width: 74%;
  aspect-ratio: 4 / 1;
  background: radial-gradient(ellipse at center,
              rgba(0, 174, 239, .40) 0%, rgba(0, 174, 239, 0) 70%);
  z-index: 0;
}
.figura-onda--solo .figura-onda__img { --h: 208px; }
/* Na secagem o personagem divide a dobra com um H2 grande e ocupa a coluna
   inteira, entao aguenta mais altura sem dominar. */
.secao--ciano .figura-onda--solo .figura-onda__img { --h: 244px; }

@media (prefers-reduced-motion: no-preference) {
  .figura-onda__img { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
  .etapa:hover .figura-onda__img { transform: translateY(-6px); }
}

/* ---------- Selo do hero com a Gotinha -------------------------------------
   O selo original abria com um icone de bolhas de 42px. A Gotinha entra no
   mesmo slot, maior: ela E' o argumento ("nao precisa trazer sabao"), entao
   ocupa mais que um icone ocuparia, sem virar figura solta.
--------------------------------------------------------------------------- */
.hero-selo--bicho {
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 1.05rem;
}
.hero-selo__bicho {
  width: 78px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(20, 18, 43, .16));
}

/* ---------- Como funciona: as tres etapas ---------------------------------- */
.etapas {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}
@media (min-width: 760px) {
  .etapas { grid-template-columns: repeat(3, 1fr); }
}

.etapa {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem 1.7rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

/* O numero e' o adesivo de preco da vitrine: condensado pesado, grande, meio
   fora da caixa. Numeracao aqui nao e' enfeite — lavar, secar e retirar
   acontecem nessa ordem e a pessoa precisa saber qual vem antes. */
/* A figura anula o padding do card e encosta nas bordas: com a margem, a onda
   parava 22px antes da borda e o trilho aparecia interrompido por uma tira
   branca em cada emenda. */
.etapa .figura-onda {
  margin: -1.5rem -1.4rem 1.1rem;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  height: 252px;
}

.etapa__n {
  counter-increment: etapa;
  position: absolute;
  top: -.35em;
  left: 1rem;
  font-size: clamp(3.6rem, 8vw, 4.6rem);
  line-height: 1;
  color: var(--ciano);
  opacity: .22;
  pointer-events: none;
}
.etapa__n::before { content: counter(etapa); }

.etapa__titulo { margin-bottom: .5rem; }
.etapa__txt { color: var(--grafite); margin: 0; }

.etapa__selo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  margin-top: 1rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-stretch: 78%;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
}
.etapa__selo svg { width: 15px; height: 15px; flex: none; }

/* ---------- Pagamento: o Robo-Lave ----------------------------------------- */
.pagar {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .pagar { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}

.pagar__opcoes {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagar__op {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: .95rem 1.05rem;
  font-weight: 700;
}
.pagar__op span {
  display: block;
  font-weight: 400;
  font-size: .92rem;
  color: var(--grafite);
  margin-top: .15rem;
}

/* ---------- Cards de preco -------------------------------------------------- */
.cards-preco {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .cards-preco { grid-template-columns: repeat(3, 1fr); }
}

.cartao {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: var(--sombra);
}
.cartao[data-destaque] {
  border-color: var(--ciano);
  border-width: 2px;
  box-shadow: var(--sombra-alta);
}

.cartao__fita {
  position: absolute;
  top: -.75rem;
  left: 1.4rem;
  background: var(--ciano);
  /* Sobre ciano o texto e' sempre escuro — 2.53:1 com branco reprova. */
  color: var(--tinta);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-stretch: 78%;
  font-weight: 800;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cartao__servico {
  font-stretch: 105%;
  font-weight: 700;
  font-size: 1.12rem;
  margin-bottom: .2rem;
}
.cartao__valor {
  font-size: clamp(2.5rem, 6vw, 3.1rem);
  line-height: 1;
  margin: .5rem 0 .1rem;
  color: var(--navy);
}
.cartao__valor small {
  font-size: .42em;
  font-stretch: 82%;
  vertical-align: .55em;
  margin-right: .12em;
}
.cartao__cap {
  color: var(--grafite);
  font-size: .95rem;
  margin: 0 0 1.1rem;
}
.cartao .btn { margin-top: auto; width: 100%; }

/* ---------- Tabela completa, recolhida -------------------------------------- */
.tabela-toda { margin-top: 1.6rem; }
.tabela-toda > summary {
  cursor: pointer;
  font-stretch: 78%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--ciano-txt);
  padding: .6rem 0;
}
.tabela-toda > summary::marker { color: var(--ciano-txt); }
.tabela-toda[open] > summary { margin-bottom: .6rem; }

/* ---------- O time no fecho -------------------------------------------------- */
.time {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.2rem, 2vw, 1.2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: 8px;
  position: relative;
}
.time img {
  width: auto;
  max-height: clamp(74px, 13vw, 132px);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .3));
}

/* ---------- Edredom: o cartão de entrega -------------------------------------
   Aqui o personagem não fica AO LADO do quadro de preço — ele entrega a peça
   POR CIMA dele, sangrando pelo topo. Duas razões: um boneco parado ao lado de
   um card é decoração, e o gesto de entregar é literalmente o serviço que a
   seção vende (você deixa o edredom e recebe pronto). O card ganha o
   padding-top que acomoda a sangria.
--------------------------------------------------------------------------- */
.entrega {
  position: relative;
  padding-top: 96px;   /* espaço para a parte do personagem que sai do card */
}

.entrega__bicho {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: auto;
  height: 232px;
  z-index: 2;
  filter: drop-shadow(0 14px 22px rgba(20, 18, 43, .28));
  pointer-events: none;
}

.entrega__cartao {
  position: relative;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 152px 1.7rem 1.7rem;   /* o topo abre para o personagem pousar */
  text-align: center;
  box-shadow: var(--sombra-alta);
}

.entrega__rot {
  display: block;
  color: var(--ciano);
  font-stretch: 78%;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Sobre campo escuro o ciano do vetor volta a valer como cor de texto — a
   proibição do sistema é ciano sobre claro, que dá 2,31:1. */
.entrega__valor {
  display: block;
  color: var(--ciano);
  font-size: clamp(3rem, 8vw, 3.9rem);
  line-height: 1;
  margin: .35rem 0 1.2rem;
}
.entrega__valor small {
  font-size: .38em;
  font-stretch: 82%;
  vertical-align: .62em;
  margin-right: .1em;
}

.entrega__lista {
  display: grid;
  gap: .58rem;
  margin: 0;
  padding: 1.2rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-align: left;
}
.entrega__lista li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: .7rem;
  font-weight: 600;
}
/* Check desenhado com borda, não com o caractere ✓: o subset da Archivo não
   garante U+2713, e um tofu no lugar do check estragaria a lista inteira. */
.entrega__lista li::before {
  content: '';
  width: 7px;
  height: 12px;
  margin-left: 5px;
  border: solid var(--ciano);
  border-width: 0 2.5px 2.5px 0;
  rotate: 45deg;
  translate: 0 -2px;
}

/* Empilhado, o card ocupa a largura toda e o personagem fica grande demais
   para a proporção — encolhe junto com o padding que o acomoda. */
@media (max-width: 819px) {
  .entrega { padding-top: 72px; max-width: 26rem; margin-inline: auto; }
  .entrega__bicho { height: 184px; }
  .entrega__cartao { padding-top: 122px; }
}

/* ---------- Destaque com personagem ao lado ---------------------------------- */
.lado-a-lado {
  display: grid;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .lado-a-lado { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .lado-a-lado--inverso > :first-child { order: 2; }
  /* O cartão do edredom carrega preço, quatro itens e o personagem: 300px
     apertam a lista em duas linhas por item. */
  .lado-a-lado--cartao { grid-template-columns: minmax(0, 1fr) minmax(0, 344px); }
}

/* Sobre o campo ciano da secao de secagem o chao ciano some: ciano sobre ciano
   nao tem contorno. Ali ele vira sombra escura, que e' o que da volume. */
.secao--ciano .figura-onda__onda { display: none; }
.secao--ciano .figura-onda--solo::after {
  background: radial-gradient(ellipse at center,
              rgba(13, 43, 61, .32) 0%, rgba(13, 43, 61, 0) 70%);
}
.secao--ciano .figura-onda__img { filter: drop-shadow(0 14px 20px rgba(13, 43, 61, .34)); }