/* =============================================================
   Landing page — prestadora de serviços
   Cores vêm do config.js (aplicadas em :root pelo app.js).
   Os valores abaixo são apenas fallback.
   ============================================================= */

:root{
  --tinta:#2A1B2E;
  --porcelana:#FBF6F4;
  --nude:#EADCD6;
  --esmalte:#B0405C;
  --esmalte-esc:#8A2F47;
  --champanhe:#C8A98A;

  --display:"Bodoni Moda", "Times New Roman", serif;
  --corpo:"Karla", system-ui, -apple-system, sans-serif;

  --l:min(1180px, 100% - 2.5rem);
  --arco:999px 999px 18px 18px;
  --proporcao-item:4/5;
  --altura-hero:620px;
  --altura-sobre:560px;
  --sombra:0 18px 40px -28px rgba(42,27,46,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--porcelana); color:var(--tinta);
  font-family:var(--corpo); font-size:1rem; line-height:1.65;
  font-weight:400; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
:focus-visible{outline:2px solid var(--esmalte); outline-offset:3px; border-radius:4px}

.envolve{width:var(--l); margin-inline:auto}
.pular{position:absolute; left:-999px; top:0; z-index:99; background:var(--tinta); color:var(--porcelana); padding:.7rem 1.1rem}
.pular:focus{left:.5rem; top:.5rem}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:-.01em; margin:0}
h1{font-size:clamp(2rem, 7.5vw, 4rem); text-wrap:balance; overflow-wrap:break-word}
h2{font-size:clamp(1.7rem, 5.5vw, 2.9rem); text-wrap:balance; overflow-wrap:break-word}
h3{font-size:1.18rem; font-family:var(--corpo); font-weight:700; letter-spacing:0}
p{margin:0 0 1rem}
.sobrancelha{
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--esmalte); margin:0 0 1rem; display:block;
}
.legenda-sec{max-width:46ch; color:color-mix(in srgb, var(--tinta) 72%, transparent); margin-top:1rem}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
  padding:.95rem 1.7rem; border-radius:999px; font-weight:700; font-size:.92rem;
  letter-spacing:.02em; text-decoration:none; transition:transform .25s, background .25s, color .25s;
}
.btn-cheio{background:var(--esmalte); color:#fff}
.btn-cheio:hover{background:var(--esmalte-esc); transform:translateY(-2px)}
.btn-linha{border:1px solid color-mix(in srgb, var(--tinta) 30%, transparent)}
.btn-linha:hover{border-color:var(--tinta); background:var(--tinta); color:var(--porcelana); transform:translateY(-2px)}
.btn-claro{background:var(--porcelana); color:var(--tinta)}
.btn-claro:hover{background:var(--nude)}

/* ---------- etiqueta de revisão ---------- */
.rev{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:#FFE9A8; color:#6B4A00; padding:.18rem .5rem; border-radius:4px; margin-left:.4rem; vertical-align:middle;
}
.vazio{
  display:grid; place-content:center; text-align:center; gap:.3rem; padding:1.4rem;
  border:1.5px dashed color-mix(in srgb, var(--tinta) 28%, transparent);
  border-radius:14px; color:color-mix(in srgb, var(--tinta) 60%, transparent);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; background:var(--nude);
}
.vazio span{font-size:.7rem; letter-spacing:.04em; text-transform:none; opacity:.75}

/* ---------- cabeçalho ---------- */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:50; padding:.85rem 0;
  background:color-mix(in srgb, var(--porcelana) 88%, transparent);
  backdrop-filter:blur(12px); transition:box-shadow .3s, padding .3s;
  border-bottom:1px solid transparent;
}
.topo.rolado{box-shadow:0 1px 0 color-mix(in srgb, var(--tinta) 12%, transparent); padding:.55rem 0}
.topo-int{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.marca{font-family:var(--display); font-size:clamp(1.1rem,4vw,1.35rem); white-space:nowrap; text-decoration:none; letter-spacing:-.01em}
.marca small{display:block; font-family:var(--corpo); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--champanhe); margin-top:.1rem}
.menu{display:none; gap:1.8rem; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-size:.85rem; font-weight:500; position:relative; padding-block:.3rem}
.menu a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--esmalte); transition:width .3s}
.menu a:hover::after{width:100%}
.topo .btn{padding:.65rem 1.2rem; font-size:.8rem; white-space:nowrap}
@media (max-width:420px){ .topo .btn{padding:.6rem .9rem; font-size:.74rem} }
.abre-menu{display:grid; gap:5px; padding:.5rem}
.abre-menu i{display:block; width:22px; height:1.5px; background:var(--tinta); transition:transform .3s, opacity .3s}
.abre-menu[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.abre-menu[aria-expanded="true"] i:nth-child(2){opacity:0}
.abre-menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.gaveta{display:grid; gap:.2rem; padding:0 0 .6rem; list-style:none; margin:1rem 0 0; border-top:1px solid color-mix(in srgb, var(--tinta) 12%, transparent)}
.gaveta a{display:block; padding:.75rem .2rem; text-decoration:none; font-size:1rem}
.gaveta[hidden]{display:none}

@media (min-width:900px){
  .menu{display:flex}
  .abre-menu{display:none}
  .gaveta{display:none !important}
}

/* ---------- seções ---------- */
.secao{padding:4.5rem 0}
.secao-escura{background:var(--tinta); color:var(--porcelana)}
.secao-escura .sobrancelha{color:var(--champanhe)}
.secao-escura .legenda-sec{color:color-mix(in srgb, var(--porcelana) 72%, transparent)}
.secao-nude{background:var(--nude)}
@media (min-width:900px){ .secao{padding:6.5rem 0} }

/* Duas seções claras seguidas ganham um fio de separação, para o caso de
   alguma seção opcional estar desligada no config. */
.secao:not(.secao-nude):not(.secao-escura) + .secao:not(.secao-nude):not(.secao-escura){
  border-top:1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}

.cabeca-sec{margin-bottom:2.6rem}
@media (min-width:900px){
  .cabeca-sec{display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem}
  .cabeca-sec .legenda-sec{margin:0}
}

/* ---------- hero ---------- */
.hero{padding:7.5rem 0 3rem; position:relative; overflow:hidden}
.hero-int{display:grid; gap:2.5rem}
.hero h1{margin-bottom:1.3rem}
.hero h1 em{font-style:italic; color:var(--esmalte)}
.hero p{max-width:42ch; font-size:clamp(.95rem,3.4vw,1.05rem); color:color-mix(in srgb, var(--tinta) 76%, transparent)}
.hero-acoes{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem}
.hero-figura{position:relative; margin:0 auto; width:100%; max-width:34rem}
.hero-figura img, .hero-figura .vazio{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--arco);
  box-shadow:var(--sombra);
  max-height:min(58svh, 440px);
}
@supports not (height:1svh){ .hero-figura img, .hero-figura .vazio{max-height:min(58vh, 440px)} }
.selo{
  position:absolute; left:0; bottom:1.2rem; background:var(--porcelana);
  border:1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  border-radius:14px; padding:.75rem 1rem; box-shadow:var(--sombra); max-width:14rem;
}
.selo b{display:block; font-family:var(--display); font-size:1.05rem}
.selo span{font-size:.74rem; letter-spacing:.05em; color:color-mix(in srgb, var(--tinta) 65%, transparent)}
@media (min-width:900px){
  .hero{padding:9.5rem 0 4rem}
  .hero-int{grid-template-columns:1.05fr .95fr; align-items:center; gap:4rem}
  .hero-figura img, .hero-figura .vazio{max-height:min(76svh, var(--altura-hero))}
}

