/* ==========================================================================
   Frasco Digital — frascodigital.com
   Identidade: breu absoluto, vidro facetado, luz única do canto sup. esquerdo
   ========================================================================== */

/* --- Fontes (Sora variável, self-host) ----------------------------------- */
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/sora-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/sora-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --breu: #000;
  --vidro: #0a0a0a;
  --hairline: #232323;
  --hairline-2: #161616;
  --apoio: #3d3d3d;
  --texto-2: #8a8a8a;
  --branco: #fff;

  --chanfro-p: 18px; /* painéis */
  --chanfro-m: 10px; /* cartões */
  --chanfro-s: 7px;  /* botões  */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 180ms;
  --t-reveal: 650ms;
}

/* --- Base ------------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--breu);
  color: var(--branco);
  font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* chanfro de 45° em dois cantos opostos — a geometria da marca */
.chanfro {
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}

/* --- Acessibilidade -------------------------------------------------------- */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--branco); color: var(--breu);
  padding: 10px 18px; font-size: 13px; text-decoration: none;
}
.pular:focus { left: 12px; top: 12px; }

/* --- Navegação fixa -------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 250ms ease, border-color 250ms ease;
}
.nav.solida { background: var(--breu); border-color: var(--hairline); }
.nav-wrap {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  height: 64px; display: flex; align-items: center; gap: 28px;
}
.nav-marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
.nav-wordmark { font-size: 15px; font-weight: 500; letter-spacing: .08em; }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 13px; color: var(--texto-2); text-decoration: none;
  transition: color var(--t-hover) ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--branco); }

/* --- Botões ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
  border: 0;
  clip-path: polygon(
    var(--chanfro-s) 0, 100% 0,
    100% calc(100% - var(--chanfro-s)), calc(100% - var(--chanfro-s)) 100%,
    0 100%, 0 var(--chanfro-s)
  );
  /* LED atrás do vidro: drop-shadow acompanha a silhueta chanfrada (box-shadow seria cortado pelo clip-path) */
  filter: drop-shadow(0 0 4px rgba(255,255,255,0)) drop-shadow(0 0 16px rgba(255,255,255,0));
  transition: transform 150ms ease, background-color var(--t-hover) ease, box-shadow var(--t-hover) ease, filter 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible {
  filter: drop-shadow(0 0 4px rgba(255,255,255,.28)) drop-shadow(0 0 18px rgba(255,255,255,.16));
}
.btn-solido {
  background: var(--branco); color: var(--breu);
  font-weight: 500; padding: 11px 24px;
}
.btn-solido:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--breu); }
.btn-vidro {
  color: var(--branco); font-weight: 400; padding: 11px 24px;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%),
    var(--vidro);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-vidro:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--branco); }
