/* =====================================================================
   Elas Edificam · "obra em construção"
   Luxo editorial: preto quente, dourado como luz, linhas finas de planta
   baixa e cotas como ornamento. Mobile primeiro: os estilos base são do
   celular; os @media (min-width) acrescentam o layout de telas maiores.
   ===================================================================== */

/* ---------- 1. Tokens (cores, fontes, medidas) ---------- */
:root{
  /* Paleta da marca */
  --ink:#0B0A09;
  --coal:#15120E;
  --card:#1B1712;
  --line:#3A3226;
  --gold:#BF9450;
  --gold-hi:#E2C48C;
  --gold-deep:#8C6A32;
  --ivory:#F5EEE2;
  --mute:#BDB2A0;
  /* Dourado metálico: só em destaques pequenos (botão, capitel dos pilares) */
  --gold-metal:linear-gradient(115deg,#A97F3C 0%,#D2A95F 28%,#F0D9A0 48%,#C9994E 68%,#A97F3C 100%);
  /* Dourado escurecido para texto pequeno sobre marfim (contraste AA 5.4:1) */
  --gold-ink:#7A5A26;

  /* Papéis de cor: mudam sozinhos dentro de .light */
  --bg:var(--ink);
  --fg:var(--ivory);
  --fg-mute:var(--mute);
  --accent:var(--gold-hi);
  --rule:var(--line);
  --grid-line:rgba(191,148,80,.10);

  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --body:"Nunito Sans","Avenir Next","Segoe UI",Arial,sans-serif;
  --page:1240px;
  --gutter:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  --header:64px;
  color-scheme:dark;
}

/* Seções claras: troca só os papéis, o resto do CSS continua igual */
.light{
  --bg:var(--ivory);
  --fg:#15120E;
  --fg-mute:#5A4F42;
  --accent:var(--gold-ink);
  --rule:#D9CDB7;
  --grid-line:rgba(122,90,38,.10);
  color-scheme:light;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;caret-color:var(--gold)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.015em}
p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
em{font-style:italic;color:var(--accent)}
strong{font-weight:700;color:var(--fg)}
[hidden]{display:none!important}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:2px}
.light :focus-visible{outline-color:var(--gold-ink)}
html{scrollbar-color:var(--line) var(--ink)}

section{background:var(--bg);color:var(--fg)}
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}

/* Títulos: dois tamanhos. .display só nos momentos de impacto */
.display{font-size:clamp(2.6rem,8.4vw,5.6rem);line-height:.98;font-weight:340;letter-spacing:-.03em}
.h2{font-size:clamp(2rem,5.6vw,3.4rem);line-height:1.06;font-weight:360;letter-spacing:-.022em}
/* Itálico só nos momentos de impacto (.display e hero); nas seções compactas o destaque é só a cor */
.h2 em{font-style:normal}
.lead{color:var(--fg-mute);font-size:1.125rem;line-height:1.6;max-width:56ch}
/* Linha de apoio que vem DEPOIS do título (em vez de etiqueta em cima) */
.subline{font:italic 400 1.15rem/1.4 var(--display);color:var(--accent);margin-top:14px}
.prose{display:grid;gap:14px;color:var(--fg-mute);max-width:60ch}
.block-title{font-size:1.5rem;line-height:1.2}
/* Placeholders [entre colchetes] ficam visíveis de propósito */
.pending{color:var(--accent);border-bottom:1px dashed currentColor;font-style:normal}

/* Fundo de "planta baixa": grade fina dourada que some nas bordas */
.blueprint{position:relative;isolation:isolate}
.blueprint::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    linear-gradient(rgba(191,148,80,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(191,148,80,.035) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}

/* ---------- 3. Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;border-radius:2px;
  font:800 1rem/1.2 var(--body);letter-spacing:.01em;text-align:center;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-position .6s var(--ease),transform .2s var(--ease),box-shadow .3s}
.btn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease)}
.btn-gold{background:var(--gold-metal);background-size:200% 100%;background-position:0% 50%;color:var(--ink);border-color:#B8893F;
  box-shadow:0 14px 30px -18px rgba(191,148,80,.7)}
.btn-gold:hover{background-position:100% 50%}
.btn-gold:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.875rem;background:transparent;color:var(--gold-hi);border-color:var(--gold-deep)}
.btn-sm:hover{border-color:var(--gold-hi);background:rgba(191,148,80,.08)}
.btn-block{width:100%}
.text-link{display:inline-flex;align-items:center;min-height:48px;color:var(--fg);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold-deep)}
.text-link:hover{text-decoration-color:var(--gold-hi);color:var(--gold-hi)}

/* ---------- 4. Cabeçalho ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(11,10,9,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header)}
.brand{font:500 1.35rem/1 var(--display);color:var(--gold-hi);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.top nav{display:none}
.top nav ul{display:flex;gap:26px}
.top nav a{font-size:.92rem;color:var(--mute);text-decoration:none;padding-block:10px}
.top nav a:hover{color:var(--gold-hi)}
@media (min-width:1060px){.top nav{display:block}}

/* ---------- 5. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink)}
/* No celular a foto vem primeiro, grande, e se dissolve no preto */
.hero-photo{position:relative;margin:0;aspect-ratio:4/5;max-height:74svh;width:100%;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,0) 45%,rgba(11,10,9,.75) 78%,var(--ink) 100%)}
/* Marcas de corte (cantos em L) */
.crop{position:absolute;width:28px;height:28px;z-index:1;pointer-events:none}
.crop-tl{top:14px;left:14px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.crop-br{bottom:14px;right:14px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);display:none}
.hero-grid{position:static}
.hero-copy{position:relative;margin-top:-26vw;padding-bottom:48px;z-index:1}
.hero-kicker{font:italic 400 1.05rem/1.4 var(--display);color:var(--gold-hi)}
.hero h1{font-size:clamp(2.45rem,10.5vw,5.3rem);line-height:1;font-weight:330;letter-spacing:-.03em;margin-top:14px;max-width:14ch}
.hero-lead{margin-top:22px;font-size:1.125rem;color:#DCD3C4;max-width:52ch}
.hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:30px}
.hero-cta .text-link{align-self:center}
/* Garantias em linha, com filetes entre elas */
.hero-trust{display:grid;margin-top:34px;border-top:1px solid var(--line)}
.hero-trust div{display:flex;gap:12px;align-items:baseline;padding-block:12px;border-bottom:1px solid var(--line)}
.hero-trust dt{font:400 1.2rem/1.2 var(--display);color:var(--gold-hi);min-width:6.2ch}
.hero-trust dd{font-size:.94rem;color:var(--mute);line-height:1.4}
.hero-caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-bottom:40px;font-size:.88rem;color:var(--mute);line-height:1.45}
.hero-caption b{font:500 1.05rem var(--display);color:var(--ivory)}
/* "Cota": linha de medida com traços nas pontas */
.cota-line{flex:0 0 100%;height:9px;margin-bottom:8px;border-inline:1px solid var(--gold);background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat;opacity:.7}

