/* Impact Hub Piauí — construção de ecossistemas
   Base: Brand Guidelines Impact Hub 2023-2024 (Poppins, Impact Red, Deep Blue,
   uma cor de design por peça + seu par suave, formas orgânicas, botões em pílula).
   Cor de design escolhida: Orange, o sol do sertão e o caju. */

@layer reset, tokens, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scroll-behavior: smooth; }
  img, svg { display: block; max-width: 100%; }
  ul, ol { padding: 0; list-style: none; }
}

@layer tokens {
  :root {
    /* Cores base */
    --red: #812926;
    --off-black: #212020;
    --off-white: #faf9f6;
    --deep-blue: #1c395c;
    --grey-10: #e9e9e9;
    --white: #fff;
    /* Cor de design + par suave */
    --orange: #f78a3c;
    --orange-25: #fde2ce;
    --yellow: #ffd546; /* só para botões */
    --deep-blue-25: #c6cdd6;

    --font: "Poppins", "GT Walsheim", Arial, sans-serif;
    --gutter: clamp(1rem, 4vw, 3rem);
    --maxw: 75rem;
    --radius-pill: 999px;
    --radius-card: 1.75rem;
    --space-section: clamp(4rem, 10vw, 8rem);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
}

@layer base {
  body {
    font-family: var(--font);
    font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
    line-height: 1.6;
    color: var(--off-black);
    background: var(--off-white);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { line-height: 1.12; font-weight: 700; text-wrap: balance; }
  h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); letter-spacing: -.02em; }
  h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -.015em; }
  h3 { font-size: 1.2rem; }
  p { text-wrap: pretty; max-width: 65ch; }
  a { color: inherit; }
  [id] { scroll-margin-top: 5rem; }
  :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .skip {
    position: absolute; left: 1rem; top: -4rem; z-index: 99;
    background: var(--deep-blue); color: var(--white); padding: .6rem 1rem; border-radius: var(--radius-pill);
    &:focus { top: 1rem; }
  }
  /* "Tagline" do manual: ALL CAPS, curta, Deep Blue */
  .tagline {
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--deep-blue); margin-block-end: 1rem;
  }
  /* Destaque de palavra-chave: bold + cor de design */
  .hl { color: var(--orange); font-weight: 700; }
}

@layer layout {
  main > section {
    padding: var(--space-section) var(--gutter);
    > * { max-width: var(--maxw); margin-inline: auto; }
  }
  .section-head {
    margin-block-end: clamp(2rem, 5vw, 3.5rem);
    display: grid; gap: 1rem;
    & p:not(.tagline) { color: color-mix(in srgb, var(--off-black) 75%, transparent); }
    & .tagline { margin: 0; }
  }
  .section-head--light {
    color: var(--white);
    & .tagline { color: var(--orange-25); }
    & p:not(.tagline) { color: color-mix(in srgb, var(--white) 80%, transparent); }
  }
}

