/* ==========================================================================
   Ricci Beauty Braids
   Paleta: ébano, cacau, mel e shea. Tipos: Fraunces (títulos) e Instrument Sans (texto).
   O admin.html também usa estas variáveis e os botões: mantenha-os.
   ========================================================================== */
/* Fontes da própria pasta (só o conjunto latino, que cobre o português). Fraunces é variável: peso, SOFT, WONK e opsz. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fontes/fraunces.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fontes/instrument-sans.woff2") format("woff2")}
/* Reserva com medidas parecidas: o texto não "pula" quando a fonte chega. */
@font-face{font-family:"Fraunces Reserva";src:local("Georgia");size-adjust:104%;ascent-override:92%;descent-override:24%}
@font-face{font-family:"Instrument Reserva";src:local("Arial");size-adjust:98%;ascent-override:96%;descent-override:25%}
:root{
  --espresso:#1a0e09;--cocoa:#2c1a11;--bark:#5a3a28;
  --honey:#e2a95a;--honey-ink:#7a4d17;
  --shea:#f5ecdc;--oat:#ead9bf;--paper:#fbf7f0;
  --ink:#271a13;--ink-strong:#3f2a1a;--muted:#66564a;--line:#d8c7ad;--line-soft:#e6dccd;--line-strong:#b9a285;--control-line:#9a8670;
  --honey-light:#f0c47f;
  --on-dark-2:#dccdbb;--on-dark-3:#b3a291; /* textos claros sobre o escuro: secundário e terciário */
  --hibiscus:#9b3b3f;--error:#9b2c2c;
  --gold:var(--honey);--cream:var(--shea);--caramel:var(--honey-ink);
  --serif:"Fraunces","Fraunces Reserva",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Instrument Reserva","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,8vw,140px);
  /* Cantos: pequenos (etiquetas), médios (campos e fotos), grandes (cartões) e pílula (botões) */
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-pill:999px;
  /* Sombras: perto (botões sobre foto), média (cartões flutuantes), funda (retrato e formulário) */
  --shadow-sm:0 6px 16px rgb(26 14 9 / .18);
  --shadow-md:0 14px 34px rgb(26 14 9 / .3);
  --shadow-lg:0 30px 70px rgb(26 14 9 / .4);
  /* Movimento: toque, troca de estado, entrada */
  --dur-press:120ms;--dur-state:220ms;--dur-enter:600ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-curtain:cubic-bezier(.77,0,.18,1);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:380;font-variation-settings:"SOFT" 60;font-optical-sizing:auto;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h3{letter-spacing:-.012em;line-height:1.15} /* títulos pequenos: menos aperto entre letras, mais entrelinha */
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:max(16px,1em)} /* 16px no mínimo: o iPhone não dá zoom ao tocar no campo */
button{-webkit-tap-highlight-color:transparent}
/* Controles no celular: toque sem atraso e sem selecionar o texto do botão ao segurar */
button,.button,.nav-cta,.floating-wa,.pick-option,.chip,.cal-time,.cal-day,.photo-nav,.cal-nav,.link-button,.menu-toggle{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:focus-visible{outline:2px solid var(--honey-ink);outline-offset:3px}
:is(.topbar,.hero,.availability,.contact,.footer) :focus-visible{outline-color:var(--honey)}
[tabindex="-1"]:focus{outline:none}

/* Rolagem suave (Lenis, só computador com mouse) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

.skip-link{position:absolute;left:-999px;top:8px;z-index:60;padding:10px 14px;background:#fff;border-radius:var(--r-xs)}
.skip-link:focus{left:8px}

/* ---------- Trança de progresso (canvas) e barra fina ---------- */
.braid{display:none}
.scroll-progress{position:fixed;left:0;top:0;z-index:50;width:100%;height:3px;pointer-events:none;background:linear-gradient(90deg,var(--honey),#b97a2e);transform:scaleX(0);transform-origin:left center}
@media(min-width:1100px){
  .braid{display:block;position:fixed;left:clamp(10px,1.6vw,26px);top:0;z-index:15;width:56px;height:100vh;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 96px);mask-image:linear-gradient(to bottom,transparent 0,#000 96px)}
  .scroll-progress{display:none}
}

/* ---------- Topo ---------- */
.topbar{position:sticky;top:0;z-index:30;height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);background:rgb(26 14 9 / .88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);color:var(--shea);transition:transform .35s var(--ease-out),box-shadow .3s}
.topbar.is-hidden{transform:translateY(-100%)}
.topbar.is-scrolled{box-shadow:0 10px 30px rgb(0 0 0 / .25)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--honey);border-radius:50%;font:500 24px var(--serif);color:var(--honey)}
.brand-mark span{position:absolute;right:-3px;top:-1px;font:11px var(--sans)}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-copy strong{font:600 18px var(--serif);letter-spacing:.14em}
.brand-copy small{margin-top:5px;font-size:11px;letter-spacing:.2em;color:#d9b88c;text-transform:uppercase}
.main-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);font-size:.9375rem;color:var(--on-dark-2)}
.main-nav>a:not(.nav-cta){position:relative;padding:6px 0}
.main-nav>a:not(.nav-cta)::before{content:"";position:absolute;inset:-8px -6px}
.main-nav>a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--honey);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.main-nav>a[aria-current="true"]::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.main-nav>a:not(.nav-cta):hover::after{transform:scaleX(1)}}
.main-nav>a[aria-current="true"]{color:#fff}
.nav-cta{padding:11px 20px;border-radius:var(--r-pill);background:var(--honey);color:var(--espresso);font-weight:600;transition:background-color .3s,transform var(--dur-press) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.nav-cta:hover{background:var(--honey-light)}}
.menu-toggle{display:none;position:relative;width:44px;height:44px;border:0;background:transparent;color:var(--shea);cursor:pointer}
.menu-bars,.menu-bars::before{content:"";position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.menu-bars{top:21px;transform:translateY(-4px)}
.menu-bars::before{top:0;transform:translateY(8px)}
.menu-toggle[aria-expanded="true"] .menu-bars{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bars::before{transform:rotate(-90deg)}

/* ---------- Botões (também usados no admin) ---------- */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:var(--r-pill);font:600 .9375rem/1.1 var(--sans);letter-spacing:.01em;text-align:center;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .3s var(--ease),border-color .3s,background-color .3s,transform var(--dur-press) var(--ease-out)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sweep,var(--shea));transform:translateY(101%);transition:transform .4s var(--ease-out)}
/* Resposta ao toque: o botão "afunda" de leve na hora em que o dedo encosta */
:is(.button,.nav-cta,.floating-wa,.photo-nav,.cal-nav):active{transform:scale(.97)}
:is(.pick-option,.chip,.cal-time):active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){.button:hover::before{transform:none}}
.button-gold{background:var(--honey);color:var(--espresso);--sweep:#f6d9a6}
.button-dark{background:var(--espresso);color:var(--shea);--sweep:#46291a}
.button-outline{background:transparent;color:var(--ink);border-color:var(--control-line);--sweep:var(--espresso)}
@media(hover:hover) and (pointer:fine){.button-outline:hover{color:var(--shea);border-color:var(--espresso)}}
.button-quiet{color:var(--shea);border-color:rgb(245 236 220 / .4);--sweep:rgb(245 236 220 / .14)}
[data-magnetic]{transition:transform .35s var(--ease-out),color .3s var(--ease),border-color .3s,background-color .3s}
.text-link{position:relative;display:inline-block;padding:10px 0 2px;border-bottom:1px solid currentColor;font-weight:600;color:var(--honey-ink);transition:color .3s}
@media(hover:hover) and (pointer:fine){.text-link:hover{color:var(--espresso)}}
.text-link::after,.instagram-link::after{content:"";position:absolute;inset:-6px -4px}
.link-button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--honey-ink);font-weight:600;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
@media(hover:hover) and (pointer:fine){.link-button:hover{color:var(--espresso)}}

/* ---------- Destaque (hero) ---------- */
.hero{position:relative;overflow:clip;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,5vw,80px);min-height:max(640px,calc(100svh - 76px));padding:clamp(48px,7vw,96px) var(--pad) clamp(56px,7vw,90px);background:var(--espresso);color:var(--shea)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 70% at 78% 46%,rgb(226 169 90 / .17),transparent 70%),radial-gradient(40% 50% at 8% 100%,rgb(90 58 40 / .5),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .65  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-copy,.hero-art{position:relative;z-index:1}
/* Título do topo: o único momento em que a Fraunces solta todos os eixos (bem macia, "torta" e com desenho de cartaz). */
.hero h1{font-size:clamp(2.9rem,5.9vw,5.6rem);font-weight:340;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.035em;color:var(--shea)}
.hero-intro{max-width:31em;margin:28px 0 32px;color:var(--on-dark-2);font-size:1.125rem;line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-location{display:flex;flex-direction:column;margin:44px 0 0;color:var(--on-dark-2);font-size:.9375rem}
.hero-location strong{font-weight:600}
.hero-location span{color:var(--on-dark-3)}
.hero-art{display:grid;place-items:center;min-height:460px}
/* Retrato em medalhão: a foto do Edy já tem um disco dourado; a moldura redonda acompanha esse desenho.
   A foto entra 120% para os cantos escuros dela ficarem de fora do círculo. */
.hero-arch{position:relative;width:min(400px,84%);aspect-ratio:1}
.arch-clip{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:50%;background:var(--cocoa);box-shadow:0 36px 80px rgb(0 0 0 / .45),inset 0 0 0 1px rgb(226 169 90 / .25)}
.arch-clip img{position:absolute;left:-10%;top:-10%;width:120%;max-width:none;height:120%;object-fit:cover;object-position:50% 40%}
/* Anel dourado em volta, com uma estrela que gira devagar com a rolagem */
.arch-outline{position:absolute;inset:-18px;border:1px solid rgb(226 169 90 / .55);border-radius:50%}
.arch-outline::before{content:"";position:absolute;inset:9px;border:1px dashed rgb(226 169 90 / .18);border-radius:50%}
.arch-outline::after{content:"✦";position:absolute;left:50%;bottom:-.62em;transform:translateX(-50%);font:400 15px/1 var(--sans);color:var(--honey);text-shadow:0 0 0 var(--espresso);background:var(--espresso);padding:0 6px}
.seal{position:absolute;z-index:2;right:-6%;top:-2%;width:112px;height:112px;filter:drop-shadow(0 10px 22px rgb(0 0 0 / .35))}
.seal svg{display:block;width:100%;height:100%}
.art-note{position:absolute;z-index:2;left:-12%;bottom:4%;display:flex;flex-direction:column;padding:14px 18px;border-radius:var(--r-xs);background:var(--shea);color:var(--espresso);box-shadow:var(--shadow-md)}
.art-note strong{font:500 1.15rem var(--serif);letter-spacing:-.01em}
.art-note small{font-size:.8125rem;color:var(--muted)}

/* ---------- Foto que ainda não está na pasta: monograma no lugar do retrato ---------- */
img[data-missing]{display:none!important}
:is(.arch-clip,.about-frame):has(img[data-missing]){display:grid;place-items:center}
:is(.arch-clip,.about-frame):has(img[data-missing])::after{content:"R";display:grid;place-items:center;width:40%;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;font:300 clamp(2.6rem,7vw,4.6rem)/1 var(--serif);font-variation-settings:"SOFT" 100;padding-bottom:.06em}
.arch-clip:has(img[data-missing]){color:rgb(226 169 90 / .62);background:radial-gradient(70% 55% at 50% 40%,rgb(226 169 90 / .2),transparent 72%),linear-gradient(180deg,#3a2418,var(--cocoa))}
.about-frame:has(img[data-missing]){color:rgb(122 77 23 / .5);background:radial-gradient(70% 55% at 50% 40%,rgb(255 255 255 / .55),transparent 72%),var(--oat)}

/* ---------- Faixa com os estilos ---------- */
.marquee{overflow:hidden;padding:clamp(14px,2vw,22px) 0;background:var(--honey);color:var(--espresso)}
.marquee-track{display:flex}
.marquee-set{display:flex;align-items:center;gap:clamp(24px,4vw,56px);padding-right:clamp(24px,4vw,56px);font:400 clamp(1.6rem,3.2vw,2.7rem)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.marquee-set b{font:400 .5em var(--sans);color:var(--bark)}
.marquee-track:not(.is-running){justify-content:center}
.marquee-track:not(.is-running) .marquee-set{flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:0 var(--pad);font-size:clamp(1.15rem,2.2vw,1.6rem);white-space:normal}
@media(max-width:560px){.marquee-track:not(.is-running) .marquee-set{gap:2px 12px;font-size:1rem;line-height:1.5}.marquee-track:not(.is-running) .marquee-set b{font-size:.6em}}
.marquee-track.is-running{width:max-content}

/* ---------- Estilos e valores ---------- */
.services{padding:clamp(72px,10vw,140px) var(--pad);background:var(--paper)}
.section-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.section-head h2,.availability-copy h2,.quote-copy h2,.about-copy h2,.info-head h2,.contact h2{font-size:clamp(2.5rem,5.2vw,4.6rem)}
.lede{max-width:36ch;margin:0;color:var(--muted);font-size:1.0625rem}
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4.5vw,64px) clamp(14px,2.2vw,32px)}
.style-card{display:flex;flex-direction:column;min-width:0}
.style-media{position:relative;overflow:hidden;border-radius:var(--r-xs);background:var(--oat)}
.style-photos{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.style-photos::-webkit-scrollbar{display:none}
.style-photos li{flex:0 0 100%;overflow:hidden;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always}
.style-photos img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.style-ill{display:grid;place-items:center;aspect-ratio:4/5;background:radial-gradient(70% 55% at 50% 42%,rgb(255 255 255 / .5),transparent 72%),var(--oat)}
.style-ill svg,.pick-thumb svg{width:46%;height:auto;fill:none;stroke:var(--honey-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.style-ill svg{width:30%;opacity:.7}
/* Pontos da galeria: mostram que dá para arrastar e em qual foto você está */
.photo-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.photo-dots i{width:6px;height:6px;border-radius:3px;background:rgb(251 247 240 / .55);box-shadow:0 0 0 1px rgb(26 14 9 / .18);transition:background-color var(--dur-state) ease,width .45s var(--ease-out)}
.photo-dots i.is-on{width:18px;background:#fff}
.photo-nav{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0 0 3px;border:0;border-radius:50%;background:rgb(251 247 240 / .94);color:var(--espresso);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);opacity:0;transition:opacity var(--dur-state) ease}
.photo-nav.prev{left:10px}
.photo-nav.next{right:10px}
.style-media:hover .photo-nav,.style-media:focus-within .photo-nav{opacity:1}
.photo-nav:disabled{visibility:hidden}
@media(hover:none){.photo-nav{display:none}}
.style-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding-top:16px}
.style-body h3{font-size:clamp(1.4rem,2.1vw,1.85rem);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.style-tag{margin:6px 0 0;color:var(--muted);font-size:.9375rem;line-height:1.4}
.style-price{margin:4px 0 6px;font-weight:600;font-variant-numeric:tabular-nums}
.style-cta{margin-top:auto}

/* ---------- Agenda ---------- */
.availability{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,7vw,110px);align-items:center;padding:clamp(72px,9vw,120px) var(--pad);background:var(--cocoa);color:var(--shea);
  --c-fg:var(--shea);--c-muted:var(--on-dark-3);--c-line:rgb(245 236 220 / .16);--c-free:var(--honey);--c-free-fg:var(--espresso);--c-free-hover:var(--honey-light);--c-past:#6e5c4e;--c-ring:var(--shea);--c-pick:var(--shea);--c-pick-fg:var(--espresso);--c-accent:var(--honey)}
.availability-copy h2{color:var(--shea)}
.availability-copy p{max-width:36ch;margin:22px 0 0;color:var(--on-dark-2)}
.availability-board{padding:clamp(16px,3vw,32px);border:1px solid rgb(226 169 90 / .3);border-radius:var(--r-md);background:rgb(255 255 255 / .03)}
.cal-note{margin:16px 0 4px;font-size:.875rem;color:var(--on-dark-2)}
/* Agenda sem horários publicados: convite para pedir o dia */
.agenda-empty{display:grid;justify-items:start;gap:14px;padding:clamp(8px,2vw,16px)}
.agenda-empty svg{width:56px;height:56px;fill:none;stroke:var(--honey);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.agenda-empty h3{font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--shea)}
.agenda-empty p{max-width:38ch;margin:0;color:var(--on-dark-2)}
.agenda-empty .button{margin-top:6px}
.availability.is-empty{align-items:center}
.availability .text-link{color:var(--honey)}
@media(hover:hover) and (pointer:fine){.availability .text-link:hover{color:#fff}}

/* ---------- Calendário (agenda e passo 2) ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--c-line)}
.cal-head strong{font:400 1.45rem/1.2 var(--serif);letter-spacing:-.01em;color:var(--c-fg)}
.cal-head strong::first-letter,.cal-times legend::first-letter{text-transform:uppercase}
.cal-nav{display:grid;place-items:center;width:44px;height:44px;padding:0 0 2px;border:1px solid var(--c-line);border-radius:50%;background:transparent;color:var(--c-fg);font-size:1.3rem;line-height:1;cursor:pointer;transition:border-color .2s}
@media(hover:hover) and (pointer:fine){.cal-nav:not(:disabled):hover{border-color:var(--c-accent)}}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-week{padding:12px 0 6px;font-size:.75rem;text-align:center;color:var(--c-muted)}
.cal-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-fg);cursor:pointer;transition:background-color .2s,transform .2s var(--ease)}
.cal-day b{font:500 1rem/1 var(--sans);font-variant-numeric:tabular-nums}
.cal-day i{min-height:.65rem;font:700 .65rem/1 var(--sans);font-style:normal;letter-spacing:.01em}
.cal-day.is-blank{visibility:hidden}
.cal-day.is-free{background:var(--c-free);color:var(--c-free-fg)}
@media(hover:hover) and (pointer:fine){.cal-day.is-free:hover{background:var(--c-free-hover)}}
.cal-day.is-free:active{transform:scale(.94)}
.cal-day.is-none{color:var(--c-muted);cursor:default}
.cal-day.is-none b{text-decoration:line-through;text-decoration-thickness:1px}
.cal-day.is-full,.cal-day.is-off{color:var(--c-muted);cursor:default;background:repeating-linear-gradient(135deg,transparent 0 5px,var(--c-line) 5px 6px)}
.cal-day.is-past{color:var(--c-past);cursor:default}
.cal-day.is-today{box-shadow:inset 0 0 0 2px var(--c-ring)}
.cal-day.is-picked{background:var(--c-pick);color:var(--c-pick-fg);box-shadow:inset 0 0 0 3px var(--hibiscus)}
.cal-day.is-picked::after{content:"✓";position:absolute;top:3px;right:5px;font-size:.7rem;font-weight:700}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none;font-size:.8125rem;color:var(--c-muted)}
.cal-legend li{display:flex;align-items:center;gap:6px}
.cal-legend i{flex:none;width:16px;height:16px;border-radius:var(--r-xs)}
.lg-free{background:var(--c-free)}
.lg-none{border:1px dashed var(--c-muted)}
.lg-full{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--c-muted) 3px 4px)}
.lg-past{background:var(--c-line)}
.lg-today{box-shadow:inset 0 0 0 2px var(--c-ring)}
.lg-pick{background:var(--c-pick);box-shadow:inset 0 0 0 3px var(--hibiscus)}
.cal-times-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;clear:both}
.cal-times{min-width:0;margin:16px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--c-line)}
.cal-times legend{float:left;width:100%;margin:0 0 10px;padding:0;font-weight:600;color:var(--c-fg)}
.cal-time{position:relative;display:flex;margin:0;cursor:pointer;transition:transform var(--dur-press) var(--ease-out)}
.cal-time input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cal-time span{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 8px;border:1px solid var(--c-accent);border-radius:var(--r-pill);color:var(--c-fg);font-weight:600;font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s,border-color .2s}
.cal-time input:checked+span{background:var(--c-free);border-color:var(--c-free);color:var(--c-free-fg)}
.cal-time input:focus-visible+span{outline:2px solid var(--c-accent);outline-offset:3px}
.cal-status{min-height:1.5em;margin:12px 0 0;font-weight:600;color:var(--c-accent)}
.cal-status:empty{display:none}
.cal-empty{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border:1px dashed var(--c-accent);border-radius:var(--r-sm);font-size:.9375rem;color:var(--c-fg)}
.cal-empty svg{flex:none;width:52px;height:52px;fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-empty p{margin:0}

/* ---------- Pedido ---------- */
.quote{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,90px);align-items:start;padding:clamp(72px,9vw,120px) var(--pad);background:var(--oat)}
.quote-copy h2{color:var(--espresso)}
.quote-copy>p{max-width:34ch;margin:24px 0;color:var(--muted)}
.demo-price-notice{margin:0 0 22px;padding:12px 14px;border:1px solid #ead39a;border-radius:var(--r-xs);background:#fff5dc;color:#6d4f1f;font-size:.875rem;line-height:1.5}
.quote-form{min-width:0;padding:clamp(20px,3.4vw,40px);border-radius:var(--r-md);background:var(--paper);box-shadow:0 24px 60px rgb(58 34 22 / .14);scroll-margin-top:92px;
  --c-fg:var(--ink);--c-muted:var(--muted);--c-line:var(--line);--c-free:var(--honey);--c-free-fg:var(--espresso);--c-free-hover:var(--honey-light);--c-past:#b9ab9c;--c-ring:var(--espresso);--c-pick:var(--espresso);--c-pick-fg:var(--shea);--c-accent:var(--honey-ink)}
.wizard-progress{display:flex;margin:0 0 28px;padding:0;list-style:none}
.wizard-progress li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--muted);text-align:center}
.wizard-progress li::before{content:"";position:absolute;top:15px;right:50%;z-index:0;width:100%;height:2px;background:var(--line-soft);transition:background-color .4s}
.wizard-progress li:first-child::before{display:none}
.wizard-progress li.is-current::before,.wizard-progress li.is-done::before{background:var(--espresso)}
.wizard-progress span{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--line-soft);color:var(--muted);font-weight:700;transition:background-color .4s var(--ease),color .4s,box-shadow .4s}
.wizard-progress li.is-current{color:var(--espresso)}
.wizard-progress li.is-current span{background:var(--espresso);color:#fff;box-shadow:0 0 0 4px rgb(226 169 90 / .5)}
.wizard-progress li.is-done span{background:var(--honey);color:var(--espresso)}
.field{min-width:0;margin:0;padding:0;border:0}
.panel-title{margin:0 0 16px;padding:0;font:400 1.6rem/1.15 var(--serif);letter-spacing:-.02em;color:var(--espresso)}
legend.panel-title,legend.label{float:left;width:100%}
legend.panel-title+*,legend.label+*{clear:both}
.label{display:block;margin:22px 0 8px;padding:0;font-size:.9375rem;font-weight:600;color:var(--ink-strong)}
.optional{font-weight:400;color:var(--muted)}
.quote-form :is(input[type="text"],input[type="date"],select,textarea){width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--control-line);border-radius:var(--r-sm);background:#fff;font:400 1rem var(--sans);color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.quote-form :is(input[type="text"],input[type="date"],select,textarea):focus{border-color:var(--honey-ink);box-shadow:0 0 0 3px rgb(122 77 23 / .2)}
.quote-form textarea{min-height:92px;resize:vertical}
.quote-form select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237a4d17' stroke-width='1.6'><path d='M1 1.5l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 16px center}

/* Escolha do estilo (rádios com foto) */
.style-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,224px),1fr));gap:10px}
.pick-option{position:relative;display:flex;align-items:center;gap:12px;min-height:76px;padding:9px 44px 9px 9px;border:1px solid var(--control-line);border-radius:var(--r-md);background:#fff;cursor:pointer;transition:border-color .25s,background-color .3s,color .3s,transform var(--dur-press) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.pick-option:hover{border-color:var(--honey-ink)}}
.pick-option input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pick-option:has(input:focus-visible),.chip:has(input:focus-visible){outline:2px solid var(--honey-ink);outline-offset:2px}
.pick-thumb{flex:none;display:grid;place-items:center;width:58px;height:58px;overflow:hidden;border-radius:var(--r-sm);background:var(--oat)}
.pick-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pick-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pick-text strong{font:500 1.06rem/1.2 var(--serif);letter-spacing:-.01em;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.pick-text small{margin-top:3px;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.pick-check{position:absolute;top:50%;right:13px;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;border:1.5px solid var(--control-line);border-radius:50%;transition:background-color .25s,border-color .25s}
.pick-option.is-checked{border-color:var(--espresso);background:var(--espresso);color:var(--shea)}
.pick-option.is-checked .pick-text small{color:#dccbb6}
.pick-option.is-checked .pick-check{background:var(--honey);border-color:var(--honey)}
.pick-option.is-checked .pick-check::after{content:"";width:9px;height:5px;border:2px solid var(--espresso);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.style-picker.is-chosen{grid-template-columns:1fr}
.style-picker.is-chosen .pick-option:not(.is-checked){display:none}
.style-picker.is-chosen .pick-thumb{width:68px;height:68px}
.style-picker.is-chosen .pick-text strong{font-size:1.3rem}
#change-style{margin-top:2px}
.style-preview{margin-top:10px}
.preview-photos{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.preview-photos::-webkit-scrollbar{display:none}
.preview-photos img{flex:0 0 clamp(124px,31.5%,210px);min-width:0;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:var(--r-sm);background:var(--oat);scroll-snap-align:start}
.preview-note{margin:12px 0 0;color:var(--muted);font-size:.9375rem}
.option-field{margin-top:4px}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.chip{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:10px 14px;border:1px solid var(--control-line);border-radius:var(--r-md);background:#fff;cursor:pointer;transition:border-color .25s,background-color .25s,transform var(--dur-press) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.chip:hover{border-color:var(--honey-ink)}}
.chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chip-name{font-weight:600}
.chip-price{color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.chip.is-checked{border-color:var(--honey);background:var(--honey);color:var(--espresso)}
.chip.is-checked .chip-price{color:var(--ink-strong)}

/* Estimativa, erros e ações */
.estimate{display:flex;align-items:flex-start;gap:12px;margin:22px 0 0;padding:14px 16px;border-radius:var(--r-sm);background:#f3ebdf;color:var(--muted);font-size:.9375rem}
.estimate-icon{color:var(--honey-ink);line-height:1.6}
.estimate.has-price{background:#efdfc6;color:var(--ink-strong)}
.estimate strong{font:500 1.3rem var(--serif);color:var(--ink-strong);font-variant-numeric:tabular-nums}
.estimate small{display:block;margin-top:3px;color:var(--muted);font-size:.8125rem}
.field-error{margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--error);border-radius:0 6px 6px 0;background:#fbecea;color:var(--error);font-size:.9375rem;font-weight:600}
.field-error:empty{display:none}
.submit-button{width:100%;margin-top:18px}
.wizard-actions{display:flex;gap:10px;margin-top:22px}
.wizard-actions .button{flex:1;padding:0 16px}
#to-request,#to-slots{margin-top:6px}
.confirm-line{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;color:var(--muted);font-size:.9375rem;line-height:1.5;cursor:pointer}
.confirm-line input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--espresso)}
.form-footnote{margin:12px 0 0;color:var(--muted);font-size:.8125rem;text-align:center}
.form-footnote:empty{display:none}

/* Comprovante do pedido */
.receipt{position:relative;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:#fffdf8}
.receipt-head{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px dashed var(--line-strong)}
.receipt-head::before,.receipt-head::after{content:"";position:absolute;bottom:-10px;width:20px;height:20px;border-radius:50%;background:var(--paper)}
.receipt-head::before{left:-11px;box-shadow:inset -1px 0 0 var(--line-strong)}
.receipt-head::after{right:-11px;box-shadow:inset 1px 0 0 var(--line-strong)}
.receipt-head img,.receipt-head .pick-thumb{flex:none;width:72px;height:72px;border-radius:var(--r-sm);object-fit:cover;object-position:50% 22%}
.receipt-head div{flex:1;min-width:0}
.receipt-head strong{display:block;font:500 1.3rem/1.2 var(--serif);letter-spacing:-.01em}
.receipt-head span{color:var(--muted);font-size:.9375rem}
.receipt dl{display:grid;gap:8px;margin:0;padding:14px 16px}
.receipt dl div{display:flex;align-items:baseline;gap:12px;font-size:.9375rem}
.receipt dt{flex:none;color:var(--muted)}
.receipt dd{flex:1;margin:0;text-align:right;font-weight:600;color:var(--ink-strong);overflow-wrap:anywhere}
.receipt .link-button{min-height:44px;margin:-8px -6px;padding:0 6px;font-size:.875rem}
.receipt-note{margin:0;padding:0 16px 14px;color:var(--muted);font-size:.8125rem}

/* Pedido enviado */
.sent-icon{width:56px;height:56px;margin-bottom:12px;fill:none;stroke:var(--honey-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sent>p{margin:0;color:var(--muted)}
.sent-msg{max-height:240px;overflow:auto;margin:16px 0 0;padding:14px 16px;border-radius:var(--r-sm);background:var(--shea);color:var(--ink);font:400 .875rem/1.55 var(--sans);white-space:pre-wrap}

/* ---------- Quem sou ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,8vw,120px);align-items:center;padding:clamp(72px,10vw,140px) var(--pad);background:var(--paper)}
.about-photo{position:relative;width:min(100%,380px);margin:0;justify-self:center}
.about-photo::before{content:"";position:absolute;inset:-16px;border:1px solid rgb(122 77 23 / .35);border-radius:50%;pointer-events:none}
.about-frame{position:relative;overflow:hidden;aspect-ratio:1;border-radius:50%;background:var(--oat);box-shadow:0 30px 60px rgb(58 34 22 / .22)}
.about-frame img{position:absolute;left:-10%;top:-10%;width:120%;max-width:none;height:120%;object-fit:cover;object-position:50% 40%}
.photo-caption{position:absolute;left:-18px;bottom:22px;padding:12px 18px;border-radius:var(--r-xs);background:var(--espresso);color:var(--shea);font:500 1rem var(--serif);letter-spacing:.02em;box-shadow:0 10px 26px rgb(26 14 9 / .3)}
.about-copy h2{margin-bottom:26px}
.about-copy>p:not(.signature){max-width:58ch;margin:0 0 16px;color:var(--muted);font-size:1.0625rem;line-height:1.8}
/* Assinatura do Edy: traço macio e uma pequena estrela da marca. */
.signature{margin:28px 0 0;font:420 clamp(2.2rem,3.4vw,2.8rem)/1 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.03em;color:var(--honey-ink)}
.signature::after{content:"✦";display:inline-block;margin-left:.18em;font:400 .4em var(--sans);vertical-align:.9em;color:var(--honey)}

/* ---------- Informações ---------- */
.info{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,8vw,120px);padding:clamp(72px,9vw,120px) var(--pad);background:var(--shea)}
.info-head p{max-width:30ch;margin:22px 0 0;color:var(--muted)}
.draw{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left center}
/* Perguntas frequentes: <details> nativo (teclado e leitor de tela já funcionam); abrir uma fecha a outra */
.faq{border-bottom:1px solid var(--line)}
.faq-item summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:22px 0;list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font:400 clamp(1.2rem,2vw,1.45rem)/1.25 var(--serif);letter-spacing:-.015em;color:var(--espresso);text-wrap:balance}
.faq-sign{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;transition:background-color var(--dur-state),border-color var(--dur-state)}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--honey-ink);transition:transform .3s var(--ease-out)}
.faq-sign::after{transform:rotate(90deg)}
.faq-item[open] .faq-sign{background:var(--espresso);border-color:var(--espresso)}
.faq-item[open] .faq-sign::before,.faq-item[open] .faq-sign::after{background:var(--shea);transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){.faq-item summary:hover .faq-sign{border-color:var(--honey-ink)}}
.faq-item summary:focus-visible{outline-offset:-2px}
.faq-answer{padding:0 52px 24px 0}
.faq-answer p{margin:0;max-width:60ch;color:var(--muted)}
.faq-answer a{color:var(--honey-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq-answer strong{font-weight:600;color:var(--ink)}
/* Abrir e fechar com altura animada, onde o navegador suporta (senão, abre na hora) */
@supports selector(::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0;overflow:clip;transition:block-size .38s var(--ease-out),content-visibility .38s allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}

/* ---------- Pagamento ---------- */
.payment{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(24px,4vw,56px);padding:36px var(--pad);border-top:1px solid var(--line);background:var(--paper)}
.payment h2{font-size:1.7rem;letter-spacing:-.02em}
.payment-method{display:flex;align-items:center;gap:10px;font-weight:500}
.payment-method>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;color:var(--honey-ink);font-size:.75rem;font-weight:700}
.change-note{margin:0 0 0 auto;color:var(--muted);font-size:.875rem}

/* ---------- Contato e rodapé ---------- */
.contact{overflow:clip;padding:clamp(88px,12vw,170px) var(--pad);background:var(--espresso);color:var(--shea);text-align:center}
.contact h2{font-size:clamp(2.8rem,7.4vw,7rem);color:var(--shea)}
.contact>p{margin:26px auto 30px;color:var(--on-dark-2);font-size:1.125rem}
.contact-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.contact .button{min-width:230px}
.instagram-link{position:relative;padding:10px 0 2px;border-bottom:1px solid rgb(226 169 90 / .4);color:var(--honey);transition:color .3s,border-color .3s}
@media(hover:hover) and (pointer:fine){.instagram-link:hover{color:#fff;border-color:#fff}}
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:22px var(--pad);background:#120a06;color:var(--on-dark-3);font-size:.875rem}
.footer-brand{color:var(--shea)}

/* ---------- WhatsApp flutuante ---------- */
.floating-wa{position:fixed;right:18px;bottom:calc(18px + var(--safe-bottom));z-index:25;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:var(--r-pill);background:var(--honey);color:var(--espresso);font-weight:600;box-shadow:0 12px 30px rgb(0 0 0 / .28);transition:opacity .4s,transform .5s var(--ease),background-color .3s}
@media(hover:hover) and (pointer:fine){.floating-wa:hover{background:var(--honey-light)}}
.js .floating-wa:not(.is-visible){opacity:0;transform:translateY(16px);pointer-events:none}

/* ---------- Fotos que abrem em tela cheia ---------- */
img[data-zoom]{cursor:zoom-in}

/* ---------- Mais trabalhos (dentro de Estilos e valores) ---------- */
.more-works{margin-top:clamp(64px,8vw,110px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.more-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2.4vw,28px)}
.more-head h3{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.more-head p{margin:0;color:var(--muted);font-size:.9375rem}
.more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.more-grid figure{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-xs);background:var(--oat)}
.more-grid img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .6s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.more-grid figure:hover img{transform:scale(1.04)}}
.more-insta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/5;padding:16px;border-radius:var(--r-xs);background:var(--espresso);color:var(--shea);text-align:center;transition:background-color .3s}
.more-insta span{color:var(--honey);font-size:1.4rem}
.more-insta strong{font:400 clamp(1.15rem,1.8vw,1.5rem)/1.15 var(--serif);letter-spacing:-.01em}
.more-insta small{color:var(--on-dark-2);font-size:.875rem}
@media(hover:hover) and (pointer:fine){.more-insta:hover{background:var(--cocoa)}}
@media(max-width:900px){.more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.more-head{flex-direction:column;gap:4px}}

/* ---------- Antes e depois ---------- */
.compare{padding:0 var(--pad) clamp(72px,10vw,140px);background:var(--paper)}
.compare-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,3vw,40px)}
.ba{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-xs);background:var(--oat);--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--shea);box-shadow:0 0 0 1px rgb(26 14 9 / .2);pointer-events:none}
.ba-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--shea);color:var(--espresso);font:600 1rem/1 var(--sans);letter-spacing:.1em;box-shadow:var(--shadow-sm)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba:has(input:focus-visible) .ba-handle::after{outline:2px solid var(--honey);outline-offset:3px}
.ba-tag{position:absolute;top:12px;padding:5px 10px;border-radius:var(--r-pill);background:rgb(26 14 9 / .72);color:var(--shea);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.ba-before{left:12px}
.ba-after-tag{right:12px}
.ba figcaption{position:absolute;left:12px;bottom:12px;padding:8px 12px;border-radius:var(--r-xs);background:var(--shea);color:var(--espresso);font:500 1rem var(--serif);pointer-events:none}

/* ---------- Depoimentos ---------- */
.testimonials{padding:clamp(72px,9vw,120px) var(--pad);background:var(--oat)}
.testimonials h2{margin-bottom:clamp(32px,4vw,56px);font-size:clamp(2.5rem,5.2vw,4.6rem)}
.testimonial-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2.4vw,28px)}
.testimonial{display:flex;flex-direction:column;justify-content:space-between;gap:24px;margin:0;padding:clamp(22px,3vw,32px);border-radius:var(--r-md);background:var(--paper)}
.testimonial blockquote{margin:0}
.testimonial blockquote p{margin:0;font:400 1.2rem/1.5 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.testimonial blockquote p::before{content:"“";display:block;height:.5em;margin-bottom:.2em;font-size:3rem;line-height:1;color:var(--honey)}
.testimonial figcaption{display:flex;flex-direction:column;font-size:.9375rem}
.testimonial figcaption strong{font-weight:600}
.testimonial figcaption span{color:var(--muted)}

/* ---------- Onde atendo e Instagram ---------- */
.place{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,110px);align-items:start;padding:clamp(72px,9vw,120px) var(--pad);background:var(--paper);border-top:1px solid var(--line)}
.place h2{font-size:clamp(2.5rem,5.2vw,4.6rem)}
.city-list{display:grid;gap:0;margin:28px 0 0;padding:0;list-style:none}
.city-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.city-list li:last-child{border-bottom:1px solid var(--line)}
.city-list strong{font:400 clamp(1.4rem,2.4vw,1.9rem)/1.15 var(--serif);letter-spacing:-.02em}
.city-list span{color:var(--muted);font-size:.9375rem;text-align:right}
.place-address{margin-top:22px}
.place-address p{margin:0 0 6px}
.place-bairro{font-weight:600}
.insta-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:6px 0}
.insta-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--espresso);color:var(--honey);transition:background-color .3s,color .3s}
.insta-head strong{display:block;font:500 1.35rem/1.2 var(--serif);letter-spacing:-.01em}
.insta-head small{color:var(--muted);font-size:.9375rem}
@media(hover:hover) and (pointer:fine){.insta-head:hover .insta-icon{background:var(--honey);color:var(--espresso)}.insta-grid a:hover img{transform:scale(1.04)}}
.insta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.insta-grid a{display:block;overflow:hidden;aspect-ratio:1;border-radius:var(--r-xs);background:var(--oat)}
.insta-grid img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .6s var(--ease-out)}

