@font-face {
      font-family: "Sora";
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url("assets/css/fonts/sora-200.ttf") format("truetype");
    }

    @font-face {
      font-family: "Sora";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url("assets/css/fonts/sora-300.ttf") format("truetype");
    }

    @font-face {
      font-family: "Sora";
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url("assets/css/fonts/sora-600.ttf") format("truetype");
    }

    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("assets/css/fonts/ibm-plex-mono-400.ttf") format("truetype");
    }

    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("assets/css/fonts/ibm-plex-mono-500.ttf") format("truetype");
    }

    @font-face {
      font-family: "IBM Plex Mono";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("assets/css/fonts/ibm-plex-mono-700.ttf") format("truetype");
    }

    :root {
      --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --color-text: #f5f5f5;
      --color-text-2: rgba(255, 255, 255, 0.62);
      --color-text-3: rgba(255, 255, 255, 0.42);
      --color-ink: #090909;
      --color-paper: #f3f3ee;
      --color-panel: rgba(255, 255, 255, 0.04);
      --color-accent-2: #bdff00;
      --card-title-size: clamp(17px, 2vw, 19px);
      --card-description-size: clamp(12px, 1.35vw, 13px);
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-12: 3rem;
      --space-16: 4rem;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
    }

    h1,
    h2,
    h3,
    p {
      font-family: var(--font-sans);
    }

    /* Protocolo Água: Fluidez total até 1080px */
    html, body {
      background: #050505;
      color: var(--color-text);
      min-height: 100vh;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      width: 100%;
      max-width: 100vw;
      font-family: var(--font-sans);
      font-weight: 200;
      line-height: 1.6;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      scrollbar-color: var(--color-accent-2) #050505;
      scrollbar-width: thin;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: #050505;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--color-accent-2);
      border: 2px solid #050505;
      border-radius: 999px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    .agua-container {
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      padding: clamp(40px, 6vw, 72px) clamp(12px, 2vw, 20px) clamp(44px, 7vw, 80px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .site-wrapper > .agua-container:first-child {
      padding-bottom: 0;
    }

    /* Segundo container (após o marquee) — só padding-top */
    .agua-container-links {
      max-width: 1180px;
      padding: clamp(76px, 10vw, 132px) clamp(12px, 2vw, 20px) clamp(116px, 14vw, 180px);
    }
    
    /* Hero Vertical & Fluido */
    .hero-bio {
      width: 100%;
      min-height: clamp(600px, 82vh, 760px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 0;
      position: relative;
      /*! background: #050505; */ /* Bloqueia o reveal atrás */
    }
    
    .hero-figure-bio {
      width: 100%;
      max-width: clamp(320px, 29vw, 380px);
      height: auto;
      position: relative;
      margin-bottom: var(--space-6);
      z-index: 1;
    }
    
    .hero-figure-bio img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
    }

    /* Arames: usando background repetido para preencher toda a extremidade da tela! */
    .hero-wire-bio {
      position: absolute;
      top: 50%;
      left: -50vw;
      width: 200vw; /* Bem largo para cobrir a tela mesmo super inclinado */
      height: 100px;
      transform: translateY(-50%);
      background: url('assets/upload-gerais/arame-hero.webp') repeat-x center;
      background-size: contain;
      z-index: 1;
      opacity: 0.6;
    }

    @keyframes animateWireForward {
      0% { background-position: 0 0; }
      100% { background-position: -2000px 0; }
    }

    @keyframes animateWireBackward {
      0% { background-position: 0 0; }
      100% { background-position: 2000px 0; }
    }
    
    .hero-wire-bio-back {
      transform: translateY(-50%) rotate(15deg); 
      opacity: 0.4;
      filter: blur(2px);
      animation: animateWireForward 60s linear infinite;
    }
    
    .marquee-track {
      display: flex;
      width: max-content;
      white-space: nowrap;
      animation: marquee 60s linear infinite;
      will-change: transform;
    }

    .marquee-group {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: clamp(28px, 4vw, 56px);
      min-width: 100vw;
      padding-right: clamp(28px, 4vw, 56px);
    }

    .marquee-group span {
      flex: 0 0 auto;
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: clamp(12px, 1.1vw, 15px);
      letter-spacing: 0.02em;
    }

    .marquee-group span::after {
      content: "•";
      margin-left: clamp(28px, 4vw, 56px);
      color: rgba(255, 255, 255, 0.72);
    }
    
    .hero-wire-bio-front {
      z-index: 3;
      transform: translateY(-20%) rotate(-15deg); /* Super inclinado cruzando a tela */
      animation: animateWireBackward 45s linear infinite;
    }
    
    /* Textos Fluidos */
    .hero-bio .code-title {
      font-size: clamp(2.2rem, 8vw, 5.5rem);
      line-height: 0.95;
      margin: 0 0 var(--space-4);
      text-wrap: balance;
      font-weight: 300;
      letter-spacing: -0.04em;
    }

    .hero-bio .hero-title-strong {
      margin: clamp(28px, 4vw, 44px) 0 0 0; /* Aumentado o espaço entre a imagem/arame e o título */
      font-size: clamp(42px, 5.2vw, 66px);
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 0.98;
      position: relative;
      z-index: 4;
    }

    .hero-proof {
      position: relative;
      z-index: 4;
      max-width: 620px;
      margin: clamp(18px, 2.6vw, 26px) auto 0;
      color: var(--color-text-2);
      font-family: var(--font-sans);
      font-size: clamp(14px, 1.5vw, 17px);
      line-height: 1.55;
      text-wrap: balance;
    }
    
    .hero-bio .scroll-chip {
      font-size: clamp(8px, 1.2vw, 12px);
      letter-spacing: 0.2em;
      color: var(--color-text-3);
      text-transform: uppercase;
      font-weight: 500;
      font-family: var(--font-mono);
    }
    
    /* Sessões de Links Fluídas */
    .links-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: clamp(72px, 10vw, 132px);
      position: relative;
      z-index: 10;
      /*! background: #050505; */ /* Bloqueia o reveal atrás */
    }

    .link-section {
      width: 100%;
      padding: clamp(34px, 5vw, 64px);
      border-radius: 8px;
    }

    #criacoes,
    #redes {
      background: #101010;
    }

    #plataformas {
      background: var(--color-paper);
      color: var(--color-ink);
    }
    
    .link-section-title {
      font-size: clamp(10px, 1.2vw, 12px);
      text-transform: uppercase;
      letter-spacing: 0.24em;
      color: var(--color-text-3);
      margin: 0 0 clamp(28px, 4vw, 48px);
      text-align: left;
      font-weight: 600;
      font-family: var(--font-mono);
    }

    #plataformas .link-section-title {
      color: rgba(10, 10, 10, 0.48);
    }
    
    .link-list {
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 1.8vw, 18px);
    }
    
    /* Botões Premium (Protocolo Água + Identidade) */
    .link-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: clamp(34px, 5vw, 48px);
      padding: clamp(28px, 4.6vw, 44px) clamp(30px, 5.2vw, 56px);
      background: var(--color-panel);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 0;
      box-shadow: none;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    #plataformas .link-card {
      background: #ffffff;
      color: var(--color-ink);
    }
    
    .link-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at left, rgba(217, 255, 47, 0.05) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
      pointer-events: none;
    }

    .link-card-content-wrapper {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .link-card-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .link-card-title {
      font-size: var(--card-title-size);
      font-weight: 600;
      color: var(--color-text);
      letter-spacing: -0.01em;
      transition: color 0.3s;
      font-family: var(--font-sans);
      overflow-wrap: anywhere;
    }

    #plataformas .link-card-title {
      color: var(--color-ink);
    }

    .link-card-subtitle {
      font-size: var(--card-description-size);
      color: var(--color-text-2); /* Padronizado com as descrições dos produtos */
      font-weight: 400;
      font-family: var(--font-sans);
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    #plataformas .link-card-subtitle {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    #plataformas .link-card-subtitle {
      color: rgba(10, 10, 10, 0.58);
    }

    .link-card-arrow {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: end;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.04);
      border: 0;
      color: var(--color-text-2);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;
    }

    #plataformas .link-card-arrow {
      background: #f0f0eb;
      color: rgba(10, 10, 10, 0.58);
    }

    .link-card-arrow svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.4s ease;
    }

    .link-card:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    #plataformas .link-card:hover {
      background: #ffffff;
    }

    .link-card:hover::before {
      opacity: 1;
    }

    .link-card:hover .link-card-title {
      color: #fff;
    }

    #plataformas .link-card:hover .link-card-title {
      color: var(--color-ink);
    }

    .link-card:hover .link-card-arrow {
      background: var(--color-accent-2);
      color: #000;
    }

    .link-card:hover .link-card-arrow svg {
      transform: translate(2px, -2px); /* Diagonal arrow animation */
    }

    .link-card:active {
      transform: translateY(-1px);
    }
    /* Carrossel de Programas */
    .program-carousel {
      width: 100%;
      position: relative;
      --program-gap: clamp(18px, 2vw, 24px);
    }
    
    .program-carousel-track {
      display: flex;
      gap: var(--program-gap);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: var(--space-2);
      touch-action: pan-x pan-y pinch-zoom;
      overscroll-behavior-x: auto;
      cursor: grab;
    }
    
    .program-carousel-track:active {
      cursor: grabbing;
    }
    
    .program-carousel-track::-webkit-scrollbar {
      display: none;
    }
    
    .program-card {
      flex: 0 0 calc((100% - var(--program-gap)) / 2); /* 2 cards no desktop */
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      background: var(--color-panel);
      border: 0;
      box-shadow: none;
      border-radius: 8px;
      overflow: hidden;
      text-decoration: none;
      color: var(--color-text);
      transition: all 0.3s ease;
      user-select: none; /* Previne seleção durante drag */
      -webkit-user-drag: none;
    }

    .marquee-container {
      /* Fora do container: ocupa 100% da largura do body naturalmente */
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: clamp(76px, 10vw, 132px);
      background: rgba(255, 255, 255, 0.04);
      padding: 22px 0;
      overflow: hidden;
      white-space: nowrap;
      display: block;
      /* As margens ficam no proprio container agua, aqui só a altura */
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @media (max-width: 680px) {
      .marquee-container {
        margin-top: 72px;
      }

      .program-card {
        /* Mobile: 1 card inteiro e a beirada do proximo para incentivar swipe */
        flex: 0 0 calc(85% - 8px); 
      }
    }
    
    .program-card:hover {
      background: rgba(255, 255, 255, 0.04);
      /* Efeito de subir removido a pedido do usuario */
      box-shadow: none;
    }
    
    .program-card-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: clamp(22px, 3vw, 32px) clamp(28px, 4vw, 42px);
    }
    
    .program-card-header span {
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      /* Efeito hover colorido (RGB) removido a pedido do usuario para um visual mais minimalista */
    }
    
    .program-card-body {
      padding: 0 clamp(28px, 4vw, 42px) clamp(30px, 4vw, 44px); /* Respiro amplo ao redor da imagem */
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .program-card-img {
      width: 100%;
      aspect-ratio: 16/9; /* Fixado em 16:9 para ambas ficarem com exatamente o mesmo tamanho e proporção */
      background: #000000; /* Totalmente preto para fundir perfeitamente com o fundo do icone */
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      border: 0;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .program-card-img img {
      width: 65%; /* Reduzido para criar o espaçamento (respiro) natural em volta do ícone */
      height: 65%;
      object-fit: contain; /* Não corta a imagem, mantém o ícone centralizado */
      opacity: 0.9;
      transition: opacity 0.3s, transform 0.4s ease;
      -webkit-user-drag: none;
    }

    .program-card:hover .program-card-img img {
      opacity: 1;
      transform: scale(1.05); /* Leve zoom no icone ao passar o mouse */
    }
    
    .program-card-content {
      padding: clamp(38px, 5.8vw, 64px) clamp(34px, 5.4vw, 56px);
      text-align: left;
    }
    
    .program-card-content h3 {
      font-size: var(--card-title-size);
      margin: 0 0 var(--space-3);
      font-weight: 500;
      color: var(--color-accent-2); /* Destaque verde lima */
    }
    
    .program-card-content p {
      font-size: var(--card-description-size);
      color: var(--color-text-2);
      margin: 0;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 3; /* Maximo de 3 linhas */
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* SITE WRAPPER (Para efeito Reveal Footer) */
    .site-wrapper {
      position: relative;
      z-index: 2;
      background: #090909; /* Fundo sólido para esconder a cortina atrás */
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.72); /* Sombra para o efeito 3D ao revelar */
    }
    
    /* CTA VAMOS CONVERSAR */
    .cta-container {
      padding-top: clamp(60px, 10vw, 120px);
      padding-bottom: clamp(80px, 15vw, 160px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .cta-subtitle {
      font-size: clamp(14px, 1.5vw, 16px);
      color: rgba(255, 255, 255, 0.6);
      max-width: 580px;
      margin-bottom: var(--space-8);
      line-height: 1.6;
      font-family: var(--font-sans);
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: #bdff00;
      color: #050505;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      font-family: var(--font-sans);
      padding: 16px 32px;
      border-radius: 12px;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cta-btn:hover {
      transform: translateY(-2px);
    }

    .cta-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* REVEAL CONTAINER (Envolve CTA e Footer) */
    /* Fica fixo no fundo. O site-wrapper (z-index:2) rola por cima dele e o vai revelando. */
    .reveal-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      background: #111111;
      display: flex;
      flex-direction: column;
    }

    .footer-reveal {
      padding: 40px 24px;
      display: flex;
      justify-content: center;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .cta-title {
      font-size: clamp(36px, 6vw, 56px);
      font-weight: 500;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: var(--space-4);
      color: var(--color-text);
    }

    .footer-content {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }
    
    .footer-instagram {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      transition: all 0.3s;
    }
    .footer-instagram:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.2);
    }

    @media (max-width: 680px) {
      .agua-container {
        padding-inline: 14px;
      }

      .agua-container-links {
        padding-top: 72px;
        padding-bottom: 132px;
      }

      .hero-bio {
        min-height: auto;
        padding-top: 18px;
        margin-bottom: 0;
      }

      .hero-figure-bio {
        max-width: min(84vw, 430px);
        margin-bottom: var(--space-5);
      }

      .hero-wire-bio {
        left: -70vw;
        width: 240vw;
        height: 150px;
        background-size: auto 88px;
        opacity: 0.78;
      }

      .hero-wire-bio-back {
        opacity: 0.58;
        filter: blur(1px);
        transform: translateY(-66%) rotate(15deg);
      }

      .hero-wire-bio-front {
        opacity: 0.86;
        transform: translateY(-8%) rotate(-15deg);
      }

      .hero-title-strong {
        margin-top: clamp(32px, 10vw, 56px);
        font-size: clamp(3rem, 12.5vw, 4.35rem);
        letter-spacing: -0.035em;
      }

      .links-wrapper {
        gap: 84px;
      }

      .link-section {
        padding: 32px 18px;
      }

      .link-section-title {
        margin-bottom: 28px;
      }

      .link-card {
        padding: 28px 22px;
        background: var(--color-panel);
      }

      .link-card-content-wrapper {
        min-width: 0;
      }

      .link-card-title {
        font-size: clamp(1.08rem, 4.7vw, 1.25rem);
        line-height: 1.15;
      }

      .link-card-subtitle {
        font-size: clamp(0.82rem, 3.4vw, 0.92rem);
        line-height: 1.35;
      }

      .link-card-arrow {
        width: 46px;
        height: 46px;
        background: rgba(255, 255, 255, 0.04);
      }

      .program-card {
        background: var(--color-panel);
      }

      .program-card-content {
        padding: 32px 24px 34px;
      }

      .program-card-content h3 {
        font-size: clamp(1.08rem, 4.7vw, 1.25rem);
        line-height: 1.15;
      }

      .program-card-content p {
        font-size: clamp(0.82rem, 3.4vw, 0.92rem);
        line-height: 1.35;
      }

      .program-carousel-track {
        scroll-snap-type: x proximity;
      }
    }