/* Paulo Moretti Engenharia — folha de estilo do site.
   CSS vanilla. Consome apenas os tokens de tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-weight:var(--fw-light);color:var(--text-secondary);background:var(--stone-0)}
img{max-width:100%;display:block}
a{color:var(--text-accent)}
a:hover{color:var(--gold-800)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}
h1,h2,h3,h4{color:var(--text-primary);margin:0;text-wrap:pretty}
p{margin:0}

.container{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.section{padding-block:clamp(48px,7vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--gray{background:var(--stone-100)}
.section--gray-2{background:var(--stone-200)}
.section--navy{background:var(--surface-inverse)}

/* ---------- Contato: headline de destaque com padrão gráfico de fundo ---------- */
.contact-hero{position:relative;overflow:hidden;background:var(--surface-inverse);padding-block:clamp(56px,8vw,104px);text-align:center}
.contact-hero__pattern{position:absolute;inset:0;background-image:
  linear-gradient(135deg,transparent 48%,rgba(255,255,255,.05) 50%,transparent 52%),
  linear-gradient(45deg,transparent 48%,rgba(255,255,255,.05) 50%,transparent 52%);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at center,black,transparent 75%);
  mask-image:radial-gradient(circle at center,black,transparent 75%)}
.contact-hero .container{position:relative}
.contact-hero h1{color:var(--stone-0);max-width:20em;margin-inline:auto}

/* ---------- Sobre: headline com foto de fundo (espelhada horizontalmente) ---------- */
.about-hero{position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}
.about-hero::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;transform:scaleX(-1)}
.about-hero__scrim{position:absolute;inset:0;background:var(--scrim-strong,rgba(12,13,39,.55))}
.about-hero .container{position:relative}

/* ---------- Sobre: números de destaque (anos, projetos, clientes) ---------- */
.stats{position:relative;overflow:hidden;background:var(--stone-100);padding-block:clamp(43px,6.3vw,94px)}
.stats__pattern{position:absolute;inset:0;opacity:1;
  background-image:url("assets/icone-paulo-moretti-1920w.png");
  background-size:100px 92px;background-repeat:repeat;
  -webkit-mask-image:radial-gradient(circle at center,black,transparent 75%);
  mask-image:radial-gradient(circle at center,black,transparent 75%)}
.stats__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(32px,5vw,56px);text-align:center}
.stat{display:flex;flex-direction:column;gap:8px}
.stat__number{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:clamp(2.5rem,1.8rem + 3vw,4rem);line-height:1;color:var(--text-primary)}
.stat__label{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-size);color:var(--text-secondary)}
.stack{display:flex;flex-direction:column}
.stack-16{gap:16px}.stack-20{gap:20px}.stack-24{gap:24px}
.stack-32{gap:clamp(24px,3vw,32px)}
.stack-48{gap:clamp(28px,4vw,48px)}
.prose{max-width:var(--measure-prose)}
.lede{max-width:var(--measure-lede)}

