/* ==========================================================================
   AURORA STUDIO (demonstração) — a MARCA por cima do esqueleto da skill.
   style.css = esqueleto intocado (estrutura testada). Aqui só o que é desta marca:
   cor medida na imagem aprovada (C3), letra do ramo, e peças que o esqueleto não tem.
   Ele: "o marrom estava pálido, não alegre" → framboesa VIVO, dourado quente, rosa saturado.
   ========================================================================== */

:root {
  --cor-titulo:      #8E1A4B;   /* framboesa profundo — 8:1 no branco */
  --cor-texto:       #3A1F2B;
  --cor-texto-suave: #6B4E5C;
  --cor-acao:        #B8266A;
  --cor-acao-escura: #9C1D52;
  --cor-acao-viva:   #E0A93B;
  --dourado:         #E0A93B;
  --dourado-texto:   #946414;   /* dourado que ainda passa em contraste no claro */
  --grad:      linear-gradient(95deg, #9C1D52 0%, #C2286E 55%, #D9477F 100%);
  /* ele: "o botão agendar está meio apagado, não está intenso" → o botão é a coisa MAIS viva da tela */
  --grad-btn:  linear-gradient(120deg, #F0408C 0%, #D11F6E 45%, #A8125A 100%);
  --sombra-btn: rgba(209, 31, 110, .48);

  --fundo:          #FFF8F3;
  --fundo-tinta-1:  #FDE7EE;
  --fundo-tinta-2:  #F9D4E1;
  --borda-cartao:   rgba(156, 29, 82, .12);
  --sombra-cartao:  rgba(122, 21, 66, .15);
  --linha:          rgba(58, 31, 43, .10);
  --foco:           #C22C70;

  --fonte:        "Jost", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --script:       "Allura", "Segoe Script", cursive;
}

h1, h2, h3, .marca__txt b { font-family: var(--fonte-titulo); letter-spacing: -.01em; }
.titulo { font-weight: 700; }
/* etiquetas em framboesa viva: o dourado escuro em texto lia marrom/apagado (mesma queixa da cor da marca) */
.etiqueta { color: #C2286E; letter-spacing: .24em; font-weight: 700; }
::selection { background: var(--cor-acao); }

/* marca: nome em serifa, "Studio" em framboesa */
.marca img { height: 46px; }
.marca__txt b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.marca__txt b i { font-style: normal; background: none; -webkit-text-fill-color: currentColor; color: var(--cor-acao-escura); }
.marca__txt small { color: var(--dourado-texto); letter-spacing: .2em; font-weight: 600; }
.menu a { font-weight: 500; font-size: .88rem; color: var(--cor-texto); }

/* botão: maior, mais vivo, sombra colorida forte */
.btn--acao { font-weight: 700; letter-spacing: .01em; 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.1); box-shadow: 0 18px 38px var(--sombra-btn); }
.hero .btn--grande { padding: 17px 32px; font-size: 1.05rem; }

/* ------------------------------------------------------------------ banner */
/* véu ROSADO e mais leve: o branco .86 deixava o banner pálido perto do mockup (medido no avaliar.py comparar) */
.hero::after { background: radial-gradient(ellipse 42% 80% at 29% 50%, rgba(255,236,243,.80) 0%, rgba(253,226,236,.48) 52%, rgba(253,226,236,0) 100%); }
/* ele: "algumas frases estão meio apagadas" → nada de dourado ou cinza-claro sobre rosa no banner */
.hero .etiqueta { color: var(--cor-acao-escura); font-weight: 700; }
.hero h1 { font-weight: 700; letter-spacing: -.015em; line-height: 1.02; font-size: clamp(2.5rem, 4.5vw, 4rem); }
.hero__sub { color: #2A1320; font-weight: 500; }
.hero__texto { max-width: 640px; }   /* título em 2 linhas como no mockup, não 3 */
.hero__nota { margin-top: 14px; font-size: .9rem; font-weight: 600; color: #4A2436; letter-spacing: .02em; }
.hero__script { font-family: var(--script); font-size: clamp(2.4rem, 3.4vw, 3.6rem); line-height: .92; color: var(--cor-acao-escura); transform: rotate(-7deg); top: 9%; }

/* benefícios: os ícones já são o selo framboesa — sem o círculo do esqueleto por trás */
.beneficio__ico { background: none; box-shadow: none; width: 96px; height: 96px; }
.beneficio__ico img { width: 88px; height: 88px; filter: drop-shadow(0 10px 16px rgba(122, 21, 66, .22)); }
.beneficio h2 { font-size: 1.12rem; }

/* ---------------------------------------------------------------------------
   FAIXAS DE COR FORTE (rodada 2 da Aurora). O rosa-claro deixava as seções de baixo pálidas
   perto do banner; a visualização da página inteira mostrou faixas de rosa FORTE com cartões brancos.
   Títulos brancos com destaque dourado-creme; botão BRANCO (é o que mais contrasta em cima do rosa).
   --------------------------------------------------------------------------- */
/* medido: branco sobre #DC6690 dava 3,3:1 (só título grande). Puxado pro framboesa: texto pequeno ≥ 4,5 */
.secao--tinta { background: linear-gradient(160deg, #C8447A 0%, #AE3166 55%, #97245A 100%); }
.secao--tinta .etiqueta { color: #FFE3A1; }
.secao--tinta .titulo { color: #fff; }
.secao--tinta .titulo .grad { background: linear-gradient(95deg, #FFF4D2 0%, #F7CF6E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.secao--tinta .sublista { color: #FFE3A1; }
.secao--tinta .nota { color: rgba(255, 255, 255, .92); }
.secao--tinta .cartao, .secao--tinta .lista li, .secao--tinta .voz { border-color: transparent; box-shadow: 0 22px 46px rgba(84, 8, 42, .30), 0 2px 8px rgba(84, 8, 42, .12); }
.secao--tinta .btn--acao { background: #fff; color: var(--cor-acao-escura); box-shadow: 0 16px 34px rgba(84, 8, 42, .32); }
.secao--tinta .btn--acao:hover { filter: none; background: #FFF4F8; }

/* ---------------------------------------------------------------------------
   FOTO ATÉ A BORDA em meia seção: texto na coluna de um lado, foto ocupando a outra metade da TELA.
   O conteúdo continua na coluna centralizada; só a foto estica (regra dele).
   --------------------------------------------------------------------------- */
.secao--sangra { padding-block: 0; }
.secao--sangra .dupla { min-height: clamp(440px, 36vw, 580px); grid-template-columns: 1fr 1fr; }
.secao--sangra .dupla__foto { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.secao--sangra .dupla__texto { grid-column: 1; padding-block: var(--respiro); padding-right: clamp(20px, 3vw, 44px); }
.secao--sangra.sangra--esquerda .dupla__foto { left: 0; right: auto; }
.secao--sangra.sangra--esquerda .dupla__texto { grid-column: 2; grid-row: 1; padding-right: 0; padding-left: clamp(20px, 3vw, 44px); }
.secao--sangra .dupla__foto figcaption { left: auto; right: 24px; bottom: 24px; }
.secao--sangra.sangra--esquerda .dupla__foto figcaption { left: 24px; right: auto; }

/* cartões e listas na paleta */
.cartao img { background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FDEAF1 70%); }
.lista li::before { box-shadow: 0 0 0 4px rgba(194, 40, 110, .16); }

/* ---------------------------------------------- galeria de resultados (nova) */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.galeria figure { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: 0 22px 44px rgba(122, 21, 66, .18); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galeria figure:hover img { transform: scale(1.04); }
.galeria figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: .86rem; font-weight: 600; color: var(--cor-titulo); }
.nota.centro { margin-top: 18px; }

.dupla__foto--larga { aspect-ratio: 4 / 3.2; }

/* depoimentos: aspas em framboesa */
.voz::before { color: var(--cor-acao); }
.avatar { background: var(--grad-btn); }
.avatar--b { background: linear-gradient(135deg, #E0A93B, #B8266A); }
.avatar--c { background: linear-gradient(135deg, #D9477F, #7A1542); }

/* o esqueleto veio com o cartão em verde-menta (herança da Vigor) — fora da paleta: rosé */
.dados { background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F5 100%); border-color: var(--borda-cartao); box-shadow: 0 20px 44px rgba(122, 21, 66, .12); }
.dados dt { color: var(--cor-acao-escura); }
.dados dd small { color: var(--cor-texto-suave); }

/* chamada final: foto do salão de ponta a ponta */
.final { background-image: url(../img/final.jpg); background-color: var(--fundo-tinta-2); }
.final::after { background: radial-gradient(ellipse 46% 74% at 50% 50%, rgba(255,248,243,.92) 0%, rgba(255,248,243,.62) 55%, rgba(255,248,243,0) 100%); }

.rodape__lema { margin-top: 12px; font-family: var(--script); font-size: 1.8rem; color: var(--cor-acao-escura); }
.rodape__fim a { color: var(--cor-acao-escura); font-weight: 600; }
/* rodapé com cor VIVA da marca (pedido dele, 13/09): framboesa cheio, texto branco, detalhes dourados */
.rodape { background: linear-gradient(135deg, #C22C70 0%, #9C1D52 50%, #6E1340 100%); color: #fff; }
.rodape .marca__txt b { color: #fff; }
.rodape .marca__txt b i { color: #F7CF6E; }
.rodape .marca__txt small { color: #FFE3A1; }
.rodape__lema { color: #FFE3A1; }
.rodape__col h3 { color: #fff; }
.rodape__col a, .rodape__col span { color: rgba(255, 255, 255, .88); }
.rodape__col a:hover { color: #FFE3A1; }
.rodape__col svg { color: #F7CF6E; }
.rodape__fim { border-top-color: rgba(255, 255, 255, .22); }
.rodape__fim p { color: rgba(255, 255, 255, .82); }
.rodape__fim a { color: #fff; }
.flutuante { background: var(--grad-btn); box-shadow: 0 10px 26px rgba(156, 29, 82, .45); }

@media (max-width: 960px) {
  .galeria { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  /* no celular/tablet a foto sai do absoluto e vira faixa de ponta a ponta abaixo do texto */
  .secao--sangra .dupla { min-height: 0; grid-template-columns: 1fr; }
  .secao--sangra .dupla__texto, .secao--sangra.sangra--esquerda .dupla__texto { grid-column: 1; grid-row: 1; padding: var(--respiro) 0 32px; }
  .secao--sangra .dupla__foto, .secao--sangra.sangra--esquerda .dupla__foto { position: relative; left: auto; right: auto; width: auto; height: clamp(280px, 70vw, 420px); margin-inline: calc(-1 * var(--gutter)); grid-row: 2; }
}
@media (max-width: 640px) {
  /* o max-width de 640px lá de cima anulava a coluna de 64% do esqueleto e a frase passava por cima do rosto */
  .hero__texto { max-width: min(64%, 300px); }
  .hero__foto { object-position: 68% center; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .galeria { grid-template-columns: 1fr 1fr; }
  .galeria figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}