/* Salão Cachos de Bacabal: the business's own design (fictional example, Site na Conversa /exemplos/salao/).
   Kit colours: cacau profundo #422C29 (text), creme suave #FFF8F0 (page), fúcsia #C93279 (accent),
   cacau quente #70443A (button), rosa claro #F6E4EA (panel tint). DynaPuff for headings and short labels,
   Nunito Sans for reading. Measured pairs: text on page 12.28, text on tint 10.59, white on button 8.15,
   page on button 7.74, tint on button 6.68, button on tint 6.68, page on text 12.28. Fuchsia is text only on
   the page colour (4.73); on the tint and the cacao it is decoration. The frame (.snc-*) is moldura.css's. */

@font-face{font-family:DynaPuff;src:url('/exemplos/fontes/DynaPuff-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/exemplos/fontes/NunitoSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/exemplos/fontes/NunitoSans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{--texto:#422C29;--pagina:#FFF8F0;--fucsia:#C93279;--botao:#70443A;--tinta:#F6E4EA;--branco:#FFFFFF;--titulo:DynaPuff,'Nunito Sans',Arial,sans-serif;--corpo:'Nunito Sans',Arial,sans-serif;--onda:var(--fucsia);--cacho:var(--fucsia);color-scheme:light}

/* Base. The root font size stays the browser's. From 37.5em SNC's band is sticky: anchors and focus land below it
   (72 px at normal text, growing with (1rem - 16px) when text is enlarged). Below 37.5em the band scrolls away with
   the page, so 72 px is enough. */
html{scroll-padding-top:max(72px,calc(4.5rem + (1rem - 16px) * 2))}
@media (max-width:37.49em){html{scroll-padding-top:72px}}
body{margin:0;background:var(--pagina);color:var(--texto);font:400 1.0625rem/1.6 var(--corpo)}
*,*::before,*::after{box-sizing:border-box}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul{margin:0}
:where(.topo,main,.rodape) :where(p,li){text-wrap:pretty}
ul{padding:0;list-style:none}
a{color:var(--botao)}
:focus-visible{outline:3px solid var(--fucsia);outline-offset:3px}
main:focus{outline:none}
.caixa{width:min(100% - 32px,1160px);margin-inline:auto}

.pular{position:absolute;top:8px;left:16px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:14px;background:var(--botao);color:var(--branco);font-weight:700;text-decoration:none;transform:translateY(-250%)}
.pular:focus{transform:none}
.pular:focus-visible{outline-color:var(--pagina)}

/* Header: the full logo (280 px, never smaller) and four links in a rose bar. */
.topo{padding:18px 0 6px}
.topo-dentro{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 32px}
.marca{display:block;border-radius:10px}
.marca img{width:280px}
.menu{display:flex;flex-wrap:wrap;justify-content:space-evenly;flex:1 1 100%;padding:0 4px;border-radius:24px;background:var(--tinta)}
.menu a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;border-radius:14px;color:var(--texto);font-size:1rem;font-weight:700;text-decoration:none;text-decoration-thickness:3px;text-underline-offset:7px}
.menu a:hover{text-decoration:underline;text-decoration-color:var(--fucsia)}

/* Hero: the name as a sign, «Cachos» in fuchsia (on the page colour only), the curls on a rose blob. */
.hero{padding:18px 0 40px;overflow-x:clip}
.hero-grade{display:grid;justify-items:center;gap:24px;text-align:center}
.hero-titulo{font-family:var(--titulo);font-weight:500;line-height:1.04;color:var(--texto)}
.hero-titulo span{display:block}
.t-salao{font-size:min(1.5rem,7vw)}
.t-cachos{font-size:min(3.625rem,16vw);line-height:.98;color:var(--fucsia)}
.t-cidade{font-size:min(2.375rem,10.5vw)}
.hero-linha{max-width:28rem;margin:14px auto 0;font-size:1.125rem;line-height:1.5}
.hero .demo-wa{margin-top:22px}

.arte{display:grid;place-items:center}
.hero-arte{position:relative;isolation:isolate;width:min(100%,272px);padding:8% 9% 9% 8%}
.hero-arte::before,.hero-arte::after{content:"";position:absolute;z-index:-1;border-radius:58% 42% 54% 46%/47% 55% 45% 53%}
.hero-arte::before{inset:-3% -2% 1% 2%;border:3px solid var(--fucsia);transform:rotate(-9deg)}
.hero-arte::after{inset:0;background:var(--tinta)}

/* The demo WhatsApp button: a native disclosure styled as the main button (cacao, white text, 14 px corners). */
.demo-wa summary{display:inline-flex;align-items:center;justify-content:center;min-height:56px;max-width:100%;padding:14px 18px;border-radius:14px;background:var(--botao);color:var(--branco);font:700 1.0625rem/1.3 var(--corpo);list-style:none;cursor:pointer}
.demo-wa summary::-webkit-details-marker{display:none}
.demo-wa summary::marker{content:""}
.demo-wa summary:hover,.demo-wa[open] summary{background:var(--texto)}
/* The icon rides inline with the words, so a label that wraps on a narrow phone stays centred and balanced. */
.demo-wa-rotulo{text-align:center;text-wrap:balance}
.icone-conversa{display:inline-block;width:24px;height:24px;margin-right:10px;vertical-align:-6px}
.demo-wa-painel{position:relative;max-width:30rem;margin:16px auto 0;padding:16px 20px;border-radius:18px;background:var(--tinta);color:var(--texto);text-align:left}
.demo-wa-painel::before{content:"";position:absolute;top:-8px;left:calc(50% - 9px);width:18px;height:18px;border-radius:4px 0 0 0;background:inherit;transform:rotate(45deg)}
.demo-wa-painel p+p{margin-top:8px;font-weight:700}

/* Sections and their headings, each with a small fuchsia wave (a curl seen from the side). */
.secao{padding:48px 0}
.secao h2{font:500 min(clamp(2rem,1.5rem + 1.5vw,2.75rem),12vw)/1.1 var(--titulo);color:var(--texto);overflow-wrap:break-word}
/* The wave: five half-rings, u n u n u, each whole in its own 16x8 tile, so it joins cleanly and ends on the midline. */
.secao h2::after{--u:radial-gradient(circle at 8px 0,#0000 3.5px,var(--onda) 4px 8px,#0000 8.5px);--n:radial-gradient(circle at 8px 8px,#0000 3.5px,var(--onda) 4px 8px,#0000 8.5px);content:"";display:block;width:64px;height:16px;margin-top:14px;background:var(--u) 0 8px/16px 8px no-repeat,var(--n) 12px 0/16px 8px no-repeat,var(--u) 24px 8px/16px 8px no-repeat,var(--n) 36px 0/16px 8px no-repeat,var(--u) 48px 8px/16px 8px no-repeat}
h3{overflow-wrap:break-word}
.duas-colunas{display:grid;gap:22px}
.texto{display:grid;gap:16px;max-width:40rem}
.destaque{font-size:1.1875rem;line-height:1.55}
.nota{padding:16px 20px;border-left:6px solid var(--fucsia);border-radius:6px 18px 18px 6px;background:var(--tinta);font-weight:700}

/* Services: rose cards, the price large and easy to scan. */
.servicos-grade{display:grid;gap:32px;margin-top:28px}
.servicos-lista{display:grid;gap:14px}
.servico{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;justify-content:space-between;gap:6px 14px;padding:20px 20px 22px;border-radius:24px;background:var(--tinta)}
.servico h3{flex:1 1 8.5rem;padding-top:3px;font:500 1.25rem/1.25 var(--titulo)}
.preco{display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:var(--botao)}
.preco-valor{font:500 1.5rem/1.2 var(--titulo);white-space:nowrap}
.preco-nota{font-size:1rem;font-weight:700;line-height:1.3}
.servico-texto{flex:1 1 100%;font-size:1rem;line-height:1.55}
@media (max-width:359px){.preco-nota{max-width:5.5rem}}
.servicos-arte{justify-self:center;width:min(100%,250px);aspect-ratio:1;padding:13%;border-radius:47% 53% 44% 56%/52% 45% 55% 48%;background:var(--tinta)}

/* Hours and rules: a warm cacao panel. */
.painel-cacau{--onda:var(--tinta);--cacho:var(--tinta);padding:36px 22px 40px;border-radius:32px;background:var(--botao);color:var(--pagina)}
.painel-cacau h2{color:var(--pagina)}
.horarios-grade{display:grid;gap:28px;margin-top:26px}
.bloco h3{font:500 1.375rem/1.25 var(--titulo);color:var(--tinta)}
.horario{margin-top:10px;font-size:1.25rem;font-weight:700;line-height:1.5}
.lista-cacho{display:grid;gap:12px;margin-top:12px}
.lista-cacho li{position:relative;padding-left:1.75em}
.lista-cacho li::before{content:"";position:absolute;left:0;top:.36em;width:.88em;height:.88em;border:.2em solid var(--cacho);border-right-color:transparent;border-radius:50%;transform:rotate(-40deg)}

/* Questions: a rose panel with page-coloured cards; the haircare drawing sits on the rose. */
.painel-rosa{padding:36px 16px 32px;border-radius:32px;background:var(--tinta)}
.duvidas-grade{display:grid;gap:24px}
.duvidas-grade h2{padding-inline:6px}
.perguntas{display:grid;gap:14px}
.pergunta{padding:20px 20px 22px;border-radius:22px;background:var(--pagina)}
.pergunta h3{font:500 1.1875rem/1.3 var(--titulo)}
.pergunta p{margin-top:8px}
.duvidas-arte{justify-self:center;width:min(100%,260px)}

/* Contact: a fuchsia-edged card on the page colour. */
.contato{padding-bottom:64px}
.contato-cartao{max-width:46rem;margin-inline:auto;padding:36px 12px 38px;border:3px solid var(--fucsia);border-radius:32px;text-align:center}
.contato-cartao h2::after{margin-inline:auto}
.contato-texto{max-width:32rem;margin:18px auto 0;font-size:1.1875rem;line-height:1.55}
.contato .demo-wa{margin-top:26px}
.contato-lista{display:block;margin-top:22px}
.contato-lista li{padding:0;font-weight:700;text-wrap:balance}
.contato-lista li::before{position:static;display:inline-block;margin-right:.55em;vertical-align:-.06em}
/* Phones under 380 px (360, 375): the button label stays on one line (it wraps, balanced, only near 320 px). */
@media (max-width:379px){
  .demo-wa summary{padding-inline:16px;font-size:1rem}
  .contato-cartao{padding-inline:10px}
}

/* Footer: the white logo on the deep cacao. */
.rodape{padding:44px 0 48px;background:var(--texto);color:var(--pagina)}
.rodape-dentro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.rodape-logo{width:280px}
.rodape-texto{display:grid;gap:2px;font-size:1rem}
.rodape a{display:inline-flex;align-items:center;min-height:44px;margin-left:.2em;color:var(--pagina);font-weight:700;text-underline-offset:.2em}
.rodape a:hover{text-decoration-color:var(--fucsia)}
.rodape :focus-visible{outline-color:var(--pagina);outline-offset:2px}

@media (min-width:760px){
  .topo{padding:20px 0 4px}
  .topo-dentro{justify-content:space-between}
  .menu{flex:0 1 auto;gap:0 4px;padding:0 10px}
  .menu a{padding:0 12px;font-size:1.0625rem}
  body{font-size:1.125rem}
  .hero{padding:32px 0 56px}
  .hero-grade{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;justify-items:stretch;gap:48px;text-align:left}
  .t-salao{font-size:clamp(1.75rem,1rem + 1.4vw,2.25rem)}
  .t-cachos{font-size:min(6.25rem,9vw)}
  .t-cidade{font-size:min(3.875rem,5.6vw)}
  .hero-linha{max-width:27rem;margin:18px 0 0;font-size:clamp(1.25rem,1rem + .5vw,1.4375rem)}
  .hero .demo-wa{margin-top:28px}
  .demo-wa summary{min-height:60px;padding:16px 26px;font-size:1.125rem}
  .hero .demo-wa-painel{margin-left:0}
  .hero .demo-wa-painel::before{left:34px}
  .hero-arte{justify-self:center;width:min(100%,500px)}
  .secao{padding:64px 0}
  .duas-colunas{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
  .destaque{font-size:1.375rem}
  .servicos-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .servico{padding:22px 24px 24px}
  .servico h3{font-size:1.375rem}
  .preco-valor{font-size:1.625rem}
  .servico-texto{font-size:1.0625rem}
  .painel-cacau{padding:56px}
  .horario{font-size:1.5rem;line-height:1.45}
  .horarios-grade{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px}
  .painel-rosa{padding:56px}
  .perguntas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contato-cartao{padding:56px 40px}
}
@media (min-width:1040px){
  .servicos-grade{grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:40px}
  .servicos-arte{width:100%}
  .duvidas-grade{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);grid-template-areas:"titulo lista" "arte lista";align-items:start;column-gap:48px}
  .duvidas-grade h2{grid-area:titulo;padding-inline:0}
  .perguntas{grid-area:lista}
  .duvidas-arte{grid-area:arte;align-self:end;width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .demo-wa summary,.menu a{transition:background-color .15s ease,text-decoration-color .15s ease}
}