/* ---------- Tipografia utilitária ---------- */
.overline{font-size:var(--overline-size);letter-spacing:.18em;font-weight:var(--fw-medium);color:var(--text-tertiary)}
.lockup{font-size:clamp(19px,2.6vw,28px);font-weight:var(--fw-extralight);letter-spacing:var(--lockup-ls);color:var(--text-secondary)}
.h1{font-size:var(--h1-size);line-height:var(--h1-lh);font-weight:var(--fw-bold)}
.h2{font-size:var(--h2-size);line-height:var(--h2-lh);font-weight:var(--fw-bold)}
.h3{font-size:var(--h3-size);line-height:var(--h3-lh);font-weight:var(--fw-bold)}
.h3--light{font-weight:var(--fw-light)}
.h5{font-size:var(--h5-size);font-weight:var(--fw-bold);line-height:1.4}
.gold{color:var(--gold-600)}
.body{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-size);line-height:1.85}
.body-sm{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-sm-size);line-height:1.7}
.body-lg{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-lg-size);line-height:1.8;color:var(--text-primary)}
.meta{font-size:var(--overline-size);letter-spacing:.14em;color:var(--text-tertiary)}
.on-photo{color:var(--stone-0)}
.center{text-align:center}
.strong{font-weight:var(--fw-semibold);color:var(--text-primary)}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:40;background:var(--stone-0);border-bottom:1px solid var(--border-subtle);transition:background var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),backdrop-filter var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),border-color var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:38px;width:auto}
@media (min-width:769px){
  .logo img{height:55px}
}
.logo__name{display:flex;flex-direction:column;gap:4px}
.logo__word{font-size:clamp(15px,2.6vw,21px);font-weight:var(--fw-light);letter-spacing:.1em;line-height:1;color:var(--navy-800);white-space:nowrap;transition:color var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.logo__sub{font-size:8px;font-weight:var(--fw-light);letter-spacing:var(--lockup-ls);line-height:1;color:var(--gold-600);align-self:flex-end}
.hamburger{position:relative;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
.hamburger svg{width:28px;height:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);shape-rendering:crispEdges}
.hamburger rect{fill:var(--stone-700);transition:fill var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),transform var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),opacity var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1));transform-box:fill-box;transform-origin:center}
.hamburger[aria-expanded="true"] rect:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hamburger[aria-expanded="true"] rect:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] rect:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .hamburger rect{transition:none}
}

/* Header transparente: só na home, enquanto ainda não rolou — deixa a hero aparecer atrás da logo/menu.
   --scroll-p (0 a 1) é atualizado via JS a cada scroll e controla a transição gradual para o efeito "vidro". */
.header--transparent{
  --scroll-p:0;
  background:rgba(255,255,255,var(--scroll-p));
  backdrop-filter:blur(calc(var(--scroll-p) * 10px));
  -webkit-backdrop-filter:blur(calc(var(--scroll-p) * 10px));
  border-bottom-color:color-mix(in srgb, var(--border-subtle) calc(var(--scroll-p) * 100%), transparent);
  transition:none;
}
.header--transparent .logo__word{color:color-mix(in srgb, var(--navy-800) calc(var(--scroll-p) * 100%), var(--stone-0))}
.header--transparent .hamburger rect{fill:color-mix(in srgb, var(--stone-700) calc(var(--scroll-p) * 100%), var(--stone-0))}
/* Logo com duas versões empilhadas (grid-area sobrepondo ambas): a branca começa visível
   (topo da página, header transparente) e esmaece conforme --scroll-p avança, revelando
   a colorida por baixo. Nenhuma das duas usa position:absolute — mesmo espaço via grid,
   evitando qualquer desalinhamento entre as duas imagens. */
.header--transparent .logo{display:grid}
.header--transparent .logo img{grid-area:1/1;transition:none}
.header--transparent .logo img.logo__img--white{opacity:calc(1 - var(--scroll-p))}
.header--transparent .logo img.logo__img--color{opacity:var(--scroll-p)}

main{padding-top:var(--header-h,75px)}
.header--transparent ~ main{padding-top:0}

/* ---------- Barra de progresso de leitura (páginas de artigo) ---------- */
.reading-progress{position:fixed;top:var(--header-h,75px);left:0;width:100%;height:3px;z-index:39;background:transparent}
.reading-progress__bar{height:100%;width:0%;background:var(--gold-600);transform-origin:left;transition:width var(--dur-instant,80ms) linear}
@media (prefers-reduced-motion:reduce){
  .reading-progress__bar{transition:none}
}