@media (min-width:600px){
  .hero-cta{flex-direction:row;align-items:center;gap:24px}
  .hero-trust{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .hero-trust div{flex-direction:column;gap:4px;border-bottom:0;padding:14px 18px 14px 0}
  .hero-trust div + div{border-left:1px solid var(--line);padding-left:18px}
}
/* Desktop: foto ocupa a metade direita inteira; texto à esquerda */
@media (min-width:960px){
  .hero{min-height:calc(100svh - var(--header));display:flex;align-items:center}
  .hero-photo{position:absolute;top:0;right:0;bottom:0;width:47%;max-height:none;aspect-ratio:auto}
  .hero-photo img{object-position:50% 18%}
  .hero-photo::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(11,10,9,.35) 22%,rgba(11,10,9,0) 45%),linear-gradient(0deg,rgba(11,10,9,.7),rgba(11,10,9,0) 30%)}
  .crop-tl{top:28px;left:28px}
  .crop-br{display:block;bottom:28px;right:28px}
  .hero-grid{padding-block:72px}
  .hero-copy{margin-top:0;padding-bottom:0;width:calc(53vw - max(var(--gutter),calc((100vw - var(--page))/2 + var(--gutter))) - 40px)}
  .hero h1{max-width:13ch}
  /* Linha-guia vertical, como no desenho técnico */
  .hero::before{content:"";position:absolute;top:0;bottom:0;left:53%;width:1px;background:linear-gradient(180deg,transparent,rgba(191,148,80,.45) 20%,rgba(191,148,80,.45) 80%,transparent);z-index:1}
  .hero-caption{position:absolute;right:max(var(--gutter),calc((100vw - var(--page))/2 + var(--gutter)));bottom:48px;width:300px;padding:0;z-index:2;color:#D3C9B8}
}

/* ---------- 6. Placa de credenciais ---------- */
.plate{background:var(--coal);border-block:1px solid var(--line)}
.plate-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.plate li{padding:20px 14px 20px 0;min-width:0}
.plate li:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.plate li:nth-child(n+3){border-top:1px solid var(--line)}
.plate b{display:block;font:400 1.35rem/1.1 var(--display);color:var(--gold-hi)}
.plate span{display:block;margin-top:6px;font-size:.88rem;line-height:1.4;color:var(--mute)}
@media (min-width:860px){
  .plate-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plate li{padding:26px 22px;border-top:0!important}
  .plate li:first-child{padding-left:0}
  .plate li + li{border-left:1px solid var(--line);padding-left:22px}
}

/* ---------- 7. A outra margem (oceano) ----------
   Travessia: rota que se desenha com o scroll + história em trechos. */
