/* ============================================================
   JEM.cabeleireiros — folha de estilos
   Organização: 1. Tokens  2. Reset  3. Tipografia  4. Layout utilitário
   5. Navegação  6. Hero  7. Secções gerais  8. Componentes  9. Footer
   10. Responsividade
   ============================================================ */

/* 1. TOKENS ---------------------------------------------------- */
:root{
  --carvao:#1C1B19;
  --carvao-soft:#26241f;
  --champagne:#EACBA9;
  --champagne-soft:#f0dcc4;
  --taupe:#8C8072;
  --marfim:#F0ECE5;
  --branco:#FFFFFF;

  --f-editorial:'Cormorant Garamond', Georgia, serif;
  --f-funcional:'Montserrat', Helvetica, Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(24px, 6vw, 88px);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* 2. RESET ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:104px;}
body{
  font-family:var(--f-funcional);
  font-weight:300;
  color:var(--carvao);
  background:var(--marfim);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
svg{display:block;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--champagne); outline-offset:3px;}

/* 3. TIPOGRAFIA --------------------------------------------------- */
h1,h2,h3,.editorial{
  font-family:var(--f-editorial);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.12;
}
h1{font-size:clamp(2.6rem, 6vw, 5rem); font-weight:500;}
h2{font-size:clamp(2rem, 4vw, 3.1rem);}
h3{font-size:clamp(1.35rem, 2.4vw, 1.8rem); font-weight:500;}
p{max-width:62ch;}
.eyebrow{
  font-family:var(--f-funcional);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--taupe);
}
.lede{
  font-family:var(--f-editorial);
  font-style:italic;
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  color:var(--taupe);
}

/* 4. LAYOUT -------------------------------------------------------- */
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
section{position:relative;}
.section-pad{padding-block:clamp(72px,10vw,140px);}
.section-head{max-width:640px; margin-bottom:clamp(36px,5vw,64px);}
.section-head.center{margin-inline:auto; text-align:center;}
.divider{width:56px; height:1px; background:var(--taupe); margin-block:18px; opacity:.6;}
.center .divider{margin-inline:auto;}

.bg-dark{background:var(--carvao); color:var(--marfim);}
.bg-dark .taupe-text, .bg-dark p{color:#cfc6bb;}
.bg-dark .divider{background:var(--champagne); opacity:.5;}
.bg-champagne{background:var(--champagne-soft); color:var(--carvao);}

/* Botões */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-funcional); font-weight:500; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:16px 30px;
  border:1px solid currentColor;
  transition:background var(--ease) .35s, color var(--ease) .35s, border-color var(--ease) .35s;
  white-space:nowrap;
}
.btn-solid{background:var(--champagne); border-color:var(--champagne); color:var(--carvao);}
.btn-solid:hover{background:transparent; color:var(--champagne);}
.bg-dark .btn-solid:hover{color:var(--marfim); border-color:var(--marfim);}
.btn-ghost{background:transparent; color:inherit;}
.btn-ghost:hover{background:var(--carvao); color:var(--marfim); border-color:var(--carvao);}
.bg-dark .btn-ghost{color:var(--marfim);}
.bg-dark .btn-ghost:hover{background:var(--marfim); color:var(--carvao);}
.btn-line{
  font-family:var(--f-funcional); font-weight:500; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; padding-bottom:4px;
  border-bottom:1px solid currentColor;
}
.btn-line .arrow{transition:transform var(--ease) .3s;}
.btn-line:hover .arrow{transform:translateX(5px);}

/* Logótipo — ficheiros de imagem reais, geometria original preservada */
.logo-mark{
  width:132px; height:auto;
}

