/* ==========================================================================
   BE YOUR LASH — luxury minimal landing
   ========================================================================== */

:root{
  /* paleta champagne / dourado pastel */
  --cream:      #FBF7EE;              /* marfim quente */
  --cream-deep: #F2E9D6;              /* areia champagne */
  --blush:      #E9D5A0;              /* dourado pastel (acentos e hover) */
  --blush-rgb:  233, 213, 160;        /* mesma cor em rgb p/ camadas translúcidas */
  --ink:        #2E2A22;              /* carvão quente */
  --ink-soft:   rgba(46,42,34,.62);
  --line:       rgba(46,42,34,.14);

  --serif:  "Fraunces", Georgia, serif;
  --sans:   "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
  --script: "Sacramento", cursive;

  --ease:  cubic-bezier(0.25, 1, 0.5, 1);
  --speed: .4s;

  --gutter: 6vw;

  /* arredondamento sutil (combina com o traço curvo da logo) */
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

::selection{ background:var(--blush); color:var(--ink); }

/* ---------- layout ---------- */
.container{ width:100%; max-width:1320px; margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:780px; }

section{ position:relative; }

/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:300; line-height:1.12; letter-spacing:-.01em; overflow-wrap:break-word; }
h1{ font-size:clamp(2.6rem, 6.4vw, 5.2rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.5rem); }
h3{ font-size:clamp(1.35rem, 2vw, 1.7rem); }
em{ font-style:italic; }

p{ color:var(--ink-soft); }

.eyebrow,
.index{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ink-soft);
}

.signature{
  font-family:var(--script);
  font-size:clamp(2rem,4vw,3rem);
  color:var(--ink);
  line-height:1;
}

.section-head{ margin-bottom:clamp(3.5rem,7vw,6rem); }
.section-head .index{ margin-bottom:1.4rem; }
.section-head--center{ text-align:center; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-fg: var(--ink);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.85em;
  padding:1.15em 2.4em;
  border:1px solid var(--btn-fg);
  border-radius:999px;
  color:var(--btn-fg);
  font-size:12px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.15em;
  line-height:1;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}

/* fill sweep */
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--blush);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform var(--speed) var(--ease);
  z-index:-1;
}
.btn > span,
.btn > .arrow{ position:relative; z-index:1; }

.arrow{
  font-style:normal;
  display:inline-block;
  transition:transform var(--speed) var(--ease);
}
.btn--light{ --btn-fg:#fff; }
.btn--lg{ padding:1.35em 3.2em; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  background:transparent;
  transition:background var(--speed) var(--ease),
             box-shadow var(--speed) var(--ease),
             padding var(--speed) var(--ease);
  padding-block:2.2rem;
}
/* desktop: links à esquerda | logo ao centro | links à direita */
.nav__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%; max-width:1320px; margin-inline:auto;
  padding-inline:var(--gutter);
}

.nav__logo{
  font-family:var(--script);
  font-size:1.85rem;
  line-height:1.05;
  color:#fff;
  justify-self:center;
  text-align:center;
  transition:color var(--speed) var(--ease);
}
/* logo em imagem: a assinatura é preta — no nav transparente (sobre foto)
   fica branca via filtro; ao rolar (fundo creme) volta a preta */
.nav__logo img{
  display:block;
  height:46px;
  width:auto;
  filter:brightness(0) invert(1);
  transition:filter var(--speed) var(--ease);
}
.nav.is-scrolled .nav__logo img,
.nav.is-open .nav__logo img{ filter:none; }

/* grupos laterais (desktop) */
.nav__side{ display:flex; align-items:center; gap:2.4rem; }
.nav__side--left{ justify-self:start; }
.nav__side--right{ justify-self:end; }

/* menu completo é só overlay mobile — escondido no desktop */
.nav__links{ display:none; }