/* ---------- Textura de tranças (gerada) na seção escura do fim ---------- */
.contact{position:relative;isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background:url("assets/textura-trancas.svg") 0 0/72px 144px repeat;-webkit-mask-image:radial-gradient(75% 85% at 50% 50%,transparent 30%,#000 85%);mask-image:radial-gradient(75% 85% at 50% 50%,transparent 30%,#000 85%)}

/* ---------- Privacidade no rodapé ---------- */
.privacy{flex-basis:100%;order:3;font-size:.8125rem}
.privacy summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.privacy p{max-width:70ch;margin:4px 0 8px;line-height:1.6}

/* ---------- Barra "Pedir horário" (só celular) ---------- */
.action-bar{display:none}
@media(max-width:720px){
  .floating-wa{display:none}
  .action-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-bottom));z-index:25;display:flex;gap:8px;padding:8px;border-radius:var(--r-pill);background:rgb(26 14 9 / .9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgb(26 14 9 / .35);transition:transform .45s var(--ease-out),opacity .3s,visibility .45s}
  .action-bar:not(.is-visible){opacity:0;visibility:hidden;transform:translateY(calc(100% + 24px))}
  .action-bar .button{flex:1;min-height:48px}
  .action-wa{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid rgb(226 169 90 / .5);border-radius:50%;color:var(--honey);touch-action:manipulation}
  .action-wa:active{transform:scale(.95)}
  .footer{padding-bottom:calc(22px + 72px + var(--safe-bottom))}
  .place{grid-template-columns:1fr}
}

