/* Layout: faixa de aviso, cabeçalho fixo, hero em duas colunas, informações práticas logo abaixo, serviços, galeria em colunas, diferenciais, avaliações, contato. */
:root{
  --ink:#2a1020;        /* ameixa escura */
  --ink-soft:#5d4553;
  --rose:#b3265f;       /* destaque principal */
  --rose-deep:#8d1a49;
  --blush:#fbf3f5;      /* fundo claro */
  --petal:#f3e1e7;      /* superfícies */
  --line:#e8d3db;
  --white:#ffffff;
  --wa:#1f9d55;
  --display:"Cormorant Garamond", "Georgia", serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:14px;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--blush);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--rose)}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:6px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;transition:transform .15s,background .15s,color .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#17803f}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--blush)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}

/* faixa de promoção */
.promo{background:var(--ink);color:var(--petal);text-align:center;font-size:.92rem;padding:.55rem var(--gutter)}
.promo strong{color:#fff;background:var(--rose);padding:.1rem .5rem;border-radius:6px;margin-inline:.2rem}

/* cabeçalho */
header.top{position:sticky;top:0;z-index:20;background:rgba(251,243,245,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.top.scrolled{box-shadow:0 12px 30px -20px rgba(42,16,32,.5)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:82px}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.logo{display:block;width:auto;flex:none}
.brand .logo{height:66px}
nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--ink-soft)}
nav a:hover{color:var(--rose)}
.top .btn{padding:.65rem 1.2rem;font-size:.92rem}

/* hero */
.hero{padding-block:clamp(40px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.7rem,6vw,4.9rem);margin-block:1rem 1.2rem}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero p.lead{font-size:1.12rem;color:var(--ink-soft);max-width:34rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero .badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-size:.95rem;color:var(--ink-soft)}
.hero .badge i{width:10px;height:10px;border-radius:50%;background:#9a8590;display:inline-block}
.hero .badge.open i{background:var(--wa);box-shadow:0 0 0 4px rgba(31,157,85,.2)}
.hero figure{margin:0;position:relative}
.hero figure img{width:100%;border-radius:var(--radius);box-shadow:0 24px 60px -24px rgba(42,16,32,.45)}
.hero figure::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--rose);border-radius:var(--radius);z-index:-1}

/* informações rápidas */
.facts{background:var(--ink);color:var(--petal)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.fact{padding:1.8rem 1.4rem;border-left:1px solid rgba(255,255,255,.14);min-width:0}
.fact:first-child{border-left:0;padding-left:0}
.fact h3{font-family:var(--body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#e9a9c0;margin-bottom:.6rem;font-weight:700}
.fact p{font-size:1rem;line-height:1.55}
.fact a{color:#fff}

/* seções */
section.block{padding-block:clamp(56px,8vw,104px)}
.head{max-width:40rem;margin-bottom:2.4rem}
.head h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin-top:.7rem}
.head p{margin-top:1rem;color:var(--ink-soft)}

/* serviços */
.services .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.services .pic img{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--white)}
.services ul{list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:.7rem}
.services li{display:flex;gap:.8rem;align-items:flex-start;color:var(--ink-soft)}
.services li::before{content:"";flex:none;width:8px;height:8px;margin-top:.62rem;border-radius:50%;background:var(--rose)}

/* galeria de resultados */
.results{background:var(--petal)}
.masonry{columns:4 220px;column-gap:14px}
.masonry button{all:unset;display:block;width:100%;margin-bottom:14px;cursor:zoom-in;border-radius:var(--radius);overflow:hidden;break-inside:avoid;position:relative}
.masonry button:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.masonry img{width:100%;transition:transform .35s}
.masonry button:hover img{transform:scale(1.04)}
/* ao passar o mouse: leve escurecida e ícone de lupa */
@media (hover:hover){
  .masonry button::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,16,32,.5),rgba(42,16,32,0) 55%);opacity:0;transition:opacity .35s;pointer-events:none}
  .masonry button::before{content:"";position:absolute;right:12px;bottom:12px;z-index:1;width:38px;height:38px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1020' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/20px no-repeat;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s,transform .3s;pointer-events:none}
  .masonry button:hover::after,.masonry button:hover::before{opacity:1;transform:none}
}

/* diferenciais */
.why .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px)}
.why article{padding-top:1.4rem;position:relative}
.why article::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--rose);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .25s)}
.why h3{font-size:1.75rem;margin-bottom:.7rem}
.why p{color:var(--ink-soft)}
.why .space{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px)}
.why .space figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--petal)}
.why .space img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s}
.why .space figure:hover img{transform:scale(1.03)}