.menu-overlay{position:fixed;inset:0;z-index:49;background:rgba(12,13,39,.55);opacity:0;pointer-events:none;transition:opacity var(--dur-slow,340ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.menu-overlay[data-open="true"]{opacity:1;pointer-events:auto}
.menu{position:fixed;inset:0 auto 0 0;z-index:50;width:min(460px,86vw);display:flex;flex-direction:column;padding:clamp(24px,5vw,56px);background:var(--surface-inverse-deep);transform:translateX(-100%);visibility:hidden;transition:transform var(--dur-slow,340ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),visibility 0s linear var(--dur-slow,340ms);box-shadow:var(--shadow-4)}
.menu[data-open="true"]{transform:translateX(0);visibility:visible;transition:transform var(--dur-slow,340ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-overlay{transition:none}
}
.menu__close{align-self:flex-end;width:44px;height:44px;background:none;border:0;color:var(--text-on-inverse);font-size:26px;font-weight:var(--fw-light);line-height:1;cursor:pointer}
.menu__links{display:flex;flex-direction:column;gap:clamp(10px,1.6vw,18px);margin-block:auto}
.menu__links a{font-size:var(--h3-size);font-weight:var(--fw-light);letter-spacing:.02em;color:var(--text-on-inverse);text-decoration:none}
.menu__links a:hover,.menu__links a[aria-current="page"]{color:var(--text-accent-on-inverse)}
.menu__contact{display:flex;flex-direction:column;gap:6px;font-size:var(--body-sm-size);color:var(--text-on-inverse-muted)}
.menu__contact .overline{color:var(--text-accent-on-inverse)}

/* ---------- Botões ---------- */
.btn{display:inline-block;border-radius:var(--radius-xl,6px);text-decoration:none;font-size:calc(var(--button-size) * 1.15);font-weight:var(--fw-medium);letter-spacing:.12em;padding:26px 68px;white-space:nowrap;cursor:pointer;transition:background var(--dur-2,140ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),transform var(--dur-2,140ms)}
.btn:hover{transform:translateY(-1px)}
.btn--outline{border:1px solid var(--action-secondary-border);color:var(--action-secondary-fg);background:transparent}
.btn--outline:hover{background:var(--navy-50);color:var(--action-secondary-fg)}
.btn--on-photo{border:1px solid var(--action-inverse-border);color:var(--action-inverse-fg);background:transparent}
.btn--on-photo:hover{background:var(--action-inverse-bg-hover);color:var(--action-inverse-fg)}
.btn--navy{background:var(--action-primary-bg);color:var(--action-primary-fg);border:1px solid var(--action-primary-bg)}
.btn--navy:hover{background:var(--stone-0);color:var(--action-primary-bg)}
.btn--light{background:var(--stone-100);border:1px solid var(--border-default);color:var(--text-primary)}
.btn--light:hover{background:var(--action-primary-bg);border-color:var(--action-primary-bg);color:var(--stone-0)}
.btn--sentence{letter-spacing:0;font-size:var(--body-size);font-weight:var(--fw-medium);padding:22px 54px}
.btn--gold{background:var(--surface-accent);color:var(--text-on-accent);border:0;font-size:var(--body-size);letter-spacing:0;font-weight:var(--fw-medium);text-decoration:underline}
.btn--gold:hover{background:var(--gold-600);color:var(--text-on-accent)}
.link-quiet{font-size:var(--body-sm-size);color:var(--text-tertiary);text-decoration:none}
.link-quiet:hover{color:var(--text-accent)}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:100vh;background:var(--stone-300) center top/cover no-repeat;background-attachment:fixed}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,39,.62),rgba(12,13,39,0) 100%)}
.hero__inner{position:relative;width:100%;padding-block:clamp(40px,6vw,80px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,24px)}
.hero .overline{color:var(--stone-0);white-space:nowrap;font-size:clamp(1rem,0.8rem + 0.7vw,1.25rem);letter-spacing:.06em}
.hero h1{max-width:18em;color:var(--stone-0);font-size:clamp(2.5rem,1.7rem + 3.8vw,4.5rem)}
@media (prefers-reduced-motion:reduce){
  .hero{background-attachment:scroll}
}

.page-hero{position:relative;background:var(--stone-300) center/cover no-repeat;padding-block:clamp(72px,10vw,140px);min-height:60vh;display:flex;align-items:center}
.page-hero > .container{width:100%}
.page-hero__scrim{position:absolute;inset:0;background:var(--scrim-strong,rgba(12,13,39,.42))}
.page-hero__inner{position:relative;display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);text-align:center;max-width:1280px;margin:0 auto}
.page-hero h1{color:var(--stone-0);font-size:var(--h2-size);line-height:var(--h2-lh);font-weight:var(--fw-bold)}
.page-hero p{color:var(--stone-0);margin-inline:auto}
.project-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(260px,32vw,420px);background:var(--stone-300) center/cover no-repeat}
.project-hero h1{position:relative;padding:clamp(32px,5vw,64px) clamp(16px,4vw,48px);text-align:center;color:var(--stone-0);font-size:var(--h2-size);line-height:var(--h2-lh);font-weight:var(--fw-bold)}