/* ---------- ELEMENTO ASSINATURA: régua de esmaltes ---------- */
.regua{
  display:flex; gap:.5rem; overflow-x:auto; padding:.4rem .1rem 1rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.regua::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; display:flex; align-items:center; gap:.55rem;
  padding:.6rem 1.05rem .7rem; border-radius:999px 999px 9px 9px;
  border:1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
  background:var(--porcelana); font-size:.82rem; font-weight:500; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.chip .gota{
  width:13px; height:17px; border-radius:999px 999px 4px 4px; display:block;
  background:var(--tom, var(--esmalte));
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.18), inset 2px 2px 3px rgba(255,255,255,.5);
}
.chip:hover{transform:translateY(-2px); border-color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta); color:var(--porcelana); border-color:var(--tinta)}

/* ---------- portfólio ---------- */
.grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(148px,100%),1fr)); gap:.6rem}
@media (min-width:700px){ .grade{grid-template-columns:repeat(3,1fr); gap:1rem} }
@media (min-width:1100px){ .grade{grid-template-columns:repeat(4,1fr)} }
.item{
  position:relative; padding:0; overflow:hidden; border-radius:14px;
  aspect-ratio:var(--proporcao-item); background:var(--nude); display:block; width:100%;
  transition:transform .35s;
}
.item img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.item .vazio{height:100%; border-radius:14px; border-style:dashed}
.item:hover img{transform:scale(1.05)}
.item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .8rem .7rem; text-align:left;
  font-size:.78rem; font-weight:500; color:#fff;
  background:linear-gradient(to top, rgba(20,10,22,.72), transparent);
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
}
.item:hover figcaption, .item:focus-visible figcaption{opacity:1; transform:none}
.item.oculto{display:none}
.pf-rodape{margin-top:2rem; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}

