/* ============================================================
   STANDWAY — Folha de impressão A4 (propostas comerciais)
   Carregada com media="print" → todo o conteúdo está dentro de
   @media print e NUNCA afeta a tela.

   Objetivo: a MESMA página vira um documento A4 limpo, em fluxo
   linear, preto-no-branco com o laranja da marca (#FF4D00) apenas
   nos títulos/detalhes. Tudo que o JS/estado esconde (reveals,
   stagger, painéis inativos do stepper) é forçado a aparecer.
   ============================================================ */

@media print {

  /* ----------------------------------------------------------
     1. Página / base
     ---------------------------------------------------------- */
  @page { size: A4; margin: 14mm; }

  html, body { background: #fff !important; }

  /* Reset agressivo de efeitos: tudo preto, sem fundos, sombras,
     blur, gradientes de fundo, animações ou transições. */
  *, *::before, *::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #000 !important;
    animation: none !important;
    transition: none !important;
  }

  html, body {
    font-size: 11.5pt;
    line-height: 1.55;
    color: #000 !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body { font-family: 'Sora', system-ui, -apple-system, sans-serif; }

  /* Container fluido — a margem do @page já delimita a folha. */
  .container { max-width: 100% !important; width: 100% !important; padding-inline: 0 !important; margin-inline: 0 !important; }

  img, svg { max-width: 100% !important; }


  /* ----------------------------------------------------------
     1b. Neutralizar o GSAP/ScrollTrigger no papel
     O pin do stepper (a) envolve o stepper num .pin-spacer com altura
     e margens FIXAS e (b) congela height/width INLINE no próprio .stepper
     (ex.: height:571px; width:900px). Na impressão os 4 painéis empilham
     (~1600px) e transbordam a caixa travada, caindo sobre o #mecanica; e
     900px estoura o A4. Solução: display:contents some com o wrapper, e
     reabrimos height/width/max-* do stepper (!important vence o inline). */
  .pin-spacer { display: contents !important; }
  .stepper {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .stepper__stage { height: auto !important; max-height: none !important; }
  .schedule, [data-anim], [data-reveal],
  [data-stagger] > *, [data-schedule-item] {
    transform: none !important;
    position: static !important;
  }

  /* ----------------------------------------------------------
     2. FORÇAR VISÍVEL tudo que o JS/estado esconde
     (sobrescreve standway.css ~1108 e ~1385-1387 e o stepper)
     ---------------------------------------------------------- */
  /* .hero tem opacity:0 de base (faz fade-in por animação que NÃO roda na
     impressão) — forçamos visível, senão o cabeçalho inteiro some.
     .hero__inner pode carregar opacity/transform inline da transição GSAP. */
  .hero,
  .hero__inner,
  [data-reveal],
  [data-anim="hero"],
  [data-stagger] > *,
  [data-schedule-item] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Stepper: painéis inativos (incl. [hidden]) viram blocos empilhados.
     O base os posiciona absolute/translateX e os oculta por opacity ou
     visibility:hidden — aqui reativamos todos. */
  .stepper__panel,
  .stepper__panel[hidden] {
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
    margin-bottom: 10mm;
    break-inside: avoid;
  }


  /* ----------------------------------------------------------
     3. OCULTAR na impressão
     ---------------------------------------------------------- */
  /* Fundos decorativos / hero chrome */
  .aurora,
  .hero__bg,
  .hero__grid,
  .hero__glow,
  .hero__scroll,
  /* Menu superior (Riviera) */
  .topnav,
  /* Botões / CTAs e wrapper magnético */
  .btn,
  .btn--magnetic,
  /* Botão de imprimir (somente tela) */
  .print-cta,
  /* Overlay do gate de senha — se ainda presente, não deve imprimir */
  #standway-gate,
  /* Prova social / carrossel de marcas */
  #marcas,
  .section--brands,
  /* Chrome do stepper */
  .stepper__steps,
  .stepper__indicator,
  .stepper__progress,
  /* Conectores do funil */
  .funnel__connector,
  /* Ícones/tooltip de info do cronograma (o texto do item permanece) */
  .info-icon,
  .info-tooltip {
    display: none !important;
  }

  /* Pseudo "Role para avançar" do stepper scroll-driven */
  .stepper.is-scroll-driven::after {
    content: "" !important;
    display: none !important;
  }


  /* ----------------------------------------------------------
     4. Reformatar componentes para leitura linear
     ---------------------------------------------------------- */

  /* HERO — cabeçalho compacto e centralizado do documento */
  .hero {
    min-height: auto !important;
    height: auto !important;
    padding: 0 0 8mm !important;
    display: block !important;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  .hero__inner { text-align: center; }
  .hero__logo {
    margin: 0 auto 5mm !important;
    width: auto !important;
    max-height: 18mm;          /* logo menor na impressão */
  }
  /* Logos claros somem no fundo branco. A do Riviera é wordmark
     "RIVIERA" (branco) + "HOUSE" (marrom) → renderiza em preto sólido.
     A do Visão é colorida e já aparece no branco, então não recebe filtro. */
  .hero__logo[src*="Riviera"],
  .hero__logo[src*="riviera"] {
    filter: brightness(0) !important;
  }
  .hero__subtitle { margin-left: auto; margin-right: auto; }

  /* SEÇÕES — padding enxuto, sem altura mínima imposta */
  .section {
    padding: 6mm 0 !important;
    min-height: auto !important;
    border-top: 1px solid #ddd;
    break-inside: auto;
  }
  .section:first-of-type { border-top: 0; }
  .section__title,
  .section__title--wide {
    max-width: 100% !important;
    break-after: avoid;
  }
  .section__lead,
  .section__text { max-width: 100% !important; }

  /* Linha de acento — vira um traço cinza discreto */
  .accent-line { background: #ccc !important; opacity: 1 !important; }

  /* GRIDS (operação / incluso) — grade simples com bordas finas */
  .grid-ops,
  .grid-deliver {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    border-top: 1px solid #ccc !important;
    border-left: 1px solid #ccc !important;
    margin-top: 6mm !important;
  }
  .op-card,
  .deliver-card {
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    padding: 3mm !important;
    min-height: auto !important;
    break-inside: avoid;
    color: #000 !important;
  }
  .op-card__label,
  .deliver-card__label { color: #000 !important; }

  /* STEPPER (#estrutura) — painéis viram blocos empilhados com borda */
  .stepper { max-width: 100% !important; margin-top: 4mm !important; }
  .stepper__stage {
    min-height: auto !important;
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
  }
  .stepper__panel {
    border: 1px solid #ccc;
    padding: 6mm;
    border-radius: 4px;
    align-items: flex-start;
  }
  /* número da fase: pequeno, em laranja, junto do título */
  .stepper__panel-num {
    position: static !important;
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
    font-size: 14pt !important;
    line-height: 1 !important;
    margin-bottom: 2mm;
  }
  .stepper__list { display: block !important; max-width: 100% !important; }
  .stepper__list li { color: #000 !important; }

  /* FUNIL (#mecanica — só Visão) — lista enxuta, ícone limpo (sem círculo),
     um passo por linha: [ícone] FASE · descrição. */
  .funnel { display: block !important; margin-top: 4mm !important; }
  .funnel__step {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 2.5mm !important;
    break-inside: avoid;
    margin-bottom: 1.5mm !important;
    padding: 0 !important;
  }
  /* nó deixa de ser círculo: vira só o ícone */
  .funnel__node {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
  }
  .funnel__icon { width: 4.2mm !important; height: 4.2mm !important; color: #FF4D00 !important; }
  /* número some na versão impressa (a fase já indica a sequência) */
  .funnel__num { display: none !important; }
  .funnel__phase {
    font-size: 8pt !important;
    letter-spacing: 0.12em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* separador sutil entre fase e descrição */
  .funnel__phase::after { content: " ·"; color: #999; }
  .funnel__label {
    color: #000 !important;
    font-size: 10pt !important;
    max-width: 100% !important;
  }

  .mecanica__cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4mm !important;
    margin-top: 4mm !important;
  }
  .mecanica__card {
    border: 1px solid #ccc !important;
    padding: 4mm !important;
    break-inside: avoid;
  }
  .mecanica__title,
  .mecanica__text { color: #000 !important; }

  /* CRONOGRAMA (#cronograma) — lista vertical, SEM a linha do timeline */
  .schedule { margin-top: 6mm !important; padding-left: 0 !important; }
  .schedule::before { display: none !important; }
  .schedule__item {
    break-inside: avoid;
    padding-bottom: 6mm !important;
    gap: 1mm 6mm !important;
  }
  .schedule__dot {
    background: #999 !important;
    border: 1px solid #999 !important;
  }
  .schedule__index { color: #000 !important; }
  .schedule__date { color: #000 !important; font-weight: 700; }
  .schedule__list { display: block !important; }
  .schedule__list li { color: #000 !important; }
  .schedule__list li::before { background: #999 !important; opacity: 1 !important; }
  .schedule__badge { border: 1px solid #ccc !important; }
  .schedule__star { fill: #FF4D00 !important; }

  /* INVESTIMENTO (#investimento) — entra na impressão, mas o VALOR da
     proposta fica MASCARADO (caracteres especiais). Os custos sob
     responsabilidade do cliente aparecem normalmente (não são o preço). */
  #investimento .invest { display: block !important; }
  .invest__card,
  .invest__extras {
    border: 1px solid #ccc !important;
    padding: 5mm !important;
    margin-top: 4mm !important;
    break-inside: avoid;
  }
  .invest__title,
  .invest__intro,
  .invest__list li,
  .invest__sub,
  .invest__obs,
  .invest__divider,
  .invest__extras-eyebrow,
  .invest__extras-item,
  .invest__extras-value,
  .invest__extras-note { color: #000 !important; }
  /* card centralizado; a lista de inclusos fica à esquerda mas como bloco
     centralizado, para não ficar desalinhada */
  .invest__card { text-align: center !important; }
  .invest__list {
    display: inline-block !important;
    text-align: left !important;
    margin-inline: auto !important;
  }
  .invest__pricing {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center !important;
    gap: 8mm;
    margin: 5mm 0 !important;
  }
  .invest__option { text-align: center !important; }
  /* Máscara do preço: esconde o valor real (e o prefixo "até 5x de") e
     mostra caracteres especiais no lugar. */
  .invest__price {
    font-size: 0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }
  .invest__price::after {
    content: "R$ ●●●●●●";
    font-size: 15pt !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #555 !important;
    -webkit-text-fill-color: #555 !important;
  }
  .invest__extras-list { display: block !important; }
  .invest__extras-list li {
    display: flex;
    justify-content: space-between;
    gap: 4mm;
    margin-bottom: 1.5mm;
  }

  /* FECHAMENTO (#fechamento) */
  .closing { break-inside: avoid; }


  /* ----------------------------------------------------------
     5. Cor laranja (#FF4D00) só nos títulos/detalhes
     (depois do reset que põe tudo preto). Inclui correção do
     gradiente em texto: background-clip:text deixa o fill
     transparent no base — forçamos -webkit-text-fill-color.
     ---------------------------------------------------------- */
  .section__title,
  .section__title--wide,
  .hero__title,
  .stepper__title,
  .stepper__panel-num,
  .stepper__eyebrow,
  .section__eyebrow,
  .schedule__title,
  .closing__title,
  .funnel__phase,
  .funnel__num,
  .mecanica__tag {
    color: #FF4D00 !important;
    -webkit-text-fill-color: #FF4D00 !important;
  }

  /* Subtítulo do fechamento usa gradiente em texto → forçar preto */
  .closing__subtitle {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }


  /* ----------------------------------------------------------
     6. Estrutura / bordas e rodapé
     ---------------------------------------------------------- */
  /* Destaques inline (mark/highlight) — sem fundo, só negrito */
  .highlight { background: none !important; font-weight: 600; }

  .footer {
    border-top: 1px solid #ccc !important;
    padding-block: 6mm !important;
    break-inside: avoid;
  }
  /* Logo Standway é clara (some no branco) → inverte para ficar escura */
  .footer__brand { height: 18px !important; opacity: 1 !important; filter: invert(1) !important; }
}