/* ============================================================
   Design System — Marcello Cruz Coiffeur v4
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --clr-bg:#f9f9f9;--clr-surface:#fff;--clr-on-bg:#1a1c1c;
  --clr-on-surface-var:#4c4546;--clr-outline:#7e7576;--clr-outline-var:#cfc4c5;
  --clr-primary:#000;--clr-on-primary:#fff;--clr-secondary:#5e5e5d;--clr-wa:#25D366;
  --font-serif:'Noto Serif',Georgia,serif;--font-sans:'Manrope',system-ui,sans-serif;
  --section-gap:clamp(5rem,10vw,8rem);--container-max:1440px;
  --gutter:24px;--margin-edge:64px;
  --radius-sm:.25rem;--radius:.5rem;--radius-full:9999px;
  --ease:cubic-bezier(.4,0,.2,1);--dur:400ms;
}
html{font-size:16px}
body{background:var(--clr-bg);color:var(--clr-on-bg);font-family:var(--font-sans);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}

/* Smooth Wrapper (agora apenas agrupamento) */
#smooth-wrapper{width:100%;overflow:hidden}
#smooth-content{width:100%}

/* Utilities */
.container{width:min(calc(100% - var(--margin-edge)*2),var(--container-max));margin-inline:auto}
.eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--clr-outline);margin-bottom:1rem}
.section-header{text-align:center;margin-bottom:clamp(3rem,6vw,5rem)}
em{font-style:italic;color:var(--clr-secondary)}

/* Typography */
h1,h2,h3{font-family:var(--font-serif);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--clr-on-bg)}
h1{font-size:clamp(2.8rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.5vw,3rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}

/* Split words */
.word{display:inline-block}

/* Button */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:var(--clr-primary);color:var(--clr-on-primary);font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--clr-primary);border-radius:var(--radius);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover{background:transparent;color:var(--clr-primary);transform:translateY(-2px)}
.btn--lg{padding:1.1rem 2.5rem}
.btn--sm{padding:.6rem 1.2rem;font-size:11px}

/* WhatsApp Float */
.whatsapp-float{position:fixed;bottom:28px;right:24px;z-index:9999;display:flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;background:var(--clr-wa);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;border-radius:var(--radius-full);box-shadow:0 4px 20px rgba(37,211,102,.25);transition:transform var(--dur) var(--ease);animation:pulse-wa 2s infinite;will-change:transform,box-shadow}
.whatsapp-float:hover{transform:translateY(-3px)}
.whatsapp-float svg{width:1.1rem;height:1.1rem;flex-shrink:0}
@keyframes pulse-wa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.4)}70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}


/* NAV BASE (Transparente no topo) */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 1.25rem 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

/* NAV SCROLLED STATE (Translúcido + Blur + Barra Escura) */
.nav.scrolled {
  background: rgba(15, 15, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: .875rem 0;
}

.nav__inner {
  width: min(calc(100% - var(--margin-edge)*2), var(--container-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--clr-on-bg); /* Escura no topo (lado esquerdo claro) */
  transition: color var(--dur) var(--ease);
}

.nav__logo span {
  color: var(--clr-outline);
}

.nav.scrolled .nav__logo {
  color: #fff; /* Branca ao rolar */
}

/* HERO */
.hero{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.hero__text{display:flex;flex-direction:column;justify-content:center;padding:calc(4rem + 80px) var(--margin-edge) 4rem;background:var(--clr-bg)}
.hero__eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--clr-outline);margin-bottom:1.5rem}
.hero__title{margin-bottom:1.5rem;max-width:560px}
.hero__subtitle{font-size:17px;color:var(--clr-on-surface-var);margin-bottom:2.5rem;max-width:400px;line-height:1.65}
.hero__cta-note{margin-top:.75rem;font-size:11px;letter-spacing:.12em;color:var(--clr-outline);text-transform:uppercase}
.hero__image{position:relative;overflow:hidden}
.hero__image picture{display:block;width:100%;height:100%}
.hero__img{width:100%;height:100%;object-fit:cover}

/* AGENCY SECTIONS */
.services-full{background:var(--clr-bg);padding-block:var(--section-gap)}
.services-full__header{margin-bottom:clamp(3rem,6vw,5rem)}
.agency-section{display:grid;grid-template-columns:1fr 1fr;min-height:70vh;border-top:1px solid var(--clr-outline-var)}
.agency-section .image-wrap{position:relative;overflow:hidden}
.agency-section .image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.agency-section:hover .image-wrap img{transform:scale(1.03)}
.agency-section .text-block{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4rem);background:var(--clr-bg)}
.agency-section.reverse .image-wrap{order:2}
.agency-section.reverse .text-block{order:1;background:var(--clr-surface)}
.service-num{font-family:var(--font-serif);font-size:3.5rem;font-weight:400;color:var(--clr-outline-var);line-height:1;display:block;margin-bottom:1rem}
.agency-section .text-block h3{margin-bottom:1rem;font-size:clamp(1.5rem,3vw,2.2rem)}
.agency-section .text-block p{font-size:16px;color:var(--clr-on-surface-var);line-height:1.75;margin-bottom:1.75rem;max-width:420px}
.service-link{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.35rem;transition:gap var(--dur) var(--ease)}
.agency-section:hover .service-link{gap:.65rem}