.margem{position:relative;overflow:clip;background:linear-gradient(180deg,var(--ink) 0%,#0E0D0C 60%,#100E0B 100%);padding-block:96px 160px}
/* Abertura em três batidas com recuo crescente */
.margem-beats{display:grid;gap:2px;font:italic 300 clamp(1.5rem,5vw,2.6rem)/1.15 var(--display);color:var(--mute)}
.margem-beats span:nth-child(2){padding-left:1.4em}
.margem-beats span:nth-child(3){padding-left:2.8em;color:var(--gold-hi)}
.margem-title{margin-top:36px;max-width:10ch}

/* Celular: a carta vira uma barra fixa no topo que enche enquanto você lê */
.voyage{position:relative;margin-top:56px}
/* Mapa: no celular aparece inteiro antes da história */
.chart{margin-bottom:8px}
.chart-svg{display:block;width:100%;max-width:340px;height:auto;margin-inline:auto;overflow:visible}
.chart-sea path{fill:none;stroke:var(--gold);stroke-opacity:.1}
.land{fill:url(#hatch);stroke:var(--gold);stroke-opacity:.7;stroke-width:1;stroke-linejoin:round}
#hatch line{stroke:var(--gold);stroke-opacity:.22;stroke-width:1}
.keys{fill:none;stroke:var(--gold);stroke-opacity:.7;stroke-width:2.4;stroke-dasharray:7 3;stroke-linecap:round}
.cota-map line{stroke:var(--gold-hi);stroke-width:1}
.cota-map text,.scale text{font:italic 400 12px var(--display);fill:var(--gold-hi)}
.scale line{stroke:var(--mute);stroke-width:1}
.scale path{fill:var(--mute)}
.scale text{fill:var(--mute);font-size:10px}
.route-ghost{fill:none;stroke:var(--gold);stroke-opacity:.4;stroke-width:1.2;stroke-dasharray:2 4}
.route-line{fill:none;stroke:var(--gold-hi);stroke-width:2;stroke-linecap:round}
.route-end{fill:var(--ink);stroke:var(--gold);stroke-width:1.2}
.route-goal{stroke:var(--gold-hi)}
.swimmer{fill:var(--gold-hi);filter:drop-shadow(0 0 5px rgba(226,196,140,.7))}
.chart-label{font:italic 400 17px var(--display);fill:var(--ivory);letter-spacing:.02em}
/* Barra de progresso presa no topo enquanto a história rola (só celular) */
.chart-bar{position:sticky;top:var(--header);z-index:2;margin-inline:calc(var(--gutter) * -1);padding:12px var(--gutter);background:rgba(11,10,9,.94);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;font:italic 400 .95rem var(--display);color:var(--gold-hi)}
.chart-bar i{position:relative;flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(191,148,80,.5) 0 4px,transparent 4px 8px)}
.chart-bar b{position:absolute;left:0;top:0;height:1px;width:calc(var(--p,1) * 100%);background:var(--gold)}
.chart-bar b::after{content:"";position:absolute;right:-5px;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 4px rgba(191,148,80,.18)}

.strokes{display:grid}
.stroke{padding-block:44px;border-bottom:1px solid var(--line);transition:opacity .6s var(--ease)}
.stroke:last-child{border-bottom:0}
.stroke-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:.98rem;color:var(--mute)}
.stroke-mark b{font:300 clamp(3.4rem,15vw,6rem)/.9 var(--display);color:var(--gold);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.stroke > p:last-child{margin-top:18px;font:400 clamp(1.25rem,4.6vw,1.7rem)/1.35 var(--display);color:var(--ivory);max-width:28ch}
.stroke strong{font-weight:500;color:var(--gold-hi)}
.stroke-big{display:block;margin-top:10px;font-style:italic;font-size:1.35em;line-height:1.1}
/* Com JS: o trecho fora do centro da tela fica apagado */
.js .stroke{opacity:.4}
.js .stroke.is-current,.js .stroke.is-past{opacity:1}

/* As duas margens: uma colada à esquerda, outra à direita, a frase do meio entre elas */
.shores{display:grid;gap:22px;margin-top:88px;font:400 clamp(1.45rem,5vw,2.6rem)/1.2 var(--display)}
.shore-here{justify-self:start;max-width:13ch;padding-left:16px;border-left:1px solid var(--gold)}
.shore-there{justify-self:end;text-align:right;max-width:13ch;padding-right:16px;border-right:1px solid var(--gold)}
.shore-between{justify-self:center;text-align:center;max-width:24ch;margin-block:12px;font-style:italic;color:var(--gold-hi);font-size:.82em}

/* Palavras das margens possíveis: grandes, em contorno; a acesa fica dourada */
.areas{margin-top:72px;font:400 clamp(1.7rem,6vw,3.4rem)/1.2 var(--display);letter-spacing:-.02em;color:#857862}
.areas span{transition:color .6s var(--ease)}
.areas span.is-lit{color:var(--gold-hi)}

/* Ondas que deslizam devagar */
.waves{position:absolute;left:0;bottom:0;width:200%;height:150px;pointer-events:none}
.waves path{fill:none;stroke:var(--gold);stroke-opacity:.18;stroke-width:1;vector-effect:non-scaling-stroke}

@media (min-width:900px){
  .margem{padding-block:128px 200px}
  .margem-title{margin-top:44px}
  .voyage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;margin-top:72px}
  /* Desktop: a carta fica parada à esquerda enquanto os trechos passam */
  /* Desktop: o mapa fica parado à esquerda enquanto os trechos passam */
  .chart{position:sticky;top:calc(var(--header) + 40px);align-self:start;height:calc(100svh - var(--header) - 80px);max-height:680px;margin:0}
  .chart-bar{display:none}
  .chart-svg{width:100%;max-width:none;height:100%}
  .stroke{min-height:62svh;display:flex;flex-direction:column;justify-content:center;padding-block:56px}
  .shores{margin-top:120px}
  .shore-between{margin-block:-8px}
  .areas{margin-top:112px;max-width:22ch}
}
@media (prefers-reduced-motion:no-preference){
  .waves{animation:drift 40s linear infinite}
}
@keyframes drift{to{transform:translateX(-50%)}}

/* ---------- 8. As águas (marfim) ---------- */
.aguas{padding-block:88px}
.aguas-head{display:grid;gap:22px}
.aguas-head .subline{margin-top:0;margin-bottom:10px}
.waters{display:grid;margin-top:48px}
.waters > div{position:relative;padding:22px 0 24px;border-top:1px solid var(--rule)}
/* Pequeno traço dourado no início de cada filete, como marcação de eixo */
.waters > div::before{content:"";position:absolute;left:0;top:-5px;height:9px;border-left:1px solid var(--gold-ink)}
.waters dt{font:400 1.6rem/1.15 var(--display);color:var(--fg)}
.waters dd{margin-top:8px;color:var(--fg-mute);max-width:42ch}
.pull{margin-top:48px;padding-top:28px;border-top:1px solid var(--fg);font:italic 340 clamp(1.5rem,4.4vw,2.3rem)/1.3 var(--display);color:var(--fg);max-width:30ch}
@media (min-width:700px){.waters{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1000px){
  .aguas{padding-block:120px}
  .aguas-head{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:72px;align-items:end}
  .waters{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
  .pull{margin-left:calc(100%/3 + 16px)}
}

/* ---------- 9. História da Michelli ---------- */
.story{background:var(--coal);padding-block:88px}
.story-grid{display:grid;gap:56px}
.story-photo{position:relative;width:min(100% - 34px,440px);aspect-ratio:4/5;margin:0}
.story-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* Moldura deslocada, como o contorno de uma planta */
.story-photo::before{content:"";position:absolute;inset:-12px 12px 12px -12px;border:1px solid rgba(191,148,80,.5);pointer-events:none;z-index:1}
/* Cotas (linhas de medida) em volta da foto */
.dim{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--gold-hi);pointer-events:none}
.dim i{font:italic 400 .82rem var(--display);background:var(--coal);padding:0 8px;position:relative}
.dim-x{left:0;right:0;bottom:-30px;height:9px;border-inline:1px solid var(--gold);background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat}
.dim-y{top:0;bottom:0;right:-26px;width:9px;border-block:1px solid var(--gold);background:linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat}
.dim-y i{writing-mode:vertical-rl;transform:rotate(180deg);padding:8px 0}
.story-copy .h2{max-width:16ch}
.story-copy .prose{margin-top:26px}
.alq{display:grid;gap:10px;margin-top:30px}
.alq li{display:flex;align-items:center;gap:14px;font:400 1.25rem/1.3 var(--display);color:var(--mute)}
.alq li::before{content:"";flex:0 0 28px;height:1px;background:var(--gold)}
.alq b{font-weight:500;color:var(--ivory)}
.story blockquote{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);max-width:30ch}
.story blockquote p{font:italic 340 clamp(1.4rem,3.4vw,1.85rem)/1.32 var(--display);color:var(--ivory)}
cite{display:block;margin-top:12px;font:700 .82rem var(--body);letter-spacing:.08em;color:var(--gold-hi);font-style:normal}
.basis{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:28px;font-size:.92rem;color:var(--mute)}
.basis span{display:inline-flex;align-items:center}
.basis span:not(:last-child)::after{content:"";width:16px;height:1px;margin-inline:10px;background:var(--gold-deep)}
@media (min-width:900px){
  .story{padding-block:128px}
  .story-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:96px;align-items:center}
  .story-photo{width:100%;max-width:460px}
}

/* ---------- 10. Faixa corrida ---------- */
.marquee{background:var(--ink);border-block:1px solid var(--line);padding-block:22px 26px;overflow:hidden}
.marquee-lbl{font-size:.88rem;color:var(--mute);margin-bottom:10px}
.marquee-track{display:flex;width:max-content;animation:roll 70s linear infinite;font:italic 300 clamp(1.5rem,4vw,2.3rem)/1.2 var(--display);color:var(--ivory)}
.marquee-track span{display:inline-flex;align-items:center;white-space:nowrap}
.marquee-track span::after{content:"";width:7px;height:7px;margin-inline:30px;background:var(--gold);transform:rotate(45deg)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- 11. Método E.L.E.V.A. (peça central) ---------- */
.metodo{background:var(--coal);padding-block:96px 104px}
.metodo-head{display:grid;gap:22px}
.metodo .display em{color:var(--gold-hi);font-weight:300}
.building{position:relative;margin-top:56px}
/* Lajes: linha de cobertura e chão hachurado da fundação */
.slab{position:relative;display:flex;justify-content:flex-end;font:italic 400 .9rem var(--display);color:var(--gold-hi)}
.slab span{background:var(--coal);padding-left:10px;position:relative}
.slab-top{border-bottom:1px dashed rgba(191,148,80,.45);padding-bottom:6px;margin-bottom:0}
.slab-base{margin-top:0;padding-top:22px;justify-content:flex-start}
.slab-base::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-top:1px solid var(--gold);
  background:repeating-linear-gradient(-45deg,rgba(191,148,80,.45) 0 1px,transparent 1px 7px)}
.slab-base span{padding:0 10px 0 0}

/* Celular/tablet: os passos são andares empilhados */
.pillars{display:grid;border-left:1px solid rgba(191,148,80,.45);margin-left:6px}
.pillar{position:relative}
.pillar-in{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;padding:26px 0 28px 18px;border-top:1px solid var(--line)}
.pillar:first-child .pillar-in{border-top:0}
.pillar-letter{grid-row:1/5;font:300 4.4rem/.85 var(--display);color:var(--gold);letter-spacing:-.04em}
.pillar h3{font-size:1.75rem;line-height:1.1;color:var(--ivory)}
.pillar-kick{margin-top:4px;font-size:.9rem;font-weight:700;color:var(--gold-hi)}
.pillar p:last-child{margin-top:10px;color:var(--mute);font-size:1rem;line-height:1.55}
/* Nó estrutural na linha vertical */
.pillar::before{content:"";position:absolute;left:-5px;top:34px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}

/* Desktop largo: cinco pilares lado a lado, cada um mais alto */
@media (min-width:1100px){
  .metodo{min-height:100svh;padding-block:120px}
  .metodo-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end}
  .pillars{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;height:clamp(600px,72vh,700px);border-left:0;margin-left:0}
  .pillar{height:var(--h);display:flex;flex-direction:column;border-inline:1px solid rgba(191,148,80,.4);margin-left:-1px;
    background:linear-gradient(180deg,rgba(191,148,80,.09),rgba(191,148,80,.015) 60%,transparent)}
  /* Capitel: a única faixa em dourado metálico do método */
  .pillar::before{left:-1px;right:-1px;top:-1px;width:auto;height:3px;transform:none;background:var(--gold-metal)}
  .pillar-in{display:block;padding:30px 22px 24px;border-top:0}
  .pillar-letter{display:block;font-size:clamp(4.6rem,6vw,6rem);margin-bottom:22px}
  .pillar h3{font-size:1.6rem}
  .pillar p:last-child{font-size:.95rem}
  .slab-top{margin-bottom:24px}
}

/* ---------- 12. Alta performance + neurociência (marfim) ---------- */
.perf{padding-block:88px}
.perf-title{max-width:20ch}
.perf-grid{display:grid;gap:56px;margin-top:52px}
.perf-col h3{font-size:clamp(1.5rem,3.6vw,1.95rem);line-height:1.2;max-width:22ch}
.perf-label{margin-top:28px;font-size:.9rem;font-weight:800;color:var(--accent)}
.perf-text{margin-top:12px;color:var(--fg-mute);max-width:52ch}
/* Seis fundamentos em "planta": cômodos separados por paredes finas */
.six{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;border:1px solid var(--fg)}
.six li{padding:16px 14px;font:400 1.15rem var(--display);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.six li:nth-child(2n){border-right:0}
.six li:nth-last-child(-n+2){border-bottom:0}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:12px;font-weight:700}
.chain li{display:inline-flex;align-items:center}
.chain li:not(:last-child)::after{content:"";width:22px;height:1px;margin-inline:10px;background:var(--gold-ink);
  -webkit-mask:linear-gradient(90deg,#000 70%,transparent);mask:linear-gradient(90deg,#000 70%,transparent)}
.chain li:last-child{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.15rem;color:var(--accent)}
.note{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);font:italic 400 1.22rem/1.4 var(--display);color:var(--fg);max-width:34ch}
.steps{margin-top:22px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding-block:14px;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:300 1.7rem/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.steps b{font:500 1.15rem/1.3 var(--display)}
.steps p{color:var(--fg-mute);font-size:.98rem;line-height:1.5}
@media (min-width:600px){
  .six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .six li:nth-child(2n){border-right:1px solid var(--rule)}
  .six li:nth-child(3n){border-right:0}
  .six li:nth-last-child(-n+3){border-bottom:0}
}
@media (min-width:960px){
  .perf{padding-block:120px}
  .perf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
  .perf-col:first-child{padding-right:56px}
  .perf-col:last-child{padding-left:56px;border-left:1px solid var(--rule)}
}

/* ---------- 13. A mulher edificadora ---------- */
.edifica{padding-block:88px;background:var(--ink)}
.edifica-head .h2{max-width:22ch}
/* Seis "cômodos" numa grade de paredes finas */
.builds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--line)}
.builds li{padding:20px 14px 22px 0;border-bottom:1px solid var(--line);min-width:0}
.builds li:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
.builds b{display:block;font:400 clamp(1.2rem,3.6vw,1.6rem)/1.2 var(--display)}
.builds span{display:block;margin-top:6px;color:var(--mute);font-size:.94rem;line-height:1.45}
.verse{margin-top:30px;font:italic 400 1.3rem/1.4 var(--display);color:var(--gold-hi)}
.verse small{display:block;margin-top:6px;font:700 .85rem var(--body);color:var(--mute);font-style:normal}
/* Antes = projeto tracejado; Depois = obra pronta em linha cheia dourada */
.ba{display:grid;gap:40px;margin-top:72px}
.ba-col{padding-top:24px}
.ba-before{border-top:1px dashed #6B5E4A}
.ba-after{border-top:1px solid var(--gold)}
.ba-label{font-size:.9rem;font-weight:800;color:var(--mute)}
.ba-after .ba-label{color:var(--gold-hi)}
.ba h3{font-size:clamp(1.45rem,3.6vw,1.9rem);line-height:1.2;margin-top:10px;max-width:24ch}
.ba ul{display:grid;gap:14px;margin-top:20px}
.ba li b{display:block;font-weight:700}
.ba li span{display:block;color:var(--mute);font-size:.98rem;line-height:1.5}
.ba-before li b{color:#D3C9B8}
.ba-after li b{color:var(--gold-hi)}
/* Escada da progressão: cada degrau mais alto */
.stairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:4px;margin-top:64px;height:220px}
.stairs li{position:relative;height:calc(25% * var(--n));min-height:72px;padding:12px 8px 0;border-top:2px solid var(--gold);
  background:linear-gradient(180deg,rgba(191,148,80,.12),rgba(191,148,80,0))}
.stairs li:nth-child(1){--n:1}.stairs li:nth-child(2){--n:2}.stairs li:nth-child(3){--n:3}.stairs li:nth-child(4){--n:4}
.stairs b{display:block;font:400 clamp(.95rem,2.6vw,1.3rem)/1.2 var(--display)}
@media (min-width:860px){
  .edifica{padding-block:120px}
  .builds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .builds li,.builds li:nth-child(2n){padding:26px 24px 28px;border-left:1px solid var(--line)}
  .builds li:nth-child(3n+1){border-left:0;padding-left:0}
  .verse{text-align:right}
  .ba{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .stairs{gap:8px;height:260px}
  .stairs li{padding:16px 18px 0}
}

/* ---------- 14. Galeria de bastidores ---------- */
.gallery{background:var(--ink);padding-block:24px 96px;overflow:hidden}
.gallery-head .h2{max-width:18ch}
.gstrip{display:flex;gap:10px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
.gstrip::-webkit-scrollbar{display:none}
.gstrip figure{position:relative;flex:0 0 72%;aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;background:var(--card)}
.gstrip img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.4s var(--ease)}
.gstrip figure:hover img{transform:scale(1.035)}
.gstrip figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(180deg,transparent,rgba(11,10,9,.85));
  font:italic 400 1.4rem var(--display);color:var(--gold-hi)}
@media (min-width:860px){
  .gallery{padding-bottom:128px}
  .gstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;padding-inline:var(--gutter);margin-top:56px;align-items:start}
  .gstrip figure:nth-child(even){margin-top:72px}
}

/* ---------- 15. Como funciona (marfim) ---------- */
.como{padding-block:88px}
.como-head{display:grid;gap:22px}
.como-head .subline{margin:0 0 10px}
.formats{display:grid;margin-top:48px;border-top:1px solid var(--rule)}
.formats li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-block:22px;border-bottom:1px solid var(--rule)}
.formats svg{grid-row:span 2;width:32px;height:32px;fill:none;stroke:var(--gold-ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.formats h3{font-size:1.4rem;line-height:1.2}
.formats p{margin-top:4px;color:var(--fg-mute);line-height:1.55}
/* Fórmula como uma equação tipográfica */
.formula{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:56px;font:400 clamp(1.4rem,4.4vw,2.4rem)/1.25 var(--display)}
.formula i{font-style:normal;color:var(--accent);font-weight:300}
.formula strong{font-style:italic;font-weight:500;color:var(--accent)}
.como-grid{display:grid;gap:56px;margin-top:72px}
.bonus{margin-top:18px;border-top:1px solid var(--fg)}
.bonus li{display:grid;gap:6px;padding-block:22px;border-bottom:1px solid var(--rule)}
.bonus-n{font-size:.88rem;font-weight:800;color:var(--accent)}
.bonus b{font:500 1.35rem/1.25 var(--display)}
.bonus p{color:var(--fg-mute);line-height:1.55;max-width:60ch}
/* Ficha da turma desenhada como o "selo" de uma prancha técnica */
.ficha{border:1px solid var(--fg);padding:24px 22px 8px;position:relative;align-self:start}
.ficha::before,.ficha::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold-ink);border-style:solid}
.ficha::before{top:-8px;left:-8px;border-width:1px 0 0 1px}
.ficha::after{bottom:-8px;right:-8px;border-width:0 1px 1px 0}
.ficha dl{margin-top:14px}
.ficha dl div{padding-block:14px;border-top:1px solid var(--rule)}
.ficha dt{font-size:.88rem;font-weight:800;color:var(--fg-mute)}
.ficha dd{margin-top:4px;font:400 1.2rem/1.35 var(--display)}
@media (min-width:760px){
  .formats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
}
@media (min-width:1000px){
  .como{padding-block:120px}
  .como-head{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:end}
  .como-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:80px}
}

