/* =========================================================
   ATELIÊ COPYNET PERSONALIZADOS — micro landing page
   Direção de arte: "papel do ateliê"
   Paleta extraída do próprio logo e das capas dos destaques.
   Luz: superior esquerda. Sombras curtas, quentes, de papel.
   ========================================================= */

:root{
  /* --- tinta e papel (cores reais da marca) --- */
  --ink:          #3A1A05;   /* espresso profundo — texto principal */
  --ink-brand:    #542404;   /* marrom dominante do logo */
  --ink-soft:     #7B5233;   /* texto secundário */
  --ink-faint:    #8A6647;   /* legendas e microtexto (contraste AA) */

  --paper:        #FBF1E2;   /* fundo da página */
  --paper-card:   #FFF8EC;   /* superfície elevada */
  --paper-deep:   #F3E4CE;   /* recuos e faixas */
  --cream:        #FFF0D9;   /* creme das capas de destaque */

  --rose:         #FFBDD4;   /* rosé do letreiro do logo */
  --rose-mid:     #E4A0B6;
  --rose-deep:    #A65C77;
  --gold:         #B98A4B;   /* hot stamping / foil */

  /* --- borda e sombra --- */
  --line:         rgba(58,26,5,.14);
  --line-soft:    rgba(58,26,5,.08);
  --sh-1: 0 1px 2px rgba(84,36,4,.05), 0 2px 6px rgba(84,36,4,.04);
  --sh-2: -1px 3px 10px rgba(84,36,4,.07), -2px 8px 24px rgba(84,36,4,.06);
  --sh-3: -2px 6px 18px rgba(84,36,4,.14), -4px 16px 40px rgba(84,36,4,.12);

  /* --- forma --- */
  --r-sm: 10px;   /* selos e ícones */
  --r-md: 16px;   /* cards e linhas */
  --r-lg: 22px;   /* blocos protagonistas */
  --r-pill: 999px;

  /* --- ritmo --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- tipografia --- */
  --display: 'Cinzel', 'Times New Roman', serif;   /* letras gravadas, como no logo */
  --body: 'Jost', 'Segoe UI', system-ui, sans-serif;

  /* --- movimento: artesanal = lento e curto --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .22s;
  --t-slow: .55s;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }

:focus-visible{
  outline:2px solid var(--rose-deep);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================
   PLANO 01 — o papel
   Fibra + luz difusa. Justificativa: a empresa vive de papel;
   o fundo é a folha em que a página está impressa.
   ========================================================= */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.paper-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 62% at 22% -8%, #FFFCF4 0%, rgba(255,252,244,0) 62%),
    radial-gradient(90% 48% at 92% 8%, rgba(255,189,212,.20) 0%, rgba(255,189,212,0) 60%);
}

.page{
  position:relative; z-index:1;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  padding-inline:22px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding-top:calc(46px + env(safe-area-inset-top));
  padding-bottom:var(--s7);
  text-align:center;
}

/* marca — plano 05, o protagonista da primeira dobra */
.mark{
  position:relative;
  width:132px; height:132px;
  margin:0 auto var(--s5);
}
.mark-img{
  position:relative; z-index:2;
  width:100%; height:100%;
  border-radius:50%;
  filter:drop-shadow(-2px 6px 16px rgba(84,36,4,.26));
}
/* halo: a luz que bate no relevo do carimbo. Um anel só, discreto. */
.mark-halo{
  position:absolute; inset:-13px; z-index:1;
  border-radius:50%;
  border:1px solid rgba(185,138,75,.42);
}
.mark-halo::after{
  content:''; position:absolute; inset:6px;
  border-radius:50%;
  border:1px dashed rgba(228,160,182,.5);
}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:400;
  margin-bottom:var(--s3);
}

/* letreiro gravado: leve relevo claro em cima + sombra embaixo,
   igual a papel com hot stamping. */