/* ---------- Grids ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,72px);align-items:center}
.split--top{align-items:start}
.split img{width:100%;height:100%;min-height:280px;object-fit:cover;background:var(--stone-200)}
.split--lg{grid-template-columns:repeat(auto-fit,minmax(360px,1.6fr))}
.split--lg img{aspect-ratio:4/3;height:auto;min-height:0}

/* Sangria vertical: a seção tem uma altura FIXA (não min-height) — isso resolve de vez
   a ambiguidade circular do Grid (um item com height:100% não pode definir a altura
   do próprio track). A célula da imagem vira âncora (position:relative) e a imagem
   escapa dela via position:absolute + inset:0, preenchendo exatamente essa altura fixa,
   sem sobrar espaço em cima/embaixo. O texto ao lado fica centralizado na mesma altura
   via flex justify-content:center. */
.section--bleed{overflow:hidden;padding-block:0}
.section--bleed .container{padding-inline:0}
.section--bleed .split--bleed{grid-template-columns:1fr 1fr;grid-template-rows:440px;align-items:stretch;gap:0;height:440px}
.section--bleed .split--bleed > .bleed-cell{position:relative;height:100%;overflow:hidden}
.section--bleed .split--bleed > .bleed-cell > img{position:absolute;inset:0;height:100%;width:100%;min-height:0;object-fit:cover;object-position:center center}
.section--bleed .split--bleed > .prose{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(32px,5vw,72px);max-width:none}
/* .container perde o padding lateral dentro dessas seções (o texto vai até a borda do container).
   :first-child = Comerciais (texto à esquerda, imagem à direita): mantém respiro só do lado direito (perto da imagem).
   :last-child = Residenciais (texto à direita, imagem à esquerda): mantém respiro só do lado esquerdo (perto da imagem). */
.section--bleed .split--bleed > .prose:first-child{padding-inline:0 clamp(32px,5vw,72px)}
.section--bleed .split--bleed > .prose:last-child{padding-inline:clamp(32px,5vw,72px) 0}
.section--bleed .split--bleed > .prose .btn{padding-block:20px}
@media (max-width:768px){
  .section--bleed .container{padding-inline:clamp(16px,4vw,48px)}
  .section--bleed .split--bleed{grid-template-columns:1fr;height:auto}
  .section--bleed .split--bleed > .bleed-cell{aspect-ratio:4/3}
  .section--bleed .split--bleed > .bleed-cell > img{position:absolute}
  .section--bleed .split--bleed > .prose,
  .section--bleed .split--bleed > .prose:first-child,
  .section--bleed .split--bleed > .prose:last-child{padding-inline:0}
}

/* Slideshow: imagens empilhadas, crossfade controlado via page.js */
.slideshow > img{opacity:0;transition:opacity 1.2s var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.slideshow > img.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){
  .slideshow > img{transition:none}
}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(28px,3vw,44px)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,40px)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
/* A galeria recebe um limite de largura maior que o .container padrão (1280px), ~20% a mais,
   sem virar sangria total — continua centralizada, só com mais campo visual. */
.gallery.container{max-width:1536px;padding-inline:clamp(15px,1.9vw,27px)}
/* Grid regular (não CSS columns): todas as fotos ficam com a mesma proporção e alinhadas
   em linhas retas, topo e fim de cada linha batendo entre as 3 colunas — sem o desalinhamento
   típico do layout "Pinterest" baseado em columns, onde cada coluna tem altura própria. */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
/* Mesmo tratamento das galerias de residenciais/comercial: limite de largura ~20% maior
   que o .container padrão (1280px), continua centralizada, sem virar sangria total. */
.masonry.container{max-width:1536px;padding-inline:clamp(15px,1.9vw,27px)}
.masonry img{width:100%;height:100%;aspect-ratio:4/3!important;object-fit:cover;background:var(--stone-200)}