/* ---------- 16. Depoimentos ---------- */
.feedbacks{background:var(--coal);padding-block:88px;overflow:hidden}
.fb-grid{display:grid;gap:36px}
.fb-head .lead{margin-top:16px}
.fb{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.phone{flex:0 0 210px;scroll-snap-align:start;aspect-ratio:9/18;border-radius:30px;border:1px solid var(--line);background:#100E0B;padding:10px;position:relative;display:flex}
.phone::before{content:"";position:absolute;top:9px;left:50%;width:56px;height:5px;margin-left:-28px;border-radius:5px;background:var(--line)}
.screen{flex:1;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;
  background:radial-gradient(120% 70% at 50% 0%,rgba(191,148,80,.22),transparent 62%),var(--ink);border:1px dashed rgba(191,148,80,.3)}
.screen svg{width:40px;height:40px;fill:none;stroke:var(--gold-hi);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.screen b{font:400 1.2rem var(--display);color:var(--ivory)}
.screen small{font-size:.8rem;color:var(--mute)}
/* Moldura com vídeo: mesma proporção do vídeo (9:16), sem a "câmera" desenhada por cima */
.phone-video{margin:0;aspect-ratio:9/16.6;border-color:var(--gold-deep)}
.phone-video::before{display:none}
.screen-video{flex:1;width:100%;min-width:0;border-radius:22px;object-fit:cover;background:var(--ink)}
@media (min-width:1000px){
  .feedbacks{padding-block:120px}
  .fb-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:center}
}

/* ---------- 17. A mentora (marfim) ---------- */
.mentora{padding-block:88px}
.mentora-grid{display:grid;gap:48px}
.mentora-photo{position:relative;margin:0 12px 0 0;aspect-ratio:2/3;max-height:80svh}
.mentora-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.mentora-photo::after{content:"";position:absolute;inset:12px -12px -12px 12px;border:1px solid var(--gold-ink);z-index:-1}
.mentora-photo{isolation:isolate}
.mentora-tag{font:italic 400 1.25rem var(--display);color:var(--accent)}
.mentora .display{margin-top:6px;font-size:clamp(2.6rem,8vw,5rem)}
.role{margin-top:10px;font:italic 400 1.2rem var(--display);color:var(--fg-mute)}
.mentora .prose{margin-top:26px}
.mentora .prose p:first-child{color:var(--fg);font-size:1.12rem}
.mcreds{display:grid;margin-top:32px}
.mcreds div{padding-block:14px;border-top:1px solid var(--rule)}
.mcreds dt{font-size:.9rem;font-weight:800;color:var(--accent)}
.mcreds dd{margin-top:3px;line-height:1.45}
.mstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:32px;max-width:520px}
.mstrip img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
@media (min-width:600px){.mcreds{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
@media (min-width:960px){
  .mentora{padding-block:128px}
  .mentora-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:88px;align-items:start}
  .mentora-photo{position:sticky;top:calc(var(--header) + 32px);max-height:none}
}

/* ---------- 18. Para quem é / não é ---------- */
.fit{padding-block:88px;background:var(--ink)}
.fit-title{max-width:20ch}
.fit-grid{display:grid;gap:48px;margin-top:48px}
.yes{margin-top:14px}
.yes li{position:relative;padding:18px 0 18px 40px;border-top:1px solid var(--line);font-size:1.08rem}
.yes li:last-child{border-bottom:1px solid var(--line)}
/* Visto desenhado com bordas */
.yes li::before{content:"";position:absolute;left:4px;top:23px;width:7px;height:13px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
.no{padding:24px 22px;border:1px dashed #6B5E4A}
.no .block-title{font-size:1.3rem}
.no li{position:relative;margin-top:14px;padding-left:26px;color:var(--mute)}
.no li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:1px;background:var(--gold)}
.ready{display:grid;gap:24px;margin-top:56px}
.ready div{padding-top:16px;border-top:1px solid var(--gold)}
.ready dt{font:400 1.35rem/1.25 var(--display)}
.ready dd{margin-top:6px;color:var(--mute);line-height:1.5}
@media (min-width:900px){
  .fit{padding-block:120px}
  .fit-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:72px;align-items:start}
  .ready{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:72px}
}

/* ---------- 19. Garantia (momento de impacto) ---------- */
.garantia{background:var(--coal);padding-block:96px;border-top:1px solid var(--line)}
.garantia-grid{display:grid;gap:40px;justify-items:start}
.seal{position:relative;width:200px;aspect-ratio:1}
.seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal circle{fill:none;stroke:var(--gold);stroke-width:1}
.seal circle + circle{stroke-dasharray:3 4;stroke-opacity:.7}
.seal text{font:700 10.5px var(--body);letter-spacing:.18em;fill:var(--gold-hi)}
.seal-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.seal-num b{font:300 4.6rem/1 var(--display);color:var(--gold)}
.seal-num span{font-size:.72rem;font-weight:800;color:var(--gold-hi);max-width:9ch;line-height:1.25;margin-inline:auto}
.garantia .display{font-size:clamp(2.3rem,7vw,4.6rem);max-width:15ch}
.garantia .lead{margin-top:22px}
@media (min-width:860px){
  .garantia{min-height:86svh;display:flex;align-items:center;padding-block:128px}
  .garantia-grid{grid-template-columns:auto minmax(0,1fr);gap:88px;align-items:center}
  .seal{width:300px}
  .seal-num b{font-size:7rem}
  .seal-num span{font-size:.82rem}
}

/* ---------- 20. FAQ (marfim) ---------- */
.faq{padding-block:88px}
.faq-grid{display:grid;gap:36px}
.faq-list details{border-top:1px solid var(--rule)}
.faq-list details:last-child{border-bottom:1px solid var(--rule)}
.faq-list summary{list-style:none;cursor:pointer;position:relative;padding:20px 44px 20px 0;min-height:64px;font:400 1.25rem/1.3 var(--display)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent)}
/* Sinal de + desenhado com duas linhas; a vertical some ao abrir */
.faq-list summary::before,.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1.5px;background:var(--gold-ink);transition:transform .35s var(--ease)}
.faq-list summary::after{transform:rotate(90deg)}
.faq-list details[open] summary::after{transform:rotate(0)}
.faq-list details p{color:var(--fg-mute);padding-bottom:22px;max-width:62ch}
@media (min-width:900px){
  .faq{padding-block:120px}
  .faq-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px}
  .faq-head{position:sticky;top:calc(var(--header) + 40px);align-self:start}
}

