/* ============================================================
   STUDIO DIVAS — AMANDA FRAGOSO
   Árvore de links + catálogo (a partir do template)
   ------------------------------------------------------------
   Direção: luxo discreto — preto, champagne e off-white,
   tipografia editorial, detalhes lineares dourados.
   Proporção de uso: ~70% claro · 20% preto · 10% dourado.
   ------------------------------------------------------------
   Sumário
   01. Design tokens
   02. Reset e base
   04. Página de links
   05. Cartões de link
   06. Catálogo — topo e banner
   07. Catálogo — cartões
   08. Rodapé
   09. Animações de entrada
   10. Responsivo
   ============================================================ */

/* ---------- 01. DESIGN TOKENS ---------- */
:root{
  color-scheme: light;

  /* Cor — identidade Studio Divas */
  --branco:          #FFFFFF;
  --off-white:       #F7F3EC;   /* fundo principal */
  --off-white-2:     #EFE5D6;   /* superfícies secundárias / fim do gradiente */
  --bege:            #E9DFD0;
  --preto:           #11100E;   /* títulos, botões */
  --grafite:         #24221F;
  --escuro:          #171512;   /* áreas fortes (banner, chamada) */
  --cinza:           #6E675E;   /* texto secundário, puxado para o quente */

  --dourado:         #C89B55;   /* destaque principal — uso pontual */
  --dourado-escuro:  #9C7536;   /* dourado legível sobre fundo claro */
  --champagne:       #D8B87B;

  --linha:           rgba(17,16,14,.09);
  --linha-dourada:   rgba(200,155,85,.35);

  /* Tipografia */
  --font-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-texto:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-micro:  .6875rem;
  --fs-sm:     .8125rem;
  --fs-body:   .9375rem;
  --fs-lead:   1.25rem;
  --fs-h2:     clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  --fs-h1:     clamp(2.1rem, 1.7rem + 1.8vw, 2.7rem);

  /* Espaçamento */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* Forma */
  --raio-btn:  16px;
  --raio-card: 18px;
  --raio-full: 999px;

  --sombra-sutil: 0 1px 2px rgba(17,16,14,.04), 0 6px 20px rgba(17,16,14,.05);
  --sombra-hover: 0 2px 4px rgba(17,16,14,.05), 0 14px 34px rgba(17,16,14,.10);

  --largura-links: 430px;
  --largura-pag:  1080px;

  --transicao: 260ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 02. RESET E BASE ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: linear-gradient(180deg, #FAF7F1 0%, var(--off-white) 40%, var(--off-white-2) 100%) fixed;
  background-color: var(--off-white);
  color: var(--preto);
  font-family: var(--font-texto);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  font-family: var(--font-titulo);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0;
}

p{ margin: 0; }

/* itálico dourado para palavras estratégicas */
em.destaque{
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 500;
  color: var(--dourado);
}

:focus-visible{
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* brilho ✦ usado como assinatura */
.brilho{
  color: var(--dourado);
  font-size: .8em;
  line-height: 1;
}

/* ---------- 03. VINHETA DE ENTRADA (~3s) ----------
   Studio → Divas → fio dourado → Amanda Fragoso → abre a página.
   Aparece a cada carregamento da página; um toque pula. */
.abertura{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 45%, #FBF7F1 0%, #F3EADE 45%, #E6D3BE 100%);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.22,.61,.36,1), visibility 650ms;
}
.abertura.is-saindo{
  opacity: 0;
  transform: scale(1.06);
  visibility: hidden;
  pointer-events: none;
}
.sem-js .abertura{ display: none; }
body.is-abrindo{ overflow: hidden; }

/* círculo dourado que se desenha em volta do logo */
.abertura__anel{
  position: absolute;
  width: min(78vw, 330px);
  height: min(78vw, 330px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: visible;
}
.abertura__anel circle{
  fill: none;
  stroke: url(#ouro-anel);
  stroke-width: .6;
  stroke-dasharray: 316;
  stroke-dashoffset: 316;
  animation: anel 1700ms 150ms cubic-bezier(.65,0,.35,1) forwards;
}

.abertura__logo{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .9;
  color: var(--preto);
}
.abertura__logo > *{
  opacity: 0;
  animation: subir 800ms cubic-bezier(.22,.61,.36,1) forwards;
}
.abertura__studio{
  font-family: var(--font-titulo);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: .02em;
  animation-delay: 250ms !important;
}
.abertura__divas{
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 4.2rem;
  padding: 0 .12em;
  margin-top: -.06em;
  background: linear-gradient(180deg, #D8B87B 0%, #B8894A 55%, #8E6A33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-name: surgir !important;
  animation-duration: 1000ms !important;
  animation-delay: 550ms !important;
}
.abertura__fio{
  display: block;
  width: 0;
  height: 1px;
  margin: var(--sp-3) 0 var(--sp-2);
  opacity: 1 !important;
  background: linear-gradient(90deg, rgba(200,155,85,0), var(--dourado), rgba(200,155,85,0));
  animation: fio 900ms 1100ms cubic-bezier(.22,.61,.36,1) forwards !important;
}
.abertura__assinatura{
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--grafite);
  animation-delay: 1350ms !important;
}
.abertura__brilho{
  color: var(--dourado);
  font-size: .8rem;
  margin-top: var(--sp-3);
  animation: brilhar 900ms 1700ms ease forwards !important;
}

@keyframes anel{ to{ stroke-dashoffset: 0; } }
@keyframes subir{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}
@keyframes surgir{
  from{ opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px); }
  to{ opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fio{ to{ width: 150px; } }
@keyframes brilhar{
  0%{ opacity: 0; transform: scale(.4) rotate(-45deg); }
  60%{ opacity: 1; transform: scale(1.3) rotate(0); }
  100%{ opacity: 1; transform: scale(1); }
}

/* ---------- 04. PÁGINA DE LINKS ----------
   Projeto 100% mobile: tudo vive numa coluna de no máximo 480px.
   No desktop a coluna fica centralizada, como um celular. */
#tela-links, #tela-catalogo, #tela-sobre{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100svh;
  background-color: var(--off-white);
  box-shadow: 0 0 60px rgba(17,16,14,.08);
}

.links{
  position: relative;
  min-height: 100svh;
  padding: 0 14px var(--sp-6);
  display: flex;
  flex-direction: column;
  /* fundo: foto no topo, cobre a largura toda */
  background:
    linear-gradient(180deg, rgba(227,204,183,0) 780px, #E3CCB7 958px) top center / 100% 960px no-repeat,
    url("../img/fundo.jpg") top center / auto 960px no-repeat,
    #E3CCB7;   /* mesma cor da base da imagem, continua o fundo abaixo dela */
}

/* espaço para a foto aparecer (a foto esmaece em ~40% da altura) */
.links__respiro{
  height: 392px;   /* a foto esmaece em ~375px; o logo entra logo abaixo */
  flex: 0 0 auto;
}

.links__perfil{
  position: relative;
  isolation: isolate;
  text-align: center;
  margin-bottom: var(--sp-5);
}
/* luz suave atrás do logo, para separar da foto */
.links__perfil::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  width: 340px;
  height: 230px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(250,244,236,.85) 0%, rgba(250,244,236,.55) 40%, rgba(250,244,236,0) 70%);
  pointer-events: none;
  z-index: -1;
}
.links__perfil > *{ position: relative; }

/* Logo tipográfico provisório */
.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .9;
  color: var(--preto);
  margin-bottom: var(--sp-3);
}
.logo__studio{
  font-family: var(--font-titulo);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: .02em;
}
.logo__divas{
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 3.3rem;
  color: var(--dourado-escuro);
  background: linear-gradient(180deg, #D8B87B 0%, #B8894A 55%, #8E6A33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 .1em;
  margin-top: -.08em;
}
.logo__assinatura{
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--grafite);
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.logo__folha{ color: var(--dourado); font-style: normal; font-size: .9rem; }
.logo__folha--dir{ display: inline-block; transform: scaleX(-1); }
img.logo{ width: min(70vw, 260px); height: auto; margin: 0 auto var(--sp-4); }


.links__bio{
  font-family: var(--font-titulo);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--grafite);
  margin-top: 2px;
}

.links__local{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--grafite);
}
.links__local svg{ width: 14px; height: 14px; color: var(--dourado-escuro); }

.links__lista{
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------- 05. BOTÕES (modelo do anexo: ícone em círculo,
   título + descrição do que a pessoa vai encontrar, seta à direita) ---------- */
.link-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(251,247,241,.94) 0%, rgba(244,236,226,.92) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 6px 18px rgba(90,62,30,.12),
    0 1px 2px rgba(90,62,30,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  color: #3B2E21;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

/* círculo do ícone — branco, em relevo, traço marrom */
.link-card__icone{
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FBF7F1 60%, #F1E8DC 100%);
  border: 1px solid rgba(200,155,85,.28);
  box-shadow: 0 4px 10px rgba(90,62,30,.14), inset 0 1px 0 #fff;
  color: #4A3A28;
}
.link-card__icone svg{ width: 24px; height: 24px; }

.link-card__texto{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.link-card__titulo{
  display: block;
  font-family: "Marcellus", var(--font-titulo);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #3B2E21;
}

.link-card__desc{
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  line-height: 1.4;
  color: #6A5A48;
}

/* seta dentro de um círculo pequeno */
.link-card__seta{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(90,62,30,.14);
  color: #3B2E21;
  stroke-width: 2.4;
}

.link-card:active{
  transform: scale(.985);
  box-shadow: 0 3px 10px rgba(90,62,30,.12);
}

.links .rodape{ color: var(--grafite); }
.links .rodape a{ color: var(--grafite); border-bottom-color: rgba(17,16,14,.2); }

/* ---------- 06. CATÁLOGO — TOPO E BANNER ---------- */
.topo{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247,243,236,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}

.topo__inner{
  max-width: var(--largura-pag);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}

.voltar{
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--cinza);
  padding: var(--sp-2) var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  border-radius: var(--raio-full);
  transition: color var(--transicao), background var(--transicao);
}
.voltar svg{ width: 15px; height: 15px; }

@media (hover: hover){
  .voltar:hover{ color: var(--preto); background: var(--bege); }
}

/* Marca no topo — texto. Para usar logo:
   <img class="topo__marca" src="assets/img/logo.png" alt="Studio Divas"> */
.topo__marca{
  grid-column: 2;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--preto);
  white-space: nowrap;
}
.topo__marca em{ font-weight: 500; color: var(--dourado-escuro); }
img.topo__marca{ width: 118px; height: auto; }

.pagina{
  max-width: var(--largura-pag);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

/* Banner institucional — fundo escuro, sem foto.
   Para trocar por foto: <div class="banner"><img src="..." alt=""></div> */
.banner{
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--raio-card);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(200,155,85,.22) 0%, rgba(200,155,85,0) 55%),
    linear-gradient(160deg, var(--grafite) 0%, var(--escuro) 60%, #0B0A09 100%);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-7);
  color: var(--off-white);
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
}

.banner img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* curva dourada fina no canto, como nos posts */
.banner::after{
  content: "";
  position: absolute;
  right: -12%;
  bottom: -60%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  border-top: 1px solid rgba(200,155,85,.45);
  pointer-events: none;
}

.banner__conteudo{ position: relative; z-index: 1; }

.banner__eyebrow{
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: var(--sp-3);
}

.banner__titulo{
  font-family: var(--font-titulo);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
}
.banner__titulo em{ font-style: italic; color: var(--dourado); }

.banner__fio{
  width: 120px;
  height: 1px;
  margin: var(--sp-4) auto;
  background: linear-gradient(90deg, rgba(200,155,85,0), var(--dourado), rgba(200,155,85,0));
}

.banner__texto{
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--bege);
}

.secao{ margin-bottom: var(--sp-8); }
.secao__cabecalho{ margin-bottom: var(--sp-5); }

.eyebrow{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.secao__titulo{ font-size: var(--fs-h2); }
.secao__titulo em{ font-style: italic; font-weight: 500; color: var(--dourado-escuro); }

.secao__intro{
  color: var(--cinza);
  max-width: 56ch;
  margin-top: var(--sp-2);
}

/* observação de valores — texto da tabela oficial */
.secao__nota{
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--linha-dourada);
  border-radius: var(--raio-btn);
  background: rgba(255,255,255,.55);
  font-size: var(--fs-sm);
  color: var(--cinza);
  max-width: 720px;
}
.secao__nota .brilho{ margin-top: 3px; }

/* ---------- 07. CATÁLOGO — CARTÕES ---------- */
.grade{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-5);
}

