/* Gláucia Granado Estética — layout do site. Cores, tipos e raios vêm de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-size: 18px; line-height: 30px; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p, figure, blockquote { margin: 0; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.secao { padding: var(--space-9) 0; overflow: hidden; }
.secao--areia { background: var(--areia); }
.secao--papel { background: var(--papel); }

.gg-titulo em { font-size: 1.14em; line-height: 0; }
.titulo-h1 { font-size: 56px; line-height: 64px; letter-spacing: -0.01em; }
.titulo-h2 { font-size: 40px; line-height: 52px; }
.texto { color: var(--mocha-escuro); }
.texto + .texto { margin-top: var(--space-4); }

.cabecalho-secao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; margin-bottom: var(--space-8); }
.cabecalho-secao .gg-rotulo { margin-bottom: var(--space-4); }
.cabecalho-secao--centro { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--space-4); }
.cabecalho-secao--centro .texto { max-width: 560px; }

/* Ícones de interface (linha, trufa) */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--trufa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 10; background: var(--linho); border-bottom: 1px solid rgba(85, 77, 58, .12); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: var(--space-6); }
.topo__marca { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.topo__marca .gg-assinatura__nome { font-size: 15px; }
.topo__marca small { font-size: 11px; line-height: 14px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--mocha-escuro); }
.topo__nav { display: flex; gap: var(--space-6); }
.topo__nav a { text-decoration: none; font-size: 16px; color: var(--trufa); }
.topo__nav a:hover { color: var(--argila); }
.topo .gg-btn { min-height: 44px; padding: 0 var(--space-5); font-size: 15px; }
.topo__menu { display: none; background: none; border: 0; padding: var(--space-2); margin-right: calc(var(--space-2) * -1); }

/* Abertura */
.abertura { padding: var(--space-8) 0 var(--space-9); }
.abertura__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.abertura .gg-rotulo { margin-bottom: var(--space-5); }
.abertura .titulo-h1 { max-width: 600px; }
.abertura .texto { max-width: 500px; margin-top: var(--space-5); }
.abertura__acoes { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-6); }
.abertura__selos { display: flex; gap: var(--space-6); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(85, 77, 58, .14); list-style: none; padding-left: 0; }
.abertura__selos li { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 20px; color: var(--trufa); }
.abertura__selos img { width: 32px; height: 32px; }

.abertura__foto { position: relative; justify-self: end; width: 100%; max-width: 440px; }
.abertura__foto::before { content: ""; position: absolute; inset: -20px -20px 32px 20px; border: 1.5px solid var(--dusk); border-bottom: 0; border-top-left-radius: var(--radius-arco); border-top-right-radius: var(--radius-arco); }
.abertura__foto .gg-arco { position: relative; }
.abertura__fala { position: absolute; left: -64px; bottom: 40px; max-width: 250px; padding: var(--space-4) var(--space-5); }
.abertura__fala p { font-size: 17px; line-height: 26px; font-weight: 300; color: var(--trufa); }
.abertura__fala .gg-depo__autor { display: block; margin-top: var(--space-2); font-size: 10px; letter-spacing: .25em; }

/* Procedimentos */
.procedimentos__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.card-proc { display: flex; flex-direction: column; }
.card-proc .gg-proc__texto { flex: 1; }
.card-proc .gg-btn--texto { align-self: flex-start; font-size: 15px; }

/* Skincare */
.skincare__grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-8); align-items: center; }
.skincare__grade .gg-arco { max-width: 440px; }
.skincare__grade .gg-arco img { object-position: 50% 45%; }
.skincare .gg-rotulo { margin-bottom: var(--space-4); }
.skincare .texto { margin-top: var(--space-4); max-width: 560px; }
.passos { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.passo { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid rgba(85, 77, 58, .18); }
.passo:last-child { border-bottom: 1px solid rgba(85, 77, 58, .18); }
.passo__num { font-weight: 900; font-size: 40px; line-height: 40px; letter-spacing: .02em; color: var(--trufa); }
.passo h3 { margin: 0 0 var(--space-1); font-size: 20px; line-height: 28px; font-weight: 500; }
.passo p { font-size: 16px; line-height: 26px; color: var(--mocha-escuro); }
.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.comparacao > div { padding: var(--space-5); border-radius: var(--radius-m); }
.comparacao__prateleira { border: 1px solid rgba(85, 77, 58, .25); }
.comparacao__sob-medida { background: var(--papel); }
.comparacao strong { display: block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--mocha-escuro); margin-bottom: var(--space-2); }
.comparacao__sob-medida strong { color: var(--trufa); }
.comparacao p { font-size: 16px; line-height: 24px; color: var(--trufa); }
.skincare .gg-btn { margin-top: var(--space-6); }