/* HORIZONTAL SCROLL */
.horizontal-section{background:var(--clr-surface);border-top:1px solid var(--clr-outline-var);padding-top:var(--section-gap);overflow:hidden}
.horizontal-section__header{margin-bottom:clamp(2.5rem,5vw,4rem)}
.horizontal-wrapper{display:flex;width:max-content;will-change:transform}
.horizontal-panel{width:100vw;min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 clamp(1.5rem,5vw,5rem) 4rem;position:relative;flex-shrink:0}
.h-panel-counter{position:absolute;bottom:1.75rem;right:2.5rem;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--clr-outline);opacity:.4}
.h-card{width:100%;max-width:900px;border:1px solid var(--clr-outline-var);border-radius:var(--radius);overflow:hidden}
.h-card:hover{border-color:var(--clr-outline)}
.h-card__images{display:grid;grid-template-columns:1fr 1fr;height:460px}
.h-card__img-wrap{position:relative;overflow:hidden}
.h-card__img-wrap img{transition:transform 600ms var(--ease)}
.h-card:hover .h-card__img-wrap img{transform:scale(1.04)}
.h-card__label{position:absolute;top:.75rem;left:.75rem;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:rgba(249,249,249,.9);color:var(--clr-outline);padding:.2rem .55rem;border-radius:var(--radius-sm);backdrop-filter:blur(4px)}
.h-card__label--after{background:rgba(26,28,28,.85);color:#fff}
.h-card figcaption{padding:1rem 1.5rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--clr-on-surface-var);border-top:1px solid var(--clr-outline-var)}
.horizontal-section__cta{text-align:center;padding:clamp(3rem,5vw,4rem) 0}

/* TESTIMONIALS */
.testimonials{padding-block:var(--section-gap);background:var(--clr-bg)}
.testimonials__header{text-align:center;margin-bottom:clamp(3rem,5vw,4rem)}
.testimonials__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gutter)}
.testimonial-card{background:var(--clr-surface);padding:2rem;border:1px solid var(--clr-outline-var);border-radius:var(--radius)}
.testimonial__stars{color:var(--clr-on-bg);font-size:1.1rem;letter-spacing:2px;margin-bottom:1rem}
.testimonial__text{font-size:15px;line-height:1.6;color:var(--clr-on-surface-var);margin-bottom:1.5rem;font-style:italic}
.testimonial__author{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--clr-on-bg)}

/* MASK SECTION */
.mask-section{background:var(--clr-surface);border-top:1px solid var(--clr-outline-var);border-bottom:1px solid var(--clr-outline-var)}
.authority__inner{display:grid;gap:clamp(3rem,6vw,6rem);align-items:start;padding-block:var(--section-gap)}
.authority__media{position:relative}
.mask-wrapper{overflow:hidden}
.mask-wrapper .reveal{will-change:transform}
.mask-wrapper .reveal img{aspect-ratio:3/4;object-fit:cover;border:1px solid var(--clr-outline-var)}
.authority__badge{position:absolute;bottom:-1.5rem;right:-1.5rem;background:var(--clr-primary);color:var(--clr-on-primary);width:110px;height:110px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem}
.authority__badge strong{font-family:var(--font-serif);font-size:1.8rem;font-weight:400;line-height:1}
.authority__badge span{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;margin-top:.2rem}
.mask-title{margin-bottom:1.25rem;line-height:1.15}
.authority__text{color:var(--clr-on-surface-var);font-size:15px;margin-bottom:1rem;line-height:1.75}
.authority__text strong{color:var(--clr-on-bg);font-weight:600}
.authority__formations{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.25rem 1.5rem}
.authority__formation-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border:1px solid var(--clr-outline-var);border-radius:var(--radius-sm);color:var(--clr-outline);background:var(--clr-bg)}
.authority__list{list-style:none;margin-block:1.25rem 2rem}
.authority__list li{font-size:15px;color:var(--clr-on-surface-var);padding:.45rem 0;border-bottom:1px solid var(--clr-outline-var)}
.authority__content .eyebrow{margin-bottom:.75rem}