.grade--fotos{
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.card{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}

@media (hover: hover){
  .card:hover{
    transform: translateY(-3px);
    box-shadow: var(--sombra-hover);
    border-color: var(--linha-dourada);
  }
}

/* Slot de mídia — foto real (especialidades) */
.card__media{
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(140deg, var(--bege), var(--off-white-2));
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--linha);
}

.card__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__media-vazio{
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
  opacity: .8;
}

/* Variante com ícone linear dourado (tabela de serviços) */
.card__media--icone{
  aspect-ratio: auto;
  height: 104px;
  background:
    radial-gradient(circle at 50% 50%, var(--branco) 0%, var(--off-white) 70%);
}

.icone-servico{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--branco);
  border: 1px solid var(--linha-dourada);
  box-shadow: 0 0 0 5px rgba(200,155,85,.07);
  color: var(--dourado);
}
.icone-servico svg{ width: 28px; height: 28px; }

.card__corpo{
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
}

.card__titulo{
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.15;
}

.card__desc{
  font-size: var(--fs-sm);
  color: var(--cinza);
  flex: 1 1 auto;
}

.card__rodape{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linha);
}

.card__preco{
  font-size: var(--fs-sm);
  color: var(--cinza);
}

/* preço real vira destaque em serifa dourada */
.card__preco--valor{
  /* Marcellus: números alinhados (retos), bem mais legíveis que os
     números "antigos" da Cormorant */
  font-family: "Marcellus", var(--font-titulo);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--dourado-escuro);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
}
.card__preco--valor .moeda{
  font-size: .8em;
  margin-right: 1px;
  vertical-align: .08em;
}
.card__preco--valor .centavos{ font-size: .8em; }

