@font-face{font-family:"Tinos";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Tinos-Regular.ttf") format("truetype")}
@font-face{font-family:"Tinos";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/Tinos-Italic.ttf") format("truetype")}
/* IFM — folha única. Gerada a partir de styles.css + ui_kits/site-start/site.css */

/* ── tokens/fonts.css ── */
/* Fonts — SUBSTITUTED. The IFM source declares system stacks only
   (--serif: "Times New Roman", Georgia, serif / --sans: "Helvetica Neue", Inter, Arial).
   Tinos is the metric-compatible Times clone, loaded so the display voice renders
   identically everywhere. Replace with the real licensed brand faces when available. */


:root {
  --font-serif-display: "Tinos", "Times New Roman", Georgia, serif;
  --font-sans-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--font-serif-display);
  --sans: var(--font-sans-ui);
}

/* ── tokens/colors.css ── */
/* Colors — verbatim from output/ifm (brief: briefs/ifm.brief.yaml) */
:root {
  /* base */
  --ifm-petrol-900: #07181E;  /* bg — concrete & deep petrol */
  --ifm-gold-500: #C9A15F;    /* accent — warm light */
  --ifm-bone-100: #EAE3D6;    /* text — off-white / bone */

  /* atmosphere ramp: fog color per manifesto chapter (surface → depth) */
  --ifm-fog-1: #536e82;
  --ifm-fog-2: #405969;
  --ifm-fog-3: #2d4350;
  --ifm-fog-4: #1a2e37;
  --ifm-fog-5: #07181e;

  /* particle ramp: bone drifting toward gold as autonomy rises */
  --ifm-particle-1: #f7f4ef;
  --ifm-particle-2: #ecdfcb;
  --ifm-particle-3: #e0cba7;
  --ifm-particle-4: #d5b683;
  --ifm-particle-5: #c9a15f;

  /* godray / volumetric haze */
  --ifm-godray: #bfe0ff;

  /* semantic */
  --bg: var(--ifm-petrol-900);
  --accent: var(--ifm-gold-500);
  --text: var(--ifm-bone-100);
  --muted: rgba(234, 227, 214, 0.55);
  --hairline: rgba(255, 255, 255, 0.12);
  --surface-veil: var(--ifm-petrol-900);
  --on-accent: #000000;
}

/* ── tokens/typography.css ── */
/* Type — exact values from output/ifm/site.css */
:root {
  /* display (serif, weight 400 only — never bold) */
  --type-h1-size: clamp(48px, 8.5vw, 132px);
  --type-h1-line: 0.98;
  --type-h1-track: -0.01em;
  --type-h2-size: clamp(34px, 5.2vw, 74px);
  --type-h2-line: 1.02;
  --type-h2-track: -0.01em;
  --type-spec-value-size: 30px;
  --type-menu-head-size: 26px;
  --type-mark-size: 40px;
  --type-mark-track: 0.1em;

  /* body */
  --type-lead-size: clamp(16px, 1.5vw, 21px);
  --type-lead-line: 1.55;
  --type-lead-measure: 46ch;

  /* micro caps — the whole UI layer is letterspaced uppercase sans */
  --type-kicker-size: 13px;
  --type-kicker-track: 0.42em;
  --type-kicker-weight: 600;
  --type-herosub-size: 15px;
  --type-herosub-track: 0.2em;
  --type-btn-size: 13px;
  --type-btn-track: 0.22em;
  --type-topbar-size: 12px;
  --type-topbar-track: 0.3em;
  --type-speckey-size: 11px;
  --type-speckey-track: 0.28em;
  --type-cue-size: 11px;
  --type-cue-track: 0.4em;
  --type-hudlabel-size: 10px;
  --type-hudlabel-track: 0.4em;
  --type-hudvalue-size: 13px;
  --type-hudvalue-track: 0.14em;

  --weight-display: 400; 
  --weight-caps: 600; 
}

/* ── tokens/spacing.css ── */
/* Spacing & layout — exact values from output/ifm/site.css */
:root {
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 22px;
  --space-6: 26px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 44px;
  --space-10: 60px;

  /* chapter frame */
  --chapter-pad-y: 12vh;
  --chapter-pad-x: 8vw;
  --chapter-pad-x-mobile: 7vw;
  --chapter-measure: 720px;

  /* fixed chrome */
  --topbar-pad-y: 26px;
  --topbar-pad-x: 34px;
  --hud-width: 92px;
  --hud-width-mobile: 60px;
  --hud-gap: 14px;
  --hud-rail-w: 2px;
  --hud-rail-h: 42vh;
  --cue-bottom: 26px;

  /* components */
  --btn-pad: 16px 40px; 
  --specs-gap: 44px;
  --specs-gap-mobile: 24px;
  --spec-min-width: 120px;
  --menu-gap: 60px;
  --menu-row-pad: 14px; 

  --breakpoint-mobile: 720px; 
}

/* ── tokens/effects.css ── */
/* Surface, border, shadow — the system is flat: no radii, no card shadows.
   Depth comes from vignette + grain + fog, never from elevation. */
:root {
  --radius-none: 0; 
  --border-hairline: 1px solid var(--hairline); 
  --border-accent: 1px solid var(--accent); 

  --vignette: inset 0 0 340px 60px rgba(0, 0, 0, 0.85); 
  --grain-opacity: 0.05; 
  --grain-blend: overlay; 
  --grain-url: url("assets/grain.svg"); 

  --z-canvas: 0; 
  --z-film: 1; 
  --z-content: 2; 
  --z-hud: 3; 
  --z-chrome: 4; 
  --z-veil: 9; 
}

/* ── tokens/motion.css ── */
/* Motion — GSAP/Lenis values lifted from output/ifm/engine.js */
:root {
  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* ≈ gsap power2.out */
  --dur-reveal: 1s; 
  --reveal-offset-y: 48px;       /* chapter-inner rises 48px into place */
  --dur-hover: 0.3s;             /* button background/color crossfade */
  --dur-veil: 0.8s;              /* loader fade-out */
  --dur-bob: 2.4s;               /* scroll cue bob loop */
  --dur-veil-bar: 1.1s;          /* loader bar sweep */
  --trigger-start: top 78%; 
  --trigger-end: bottom 40%; 
}

/* ── site ── */
/* IFM — página única. Mobile-first. Tokens vindos de ../../styles.css */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);background-image:radial-gradient(118% 82% at 62% 30%,#3c5a6b 0%,#1b3644 44%,var(--bg) 82%);background-attachment:fixed;background-repeat:no-repeat;color:var(--text);font-family:var(--font-sans-ui);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--text)}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.wrap{padding:0 48px}}

/* ── micro-caps ─────────────────────────────── */
.eyebrow{display:block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--accent)}
@media(min-width:700px){.eyebrow{font-size:var(--type-kicker-size);letter-spacing:var(--type-kicker-track)}}