/* PROCESS */
.process{padding-block:var(--section-gap);background:var(--clr-bg)}
.process__steps{display:grid;gap:0}
.process__step{padding:2.5rem 2rem;border:1px solid var(--clr-outline-var);margin:-1px -1px 0 0;display:flex;gap:1.5rem;transition:background var(--dur) var(--ease)}
.process__step:hover{background:var(--clr-surface)}
.process__icon{font-family:var(--font-serif);font-size:3rem;font-weight:400;color:var(--clr-outline-var);line-height:1;flex-shrink:0;width:3rem}
.process__body h3{font-size:1.15rem;margin-bottom:.5rem}
.process__body p{font-size:15px;color:var(--clr-on-surface-var);line-height:1.65}

/* CTA FINAL */
.cta-final{padding-block:var(--section-gap);background:var(--clr-primary);position:relative;overflow:hidden}
.cta-final__bg{position:absolute;inset:0;overflow:hidden}
.cta-final__bg img{width:100%;height:120%;object-fit:cover;opacity:.2;will-change:transform}
.cta-final__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.48) 100%)}
.cta-final__content{position:relative;z-index:2;text-align:center;max-width:680px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.cta-final__content .eyebrow{color:rgba(255,255,255,.45);margin-bottom:.5rem}
.cta-final__content h2{color:#fff;margin-bottom:1.5rem}
.cta-final__content h2 .word{color:#fff}
.cta-final__sub{font-size:15px;color:rgba(255,255,255,.55);margin-bottom:2.5rem}
.cta-final .btn{background:#fff;color:#000;border-color:#fff}
.cta-final .btn:hover{background:transparent;color:#fff}
.cta-final__disclaimer{margin-top:1.25rem;font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase}

/* FOOTER */
.footer{padding-block:2.5rem;border-top:1px solid var(--clr-outline-var);background:var(--clr-bg)}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.footer__logo{font-family:var(--font-serif);font-size:1.2rem;font-weight:400;margin-bottom:.5rem}
.footer__logo span{color:var(--clr-outline)}
.footer__copy{font-size:11px;color:var(--clr-outline);letter-spacing:.05em}
.footer__info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin-bottom:.75rem}
.footer__address,.footer__phone,.footer__hours,.footer__wa,.footer__instagram{display:flex;align-items:center;gap:.4rem;font-size:12px;color:var(--clr-outline);letter-spacing:.04em}
.footer__phone,.footer__wa,.footer__instagram{color:var(--clr-on-bg);font-weight:500;transition:color var(--dur) var(--ease)}
.footer__phone:hover,.footer__wa:hover,.footer__instagram:hover{color:var(--clr-secondary)}
.footer__phone svg{color:var(--clr-outline);flex-shrink:0}
.footer__address svg,.footer__hours svg{color:var(--clr-outline);flex-shrink:0}
.footer__wa svg{color:#25D366;flex-shrink:0}
.footer__instagram{display:flex;align-items:center;gap:.4rem;font-size:12px;color:var(--clr-on-bg);font-weight:500;letter-spacing:.04em;transition:color var(--dur) var(--ease)}
.footer__instagram:hover{color:var(--clr-secondary)}
.footer__instagram svg{color:var(--clr-outline);flex-shrink:0}
.footer__map{width:100%;max-width:600px;margin:1.5rem 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.footer__map iframe{width:100%;height:240px;border-radius:8px;pointer-events:none}
.map-link{font-size:12px;color:var(--clr-outline);text-decoration:underline;transition:color var(--dur) var(--ease)}
.map-link:hover{color:var(--clr-on-bg)}

/* Responsive */
@media(min-width:768px){
  .process__steps{grid-template-columns:repeat(2,1fr)}
  .authority__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .agency-section{grid-template-columns:1fr;min-height:auto}
  .agency-section.reverse .image-wrap,.agency-section.reverse .text-block{order:unset}
  .agency-section .image-wrap{height:55vw;min-height:240px}
  .h-card__images{height:280px}
}
@media(min-width:1024px){
  .footer__map iframe{height:300px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .hero__text{padding:calc(4rem + 80px) 1.5rem 3rem;order:2}
  .hero__image{order:1;height:55vw;min-height:280px;max-height:500px}
}
@media(max-width:480px){
  :root{--section-gap:5rem;--margin-edge:24px}
  .nav__inner,.container{width:calc(100% - 2rem)}
  .whatsapp-float span{display:none}
  .whatsapp-float{padding:.9rem;border-radius:50%}
  .whatsapp-float svg{width:1.4rem;height:1.4rem}
  .authority__badge{bottom:-1rem;right:-.5rem;width:90px;height:90px}
  .h-card__images{height:200px}
}

/* ============================================================
   SECTIONS EXPANSION (Local SEO, FAQ, Before/After & Blog)
============================================================ */

/* Accessible Header Navigation & Drawer */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}

.nav__links a {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff; /* Branca no topo (fica sobre a imagem escura da direita) */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* Sombra suave para contraste em áreas claras */
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  position: relative;
  padding-block: 4px;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: #fff;
  opacity: 1;
  outline: none;
}

/* Links ao rolar a página */
.nav.scrolled .nav__links a:not(.btn) {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: none;
}
.nav.scrolled .nav__links a:not(.btn):hover,
.nav.scrolled .nav__links a:not(.btn):focus-visible {
  color: #fff;
}

/* Indicador de Link Ativo (Linha inferior elegante) */
.nav__links a.nav__link--active {
  color: #fff !important;
  opacity: 1 !important;
}
.nav__links a.nav__link--active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: background-color var(--dur) var(--ease);
}

/* Botão "Agendar" na Nav */
.nav__links .btn {
  background: #1a1c1c; /* Sólido preto no topo */
  color: #fff !important;
  border: 1px solid #1a1c1c;
  padding: .65rem 1.4rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  border-radius: var(--radius);
  text-shadow: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.nav__links .btn:hover,
.nav__links .btn:focus-visible {
  background: transparent;
  color: #1a1c1c !important;
  border-color: #1a1c1c;
  transform: translateY(-2px);
}

/* Botão "Agendar" ao rolar a página (Sólido branco com texto preto) */
.nav.scrolled .nav__links .btn {
  background: #fff;
  color: #000 !important;
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav.scrolled .nav__links .btn:hover,
.nav.scrolled .nav__links .btn:focus-visible {
  background: transparent;
  color: #fff !important;
  border-color: #fff;
  transform: translateY(-2px);
}

.nav__links .btn::after {
  display: none !important; /* Sem linha abaixo do botão ativo */
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  z-index: 1000;
}
.nav__toggle:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}
.nav__toggle-box {
  width: 24px;
  height: 18px;
  display: inline-block;
  position: relative;
}
.nav__toggle-inner,
.nav__toggle-inner::before,
.nav__toggle-inner::after {
  width: 24px;
  height: 2px;
  background-color: var(--clr-on-bg); /* Escuro no topo por padrão */
  position: absolute;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav.scrolled .nav__toggle-inner,
.nav.scrolled .nav__toggle-inner::before,
.nav.scrolled .nav__toggle-inner::after {
  background-color: #fff; /* Branco ao rolar */
}

.nav__toggle-inner {
  top: 50%;
  transform: translateY(-50%);
}
.nav__toggle-inner::before {
  content: "";
  top: -8px;
}
.nav__toggle-inner::after {
  content: "";
  bottom: -8px;
}

/* Positioning Block */
.positioning-block {
  padding-block: var(--section-gap);
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-outline-var);
}
.positioning__inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.positioning__title {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.positioning__text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--clr-on-surface-var);
  margin-bottom: 1.5rem;
}

/* Benefits Section */
.benefits-section {
  padding-block: var(--section-gap);
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-outline-var);
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gutter);
  margin-top: 3rem;
}
.benefit-card {
  background: var(--clr-surface);
  padding: 2.5rem 2rem;
  border: 1px solid var(--clr-outline-var);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.benefit-card:hover {
  border-color: var(--clr-primary);
  transform: translateY(-4px);
}
.benefit-card__icon {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--clr-outline);
  margin-bottom: 1.5rem;
  line-height: 1;
}
.benefit-card__title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.benefit-card__desc {
  font-size: 15px;
  color: var(--clr-on-surface-var);
  line-height: 1.6;
}

/* Before / After Transformation Showcase */
.before-after {
  padding-block: var(--section-gap);
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-outline-var);
}
.before-after__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  max-width: 1000px;
  margin-inline: auto;
}
.before-after__card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--clr-outline-var);
}
.before-after__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: rgba(249, 249, 249, 0.9);
  color: var(--clr-outline);
  padding: .3rem .75rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.before-after__tag--after {
  background: rgba(26, 28, 28, 0.9);
  color: #fff;
}
.before-after__img-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.before-after__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.before-after__card:hover .before-after__img-wrap img {
  transform: scale(1.03);
}