/* 5. NAVEGAÇÃO ------------------------------------------------------ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding-block:20px;
  transition:background var(--ease) .4s, padding var(--ease) .4s, box-shadow var(--ease) .4s;
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1320px;}
.site-header.scrolled{
  background:rgba(28,27,25,.94);
  backdrop-filter:blur(6px);
  padding-block:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.site-header .logo-mark{width:118px;}

.main-nav{display:flex; align-items:center; gap:clamp(12px,1.35vw,22px);}
.main-nav a{
  font-size:.72rem; letter-spacing:.075em; text-transform:uppercase; color:var(--marfim);
  position:relative; padding-bottom:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--champagne);
  transition:right var(--ease) .3s;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{right:0;}

.nav-cta{display:flex; align-items:center; gap:18px;}
.nav-cta .btn{padding:12px 20px; font-size:.72rem;}

.nav-toggle{
  display:none; width:40px; height:32px; position:relative; z-index:110;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--marfim);
  transition:transform var(--ease) .35s, opacity var(--ease) .35s;
}
.nav-toggle span:nth-child(1){top:8px;}
.nav-toggle span:nth-child(2){top:16px;}
.nav-toggle span:nth-child(3){top:24px;}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

section[id]{scroll-margin-top:104px;}
#inicio{scroll-margin-top:0;}

/* 6. HERO ------------------------------------------------------------ */
.hero{
  min-height:100svh; display:flex; align-items:flex-end;
  background:var(--carvao); color:var(--marfim);
  padding-top:120px; overflow:hidden;
}
.hero-photo{position:absolute; inset:0; z-index:0;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:left center;}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(28,27,25,.06) 0%, rgba(28,27,25,.10) 34%, rgba(28,27,25,.55) 62%, rgba(28,27,25,.94) 100%);
}
.hero-content{position:relative; z-index:2; padding-block:64px clamp(56px,8vw,104px); width:100%;}
.hero-copy{width:min(520px,44vw); margin-left:auto;}
.hero-kicker{display:flex; align-items:center; gap:14px; margin-bottom:22px; opacity:0; animation:riseIn .9s var(--ease) .15s forwards;}
.hero-kicker .line{width:40px; height:1px; background:var(--champagne);}
.hero h1{max-width:14ch; opacity:0; animation:riseIn 1s var(--ease) .3s forwards;}
.hero .lede{margin-top:22px; color:var(--champagne); opacity:0; animation:riseIn 1s var(--ease) .5s forwards;}
.hero-meta{margin-top:10px; font-size:.92rem; color:#e3dbd1; opacity:0; animation:riseIn 1s var(--ease) .6s forwards;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:18px; margin-top:44px; opacity:0; animation:riseIn 1s var(--ease) .75s forwards;}

@keyframes riseIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}

/* 7. SECÇÕES / GRELHAS ------------------------------------------------ */

/* Universos */
.universes{display:grid; grid-template-columns:1fr 1fr;}
.universe{
  position:relative; min-height:74vh; display:flex; align-items:flex-end;
  padding:44px; overflow:hidden;
}
.universe .u-art{position:absolute; inset:0; z-index:0;}
.universe .u-art svg{width:100%; height:100%;}
.universe .u-art img{width:100%; height:100%; object-fit:cover; object-position:center center;}
.universe .u-art::after{content:''; position:absolute; inset:0;}
.universe.u-light .u-art::after{background:linear-gradient(90deg, rgba(240,236,229,.96) 0%, rgba(240,236,229,.86) 45%, rgba(240,236,229,.28) 100%);}
.universe.u-dark .u-art::after{background:linear-gradient(90deg, rgba(28,27,25,.92) 0%, rgba(28,27,25,.80) 48%, rgba(28,27,25,.32) 100%);}
.universe.u-light{background:var(--marfim); color:var(--carvao);}
.universe.u-dark{background:var(--carvao); color:var(--marfim);}
.universe-body{position:relative; z-index:2; max-width:420px;}
.universe .eyebrow{margin-bottom:14px;}
.universe p{margin-top:16px; margin-bottom:28px;}
.universe.u-dark .eyebrow{color:var(--champagne);}

/* Grelha de serviços editorial */
.service-groups{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,60px);}
.service-group h3{margin-bottom:6px;}
.service-group .divider{margin-block:14px 22px;}
.service-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-block:13px; border-bottom:1px solid rgba(140,128,114,.28);
}
.service-list li:first-child{padding-top:0;}
.service-name{font-family:var(--f-editorial); font-size:1.18rem;}
.service-note{font-size:.78rem; color:var(--taupe); text-align:right; max-width:22ch;}

/* Destaques de especialidade */
.specialty-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px);}
.specialty-card{
  position:relative; padding:clamp(32px,4vw,52px); background:var(--branco);
  border:1px solid rgba(140,128,114,.25);
}
.specialty-card .eyebrow{margin-bottom:12px;}
.specialty-card ul{margin-top:20px; display:flex; flex-wrap:wrap; gap:9px 10px;}
.specialty-card ul li{
  font-size:.74rem; letter-spacing:.03em; padding:7px 13px;
  border:1px solid var(--taupe); color:var(--taupe);
}
.specialty-card p{margin-top:16px;}
.specialty-card .btn-line{margin-top:26px;}

