/* ==========================================================================
   STUDIO ANDRADE (prévia de prospecção, salão REAL, refeita 13/09/2026) — a MARCA por cima do esqueleto.
   Identidade A1 (proposta): tesoura dourada formando o A, com uma mecha verde-azulada.
   Paleta medida no símbolo: ouro #C6A739 · verde-azulado #06514D · + coral #FF6B6B e pêssego #FFD1C6 (prancha).
   Página branca, cor nos elementos, coluna 920px do menu ao rodapé, rodapé verde-azulado vivo.
   ========================================================================== */

:root {
  --cor-titulo:      #11302F;
  --cor-texto:       #1E2B2B;
  --cor-texto-suave: #4F5E5C;
  --cor-acao:        #D93A48;   /* coral fundo: branco por cima passa 4,5:1 (o coral claro da prancha não passa) */
  --cor-acao-escura: #B02A38;
  --cor-acao-viva:   #FF6B6B;
  --teal:            #006B66;
  --ouro:            #C6A739;
  --ouro-escuro:     #8F6A14;
  --grad:      linear-gradient(95deg, #FF6B6B 0%, #E8474F 50%, #C8323F 100%);
  --grad-btn:  linear-gradient(120deg, #F0605F 0%, #D93A48 50%, #A82838 100%);
  --sombra-btn: rgba(217, 58, 72, .36);

  --fundo:          #FFFFFF;
  --borda-cartao:   rgba(0, 77, 77, .10);
  --sombra-cartao:  rgba(0, 77, 77, .13);
  --linha:          rgba(0, 77, 77, .10);
  --foco:           #006B66;

  /* rodapé vivo = verde-azulado da marca, destaque em ouro claro */
  --forte-1: #0B807A; --forte-2: #005753; --forte-3: #003634; --sobre-forte: #F2D46B;

  --fonte:        "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "DM Serif Display", Georgia, serif;   /* beleza: serifa de contraste (cerebro/41) */
  --script:       "Great Vibes", "Segoe Script", cursive;
}

h1, h2, h3, .marca__txt b { font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: -.005em; }
.etiqueta { color: var(--teal); font-weight: 600; }
.titulo { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.02; }
.marca img { height: 52px; }
.marca__txt b { font-size: 1.62rem; line-height: .95; }
.marca__txt b i { background: none; -webkit-text-fill-color: currentColor; color: var(--cor-acao); font-style: italic; }
.marca__txt small { margin-top: 5px; font-size: .56rem; font-weight: 600; letter-spacing: .24em; color: var(--teal); }
.menu a { font-weight: 500; font-size: .92rem; }
.btn { font-weight: 600; }
.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.08); }
.btn--linha { border-color: var(--teal); color: var(--teal); }
.btn--linha:hover { background: var(--teal); color: #fff; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.botoes .btn { margin-top: 0; }
.ico { fill: none; }

/* barra de prévia: honesta, fina, na cor da marca */
.previa { margin: 0; padding: 7px var(--gutter); text-align: center; font-size: .78rem; line-height: 1.35; color: #fff; background: linear-gradient(90deg, #005753, #0B807A 50%, #005753); }
.previa b { color: var(--sobre-forte); letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------------ banner */
.hero::after { background: radial-gradient(ellipse 46% 88% at 27% 50%, rgba(255,251,248,.74) 0%, rgba(255,246,241,.42) 52%, rgba(255,246,241,0) 100%); }
/* a parede da foto é clara: um brilho coral e um verde-azulado dão cor ao lado do texto sem véu pesado */
.hero::before { content: ""; position: absolute; z-index: -1; left: -6%; bottom: -46%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 107, .30) 0%, rgba(255, 107, 107, 0) 68%); pointer-events: none; }
.hero h1 { font-size: clamp(3.1rem, 6.2vw, 5.4rem); line-height: .95; letter-spacing: -.015em; }
.hero h1 .grad { padding-right: .06em; }
.hero__sub { color: #1E2B2B; font-weight: 500; }
.prova { gap: 6px; font-size: .92rem; color: #24302F; }
.prova .estrelas { font-size: 1.05rem; color: #E3A814; }

/* -------------------------------------------------- o que fazemos (cartões) */
.beneficios { box-shadow: none; }
.beneficios__grid { gap: 14px; padding-block: clamp(28px, 3vw, 42px); }
/* ícone EM CIMA e texto centralizado: lado a lado, 4 cartões em 920px quebravam "Corte e / escova" (print 13/09) */
.beneficio { padding: 18px 12px 16px; text-align: center; border-radius: 18px; background: #fff;
  border: 1px solid var(--borda-cartao); box-shadow: 0 16px 34px rgba(0, 77, 77, .10); }
.beneficio + .beneficio { border-left: 1px solid var(--borda-cartao); }
.beneficio__ico { width: 66px; height: 66px; margin: 0 auto 8px; background: none; box-shadow: none; }
.beneficio__ico img { width: 64px; height: 64px; filter: drop-shadow(0 8px 12px rgba(0, 60, 60, .18)); }
.beneficio h2 { font-size: 1.22rem; line-height: 1.1; }
.beneficio p { margin-top: 3px; font-size: .82rem; line-height: 1.35; }

/* --------------------------------------------------------- serviços (cor cheia) */
.cartao-cor { --m-grad: linear-gradient(165deg, #F46A63 0%, #D93A48 45%, #A42637 100%); --m-escuro: #A82838; --m-sombra: rgba(168, 40, 56, .32); }
.cartao-cor--teal { --m-grad: linear-gradient(165deg, #12918A 0%, #006B66 45%, #003B39 100%); --m-escuro: #005753; --m-sombra: rgba(0, 77, 77, .34); }
.cartao-cor--ouro { --m-grad: linear-gradient(165deg, #C9A23A 0%, #8F6A14 45%, #5E450B 100%); --m-escuro: #6E520E; --m-sombra: rgba(110, 82, 14, .32); }
.cartao-cor h3 { font-size: 1.62rem; line-height: 1.05; }
.cartao-cor__foto figcaption { font-size: 2rem; }
.cartao-cor .btn--branco { margin-top: auto; }

/* ------------------------------------------------------ o salão (alto contraste) */
.visual-destaque::before { background: linear-gradient(150deg, #F46A63 0%, #D93A48 55%, #A42637 100%); }
.visual-destaque::after { border-color: var(--teal); opacity: .6; }
.visual-destaque__foto > img { object-position: 74% 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='%23C6A739' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.mini-cartao { --mc-tinta: linear-gradient(135deg, #FFF3F0, #FFDCD6); --mc-borda: #FFBBB0; --mc-grad: linear-gradient(145deg, #F46A63, #A82838); --mc-sombra: rgba(168, 40, 56, .2); }
.mini-cartao--azul { --mc-tinta: linear-gradient(135deg, #EDF8F7, #CFEDEA); --mc-borda: #A3DAD5; --mc-grad: linear-gradient(145deg, #12918A, #004D4D); --mc-sombra: rgba(0, 77, 77, .2); }
.mini-cartao--laranja { --mc-tinta: linear-gradient(135deg, #FFF9E9, #F8EBC4); --mc-borda: #E8D48E; --mc-grad: linear-gradient(145deg, #D6B24A, #8F6A14); --mc-sombra: rgba(143, 106, 20, .22); }
.mini-cartao__txt b { font-size: .98rem; }
.visual-destaque__script { font-size: 2.3rem; 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); }

/* ----------------------------------------- avaliações: a nota pública, grande */
.nota-google { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(22px, 4.4vw, 56px);
  padding: clamp(28px, 4.2vw, 52px); border-radius: 28px; color: #fff; overflow: hidden;
  background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(255, 209, 198, .34) 0%, rgba(255, 209, 198, 0) 62%), linear-gradient(140deg, #EE5C5B 0%, #D23947 46%, #A42637 100%);
  box-shadow: 0 30px 60px rgba(168, 40, 56, .30); }
.nota-google__num { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(5rem, 11vw, 8rem); line-height: .86; text-align: center; }
.nota-google__num .estrelas { display: block; margin: 12px 0 0; font-family: var(--fonte); font-size: 1.5rem; letter-spacing: .12em; color: #FFE08A; }
.nota-google .etiqueta { color: #FFE08A; margin-bottom: 10px; }
.nota-google h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; color: #fff; }
.nota-google p:not(.etiqueta):not(.nota-google__num) { margin-top: 10px; color: rgba(255, 255, 255, .94); }
.nota-google .btn--branco { margin: 22px 0 0; color: #A42637; }

/* --------------------------------------------------------------- contato */
.dados { background: linear-gradient(180deg, #FFFFFF 0%, #FFF2EE 100%); border: 2px solid #FFC4B9; box-shadow: 0 22px 46px rgba(217, 58, 72, .12); }
.dados dt { color: var(--teal); }
.dados dt svg { fill: none; }
.dados dd a { color: var(--cor-acao-escura); }

/* ------------------------------------------------------------------ rodapé */
.rodape .marca img { height: 56px; }
.rodape .marca__txt b i { color: var(--sobre-forte); }
.rodape__col svg { fill: none; }
.rodape__lema { margin-top: 10px; font-family: var(--script); font-size: 1.9rem; color: var(--sobre-forte); }
.rodape__fim strong { color: #fff; }
.flutuante { background: var(--grad-btn); box-shadow: 0 10px 26px var(--sombra-btn); }
.flutuante svg { fill: none; color: #fff; }

@media (max-width: 960px) {
  .beneficios__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .previa { font-size: .7rem; }
  .hero__foto { object-position: 62% center; }
  .hero__texto { max-width: min(64%, 300px); }
  .so-largo { display: none; }   /* "· Jardim Bela Vista" quebrava a etiqueta em 2 linhas a 375px */
  /* 🩸 o borrão de cor (::before, posicionado) pintava POR CIMA dos mini-cartões estáticos (print 600px, 13/09) */
  .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 */
  .hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.2rem); }
  .hero .btn { padding: 13px 20px; }
  .prova { font-size: .78rem; }
  .beneficios__grid { gap: 10px; }
  .beneficio { padding: 14px 8px; }
  .beneficio__ico, .beneficio__ico img { width: 54px; height: 54px; }
  .beneficio h2 { font-size: 1.02rem; }
  .beneficio p { font-size: .74rem; }
  .nota-google { grid-template-columns: 1fr; text-align: center; }
  .botoes .btn { width: 100%; }
}

/* só no computador: #id ganha da media query do esqueleto (lição do Rabo, 13/09) */
@media (min-width: 961px) {
  #salao .dupla { grid-template-columns: .9fr 1.1fr; }
  #salao .visual-destaque { padding-bottom: 86px; }
  #salao .visual-destaque__cartoes { top: 9%; width: 50%; }
  #salao .visual-destaque__script { bottom: 4px; right: 0; }
}