/* Native Keyboard-Navigable FAQ Accordion */
.faq-section {
  padding-block: var(--section-gap);
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-outline-var);
}
.faq__grid {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
}
.faq__item {
  border: 1px solid var(--clr-outline-var);
  border-radius: var(--radius);
  background: var(--clr-surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item[open] {
  border-color: var(--clr-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.faq__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--clr-on-bg);
  cursor: pointer;
  list-style: none;
}
.faq__summary::-webkit-details-marker {
  display: none;
}
.faq__summary::after {
  content: '+';
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform var(--dur) var(--ease);
  color: var(--clr-outline);
}
.faq__item[open] .faq__summary::after {
  content: '−';
  color: var(--clr-primary);
}
.faq__summary:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: -2px;
}
.faq__content {
  padding: 0 1.5rem 1.5rem;
  font-size: 15px;
  color: var(--clr-on-surface-var);
  line-height: 1.7;
}

/* Blog Hub Layout */
.blog-hub {
  padding-block: calc(var(--section-gap) + 80px) var(--section-gap);
  background: var(--clr-bg);
  min-height: 100vh;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gutter);
  margin-top: 3rem;
}
.blog-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-outline-var);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.blog-card:hover {
  border-color: var(--clr-primary);
  transform: translateY(-4px);
}
.blog-card__img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.blog-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.blog-card:hover .blog-card__img-wrap img {
  transform: scale(1.03);
}
.blog-card__content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card__meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--clr-outline);
  margin-bottom: 0.75rem;
}
.blog-card__title {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  font-family: var(--font-serif);
}
.blog-card__excerpt {
  font-size: 14px;
  color: var(--clr-on-surface-var);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.blog-card__link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: auto;
  color: var(--clr-on-bg);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--dur) var(--ease);
}
.blog-card:hover .blog-card__link {
  gap: 0.6rem;
}