/* Barbearia */
.barber-intro{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:center;}
.barber-figure{aspect-ratio:4/5;}

/* Marco / Jane destaque dentro das secções */
.pro-strip{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,64px);
  align-items:center; padding:clamp(36px,5vw,64px); margin-top:clamp(48px,6vw,84px);
  border:1px solid rgba(240,236,229,.18);
}
.bg-dark .pro-strip{border-color:rgba(240,236,229,.18);}
.pro-strip .photo-placeholder{aspect-ratio:3/4;}
.pro-strip .role{font-size:.8rem; letter-spacing:.08em; color:var(--champagne); text-transform:none; margin-bottom:12px;}
.pro-strip .btn{margin-top:24px;}

/* Placeholders fotográficos — arte de linha própria, sem fingir realismo */
.photo-placeholder{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg, var(--taupe) 0%, var(--carvao) 100%);
  display:flex; align-items:center; justify-content:center;
}
.photo-placeholder svg{width:62%; height:62%; opacity:.85;}
.photo-placeholder.light{background:linear-gradient(155deg, var(--marfim) 0%, var(--champagne) 100%);}
.photo-placeholder .tag{
  position:absolute; right:10px; bottom:10px;
  font-size:.62rem; letter-spacing:.04em; color:var(--marfim);
  background:rgba(28,27,25,.55); padding:5px 9px;
}
.photo-placeholder.light .tag{color:var(--carvao); background:rgba(240,236,229,.75);}

/* Fotografia real / campanha */
.media-image{position:relative; overflow:hidden; background:var(--taupe);}
.media-image img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s var(--ease);}
.media-image:hover img{transform:scale(1.025);}
.media-caption{font-size:.72rem; letter-spacing:.05em; color:var(--taupe); margin-top:10px;}
.hair-feature{aspect-ratio:16/7; margin-bottom:clamp(42px,6vw,72px);}
.hair-feature img{object-position:center 45%;}
.specialty-card{padding:0; overflow:hidden;}
.specialty-media{aspect-ratio:16/10; overflow:hidden;}
.specialty-media img{width:100%; height:100%; object-fit:cover; display:block;}
.specialty-content{padding:clamp(30px,4vw,48px);}
.barber-figure.media-image img{object-position:58% center;}
.pro-strip .media-image{aspect-ratio:4/3;}
.pro-strip .media-image img{object-position:center 18%;}
.beauty-media-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:clamp(42px,6vw,72px);}
.beauty-media-grid .media-image{aspect-ratio:4/3;}
.beauty-media-grid img{object-position:center center;}
.person-card .media-image{aspect-ratio:3/4; margin-bottom:26px;}
.person-card .media-image img{object-position:56% 24%;}
.space-feature{display:grid; grid-template-columns:1.65fr .85fr; gap:14px; margin-top:clamp(36px,5vw,60px);}
.space-feature .media-image{min-height:430px;}
.space-feature .secondary{min-height:430px;}
.space-feature .secondary img{object-position:center center;}
.concept-note{font-size:.76rem; color:var(--taupe); margin-top:12px;}
.gallery-image{position:relative; overflow:hidden; background:var(--carvao);}
.gallery-image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s var(--ease), filter .65s var(--ease);}
.gallery-image:hover img{transform:scale(1.035); filter:saturate(1.03);}
.gallery-image figcaption{position:absolute; left:14px; bottom:14px; padding:7px 10px; background:rgba(28,27,25,.68); color:var(--marfim); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(3px);}

/* Jane & Marco */
.people-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);}
.person-card .photo-placeholder{aspect-ratio:3/4; margin-bottom:26px;}
.person-card .role{color:var(--taupe); font-size:.85rem; letter-spacing:.05em; margin-top:4px;}
.person-card p{margin-top:18px;}
.person-card ul{margin-top:16px;}
.person-card ul li{
  padding-block:8px; border-top:1px solid rgba(140,128,114,.25);
  font-size:.92rem; color:var(--taupe);
}

/* O Espaço */
.space-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(36px,5vw,60px);}
.space-strip .photo-placeholder{aspect-ratio:3/4;}
.space-strip .photo-placeholder:nth-child(2){aspect-ratio:3/4;}

