/* Constant Salão de Beleza · estilo.css (um arquivo só; celular primeiro; tela larga de 720 px em diante; desktop de 960 px em diante) */

/* 1. Fontes (arquivos locais em ../fonts; licença OFL guardada junto) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;
  src:url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Variáveis (cores e fontes) */
:root{
  --creme-cal:#FAF6EF;        /* fundo da página */
  --branco:#FFFFFF;           /* cartões */
  --rosa-alabastro:#F0D9D0;   /* Benjamin */
  --rosa-flor:#E2B6B5;        /* faixa da oferta */
  --salvia-clara:#E4E8D8;     /* Plaza e Museu */
  --salvia:#959C73;           /* só detalhes e linhas decorativas, nunca texto */
  --verde:#5E6B42;            /* botões com letra branca; texto só sobre creme/branco */
  --verde-escuro:#4E5A36;     /* links e textos verdes sobre rosa e sálvia */
  --carvao:#211D1A;           /* texto, logo e Barbearia */
  --carvao-suave:#5C534C;     /* texto de apoio */
  --caramelo:#C48D52;         /* detalhe sobre fundo escuro */
  --caramelo-escuro:#8F5E2C;  /* só sobre creme ou branco */

  --fonte-titulo:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-texto:'Montserrat', 'Segoe UI', system-ui, Arial, sans-serif;

  --texto:17px; --h1:44px; --h2:34px; --botao:16px; --rotulo:13px;

  /* medidas do site */
  --largura:1120px; --gutter:20px;
  --raio-foto:24px; --raio-cartao:20px;
  --linha:rgba(33,29,26,.16);
  color-scheme:light;
}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:12px;scroll-padding-bottom:88px}
body{margin:0;background:var(--creme-cal);color:var(--carvao);font:400 var(--texto)/1.65 var(--fonte-texto);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,dl,dd,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:var(--verde-escuro);text-decoration-thickness:1.5px;text-underline-offset:.22em}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:600;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:30px}
h4{font:600 16px/1.35 var(--fonte-texto)}
p{text-wrap:pretty}
.realce{font-style:italic;color:var(--verde)}
.rotulo{margin:0 0 10px;font:600 var(--rotulo)/1.4 var(--fonte-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--verde-escuro)}
.contem{width:min(100% - 2 * var(--gutter),var(--largura));margin-inline:auto}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* foco visível (teclado) */
:focus-visible{outline:3px solid var(--carvao);outline-offset:3px}
main:focus{outline:none}
.pular{position:absolute;left:12px;top:-140px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--carvao);color:var(--creme-cal);font-weight:600;text-decoration:none}
.pular:focus{top:12px}
.pular:focus-visible{outline:2px solid var(--creme-cal);outline-offset:-5px}

/* 4. Botões e links */
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 28px;border:2px solid transparent;border-radius:999px;font:600 var(--botao)/1.25 var(--fonte-texto);text-align:center;text-decoration:none;cursor:pointer}
.botao--primario{background:var(--verde);color:var(--branco)}
.botao--contorno{background:transparent;border-color:var(--carvao);color:var(--carvao)}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .botao{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
}
.botao--primario:hover{background:var(--verde-escuro)}
.botao--contorno:hover{background:rgba(33,29,26,.07)}

/* 5. Cabeçalho */
.topo{background:var(--creme-cal);border-bottom:1px solid var(--linha)}
.topo__linha{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo botao" "nav nav";align-items:center;column-gap:12px;padding-top:12px}
.logo{grid-area:logo;justify-self:start;display:flex;align-items:center;min-height:44px}
.logo img{width:156px}
.topo .botao{grid-area:botao;min-height:44px;padding:8px 22px;font-size:15px}
.nav{grid-area:nav;margin-top:2px}
.nav ul{display:flex;flex-wrap:wrap;margin:0 -12px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--carvao);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--verde-escuro);text-decoration:underline}
.nav a:focus-visible{outline-offset:-4px}
.topo--simples .topo__linha{grid-template-columns:1fr;grid-template-areas:"logo";padding-block:14px}

/* 6. Hero (foto em cima no celular; texto nunca fica sobre a foto) */
.hero{display:flex;flex-direction:column}
.hero__foto{order:-1}
.hero__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__texto{width:min(100% - 2 * var(--gutter),var(--largura));margin-inline:auto;padding:30px 0 44px}
.hero__texto h1{margin-top:2px}
.hero__lead{max-width:34em;margin-top:18px}
.hero__acoes{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:26px}
.hero__acoes .lnk{justify-content:center}