/* avaliações */
.reviews{background:var(--ink);color:var(--petal)}
.reviews .head h2{color:#fff}
.reviews .head p{color:#d8bfca}
.reviews .eyebrow{color:#e9a9c0}
.reviews .masonry{columns:4 200px}
.reviews .masonry button{background:#fff}
.reviews .cta{margin-top:2rem;display:flex;justify-content:center}

/* contato */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.contact h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-block:.7rem 1.2rem}
.contact .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}
.card h3{font-family:var(--body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:.7rem;font-weight:700}
.card + .card{margin-top:16px}
.hours{width:100%;border-collapse:collapse}
.hours td{padding:.55rem 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right;font-weight:500}
.hours tr.today td{color:var(--rose);font-weight:700}
.card address{font-style:normal}
.card .ref{color:var(--ink-soft);font-size:.95rem;margin-top:.6rem}
.card a.link{color:var(--rose-deep);font-weight:700}
.card .facade{margin:0 0 1rem;border-radius:10px;overflow:hidden;background:var(--petal)}
.card .facade img{width:100%;aspect-ratio:4/3;object-fit:cover}


/* instagram */
.insta{position:relative;overflow:hidden} /* enquanto carrega, o Instagram posiciona os posts em absolute e mais largos que a tela */
.insta .head{margin-bottom:1.6rem}
.insta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:start}
.insta-grid:empty{display:none}
.insta-grid .instagram-media{min-width:0!important;max-width:100%!important;width:100%!important;margin:0!important}
.insta-follow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}
.insta-grid:not(:empty) + .insta-follow{margin-top:24px}
.insta-follow strong{font-family:var(--display);font-size:1.7rem;font-weight:600;display:block;line-height:1.1}
.insta-follow span{color:var(--ink-soft)}

/* rodapé */
footer{background:var(--blush);border-top:1px solid var(--line);padding-block:2rem 6rem;font-size:.92rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
footer .logo{height:70px}

/* botão flutuante */
.float-wa{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:.6rem;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;padding:.85rem 1.2rem;border-radius:999px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4)}
.float-wa svg{width:22px;height:22px;fill:#fff}
.float-wa{animation:rise .6s 1.2s cubic-bezier(.2,.7,.2,1) both}
.float-wa::before{content:"";position:absolute;inset:0;border-radius:inherit;animation:waPulse 3s 2.5s infinite;pointer-events:none}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(20,6,14,.92);z-index:50;display:none;align-items:center;justify-content:center;padding:24px}
.lb.on{display:flex;animation:fadeIn .25s ease both}
.lb.on img{animation:zoomIn .35s cubic-bezier(.2,.7,.2,1) both}
.lb img{max-height:92vh;max-width:min(92vw,900px);width:auto;border-radius:10px}
.lb button{position:absolute;top:16px;right:16px;background:#fff;color:var(--ink);border:0;border-radius:999px;width:44px;height:44px;font-size:1.4rem;cursor:pointer}

/* animações */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroPic{from{transform:translateY(26px) scale(.97)}to{transform:none}}
@keyframes frameIn{from{opacity:0;transform:translate(14px,-14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(31,157,85,.55)}70%,100%{box-shadow:0 0 0 16px rgba(31,157,85,0)}}

/* entrada do topo: textos em sequência, foto subindo e moldura rosa se deslocando */
.hero .eyebrow{display:inline-block}
.hero .wrap > div > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap > div > :nth-child(2){animation-delay:.08s}
.hero .wrap > div > :nth-child(3){animation-delay:.16s}
.hero .wrap > div > :nth-child(4){animation-delay:.24s}
.hero .wrap > div > :nth-child(5){animation-delay:.32s}
.hero figure img{animation:heroPic 1s cubic-bezier(.2,.7,.2,1) both}
.hero figure::before{animation:frameIn .9s .45s cubic-bezier(.2,.7,.2,1) both}

/* revelação ao rolar a página (classes aplicadas pelo main.js) */
.js [data-reveal],.js [data-reveal-group] > *{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js [data-reveal].is-in,.js [data-reveal-group] > .is-in{opacity:1;transform:none}
.js .why .grid > :not(.is-in)::before{transform:scaleX(0)}

@media (max-width:900px){
  nav{display:none}
  .hero .wrap,.services .wrap,.contact .wrap{grid-template-columns:1fr}
  .hero figure::before{display:none}
  .why .grid{grid-template-columns:1fr}
  .facts .wrap{grid-template-columns:1fr}
  .fact{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-inline:0}
  .fact:first-child{border-top:0}
  .brand .logo{height:57px}
}
@media (max-width:480px){
  .top .btn{display:none}
  .float-wa span{display:none}
  .float-wa{padding:.9rem}
}
@media (max-width:700px){
  .why .space{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-reveal-group] > *{opacity:1;transform:none}
  .js .why .grid > :not(.is-in)::before{transform:none}
}