/* ==========================================================================
   RABO ABANANDO (demonstração, refeito 13/09/2026) — a MARCA por cima do esqueleto.
   Identidade A1: cachorro laranja com o rabo virando coração, contorno marinho, coleira turquesa.
   Paleta medida no símbolo: laranja #FD7A43 · marinho #312163 · turquesa #16BDBD · sol #FFD23F.
   Página branca, cor nos elementos, coluna 920px do menu ao rodapé, rodapé vivo.
   ========================================================================== */

:root {
  --cor-titulo:      #241A5C;   /* marinho da logo, um pouco mais fundo pra texto */
  --cor-texto:       #2A2450;
  --cor-texto-suave: #5B5680;
  --cor-acao:        #F26A2E;
  --cor-acao-escura: #D9480F;
  --cor-acao-viva:   #FF9A5C;
  --turquesa:        #16BDBD;
  --turquesa-escuro: #0B8A8A;
  --sol:             #FFD23F;
  --grad:      linear-gradient(95deg, #FF8A50 0%, #F26A2E 55%, #E0521A 100%);
  --grad-btn:  linear-gradient(120deg, #FF8A50 0%, #E8561E 50%, #C9410C 100%);   /* o elemento mais vivo da tela */
  --sombra-btn: rgba(232, 86, 30, .42);

  --fundo:          #FFFFFF;
  --borda-cartao:   rgba(36, 26, 92, .10);
  --sombra-cartao:  rgba(36, 26, 92, .14);
  --linha:          rgba(36, 26, 92, .10);
  --foco:           #16BDBD;

  /* rodapé vivo = marinho da marca */
  --forte-1: #3A2F8F; --forte-2: #241A5C; --forte-3: #16103F; --sobre-forte: #FFD23F;

  --fonte:        "Nunito", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Baloo 2", "Nunito", system-ui, sans-serif;   /* pet: arredondada (cerebro/41) */
  --script:       "Satisfy", "Segoe Script", cursive;
}

h1, h2, h3, .marca__txt b { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -.01em; }
.etiqueta { color: var(--turquesa-escuro); font-weight: 800; }
.marca img { height: 50px; }
.marca__txt b { font-size: 1.45rem; line-height: .95; }
.marca__txt b i { background: none; -webkit-text-fill-color: currentColor; color: var(--cor-acao); font-style: normal; }
.marca__txt small { color: var(--turquesa-escuro); font-weight: 800; letter-spacing: .14em; }
.menu a { font-weight: 700; }
.btn { font-weight: 800; }
.btn--acao { box-shadow: 0 14px 30px var(--sombra-btn), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--acao:hover { filter: brightness(1.07) saturate(1.1); }

/* ------------------------------------------------------------------ banner */
.hero::after { background: radial-gradient(ellipse 44% 82% at 29% 50%, rgba(255,255,255,.84) 0%, rgba(240,252,252,.55) 50%, rgba(240,252,252,0) 100%); }
.hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.8rem); line-height: .95; letter-spacing: -.02em; }
.hero__sub { color: #1C1640; font-weight: 600; }
.hero .btn--grande { padding: 17px 32px; font-size: 1.08rem; }
.hero__nota { margin-top: 14px; font-size: .9rem; font-weight: 700; color: #3A335F; }
.hero__script { font-size: clamp(2rem, 2.8vw, 2.9rem); color: var(--cor-titulo); }
.traco { color: var(--cor-acao); }

/* -------------------------------------------------- promessas (cartão branco) */
.beneficios { box-shadow: none; }
.beneficios__grid { gap: 14px; padding-block: clamp(26px, 3vw, 40px); }
.beneficio { display: flex; align-items: center; gap: 12px; padding: 14px 14px; text-align: left; border-radius: 18px; background: #fff;
  border: 1px solid var(--borda-cartao); box-shadow: 0 16px 34px rgba(36, 26, 92, .10); }
.beneficio + .beneficio { border-left: 1px solid var(--borda-cartao); }
.beneficio__ico { flex: none; width: 58px; height: 58px; margin: 0; background: none; box-shadow: none; }
.beneficio__ico img { width: 58px; height: 58px; filter: drop-shadow(0 8px 12px rgba(36, 26, 92, .18)); }
.beneficio h2 { font-size: 1.02rem; line-height: 1.15; }
.beneficio p { margin-top: 2px; font-size: .8rem; }

/* ---------------------------------------------------------- serviços (cor cheia) */
.cartao-cor { --m-grad: linear-gradient(165deg, #FF8A50 0%, #EE6428 45%, #C9410C 100%); --m-escuro: #A8360A; --m-sombra: rgba(201, 65, 12, .32); }
.cartao-cor--turquesa { --m-grad: linear-gradient(165deg, #25CFCF 0%, #10A5A5 45%, #0A7676 100%); --m-escuro: #075C5C; --m-sombra: rgba(10, 118, 118, .32); }
.cartao-cor--marinho  { --m-grad: linear-gradient(165deg, #4A3FA6 0%, #2E2475 45%, #1A1350 100%); --m-escuro: #241A5C; --m-sombra: rgba(36, 26, 92, .34); }
.cartao-cor__nota { margin: 0 22px 18px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: .84rem; font-weight: 700; color: #fff; }
.cartao-cor .btn--branco { margin-top: auto; }

/* ---------------------------------------------------------------- preços */
.tabela-rolo { overflow-x: auto; border-radius: 22px; box-shadow: 0 22px 46px rgba(36, 26, 92, .14); }
.tabela { width: 100%; min-width: 460px; border-collapse: collapse; background: #fff; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { text-align: left; padding: 16px clamp(14px, 2.2vw, 26px); }
.tabela thead th { background: linear-gradient(120deg, #3A2F8F, #241A5C); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tabela tbody tr:nth-child(even) { background: #F7F6FD; }
.tabela tbody th { font-family: var(--fonte-titulo); font-size: 1.14rem; font-weight: 800; color: var(--cor-titulo); }
.tabela tbody th span { display: block; font-family: var(--fonte); font-size: .8rem; font-weight: 600; color: var(--cor-texto-suave); }
.preco { display: inline-block; padding: 6px 14px; border-radius: 999px; font-family: var(--fonte-titulo); font-size: 1.12rem; font-weight: 800; color: #fff; background: var(--grad-btn); white-space: nowrap; }
.preco--turquesa { background: linear-gradient(120deg, #25CFCF, #0A7676); }
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.extras p { margin: 0; padding: 16px 18px; border-radius: 16px; font-size: .9rem; color: var(--cor-texto-suave);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF1E8 100%); border: 1.5px solid #FFD2B8; box-shadow: 0 10px 22px rgba(232, 86, 30, .10); }
.extras p:nth-child(2) { background: linear-gradient(135deg, #FFFFFF 0%, #E3F8F8 100%); border-color: #A9E8E8; box-shadow: 0 10px 22px rgba(16, 165, 165, .10); }
.extras p:nth-child(3) { background: linear-gradient(135deg, #FFFFFF 0%, #FFF7D6 100%); border-color: #FFE38A; box-shadow: 0 10px 22px rgba(255, 190, 0, .12); }
.extras strong { display: block; margin-bottom: 2px; color: var(--cor-titulo); }

/* ----------------------------------------------------- a loja (alto contraste) */
.visual-destaque::before { background: linear-gradient(150deg, #FF9A5C 0%, #F26A2E 55%, #C9410C 100%); }
.visual-destaque::after { border-color: var(--turquesa); opacity: .7; }
.traco-sob::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C60 5 140 3 196 9' fill='none' stroke='%2316BDBD' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.mini-cartao { --mc-tinta: linear-gradient(135deg, #FFF4EC, #FFE2D0); --mc-borda: #FFC9A8; --mc-grad: linear-gradient(145deg, #FF8A50, #D9480F); --mc-sombra: rgba(217, 72, 15, .2); }
.mini-cartao--azul { --mc-tinta: linear-gradient(135deg, #E9FAFA, #CFF3F3); --mc-borda: #9EE3E3; --mc-grad: linear-gradient(145deg, #25CFCF, #0A7676); --mc-sombra: rgba(10, 118, 118, .2); }
.mini-cartao--laranja { --mc-tinta: linear-gradient(135deg, #F1EFFC, #E1DCF7); --mc-borda: #C9C0F0; --mc-grad: linear-gradient(145deg, #4A3FA6, #241A5C); --mc-sombra: rgba(36, 26, 92, .22); }
.visual-destaque__script { color: var(--cor-titulo); }
.lista-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cor-titulo); }
.lista-check svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #fff; background: var(--grad-btn); }

/* ----------------------------------------------------------- depoimentos */
.voz { --v-cor: #F26A2E; --v-clara: #FFE2D0; --v-sombra: rgba(242, 106, 46, .16);
  position: relative; overflow: hidden; padding: 28px 24px 24px; border-radius: 22px; border: 2px solid var(--v-cor);
  background: linear-gradient(160deg, #FFFFFF 55%, var(--v-clara) 140%); box-shadow: 0 20px 40px var(--v-sombra); }
.voz:nth-child(2) { --v-cor: #16BDBD; --v-clara: #CFF3F3; --v-sombra: rgba(22, 189, 189, .18); }
.voz:nth-child(3) { --v-cor: #3A2F8F; --v-clara: #E1DCF7; --v-sombra: rgba(58, 47, 143, .16); }
.voz::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 46%; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, var(--v-clara) 0%, var(--v-cor) 100%); opacity: .5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M100 0C86 18 78 40 40 50 24 54 10 57 0 60h100z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M100 0C86 18 78 40 40 50 24 54 10 57 0 60h100z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.voz > * { position: relative; z-index: 1; }
.voz::before { content: "“"; position: absolute; z-index: 1; right: 20px; top: 0; font-family: Georgia, "Times New Roman", serif; font-size: 5.2rem; line-height: 1; font-weight: 700; color: var(--v-cor); opacity: .8; }
.voz blockquote { font-size: 1rem; }
.avatar { width: 50px; height: 50px; border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--v-cor); background: var(--grad-btn); }
.avatar--b { background: linear-gradient(135deg, #25CFCF, #0A7676); }
.avatar--c { background: linear-gradient(135deg, #4A3FA6, #241A5C); }

/* --------------------------------------------------------------- contato */
.dados { color: #fff; background: linear-gradient(150deg, #3A2F8F 0%, #241A5C 60%, #16103F 100%); border: 0; box-shadow: 0 24px 48px rgba(36, 26, 92, .30); }
.dados div { border-bottom-color: rgba(255, 255, 255, .16); }
.dados dt { color: var(--sol); }
.dados dd a { color: #fff; }

/* chamada final e rodapé */
.final { background-image: url(../img/final.jpg); }
.final::after { background: radial-gradient(ellipse 46% 74% at 50% 50%, rgba(255,255,255,.93) 0%, rgba(255,255,255,.66) 55%, rgba(255,255,255,0) 100%); }
.rodape .marca__txt b i { color: var(--sol); }
.rodape__lema { margin-top: 12px; font-family: var(--script); font-size: 1.7rem; color: var(--sol); }
.rodape__fim strong { color: #fff; }
.flutuante { background: #25D366; }

@media (max-width: 960px) {
  .beneficios__grid { grid-template-columns: 1fr 1fr; }
  .extras { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero__texto { max-width: min(64%, 300px); }
  /* 🩸 o borrão laranja (::before, posicionado) pintava POR CIMA dos mini-cartões e cobria o texto no celular
     (achado no print 600px da NAVALHA, 13/09): borrão só atrás da foto + cartões com z-index de verdade */
  .visual-destaque::before { bottom: 38%; }
  .visual-destaque::after { bottom: 36%; }
  .visual-destaque__cartoes { position: relative; z-index: 4; top: auto; right: auto; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .beneficios__grid { grid-template-columns: 1fr; }
  .tabela th, .tabela td { padding: 12px; }
  .preco { font-size: 1rem; padding: 5px 10px; }
}

/* ---------------------------------------------------------------------------
   rodada de autocrítica (print 1440, 13/09): o que o olho pegou
   --------------------------------------------------------------------------- */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* frase manuscrita caía em cima da cabeça do cachorro — sai do banner (os cartões de serviço já têm frase) */
.hero__script { display: none; }
.beneficio { padding: 14px 12px; gap: 10px; }
.beneficio__ico, .beneficio__ico img { width: 50px; height: 50px; }
.beneficio h2 { font-size: .98rem; }
/* loja: coluna da foto maior, cartões mais acima e frase manuscrita embaixo deles (não por cima) */
/* 🩸 só no computador: com #id a regra ganhava da media query de celular do esqueleto e a loja
   ficava em 2 colunas espremidas no celular (forma laranja esticada, cartões escondidos) */
@media (min-width: 961px) {
  #loja .dupla { grid-template-columns: .88fr 1.12fr; }
  #loja .visual-destaque { padding-bottom: 86px; }
  #loja .visual-destaque__cartoes { top: 9%; width: 50%; }
  #loja .visual-destaque__script { bottom: 4px; right: 0; }
}
.rodape__lema { font-size: 1.35rem; }