/* 7. Faixa da oferta (sai em 31/12/2026) */
.oferta{padding:20px 0 22px;background:var(--rosa-flor);color:var(--carvao);text-align:center}
.oferta__destaque{font:700 18px/1.4 var(--fonte-texto);font-variant-numeric:lining-nums tabular-nums}
.oferta__apoio{max-width:34em;margin:6px auto 0;font-size:15px;font-weight:500;line-height:1.5}
.oferta__grade{display:grid;gap:22px;justify-items:center}
.oferta__arte{margin:0;width:min(100%,420px)}
.oferta__arte img{display:block;width:100%;height:auto;border-radius:var(--raio-cartao);box-shadow:0 10px 28px rgba(33,29,26,.22)}

/* Barra fina da oferta, no topo (sai em 31/12/2026 junto com a faixa) */
.oferta-topo{margin:0;padding:8px 12px;background:var(--rosa-flor);color:var(--carvao);text-align:center;font:700 14px/1.35 var(--fonte-texto)}
@media (min-width:720px){.oferta-topo{font-size:15px}}
@media (max-width:719px){.hero__foto img{aspect-ratio:16/10;max-height:42svh;object-position:50% 100%}}

/* 8. Blocos de página */
.secao{padding:60px 0}
.jeito__texto{max-width:42rem}
.jeito__texto h2{margin-top:2px}
.jeito__texto p{margin-top:16px}
.pilares{display:grid;gap:30px;margin-top:40px}
.pilar{padding:18px 0 0;border-top:1px solid rgba(33,29,26,.3)}
.pilar svg{display:none}
.pilar h3{font:600 30px/1.1 var(--fonte-titulo);letter-spacing:-.005em}
.pilar p{margin-top:8px;max-width:30em;color:var(--carvao-suave);font-size:16.5px;line-height:1.6}

/* 9. Nossas unidades: intro e grade de 4 cartões iguais */
.unidades{padding:60px 0 56px;background:var(--branco)}
.unidades__lead{max-width:38rem;margin-top:14px}
.grade-unidades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px;margin-top:34px}
.cartao-unidade{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0;background:none;color:var(--carvao)}
.cartao-unidade picture{display:block;width:100%}
.cartao-unidade img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio-foto)}
.cartao-unidade .rotulo{margin:14px 0 2px}
.cartao-unidade__nome{font:600 28px/1.05 var(--fonte-titulo);letter-spacing:-.01em}
.cartao-unidade__ref{display:none}
.cartao-unidade__ver{margin-top:8px;color:var(--carvao);font-weight:700}
.cartao-unidade__ver::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cartao-unidade .realce{color:var(--verde-escuro)}
.cartao-unidade--carvao .rotulo,.cartao-unidade--carvao .realce,.cartao-unidade--carvao .cartao-unidade__ver{color:inherit}
.cartao-unidade--carvao .rotulo{color:var(--verde-escuro)}
.cartao-unidade--carvao .realce{color:var(--verde-escuro)}
.cartao-unidade--carvao .cartao-unidade__ver{color:var(--carvao)}
@supports selector(:has(*)){
  .cartao-unidade__ver:focus-visible{outline:none}
  .cartao-unidade:has(.cartao-unidade__ver:focus-visible) img{outline:3px solid var(--carvao);outline-offset:3px}
}