.band{background:var(--stone-100);padding-block:clamp(28px,4vw,48px);text-align:center}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px}
.duo a{position:relative;display:block;min-height:clamp(300px,34vw,460px);background:var(--stone-300) center/cover no-repeat;background-size:100%;text-decoration:none;overflow:hidden;transition:background-size var(--dur-slow,340ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.duo a:hover{background-size:112%}
.duo span{position:absolute;left:24px;bottom:24px;padding:8px 14px;background:var(--photo-caption-bg,rgba(12,13,39,.62));color:var(--stone-0);font-size:var(--overline-size);letter-spacing:.18em;font-weight:var(--fw-medium)}
/* Ícone "clique aqui": dedo tocando a tela, com animação de toque repetido no centro do card. */
.duo a::after{
  content:"";position:absolute;top:50%;left:50%;width:62px;height:62px;
  background:rgba(255,255,255,.16) url("assets/touch.svg") center/35px no-repeat;
  border-radius:var(--radius-pill);
  transform:translate(-50%,-50%) scale(1);
  animation:duo-tap 1.8s ease-in-out infinite;
}
@keyframes duo-tap{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
  50%{transform:translate(-50%,-50%) scale(.8);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .duo a{transition:none}
  .duo a::after{animation:none}
}

.pillar{display:flex;flex-direction:column;gap:14px}
.pillar h3,.pillar h4{font-size:var(--h5-size);font-weight:var(--fw-bold);line-height:1.35}
.pillar .icon{width:48px;height:48px;opacity:.65;background:#9E9E9E;transition:background var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1)),opacity var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.pillar:hover .icon{opacity:1;background:#4A4A4A}
@media (prefers-reduced-motion:reduce){
  .pillar .icon{transition:none}
}
.icon{display:block;width:40px;height:40px;background:var(--stone-700);
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.icon--sm{width:36px;height:36px}

.tile{position:relative;margin:0;display:block;text-decoration:none;overflow:hidden}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--stone-200);display:block;transition:transform var(--dur-3,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.tile:hover img{transform:scale(1.02)}
.tile figcaption,.tile span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:20px;background:var(--protect-bottom);opacity:0;transition:opacity var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.tile .tile__title{font-size:var(--h5-size);font-weight:var(--fw-semibold);color:var(--stone-0);line-height:1.2}
.tile .tile__caption{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-sm-size);color:var(--stone-0)}
.tile:hover figcaption,.tile:hover span,.tile:focus-within figcaption,.tile:focus-within span{opacity:1}

.card{display:flex;flex-direction:column;gap:16px;position:relative;scale:1;transition:scale var(--dur-slow,340ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.card:hover{scale:1.015}
.card__media{overflow:hidden}
.card__link{position:static}
.card__link::after{content:"";position:absolute;inset:0}
.card:hover .link-quiet{color:var(--text-accent)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--stone-200)}
@media (prefers-reduced-motion:reduce){
  .card{transition:none}
}

/* ---------- Formulários ---------- */
.form{display:flex;flex-direction:column;gap:24px}
.form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(16px,2vw,24px);align-items:end}
.form__grid > div:last-child .btn{padding-block:12px;padding-inline:32px;width:100%}
.field{display:flex;flex-direction:column;gap:8px}
.field > span{font-size:var(--body-sm-size);color:var(--field-label)}
.field input{height:44px;padding-inline:12px;border:1px solid var(--field-border);border-radius:2px;background:var(--field-bg);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--body-size)}
.field input:hover{border-color:var(--field-border-hover)}
.form--on-photo{text-align:left}
.form--on-photo .field > span{color:var(--field-photo-label)}
.form--on-photo .field input{border-color:var(--stone-0);background:var(--stone-0);color:var(--text-primary)}
.form--on-photo .field input:focus{background:var(--field-photo-bg-focus);color:var(--field-photo-fg-focus)}
.form__panel{background:var(--stone-100);padding:clamp(24px,3vw,40px)}
.req{color:var(--danger-600)}
.form--on-photo .req{color:var(--danger-300)}
.form__note{font-size:var(--body-sm-size);color:var(--text-secondary)}
.form__note[hidden]{display:none}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-float{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:60;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--radius-pill);background:#25D366;color:#fff;box-shadow:var(--shadow-3);transition:transform var(--dur-fast,140ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.whatsapp-float:hover{transform:scale(1.06);color:#fff}
.whatsapp-float svg{width:35px;height:35px;fill:currentColor}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float{transition:none}
}

/* ---------- Artigo ---------- */
.article{max-width:var(--measure-lede);margin:0 auto;display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px)}
.article img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone-200)}
.article h2{font-size:var(--h3-size);line-height:var(--h3-lh);font-weight:var(--fw-medium)}
.article p{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-size);line-height:1.9}
.cta{max-width:var(--measure-lede);margin:0 auto;display:flex;flex-direction:column;gap:20px;text-align:center}
.cta h2{font-size:var(--h3-size);line-height:var(--h3-lh);font-weight:var(--fw-light);color:var(--text-on-inverse)}
.cta h2 em{font-style:normal;color:var(--text-accent-on-inverse)}
.cta p{font-family:var(--font-body);font-weight:var(--fw-light);font-size:var(--body-size);line-height:1.8;color:var(--text-on-inverse-muted)}