/* Resultados */
.carrossel { position: relative; }
.carrossel__trilho { display: flex; gap: var(--space-5); }
.par { flex: 0 0 calc(50% - 12px); background: var(--linho); border-radius: var(--radius-m); padding: var(--space-4); }
.par .gg-ad__foto { aspect-ratio: 4 / 5; }
.par .gg-ad__foto img { width: 100%; height: 100%; object-fit: cover; }
.par__legenda { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-2) 0; }
.par__legenda h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.par__legenda span { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--mocha-escuro); white-space: nowrap; }
.par .gg-ad__aviso { padding: 0 var(--space-2); font-size: 13px; line-height: 20px; }
.carrossel__controles { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-6); }
.pontos { display: flex; gap: var(--space-2); }
.pontos i { width: 8px; height: 8px; border-radius: 50%; background: var(--dusk); }
.pontos i.ativo { width: 28px; border-radius: var(--radius-pill); background: var(--trufa); }
.setas { display: flex; gap: var(--space-3); }
.seta { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--trufa); background: transparent; display: grid; place-items: center; cursor: pointer; }
.seta:disabled { opacity: .35; }

/* Depoimentos */
.depoimentos__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: start; }
.gg-depo__texto { font-size: 19px; line-height: 30px; }
.pontos--celular { display: none; }
.depoimentos__rodape { display: flex; justify-content: center; margin-top: var(--space-6); }

/* Sobre */
.sobre__grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-8); align-items: center; }
.sobre__grade .gg-arco { max-width: 440px; }
.sobre .gg-rotulo { margin-bottom: var(--space-4); }
.sobre__texto { margin-top: var(--space-5); max-width: 600px; }
.frase-marca { margin: var(--space-6) 0 0; padding-left: var(--space-5); border-left: 2px solid var(--dusk); font-size: 22px; line-height: 34px; font-weight: 300; color: var(--trufa); max-width: 560px; }
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(85, 77, 58, .14); }
.pilares h3 { margin: 0 0 var(--space-1); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--trufa); }
.pilares p { font-size: 15px; line-height: 24px; color: var(--mocha-escuro); }

/* Consulta online */
.online__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.online .gg-rotulo { margin-bottom: var(--space-4); }
.online .texto { margin-top: var(--space-4); max-width: 540px; }
.lista-check { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-6); display: grid; gap: var(--space-3); }
.lista-check li { display: flex; gap: var(--space-3); align-items: center; font-size: 17px; line-height: 26px; color: var(--trufa); }
.lista-check .ico { width: 22px; height: 22px; }
.online__foto { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.online__foto > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-l); }
.chamada { position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); display: flex; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-pill); background: rgba(251, 248, 244, .92); }
.chamada span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--linho); }
.chamada .ico { width: 20px; height: 20px; }
.online__etiqueta { position: absolute; top: var(--space-5); left: var(--space-5); }

/* Rodapé */
.rodape { background: var(--papel); padding: var(--space-8) 0 var(--space-6); border-top: 1px solid rgba(85, 77, 58, .1); }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-6); }
.rodape .gg-assinatura { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.rodape__sobre { margin-top: var(--space-4); font-size: 15px; line-height: 24px; color: var(--mocha-escuro); max-width: 280px; }
.rodape h4 { margin: 0 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--mocha-escuro); }
.rodape address, .rodape__lista { font-style: normal; font-size: 16px; line-height: 26px; color: var(--trufa); list-style: none; padding: 0; margin: 0; }
.rodape__lista a { text-decoration: none; }
.rodape .gg-btn--texto { margin-top: var(--space-3); font-size: 15px; }
.rodape__base { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(85, 77, 58, .12); font-size: 13px; line-height: 20px; color: var(--mocha-escuro); }
.pendente { color: var(--mocha); font-style: italic; }