/* 10. Uma seção por unidade (cada uma com a cor do seu tipo de espaço) */
.unidade{padding:56px 0 60px;--linha-un:rgba(33,29,26,.2)}
.unidade--rosa{background:var(--rosa-alabastro)}
.unidade--salvia{background:var(--salvia-clara)}
.unidade--carvao{background:var(--carvao);color:var(--creme-cal);--linha-un:rgba(250,246,239,.28)}
.unidade__grade{display:grid;gap:26px}
.unidade h3{font-size:42px;line-height:1.02}
.unidade .realce{color:var(--verde-escuro)}
.unidade__ref{margin-top:12px;color:var(--carvao-suave);font-style:italic}
.unidade__apoio{margin-top:6px}
.unidade__foto{width:100%;margin-inline:auto}
.unidade__foto img{width:100%;border-radius:var(--raio-foto);aspect-ratio:4/5;object-fit:cover}
.fotos-duo{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.fotos-duo picture{min-height:0}
.fotos-duo picture:last-child img{height:100%;aspect-ratio:auto}
.dados{margin-top:4px}
.dados div{padding:13px 0;border-top:1px solid var(--linha-un)}
.dados div:last-child{border-bottom:1px solid var(--linha-un)}
.dados dt{font:600 var(--rotulo)/1.4 var(--fonte-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--verde-escuro)}
.dados dd{margin-top:3px;font-variant-numeric:lining-nums tabular-nums}
.dados .lnk{min-height:44px}
.areas__titulo{margin-top:26px}
.unidade__galeria{padding-top:40px}
.galeria__titulo{margin:0 0 14px}
.galeria{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(138px,42vw);gap:10px;margin:0;padding:0 0 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.galeria li{scroll-snap-align:start;min-width:0}
.galeria img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:16px}
.areas{margin-top:12px;line-height:1.7}
.areas li{display:inline;padding:0;background:none;color:inherit;font-size:16.5px;font-weight:500}
.areas li:not(:last-child)::after{content:"·";margin:0 10px 0 11px;opacity:.7}
.areas small{color:var(--carvao-suave);font-size:14px;font-weight:500}
.acoes{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.unidade__insta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:14px;font-size:16px}
.unidade--carvao .rotulo,.unidade--carvao .dados dt{color:var(--caramelo)}
.unidade--carvao .realce,.unidade--carvao .lnk{color:var(--caramelo)}
.unidade--carvao .unidade__ref{color:var(--creme-cal)}
.unidade--carvao .botao--primario{background:var(--caramelo);color:var(--carvao)}
.unidade--carvao .botao--primario:hover{background:var(--creme-cal)}
.unidade--carvao .botao--contorno{border-color:var(--creme-cal);color:var(--creme-cal)}
.unidade--carvao .botao--contorno:hover{background:rgba(250,246,239,.1)}
.unidade--carvao :focus-visible{outline-color:var(--caramelo)}
.unidade--carvao .areas li{color:var(--creme-cal)}
.unidade--carvao .areas small{color:var(--creme-cal)}

/* 11. Serviços */
.servicos{padding:64px 0 72px}
.servicos__lead{max-width:40rem;margin-top:14px}
.servicos__fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;margin-top:34px}
.servicos__fotos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio-foto)}
.servicos__fotos p{margin-top:10px;font:600 var(--rotulo)/1.4 var(--fonte-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--verde-escuro)}
.grade-servicos{margin-top:52px}
.area{display:block;padding:24px 0 22px;border-top:1px solid rgba(33,29,26,.3);background:none;break-inside:avoid}
.area:last-child{border-bottom:1px solid rgba(33,29,26,.3)}
.area h3{font-size:34px}
.area__itens{margin:10px 0 12px}
.area__itens li{display:block;padding:3px 0;font-size:17px;line-height:1.5}
.area__onde{color:var(--carvao-suave);font-size:15px;line-height:1.5}
.area__onde b{color:var(--carvao)}
.area__onde span{white-space:nowrap}
.servicos__fecho{margin-top:24px;text-align:center;font-size:18px;font-weight:600}
.servicos__fecho::before{content:"";display:block;width:56px;height:2px;margin:0 auto 22px;background:var(--salvia)}