/* Galeria — mosaico editorial, não grelha uniforme */
.gallery-mosaic{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:120px;
  gap:12px;
  margin-top:clamp(36px,5vw,60px);
}
.gallery-mosaic .g-item{grid-column:span 2; grid-row:span 2;}
.gallery-mosaic .g-item.big{grid-column:span 3; grid-row:span 3;}
.gallery-mosaic .g-item.wide{grid-column:span 3; grid-row:span 2;}
.gallery-mosaic .g-item.tall{grid-column:span 2; grid-row:span 3;}
.gallery-mosaic .photo-placeholder{width:100%; height:100%;}
.gallery-cats{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:22px;}
.gallery-cats span{
  font-size:.74rem; letter-spacing:.04em; color:var(--taupe);
  border:1px solid rgba(140,128,114,.4); padding:6px 12px;
}

/* Confiança / Avaliações — discreto, sem inventar */
.trust-note{
  border:1px solid rgba(140,128,114,.3); padding:clamp(28px,4vw,44px);
  max-width:640px;
}
.trust-note .eyebrow{margin-bottom:10px;}

/* Trabalhe connosco */
.careers-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,84px); align-items:stretch;
}
.careers-copy{display:flex; flex-direction:column; justify-content:center;}
.careers-copy p{margin-top:18px;}
.career-tags{display:flex; flex-wrap:wrap; gap:9px 10px; margin-top:28px;}
.career-tags span{
  font-size:.72rem; letter-spacing:.055em; text-transform:uppercase;
  border:1px solid rgba(140,128,114,.45); color:var(--taupe); padding:8px 12px;
}
.careers-card{
  background:var(--carvao); color:var(--marfim); padding:clamp(32px,4.5vw,54px);
  display:flex; flex-direction:column; justify-content:center; min-height:100%;
}
.careers-card .eyebrow{color:var(--champagne);}
.careers-card p{color:#d8d0c7; margin-top:16px;}
.careers-card .email-display{
  font-family:var(--f-editorial); font-size:clamp(1.25rem,2.1vw,1.65rem);
  line-height:1.25; margin-top:24px; color:var(--champagne); overflow-wrap:anywhere;
}
.careers-card .btn{margin-top:28px; align-self:flex-start;}

/* Contacto */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start;}
.contact-list{margin-top:28px;}
.contact-list .row{
  display:flex; justify-content:space-between; gap:20px; padding-block:16px;
  border-bottom:1px solid rgba(240,236,229,.16);
}
.contact-list .row .label{color:var(--taupe); font-size:.78rem; letter-spacing:.07em;}
.contact-list .row .value{font-family:var(--f-editorial); font-size:1.15rem; text-align:right;}
.contact-actions{display:flex; flex-direction:column; gap:14px; margin-top:36px;}
.contact-actions .btn{justify-content:center; width:100%;}
.hours-card{border:1px solid rgba(240,236,229,.18); padding:clamp(28px,4vw,40px);}
.hours-card .row{display:flex; justify-content:space-between; padding-block:12px; border-bottom:1px solid rgba(240,236,229,.14); font-size:.95rem;}
.hours-card .row:last-child{border-bottom:none;}