/* ── display type ───────────────────────────── */
h1,h2,h3{font-family:var(--font-serif-display);font-weight:var(--weight-display);letter-spacing:-.01em;text-wrap:pretty}
h1{font-size:clamp(40px,10.5vw,116px);line-height:.99}
h2{font-size:clamp(30px,6.4vw,66px);line-height:1.03}
h3{font-size:clamp(20px,3.4vw,26px);line-height:1.18}
em{font-style:italic;color:var(--accent)}
p{text-wrap:pretty}
.lead{font-size:clamp(16px,4.1vw,21px);line-height:var(--type-lead-line);color:var(--muted);max-width:46ch}

/* ── reveal ─────────────────────────────────── */
.reveal{transition:opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal)}
.js .reveal{opacity:0;transform:translateY(var(--reveal-offset-y))}
.js .reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── film layers ────────────────────────────── */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;background-image:url(../assets/grain.svg)}


/* ── atmosfera + HUD (do Filme Manifesto) ───── */
#atmos{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;display:block;pointer-events:none}
main,footer{position:relative;z-index:2}
.hud{position:fixed;top:0;right:0;height:100vh;width:38px;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.hud .lbl{writing-mode:vertical-rl;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.hud .rail{position:relative;width:var(--hud-rail-w);height:32vh;background:var(--hairline);overflow:hidden}
.hud .rail i{position:absolute;inset:0;transform-origin:top;background:var(--accent);transform:scaleY(.2)}
.hud .val{writing-mode:vertical-rl;font-size:11px;letter-spacing:var(--type-hudvalue-track);color:var(--accent)}
@media(min-width:900px){.hud{width:var(--hud-width);gap:var(--hud-gap)}.hud .lbl{font-size:var(--type-hudlabel-size);letter-spacing:var(--type-hudlabel-track)}.hud .rail{height:var(--hud-rail-h)}.hud .val{font-size:var(--type-hudvalue-size)}}
.wrap{padding-right:52px}
@media(min-width:900px){.wrap{padding-right:48px}}

/* ── barra fixa ─────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:linear-gradient(to bottom,rgba(7,24,30,.82),rgba(7,24,30,0));backdrop-filter:none}
.topbar .brand{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:var(--type-topbar-track);text-transform:uppercase;color:var(--muted)}
.topbar .brand img{width:22px;height:auto}
.topbar .edition{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
@media(min-width:900px){.topbar{padding:var(--topbar-pad-y) var(--topbar-pad-x)}.topbar .brand img{width:26px}}

/* ── botões ─────────────────────────────────── */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:16px 30px;border:var(--border-accent);border-radius:var(--radius-none);color:var(--accent);background:transparent;font-size:var(--type-btn-size);letter-spacing:var(--type-btn-track);text-transform:uppercase;transition:background var(--dur-hover),color var(--dur-hover)}
.cta:hover,.cta:focus-visible{background:var(--accent);color:var(--on-accent)}
@media(min-width:700px){.cta{padding:var(--btn-pad)}}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ── hero ───────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 64px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,rgba(7,24,30,.86) 42%,rgba(7,24,30,.58) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{margin-top:18px;color:var(--text)}
.hero .lead{margin-top:26px}
.hero .actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:34px}
.hero .place{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(min-width:700px){.hero .actions{flex-direction:row;align-items:center;gap:28px}}
.scrollcue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;font-size:10px;letter-spacing:var(--type-cue-track);text-transform:uppercase;color:var(--muted);animation:ifm-bob var(--dur-bob) ease-in-out infinite}
@keyframes ifm-bob{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,8px);opacity:1}}