.wordmark{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem, 10.5vw, 2.75rem);
  line-height:1.06;
  letter-spacing:.02em;
  color:var(--ink-brand);
}
.engrave{
  position:relative;
  display:inline-block;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 -1px 0 rgba(84,36,4,.10),
    -1px 3px 7px rgba(84,36,4,.14);
}
/* passagem do laser: acontece uma vez, na entrada. Não fica piscando. */
.engrave::after{
  content:''; position:absolute; inset:-6px -14px;
  background:linear-gradient(105deg,
    transparent 38%, rgba(255,240,217,.9) 48%,
    rgba(255,189,212,.75) 52%, transparent 62%);
  transform:translateX(-115%);
  animation:laser 1.7s var(--ease) 1.15s 1 both;
  pointer-events:none;
  mix-blend-mode:screen;
}
/* a passagem só existe enquanto atravessa o letreiro: fora dele, apaga —
   senão o clarão fica estacionado ao lado do título. */
@keyframes laser{
  0%   { transform:translateX(-115%); opacity:0; }
  18%  { opacity:1; }
  82%  { opacity:1; }
  100% { transform:translateX(115%); opacity:0; }
}

/* filete tipográfico com o coração do logo */
.rule{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s3);
  margin:var(--s4) auto var(--s4);
  max-width:230px;
  color:var(--rose-deep);
}
.rule-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(185,138,75,.55), transparent);
}
.rule-mark{ width:19px; height:19px; flex:none; }

.lede{
  font-size:1.06rem;
  color:var(--ink-soft);
  max-width:27ch;
  text-wrap:balance;
  margin:0 auto var(--s3);
}
/* Cinzel só tem caixa alta: a segunda linha fica na fonte de texto,
   com peso maior, para não virar um bloco gritado. */
.lede em{
  display:block;
  font-style:normal;
  font-weight:500;
  color:var(--ink-brand);
  margin-top:2px;
}

.serves{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
  padding:5px 14px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  background:rgba(255,248,236,.7);
  margin-bottom:var(--s6);
}
.serves::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--rose-mid);
}

/* =========================================================
   CTA PRINCIPAL — nível 3 de elevação. Nada mais na página
   tem esse peso.
   ========================================================= */
.cta-main{
  position:relative;
  display:flex; align-items:center; gap:var(--s4);
  width:100%;
  padding:17px 20px;
  background:linear-gradient(150deg, #5E2B08 0%, var(--ink) 58%, #2E1404 100%);
  color:var(--cream);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  overflow:hidden;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cta-main::before{ /* fio de foil na borda superior */
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,240,217,.18);
  border-top-color:rgba(185,138,75,.55);
  pointer-events:none;
}
.cta-main:active{ transform:scale(.985); box-shadow:var(--sh-2); }

.foil{
  position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,240,217,.16), rgba(185,138,75,.22), transparent);
  transform:translateX(-160%);
  animation:foilpass 2.4s var(--ease) 1.9s 1 both;
  pointer-events:none;
}
@keyframes foilpass{ to{ transform:translateX(340%); } }

.cta-ico{ width:26px; height:26px; flex:none; color:var(--rose); }
.cta-txt{ flex:1; text-align:left; display:block; }
.cta-txt strong{
  display:block;
  font-family:var(--display);
  font-weight:600; font-size:1.04rem; letter-spacing:.03em;
}
.cta-txt small{
  display:block;
  font-size:.78rem; color:rgba(255,240,217,.62);
  letter-spacing:.02em; margin-top:1px;
}
.cta-arrow{ width:20px; height:20px; flex:none; color:rgba(255,240,217,.55); }