/* 9. FOOTER --------------------------------------------------------- */
.site-footer{background:var(--carvao); color:var(--marfim); padding-block:clamp(56px,7vw,88px) 28px;}
.footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(30px,5vw,50px);
  padding-bottom:clamp(40px,6vw,64px); border-bottom:1px solid rgba(240,236,229,.14);
}
.footer-brand p{margin-top:18px; color:#cfc6bb; font-size:.9rem; max-width:32ch;}
.footer-col h4{font-family:var(--f-funcional); font-weight:500; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:18px; color:var(--champagne);}
.footer-col li{padding-block:6px;}
.footer-col a{color:#cfc6bb; font-size:.92rem; transition:color var(--ease) .25s;}
.footer-col a:hover{color:var(--champagne);}
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-top:26px; font-size:.78rem; color:var(--taupe);
}
.footer-bottom .legal{display:flex; gap:22px; flex-wrap:wrap;}

/* 10. RESPONSIVIDADE --------------------------------------------------- */
@media (max-width:980px){
  .service-groups, .universes, .specialty-grid, .barber-intro, .people-grid, .contact-grid, .careers-grid{grid-template-columns:1fr;}
  .universe{min-height:56vh;}
  .pro-strip{grid-template-columns:1fr;}
  .pro-strip .photo-placeholder{aspect-ratio:16/9;}
  .hero-copy{width:min(520px,52vw);}
  .beauty-media-grid{grid-template-columns:1fr 1fr;}
  .beauty-media-grid .media-image:last-child{grid-column:1/-1; aspect-ratio:16/7;}
  .space-feature{grid-template-columns:1fr;}
  .space-feature .media-image, .space-feature .secondary{min-height:360px;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .main-nav{
    position:fixed; inset:0; z-index:105; background:var(--carvao);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:120px var(--gutter) 60px; gap:26px;
    transform:translateX(100%); transition:transform var(--ease) .45s;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{font-size:1.5rem; font-family:var(--f-editorial);}
  .nav-toggle{display:block;}
  .nav-cta .btn-ghost{display:none;}
  .gallery-mosaic{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .gallery-mosaic .g-item, .gallery-mosaic .g-item.big, .gallery-mosaic .g-item.wide, .gallery-mosaic .g-item.tall{grid-column:span 1; grid-row:span 2;}
  .space-strip{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr;}
  .hero{min-height:auto; padding-top:88px; display:block; background:var(--carvao);}
  .hero-photo{position:relative; height:56vh; min-height:440px;}
  .hero-photo img{object-position:32% center;}
  .hero::after{background:linear-gradient(180deg, rgba(28,27,25,0) 0%, rgba(28,27,25,.12) 44%, rgba(28,27,25,.98) 70%);}
  .hero-content{margin-top:-120px; padding-bottom:72px;}
  .hero-copy{width:100%; margin-left:0;}
  .beauty-media-grid{grid-template-columns:1fr;}
  .beauty-media-grid .media-image, .beauty-media-grid .media-image:last-child{grid-column:auto; aspect-ratio:16/10;}
  .contact-list .row{flex-direction:column; gap:4px;}
  .contact-list .row .value{text-align:left;}
}
@media (max-width:480px){
  .hero-ctas .btn{width:100%; justify-content:center;}
}


/* ============================================================
   JEM — Netlify responsive refinement (2026-09)
   ============================================================ */
html{scroll-padding-top:92px;}
body{min-width:0;}
.wrap{width:min(100%, var(--container));}
.skip-link{position:fixed;left:16px;top:-80px;z-index:999;background:var(--champagne);color:var(--carvao);padding:10px 16px;font-weight:500;transition:top .2s;}
.skip-link:focus{top:16px;}

/* Header: deliberately stable and readable on every background. */
.site-header{position:sticky;top:0;background:rgba(28,27,25,.98);padding-block:13px;box-shadow:0 8px 24px rgba(0,0,0,.12);backdrop-filter:blur(10px);}
.site-header.scrolled{padding-block:11px;background:rgba(28,27,25,.985);}
.site-header .wrap{max-width:1380px;}
.site-header .logo-mark{width:106px;}
.main-nav{gap:clamp(10px,1.25vw,20px);}
.main-nav a{font-size:.69rem;letter-spacing:.068em;}
.nav-cta{margin-left:auto;}

/* HERO — no founders: two independent clients, clear salon context. */
.hero{min-height:calc(100svh - 76px);padding-top:0;display:grid;grid-template-columns:minmax(0,58%) minmax(390px,42%);align-items:stretch;background:var(--marfim);color:var(--carvao);overflow:hidden;}
.hero::after{content:none;}
.hero-media{position:relative;min-height:650px;background:var(--carvao);overflow:hidden;}
.hero-media picture,.hero-media img{width:100%;height:100%;display:block;}
.hero-media img{object-fit:cover;object-position:48% center;}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,27,25,.10),transparent 38%,rgba(28,27,25,.06));pointer-events:none;}
.hero-panel{position:relative;display:flex;align-items:center;background:linear-gradient(145deg,#f4f0e9 0%,var(--marfim) 55%,#e9dfd3 100%);overflow:hidden;}
.hero-panel::after{content:'';position:absolute;width:380px;height:380px;border:1px solid rgba(140,128,114,.18);border-radius:50%;right:-190px;bottom:-210px;box-shadow:0 0 0 54px rgba(140,128,114,.045);pointer-events:none;}
.hero-content{position:relative;z-index:2;width:100%;padding:clamp(54px,7vw,104px) clamp(38px,5.2vw,82px);}
.hero-copy{width:100%;max-width:560px;margin:0;}
.hero-kicker{opacity:1;animation:none;color:var(--taupe);}
.hero-kicker .line{background:var(--taupe);}
.hero h1{opacity:1;animation:none;color:var(--carvao);font-size:clamp(3.5rem,5.2vw,6rem);max-width:10ch;}
.hero .lede{opacity:1;animation:none;color:#7e6650;margin-top:22px;}
.hero-meta{opacity:1;animation:none;color:#585048;margin-top:14px;font-size:.96rem;}
.hero-ctas{opacity:1;animation:none;margin-top:36px;gap:12px;}
.hero .btn-solid{background:var(--carvao);border-color:var(--carvao);color:var(--marfim);}
.hero .btn-solid:hover{background:transparent;color:var(--carvao);}
.hero .btn-ghost{color:var(--carvao);border-color:rgba(28,27,25,.58);}
.hero .btn-ghost:hover{background:var(--carvao);color:var(--marfim);}
.hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(140,128,114,.28);}
.hero-proof div{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe);line-height:1.45;}
.hero-proof strong{display:block;color:var(--carvao);font-size:.72rem;font-weight:500;margin-bottom:3px;}

/* Value strip replaces invented testimonial placeholder. */
.values-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(140,128,114,.22);border:1px solid rgba(140,128,114,.22);}
.value-card{background:var(--marfim);padding:clamp(30px,4vw,48px);}
.value-card .num{font-family:var(--f-editorial);font-size:2.2rem;color:var(--champagne);line-height:1;}
.value-card h3{margin-top:18px;}
.value-card p{margin-top:10px;color:var(--taupe);font-size:.92rem;}

/* Remove fixed three-column inline behavior from barber service block. */
.barber-services{grid-template-columns:repeat(3,1fr)!important;}

/* Better image crops */
#jane-marco .person-card:first-child .media-image img{object-position:center 28%;}
#jane-marco .person-card:last-child .media-image img{object-position:55% 22%;}

/* Legal pages */
.legal-page{padding-block:80px 110px;}
.legal-page .wrap{max-width:900px;}
.legal-page h1{font-size:clamp(2.5rem,5vw,4.5rem);}
.legal-page h2{font-size:1.8rem;margin-top:42px;}
.legal-page p,.legal-page li{margin-top:14px;color:#5f574f;}
.legal-page ul{list-style:disc;padding-left:22px;}

/* Responsive breakpoints */
@media (max-width:1180px){
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(430px,88vw);z-index:105;background:var(--carvao);flex-direction:column;justify-content:center;align-items:flex-start;padding:110px clamp(32px,8vw,58px) 60px;gap:22px;transform:translateX(105%);transition:transform var(--ease) .4s;box-shadow:-18px 0 45px rgba(0,0,0,.28);}
  .main-nav.open{transform:translateX(0);}
  .main-nav a{font-size:1.42rem;font-family:var(--f-editorial);text-transform:none;letter-spacing:.02em;}
  .nav-toggle{display:block;}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-media{min-height:0;height:auto;aspect-ratio:16/10;}
  .hero-media img{object-position:48% 30%;}
  .hero-panel{min-height:520px;}
  .hero-content{padding:clamp(48px,8vw,74px) var(--gutter);}
  .hero-copy{max-width:700px;margin:0 auto;}
  .hero h1{font-size:clamp(3.2rem,9vw,5.2rem);max-width:12ch;}
  .hero-proof{max-width:650px;}
  .barber-services{grid-template-columns:1fr 1fr!important;}
  .values-strip{grid-template-columns:1fr;gap:0;}
  .value-card{border-bottom:1px solid rgba(140,128,114,.22);}
  .value-card:last-child{border-bottom:0;}
}
@media (max-width:760px){
  :root{--gutter:22px;}
  html{scroll-padding-top:76px;}
  .site-header{padding-block:10px;}
  .site-header .logo-mark{width:96px;}
  .hero-media{aspect-ratio:5/4;min-height:360px;}
  .hero-media img{object-position:50% 32%;}
  .hero-panel{min-height:auto;}
  .hero-content{padding:46px var(--gutter) 54px;margin-top:0;}
  .hero h1{font-size:clamp(3rem,15vw,4.25rem);}
  .hero .lede{font-size:1.18rem;}
  .hero-meta{font-size:.92rem;}
  .hero-ctas{display:grid;grid-template-columns:1fr;}
  .hero-ctas .btn{width:100%;justify-content:center;}
  .hero-proof{grid-template-columns:1fr;gap:12px;margin-top:32px;}
  .hero-proof div{padding-bottom:10px;border-bottom:1px solid rgba(140,128,114,.2);}
  .hero-proof div:last-child{border-bottom:0;}
  .section-pad{padding-block:72px;}
  .section-head{margin-bottom:34px;}
  .service-groups{gap:46px;}
  .barber-services{grid-template-columns:1fr!important;}
  .specialty-card{border-radius:0;}
  .pro-strip{padding:24px;}
  .pro-strip .media-image{aspect-ratio:4/3;}
  .person-card .media-image{aspect-ratio:4/5;}
  .gallery-mosaic{grid-template-columns:1fr;grid-auto-rows:auto;}
  .gallery-mosaic .g-item,.gallery-mosaic .g-item.big,.gallery-mosaic .g-item.wide,.gallery-mosaic .g-item.tall{grid-column:1;grid-row:auto;aspect-ratio:4/3;}
  .gallery-mosaic .g-item.big{aspect-ratio:4/5;}
  .gallery-image img{position:absolute;inset:0;}
  .space-strip{grid-template-columns:1fr;}
  .space-feature .media-image,.space-feature .secondary{min-height:0;aspect-ratio:4/3;}
  .careers-card{padding:32px 24px;}
  .contact-actions .btn{min-height:52px;}
  .footer-top{gap:36px;}
}
@media (max-width:480px){
  .hero-media{aspect-ratio:4/3;min-height:300px;}
  .hero-media img{object-position:47% 25%;}
  .hero-kicker .line{width:24px;}
  .hero-kicker .eyebrow{font-size:.69rem;letter-spacing:.10em;}
  .btn{padding:15px 20px;}
  .service-name{font-size:1.1rem;}
  .beauty-media-grid .media-image,.beauty-media-grid .media-image:last-child{aspect-ratio:4/3;}
  .gallery-cats{gap:8px;}
  .footer-bottom{display:block;}
  .footer-bottom .legal{margin-top:12px;}
}

.media-image picture{display:block;width:100%;height:100%;}
.media-image picture img{width:100%;height:100%;object-fit:cover;}

/* ============================================================
   JEM — correções cirúrgicas finais (menu mobile + galeria Marco)
   ============================================================ */
body.menu-open{overflow:hidden;touch-action:none;}
body.menu-open .site-header{background:rgba(28,27,25,.995);box-shadow:0 8px 24px rgba(0,0,0,.22);}
.gallery-marco img{object-position:center 30%;}

@media (max-width:1180px){
  .site-header{z-index:320;}
  .nav-toggle{display:block;z-index:340;}
  .main-nav{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    min-height:100dvh;
    z-index:330;
    background:rgba(28,27,25,.995);
    box-shadow:none;
    padding:106px clamp(26px,7vw,42px) max(34px, env(safe-area-inset-bottom));
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:18px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--ease) .28s, visibility 0s linear .28s;
  }
  .main-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity var(--ease) .28s;
  }
  .main-nav a{
    font-size:clamp(1.9rem,7.2vw,2.35rem);
    line-height:1.12;
    padding-block:4px;
    max-width:calc(100% - 60px);
  }
}