/* 11b. Destaque (banho de lua) e vídeos (sem som; só carregam quando a pessoa toca) */
.unidade__destaque,.unidade__videos{padding-top:40px}
.destaque{max-width:640px}
.destaque img{display:block;width:100%;height:auto;aspect-ratio:923/535;object-fit:cover;border-radius:var(--raio-foto)}
.destaque figcaption{margin-top:10px;color:var(--carvao-suave);font-size:15.5px;line-height:1.5}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),300px));gap:26px 20px;margin:0;padding:0;list-style:none}
.videos li{min-width:0}
.videos video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--carvao);border-radius:16px}
.videos figcaption{margin-top:10px;font-size:15.5px;font-weight:600;line-height:1.4}
.videos small{display:block;margin-top:2px;color:var(--carvao-suave);font-size:13.5px;font-weight:500}
.unidade--carvao .videos video{background:#2C2723}
.unidade--carvao .videos small,.unidade--carvao .destaque figcaption{color:var(--creme-cal)}
@media (max-width:719px){.videos{grid-template-columns:minmax(0,1fr);max-width:340px;margin-inline:auto}}

/* 12. Rodapé */
.rodape{padding:48px 0 128px;background:var(--carvao);color:var(--creme-cal);font-size:15.5px;line-height:1.65;text-align:center}
.rodape img{display:block;width:168px;margin-inline:auto}
.rodape p{max-width:46rem;margin:18px auto 0}
.rodape .lnk{display:inline-block;min-height:0;padding:13px 6px;margin:-13px -6px;color:var(--caramelo)}
.rodape :focus-visible{outline-color:var(--caramelo)}
.rodape__direitos{padding-top:18px;border-top:1px solid rgba(250,246,239,.28);font-size:14px}

/* 12b. Botão fixo "Agendar pelo WhatsApp": sempre na tela; escolhe a unidade sem JavaScript (<details>) */
.agendar-fixo{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;max-width:calc(100vw - 28px)}
.agendar-fixo summary{gap:12px;list-style:none;box-shadow:0 0 0 2px var(--creme-cal),0 8px 22px rgba(33,29,26,.3)}
.agendar-fixo summary::-webkit-details-marker{display:none}
.agendar-fixo summary::after{content:"";flex:none;width:8px;height:8px;margin-top:3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg)}
.agendar-fixo details[open] summary::after{margin-top:-3px;transform:rotate(45deg)}
.agendar-fixo summary:focus-visible{outline:3px solid var(--carvao);outline-offset:2px;box-shadow:0 0 0 8px var(--creme-cal),0 8px 22px rgba(33,29,26,.3)}
.agendar-fixo ul{position:absolute;right:0;bottom:calc(100% + 12px);width:min(330px,calc(100vw - 28px));margin:0;padding:6px;list-style:none;border-radius:var(--raio-cartao);background:var(--branco);box-shadow:0 0 0 1px var(--linha),0 12px 32px rgba(33,29,26,.28)}
.agendar-fixo li+li{border-top:1px solid var(--linha)}
.agendar-fixo li a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 16px;border-radius:14px;color:var(--carvao);font-size:16px;font-weight:700;line-height:1.3;text-decoration:none}
.agendar-fixo li a:hover{background:var(--salvia-clara)}
.agendar-fixo li a:focus-visible{outline-offset:-3px}
.agendar-fixo small{color:var(--carvao-suave);font-size:14px;font-weight:500}
@media print{.agendar-fixo{display:none}}

/* 13. Página 404 */
.erro{padding:72px 0 96px}
.erro h1{font-size:clamp(40px,9vw,64px);margin-top:2px}
.erro p{max-width:34em;margin:16px 0 28px}

/* 14. Tela larga (de 720 px em diante) */
@media (min-width:720px){
  :root{--gutter:32px;--texto:18px;--h1:clamp(46px,5.4vw,68px);--h2:42px}
  .topo__linha{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo nav botao";column-gap:28px;padding-block:16px}
  .logo img{width:176px}
  .nav{margin:0}
  .nav ul{justify-content:flex-end;margin:0}
  .topo .botao{font-size:var(--botao);padding-inline:26px}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;column-gap:clamp(32px,5vw,72px);width:min(100% - 2 * var(--gutter),var(--largura));margin-inline:auto;padding:clamp(32px,5vw,64px) 0}
  .hero__foto{order:0}
  .hero__foto img{aspect-ratio:5/6;border-radius:28px}
  .hero__texto{width:auto;margin:0;padding:0}
  .hero__acoes{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 28px}
  .hero__acoes .lnk{justify-content:flex-start}
  .galeria{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;overflow:visible;padding-bottom:0}
  .oferta{padding:40px 0}
  .oferta__grade{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,80px);justify-items:stretch;align-items:center}
  .oferta__texto{text-align:left}
  .oferta__arte{width:380px}
  .oferta__destaque{font-size:28px;line-height:1.25}
  .oferta__apoio{margin:12px 0 0;font-size:17px}
  .secao{padding:96px 0}
  .pilares{grid-template-columns:repeat(2,1fr);gap:18px}
  .unidades{padding:88px 0 80px}
  .grade-unidades{grid-template-columns:repeat(2,1fr);gap:18px}
  .unidade{padding:88px 0}
  .unidade__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,80px);row-gap:0;align-items:start}
  .unidade__cabeca{grid-column:1;grid-row:1;padding-bottom:22px}
  .unidade__info{grid-column:1;grid-row:2}
  .unidade__foto{grid-column:2;grid-row:1 / span 2;align-self:center;width:100%;margin-inline:auto}
  .unidade h3{font-size:clamp(46px,5vw,60px)}
  .acoes{flex-direction:row;flex-wrap:wrap}
  .servicos{padding:96px 0 104px}
  .servicos__fotos{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px 40px;align-items:start;padding:30px 0}
  .area h3{grid-row:1 / span 2}
  .rodape{padding:64px 0 136px}
}

/* 15. Desktop (de 960 px em diante) */
@media (min-width:960px){
  :root{--h2:48px}
  .grade-unidades{grid-template-columns:repeat(4,1fr)}
  .cartao-unidade__nome .realce{display:block}
}

@media (min-width:720px) and (max-width:959px){
  .cartao-unidade__nome{font-size:34px}
}