.btn-agendar{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--raio-full);
  background: var(--preto);
  color: var(--branco);
  font-family: var(--font-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.btn-agendar svg{ width: 14px; height: 14px; }

@media (hover: hover){
  .btn-agendar:hover{ background: var(--dourado); color: var(--preto); }
}
.btn-agendar:active{ transform: scale(.97); }

/* Faixa final de chamada — seção clara que ocupa toda a largura,
   funcionando como divisão da página (sem cara de card/imagem) */
.cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  margin: var(--sp-6) calc(var(--sp-4) * -1) 0;   /* sangra até as bordas */
  padding: var(--sp-8) var(--sp-5) var(--sp-8);
  background: linear-gradient(180deg, #F3EADE 0%, #EADBC8 100%);
  padding-bottom: var(--sp-6);
  border-top: 1px solid rgba(200,155,85,.45);
  color: var(--preto);
}

/* curvas douradas finas, como no fundo da página inicial */
.cta::before,
.cta::after{
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.cta::before{
  width: 420px; height: 420px;
  left: -250px; top: -150px;
  border: 1px solid rgba(200,155,85,.55);
  border-color: rgba(200,155,85,.55) transparent transparent rgba(200,155,85,.55);
}
.cta::after{
  width: 460px; height: 460px;
  right: -300px; bottom: -290px;
  border: 1px solid rgba(200,155,85,.5);
  border-color: rgba(200,155,85,.5) rgba(200,155,85,.5) transparent transparent;
}

.cta__brilho{
  display: block;
  color: var(--dourado);
  font-size: .9rem;
  margin-bottom: var(--sp-3);
}

.cta__titulo{
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: var(--sp-3);
}
.cta__titulo em{ font-style: italic; color: var(--dourado-escuro); }

.cta__texto{
  color: #5E4F3E;
  max-width: 32ch;
  margin: 0 auto var(--sp-5);
}

.btn-principal{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-6);
  border-radius: var(--raio-full);
  background: var(--preto);
  color: var(--off-white);
  font-family: var(--font-texto);
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(17,16,14,.18);
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.btn-principal svg{ width: 17px; height: 17px; color: var(--champagne); }

@media (hover: hover){
  .btn-principal:hover{ background: var(--dourado); color: var(--preto); }
}
.btn-principal:active{ transform: scale(.98); }

/* rodapé logo depois da faixa, sem fio duplicado */
/* rodapé continua o mesmo fundo da faixa, até o fim da tela */
.cta + .rodape{
  margin: 0 calc(var(--sp-4) * -1) calc(var(--sp-7) * -1);
  padding: var(--sp-2) var(--sp-5) var(--sp-7);
  background: #EADBC8;
  color: #6A5A48;
}
.cta + .rodape a{ color: #5E4F3E; border-bottom-color: rgba(94,79,62,.3); }
.cta + .rodape .rodape__fio{ display: none; }

/* ---------- 08. RODAPÉ ---------- */
.rodape{
  margin-top: auto;
  padding-top: var(--sp-7);
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--cinza);
  letter-spacing: .04em;
}

.rodape__fio{
  width: 44px;
  height: 1px;
  margin: 0 auto var(--sp-5);
  background: var(--linha-dourada);
}

.rodape__marca{
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  color: var(--preto);
  letter-spacing: 0;
  margin-bottom: var(--sp-2);
}

.rodape__credito{ letter-spacing: .06em; }

.rodape a{ color: var(--cinza); border-bottom: 1px solid var(--linha); }

@media (hover: hover){
  .rodape a:hover{ color: var(--dourado-escuro); }
}

/* ---------- SOBRE MIM ---------- */
.sobre{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-7);
  align-items: center;
}

.sobre__foto{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-card);
  overflow: hidden;
  background: linear-gradient(140deg, var(--bege), var(--off-white-2));
  border: 1px solid var(--linha-dourada);
  display: grid;
  place-items: center;
}
/* moldura fina deslocada, detalhe editorial */
.sobre__foto::after{
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(200,155,85,.4);
  border-radius: calc(var(--raio-card) - 8px);
  pointer-events: none;
}
.sobre__foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.sobre__historia{
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  color: var(--grafite);
}
.secao__aviso{
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--cinza);
}