@media (max-width:760px){
  .main-nav{padding:94px 26px max(30px, env(safe-area-inset-bottom));gap:16px;}
  .main-nav a{font-size:clamp(1.65rem,6.8vw,2.1rem);max-width:calc(100% - 48px);}
}


/* JEM 2026-11-03 | fotografias reais do salão e comunicação de promoções */
.jem-local-note{max-width:860px;margin:20px auto 0;color:var(--taupe);font-size:.92rem;line-height:1.7;text-align:center;}
.jem-real-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px;}
.jem-area{margin:0;position:relative;overflow:hidden;border-radius:8px;background:#e5ddd4;aspect-ratio:4/3;}
.jem-area img{display:block;width:100%;height:100%;object-fit:cover;}
.jem-area figcaption{position:absolute;bottom:0;left:0;right:0;padding:26px 14px 11px;background:linear-gradient(transparent,rgba(0,0,0,.68));font-size:.86rem;letter-spacing:.04em;color:#fff;}
.jem-promo-teaser{background:var(--carvao);color:var(--marfim);padding:clamp(36px,5vw,64px) 0;}
.jem-promo-teaser-inner{display:flex;justify-content:space-between;align-items:center;gap:38px;}
.jem-promo-teaser h2{margin:12px 0 10px;color:var(--marfim);font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.3vw,3rem);font-weight:500;}
.jem-promo-teaser .eyebrow{color:var(--champagne);}
.jem-promo-teaser p:not(.eyebrow){color:#e6dbcf;max-width:760px;line-height:1.75;}
.jem-promo-teaser .btn{flex-shrink:0;}
@media(max-width:960px){.jem-real-areas{grid-template-columns:repeat(2,minmax(0,1fr));}.jem-promo-teaser-inner{align-items:flex-start;flex-direction:column;gap:24px;}}
@media(max-width:480px){.jem-real-areas{gap:9px}.jem-area figcaption{font-size:.73rem;padding:18px 9px 8px;}}


/* Revisão 04 — fotografias aprovadas, campanha e avaliações (03/11/2026) */
.beauty-media-grid.jem-beauty-approved { grid-template-columns: repeat(2, minmax(0,1fr)); }
.beauty-media-grid.jem-beauty-approved .media-image:last-child { grid-column:auto; aspect-ratio:4/3; }
.beauty-media-grid.jem-beauty-approved .media-image img { object-position:center 45%; }
.jem-beauty-approved .media-image:nth-child(2) img { object-position:center center; }
.jem-cachos-portrait { background:#e5ddd2; }
.jem-cachos-portrait img { object-fit:contain; object-position:center center; }
.jem-cachos-gallery { background:#e5ddd2; }
.jem-cachos-gallery img { object-fit:contain !important; object-position:center center; }
.jem-promo-teaser-inner{display:grid;grid-template-columns:minmax(190px,25%) minmax(0,1fr) auto;gap:clamp(18px,3vw,38px);}
.jem-promo-campaign-photo{margin:0;align-self:stretch;min-height:185px;overflow:hidden;border-radius:5px;}
.jem-promo-campaign-photo img{width:100%;height:100%;min-height:185px;object-fit:cover;object-position:50% 36%;display:block;}
.jem-promo-campaign-text h2{max-width:700px;}
.jem-stars,.jem-review-stars{color:#a7804a;letter-spacing:.08em;font-size:1.38rem;line-height:1.6}
.jem-stars strong{color:#25231f;letter-spacing:0;margin-left:8px;font-size:1.08rem}
.jem-stars span{font-size:.82rem;letter-spacing:0;color:#60574d}
.jem-review-hero-stars{margin:0 auto 8px !important;font-size:1.8rem;}
.jem-testimonials{padding:clamp(55px,7vw,90px) 0;background:#f7f3ee;}
.jem-testimonial-intro{max-width:700px;margin-bottom:32px;}
.jem-testimonial-intro h2{margin-top:10px;}
.jem-testimonial-intro .jem-review-score{display:flex;gap:12px;align-items:center;}
.jem-review-score strong{font-size:1.3rem;font-weight:500;}
.jem-testimonial-intro p{line-height:1.6;}
.jem-testimonial-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;}
.jem-testimonial-card{margin:0;background:#fff;border:1px solid #e4d9cc;padding:clamp(18px,2vw,27px);min-height:225px;display:flex;flex-direction:column;}
.jem-testimonial-card p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.28rem,1.75vw,1.65rem);line-height:1.25;flex:1;margin:12px 0 24px;}
.jem-testimonial-card footer{display:flex;flex-direction:column;gap:5px;}
.jem-testimonial-card footer strong{font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:500;}
.jem-testimonial-card footer small{font-size:.66rem;color:#70675e;}
.jem-testimonials .jem-quiet-note{margin-top:22px;line-height:1.6}
.jem-footer-social{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding:23px 0;border-top:1px solid rgba(255,255,255,.16);}
.jem-footer-social span{font-size:.67rem;letter-spacing:.13em;color:#cfb79a;margin-right:auto;}
.jem-footer-social a,.jem-simple-social a{font-size:.81rem;color:#e0c19d;text-decoration:underline;text-underline-offset:4px;}
.jem-simple-social{margin:0 auto 20px !important;}
@media(max-width:960px){.jem-promo-teaser-inner{grid-template-columns:190px 1fr;}.jem-promo-teaser-inner>.btn{grid-column:2;justify-self:start;}.jem-testimonial-cards{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.jem-promo-teaser-inner{grid-template-columns:1fr;gap:20px}.jem-promo-campaign-photo{height:230px;max-width:none}.jem-promo-teaser-inner>.btn{grid-column:auto}.jem-testimonial-cards{grid-template-columns:1fr}.jem-testimonial-card{min-height:160px}.beauty-media-grid.jem-beauty-approved{grid-template-columns:1fr}.beauty-media-grid.jem-beauty-approved .media-image:last-child{grid-column:auto}.jem-footer-social{align-items:flex-start;flex-direction:column}}