/* Golden section "O ciclo da receita": duas opções (ciclov1 e ciclov2) para o cliente escolher.
   Cada página usa só uma das seções; os estilos das três ficam aqui juntos. */
.g-olho{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#F47927;display:inline-flex;align-items:center;gap:10px}
.g-olho::before{content:"";width:8px;height:8px;border-radius:50%;background:#F47927}
.g-tit{margin:0;font-size:clamp(34px, 4.2vw, 60px);line-height:1.05;font-weight:500;letter-spacing:-0.03em}
.g-sub{margin:0;font-size:18px;line-height:1.55;color:#C9D1D6;max-width:560px}
.marco{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:#2A3A50;color:#A9B4BB;font-weight:600;font-size:15px;letter-spacing:-0.01em;white-space:nowrap;transition:background .4s,color .4s,box-shadow .4s}
.marco.on{background:#F47927;color:#142235;box-shadow:0 0 0 6px rgba(244,121,39,.18)}

/* ===== 1. Linha que anda sozinha ===== */
.ga{background:#142235;color:#FFFFFF;position:relative}
.ga-cola{display:flex;flex-direction:column;gap:56px;max-width:1248px;margin:0 auto;padding:88px 24px}
.ga-topo{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:end;justify-content:space-between}
.ga-topo > div{display:flex;flex-direction:column;gap:18px}
.ga-cont{font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:#A9B4BB;letter-spacing:.06em}
.ga-cont b{color:#FFFFFF;font-weight:600;font-size:28px;letter-spacing:-0.02em;font-family:'Geist',system-ui,sans-serif}
.ga-trilho{position:relative}
.ga-linha,.ga-fill{position:absolute;background:#2A3A50;border-radius:2px}
.ga-fill{background:linear-gradient(90deg,#F47927,#FF9F5A);transition:width .9s cubic-bezier(.4,0,.2,1), height .9s cubic-bezier(.4,0,.2,1)}
.ga-bola{position:absolute;width:18px;height:18px;border-radius:50%;background:#F47927;box-shadow:0 0 0 6px rgba(244,121,39,.25),0 0 24px 4px rgba(244,121,39,.6);transition:left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1)}
.ga-p{position:absolute;display:flex;align-items:center}
.ga-p .tick{display:block;width:2px;background:#FFFFFF;opacity:.25;transition:opacity .4s, background .4s, transform .5s cubic-bezier(.2,.7,.2,1)}
.ga-p .rot{font-size:15px;line-height:1.3;color:#FFFFFF;opacity:.35;transition:opacity .4s, color .4s, transform .5s cubic-bezier(.2,.7,.2,1)}
.ga-p.on .tick{opacity:1}
.ga-p.on .rot{opacity:1;transform:none}
.ga-p.agora .tick{background:#F47927}
/* Destaque sem negrito: negrito deixa o texto mais largo e ele pode quebrar de linha */
.ga-p.agora .rot{color:#F47927;text-shadow:0 0 .5px #F47927, 0 0 .5px #F47927}
.ga .marco{gap:8px;height:38px;padding:0 16px 0 12px}
.ga .marco svg{flex:0 0 18px}
@media (min-width: 900px){
  .ga-trilho{height:340px;margin:0 80px}
  .ga-linha,.ga-fill{left:0;top:50%;height:3px;margin-top:-1.5px}
  .ga-linha{right:0}
  .ga-fill{width:0}
  .ga-bola{top:50%;left:0;margin:-9px 0 0 -9px}
  .ga-p{top:50%;transform:translateX(-50%);flex-direction:column}
  .ga-p .rot{width:clamp(108px, 11.5vw, 150px);font-size:clamp(13px, 1.25vw, 15px);text-align:center}
  .ga-p.ultima .rot{width:auto;white-space:nowrap}
  .ga-p.cima{flex-direction:column-reverse;bottom:50%;top:auto}
  .ga-p .tick{height:44px;transform:scaleY(.3);transform-origin:top}
  .ga-p.cima .tick{transform-origin:bottom}
  .ga-p.on .tick{transform:none}
  .ga-p.baixo .rot{transform:translateY(-10px);padding-top:10px}
  .ga-p.cima .rot{transform:translateY(10px);padding-bottom:10px}
  .ga-p.marco-p{top:50%;margin-top:-19px}
}
@media (max-width: 899px){
  .ga-trilho{padding-left:36px;display:flex;flex-direction:column;gap:22px}
  .ga-linha,.ga-fill{left:11px;top:6px;width:3px}
  .ga-linha{bottom:6px}
  .ga-fill{height:0}
  .ga-bola{left:4px;top:0;margin-top:-9px}
  .ga-p{position:relative;gap:12px;left:auto !important}
  .ga-p .tick{width:14px;height:2px;margin-left:-28px}
  .ga-p .rot{transform:translateX(-8px);font-size:17px}
  .ga-p.marco-p .marco{margin-left:-36px}
}

/* ===== Timelines com marcos em destaque (ciclo-nova-versao-1 e ciclo-nova-versao-2) ===== */
/* Cada ponto recebe --on (já passou: 0 ou 1) e --perto (0 a 1, quão perto a bolinha está) a cada quadro */
.gx-in{max-width:1248px;margin:0 auto;padding:88px 24px;display:flex;flex-direction:column;gap:48px}
.gx-topo{display:flex;flex-wrap:wrap;gap:24px 64px;align-items:end;justify-content:space-between}
.gx-topo > div{display:flex;flex-direction:column;gap:18px}
@keyframes gf-entra{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.gg,.gh{background:#142235;color:#FFFFFF}
.entra{animation:gf-entra .6s cubic-bezier(.2,.7,.2,1) both}
.gt-ic{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;flex:0 0 auto;background:#2A3A50 linear-gradient(rgba(244,121,39,var(--on, 0)),rgba(244,121,39,var(--on, 0)));color:rgba(255,255,255,calc(.6 + .4 * var(--on, 0)));box-shadow:0 0 0 calc(8px * var(--perto, 0)) rgba(244,121,39,.18),0 0 calc(30px * var(--perto, 0)) rgba(244,121,39,calc(.8 * var(--perto, 0)))}
.gt-ic svg{width:24px;height:24px}
.gt-nome{font-size:18px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;color:rgba(255,255,255,calc(.55 + .45 * var(--on, 0)))}
.g-bola{width:16px;height:16px;border-radius:50%;background:#FFE3CF;box-shadow:0 0 0 5px rgba(244,121,39,.35),0 0 28px 8px rgba(244,121,39,.75)}

/* --- Nova versão 1: linha com card que acompanha (horizontal em qualquer tela) --- */
.gg-palco{position:relative;height:262px;margin-top:28px;--ly:114px;--pad:60px;--ic:56px}
.gg-linha,.gg-fill{position:absolute;border-radius:2px;top:var(--ly);height:3px;margin-top:-1.5px}
.gg-linha{background:#2A3A50;left:var(--pad);right:var(--pad)}
.gg-fill{left:var(--pad);background:linear-gradient(90deg,rgba(244,121,39,.3),#F47927 70%,#FFB27A);filter:drop-shadow(0 0 5px rgba(244,121,39,.6))}
.gg-bola{position:absolute;top:var(--ly);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FFE3CF;box-shadow:0 0 0 5px rgba(244,121,39,.35),0 0 28px 8px rgba(244,121,39,.75);z-index:2}
.gg-macro{position:absolute;top:var(--ly);transform:translate(-50%,calc(var(--ic) / -2));display:flex;flex-direction:column;align-items:center;z-index:3}
.gg-macro .gt-ic{width:var(--ic);height:var(--ic)}
/* centralização explícita: o Safari não centraliza sozinho um filho absoluto dentro de flex */
.gg-macro .gt-nome{position:absolute;bottom:calc(var(--ic) + 58px);left:50%;transform:translateX(-50%)}
/* ordem: pontinhos das etapas (1) < bolinha (2) < ícones dos marcos (3) */
.gg-mi{position:absolute;top:var(--ly);z-index:1}
/* antes de acender: cinza preenchido; depois, laranja com anel */
.gg-pt{display:block;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#56606B linear-gradient(rgba(244,121,39,var(--on, 0)),rgba(244,121,39,var(--on, 0)));box-shadow:0 0 0 2px rgba(244,121,39,calc(.9 * var(--on, 0)));transform:scale(calc(1 + .6 * var(--perto, 0)))}
/* desktop: nome bem pequeno acima de cada ponto (embaixo passa o card) */
.gg-rot{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:clamp(62px, 6.6vw, 88px);text-align:center;font-size:clamp(10.5px, .85vw, 12px);line-height:1.25;color:#FFFFFF;opacity:calc(.4 + .6 * var(--on, 0));text-shadow:0 0 calc(12px * var(--perto, 0)) rgba(244,121,39,calc(.9 * var(--perto, 0)))}
.gg-card{position:absolute;top:calc(var(--ly) + 50px);width:250px;box-sizing:border-box;padding:16px 18px;border-radius:16px;background:#FFFFFF;color:#142235;display:flex;flex-direction:column;gap:6px;box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.gg-card::before{content:"";position:absolute;top:-6px;left:calc(var(--seta, 50%) - 6px);width:12px;height:12px;background:#FFFFFF;transform:rotate(45deg)}
.gg-fase:empty{display:none}
.gg-fase{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#56606B}
.gg-nome{font-size:19px;line-height:1.2;font-weight:500;letter-spacing:-0.01em}
.gg-card.no-marco .gg-nome{color:#F47927}
/* Nova versão 3 (modo rastro), desktop: todos os nomes embaixo da linha em cinza claro; ficam laranja quando a bolinha passa.
   O balão desce para não encostar no ícone dos marcos e passa por cima dos nomes (esconde o da etapa atual) */
@media (min-width: 900px){
  [data-modo="rastro"] .gg-palco{height:236px;--ly:96px}
  [data-modo="rastro"] .gg-rot{bottom:auto;top:50px;opacity:1;color:rgba(255,255,255,.62);transition:color .6s}
  [data-modo="rastro"] .gg-card{top:calc(var(--ly) + 42px);z-index:4}
  [data-modo="rastro"] .gg-macro .gt-nome{bottom:calc(var(--ic) + 12px)}
}
/* em qualquer tela, o nome da etapa que já passou fica laranja */
[data-modo="rastro"] .gg-rot.ja{color:#FFB27A}

/* Celular: linha do tempo vertical, sem card; cada etapa com o nome ao lado do ponto */
@media (max-width: 899px){
  .gg-palco{height:auto;margin-top:0;display:flex;flex-direction:column;gap:0;--ic:44px}
  .gg-linha,.gg-fill{left:22px;width:3px;height:0;margin:0 0 0 -1.5px}
  .gg-fill{background:linear-gradient(180deg,rgba(244,121,39,.3),#F47927 70%,#FFB27A)}
  .gg-bola{left:22px}
  .gg-card{display:none}
  .gg-macro{position:relative;top:auto;transform:none;flex-direction:row;gap:14px;align-items:center;margin:20px 0}
  .gg-macro.primeiro{margin-top:0}
  .gg-macro.ultimo{margin-bottom:0}
  .gg-macro .gt-ic svg{width:20px;height:20px}
  .gg-macro .gt-nome,.gg-macro.primeiro .gt-nome,.gg-macro.ultimo .gt-nome{position:static;transform:none;font-size:17px}
  .gg-mi{position:relative;top:auto;display:flex;align-items:center;min-height:22px;padding:20px 0}
  /* linha clarinha entre as etapas, começando depois do recuo do texto (não cruza a linha vertical) */
  .gg-mi + .gg-mi::before{content:"";position:absolute;left:58px;right:0;top:0;height:1px;background:rgba(255,255,255,.09)}
  .gg-pt{position:absolute;left:22px;top:50%;margin:-4px 0 0 -4px}
  .gg-rot,[data-modo="rastro"] .gg-rot{position:static;width:auto;text-align:left;display:block;padding-left:58px;font-size:16px;line-height:1.3;color:#FFFFFF;opacity:calc(.35 + .65 * var(--on, 0));transform:translateX(calc(4px * var(--perto, 0)));text-shadow:0 0 calc(14px * var(--perto, 0)) rgba(244,121,39,calc(.9 * var(--perto, 0)))}
}


/* --- Nova versão 2: linha + cards (horizontal só a partir de 1180px; abaixo disso os 9 cards não cabem lado a lado) --- */
.gh-palco{display:flex;flex-direction:column;gap:20px}
.gh-trilho{position:relative;height:110px}
.gh-linha,.gh-fill{position:absolute;border-radius:2px}
.gh-linha{background:#2A3A50}
.gh-fill{background:linear-gradient(90deg,rgba(244,121,39,.3),#F47927 70%,#FFB27A);filter:drop-shadow(0 0 5px rgba(244,121,39,.6))}
.gh-bola{position:absolute;width:16px;height:16px;border-radius:50%;background:#FFE3CF;box-shadow:0 0 0 5px rgba(244,121,39,.35),0 0 28px 8px rgba(244,121,39,.75);z-index:1}
.gh-macro{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3}
.gh-cards{display:grid;grid-template-columns:repeat(9, minmax(0, 1fr));gap:10px}
.gh-card:nth-child(4){margin-left:28px}
.gh-card{box-sizing:border-box;padding:14px 12px;border-radius:14px;min-height:112px;display:flex;flex-direction:column;gap:8px;background:#101C22;border:1px solid rgba(244,121,39,calc(.15 + .85 * var(--on, 0)));transform:translateY(calc(-6px * var(--perto, 0)));box-shadow:0 calc(18px * var(--perto, 0)) calc(30px * var(--perto, 0)) calc(-14px * var(--perto, 0)) rgba(244,121,39,.55)}
.gh-n{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;color:rgba(244,121,39,calc(.45 + .55 * var(--on, 0)))}
.gh-icone{display:flex;color:rgba(244,121,39,calc(.4 + .6 * var(--on, 0)));transform:scale(calc(1 + .12 * var(--perto, 0)));transform-origin:left center}
.gh-icone svg{width:20px;height:20px}
.gh-t{font-size:14px;line-height:1.3;color:rgba(255,255,255,calc(.4 + .6 * var(--on, 0)))}
@media (min-width: 1180px){
  .gh-linha,.gh-fill{top:84px;height:3px;margin-top:-1.5px}
  .gh-linha{left:0;right:0}
  .gh-fill{left:0}
  .gh-bola{top:84px;margin:-8px 0 0 -8px}
  .gh-macro{top:84px;transform:translate(-50%,calc(-100% + 28px))}
  .gh-macro:first-of-type{transform:translate(-28px,calc(-100% + 28px));align-items:flex-start}
  .gh-trilho{margin:0 28px}
  .gh-macro:last-of-type{transform:translate(calc(-100% + 28px),calc(-100% + 28px));align-items:flex-end}
  /* sem hífen: cards mais justos e letra um pouco menor para "Acompanhamento" caber inteiro */
  .gh-cards{gap:6px}
  .gh-card{padding:14px 6px 14px 8px}
  .gh-t{font-size:clamp(12px, .9vw, 13px);letter-spacing:-0.01em}
  .gh-macro .gt-nome{order:-1}
}
@media (max-width: 1179px){
  .gh-palco{flex-direction:row;gap:14px}
  .gh-trilho{height:auto;flex:0 0 56px}
  .gh-linha,.gh-fill{left:26px;width:3px}
  .gh-linha{top:20px;bottom:20px}
  .gh-fill{top:20px}
  .gh-bola{left:26px;margin:-8px 0 0 -6.5px}
  .gh-macro{left:0;transform:translateY(-50%)}
  .gh-macro .gt-ic{width:52px;height:52px}
  /* nome do marco ao lado do ícone, no vão entre os grupos de cards */
  .gh-macro .gt-nome{position:absolute;left:66px;top:50%;transform:translateY(-50%);font-size:17px}
  .gh-cards{grid-template-columns:1fr;flex:1;gap:10px;padding:20px 0}
  .gh-card{min-height:0;flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .gh-card:nth-child(4){margin-left:0;margin-top:76px}
  .gh-cards{padding-top:76px;padding-bottom:76px}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}