.sobre__numeros{
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.sobre__numeros li{
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--linha-dourada);
  display: grid;
  gap: 2px;
}
.sobre__numeros strong{
  font-family: var(--font-titulo);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dourado-escuro);
}
.sobre__numeros span{ font-size: var(--fs-sm); color: var(--cinza); line-height: 1.35; }

/* Avaliações */
.grade--avaliacoes{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.avaliacao{
  margin: 0;
  padding: var(--sp-5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.avaliacao__estrelas{ color: var(--dourado); letter-spacing: .18em; font-size: .95rem; }
.avaliacao blockquote{
  margin: 0;
  font-family: var(--font-titulo);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--grafite);
  flex: 1 1 auto;
}
.avaliacao figcaption{
  font-size: var(--fs-sm);
  font-weight: 600;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linha);
}
.avaliacao figcaption span{ font-weight: 400; color: var(--cinza); }

/* FAQ */
.faq{
  display: grid;
  gap: var(--sp-3);
  max-width: 760px;
}
.faq__item{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-btn);
  transition: border-color var(--transicao);
}
.faq__item[open]{ border-color: var(--linha-dourada); }
.faq__item summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  font-size: var(--fs-body);
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{
  content: "+";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linha-dourada);
  color: var(--dourado-escuro);
  font-weight: 400;
  transition: transform var(--transicao);
}
.faq__item[open] summary::after{ transform: rotate(45deg); }
.faq__item p{
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--cinza);
  font-size: var(--fs-sm);
}

