/* ---------------------------------------------------------------------------
   CORES DA MARCA DELA
   Medidas na embalagem Home Collection e na logo, nao escolhidas por gosto:
     #DE601E  laranja da caixa do produto (5,2:1 sobre o escuro) -> destaque
              em fundo escuro; e a mesma cor que ela segura na foto do topo
     #B04C18  o mesmo laranja escurecido ate passar de 4,5:1 nos dois fundos
              claros -> este e o que vira TEXTO em fundo claro. O laranja
              cheio da so 3,3:1 no marfim e ninguem consegue ler.
   O preto tambem foi puxado para o marrom (#17100B) para conversar com a
   logo, em vez do preto neutro.
   --------------------------------------------------------------------------- */
:root{
  --ivory:#F8F4EE;
  --ivory-2:#F0EAE0;
  --ink:#17100B;
  --ink-2:#211710;
  --body:#5C5048;
  --brand:#DE601E;        /* laranja cheio: fundo escuro ou grafismo */
  --brand-deep:#B04C18;   /* o de texto em fundo claro */
  --brand-soft:#E8A06A;
  --bronze:#B04C18;
  --line:#E0D7C9;
  --line-dark:#38291D;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);color:var(--ink);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- tipografia ---------- */
.display{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:300;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(38px,5.2vw,72px)}
h2{font-size:clamp(34px,4.6vw,60px)}
h3{font-size:clamp(24px,2.4vw,31px)}
.eyebrow{
  font-family:'Jost',sans-serif;font-size:11.5px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--bronze);
  display:block;margin-bottom:24px;
}
.lead{font-size:clamp(17px,1.55vw,20px);color:var(--body);max-width:56ch}
/* Em fundo escuro vale o laranja cheio (5,2:1). O escurecido existe so para
   o fundo claro - la ele e o unico que passa no contraste. */
.dark .eyebrow,.dark .setor .n,.dark .passo b,.dark .checks svg,.dados svg{color:var(--brand)}
/* SEM ISTO o texto das secoes escuras sai cinza-escuro no escuro: 2,4:1,
   praticamente ilegivel. So aparecia bem em monitor calibrado. */