/* ---------- Footer ---------- */
.footer{background:var(--stone-100)}
.footer__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(28px,3vw,40px);padding-block:clamp(40px,5vw,72px)}
.footer__col{display:flex;flex-direction:column;gap:18px}
.footer__brand{display:flex;flex-direction:column;gap:20px}
.footer__brand .logo img{height:34px}
.footer__brand .logo__word{font-size:17px}
.footer__brand .logo__sub{font-size:7px}
.footer p{font-size:var(--body-sm-size);line-height:1.7}
.footer__tag{font-weight:var(--fw-bold);color:var(--text-primary)}
.footer .overline{font-size:0.875rem;font-weight:var(--fw-bold)}
.social{display:flex;align-items:center;gap:22px;color:var(--text-primary)}
.social a{display:block;width:20px;height:20px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.social a:hover{color:var(--gold-600)}
.copyright{background:var(--gold-500);padding:14px 24px;text-align:center}
.copyright p{font-size:var(--caption-size);color:var(--navy-900)}
.copyright a{color:var(--navy-900);text-decoration:underline}

/* ---------- Revelação ---------- */
.reveal{opacity:0;transform:translateY(8px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity var(--dur-4,340ms) var(--ease-entrance,cubic-bezier(.16,1,.3,1)),transform var(--dur-4,340ms) var(--ease-entrance,cubic-bezier(.16,1,.3,1))}

/* ---------- Lightbox: zoom em imagens do masonry, com navegação entre fotos ---------- */
.masonry img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(12,13,39,.92);opacity:0;visibility:hidden;transition:opacity var(--dur-base,220ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.lightbox[data-open="true"]{opacity:1;visibility:visible}
.lightbox__img{max-width:min(92vw,1400px);max-height:88vh;width:auto;height:auto;object-fit:contain;box-shadow:var(--shadow-4)}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid var(--border-inverse);border-radius:var(--radius-pill);color:var(--stone-0);cursor:pointer;transition:background var(--dur-fast,140ms) var(--ease-standard,cubic-bezier(.2,0,.2,1))}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:rgba(255,255,255,.22)}
.lightbox__close{top:20px;right:20px;width:44px;height:44px;font-size:22px;line-height:1}
.lightbox__prev,.lightbox__next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:24px}
.lightbox__prev{left:20px}
.lightbox__next{right:20px}
.lightbox__counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--stone-0);font-size:var(--body-sm-size);letter-spacing:.04em}
@media (max-width:640px){
  .lightbox__prev,.lightbox__next{width:40px;height:40px;font-size:18px}
  .lightbox__prev{left:8px}
  .lightbox__next{right:8px}
  .lightbox__close{top:10px;right:10px}
}

@media (max-width:640px){
  .masonry{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s!important;animation-duration:0s!important}
  .reveal{opacity:1;transform:none}
}