/* 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}

/* 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:14px;margin-top:34px}
.pilar{padding:24px 22px 26px;border:1px solid var(--linha);border-radius:var(--raio-cartao);background:var(--branco)}
.pilar svg{display:block;width:30px;height:30px;margin-bottom:14px;fill:none;stroke:var(--verde);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pilar h3{font:700 18px/1.35 var(--fonte-texto);letter-spacing:0}
.pilar p{margin-top:6px;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;gap:14px;margin-top:32px}
.cartao-unidade{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:22px 22px 14px;border-radius:var(--raio-cartao)}
.cartao-unidade--rosa{background:var(--rosa-alabastro)}
.cartao-unidade--salvia{background:var(--salvia-clara)}
.cartao-unidade--carvao{background:var(--carvao);color:var(--creme-cal)}
.cartao-unidade .rotulo{margin-bottom:4px}
.cartao-unidade__nome{font:600 32px/1.05 var(--fonte-titulo);letter-spacing:-.01em}
.cartao-unidade__ref{margin-top:10px;color:var(--carvao-suave);font-size:15.5px;font-style:italic;line-height:1.5}
.cartao-unidade__ver{margin-top:auto;padding-top:6px;color:var(--carvao);font-weight:700}
.cartao-unidade__ver::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cartao-unidade--carvao .rotulo{color:var(--caramelo)}
.cartao-unidade--carvao .realce,.cartao-unidade--carvao .cartao-unidade__ver{color:var(--caramelo)}
.cartao-unidade--carvao .cartao-unidade__ref{color:var(--creme-cal)}
.cartao-unidade--rosa .realce,.cartao-unidade--salvia .realce{color:var(--verde-escuro)}
.cartao-unidade--carvao .cartao-unidade__ver:focus-visible{outline-color:var(--caramelo)}
@supports selector(:has(*)){
  .cartao-unidade__ver:focus-visible{outline:none}
  .cartao-unidade:has(.cartao-unidade__ver:focus-visible){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}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.areas li{display:inline-flex;align-items:baseline;gap:6px;padding:8px 15px;border-radius:999px;background:var(--branco);color:var(--carvao);font-size:15px;font-weight:500;line-height:1.3}
.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{border:1px solid rgba(250,246,239,.55);background:transparent;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}
.grade-servicos{margin-top:32px}
.area{display:block;margin-bottom:16px;padding:26px 24px 22px;border:1px solid var(--linha);border-radius:var(--raio-cartao);background:var(--branco);break-inside:avoid}
.area h3{font-size:32px}
.area__itens{margin:14px 0 18px}
.area__itens li{position:relative;padding:5px 0 5px 20px;font-size:16.5px;line-height:1.45}
.area__itens li::before{content:"";position:absolute;left:2px;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--salvia)}
.area__onde{padding-top:14px;border-top:1px solid var(--linha);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)}

/* 12. Rodapé */
.rodape{padding:48px 0 128px;background:var(--carvao);color:var(--creme-cal);font-size:15.5px;line-height:1.65}
.rodape img{width:168px}
.rodape p{max-width:46rem;margin-top:18px}
.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}
  .oferta__destaque{font-size:21px}
  .oferta__apoio{font-size:16px}
  .secao{padding:96px 0}
  .pilares{grid-template-columns:repeat(3,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}
  .grade-servicos{column-count:2;column-gap:18px}
  .area{margin-bottom:18px}
  .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)}
  .grade-servicos{column-count:3}
  .cartao-unidade__nome .realce{display:block}
}

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