/* ========================================================
     ESTRUTURA DE CADA SEÇÃO COM FUNDO LÍQUIDO
     - .liquid-section: o container da sua seção (precisa de
       position:relative + overflow:hidden)
     - data-liquid-colors: lista de cores separada por vírgula.
       É AQUI que você troca a paleta de cada seção, sem
       precisar tocar no JS.
     - canvas.liquid-bg: fica posicionado atrás do conteúdo
     - .liquid-overlay: véu translúcido opcional pra garantir
       legibilidade do texto por cima
     - .content: seu conteúdo real (textos, botões, etc.)
     ======================================================== */


  
  .liquid-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 100vh;
  }

  canvas.liquid-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1000;
  }

  .liquid-overlay {
    position: absolute;
    inset: 0;
    z-index: -999;
    pointer-events: none;
    /* opacidade do véu controlada por variável CSS por seção */
    background: var(--overlay-color, transparent);
    opacity: var(--overlay-opacity, 0);
  }

  .content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 2.5rem;
    text-align: center;
  }

  .content .eyebrow {
    font-family: "Inter", Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 1rem;
  }

  .content h2 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.08;
    margin: 0 0 1.1rem;
    font-weight: 600;
  }

  .content p {
    font-family: "Inter", Arial, sans-serif;
    font-size: 1.02rem;
    line-height: 1.6;
    opacity: 0.82;
    margin: 0;
  }

  /* as 3 variantes abaixo usam os mesmos tons fixos do resto do site
     (--paper / #14120f / uma variação pálida do --accent), pra não criar
     uma emenda de cor entre estes capítulos e as seções ao redor */

  /* Seção 1 — clara, paleta padrão (terracota / âmbar) */
  .section-cream {
    background: #f6f1e7;
    --overlay-color: #f6f1e7;
    --overlay-opacity: 0.12;
  }

  /* Seção 2 — escura, mesma técnica, cores mais vívidas */
  .section-dark {
    background: #14120f;
    color: #f6f1e7;
    --overlay-color: #14120f;
    --overlay-opacity: 0.16;
  }

  /* Seção 3 — clara, blush levemente terracota (não um rosa neutro) */
  .section-rose {
    background: #f6e4d8;
    --overlay-color: #f6e4d8;
    --overlay-opacity: 0.14;
  }

  @media (prefers-reduced-motion: reduce) {
    html, body { scroll-behavior: auto; }
  }