@media (max-width: 760px){
  .sobre{ grid-template-columns: 1fr; gap: var(--sp-5); }
  .sobre__foto{ max-width: 420px; width: 100%; margin: 0 auto; }
}

/* Itens sem informação ainda ficam ocultos (ver montarLinks) */
[data-oculto]{ display: none !important; }

/* ---------- 09. ANIMAÇÕES DE ENTRADA ---------- */
[data-entrada]{
  opacity: 0;
  transform: translateY(14px);
}

body.is-revelado [data-entrada]{
  opacity: 1;
  transform: none;
  animation: entrar 620ms cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes entrar{
  from{ opacity: 0; transform: translateY(14px); }
}

.sem-js [data-entrada]{ opacity: 1; transform: none; }

/* ---------- 10. AJUSTES MOBILE (base do projeto) ---------- */
.pagina{ padding: var(--sp-5) var(--sp-4) var(--sp-7); }
.topo__inner{ padding: var(--sp-3) var(--sp-4); }
.secao{ margin-bottom: var(--sp-7); }
/* banner de ponta a ponta, colado no topo, sem bordas — como uma imagem */
.banner{
  aspect-ratio: auto;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-4) * -1) var(--sp-6);
  padding: 34px var(--sp-5) 30px;
  border-radius: 0;
  border: 0;
}
.banner__eyebrow{ margin-bottom: var(--sp-2); }
.banner__fio{ margin: var(--sp-3) auto; }