@media (hover: hover) {
  .btn:hover {
    filter: drop-shadow(0 0 4px rgba(255,255,255,.28)) drop-shadow(0 0 18px rgba(255,255,255,.16));
  }
  .btn-solido:hover { background: #e2e2e2; }
  .btn-vidro:hover {
    background-color: #101010;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 1px 0 0 rgba(255,255,255,.12);
  }
}
.btn-grande { padding: 14px 30px; font-size: 14px; }
.nav-cta { padding: 8px 16px; font-size: 12px; }

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  padding: 120px 24px 72px;
  border-bottom: 1px solid var(--hairline);
  overflow: clip; /* o corpo da marca entra de -50vw; nada disso pode virar scroll */
}
.hero-logo { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-logo::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: min(680px, 92vw); height: min(520px, 92vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, #161616 0%, rgba(22,22,22,0) 72%);
  pointer-events: none;
  /* uma linha do tempo só: fade até .65s, espera, incha no impacto (1.05s)
     e assenta um pouco mais claro do que estava, permanente: o encaixe
     ilumina a cena. o pico fica no fundo, não na marca. no replay o clarão
     do frasco repete, mas o fundo já está aceso e não reencena */
  animation: halo 1.7s linear both;
}
@keyframes halo {
  0%   { opacity: 0; filter: brightness(1); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  38%  { opacity: 1; filter: brightness(1); }
  62%  { opacity: 1; filter: brightness(1); animation-timing-function: cubic-bezier(.17,.67,.3,1); }
  69%  { opacity: 1; filter: brightness(2); animation-timing-function: cubic-bezier(.33,0,.35,1); }
  100% { opacity: 1; filter: brightness(1.35); }
}

/* --- Entrada da marca: o corpo rola, a rolha encaixa ----------------------- */
/* dois SVGs empilhados em vez de dois paths num viewBox só: transform CSS em
   elemento SVG de contexto HTML resolve px e vw de verdade; dentro do viewBox,
   px viraria unidade de usuário escalada por 112/256. os keyframes daqui
   terminam em transform: none de propósito (regra do .entra): nenhuma peça usa
   transform para posicionamento de layout. */
.hero-logo-btn {
  position: relative; width: 112px; height: 112px;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* foco de teclado no botão, longe da marca: o protocolo proíbe contorno e glow
   na marca em si */
.hero-logo-btn:focus-visible { outline: 1px solid var(--apoio); outline-offset: 12px; }
.marca-corpo, .marca-rolha {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--branco);
}
.marca-corpo { transform-origin: 48.8% 58%; }   /* centro do corpo */
.marca-rolha { transform-origin: 48.8% 32.8%; } /* centro da rolha */

/* o frasco chega vazio: as paredes são o stroke com a metade externa clipada
   (assim a silhueta final não engorda) e quem pinta a marca é o líquido, um
   rect branco sob o clip do corpo. cheio, ele cobre o clip inteiro e o estado
   final é a silhueta exata; a parede, branca sobre branco, desaparece. */
.marca-parede { fill: none; stroke: var(--branco); stroke-width: 7; }
/* aqui px é unidade de usuário do viewBox, de propósito: o líquido vive no
   sistema do SVG. mesma origem de giro do corpo, então a contra-rotação
   cancela o giro do frasco no mundo e a superfície fica nivelada */
.marca-liquido { transform-box: view-box; transform-origin: 48.8% 58%; }

.toca .marca-corpo { animation: corpo-rola .95s both; }
@keyframes corpo-rola {
  0%   { transform: translateX(calc(-50vw - 120px)) rotate(-540deg); animation-timing-function: cubic-bezier(.16,.84,.44,1); }
  68%  { transform: translateX(0) rotate(6deg);  animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
  84%  { transform: translateX(0) rotate(-2deg); animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
  100% { transform: none; }
}

/* o líquido começa a encher quando o deslocamento lateral termina (.65s) e
   completa junto com o encaixe da rolha (1.05s). a rotação daqui espelha ao
   contrário a cauda de corpo-rola (6°, -2°, 0°), com um resto de balanço a
   mais: o líquido assenta depois do vidro, como líquido faz. a deriva em x
   desliza a borda senoidal do path sob o clip: as ondas viajam na superfície
   no ritmo do balanço (quase um comprimento de onda de curso total) */
.toca .marca-liquido { animation: liquido-enche .4s linear .65s both; }
@keyframes liquido-enche {
  0%   { transform: translate(-26px, 104px) rotate(-6deg); }
  37%  { transform: translate(12px, 66px) rotate(2deg); }
  72%  { transform: translate(-10px, 28px) rotate(-1.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* a queda acelera (é gravidade) e a peça materializa nos primeiros frames;
   opacity 0 no frame inicial + fill both escondem a rolha durante o delay */
.toca .marca-rolha { animation: rolha-cai .35s cubic-bezier(.55,0,.85,.6) .7s both; }
@keyframes rolha-cai {
  0%   { transform: translate(56px, -190px) rotate(130deg); opacity: 0; filter: blur(4px); }
  22%  { opacity: 1; filter: blur(0); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}

/* o encaixe: o conjunto assenta com dip curto e wobble que morre, e o impacto
   acende um clarão único no frasco (receita LED, uma passada, decai a zero:
   glow parado na marca continua proibido) */
.toca {
  animation:
    assenta .32s cubic-bezier(.45,.05,.55,.95) 1.05s both,
    clarao .6s cubic-bezier(.22,1,.36,1) 1.05s both;
}
@keyframes assenta {
  0%   { transform: none; }
  28%  { transform: translateY(3px) rotate(-1.6deg); }
  62%  { transform: translateY(1px) rotate(1.1deg); }
  100% { transform: none; }
}
@keyframes clarao {
  0%   { filter: drop-shadow(0 0 6px rgba(255,255,255,0)) drop-shadow(0 0 26px rgba(255,255,255,0)); }
  22%  { filter: drop-shadow(0 0 6px rgba(255,255,255,.32)) drop-shadow(0 0 26px rgba(255,255,255,.16)); }
  100% { filter: drop-shadow(0 0 6px rgba(255,255,255,0)) drop-shadow(0 0 26px rgba(255,255,255,0)); }
}

/* anel de choque: octógono hairline (nunca círculo) centrado no ponto de
   encaixe, x=54.7px y=44.8px do box de 112. o scale anima no próprio path,
   onde escala não tem unidade; o stroke fica em 1px via non-scaling-stroke */
.hero-anel {
  position: absolute; left: -45px; top: -55px;
  width: 200px; height: 200px;
  overflow: visible; pointer-events: none;
}
.hero-anel path {
  fill: none; stroke: var(--apoio); stroke-width: 1;
  opacity: 0; /* sem animação o anel nunca existe */
  transform-box: fill-box; transform-origin: center;
}
.toca .hero-anel path { animation: anel-choque .45s cubic-bezier(.17,.67,.3,1) 1.05s both; }
@keyframes anel-choque {
  0%   { transform: scale(.12); opacity: 0; }
  10%  { opacity: .9; }
  100% { transform: scale(1); opacity: 0; }
}

.wordmark { position: relative; font-size: 24px; font-weight: 500; letter-spacing: .08em; }
/* o único gesto cinematográfico: um brilho atravessa o wordmark, uma vez.
   camada própria para não disputar o shorthand `animation` com .entra;
   em repouso a faixa fica fora do texto — o wordmark permanece #fff puro */
.wordmark-brilho { display: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark-brilho {
    display: block; position: absolute; inset: 0;
    color: transparent; pointer-events: none;
    background-image: linear-gradient(105deg, rgba(159,159,159,0) 44%, #9f9f9f 50%, rgba(159,159,159,0) 56%);
    background-size: 300% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    animation: brilho 1.25s cubic-bezier(.4, 0, .2, 1) 1.4s 1 both;
  }
}
@keyframes brilho {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

.hero-titulo {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 500; line-height: 1.12;
  margin-top: 4px;
}
.hero-sub { font-size: 15px; color: var(--texto-2); line-height: 1.7; max-width: 640px; }
.hero-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; }
/* centra por left/right + align-items, nunca por transform: o shorthand `animation`
   de .entra termina em `transform: none` e apagaria um translateX de layout
   (mesma disputa que obrigou o shine do wordmark a viver em camada propria) */
.hero-role {
  position: absolute; bottom: 26px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--apoio);
  pointer-events: none;
}
.hero-role-traco { width: 1px; height: 34px; background: linear-gradient(var(--apoio), transparent); }
/* a frase segue o ponteiro, nao a largura da tela: janela estreita no desktop
   continua com mouse, e tablet largo continua sendo dedo */
.hero-role-toque { display: none; }
@media (hover: none), (pointer: coarse) {
  .hero-role-mouse { display: none; }
  .hero-role-toque { display: block; }
}

/* sequência de entrada do hero (one-shot, CSS puro). a marca não usa .entra:
   tem coreografia própria acima. o wordmark (e2) espera o encaixe da rolha,
   que é quem o entrega às 1.05s */
.entra { animation: entra .75s var(--ease) both; }
.e2 { animation-delay: 1.05s; }
.e3 { animation-delay: .30s; }
.e4 { animation-delay: .42s; }
.e5 { animation-delay: .55s; }
@keyframes entra {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --- Seções ---------------------------------------------------------------- */
/* sem tracos entre secoes: o respiro e o rotulo fazem a separacao.
   as hairlines que sobram (hero, contato, passos, cartoes) tem regra propria */
.secao { padding: 108px 0; }
.rotulo {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-2); margin-bottom: 26px;
}
.secao h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 500; line-height: 1.25; }
.secao-lead { color: var(--texto-2); font-size: 15px; max-width: 560px; margin-top: 14px; }
.prosa { margin-top: 18px; }
.prosa p { color: var(--texto-2); font-size: 15px; max-width: 640px; margin-top: 14px; }
.prosa strong { color: var(--branco); font-weight: 500; }

/* --- Ofícios (cartões de vidro) -------------------------------------------- */
.cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 42px;
}
.cartao {
  padding: 24px 22px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,0) 70%),
    var(--vidro);
  clip-path: polygon(
    var(--chanfro-m) 0, 100% 0,
    100% calc(100% - var(--chanfro-m)), calc(100% - var(--chanfro-m)) 100%,
    0 100%, 0 var(--chanfro-m)
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0)) drop-shadow(0 0 18px rgba(255,255,255,0));
  transition: transform 200ms var(--ease), box-shadow 200ms ease, background-color 200ms ease, filter 200ms ease;
}
@media (hover: hover) {
  .cartao:hover {
    transform: translateY(-2px);
    background-color: #0d0d0d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 1px 0 0 rgba(255,255,255,.10);
    filter: drop-shadow(0 0 4px rgba(255,255,255,.24)) drop-shadow(0 0 20px rgba(255,255,255,.14));
  }
}
.cartao h3 { font-size: 14px; font-weight: 500; letter-spacing: .02em; margin-bottom: 8px; }
.cartao p { font-size: 13px; color: var(--texto-2); line-height: 1.65; }

/* --- Processo -------------------------------------------------------------- */
.passos { list-style: none; margin-top: 38px; max-width: 720px; }
.passos li {
  display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--hairline-2);
}
.passos li:last-child { border-bottom: 0; }
.passo-n {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 15px; color: var(--texto-2);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%),
    var(--vidro);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.passos h3 { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.passos p { font-size: 14px; color: var(--texto-2); max-width: 520px; }

/* --- Cases (vitrine) -------------------------------------------------------- */
.vitrine {
  max-width: 560px; margin: 12px auto 0;
  padding: 56px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  background:
    radial-gradient(130% 95% at 16% 0%, rgba(255,255,255,.115) 0%, rgba(255,255,255,.03) 40%, rgba(255,255,255,0) 68%),
    radial-gradient(70% 55% at 90% 100%, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(117deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.018) 38%, rgba(255,255,255,0) 38.3%, rgba(255,255,255,0) 62%, rgba(255,255,255,.035) 62.3%, rgba(255,255,255,.008) 100%),
    var(--vidro);
  clip-path: polygon(
    var(--chanfro-p) 0, 100% 0,
    100% calc(100% - var(--chanfro-p)), calc(100% - var(--chanfro-p)) 100%,
    0 100%, 0 var(--chanfro-p)
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 1px 0 0 rgba(255,255,255,.07);
}
.vitrine img { width: 72px; height: 72px; }
.vitrine h2 { font-size: clamp(20px, 2.6vw, 24px); }
.vitrine p { font-size: 13px; color: var(--texto-2); }

/* --- Contato ---------------------------------------------------------------- */
.secao-contato { border-bottom: 1px solid var(--hairline); }
.secao .contato-titulo { font-size: clamp(30px, 5vw, 44px); }
.contato-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 34px; }
.contato-dominio { font-size: 13px; letter-spacing: .04em; color: var(--apoio); }

/* --- Rodapé ----------------------------------------------------------------- */
.rodape {
  padding: 46px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; font-size: 12px; color: var(--apoio);
}
.rodape-links a {
  color: var(--texto-2); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color var(--t-hover) ease, border-color var(--t-hover) ease;
}
@media (hover: hover) {
  .rodape-links a:hover { color: var(--branco); border-color: var(--apoio); }
}
.rodape-links a:focus-visible { outline: 1px solid var(--branco); outline-offset: 4px; }

/* --- Reveals no scroll (progressive enhancement: só com JS) ------------------ */
html.js .reveal {
  opacity: 0; transform: translateY(14px); filter: blur(5px);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease),
    filter var(--t-reveal) var(--ease);
  transition-delay: var(--atraso, 0ms);
}
html.js .reveal.visivel { opacity: 1; transform: none; filter: blur(0); }
/* stagger dos cartões e passos */
.cartoes .reveal:nth-child(2) { --atraso: 70ms; }
.cartoes .reveal:nth-child(3) { --atraso: 140ms; }
.cartoes .reveal:nth-child(4) { --atraso: 210ms; }
.passos .reveal:nth-child(2) { --atraso: 80ms; }
.passos .reveal:nth-child(3) { --atraso: 160ms; }

/* --- Responsivo -------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .wrap { padding: 0 24px; }
  .secao { padding: 76px 0; }
  .hero { padding-top: 104px; }
  .passos li { grid-template-columns: 44px 1fr; gap: 16px; }
  .vitrine { padding: 44px 24px; }
}

/* --- Movimento reduzido ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important; /* sem isto os delays sobrevivem e o wordmark ficaria 1.05s invisível */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; filter: none; }
  .wordmark-brilho { animation: none; opacity: 0; }
  /* a coreografia da marca colapsa para o frame final (o anel termina em
     opacity 0); o replay vira no-op no JS, então o cursor não promete nada */
  .hero-logo-btn { cursor: default; }
}