.cta-sub{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:var(--s4);
  font-size:.9rem;
  color:var(--ink-soft);
  border-bottom:1px solid rgba(185,138,75,.45);
  padding-bottom:2px;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cta-sub svg{ width:16px; height:16px; }
.cta-sub:hover{ color:var(--ink-brand); border-color:var(--ink-brand); }

/* =========================================================
   DECKLE — a borda rasgada do papel. Faz a rolagem virar
   uma folha só, em vez de blocos empilhados.
   ========================================================= */
.deckle{
  position:relative;
  margin-inline:calc(50% - 50vw);
  width:100vw;
  line-height:0;
  color:var(--paper-card);
  filter:drop-shadow(0 -2px 6px rgba(84,36,4,.05));
}
.deckle svg{ width:100%; height:34px; fill:currentColor; }

/* =========================================================
   O QUE FAZEMOS
   ========================================================= */
.craft{
  margin-inline:calc(50% - 50vw);
  width:100vw;
  background:var(--paper-card);
  padding:var(--s6) 22px var(--s7);
}
.craft > *{ max-width:476px; margin-inline:auto; }

.kicker{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose-deep); font-weight:400;
  display:flex; align-items:center; gap:9px;
}
.kicker::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(185,113,138,.35), transparent);
}
.sec-title{
  font-family:var(--display);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.22;
  color:var(--ink-brand);
  margin:var(--s3) 0 var(--s5);
  letter-spacing:.01em;
  text-wrap:balance;
}

.craft-grid{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
}

/* card = folha de papel destacada. Nível 1, sobe a nível 2 no toque. */
.tile{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:var(--s4) 14px var(--s4);
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:rgba(185,138,75,.32); }

/* selo circular creme — o mesmo tratamento das capas de destaque do perfil */
.tile-ico{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid rgba(185,138,75,.28);
  color:var(--ink-brand);
  margin-bottom:var(--s3);
  box-shadow:inset -1px 2px 4px rgba(84,36,4,.06);
}
.tile-ico svg{ width:25px; height:25px; }

.tile h3{
  font-family:var(--display);
  font-weight:500;
  font-size:.96rem;
  line-height:1.24;
  color:var(--ink-brand);
  letter-spacing:.01em;
  text-wrap:balance;
}
.tile p{
  font-size:.8rem;
  color:var(--ink-faint);
  line-height:1.45;
  margin-top:5px;
}

.tile-wide{
  display:flex; align-items:center; gap:var(--s4);
  margin-top:var(--s3);
  padding:var(--s4) var(--s4);
}
.tile-wide .tile-ico{ margin-bottom:0; flex:none; }
.tile-wide p{ max-width:30ch; }

/* =========================================================
   EMPRESAS — inversão de tinta. Marca o público B2B da bio
   e quebra o ritmo da rolagem.
   ========================================================= */