.nav__side a,
.nav__links > a:not(.btn){
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#fff;
  position:relative;
  padding-block:.4rem;
  transition:color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav__side a::after,
.nav__links > a:not(.btn)::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--speed) var(--ease);
}
.nav__cta{ --btn-fg:#fff; padding:.95em 1.8em; }

/* scrolled state */
.nav.is-scrolled{
  background:var(--cream);
  box-shadow:0 1px 0 var(--line);
  padding-block:1.1rem;
}
.nav.is-scrolled .nav__logo,
.nav.is-scrolled .nav__side a,
.nav.is-scrolled .nav__links > a:not(.btn){ color:var(--ink); }
.nav.is-scrolled .nav__cta{ --btn-fg:var(--ink); }

/* páginas com hero CLARO (contato, sobre): menu escuro mesmo transparente,
   senão o texto/logo branco some sobre a imagem clara */
.nav--on-light .nav__logo{ color:var(--ink); }
.nav--on-light .nav__logo img{ filter:none; }
.nav--on-light .nav__side a{ color:var(--ink); }
.nav--on-light .nav__burger span{ background:var(--ink); }
.nav--on-light .nav__cta{ --btn-fg:var(--ink); }

/* burger */
.nav__burger{
  display:none;
  width:34px; height:22px;
  background:none; border:0; cursor:pointer;
  position:relative;
}
.nav__burger span{
  position:absolute; left:0; right:0; height:1px;
  background:#fff;
  transition:transform var(--speed) var(--ease),
             opacity var(--speed) var(--ease),
             background var(--speed) var(--ease);
}
.nav__burger span:nth-child(1){ top:6px; }
.nav__burger span:nth-child(2){ bottom:6px; }
.nav.is-scrolled .nav__burger span,
.nav.is-open .nav__burger span{ background:var(--ink); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:-12% 0;
  will-change:transform;
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(20,16,15,.62) 0%, rgba(20,16,15,.38) 42%, rgba(20,16,15,.06) 78%),
    linear-gradient(180deg, rgba(20,16,15,.35) 0%, rgba(20,16,15,0) 32%);
}
.hero__content{
  position:relative;
  max-width:1320px;
  padding-block:12rem 9rem;
  color:#fff;
}
.hero__content .eyebrow{ color:rgba(255,255,255,.75); margin-bottom:2rem; }
.hero__title{
  max-width:20ch;
  margin-bottom:2rem;
  text-shadow:0 1px 24px rgba(20,16,15,.35);
}
.hero__text{
  max-width:44ch;
  color:rgba(255,255,255,.88);
  margin-bottom:3.2rem;
  text-shadow:0 1px 16px rgba(20,16,15,.5);
}

.hero__scroll{
  position:absolute; left:50%; bottom:3rem;
  transform:translateX(-50%);
  width:1px; height:64px;
  background:rgba(255,255,255,.3);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:#fff;
  animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{
  0%   { transform:translateY(-100%); }
  50%  { transform:translateY(0); }
  100% { transform:translateY(100%); }
}

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto{
  padding-block:clamp(7rem,14vw,12rem);
  text-align:center;
}
/* caixa mais larga para o texto ficar mais horizontal (menos quebras) */
.manifesto .container--narrow{ max-width:62rem; }
.manifesto__text{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.9vw,2.4rem);
  line-height:1.5;
  color:var(--ink);
  margin-bottom:2.5rem;
}

/* ==========================================================================
   EDITORIAL
   ========================================================================== */
.editorial{ padding-block:clamp(4rem,8vw,7rem); }
.editorial__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,8rem);
  align-items:center;
}
.editorial--reverse .editorial__media{ order:-1; }

.editorial__text .index{ margin-bottom:1.6rem; }
.editorial__text h2{ margin-bottom:1.8rem; max-width:14ch; }
.editorial__text p{ max-width:46ch; margin-bottom:2.8rem; }

.editorial__media{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--cream-deep);
  border-radius:var(--radius);
}
.editorial__media img{
  transition:transform 1.2s var(--ease);
}

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.services{ padding-block:clamp(6rem,12vw,11rem); }

.service{
  position:relative;
  display:grid;
  grid-template-columns:70px 1fr auto;
  align-items:baseline;
  gap:2.5rem;
  padding-block:2.6rem;
  border-top:1px solid var(--line);
  transition:background var(--speed) var(--ease),
             padding-inline var(--speed) var(--ease);
}
.services__list li:last-child{ border-bottom:1px solid var(--line); }