/* Article Detail Page Layout */
.article-section {
  padding-block: calc(var(--section-gap) + 80px) var(--section-gap);
  background: var(--clr-surface);
  min-height: 100vh;
}
.article-header {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 3.5rem;
}
.article-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-outline);
  margin-bottom: 1.5rem;
}
.article-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
}
.article-hero-wrap {
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--clr-outline-var);
  margin-bottom: 4rem;
}
.article-body {
  max-width: 740px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.9;
  color: var(--clr-on-surface-var);
}
.article-body h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  color: var(--clr-on-bg);
  font-family: var(--font-serif);
}
.article-body p {
  margin-bottom: 1.75rem;
}
.article-body ul {
  margin-bottom: 1.75rem;
  padding-left: 1.5rem;
}
.article-body li {
  margin-bottom: 0.5rem;
}

/* Responsiveness overrides for Drawer */
@media (max-width: 900px) {
  .nav__logo {
    color: #fff; /* Logo branca no topo no mobile (cobre imagem inteira) */
  }
  .nav__toggle-inner,
  .nav__toggle-inner::before,
  .nav__toggle-inner::after {
    background-color: #fff; /* Hamburger branco no topo no mobile */
  }

  .nav__toggle {
    display: block;
  }
  .nav__links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--clr-surface); /* Painel gaveta branco */
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 3rem;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
    transition: right var(--dur) var(--ease);
    z-index: 999;
  }
  .nav__links.active {
    right: 0;
  }

  /* Links pretos dentro da gaveta branca */
  .nav__links a {
    color: var(--clr-on-bg);
    text-shadow: none;
  }
  .nav__links a:hover,
  .nav__links a:focus-visible {
    color: var(--clr-outline);
  }
  .nav__links a.nav__link--active {
    color: var(--clr-primary) !important;
  }
  .nav__links a.nav__link--active::after {
    background-color: var(--clr-primary);
  }

  /* Botão Agendar dentro da gaveta mobile */
  .nav__links .btn {
    background: var(--clr-primary);
    color: var(--clr-on-primary) !important;
    border-color: var(--clr-primary);
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .nav__links .btn:hover {
    background: transparent;
    color: var(--clr-primary) !important;
    border-color: var(--clr-primary);
  }

  .nav__toggle[aria-expanded="true"] .nav__toggle-inner {
    background-color: transparent;
  }
  .nav__toggle[aria-expanded="true"] .nav__toggle-inner::before {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--clr-on-bg); /* Preto no hamburger aberto */
  }
  .nav__toggle[aria-expanded="true"] .nav__toggle-inner::after {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--clr-on-bg); /* Preto no hamburger aberto */
  }
  .before-after__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

.footer__links {
  font-size: 11px;
  color: var(--clr-outline);
  letter-spacing: .05em;
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.footer__links a {
  transition: color var(--dur) var(--ease);
}
.footer__links a:hover {
  color: var(--clr-on-bg);
}