/* ITPD — Homepage-specific styles (hero only).
   Tokens, buttons, sections, cards etc. live in itpd-base.css — this file
   should only ever contain rules unique to the homepage hero. */

  /* ---- Hero ---- */
  .itpd-hero{ position:relative; min-height:82vh; display:flex; align-items:center; background:linear-gradient(135deg,#01092D 0%,#0A1D4C 55%,#0E255C 100%); color:#fff; padding:150px 0 90px; overflow:hidden; }
  /* This row IS the same .itpd-container every other section uses — glow/mark position against
     ITS edges, not the full-bleed section, so they align with the rest of the site. */
  .itpd-hero__row{ position:relative; width:100%; z-index:3; }
  .itpd-hero__inner{ position:relative; z-index:3; max-width:640px; }

  /* Logo mark — the actual iTPD lens/bar icon, reproduced at hero scale and brought to life on load */
  .itpd-hero__glow{ position:absolute; z-index:1; right:0; top:50%; width:min(46vw,620px); aspect-ratio:1; transform:translateY(-50%); background:radial-gradient(circle, rgba(39,110,214,.35) 0%, rgba(1,189,235,.12) 45%, transparent 72%); filter:blur(10px); pointer-events:none; }
  .itpd-hero__mark{ position:absolute; z-index:2; right:0; top:50%; width:clamp(280px,28vw,460px); transform:translateY(-50%); pointer-events:none; }
  .itpd-mark-svg{ width:100%; height:auto; display:block; overflow:visible; }
  /* Entrance: bars rise from the center outward, then each settles into its own slow, permanent breathing loop
     (uses the standalone `scale` property so it never fights the entrance `transform`) */
  .itpd-mb{ transform-box:fill-box; transform-origin:center; transform:scaleY(0); opacity:0; }
  .itpd-mb--5{ fill:var(--accent); animation:itpd-mark-rise .9s cubic-bezier(.16,1,.3,1) 0s forwards, itpd-mb-breathe 5s ease-in-out .9s infinite, itpd-mark-glow 4.5s ease-in-out 1.3s infinite; }
  .itpd-mb--4{ fill:var(--secondary); animation:itpd-mark-rise .9s cubic-bezier(.16,1,.3,1) .12s forwards, itpd-mb-breathe 5.4s ease-in-out 1.02s infinite; }
  .itpd-mb--3{ fill:var(--primary); animation:itpd-mark-rise .9s cubic-bezier(.16,1,.3,1) .24s forwards, itpd-mb-breathe 5.8s ease-in-out 1.14s infinite; }
  .itpd-mb--2{ fill:#7FA8E4; animation:itpd-mark-rise .9s cubic-bezier(.16,1,.3,1) .36s forwards, itpd-mb-breathe 5.2s ease-in-out 1.26s infinite; }
  .itpd-mb--1{ fill:var(--pale); animation:itpd-mark-rise .9s cubic-bezier(.16,1,.3,1) .48s forwards, itpd-mb-breathe 4.9s ease-in-out 1.38s infinite; }
  @keyframes itpd-mark-rise{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }
  @keyframes itpd-mb-breathe{ 0%,100%{ scale:1; } 50%{ scale:.94; } }
  @keyframes itpd-mark-glow{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }
  .itpd-hero__scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, #01092D 0%, rgba(1,9,45,.7) 32%, rgba(1,9,45,.15) 58%, transparent 78%); }

  @media (max-width:820px){
    .itpd-hero__row{ display:flex; flex-direction:column; }
    .itpd-hero__inner{ order:1; }
    .itpd-hero__mark{ position:static; order:2; transform:none; width:180px; margin:36px auto 0; }
    .itpd-hero__glow{ display:none; }
    .itpd-hero__scrim{ display:none; }
  }

  .itpd-eyebrow--onhero{ color:var(--accent); }
  .itpd-hero__title{ margin:0; }
  .itpd-hero__title-strong{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(32px,4.8vw,54px); line-height:1.08; letter-spacing:-.01em; color:#fff; margin-bottom:18px; }
  .itpd-hero__title-light{ display:block; font-family:'Poppins',sans-serif; font-weight:400; font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:#B9C7E6; max-width:540px; }

  .itpd-hero__actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

  .itpd-hero__scroll{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3; }
  .itpd-hero__scroll svg{ width:22px; height:auto; display:block; animation:itpd-scroll-bounce 1.8s ease-in-out infinite; }
  @keyframes itpd-scroll-bounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(8px); opacity:1; } }

  @media (max-width:820px){
    .itpd-hero{ min-height:auto; padding:160px 0 72px; }
  }

  /* ---- Nossos Valores — inline editorial line: values set large in the display
     face, separated by small vertical accent bars (the brand's bar motif used as
     punctuation). The bar is a ::before bound to each value (not a standalone
     element), so it travels with its value on wrap and can never dangle at a
     line end. On mobile the line stacks into a tick list, mirroring the MVV
     page's Valores ledger. ---- */
  .itpd-values-label--spaced{ margin-top:72px; }
  .itpd-values-line{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:18px; row-gap:14px; margin:0 auto; max-width:900px; }
  .itpd-values-line span{ display:inline-flex; align-items:center; gap:18px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(17px,2vw,22px); line-height:1.3; color:var(--ink); }
  .itpd-values-line span + span::before{ content:''; width:4px; height:20px; border-radius:2px; background:var(--accent); flex-shrink:0; }
  .itpd-container-valores{ margin-top: 4em; text-align:center; }
  @media (max-width:640px){
    .itpd-container-valores{ text-align:left; }
    .itpd-values-line{ flex-direction:column; align-items:flex-start; justify-content:flex-start; margin:0; row-gap:0; }
    .itpd-values-line span{ padding:9px 0; gap:14px; }
    .itpd-values-line span::before{ content:''; width:4px; height:18px; border-radius:2px; background:var(--accent); flex-shrink:0; }
  }

  /* ---- Artigos & Notícias split feed — two independent columns, each its own
     destination, since they're two different sections not one blended feed ---- */
  .itpd-split-feed{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:48px; }
  @media (max-width:760px){ .itpd-split-feed{ grid-template-columns:1fr; gap:40px; } }
  .itpd-split-feed__title{ font-size:18px; margin:0 0 16px; }
  .itpd-split-feed__more{ text-align:right; margin-top:16px; }

  /* ---- Parceiros section — centered to match the visual weight of the CTA band
     right below it, so the transition doesn't feel like a jarring left-to-center
     jump. Scoped to this section specifically — .itpd-values-label/.itpd-body
     stay left-aligned everywhere else they're used on the site. ---- */
  .itpd-partners-center{ text-align:center; }
  .itpd-partners-center .itpd-body{ margin-left:auto; margin-right:auto; }
  .itpd-partners-center .itpd-logostrip{ justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .itpd-mb{ animation:none; transform:scaleY(1); scale:1; opacity:1; }
  .itpd-hero__scroll svg{ animation:none; opacity:.8; }
}