/* link "esticado": a linha inteira do serviço é clicável */
.service__link{
  position:absolute; inset:0;
  z-index:1;
}
.service__link:focus-visible{ outline:1px solid var(--blush); outline-offset:-3px; }

.service__num{
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.service__body h3{ margin-bottom:.5rem; }
.service__body p{ max-width:52ch; }
.service__meta{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ink-soft);
  white-space:nowrap;
}

/* ==========================================================================
   QUOTE / PARALLAX
   ========================================================================== */
.quote{
  position:relative;
  min-height:72vh;
  display:flex; align-items:center;
  overflow:hidden;
  text-align:center;
}
.quote__media{ position:absolute; inset:-14% 0; will-change:transform; }
.quote__veil{ position:absolute; inset:0; background:rgba(20,16,15,.5); }
.quote__content{ position:relative; }
.quote__content p{
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.2vw,2.6rem);
  line-height:1.45;
  color:#fff;
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.testimonials{ padding-block:clamp(6rem,12vw,11rem); }

/* cabeçalho + setas na mesma linha */
.testimonials__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.testimonials__head .section-head{ margin-bottom:0; }

.testimonials__nav{ display:flex; gap:.7rem; flex:none; }
.testimonials__arrow{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--speed) var(--ease),
             border-color var(--speed) var(--ease),
             color var(--speed) var(--ease),
             opacity var(--speed) var(--ease);
}
.testimonials__arrow svg{ width:17px; height:17px; }
.testimonials__arrow:disabled{ opacity:.28; cursor:default; }

/* trilho: rolagem horizontal com snap, barra escondida */
.testimonials__track{
  --tgap:clamp(1.2rem,2.4vw,1.8rem);
  display:flex;
  gap:var(--tgap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* sangra até a borda do container para o card seguinte "espiar" */
  padding-inline:2px;
  /* respiro vertical para o card não ser cortado no hover (lift + sombra) */
  padding-block:10px 28px;
}
.testimonials__track::-webkit-scrollbar{ display:none; }
.testimonials__track:focus-visible{ outline:1px solid var(--blush); outline-offset:6px; }

/* card discreto: fundo creme mais fundo + fio de 1px, cantos retos */
.testimonial{
  flex:0 0 calc((100% - 2 * var(--tgap)) / 3);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  padding:clamp(2rem,2.8vw,2.6rem);
  background:var(--cream-deep);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:left;
  transition:transform .5s var(--ease), border-color .5s var(--ease),
             background .5s var(--ease), box-shadow .5s var(--ease);
}
.testimonial p{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.5vw,1.4rem);
  line-height:1.55;
  color:var(--ink);
  margin-bottom:2rem;
}
.testimonial cite{
  font-style:normal;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ink-soft);
  margin-top:auto; /* alinha a assinatura na base, mesmo com textos de tamanhos diferentes */
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.insta{ padding-block:clamp(4rem,8vw,7rem) 0; }
/* o @ do Instagram é uma palavra longa: quebra e reduz p/ não estourar a tela */
.insta .section-head h2{
  overflow-wrap:anywhere;
  font-size:clamp(1.5rem, 6.5vw, 3.5rem);
}
.insta__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,1vw,12px);
  margin-top:clamp(1rem,3vw,2rem);
}
.insta__item{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--cream-deep);
  border-radius:var(--radius);
}
.insta__item img,
.insta__item video{ transition:transform 1.2s var(--ease); }
.insta__item::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(var(--blush-rgb),0);
  transition:background var(--speed) var(--ease);
}

