/* ============================================================
   ELIENAI DESIGNER — site · v3 "atelier PT · luxo editorial"
   Base: navio profundo · marfim quente · filete dourado · Azul Signal
   Escopo: Portugal. Tema: dark. Botões e cards arredondados.
   ============================================================ */
:root{
  /* azul — assinatura (nunca muda) */
  --b900:#030D2E; --b800:#061A5C; --b700:#0A2A8A; --b600:#1248C8;
  --b500:#1A65E8; --b400:#3D88F5; --b300:#70AAF8; --b200:#AACCFC;
  --b100:#D6E8FE; --b50:#EDF4FF;

  /* tela escura (dominante) */
  --canvas:#050F33;        /* fundo principal */
  --canvas-2:#061A5C;      /* seção alternada */
  --canvas-deep:#03102E;   /* hero / cta / rodapé */
  --surface:#0A1C49;       /* cards sobre o navio */
  --surface-2:#0C2256;

  /* marfim quente (texto sobre escuro) */
  --paper:#F3ECDB;         /* uma seção clara de respiro */
  --ivory:#ECE4D1;         /* texto primário no escuro */
  --ivory-mute:#A7B6D6;    /* texto secundário */
  --ivory-faint:#5E7099;   /* legendas / mono discreto */

  /* filete de luxo */
  --gold:#C9A24B;
  --gold-soft:#D9BE82;
  --gold-line:rgba(201,162,75,.42);

  /* hairlines no escuro */
  --hair:rgba(236,228,209,.14);
  --hair-strong:rgba(236,228,209,.26);

  /* sinal interativo */
  --signal:#4C91F7;
  --signal-soft:rgba(76,145,247,.16);

  /* base light legada (algumas peças) */
  --line:#E5E5E8; --ink:#0B0B0C; --mist:#5C5C61; --mist2:#9A9AA0;
  --ok:#22C55E; --warn:#E8503A;

  --grad-bar:linear-gradient(90deg,var(--gold) 0%,var(--gold-soft) 50%,transparent 100%);

  /* — forma (arredondamento — decisão v3) — */
  --r-btn:999px;      /* botões: pílula expressiva */
  --r-chip:999px;     /* chips: pílula */
  --r-card:20px;      /* cards / molduras */
  --r-glass:22px;     /* janelas de vidro */
  --r-sm:12px;

  /* sistema */
  --container:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:"Plus Jakarta Sans",sans-serif;
  --type-scale:1;

  /* tweakáveis */
  --accent:#4C91F7;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Plus Jakarta Sans",sans-serif;
  color:var(--ivory);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grão de filme — nostalgia analógica, em tudo */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}
::selection{background:var(--gold);color:var(--canvas-deep)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ---------- helpers ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 40px}
.mono{font-family:"Martian Mono",monospace;text-transform:uppercase;letter-spacing:.16em}

/* rótulo: mono caixa-alta com filete dourado */
.eyebrow{font-family:"Martian Mono",monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:13px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);display:inline-block;opacity:.8}

.script{font-family:"Caveat",cursive;font-weight:600;color:var(--gold-soft)}
.hl{color:var(--ivory)}

section{position:relative}
.section{padding:140px 0}
.section-head{max-width:840px;margin-bottom:72px}
.section-head h2{
  font-family:var(--font-display);font-weight:800;
  font-size:calc(58px * var(--type-scale));letter-spacing:-.045em;line-height:1.0;
  margin:24px 0 22px;text-wrap:balance;color:var(--ivory);
}
.section-head .lead{font-size:calc(19px * var(--type-scale));color:var(--ivory-mute);font-weight:300;line-height:1.65;max-width:58ch}

/* índice tipográfico grande (editorial) */
.idx{font-family:"Martian Mono",monospace;font-size:13px;letter-spacing:.1em;color:var(--gold);font-weight:500}

/* régua hairline */
.rule{height:1px;background:var(--hair);border:none;width:100%}