.corp{
  margin-inline:calc(50% - 50vw);
  width:100vw;
  background:
    radial-gradient(90% 120% at 12% 0%, #5E2B08 0%, transparent 62%),
    linear-gradient(165deg, var(--ink-brand), #2C1304);
  padding:var(--s7) 22px;
  position:relative;
  overflow:hidden;
}
.corp::before{ /* trama de linhas: a grade de corte da mesa do laser */
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,189,212,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,189,212,.07) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(70% 80% at 80% 20%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(70% 80% at 80% 20%, #000, transparent 72%);
}
.corp-inner{ position:relative; max-width:476px; margin-inline:auto; }

.kicker-light{ color:var(--rose); }
.kicker-light::after{ background:linear-gradient(90deg, rgba(255,189,212,.4), transparent); }
.sec-title-light{ color:var(--cream); }

.corp-txt{
  color:rgba(255,240,217,.72);
  font-size:.95rem;
  max-width:34ch;
  margin-bottom:var(--s5);
}
.corp-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px;
  background:var(--cream);
  color:var(--ink);
  border-radius:var(--r-pill);
  font-weight:500; font-size:.92rem;
  letter-spacing:.02em;
  box-shadow:-1px 4px 14px rgba(0,0,0,.28);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.corp-cta svg{ width:17px; height:17px; }
.corp-cta:active{ transform:scale(.97); }
.corp-cta:hover{ box-shadow:-1px 6px 20px rgba(0,0,0,.34); }

/* =========================================================
   ACESSOS — secundários. Peso deliberadamente menor que o CTA.
   ========================================================= */
.access{ padding:var(--s7) 0 var(--s6); }

.row{
  display:flex; align-items:center; gap:var(--s4);
  padding:14px 16px;
  margin-top:var(--s3);
  background:var(--paper-card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.row:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:rgba(185,138,75,.3); }
.row:active{ transform:scale(.99); }

.row-ico{
  display:grid; place-items:center;
  width:42px; height:42px; flex:none;
  border-radius:50%;
  background:var(--cream);
  border:1px solid rgba(185,138,75,.26);
  color:var(--ink-brand);
}
.row-ico svg{ width:21px; height:21px; }

.row-txt{ flex:1; min-width:0; }
.row-txt strong{
  display:block;
  font-weight:500; font-size:.94rem;
  color:var(--ink);
  letter-spacing:.01em;
}
.row-txt small{
  display:block;
  font-size:.78rem; color:var(--ink-faint);
  margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row-arrow{ width:17px; height:17px; flex:none; color:var(--ink-faint); }

/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */
.where{ padding-bottom:var(--s7); }

.addr{
  font-style:normal;
  font-size:.95rem;
  color:var(--ink-soft);
  margin-bottom:var(--s4);
  padding-left:var(--s4);
  border-left:2px solid var(--rose-mid);
}

/* o mapa entra como uma foto colada no papel, com sobreposição
   de textura para não parecer um widget solto */
.map{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  background:var(--paper-deep);
  line-height:0;
}
.map iframe{
  display:block;
  border:0;
  width:100%;
  filter:sepia(.22) saturate(.86) contrast(1.02);
}
.map::after{ /* vinheta quente: casa o mapa com a paleta do papel */
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 34px rgba(84,36,4,.16);
  border-radius:inherit;
}

.where-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
  margin-top:var(--s4);
}
.btn-ink,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 12px;
  border-radius:var(--r-pill);
  font-size:.88rem; font-weight:500; letter-spacing:.02em;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-ink svg,.btn-ghost svg{ width:17px; height:17px; flex:none; }
.btn-ink{
  background:var(--ink-brand); color:var(--cream);
  box-shadow:var(--sh-2);
}
.btn-ink:active,.btn-ghost:active{ transform:scale(.97); }
.btn-ghost{
  background:transparent;
  color:var(--ink-brand);
  border:1px solid rgba(185,138,75,.5);
}
.btn-ghost:hover{ background:rgba(255,240,217,.7); }

/* =========================================================
   FECHAMENTO
   ========================================================= */
.closing{
  text-align:center;
  padding:var(--s7) var(--s5) var(--s6);
  background:var(--paper-card);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.closing-mark{
  width:26px; height:26px;
  margin:0 auto var(--s3);
  color:var(--rose-mid);
}
.closing h2{
  font-family:var(--display);
  font-weight:600; font-size:1.32rem; line-height:1.25;
  color:var(--ink-brand);
  max-width:20ch; margin:0 auto var(--s2);
  letter-spacing:.01em;
  text-wrap:balance;
}
.closing p{
  font-size:.92rem; color:var(--ink-faint);
  max-width:28ch; margin:0 auto var(--s5);
}
.cta-main-sm{ padding:15px 20px; }
.cta-main-sm .cta-txt{ text-align:center; }

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{
  text-align:center;
  padding:var(--s7) 0 var(--s5);
}
.foot-mark{ margin:0 auto var(--s3); opacity:.85; border-radius:50%; }
.foot-name{
  font-family:var(--display);
  font-weight:500; font-size:.92rem;
  color:var(--ink-brand);
  letter-spacing:.06em;
}
.foot-meta{ font-size:.82rem; color:var(--ink-faint); margin-top:3px; }
.foot-meta a{ border-bottom:1px solid rgba(185,138,75,.4); }
.foot-legal{ font-size:.72rem; color:var(--ink-faint); opacity:.88; margin-top:var(--s4); }

/* =========================================================
   BARRA FIXA — aparece só depois que o CTA do hero sai da tela,
   para não competir com ele na primeira dobra.
   ========================================================= */
.dock{
  position:fixed; z-index:20;
  left:0; right:0; bottom:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--paper) 62%, rgba(251,241,226,0));
  transform:translateY(120%);
  transition:transform .4s var(--ease);
}
.dock.is-on{ transform:translateY(0); }
.dock-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:480px; margin-inline:auto;
  padding:14px 18px;
  background:linear-gradient(150deg, #5E2B08, var(--ink));
  color:var(--cream);
  border-radius:var(--r-pill);
  font-weight:500; font-size:.94rem; letter-spacing:.02em;
  box-shadow:var(--sh-3);
  border:1px solid rgba(185,138,75,.32);
  transition:transform var(--t-fast) var(--ease);
}
.dock-btn svg{ width:20px; height:20px; color:var(--rose); flex:none; }
.dock-btn:active{ transform:scale(.98); }

/* =========================================================
   ENTRADA — stagger curto. Só o hero e os cards principais.
   ========================================================= */
/* o estado escondido só existe se o JS estiver rodando — conteúdo nunca
   fica preso atrás de um script que não carregou */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

.js .hero .reveal[data-r="1"]{ transition-delay:.05s; }
.js .hero .reveal[data-r="2"]{ transition-delay:.16s; }
.js .hero .reveal[data-r="3"]{ transition-delay:.26s; }
.js .hero .reveal[data-r="4"]{ transition-delay:.36s; }
.js .hero .reveal[data-r="5"]{ transition-delay:.44s; }
.js .hero .reveal[data-r="6"]{ transition-delay:.52s; }
.js .hero .reveal[data-r="7"]{ transition-delay:.62s; }
.js .hero .reveal[data-r="8"]{ transition-delay:.72s; }

.js .craft-grid .tile:nth-child(2n){ transition-delay:.08s; }

/* =========================================================
   TELAS MENORES (360 / 375)
   ========================================================= */
@media (max-width:380px){
  .page{ padding-inline:18px; }
  .craft{ padding-inline:18px; }
  .corp{ padding-inline:18px; }
  .mark{ width:118px; height:118px; }
  .lede{ font-size:1rem; }
  .tile{ padding:14px 12px; }
  .tile-ico{ width:42px; height:42px; }
  .tile-ico svg{ width:23px; height:23px; }
  .cta-txt strong{ font-size:.98rem; }
  .where-actions{ grid-template-columns:1fr; }
}

/* =========================================================
   TABLET E DESKTOP — mais respiro, nunca mais largura.
   ========================================================= */
@media (min-width:768px){
  body{ font-size:17px; }
  .page{ max-width:560px; padding-bottom:var(--s8); }
  .hero{ padding-top:var(--s8); }
  .mark{ width:150px; height:150px; }
  .craft > *, .corp-inner{ max-width:516px; }
  .sec-title{ font-size:1.68rem; }
  .closing h2{ font-size:1.5rem; }
  .dock{ display:none; }   /* no desktop o CTA do hero já fica visível */
}

@media (min-width:1100px){
  body{
    background:
      radial-gradient(60% 60% at 8% 12%, rgba(255,189,212,.14), transparent 60%),
      radial-gradient(50% 50% at 96% 78%, rgba(185,138,75,.12), transparent 60%),
      var(--paper-deep);
  }
  .page{
    background:var(--paper);
    box-shadow:-4px 0 40px rgba(84,36,4,.09), 4px 0 40px rgba(84,36,4,.09);
  }
  .craft, .corp, .deckle{ margin-inline:0; width:auto; }
  .craft{ margin-inline:-22px; padding-inline:22px; }
  .corp{ margin-inline:-22px; padding-inline:22px; }
  .deckle{ margin-inline:-22px; }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .dock{ transform:translateY(0); }
}