@layer components {

  /* ---------- Botões: pílula, bold, centralizado, alto contraste ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .9rem 1.6rem; border-radius: var(--radius-pill);
    background: var(--orange); color: var(--off-black);
    font-weight: 700; text-decoration: none; text-align: center;
    transition: transform .25s var(--ease), background-color .25s;
    &:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--orange) 85%, var(--white)); }
  }
  .btn--small { padding: .55rem 1.1rem; font-size: .9rem; }
  .btn--ghost {
    background: transparent; box-shadow: inset 0 0 0 2px var(--deep-blue); color: var(--deep-blue);
    &:hover { background: var(--deep-blue); color: var(--white); }
  }
  .btn--yellow { background: var(--yellow); &:hover { background: color-mix(in srgb, var(--yellow) 80%, var(--white)); } }
  .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; }

  /* ---------- Marca: quadrado vermelho + nome do local em Poppins ---------- */
  .brand {
    display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
    font-weight: 700; color: var(--off-black);
  }
  .brand__mark {
    display: grid; place-content: center; text-align: center;
    inline-size: 3rem; aspect-ratio: 1; background: var(--red); color: var(--white);
    text-transform: uppercase; line-height: .95;
    & span:first-child { font-size: .5rem; letter-spacing: .06em; }
    & span:last-child { font-size: 1.05rem; }
  }
  .brand__place { font-size: 1.3rem; }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .8rem var(--gutter);
    background: color-mix(in srgb, var(--off-white) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--grey-10);
    & nav { margin-inline-start: auto; }
    & nav ul { display: flex; gap: 1.75rem; }
    & nav a {
      text-decoration: none; font-weight: 500; font-size: .95rem;
      background: linear-gradient(var(--orange), var(--orange)) left bottom / 0 2px no-repeat;
      transition: background-size .3s var(--ease);
      &:hover { background-size: 100% 2px; }
    }
    @media (width < 52rem) {
      & nav { display: none; }
      & .btn { margin-inline-start: auto; }
    }
    @media (width < 26rem) { & .btn { display: none; } }
  }

  /* ---------- Hero ---------- */
  .hero {
    display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
    grid-template-columns: 1.15fr 1fr;
    max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto;
    & > * { max-width: none; margin: 0; }
    & h1 { margin-block-end: 1.5rem; }
    & .lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }
    @media (width < 52rem) { grid-template-columns: 1fr; }
  }
  .hero__art {
    position: relative; aspect-ratio: 1; isolation: isolate;
    max-inline-size: 34rem; inline-size: 100%; justify-self: center;
  }
  .hero__caption {
    grid-column: 1 / -1; font-size: .85rem; font-style: italic;
    color: color-mix(in srgb, var(--off-black) 65%, transparent);
    max-width: 48ch !important; justify-self: end; text-align: end;
    @media (width < 52rem) { justify-self: start; text-align: start; }
  }
  .blob { fill: var(--orange); }
  .blob--sun { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1; }

  /* Paredão com figuras rupestres em vermelho-ocre (Impact Red) */
  .rock-wall {
    position: absolute; inset: 18% 14% 16% 12%;
    color: var(--red);
    & .fig { position: absolute; overflow: visible; }
    & .fig--pessoa { inline-size: 22%; aspect-ratio: 40/60; left: 4%; top: 2%; rotate: -6deg; }
    & .fig--veado { inline-size: 42%; aspect-ratio: 80/60; right: 0; top: 14%; }
    & .fig--roda { inline-size: 78%; aspect-ratio: 120/60; left: 10%; bottom: 0; }
  }

  /* ---------- Encontro dos rios ---------- */
  .encontro {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
    max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto;
    & > * { max-width: none; margin: 0; }
    & h2 { margin-block-end: 1.25rem; }
    & p + p { margin-block-start: 1rem; }
    @media (width < 52rem) { grid-template-columns: 1fr; & .encontro__art { order: 2; } }
  }
  .encontro__art {
    background: var(--orange-25); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
    padding: clamp(1.5rem, 4vw, 3rem);
  }
  .rios {
    & .rio { fill: none; stroke-linecap: round; stroke-width: 14; }
    & .rio--poti { stroke: var(--deep-blue); }
    & .rio--parnaiba { stroke: var(--orange); }
    & .rio--junto { stroke: var(--red); stroke-width: 22; }
    & .encontro__ponto { fill: var(--off-white); stroke: var(--red); stroke-width: 6; }
  }
  .encontro__legenda {
    margin: .75rem auto 0; text-align: center; font-weight: 700; color: var(--red);
    & span:first-child { color: var(--deep-blue); }
    & span:nth-child(2) { color: #b85a1a; }
  }

  /* ---------- Faixa de números ---------- */
  .territorio { background: var(--deep-blue); color: var(--white); padding-block: clamp(3rem, 6vw, 4.5rem) !important; }
  .numeros {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem;
    & li { display: grid; gap: .35rem; border-inline-start: 3px solid var(--orange); padding-inline-start: 1rem; }
    & strong { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; color: var(--orange); }
    & span { font-size: .95rem; color: color-mix(in srgb, var(--white) 82%, transparent); }
  }

  /* ---------- Cards de missão (container queries) ---------- */
  .cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem;
  }
  .card {
    container-type: inline-size;
    display: flex; flex-direction: column; gap: .9rem;
    background: var(--white); border-radius: var(--radius-card); padding: 2rem;
    box-shadow: 0 1px 0 var(--grey-10), 0 18px 40px -28px color-mix(in srgb, var(--deep-blue) 45%, transparent);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    &:hover { transform: translateY(-6px); }
    & h3 { font-size: 1.4rem; }
    & > p:not(.card__tag, .card__meta) { color: color-mix(in srgb, var(--off-black) 80%, transparent); }
  }
  .card__icon {
    inline-size: 4.5rem; aspect-ratio: 1; display: grid; place-items: center;
    background: var(--orange-25); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
    & svg { inline-size: 62%; fill: var(--orange); }
    & .fill-red { fill: var(--red); }
    & .stroke { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
    & .fill-none { color: var(--red); }
  }
  .card__tag { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-blue); }
  .card__meta {
    margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--grey-10);
    font-size: .85rem; color: color-mix(in srgb, var(--off-black) 70%, transparent);
    & span { display: block; font-weight: 700; color: var(--red); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
  }
  @container (width > 26rem) {
    .card h3 { font-size: 1.6rem; }
  }

  /* ---------- Resultados ---------- */
  .construir { background: var(--white); }
  .resultados {
    counter-reset: r;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 2.5rem 2rem;
    & li { counter-increment: r; display: grid; gap: .6rem; align-content: start; }
    & li::before {
      content: counter(r, decimal-leading-zero);
      font-weight: 700; color: var(--orange); font-size: .9rem;
      border-block-end: 2px solid var(--orange-25); padding-block-end: .5rem;
    }
    & p { font-size: .95rem; color: color-mix(in srgb, var(--off-black) 78%, transparent); }
  }

  /* ---------- Metodologia: trilha no paredão ---------- */
  .metodologia {
    background:
      radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--red) 70%, transparent) 0 18%, transparent 19%),
      radial-gradient(circle at 92% 85%, color-mix(in srgb, var(--orange) 22%, transparent) 0 22%, transparent 23%),
      var(--red);
    color: var(--white);
  }
  .fases {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; position: relative;
    &::before { /* trilha pontilhada, como os pontos das pinturas */
      content: ""; position: absolute; inset-inline: 2rem; top: 1.75rem; block-size: 4px;
      background: radial-gradient(circle, var(--orange-25) 2px, transparent 2.5px) 0 0 / 14px 4px repeat-x;
    }
    & li { position: relative; display: grid; gap: .5rem; align-content: start; }
    & .fase__n {
      display: grid; place-items: center; inline-size: 3.5rem; aspect-ratio: 1;
      background: var(--orange); color: var(--off-black); font-weight: 700;
      border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
      transition: rotate .4s var(--ease), scale .4s var(--ease);
    }
    & li:hover .fase__n { rotate: -8deg; scale: 1.08; }
    & h3 { margin-block-start: .5rem; font-size: 1.15rem; }
    & p { font-size: .9rem; color: color-mix(in srgb, var(--white) 82%, transparent); }

    @media (width < 64rem) {
      grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem;
      &::before { display: none; }
    }
    @media (width < 34rem) {
      grid-template-columns: 1fr; row-gap: 1.5rem;
      & li { grid-template-columns: 3.5rem 1fr; column-gap: 1rem; }
      & .fase__n { grid-row: span 2; }
      & h3 { margin: 0; align-self: end; }
    }
  }

  /* ---------- Serviços: acordeão exclusivo (details[name]) ---------- */
  .servicos {
    display: grid; gap: .75rem;
    & details {
      background: var(--white); border-radius: 1.25rem; padding: 0 1.5rem;
      border: 1px solid var(--grey-10);
      transition: background-color .3s;
      &[open] { background: var(--orange-25); border-color: transparent; }
      &::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
      &[open]::details-content { block-size: auto; }
    }
    & summary {
      list-style: none; cursor: pointer; padding-block: 1.15rem;
      display: flex; justify-content: space-between; align-items: center; gap: 1rem;
      font-weight: 700; font-size: 1.05rem;
      &::-webkit-details-marker { display: none; }
      &::after {
        content: "+"; flex: none; display: grid; place-items: center;
        inline-size: 2rem; aspect-ratio: 1; border-radius: 50%;
        background: var(--deep-blue); color: var(--white); font-weight: 500;
        transition: rotate .3s var(--ease);
      }
    }
    & details[open] summary::after { rotate: 45deg; background: var(--red); }
    & details p { padding-block-end: 1.25rem; }
  }

  /* ---------- Por que ---------- */
  .porque { background: var(--white); }
  .motivos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem;
    & li { padding: 1.75rem; border-radius: var(--radius-card); background: var(--off-white); display: grid; gap: .5rem; align-content: start; }
    & h3 { color: var(--red); }
    & p { font-size: .95rem; }
  }

  /* ---------- CTA ---------- */
  .cta {
    position: relative; overflow: clip; isolation: isolate;
    background: var(--deep-blue); color: var(--white);
    & .tagline { color: var(--orange-25); }
    & h2 { margin-block-end: 1.25rem; max-width: 18ch; }
    & p:not(.tagline) { margin-block-end: 2rem; color: color-mix(in srgb, var(--white) 85%, transparent); }
  }
  .cta__art {
    position: absolute; z-index: -1; inline-size: min(36rem, 70vw); aspect-ratio: 1;
    right: -8%; top: 50%; translate: 0 -50%;
    & .blob--cta { inline-size: 100%; block-size: 100%; }
    & .fig--cta { position: absolute; inline-size: 52%; aspect-ratio: 2; left: 22%; top: 36%; color: var(--red); overflow: visible; }
    @media (width < 52rem) { opacity: .25; right: -30%; }
  }

  /* ---------- Footer ---------- */
  .site-footer {
    display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
    padding: 2rem var(--gutter); background: var(--off-black); color: color-mix(in srgb, var(--white) 70%, transparent);
    font-size: .85rem;
    & .brand { color: var(--white); }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* Formas animadas, como no manual */
    .blob { transform-origin: center; animation: morph 14s ease-in-out infinite alternate; }
    @keyframes morph {
      0%   { transform: rotate(0) scale(1, 1); }
      50%  { transform: rotate(8deg) scale(1.04, .97); }
      100% { transform: rotate(-6deg) scale(.97, 1.03); }
    }
    .rock-wall .fig { animation: sway 6s ease-in-out infinite alternate; }
    .rock-wall .fig--veado { animation-delay: -2s; }
    .rock-wall .fig--roda { animation-delay: -4s; }
    @keyframes sway { to { translate: 0 -6px; } }

    .rio { stroke-dasharray: 600; stroke-dashoffset: 600; animation: flow 2.4s var(--ease) forwards; }
    .rio--junto { animation-delay: 1.4s; }

    /* Revelação no scroll (scroll-driven animations) */
    @supports (animation-timeline: view()) {
      .card, .resultados li, .fases li, .motivos li, .encontro__art {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
      .rio { animation-timeline: view(); animation-range: entry 10% cover 45%; animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; }
      .rio--junto { animation-range: cover 30% cover 55%; }
    }
    @keyframes rise { from { opacity: 0; translate: 0 2rem; } }
    @keyframes flow { to { stroke-dashoffset: 0; } }
  }
}