.grade{ grid-template-columns: 1fr; gap: var(--sp-3); }
.grade--fotos{ grid-template-columns: 1fr 1fr; }

/* Serviços em lista: ícone | nome + descrição | preço + agendar */
.grade--lista .card{ flex-direction: row; }
.grade--lista .card__media--icone{
  flex: 0 0 76px;
  height: auto;
  border-bottom: 0;
  border-right: 1px solid var(--linha);
}
.grade--lista .icone-servico{ width: 50px; height: 50px; }
.grade--lista .icone-servico svg{ width: 24px; height: 24px; }
.grade--lista .card__corpo{ padding: var(--sp-3) var(--sp-4); gap: 2px; }
.grade--lista .card__titulo{ font-size: 1.2rem; }
.grade--lista .card__desc{ font-size: .75rem; line-height: 1.45; }
.grade--lista .card__rodape{ margin-top: var(--sp-2); padding-top: var(--sp-2); }

.grade--fotos .card__corpo{ padding: var(--sp-3); }
.grade--fotos .card__titulo{ font-size: 1.15rem; }
.grade--fotos .card__desc{ font-size: .75rem; line-height: 1.45; }
.grade--fotos .card__rodape{ flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.grade--fotos .btn-agendar{ justify-content: center; }

.btn-agendar{ padding: var(--sp-2) var(--sp-4); min-height: 36px; }

/* Avaliações: carrossel com deslize lateral */
.grade--avaliacoes{
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(var(--sp-4) * -1);
  padding: 0 var(--sp-4) var(--sp-2);
  scrollbar-width: none;
}
.grade--avaliacoes::-webkit-scrollbar{ display: none; }
.grade--avaliacoes .avaliacao{ flex: 0 0 84%; scroll-snap-align: center; }

/* Sobre: uma coluna */
.sobre{ grid-template-columns: 1fr; gap: var(--sp-5); }
.sobre__numeros strong{ font-size: 1.6rem; }
.faq__item summary{ padding: var(--sp-4); }
.faq__item p{ padding: 0 var(--sp-4) var(--sp-4); }


/* telas muito estreitas (iPhone SE / 320px) */
@media (max-width: 360px){
  .links{ padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .logo__divas{ font-size: 3rem; }
  .link-card__titulo{ letter-spacing: .12em; }
  .grade--fotos{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-entrada]{ opacity: 1; transform: none; }
}