/* ---------- serviços ---------- */
.servicos{display:grid; gap:0}
.servico{
  display:grid; gap:.5rem; padding:1.6rem 0;
  border-top:1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.servico:last-child{border-bottom:1px solid color-mix(in srgb, var(--tinta) 14%, transparent)}
.servico h3{font-family:var(--display); font-weight:400; font-size:1.6rem}
.servico p{margin:0; color:color-mix(in srgb, var(--tinta) 72%, transparent); max-width:52ch}
.servico .beneficio{color:var(--esmalte); font-size:.88rem; font-weight:500}
.servico .meta{display:flex; gap:1.2rem; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--champanhe)}
.servico .ver{
  justify-self:start; font-size:.82rem; font-weight:700; text-decoration:none;
  border-bottom:1px solid var(--esmalte); padding-bottom:2px;
}
@media (min-width:800px){
  .servico{grid-template-columns:1fr 1.3fr auto; align-items:start; gap:2rem; padding:1.9rem 0}
  .servico .lado{display:grid; gap:.5rem}
}

/* ---------- sobre ---------- */
.sobre-int{display:grid; gap:2.5rem}
.sobre-figura{margin:0 auto; width:100%; max-width:30rem}
.sobre-figura img, .sobre-figura .vazio{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--arco);
  max-height:min(56svh, 400px);
}
@supports not (height:1svh){ .sobre-figura img, .sobre-figura .vazio{max-height:min(56vh, 400px)} }
.assinatura{font-family:var(--display); font-style:italic; font-size:1.6rem; margin-top:1.5rem}
@media (min-width:900px){
  .sobre-int{grid-template-columns:.85fr 1.15fr; gap:4rem; align-items:center}
  .sobre-figura img, .sobre-figura .vazio{max-height:min(72svh, var(--altura-sobre))}
}

/* ---------- diferenciais ---------- */
.dif{display:grid; gap:1.6rem}
@media (min-width:700px){ .dif{grid-template-columns:repeat(3,1fr); gap:2.2rem} }
.dif article{padding-top:1.1rem; border-top:1px solid color-mix(in srgb, var(--porcelana) 30%, transparent)}
.dif h3{margin-bottom:.4rem}
.dif p{margin:0; font-size:.92rem; color:color-mix(in srgb, var(--porcelana) 70%, transparent)}

/* ---------- depoimentos ---------- */
.depos{display:grid; gap:1rem}
@media (min-width:800px){ .depos{grid-template-columns:repeat(3,1fr)} }
.depo{
  background:var(--porcelana); border:1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  border-radius:16px; padding:1.6rem;
}
.depo p{font-family:var(--display); font-size:1.1rem; line-height:1.45}
.depo footer{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--champanhe)}