/* ── ritmo das seções ───────────────────────── */
section{padding:clamp(76px,13vh,150px) 0}
.hairline-top{border-top:var(--border-hairline)}
.section-head p{margin-top:18px}
.section-head h2{margin-top:14px}

/* ── manifesto ──────────────────────────────── */
.manifesto p{font-family:var(--font-serif-display);font-weight:var(--weight-display);font-size:clamp(26px,5.6vw,52px);line-height:1.14;max-width:24ch}
.manifesto .dim{color:var(--muted)}

/* ── curva ──────────────────────────────────── */
.curve .chart{margin-top:40px;padding:22px 6px 6px;background:rgba(4,15,20,.55);border:var(--border-hairline)}
.curve svg{width:100%;height:auto;display:block}
.axis-label{font-family:var(--font-sans-ui);font-size:16px;font-weight:600;letter-spacing:.16em;fill:rgba(234,227,214,.78);text-transform:uppercase}
.curve-keys{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,227,214,.78)}
.curve-keys span{display:inline-flex;align-items:center;gap:9px}
.curve-keys i{width:22px;height:3px;background:#9FB3BD}
.curve-keys i.g{background:#E0BC7C;height:4px}
.curve-note{margin-top:24px;font-size:14px;line-height:1.6;color:var(--muted);max-width:52ch}

/* ── grades ─────────────────────────────────── */
.grid{display:grid;gap:0 44px;margin-top:48px}
.grid>*{border-top:var(--border-hairline);padding:30px 0 34px}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid>*{padding:34px 0 38px}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
.pilar .num{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.pilar h3{color:var(--text)}
.pilar p{margin-top:12px;font-size:15px;line-height:1.62;color:var(--muted)}

/* ── START ──────────────────────────────────── */
.start .layout{display:grid;gap:44px;margin-top:44px}
@media(min-width:1000px){.start .layout{grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}}
.start p{margin-top:20px;font-size:16px;line-height:1.66;color:var(--muted);max-width:52ch}
.start .cta{margin-top:32px}
.start-card{border-top:1px solid var(--accent);padding-top:24px}
.start-card .tag{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.start-card h3{margin-top:12px}
.start-card ol{list-style:none;margin-top:26px;display:grid;gap:0}
.start-card li{border-top:var(--border-hairline);display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;font-size:14px;line-height:1.55;color:var(--muted)}
.start-card li b{font-family:var(--font-serif-display);font-weight:400;font-size:17px;color:var(--accent)}
.yt{position:relative;margin-top:34px;aspect-ratio:16/9;overflow:hidden;background:var(--ifm-fog-5);border:var(--border-hairline);cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.5) contrast(1.06) brightness(.82);transition:opacity var(--dur-hover)}
.yt::after{content:"";position:absolute;inset:0;background:rgba(7,24,30,.34);pointer-events:none}
.yt:hover img{opacity:.9}
.yt .play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}
.yt .play i{width:60px;height:60px;border:1px solid var(--accent);background:rgba(7,24,30,.55);display:flex;align-items:center;justify-content:center;transition:background var(--dur-hover)}
.yt:hover .play i{background:var(--accent)}
.yt .play svg path{fill:var(--accent)}
.yt:hover .play svg path{fill:var(--on-accent)}
.yt .label{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(to top,rgba(7,24,30,.9),transparent);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}

/* ── jornada ────────────────────────────────── */
.rotas{margin-top:48px;display:grid;gap:0 40px}
@media(min-width:1000px){.rotas{grid-template-columns:repeat(4,1fr)}}
.rota{border-top:var(--border-hairline);padding:28px 0 32px;position:relative}

.rota .stage{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.rota h3{margin-top:14px;font-family:var(--font-sans-ui);font-size:15px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.rota.final h3{color:var(--text)}
.rota p{margin-top:14px;font-size:15px;line-height:1.62;color:var(--muted)}
.quote{margin-top:44px;font-family:var(--font-serif-display);font-size:clamp(20px,3.6vw,30px);line-height:1.3;color:var(--text);max-width:34ch;border-top:var(--border-hairline);padding-top:26px}

/* ── M5A ────────────────────────────────────── */
.alist{margin-top:44px}
.arow{display:grid;grid-template-columns:56px 1fr;gap:8px 16px;padding:22px 0;border-top:var(--border-hairline)}
.arow .a{font-family:var(--font-serif-display);font-size:24px;color:var(--accent);line-height:1}
.arow h3{font-size:18px}
.arow p{grid-column:2;font-size:15px;line-height:1.62;color:var(--muted);max-width:56ch}
@media(min-width:900px){.arow{grid-template-columns:90px 240px 1fr;align-items:baseline}.arow p{grid-column:3;margin:0}}

/* ── espaço / fotos ─────────────────────────── */
.photos{display:grid;gap:12px;margin-top:44px}
@media(min-width:700px){.photos{grid-template-columns:1fr 1fr}.photos figure.big{grid-column:span 2}}
.photos figure{position:relative;overflow:hidden;background:var(--ifm-fog-5)}
.photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photos figure.big img{aspect-ratio:16/9}
.photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(to top,rgba(7,24,30,.9),transparent);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text)}

/* ── depoimentos ────────────────────────────── */
.dep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:44px}
@media(min-width:700px){.dep-grid{grid-template-columns:repeat(4,1fr);gap:12px}}
@media(min-width:1100px){.dep-grid{grid-template-columns:repeat(8,1fr)}}
.dep{position:relative;display:block;padding:0;border:var(--border-hairline);border-radius:var(--radius-none);background:var(--ifm-fog-5);aspect-ratio:9/16;overflow:hidden;cursor:pointer;font:inherit;color:inherit}
.dep img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) contrast(1.06) brightness(.8);transition:filter var(--dur-hover)}
.dep:hover img{filter:saturate(.7) contrast(1.06) brightness(.92)}
.dep video{width:100%;height:100%;object-fit:cover;display:block}
.dep-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(7,24,30,.3)}
.dep-play i{width:38px;height:38px;border:1px solid var(--accent);background:rgba(7,24,30,.5);display:flex;align-items:center;justify-content:center;transition:background var(--dur-hover)}
.dep-play svg path{fill:var(--accent)}
.dep:hover .dep-play i{background:var(--accent)}
.dep:hover .dep-play svg path{fill:var(--on-accent)}
.dep.playing{aspect-ratio:9/16}