/* ---------- 21. Inscrição (momento de impacto) ---------- */
.inscricao{background:radial-gradient(60% 60% at 85% 30%,rgba(191,148,80,.12),transparent 70%),var(--ink);padding-block:96px;border-top:1px solid var(--line)}
.inscricao-grid{display:grid;gap:56px}
.inscricao .display{font-size:clamp(2.3rem,7vw,4.4rem);max-width:15ch}
.inscricao .lead{margin-top:28px;color:var(--ivory)}
.qs{margin-top:16px;counter-reset:q}
.qs li{counter-increment:q;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:baseline;padding-block:13px;border-top:1px solid var(--line);font:400 1.15rem/1.4 var(--display)}
.qs li::before{content:counter(q);display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--gold);border-radius:50%;font:700 .85rem/1 var(--body);color:var(--gold-hi);transform:translateY(-2px)}
.sign{display:flex;align-items:center;gap:16px;margin-top:32px}
.sign img{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:1px solid var(--gold)}
.sign b{display:block;font:500 1.15rem var(--display)}
.sign span{font-size:.92rem;color:var(--mute)}
/* Formulário: campos grandes (fonte >= 16px evita zoom no iPhone) */
#lead,.done{border:1px solid var(--gold-deep);background:var(--coal);padding:28px 20px;display:grid;gap:22px}
#lead h3{font-size:1.7rem;line-height:1.15}
.field{display:grid;gap:8px}
.field label{font-size:.95rem;font-weight:700;color:var(--ivory)}
.opt{font-weight:400;color:var(--mute)}
.field input,.field textarea{width:100%;background:var(--ink);border:1px solid #4A4031;border-radius:2px;color:var(--ivory);font:400 1.0625rem/1.4 var(--body);padding:14px 14px;min-height:56px;
  transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:#9A8F7E}
.field input:hover,.field textarea:hover{border-color:#6B5E4A}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(191,148,80,.25)}
.field input[aria-invalid="true"]{border-color:#E08A73}
.field small{font-size:.88rem;color:var(--mute)}
.err{color:#F2A48F;font-size:.92rem;font-weight:600}
.consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:.94rem;line-height:1.5;color:var(--mute);cursor:pointer}
.consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--gold)}
.mini{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;color:var(--gold-hi)}
.mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.done p{font:400 1.45rem/1.3 var(--display)}
.done small{color:var(--mute)}
.done:focus{outline:none}
@media (min-width:600px){#lead,.done{padding:36px}}
@media (min-width:960px){
  .inscricao{padding-block:128px}
  .inscricao-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:start}
  .form-wrap{position:sticky;top:calc(var(--header) + 32px)}
}

/* ---------- 22. Encerramento ---------- */
.closing{background:var(--coal);padding-block:88px;border-top:1px solid var(--line)}
.closing blockquote p{font:italic 300 clamp(1.6rem,4.6vw,2.8rem)/1.28 var(--display);max-width:28ch;color:var(--ivory)}
.motto{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:36px;font:400 1.2rem var(--display);color:var(--gold-hi)}
.motto span{display:inline-flex;align-items:center}
.motto span:not(:last-child)::after{content:"";width:5px;height:5px;margin-inline:14px;background:var(--gold);transform:rotate(45deg)}
@media (min-width:900px){.closing{padding-block:120px}.closing .wrap{padding-left:calc(var(--gutter) + 8%)}}

/* ---------- 23. Rodapé ---------- */
.foot{background:var(--ink);border-top:1px solid var(--line);padding-block:56px 40px;font-size:.92rem;color:var(--mute)}
.foot-grid{display:grid;gap:32px}
.foot-motto{margin-top:12px;font:italic 400 1.2rem var(--display);color:var(--gold-hi)}
.foot-grid p + p{margin-top:8px}
.foot a:not(.brand){color:var(--gold-hi)}
.foot-info a{display:inline-block;padding-block:4px}
.disc{border-top:1px solid var(--line);padding-top:22px;font-size:.86rem;max-width:90ch}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}.disc{grid-column:1/-1}}

