/* ==========================================================================
   NAVALHA (demonstração, refeita 13/09/2026) — a MARCA por cima do esqueleto.
   Identidade A1: navalha vermelha e preta formando o N dentro de um anel de latão.
   Paleta medida no símbolo: carmim #C10A06 · carvão #1E1D1B · latão #B6921A · + marinho #001F5B (prancha).
   Página branca, cor nos elementos, coluna 920px do menu ao rodapé, rodapé marinho com faixa de poste.
   ========================================================================== */

:root {
  --cor-titulo:      #151515;
  --cor-texto:       #1F1F22;
  --cor-texto-suave: #55565C;
  --cor-acao:        #D90404;
  --cor-acao-escura: #A30303;
  --cor-acao-viva:   #FF3B30;
  --marinho:         #0A2A6E;
  --latao:           #B6921A;
  --latao-escuro:    #7E6410;   /* latão pra TEXTO pequeno sobre branco (5,6:1) */
  --grad:      linear-gradient(95deg, #EC2019 0%, #C80404 55%, #9A0303 100%);
  --grad-btn:  linear-gradient(120deg, #EC2A20 0%, #C20404 50%, #8E0303 100%);
  --sombra-btn: rgba(194, 4, 4, .38);

  --fundo:          #FFFFFF;
  --borda-cartao:   rgba(10, 20, 50, .10);
  --sombra-cartao:  rgba(0, 31, 91, .13);
  --linha:          rgba(10, 20, 50, .10);
  --foco:           #0A2A6E;

  /* rodapé vivo = marinho da prancha, destaque em latão claro */
  --forte-1: #1447A6; --forte-2: #002C78; --forte-3: #001848; --sobre-forte: #F0C548;

  --fonte:        "Barlow", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Bebas Neue", "Oswald", Impact, sans-serif;   /* barbearia: pesada condensada (cerebro/41) */
  --script:       "Yellowtail", "Segoe Script", cursive;
}

h1, h2, h3, .marca__txt b { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: .01em; }
.etiqueta { color: var(--latao-escuro); font-weight: 700; letter-spacing: .24em; }
.titulo { font-size: clamp(2.5rem, 4.8vw, 3.5rem); line-height: .95; }
.marca img { height: 50px; }
.marca__txt b { font-size: 2.05rem; line-height: .86; letter-spacing: .05em; }
.marca__txt small { margin-top: 3px; font-size: .56rem; letter-spacing: .2em; color: var(--latao-escuro); }
.menu a { font-family: var(--fonte-titulo); font-size: 1.16rem; font-weight: 400; letter-spacing: .07em; }
.btn { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.16rem; letter-spacing: .07em; padding: 12px 26px 10px; }
.btn--grande { padding: 15px 32px 13px; font-size: 1.32rem; }
.btn--acao { box-shadow: 0 14px 30px var(--sombra-btn), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn--acao:hover { filter: brightness(1.08) saturate(1.08); }
.topo__cta { padding: 10px 22px 8px; font-size: 1.1rem; }

/* faixa de poste de barbeiro — o detalhe que só uma barbearia tem */
.poste { height: 10px; background: repeating-linear-gradient(-45deg, #D90404 0 14px, #FFFFFF 14px 22px, #0A2A6E 22px 36px, #FFFFFF 36px 44px); }

/* ------------------------------------------------------------------ banner */
.hero::after { background: radial-gradient(ellipse 46% 88% at 27% 50%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 100%); }
.hero h1 { font-size: clamp(3.4rem, 6.6vw, 6rem); line-height: .86; letter-spacing: .005em; }
.hero__sub { color: #1B1B1E; font-weight: 600; }
.hero__nota { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .9rem; font-weight: 600; color: #2A2A2E; }
.hero__nota svg { width: 17px; height: 17px; color: var(--cor-acao); }

/* ------------------------------------------------- promessas (cartão branco) */
.beneficios { box-shadow: none; }
.beneficios__grid { gap: 16px; padding-block: clamp(30px, 3.4vw, 46px); }
.beneficio { padding: 20px 12px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--borda-cartao); box-shadow: 0 18px 38px rgba(0, 31, 91, .12); }
.beneficio + .beneficio { border-left: 1px solid var(--borda-cartao); }
.beneficio__ico { width: 76px; height: 76px; margin-bottom: 8px; background: none; box-shadow: none; }
.beneficio__ico img { width: 72px; height: 72px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .18)); }
.beneficio h2 { font-size: 1.38rem; line-height: 1; letter-spacing: .02em; }
.beneficio p { margin-top: 4px; font-size: .84rem; }

/* ------------------------------------------------------ serviços (cor cheia) */
.cartao-cor { --m-grad: linear-gradient(165deg, #EC2A20 0%, #B80404 45%, #780202 100%); --m-escuro: #8E0303; --m-sombra: rgba(142, 3, 3, .34); }
.cartao-cor--marinho { --m-grad: linear-gradient(165deg, #1F55BE 0%, #0A2A6E 45%, #00143D 100%); --m-escuro: #0A2A6E; --m-sombra: rgba(0, 31, 91, .36); }
.cartao-cor--carvao  { --m-grad: linear-gradient(165deg, #45454A 0%, #222225 45%, #0B0B0C 100%); --m-escuro: #1A1A1C; --m-sombra: rgba(0, 0, 0, .32); }
.cartao-cor__foto { height: 190px; }
.cartao-cor__foto figcaption { font-size: 1.7rem; }
.cartao-cor h3 { margin-top: 18px; font-size: 2.05rem; line-height: .95; letter-spacing: .02em; }
.cartao-cor .btn--branco { margin-top: auto; }
.preco-tag { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 14px 5px; border-radius: 999px;
  font-family: var(--fonte-titulo); font-size: 1.45rem; line-height: 1; letter-spacing: .04em; color: #141414;
  background: linear-gradient(135deg, #F7DF86 0%, #D6AE32 50%, #A9851A 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .5); }
.sublista { color: var(--latao-escuro); margin-top: clamp(34px, 3.6vw, 46px); }
.extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.extras p { margin: 0; padding: 14px 16px; border-radius: 16px; font-size: .86rem; line-height: 1.35; color: var(--cor-texto-suave);
  background: #fff; border: 2px solid rgba(217, 4, 4, .28); box-shadow: 0 12px 24px rgba(217, 4, 4, .08); }
.extras p:nth-child(2) { border-color: rgba(10, 42, 110, .3); box-shadow: 0 12px 24px rgba(10, 42, 110, .08); }
.extras p:nth-child(3) { border-color: rgba(182, 146, 26, .5); box-shadow: 0 12px 24px rgba(182, 146, 26, .1); }
.extras p:nth-child(4) { border-color: rgba(20, 20, 20, .26); box-shadow: 0 12px 24px rgba(0, 0, 0, .07); }
.extras strong { display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.4rem; line-height: 1; letter-spacing: .03em; color: var(--cor-titulo); margin-bottom: 3px; }
.extras b { color: var(--cor-acao-escura); white-space: nowrap; }

/* ---------------------------------------------------- a casa (alto contraste) */
.visual-destaque::before { background: linear-gradient(150deg, #1F55BE 0%, #0A2A6E 55%, #00143D 100%); }
.visual-destaque::after { border-color: var(--cor-acao); opacity: .6; }
.visual-destaque__foto > img { object-position: 40% center; }
.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='%23B6921A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.mini-cartao { --mc-tinta: linear-gradient(135deg, #FFF3F2, #FFDEDB); --mc-borda: #FFB9B4; --mc-grad: linear-gradient(145deg, #EC2A20, #8E0303); --mc-sombra: rgba(142, 3, 3, .2); }
.mini-cartao--azul { --mc-tinta: linear-gradient(135deg, #EEF3FC, #D7E2F7); --mc-borda: #B3C6EE; --mc-grad: linear-gradient(145deg, #1F55BE, #001F5B); --mc-sombra: rgba(0, 31, 91, .22); }
.mini-cartao--laranja { --mc-tinta: linear-gradient(135deg, #FFF9E8, #FBEBC2); --mc-borda: #EBD48C; --mc-grad: linear-gradient(145deg, #D9B13A, #8C6D12); --mc-sombra: rgba(140, 109, 18, .22); }
.mini-cartao__txt b { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.18rem; letter-spacing: .03em; line-height: 1.05; }
.visual-destaque__script { font-size: 2rem; color: var(--cor-acao-escura); }
.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: 600; color: var(--cor-titulo); }
.lista-check svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #fff; background: var(--grad-btn); }
.btn--circulo { padding: 7px 26px 7px 7px; }

/* ----------------------------------------------------------- depoimentos */
.voz { --v-cor: #D90404; --v-clara: #FFDEDB; --v-sombra: rgba(217, 4, 4, .14);
  position: relative; overflow: hidden; padding: 28px 24px 24px; border-radius: 22px; border: 2px solid var(--v-cor);
  background: linear-gradient(160deg, #FFFFFF 58%, var(--v-clara) 150%); box-shadow: 0 20px 40px var(--v-sombra); }
.voz:nth-child(2) { --v-cor: #0A2A6E; --v-clara: #D7E2F7; --v-sombra: rgba(10, 42, 110, .16); }
.voz:nth-child(3) { --v-cor: #B6921A; --v-clara: #FBEBC2; --v-sombra: rgba(182, 146, 26, .18); }
.voz::before { content: "\201C"; right: 20px; top: 0; font-family: Georgia, "Times New Roman", serif; font-size: 5.2rem; font-weight: 700; color: var(--v-cor); opacity: .85; }
.voz > * { position: relative; z-index: 1; }
.voz figcaption { font-size: .95rem; }
.estrelas { color: #D6A21E; }
.avatar { width: 48px; height: 48px; border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--v-cor); background: var(--grad-btn); }
.avatar--b { background: linear-gradient(135deg, #1F55BE, #001F5B); }
.avatar--c { background: linear-gradient(135deg, #D9B13A, #8C6D12); }

/* --------------------------------------------------------------- contato */
.dados { color: #fff; background: linear-gradient(150deg, #1447A6 0%, #002C78 60%, #001848 100%); border: 0; box-shadow: 0 24px 48px rgba(0, 31, 91, .30); }
.dados div { border-bottom-color: rgba(255, 255, 255, .16); }
.dados dt { color: var(--sobre-forte); }
.dados dt svg { fill: none; }

/* ------------------------------------------ chamada final: texto à esquerda */
.final { background-image: url(../img/final.jpg); background-position: 68% center; }
.final::after { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 36%, rgba(255,255,255,.3) 54%, rgba(255,255,255,0) 66%); }
.final__conteudo { text-align: left; }
.final h2 { margin-inline: 0; max-width: 11ch; font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: .9; }
.final__sub { margin: 14px 0 26px; max-width: 32ch; font-weight: 500; color: #1F1F22; }

/* ------------------------------------------------------------------ rodapé */
.rodape .marca img { height: 54px; }
.rodape .marca__txt b { color: #fff; }
.rodape__col svg { fill: none; }
.rodape__lema { margin-top: 12px; font-family: var(--script); font-size: 1.55rem; color: var(--sobre-forte); }
.rodape__fim strong { color: #fff; }
.flutuante { background: #25D366; }

@media (max-width: 960px) {
  .beneficios__grid { grid-template-columns: 1fr 1fr; }
  .extras { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero__foto { object-position: 60% center; }
  .hero__texto { max-width: min(62%, 290px); }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 3.5rem); }
  .hero .btn { padding: 13px 20px 11px; font-size: 1.12rem; }
  .hero__nota { font-size: .78rem; }
  .beneficios__grid { gap: 10px; }
  .beneficio { padding: 16px 8px 14px; }
  .beneficio__ico, .beneficio__ico img { width: 58px; height: 58px; }
  .beneficio h2 { font-size: 1.16rem; }
  .beneficio p { font-size: .76rem; }
  .extras { gap: 10px; }
  .extras p { padding: 12px; font-size: .8rem; }
  /* 🩸 o borrão de cor (::before, posicionado) pintava POR CIMA dos mini-cartões estáticos e cobria o texto
     (print 600px, 13/09): o borrão fica só atrás da foto e os cartões ganham z-index */
  .visual-destaque::before { bottom: 38%; }
  .visual-destaque::after { bottom: 36%; }
  .visual-destaque__cartoes { position: relative; z-index: 4; top: auto; right: auto; }   /* sem o auto, o right:-40px do computador empurrava os cartões pra fora a 360px */
  .final { background-position: 74% center; }
  .final::after { background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.82) 100%); }
}

/* só no computador: #id ganha da media query do esqueleto (lição do Rabo, 13/09) */
@media (min-width: 961px) {
  #casa .dupla { grid-template-columns: .9fr 1.1fr; }
  #casa .visual-destaque { padding-bottom: 86px; }
  #casa .visual-destaque__cartoes { top: 9%; width: 50%; }
  #casa .visual-destaque__script { bottom: 4px; right: 0; }
  /* xícara ficava escondida atrás do 1º mini-cartão (print 13/09): vai pro canto de cima à esquerda da foto */
  #casa .visual-destaque__folha { right: auto; left: 2%; top: 4px; width: 78px; transform: rotate(-14deg); }
}