/* ---------- Galeria em tela cheia ---------- */
.lightbox{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--shea);overflow:hidden;overscroll-behavior:contain}
.lightbox::backdrop{background:transparent}
.lb-backdrop{position:absolute;inset:0;background:rgb(18 10 6 / .96)}
.lb-stage{position:absolute;inset:64px 0 56px;overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.lb-stage:active{cursor:grabbing}
.lb-track{position:absolute;inset:0;will-change:transform}
.lb-slide{position:absolute;top:0;width:100%;height:100%;margin:0;display:grid;place-items:center;transform-origin:50% 40%}
.lb-slide img{max-width:min(100%,900px);max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r-xs);pointer-events:none;-webkit-user-drag:none}
.lb-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 12px 0 clamp(16px,4vw,32px);transition:opacity .2s}
.lb-caption{display:flex;align-items:baseline;gap:12px;margin:0;min-width:0}
.lb-caption strong{font:400 1.3rem var(--serif);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-caption span{color:var(--on-dark-3);font-size:.875rem;font-variant-numeric:tabular-nums}
.lb-btn{display:grid;place-items:center;width:48px;height:48px;padding:0 0 3px;border:1px solid rgb(245 236 220 / .25);border-radius:50%;background:rgb(26 14 9 / .5);color:var(--shea);font-size:1.6rem;line-height:1;cursor:pointer;touch-action:manipulation}
.lb-btn:disabled{opacity:0;pointer-events:none}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-24px}
.lb-prev{left:clamp(8px,2vw,24px)}
.lb-next{right:clamp(8px,2vw,24px)}
@media(hover:none){.lb-prev,.lb-next{display:none}}
.lb-hint{position:absolute;left:0;right:0;bottom:0;height:56px;display:grid;place-items:center;margin:0;color:var(--on-dark-3);font-size:.8125rem;transition:opacity .2s}
.lightbox.is-dragging-down :is(.lb-bar,.lb-hint,.lb-prev,.lb-next){opacity:0}
.lightbox[open]{animation:lb-in .25s var(--ease-out)}
@keyframes lb-in{from{opacity:0}}
html.lb-open{overflow:hidden}
::view-transition-group(ricci-foto){animation-duration:.42s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(ricci-foto),::view-transition-new(ricci-foto){height:100%;object-fit:cover;animation:none;mix-blend-mode:normal}
::view-transition-new(ricci-foto){object-fit:contain}

/* ---------- Troca de etapa do pedido (View Transitions) ---------- */
html[data-vt^="pedido"] .quote-form{view-transition-name:pedido}
::view-transition-group(pedido){animation-duration:.34s;animation-timing-function:var(--ease-out)}
::view-transition-old(pedido),::view-transition-new(pedido){height:100%;object-fit:none;object-position:top}
html[data-vt="pedido-frente"]::view-transition-old(pedido){animation:vt-sai-esq .2s var(--ease) both}
html[data-vt="pedido-frente"]::view-transition-new(pedido){animation:vt-entra-dir .34s var(--ease-out) .06s both}
html[data-vt="pedido-volta"]::view-transition-old(pedido){animation:vt-sai-dir .2s var(--ease) both}
html[data-vt="pedido-volta"]::view-transition-new(pedido){animation:vt-entra-esq .34s var(--ease-out) .06s both}
@keyframes vt-sai-esq{to{opacity:0;transform:translateX(-18px)}}
@keyframes vt-sai-dir{to{opacity:0;transform:translateX(18px)}}
@keyframes vt-entra-dir{from{opacity:0;transform:translateX(22px)}}
@keyframes vt-entra-esq{from{opacity:0;transform:translateX(-22px)}}
::view-transition-old(root),::view-transition-new(root){animation:none}

/* ---------- Pedido enviado: o círculo se desenha, o check entra e saem algumas faíscas ---------- */
.sent{position:relative}
.sent-burst{position:absolute;left:28px;top:28px;width:0;height:0;pointer-events:none}
.sent-burst i{position:absolute;left:-6px;top:-8px;font-style:normal;font-size:.9rem;color:var(--honey)}
.sent-burst i:nth-child(odd){color:var(--honey-ink);font-size:.7rem}
@media(prefers-reduced-motion:no-preference){
  .sent.is-celebrating .sent-icon circle{stroke-dasharray:183;stroke-dashoffset:183;animation:sent-draw .7s var(--ease-out) forwards}
  .sent.is-celebrating .sent-icon path{stroke-dasharray:40;stroke-dashoffset:40;animation:sent-draw .45s var(--ease-out) .45s forwards}
  .sent.is-celebrating .sent-icon{animation:sent-pop .5s cubic-bezier(.34,1.56,.64,1) .55s both}
}
@keyframes sent-draw{to{stroke-dashoffset:0}}
@keyframes sent-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- Rolagem guiada pelo CSS (animation-timeline). O motion.js só faz isso onde não há suporte. ---------- */
@keyframes barra-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes topo-arte{to{transform:translate3d(0,-7%,0)}}
@keyframes topo-texto{to{transform:translate3d(0,5%,0)}}
@keyframes selo-gira{to{transform:rotate(160deg)}}
@keyframes anel-gira{to{rotate:150deg}}
@keyframes sobe{from{opacity:0;transform:translate3d(0,42px,0)}to{opacity:1;transform:none}}
@keyframes sobe-leve{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes cartao-sobe{from{opacity:.15;transform:translate3d(0,64px,0)}to{opacity:1;transform:none}}
@keyframes foto-cresce{from{opacity:0;transform:scale(.9) translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes painel-assenta{from{opacity:.4;transform:translate3d(0,40px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes foto-desliza{0%{transform:translate3d(-14%,0,0) scale(1.28)}50%{transform:none}100%{transform:translate3d(14%,0,0) scale(1.28)}}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    /* Anel do retrato: a estrela dá uma volta lenta enquanto o topo sai da tela */
    .has-motion .arch-outline{animation:anel-gira linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    /* Entradas guiadas pela rolagem: cada bloco assenta enquanto entra na tela (e desfaz ao voltar) */
    :is(.section-head h2,.availability-copy h2,.quote-copy h2,.about-copy h2,.info-head h2,.place h2,.contact h2,.testimonials h2,.more-head h3){animation:sobe linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    :is(.lede,.availability-copy p,.quote-copy>p,.info-head p,.contact>p,.more-head p){animation:sobe-leve linear both;animation-timeline:view();animation-range:entry 10% entry 85%}
    .style-card{animation:cartao-sobe linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .style-card:nth-child(3n+2){animation-range:entry 4% entry 62%}
    .style-card:nth-child(3n){animation-range:entry 8% entry 70%}
    .more-grid>*{animation:foto-cresce linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    :is(.faq-item,.city-list li,.payment-method){animation:sobe-leve linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .quote-form{animation:painel-assenta linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .insta-grid>a{animation:foto-cresce linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    /* Carrossel dos estilos: a foto que chega desliza com paralaxe e um leve zoom, e assenta no centro */
    .style-photos img{animation:foto-desliza linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%}
    .scroll-progress{animation:barra-progresso linear both;animation-timeline:scroll(root)}
    /* O retrato sobe um pouco e o selo gira enquanto o topo sai da tela */
    .has-motion .hero-art{animation:topo-arte linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .has-motion .hero-copy{animation:topo-texto linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .has-motion .seal svg{animation:selo-gira linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}

/* ---------- Tablet ---------- */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:44px}
  .hero-art{min-height:420px}
  .section-head,.availability,.quote,.about,.info{grid-template-columns:1fr}
  .section-head{align-items:start}
  .about-photo{justify-self:start;margin-left:18px}
  .change-note{width:100%;margin-left:0}
}
@media(min-width:961px){.quote-copy{position:sticky;top:110px}}
@media(min-width:1100px){.style-grid{align-items:start}.style-card:nth-child(3n+2){margin-top:56px}}

/* ---------- Celular ---------- */
@media(max-width:720px){
  .topbar{height:70px}
  .menu-toggle{display:block}
  .main-nav{position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 24px;border-top:1px solid rgb(255 255 255 / .1);background:var(--espresso);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--ease),visibility .35s}
  .main-nav.open{visibility:visible;opacity:1;transform:none}
  .main-nav>a:not(.nav-cta){padding:14px 0;border-bottom:1px solid rgb(255 255 255 / .1)}
  .main-nav>a:not(.nav-cta)::after{display:none}
  .nav-cta{margin-top:16px;text-align:center}
  .hero{gap:32px;min-height:0;padding-top:40px;padding-bottom:56px}
  .hero-intro{margin:20px 0 26px}
  .hero-location{margin-top:28px}
  .hero-art{min-height:0;padding:4px 0 8px}
  .hero-arch{width:min(280px,74%)}
  .art-note{left:-10%;bottom:-6%;padding:11px 15px}
  .seal{right:-8%;top:-4%;width:88px;height:88px}
  .wizard-actions{flex-direction:column-reverse}
  .wizard-actions .button{width:100%}
  .contact .button{width:100%}
  .footer{justify-content:center;text-align:center}
  .floating-wa{width:52px;padding:0;justify-content:center}
  .wa-label{display:none}
}
@media(max-width:640px){
  .style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}
  .style-card:last-child:nth-child(odd){grid-column:1/-1}
  .style-card:last-child:nth-child(odd) .style-photos li,.style-card:last-child:nth-child(odd) .style-ill{aspect-ratio:16/10}
  .style-body{padding-top:12px}
  .style-body h3{font-size:1.2rem}
  .style-tag{font-size:.8125rem}
  .style-price{font-size:.9375rem}
}
@media(max-width:560px){
  .availability,.quote{padding-left:12px;padding-right:12px}
  .availability-copy,.quote-copy{padding:0 calc(var(--pad) - 12px)}
  .availability-board{padding:10px}
  .quote-form{padding:20px 14px;border-radius:var(--r-md)}
  .pick-option{min-height:64px;padding:7px 40px 7px 7px;gap:10px}
  .pick-thumb{width:48px;height:48px}
  .pick-text strong{font-size:1rem}
  .cal-week,.cal-grid{gap:3px}
  .panel-title{font-size:1.45rem}
}
@media(max-width:390px){.hero h1{font-size:2.7rem}}

/* ---------- Movimento (estados iniciais só existem com .has-motion) ----------
   Uma única abertura marcante no topo (cerca de 1,3 s). No resto da página o conteúdo já está lá:
   só as fotos dos estilos, a foto de "Quem sou" e as linhas das orientações entram, de forma curta. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}
.has-motion [data-split]:not(.is-split){visibility:hidden}
.has-motion [data-split] .wi{transform:translate3d(0,110%,0)}
.has-motion.is-loaded .hero [data-split] .wi{transform:none;transition:transform .9s var(--ease-expo) calc(100ms + var(--i,0) * 60ms)}

.has-motion .hero .reveal{opacity:0;transform:translate3d(0,14px,0)}
.has-motion.is-loaded .hero .reveal{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(450ms + var(--d,0ms)),transform .7s var(--ease-expo) calc(450ms + var(--d,0ms))}

/* Retrato: a cortina abre de baixo para cima e a foto assenta (sai de um leve zoom) */
/* Retrato: abre em íris (do centro para fora) e a foto assenta saindo de um leve zoom */
.has-motion [data-hero-clip]{clip-path:circle(0% at 50% 55%)}
.has-motion [data-hero-clip] img{transform:scale(1.12)}
.has-motion.is-loaded [data-hero-clip]{clip-path:circle(71% at 50% 55%);transition:clip-path 1.2s var(--ease-curtain) .1s}
.has-motion.is-loaded [data-hero-clip] img{transform:scale(1.02);transition:transform 1.3s var(--ease-expo) .1s}
.has-motion .arch-outline{opacity:0;transform:scale(.9) rotate(-40deg)}
.has-motion.is-loaded .arch-outline{opacity:1;transform:none;transition:opacity .7s var(--ease) .55s,transform .9s var(--ease-expo) .55s}
/* Selo: entra como um carimbo. Vem um pouco maior e girado (antecipação), passa do ponto ao "apertar" e assenta. */
.has-motion .seal{opacity:0}
.has-motion.is-loaded .seal{animation:seal-stamp .65s var(--ease-out) .7s both}
@keyframes seal-stamp{
  0%{opacity:0;transform:scale(1.18) rotate(-24deg)}
  62%{opacity:1;transform:scale(.96) rotate(3deg)}
  100%{opacity:1;transform:none}
}
.has-motion .art-note{opacity:0;transform:translate3d(0,12px,0)}
.has-motion.is-loaded .art-note{opacity:1;transform:none;transition:opacity .5s var(--ease) .8s,transform .6s var(--ease-expo) .8s}
.has-motion :is(.brand,.menu-toggle,.main-nav>a){opacity:0}
.has-motion.is-loaded :is(.brand,.menu-toggle,.main-nav>a){opacity:1;transition:opacity .6s var(--ease)}

/* Fotos: "Quem sou" e a vitrine de estilos abrem em cortina curta; o texto dos cartões já está visível */
.has-motion [data-clip]{clip-path:inset(100% 0 0 0)}
.has-motion [data-clip].is-in{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease-curtain)}
.has-motion .about-frame[data-clip]{clip-path:circle(0% at 50% 50%)}
.has-motion .about-frame[data-clip].is-in{clip-path:circle(71% at 50% 50%);transition:clip-path 1.1s var(--ease-curtain)}
.has-motion .style-card .style-media{clip-path:inset(100% 0 0 0)}
.has-motion .style-card.is-in .style-media{clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease-curtain) var(--d,0ms)}
/* Orientações: só a linha se desenha; o texto não espera */
.has-motion .draw{transform:scaleX(0)}
.has-motion .is-in .draw{transform:scaleX(1);transition:transform .7s var(--ease-out)}

@media print{.has-motion *{opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}