/* ---------- 24. Barra fixa no celular ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(11,10,9,.95);border-top:1px solid var(--line);transition:transform .4s var(--ease)}
.mbar.is-away{transform:translateY(110%)}
@media (min-width:760px){.mbar{display:none}}
@media (max-width:759px){body{padding-bottom:80px}}

/* ---------- 25. Animações de entrada ----------
   Só existem com JS ativo (.js) e se a pessoa não pediu menos movimento. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}

  /* Hero: texto entra em sequência e a foto se revela de baixo para cima */
  .js .hero-copy > *{animation:rise 1s var(--ease) both}
  .js .hero-copy > :nth-child(2){animation-delay:.08s}
  .js .hero-copy > :nth-child(3){animation-delay:.16s}
  .js .hero-copy > :nth-child(4){animation-delay:.24s}
  .js .hero-copy > :nth-child(5){animation-delay:.32s}
  .js .hero-photo img{animation:unveil 1.4s var(--ease) both}

  /* Método: cada pilar/andar "sobe" da fundação (clip-path), um após o outro */
  .js .pillar{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease);transition-delay:calc(var(--i,0) * 140ms)}
  .js .pillar.is-in{clip-path:inset(0 0 0 0)}
  .js .stairs li{transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
  .js .stairs.is-in li{transform:none}
}
@media (prefers-reduced-motion:no-preference) and (min-width:1100px){
  .js .pillar{clip-path:inset(100% 0 0 0)}
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
@keyframes unveil{from{clip-path:inset(100% 0 0 0);transform:scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* Faixa corrida vira texto parado que quebra linha */
  .marquee-track{flex-wrap:wrap;width:auto;padding-inline:var(--gutter);row-gap:6px;font-size:1.4rem}
  .marquee-track span:nth-child(n+9){display:none}
}