/* ── personas ───────────────────────────────── */
.persona{padding:30px 0 34px}

.persona .tag{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.persona h3{margin-top:14px}
.persona p{margin-top:14px;font-size:15px;line-height:1.62;color:var(--muted)}
.persona .result{color:var(--text);border-top:var(--border-hairline);padding-top:14px}
.persona .result b{color:var(--accent);font-weight:400}

/* ── final ──────────────────────────────────── */
.final{text-align:center}
.final .lead{margin:22px auto 0}
.final .cta{margin-top:34px}
.final .micro{margin-top:26px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ── mapa + rodapé ──────────────────────────── */
.map{padding:0}
.map .head{padding:clamp(70px,10vh,110px) 0 36px;text-align:center}
.map .head p{margin-top:14px;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.map iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(.3) contrast(1.05) brightness(.82)}
footer{border-top:var(--border-hairline);padding:60px 0 34px}
.foot{display:grid;gap:34px}
@media(min-width:900px){.foot{grid-template-columns:1.4fr 1fr 1fr;gap:48px}}
.foot h4{font-family:var(--font-serif-display);font-weight:400;font-size:19px;color:var(--text)}
.foot p,.foot li{margin-top:12px;font-size:14px;line-height:1.62;color:var(--muted)}
.foot ul{list-style:none}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}
.foot-mark{margin-bottom:26px}
.foot-mark img{width:160px;height:auto;opacity:.9}
.copyright{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:44px;padding-top:22px;border-top:var(--border-hairline);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}