.dark .lead,.dark p,.dark .checks li,.dark .setor p{color:#BAB0A4}
.ambiente p{color:#C6BCB0}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
section{padding:clamp(84px,11vw,150px) 0}
.dark{background:var(--ink);color:#E8E1D7}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:inherit;background:transparent;cursor:pointer;
  font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  padding:17px 34px;border:1px solid var(--ink);border-radius:2px;color:var(--ink);
  transition:.35s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{background:var(--ink);color:var(--ivory)}
.btn-light{border-color:#E8E1D7;color:#E8E1D7}
.btn-light:hover{background:#E8E1D7;color:var(--ink)}
/* o botao do cabecalho comeca vazado no hero escuro e vira solido ao rolar */
.nav-right .btn{border-color:#E8E1D7;background:transparent;color:#E8E1D7}
.nav-right .btn:hover{background:#E8E1D7;color:var(--ink)}
header.solid .nav-right .btn{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
header.solid .nav-right .btn:hover{background:transparent;color:var(--ink)}
.btn .ar{transition:.35s}
.btn:hover .ar{transform:translateX(5px)}

/* ---------- cabecalho ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;padding:20px 0;transition:.4s}
header.solid{background:rgba(248,244,238,.95);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:12px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:30px}
/* O hero e escuro e o resto da pagina e claro. O cabecalho fica por cima dos
   dois, entao ele carrega as duas logos e troca sozinho. Sem isso a logo
   escura some no topo, que e justamente onde todo mundo olha primeiro. */
.brand{position:relative;display:block;line-height:0}
.brand img{height:78px;width:auto;transition:.4s}
.brand .l-clara{position:absolute;left:0;top:0;opacity:1}
.brand .l-escura{opacity:0}
header.solid .brand .l-clara{opacity:0}
header.solid .brand .l-escura{opacity:1}
header.solid .brand img{height:58px}
.brand .fb{font-family:'Cormorant Garamond',serif;font-size:26px;letter-spacing:.06em;display:none;color:#E8E1D7;line-height:1.4}
header.solid .brand .fb{color:var(--ink)}
.links{display:flex;gap:30px;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.links a{position:relative;padding:4px 0;color:#E8E1D7;opacity:.8;transition:.3s}
header.solid .links a{color:var(--ink);opacity:.75}
.links a:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brand);transition:.35s}
.links a:hover{opacity:1}
.links a:hover:after{width:100%}
.nav-right{display:flex;align-items:center;gap:20px}
.lang{display:flex;border:1px solid #4A423B;border-radius:2px;overflow:hidden;transition:.4s}
header.solid .lang{border-color:var(--line)}
.lang button{background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:11.5px;letter-spacing:.12em;padding:8px 12px;color:#9C9188;transition:.25s}
header.solid .lang button{color:var(--body)}
.lang button.on{background:#E8E1D7;color:var(--ink)}
header.solid .lang button.on{background:var(--ink);color:var(--ivory)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#E8E1D7;padding:0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;min-height:100vh;align-items:center}
.hero-txt{padding:140px 54px 100px 0}
.hero .eyebrow{color:var(--brand)}
.hero h1{color:#F2ECE3}
.hero h1 em{font-style:italic;color:var(--brand)}
.hero .lead{margin:34px 0 44px;color:#ADA296}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-photo{position:relative;height:100vh;min-height:640px}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero-photo:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(23,16,11,.55) 22%,rgba(23,16,11,0) 62%)}
.scroll-hint{position:absolute;left:0;bottom:38px;display:flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#8E8378}
.scroll-hint i{display:block;width:52px;height:1px;background:#4A423B;position:relative;overflow:hidden}
.scroll-hint i:after{content:"";position:absolute;left:-52px;top:0;width:52px;height:1px;
  background:var(--brand);animation:sweep 2.6s infinite}
@keyframes sweep{0%{left:-52px}60%,100%{left:52px}}

/* ---------- faixa de numeros ---------- */
.strip{background:var(--ink-2);border-top:1px solid var(--line-dark);padding:42px 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.strip b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:34px;
  display:block;color:#EFE3D4;line-height:1.1}
.strip span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#A0968C}
/* Os numeros sao da fabrica, nao dela. Sem esta linha um gerente de hotel
   le "58 paises" como curriculo da Elis - e isso e propaganda enganosa. */
.strip-fonte{text-align:center;font-size:12.5px;color:#9C9187;margin-top:26px;
  padding-top:18px;border-top:1px solid var(--line-dark);max-width:640px;
  margin-left:auto;margin-right:auto;line-height:1.6}

/* ---------- setores ---------- */
.sec-head{max-width:720px;margin-bottom:70px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:22px}
.setores{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.setor{background:var(--ivory);padding:44px 30px 38px;position:relative;isolation:isolate;
  transition:.45s cubic-bezier(.2,.7,.3,1);cursor:default}
.setor .n{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--bronze);
  letter-spacing:.1em;display:block;margin-bottom:26px;transition:.45s}
.setor h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px;
  margin-bottom:14px;transition:.45s}
.setor p{font-size:15px;color:var(--body);line-height:1.65;transition:.45s}
/* a foto do ambiente aparece atras do cartao quando o mouse entra */
.setor .foto{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.1);z-index:-1;
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform 1.5s cubic-bezier(.2,.7,.3,1)}
/* a foto tem ponto muito claro (lustre, janela). Sem uma mascara forte o
   texto some justamente no cartao mais bonito. */
.setor .foto:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,7,.76),rgba(10,8,7,.88))}
.setor:hover .foto{opacity:1;transform:scale(1)}
.setor:hover{background:transparent}
.setor:hover h3,.setor:hover .n{color:#F2ECE3}
.setor:hover p{color:#C4B9AC}
@media(hover:none){        /* no celular nao existe hover: mostra sempre */
  .setor .foto{opacity:1;transform:none}
  .setor h3,.setor .n{color:#F2ECE3}
  .setor p{color:#C4B9AC}
}

/* ---------- o monograma dela como grafismo ----------
   A marca aparece de tres jeitos alem do cabecalho: marca d'agua gigante
   atras de uma secao, selo pequeno entre secoes, e carimbo no canto da foto.
   E a mesma logo, sem repetir o nome escrito toda hora. */
.marca-dagua{position:absolute;pointer-events:none;user-select:none;
  width:min(40vw,520px);opacity:.05;z-index:0}
.dark .marca-dagua{opacity:.07}
.marca-dagua.dir{right:-11%;top:50%;transform:translateY(-50%) rotate(-6deg)}
.marca-dagua.esq{left:-13%;bottom:-14%;transform:rotate(5deg)}
section,.ambiente{position:relative;overflow:hidden}
section > .wrap{position:relative;z-index:1}
/* Precisa de ar EM BAIXO tambem: colado na faixa escura o monograma parece
   cortado ao meio, mesmo estando inteiro. */
.selo{display:grid;place-items:center;padding:clamp(40px,6vw,74px) 0}
.selo img{width:96px;opacity:.55;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.selo.rv img{transform:scale(.82) rotate(-8deg)}
.selo.rv.in img{transform:none}
/* Precisa vencer a regra .faixa-foto img (100% de largura + proporcao 16/8).
   Sem isto o carimbo era esticado para a foto inteira e saia serrilhado. */
.faixa-foto img.carimbo,.carimbo{position:absolute;right:26px;bottom:26px;
  width:74px;height:auto;aspect-ratio:auto;object-fit:contain;
  opacity:.9;z-index:3;filter:drop-shadow(0 3px 16px rgba(0,0,0,.55))}

/* ---------- galeria de produto ---------- */
.galeria{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;align-items:stretch}
.galeria figure{margin:0;position:relative;overflow:hidden;background:var(--ink-2)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:1.1s cubic-bezier(.2,.7,.3,1)}
.galeria figure:hover img{transform:scale(1.045)}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 24px 20px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#F2ECE3;
  background:linear-gradient(0deg,rgba(10,8,7,.82),rgba(10,8,7,0))}
/* a proporcao fica na figure, nao na img: assim as tres terminam na mesma
   linha de base, em vez de cada uma parar na altura da sua propria foto */
.galeria .g-alta{aspect-ratio:5/6}
.galeria figure:not(.g-alta){min-height:100%}
/* A foto limpa da sessao do Hub so tem 614px de largura util no original
   (o resto da arte tem texto por cima). Mostrada em 1200px ela ficava mole.
   Contida em 940px fica nitida e parece uma prancha editorial, nao uma
   faixa encolhida. */
.faixa-foto{margin:clamp(50px,7vw,86px) auto 0;max-width:940px;overflow:hidden;position:relative}
.faixa-foto img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 26%}
@media(max-width:900px){
  .galeria{grid-template-columns:1fr 1fr}
  .galeria .g-alta{grid-column:span 2;aspect-ratio:4/3}
  .faixa-foto img{aspect-ratio:4/3}
}
@media(max-width:560px){.galeria{grid-template-columns:1fr}.galeria .g-alta{grid-column:span 1}}

/* ---------- blocos alternados ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split.rev .s-img{order:2}
.s-img{position:relative}
.s-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* cartaz quadrado nao pode ser cortado: perderia o titulo */
.s-img.quadrada img{aspect-ratio:1}
.s-img .tag{position:absolute;left:-1px;bottom:34px;background:var(--ivory);color:var(--ink);
  padding:16px 26px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;z-index:3}
.dark .s-img .tag{background:var(--ink);color:#E8E1D7}
.checks{list-style:none;margin:36px 0 42px;display:grid;gap:17px}
.checks li{display:flex;gap:15px;font-size:16.5px;color:var(--body)}
.checks svg{flex:none;margin-top:7px;color:var(--bronze)}

/* ---------- passos ---------- */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px)}
.passo{border-top:1px solid var(--line);padding-top:30px}
.dark .passo{border-color:var(--line-dark)}
.passo b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:44px;
  color:var(--bronze);display:block;line-height:1;margin-bottom:20px}
.passo h3{font-size:22px;margin-bottom:12px;font-family:'Cormorant Garamond',serif;font-weight:400}
.passo p{font-size:15.5px;color:var(--body)}

/* ---------- quem e ---------- */
.assinatura{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:27px;
  color:var(--brand);margin-top:34px}

/* ---------- espaco reservado do depoimento ---------- */
.aguardando{border:1px dashed var(--line);border-radius:3px;padding:46px 40px;text-align:center;
  max-width:760px;margin:0 auto;background:var(--ivory-2)}
.aguardando .eyebrow{margin-bottom:14px}
.aguardando p{color:var(--body);font-size:16px}

/* ---------- redes sociais ----------
   Os dois perfis dela tem publico diferente: o pessoal e onde estao os
   7 mil seguidores, o da marca e onde estao os produtos. Por isso os dois
   aparecem com nome e com o que a pessoa vai achar em cada um. */
.redes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1000px;margin:0 auto}
.rede{display:flex;align-items:center;gap:22px;padding:32px 34px;
  border:1px solid var(--line);border-radius:3px;background:var(--ivory);
  transition:.4s cubic-bezier(.2,.7,.3,1)}
.dark .rede{border-color:var(--line-dark);background:var(--ink-2)}
.rede:hover{border-color:var(--brand);transform:translateY(-3px)}
.rede .ic{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--brand-deep);transition:.4s}
.dark .rede .ic{border-color:var(--line-dark);color:var(--brand)}
.rede:hover .ic{background:var(--brand);border-color:var(--brand);color:#fff}
.rede b{display:block;font-size:18px;font-weight:400;margin-bottom:5px}
.rede span{display:block;font-size:14.5px;line-height:1.55;color:var(--body)}
.dark .rede span{color:#BAB0A4}
.rede .seg{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);margin-top:7px}
.dark .rede .seg{color:var(--brand)}
@media(max-width:760px){.redes{grid-template-columns:1fr}}

/* ---------- faixa de ambiente com parallax ---------- */
.ambiente{position:relative;overflow:hidden;min-height:clamp(420px,62vh,660px);
  display:grid;place-items:center;text-align:center}
.ambiente .bg{position:absolute;left:0;right:0;top:-14%;height:128%;
  background-size:cover;background-position:center;will-change:transform}
.ambiente:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,9,8,.62),rgba(12,9,8,.74))}
.ambiente .wrap{position:relative;z-index:2}
.ambiente h2{color:#F2ECE3;max-width:16ch;margin:0 auto}
.ambiente p{margin:22px auto 0;max-width:52ch;font-size:17.5px}

/* ---------- contato ---------- */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
.dados{list-style:none;display:grid;gap:26px;margin-top:40px}
.dados li{display:flex;gap:18px;align-items:flex-start}
.dados svg{flex:none;margin-top:4px}
.dados b{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#A0968C;font-weight:400;margin-bottom:5px}
.dados span{font-size:17px;color:#E8E1D7}
form{background:var(--ink-2);border:1px solid var(--line-dark);padding:44px 40px}
.campo{margin-bottom:22px}
.campo label{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#A0968C;margin-bottom:9px}
.campo input,.campo select,.campo textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid #3A322C;
  color:#E8E1D7;font-family:inherit;font-size:16px;font-weight:300;padding:11px 0;
  transition:.3s;border-radius:0}
.campo textarea{resize:vertical;min-height:78px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--brand)}
.campo select option{background:var(--ink);color:#E8E1D7}
form .btn{width:100%;justify-content:center;margin-top:12px}
.form-nota{font-size:13px;color:#948A80;text-align:center;margin-top:18px}

/* ---------- rodape ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-dark);padding:64px 0 34px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
  flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
footer img{height:132px;width:auto}
.foot-soc{display:flex;gap:14px}
.foot-soc a{width:42px;height:42px;border:1px solid var(--line-dark);border-radius:50%;
  display:grid;place-items:center;color:#A0968C;transition:.3s}
.foot-soc a:hover{border-color:var(--brand);color:var(--brand)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:28px;font-size:13px;color:#948A80}
/* assinatura da agencia: discreta, mas clicavel. E como cliente novo chega */
.credito{display:block;text-align:center;padding-top:26px;margin-top:24px;
  border-top:1px solid var(--line-dark);font-size:12.5px;color:#786C62}
.credito a{color:#A0968C;border-bottom:1px solid transparent;transition:.3s}
.credito a:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* =========================================================================
   MOVIMENTO
   Regra que segui: nada pisca, nada salta. Tudo sobe devagar e para.
   Em site de luxo o movimento tem que parecer caro, nao chamativo.
   ========================================================================= */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* linhas do titulo do hero: cada uma sobe de dentro de uma janela.
   O seletor e "> *" e nao "> span" porque a linha do italico e um <em>:
   com "> span" aquela linha nunca animava e ainda estourava a janela. */
.linha{display:block;overflow:hidden;padding:.02em .05em .1em 0}
.linha > *{display:block;transform:translateY(105%);opacity:0;
  transition:transform 1.15s cubic-bezier(.16,.84,.28,1),opacity 1.15s ease}
.pronto .linha > *{transform:none;opacity:1}
.pronto .linha:nth-child(1) > *{transition-delay:.15s}
.pronto .linha:nth-child(2) > *{transition-delay:.30s}
.pronto .linha:nth-child(3) > *{transition-delay:.45s}
.pronto .linha:nth-child(4) > *{transition-delay:.60s}

.entra{opacity:0;transform:translateY(18px);
  transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.pronto .entra{opacity:1;transform:none}
.pronto .e1{transition-delay:.05s}
.pronto .e2{transition-delay:.9s}
.pronto .e3{transition-delay:1.05s}
.pronto .e4{transition-delay:1.2s}

.hero-photo img{transform:scale(1.09);transition:transform 2.6s cubic-bezier(.16,.84,.28,1)}
.pronto .hero-photo img{transform:scale(1)}

/* cortina: uma placa desliza e descobre a foto */
.cortina{position:relative;overflow:hidden}
.cortina:after{content:"";position:absolute;inset:0;background:var(--ivory);
  transform:translateX(0);transition:transform 1.15s cubic-bezier(.7,0,.2,1);z-index:2}
.dark .cortina:after{background:var(--ink)}
.cortina img{transform:scale(1.14);transition:transform 1.7s cubic-bezier(.16,.84,.28,1)}
.cortina.in:after{transform:translateX(101%)}
.cortina.in img{transform:scale(1)}
.cortina img.carimbo{transform:none}

/* tracinho que cresce ao lado do olho-de-boi */
.eyebrow.risco:before{content:"";display:inline-block;vertical-align:middle;
  width:0;height:1px;background:currentColor;margin-right:0;opacity:.55;
  transition:width .9s cubic-bezier(.2,.7,.3,1) .15s,margin-right .9s cubic-bezier(.2,.7,.3,1) .15s}
.rv.in .eyebrow.risco:before,.pronto .eyebrow.risco:before{width:38px;margin-right:14px}

/* filhos que entram em cascata */
.cascata > *{opacity:0;transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.2,.7,.3,1),transform .95s cubic-bezier(.2,.7,.3,1)}
.cascata.in > *{opacity:1;transform:none}
.cascata.in > *:nth-child(1){transition-delay:0s}
.cascata.in > *:nth-child(2){transition-delay:.11s}
.cascata.in > *:nth-child(3){transition-delay:.22s}
.cascata.in > *:nth-child(4){transition-delay:.33s}

/* quem pediu menos movimento no sistema ve tudo parado */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.entra,.cascata > *{opacity:1;transform:none;transition:none}
  .linha > *{transform:none;opacity:1;transition:none}
  .hero-photo img,.cortina img{transform:none;transition:none}
  .cortina:after{display:none}
  .eyebrow.risco:before{width:38px;margin-right:14px;transition:none}
  .ambiente .bg{transform:none !important}
  .scroll-hint i:after{animation:none}
  .selo.rv img{transform:none}
}

/* ---------- barra do preview ---------- */
.sf-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#0B0806;color:#E8E1D7;
  border-top:1px solid #2A2018;padding:13px 0;font-size:13.5px}
.sf-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sf-bar b{font-weight:500;color:#fff}
.sf-bar span{color:#A0968C;display:block;font-size:12.5px}
.sf-bar a{border:1px solid #3A2E24;padding:9px 18px;border-radius:2px;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;transition:.3s}
.sf-bar a:hover{border-color:var(--brand);color:var(--brand)}
body{padding-bottom:74px}

/* ---------- responsivo ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding:130px 0 70px;order:2}
  .hero-photo{height:66vh;min-height:420px;order:1}
  .hero-photo:after{background:linear-gradient(0deg,var(--ink) 0%,rgba(23,16,11,.25) 45%,rgba(23,16,11,.1) 100%)}
  .scroll-hint{display:none}
  .setores{grid-template-columns:repeat(2,1fr)}
  .split,.contato-grid{grid-template-columns:1fr}
  .split.rev .s-img{order:0}
  .passos{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:repeat(2,1fr);gap:34px}
  .links{display:none}
  .marca-dagua{width:78vw;opacity:.055}
}
@media(max-width:700px){
  /* no celular o botao do topo estourava a tela e cobria o seletor de idioma.
     O hero ja tem o mesmo botao logo abaixo, entao aqui ele sai. */
  .nav-right .btn{display:none}
  .brand img{height:56px}
  header.solid .brand img{height:46px}
  .carimbo{width:52px;right:14px;bottom:14px}
  .sf-bar{padding:10px 0;font-size:12.5px}
  .sf-bar .wrap{gap:10px}
  .sf-bar span{font-size:11.5px;line-height:1.45}
  .sf-bar a{padding:7px 13px;font-size:11px}
  body{padding-bottom:96px}
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .setores{grid-template-columns:1fr}
  form{padding:34px 24px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .rede{padding:24px 22px;gap:16px}
}

/* ===========================================================================
   GALERIA EDITORIAL
   -------------------------------------------------------------------------
   Nao e carrossel. Carrossel esconde o conteudo atras de um cronometro e
   quase ninguem clica para o slide 2 - metade do material nunca e visto.
   Aqui tudo esta na tela ao mesmo tempo, e a pessoa arrasta se quiser ver
   mais. Alturas diferentes dao ritmo de revista em vez de fila de catalogo.
   =========================================================================== */
.galeria-ed{
  display:flex;gap:clamp(14px,2vw,26px);align-items:flex-end;
  overflow-x:auto;overflow-y:hidden;
  padding:0 max(32px,calc((100vw - 1240px)/2)) 10px;
  scroll-snap-type:x proximity;
  cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
}
.galeria-ed::-webkit-scrollbar{display:none}
.galeria-ed.arrastando{cursor:grabbing;scroll-snap-type:none}
.galeria-ed figure{
  margin:0;flex:none;position:relative;overflow:hidden;
  scroll-snap-align:center;background:var(--ivory-2);
  width:clamp(200px,26vw,330px);
}
.dark .galeria-ed figure{background:var(--ink-2)}
/* alturas alternadas: e o que quebra a fila e faz parecer editorial */
.galeria-ed figure:nth-child(odd){height:clamp(280px,36vw,460px)}
.galeria-ed figure:nth-child(even){height:clamp(230px,30vw,380px)}
.galeria-ed img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.3s cubic-bezier(.2,.7,.3,1);
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.galeria-ed figure:hover img{transform:scale(1.05)}
.galeria-ed figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#F2ECE3;
  background:linear-gradient(0deg,rgba(10,8,7,.8),rgba(10,8,7,0));
  opacity:0;transform:translateY(8px);transition:.5s cubic-bezier(.2,.7,.3,1);
}
.galeria-ed figure:hover figcaption{opacity:1;transform:none}

/* dica de arrastar, some no primeiro toque */
.gal-dica{
  display:flex;align-items:center;gap:12px;margin-top:26px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8E8378;
  transition:opacity .6s;
}
.dark .gal-dica{color:#9C9188}
.gal-dica.some{opacity:0}
.gal-dica i{display:block;width:44px;height:1px;background:currentColor;opacity:.5;
  position:relative;overflow:hidden}
.gal-dica i:after{content:"";position:absolute;left:-44px;top:0;width:44px;height:1px;
  background:var(--brand);animation:sweep 3s infinite}

@media(hover:none){
  .galeria-ed figcaption{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .galeria-ed img{transition:none}
  .gal-dica i:after{animation:none}
}