/* Celular */
@media (max-width: 760px) {
  body { font-size: 17px; line-height: 28px; }
  .container { padding: 0 20px; }
  .secao { padding: var(--space-8) 0; }
  .titulo-h1 { font-size: 40px; line-height: 48px; }
  .titulo-h1 em { font-size: 48px; }
  .titulo-h2 { font-size: 32px; line-height: 42px; }
  .cabecalho-secao { grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }

  .topo__barra { height: 68px; }
  .topo__nav, .topo .gg-btn { display: none; }
  .topo__menu { display: block; }
  .topo__marca .gg-assinatura__nome { font-size: 13px; }
  .topo__marca small { font-size: 10px; }

  .abertura { padding: var(--space-6) 0 var(--space-8); }
  .abertura__grade { grid-template-columns: 1fr; gap: var(--space-7); }
  .abertura .gg-rotulo { font-size: 11px; letter-spacing: .25em; margin-bottom: var(--space-4); }
  .abertura__acoes { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .abertura__acoes .gg-btn--texto { align-self: center; }
  .abertura__selos { flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
  .abertura__foto { justify-self: center; max-width: 300px; margin-right: 24px; }
  .abertura__foto::before { inset: -14px -14px 24px 14px; }
  .abertura__fala { left: -16px; bottom: 24px; max-width: 220px; padding: var(--space-3) var(--space-4); }
  .abertura__fala .gg-depo__autor { letter-spacing: .18em; white-space: nowrap; }
  .abertura__fala p { font-size: 15px; line-height: 22px; }

  .procedimentos__grade { grid-template-columns: 1fr; gap: var(--space-4); }
  .card-proc { display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-4); padding: var(--space-5); }
  .card-proc .gg-proc__icone { width: 48px; height: 48px; grid-row: span 3; }
  .card-proc .gg-proc__nome { margin: 0 0 var(--space-1); font-size: 20px; line-height: 28px; }
  .card-proc .gg-proc__texto { margin-bottom: var(--space-3); font-size: 15px; line-height: 24px; }
  .card-proc .gg-btn--texto { justify-self: start; }

  .skincare__grade, .sobre__grade, .online__grade { grid-template-columns: 1fr; gap: var(--space-6); }
  .skincare__grade .gg-arco, .sobre__grade .gg-arco { max-width: 300px; margin: 0 auto; }
  .passo { grid-template-columns: 52px 1fr; }
  .passo__num { font-size: 30px; line-height: 32px; }
  .passo h3 { font-size: 18px; line-height: 26px; }
  .comparacao { grid-template-columns: 1fr; }
  .skincare .gg-btn, .online .gg-btn { width: 100%; }

  .par { flex: 0 0 86%; padding: var(--space-3); }
  .par__legenda { flex-direction: column; gap: var(--space-1); }
  .par__legenda h3 { font-size: 18px; }
  .carrossel__controles { justify-content: center; }
  .setas { display: none; }

  .depoimentos__grade { display: flex; align-items: flex-start; gap: var(--space-4); }
  .depoimentos__grade .gg-card { flex: 0 0 86%; margin: 0 0 var(--space-5); padding: var(--space-5); }
  .depoimentos .pontos--celular { display: flex; justify-content: center; }
  .depoimentos__rodape .gg-btn { width: 100%; }

  .frase-marca { font-size: 19px; line-height: 30px; }
  .pilares { grid-template-columns: 1fr; gap: var(--space-4); }

  .online__foto { order: -1; justify-self: center; max-width: 320px; }
  .lista-check li { font-size: 16px; }

  .rodape__grade { grid-template-columns: 1fr; gap: var(--space-6); }
  .rodape__base { flex-direction: column; margin-top: var(--space-6); }
}