/* glifo de "reel" — triângulo em linha fina */
.insta__play{
  position:absolute; right:1.1rem; top:1.1rem;
  z-index:1;
  width:22px; height:22px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%275%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274.2%27/%3E%3Ccircle%20cx%3D%2717.4%27%20cy%3D%276.6%27%20r%3D%271.1%27%20fill%3D%27white%27%20stroke%3D%27none%27/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
  transition:transform var(--speed) var(--ease);
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta{
  padding-block:clamp(7rem,14vw,12rem);
  text-align:center;
}
.cta .index{ margin-bottom:1.6rem; }
.cta h2{ margin-bottom:1.8rem; }
.cta p{ max-width:52ch; margin:0 auto 3.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:var(--cream-deep);
  padding-block:clamp(4rem,8vw,6rem) 2.5rem;
  text-align:center;
}
.footer__logo{
  font-family:var(--script);
  font-size:clamp(2.2rem,4vw,3rem);
  line-height:1;
  display:inline-block;
  margin-bottom:2rem;
}
/* logo em imagem no rodapé (fundo claro → assinatura preta) */
.footer__logo img{
  display:block;
  height:clamp(48px,7vw,64px);
  width:auto;
}
.footer__social{
  display:flex; justify-content:center; gap:1.6rem;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.footer__social a{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  transition:background var(--speed) var(--ease),
             border-color var(--speed) var(--ease),
             transform var(--speed) var(--ease);
}
.footer__social svg{ width:18px; height:18px; }

.footer__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem;
  text-align:left;
  padding-bottom:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);
}
.footer__cols h4{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-bottom:1.4rem;
}
.footer__cols a{
  display:block;
  font-size:13px;
  line-height:2.2;
  color:var(--ink-soft);
  transition:color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.footer__base{
  display:flex; justify-content:space-between; gap:1rem;
  padding-top:2.2rem;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-soft);
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
/* Usa animation (não transition) de propósito: um shorthand `transition`
   aqui sobrescreveria as transições de hover de .btn e .service. */
.reveal{ opacity:0; transform:translateY(38px); }
.reveal.is-visible{ animation:revealUp .95s var(--ease) forwards; }

@keyframes revealUp{
  to{ opacity:1; transform:none; }
}

.reveal[data-delay="1"]{ animation-delay:.12s; }
.reveal[data-delay="2"]{ animation-delay:.24s; }
.reveal[data-delay="3"]{ animation-delay:.36s; }
.reveal[data-delay="4"]{ animation-delay:.48s; }

/* ==========================================================================
   HOVER — só para ponteiro fino (mouse/trackpad)
   Em telas de toque o :hover "gruda" depois do tap, deixando imagens com
   zoom e linhas destacadas de forma permanente. Por isso tudo que é
   decorativo vive aqui dentro.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{ transform:scaleY(1); }
  .btn:hover{ color:var(--ink); border-color:var(--blush); }
  .btn:hover .arrow{ transform:translateX(6px); }

  .nav__side a:hover::after,
  .nav__links > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }

  .editorial__media:hover img{ transform:scale(1.05); }

  .testimonials__arrow:not(:disabled):hover{
    background:var(--blush); border-color:var(--blush);
  }

  .service:hover{
    background:linear-gradient(90deg, rgba(var(--blush-rgb),.35), rgba(var(--blush-rgb),0));
    padding-inline:1.6rem;
  }

  .testimonial:hover{
    transform:translateY(-4px);
    border-color:var(--blush);
    background:var(--cream);
    box-shadow:0 18px 40px -24px rgba(var(--blush-rgb),.6);
  }

  .insta__item:hover img,
  .insta__item:hover video{ transform:scale(1.05); }
  .insta__item:hover::after{ background:rgba(var(--blush-rgb),.18); }
  .insta__item:hover .insta__play{ transform:scale(1.12); }

  .footer__social a:hover{
    background:var(--blush);
    border-color:var(--blush);
    transform:translateY(-3px);
  }
  .footer__cols a:hover{ color:var(--ink); transform:translateX(4px); }
}

/* ==========================================================================
   TOQUE — feedback imediato no :active, sem estado preso
   ========================================================================== */
@media (hover:none){
  a, button{ -webkit-tap-highlight-color:transparent; }

  .btn:active::before{ transform:scaleY(1); }
  .btn:active{ border-color:var(--blush); }
  .btn:active .arrow{ transform:translateX(6px); }

  .service:active{ background:linear-gradient(90deg, rgba(var(--blush-rgb),.3), rgba(var(--blush-rgb),0)); }
  .insta__item:active::after{ background:rgba(var(--blush-rgb),.18); }
  .footer__social a:active{ background:var(--blush); border-color:var(--blush); }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* --- tablet paisagem (iPad 1024): mantém 3/4 colunas, só respira menos --- */
@media (max-width:1080px){
  .nav__side{ gap:1.6rem; }
}

/* --- tablet: 2 depoimentos por vez --- */
@media (max-width:900px){
  .testimonial{ flex-basis:calc((100% - var(--tgap)) / 2); }
  .footer__cols{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
}

/* --- celular: 1 depoimento por vez --- */
@media (max-width:620px){
  .testimonial{ flex-basis:100%; }
}

@media (max-width:820px){
  .insta__grid{ grid-template-columns:repeat(2,1fr); }
  /* imagem editorial não pode virar uma torre em tela estreita */
  .editorial__media{ max-height:70svh; }
  :root{ --gutter:7vw; }

  /* no mobile volta a ser logo à esquerda + burger à direita */
  .nav__inner{ display:flex; justify-content:space-between; }
  .nav__side{ display:none; }
  .nav__logo{ justify-self:auto; }

  .nav__burger{ display:block; }
  .nav__links{
    display:flex;
    position:fixed; inset:0;
    flex-direction:column; justify-content:center; align-items:center;
    gap:2.2rem;
    background:var(--cream);
    opacity:0; visibility:hidden;
    transition:opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
  }
  .nav.is-open .nav__links{ opacity:1; visibility:visible; }
  .nav__links > a:not(.btn){ color:var(--ink) !important; font-size:13px; }
  .nav__links .nav__cta{ --btn-fg:var(--ink); margin-top:.6rem; }
  .nav__burger{ z-index:2; }
  /* logo permanece acima do overlay */
  .nav__logo{
    position:relative; z-index:2;
    font-size:1.55rem;
    max-width:60vw;
  }
  .nav__logo img{ height:34px; }
  .nav.is-open .nav__logo{ color:var(--ink); }

  .editorial__grid{ grid-template-columns:1fr; gap:3rem; }
  /* empilhado: texto sempre acima, imagem abaixo — inclusive no bloco
     invertido (Materiais), onde a imagem vem antes no HTML */
  .editorial--reverse .editorial__text{ order:0; }
  .editorial--reverse .editorial__media{ order:1; }
  .editorial__media{ aspect-ratio:3/4; }

  .service{
    grid-template-columns:44px 1fr;
    gap:1.2rem;
    row-gap:1rem;
  }
  .service__meta{ grid-column:2; }

  .hero__content{ padding-block:10rem 7rem; }
  .footer__base{ flex-direction:column; align-items:center; }

  /* Em tela estreita o texto ocupa toda a largura e atravessaria a parte
     clara da foto — o véu passa a ser vertical em vez de lateral. */
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(20,16,15,.55) 0%,
      rgba(20,16,15,.42) 45%,
      rgba(20,16,15,.60) 100%);
  }
}

@media (hover:hover) and (pointer:fine) and (max-width:820px){
  .service:hover{ padding-inline:.8rem; }
}

@media (max-width:520px){
  .footer__cols{ grid-template-columns:1fr; text-align:center; }
  .btn{ padding:1.05em 1.9em; }
  .service__num{ font-size:.9rem; }
}

/* --- celular em paisagem: hero não pode empurrar o CTA pra fora --- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; }
  .hero__content{ padding-block:7rem 4rem; }
  .hero__scroll{ display:none; }
  .quote{ min-height:auto; padding-block:6rem; }
}

/* ==========================================================================
   ALVOS DE TOQUE — mínimo de 44px
   Não mexe em .nav__links a::after, que já é o sublinhado do menu.
   ========================================================================== */
@media (hover:none){
  .footer__cols a{
    display:flex;
    align-items:center;
    min-height:44px;
    line-height:1.5;
  }
  .nav__links > a:not(.btn){
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding-block:0;
  }

  .btn{ min-height:44px; }

  .nav__burger{ width:44px; height:44px; }
  .nav__burger span{ left:5px; right:5px; }
  .nav__burger span:nth-child(1){ top:17px; }
  .nav__burger span:nth-child(2){ bottom:17px; }

  .footer__social a{ width:44px; height:44px; }
}

@media (hover:none) and (max-width:520px){
  .footer__cols a{ justify-content:center; }
}

/* respeita notch/barra inferior no iPhone */
@supports (padding:max(0px)){
  .nav__inner{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
  .footer{ padding-bottom:max(2.5rem, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal,
  .reveal.is-visible{ opacity:1; transform:none; animation:none; }
  [data-parallax]{ transform:none !important; }
}


/* ==========================================================================
   MAPA / LOCALIZAÇÃO DO ESTÚDIO (compartilhado: contato, home, sobre)
   ========================================================================== */
.map-section{
  padding-block:clamp(6.25rem,12vw,10rem);
  background:#F6F1E8;   /* creme quase imperceptível, separa a seção */
}
.map-section__head{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.map-section__head .index{ display:block; margin-bottom:1.2rem; }
.map-section__head h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:1.2rem;
}
.map-section__head p{
  color:#5f574a; line-height:1.7;
  max-width:56ch; margin-inline:auto;
}
.map__frame{
  position:relative;
  aspect-ratio:16/8;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--cream-deep);
  border-radius:var(--radius);
}
/* mapa Leaflet ocupa o quadro inteiro */
.map__leaflet{ width:100%; height:100%; background:var(--cream-deep); }

/* base CARTO Voyager: cores naturais (água azul, parques verdes) estilo Google Maps */
.map__frame .leaflet-tile-pane{
  filter:saturate(1.05);
}

/* marcador discreto: ponto escuro com halo dourado suave */
.map__frame .map-pin{
  background:var(--ink);
  border:2px solid var(--cream);
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(var(--blush-rgb), .45);
}

/* controles e créditos minimalistas, no tom do site */
.map__frame .leaflet-control-zoom{
  border:none; box-shadow:0 1px 6px rgba(46,42,34,.15);
}
.map__frame .leaflet-control-zoom a{
  background:var(--cream); color:var(--ink);
  border:1px solid var(--line);
  width:30px; height:30px; line-height:28px;
  font-weight:300;
}
.map__frame .leaflet-control-zoom a:hover{ background:var(--blush); }
.map__frame .leaflet-control-attribution{
  background:rgba(251,247,238,.72);
  color:var(--ink-soft);
  font-size:10px; letter-spacing:.02em;
}
.map__frame .leaflet-control-attribution a{ color:var(--ink-soft); }
.map__address{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:center; gap:.4rem 1.2rem;
  margin-top:1.8rem;
  text-align:center;
}
.map__address strong{ font-weight:500; }
.map__address span{
  font-size:13px; letter-spacing:.04em; color:var(--ink-soft);
}

@media (max-width:820px){
  .map__frame{ aspect-ratio:auto; height:340px; }
}

/* capa do mapa: foto da fachada + botão que revela o mapa */
.map__cover{
  position:absolute; inset:0; z-index:1000;
  display:grid; place-items:end center; padding-bottom:1.8rem;
  background:var(--cream-deep);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease);
}
.map__cover img{ position:absolute; inset:0; }
.map__cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,16,15,.45), rgba(20,16,15,.05) 60%);
}
.map__reveal{
  z-index:1;
  --btn-fg:#fff;
  background:var(--ink); border-color:var(--ink);
  padding:1.3em 2.8em;
  animation:mapPulse 2.4s ease-out infinite;
}
.map__reveal:hover{ color:var(--ink); }
@keyframes mapPulse{
  0%{ box-shadow:0 0 0 0 rgba(var(--blush-rgb),.75); }
  70%{ box-shadow:0 0 0 18px rgba(var(--blush-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--blush-rgb),0); }
}
.map__frame.is-revealed .map__cover{ clip-path:inset(0 0 100% 0); pointer-events:none; }
@media (prefers-reduced-motion:reduce){
  .map__reveal{ animation:none; }
  .map__cover{ transition:none; }
}

/* botão de voltar para a foto — só aparece com o mapa revelado */
.map__back{
  position:absolute; left:50%; bottom:1.8rem; z-index:1001;
  transform:translate(-50%, 12px);
  --btn-fg:var(--ink);
  background:var(--cream); border-color:var(--cream);
  box-shadow:0 4px 14px rgba(46,42,34,.18);
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s;
}
.map__frame.is-revealed .map__back{ opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
.map__back{ white-space:nowrap; }
.map__cover img{ object-position:35% 55%; }  /* mantém a placa "flor de lis" e a porta visíveis no celular */