/* ---------- wordmark + assinatura ---------- */
.wm{font-weight:800;letter-spacing:-.045em;display:inline-flex;align-items:baseline;line-height:1;font-family:var(--font-display);color:var(--ivory)}
.wm .ih{position:relative;display:inline-block}
.wm .spark{position:absolute;left:50%;transform:translateX(-50%);top:-.18em}

/* assinatura reutilizável da agência — "Alexandre" + sparkle DEPOIS da última letra */
.sig{display:inline-flex;align-items:flex-start;gap:.12em;line-height:.9}
.sig .sig-name{font-family:"Caveat",cursive;font-weight:600;color:var(--gold-soft)}
.sig .sig-spark{width:.42em;height:.42em;flex:none;margin-top:.15em}
.sig .sig-spark path{fill:var(--gold)}

/* ---------- buttons (pílula, expressivos) ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:"Martian Mono",monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:none;border-radius:var(--r-btn);
  padding:16px 30px;transition:.34s var(--ease);white-space:nowrap;position:relative}
.btn .arr{transition:transform .34s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
/* primário: marfim sólido sobre navio */
.btn.solid{background:var(--ivory);color:var(--canvas-deep)}
.btn.solid:hover{background:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
/* dourado contornado — o gesto de luxo */
.btn.gold{background:transparent;border:1px solid var(--gold-line);color:var(--gold-soft)}
.btn.gold:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,162,75,.08);transform:translateY(-2px)}
/* link puro com filete */
.btn.line{background:transparent;border:none;color:var(--ivory);padding-left:4px;padding-right:4px;border-radius:0}
.btn.line::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:var(--hair-strong);transition:.34s var(--ease)}
.btn.line:hover::after{background:var(--gold)}
.btn.lg{padding:19px 40px;font-size:13px}
.btn.sm{padding:11px 22px;font-size:11px}

/* ---------- chips / pills ---------- */
.chip{font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory-mute);border:1px solid var(--hair);border-radius:var(--r-chip);padding:8px 16px;background:transparent}
.chip.on{color:var(--gold);border-color:var(--gold-line)}

/* film-grain / grid utilities sobre escuro */
.grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:80px 80px;
  mask:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 80%)}

/* ---------- assets geométricos decorativos (profundidade; parallax no scroll) ---------- */
.geo{position:absolute;z-index:0;pointer-events:none;color:var(--gold);opacity:.08;overflow:visible;will-change:transform}
section > .container{position:relative;z-index:1}
@media (max-width:640px){.geo{opacity:.05}}

/* ---------- janela glass (3 bolinhas do Mac) — reutilizável ---------- */
.macwin{position:relative;border-radius:var(--r-glass);overflow:hidden;
  background:rgba(10,28,73,.46);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.75),inset 0 1px 0 rgba(236,228,209,.08)}
.macwin-head{display:flex;align-items:center;gap:14px;padding:14px 18px}
.macdots{display:inline-flex;gap:8px;flex:none}
.macdots i{width:11px;height:11px;border-radius:50%;display:block}
.macdots i:nth-child(1){background:#FF5F57}
.macdots i:nth-child(2){background:#FEBC2E}
.macdots i:nth-child(3){background:#28C840}
.macwin-cap{font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-faint);white-space:nowrap}
.macwin-body{position:relative;overflow:hidden}

/* placeholder degradável para qualquer imagem ainda ausente */
.img-slot{position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--canvas-deep),var(--surface-2));min-height:120px}
.img-slot::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5}
.img-slot .img-tag{position:relative;font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory-faint);border:1px dashed var(--gold-line);border-radius:var(--r-sm);padding:8px 14px}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- carrossel horizontal (serviços/branding) ---------- */
.hscroll{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 22px;
  scrollbar-width:none;-ms-overflow-style:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{scroll-snap-align:start;flex:none}

/* carrossel vertical (janela glass da hero) */
.vscroll{display:flex;flex-direction:column;gap:0;height:100%;will-change:transform}
.vscroll img,.vscroll .img-slot{width:100%;display:block}

/* reveal (GSAP) — contido, quase parado */
[data-reveal]{opacity:0;transform:translateY(16px)}
.no-motion [data-reveal]{opacity:1;transform:none}

/* respeito a quem pede menos movimento */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}