/* ---------- como funciona ---------- */
.passos{counter-reset:p; display:grid; gap:1.8rem}
@media (min-width:800px){ .passos{grid-template-columns:repeat(3,1fr); gap:2.5rem} }
.passo{position:relative; padding-top:2.6rem}
.passo::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  position:absolute; top:0; left:0; font-family:var(--display); font-size:1.5rem; color:var(--esmalte);
}
.passo::after{content:""; position:absolute; top:1.9rem; left:0; width:2rem; height:1px; background:var(--champanhe)}

/* ---------- contato ---------- */
.contato-int{display:grid; gap:2.5rem}
@media (min-width:900px){ .contato-int{grid-template-columns:1fr 1fr; gap:4rem} }
.dados{list-style:none; padding:0; margin:0 0 1.8rem; display:grid; gap:1rem}
.dados li{display:grid; gap:.15rem; padding-bottom:1rem; border-bottom:1px solid color-mix(in srgb, var(--tinta) 12%, transparent)}
.dados b{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champanhe); font-weight:700}
.dados a{text-decoration:none; font-size:1.05rem; overflow-wrap:anywhere}
.dados a:hover{color:var(--esmalte)}
.horarios{list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.92rem}
.horarios li{display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dotted color-mix(in srgb, var(--tinta) 25%, transparent); padding-bottom:.4rem}
.mapa{border:0; width:100%; aspect-ratio:4/3; border-radius:16px; margin-top:1.5rem}

/* ---------- rodapé ---------- */
.rodape{background:var(--tinta); color:var(--porcelana); padding:3.5rem 0 2rem}
.rodape-int{display:grid; gap:1.8rem}
.rodape a{color:inherit}
.rodape .marca{color:var(--porcelana)}
.creditos{
  margin-top:2.5rem; padding-top:1.2rem; font-size:.76rem;
  border-top:1px solid color-mix(in srgb, var(--porcelana) 18%, transparent);
  color:color-mix(in srgb, var(--porcelana) 62%, transparent);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
}
.creditos .assina{color:color-mix(in srgb, var(--porcelana) 85%, transparent); letter-spacing:.04em}
.creditos .assina strong{font-weight:700}
.creditos .assina a{text-decoration:none; border-bottom:1px solid var(--champanhe)}
.creditos .assina a:hover{color:var(--champanhe)}
@media (min-width:800px){ .rodape-int{grid-template-columns:1.4fr 1fr 1fr} }

/* ---------- botão flutuante ---------- */
.zap{
  position:fixed; right:1rem; bottom:1rem; z-index:40;
  display:flex; align-items:center; gap:.55rem; padding:.85rem 1.2rem;
  background:#25D366; color:#0B2A16; border-radius:999px; font-weight:700; font-size:.88rem;
  text-decoration:none; box-shadow:0 12px 30px -12px rgba(0,0,0,.45); transition:transform .25s;
}
.zap:hover{transform:translateY(-3px)}
.zap svg{width:20px; height:20px}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(24,14,26,.94); padding:3.5rem 1rem;
}
.lightbox[hidden]{display:none}
.lb-palco{margin:0; max-width:min(900px,92vw); text-align:center}
.lb-palco img{max-height:76vh; width:auto; margin-inline:auto; border-radius:10px}
.lb-palco .vazio{width:min(560px,88vw); aspect-ratio:var(--proporcao-item); color:#fff; background:transparent; border-color:rgba(255,255,255,.35)}
.lb-palco figcaption{color:#fff; margin-top:1rem; font-size:.9rem; letter-spacing:.04em}
.lb-fechar{position:absolute; top:1rem; right:1.2rem; color:#fff; font-size:2.4rem; line-height:1; padding:.3rem}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:3rem; padding:.4rem 1rem; line-height:1}
.lb-ant{left:.2rem} .lb-prox{right:.2rem}
body.travado{overflow:hidden}

/* ---------- animações de entrada ---------- */
.entra{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.entra.visivel{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .entra{opacity:1; transform:none}
}