/* Seções da landing page — ancoragem dos links do menu e ajustes de densidade.
   Usado apenas por index.html. */

/* Glow por trás da logo no topo da primeira dobra — sem card, sem bloco
   de cor: só um brilho difuso saindo da própria marca. A cor usa os
   tokens "-container" (rosa/roxo, a mesma família da logo) no claro e
   troca para "primary"/"secondary" no escuro, que já ficam mais claros
   nesse tema — a mesma lógica dos outros glows da página, adaptada ao
   tema em vez de repetir o valor do claro. */
.logo-hero-glow {
    position: absolute;
    inset: -55% -35%;
    z-index: -1;
    border-radius: 999px;
    filter: blur(28px);
    background: radial-gradient(circle, rgb(var(--color-primary-container) / .55) 0%, rgb(var(--color-secondary-container) / .30) 45%, transparent 75%);
    pointer-events: none;
}
html.dark .logo-hero-glow {
    background: radial-gradient(circle, rgb(var(--color-primary) / .55) 0%, rgb(var(--color-secondary) / .32) 45%, transparent 75%);
}

/* A linha do cadastro em três passos: um celular para cada passo.
   A altura das molduras é definida aqui, e não por utilitário no HTML, porque
   depende de quantos celulares cabem lado a lado — o Tailwind não expressa isso. */
.jornada-trio { display: flex; justify-content: center; gap: 1rem; }

/* De lg para cima os três dividem a largura do container. Com altura fixa eles
   mediam 782px dentro de uma coluna de 610px e vazavam pela direita em tudo que
   fosse menor que ~1400px. */
.jornada-trio > .phone-frame { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 2; }

/* Abaixo de lg, dividir por três daria menos de 140px de largura para cada tela
   — ilegível. Viram um carrossel que se arrasta, cada celular no mesmo tamanho
   dos das outras etapas da jornada. */
@media (max-width: 1023px) {
    .jornada-trio {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: .5rem; /* a sombra das molduras não pode ser cortada */
    }
    .jornada-trio::-webkit-scrollbar { display: none; }
    .jornada-trio > .phone-frame {
        flex: 0 0 auto;
        width: min(200px, 56vw);
        scroll-snap-align: start;
    }
}

/* A coluna de passos da jornada */
.jornada-numero { background: linear-gradient(135deg, #D97757, #EC4899, #B044E5); color: #fff; box-shadow: 0 10px 24px -8px rgba(236, 72, 153, .55); }

/* Ao chegar por um link do menu, a seção encosta exatamente no pé da barra fixa:
   o respiro vem do py-24 da própria seção, sem deixar sobrar a seção anterior. */
#como-funciona, #recursos, #beneficios, #cta { scroll-margin-top: var(--nav-h); }

/* Glows radiais sutis — a mesma linguagem do degradê da primeira dobra
   (rosa/magenta/roxo com blur), estendida a três seções de propósito, não
   a todas: #recursos (a mais longa, cheia de mockups) só ganha um toque
   nas pontas, para não competir com os celulares no meio.

   O tamanho de cada glow é fixo (vw para a largura, px para a altura) —
   NUNCA em % da própria seção. Em % o glow "esticava" junto com a altura
   da seção; no mobile, onde o layout empilha e a seção fica bem mais alta
   que no desktop, isso jogava o alcance do glow por cima do parágrafo do
   hero, lavando o texto (--color-on-surface-variant é claro no escuro,
   sobre um trecho do fundo que ficava claro demais por causa do glow).
   Com altura fixa o glow continua um acabamento raso no canto, do mesmo
   jeito em qualquer altura de seção.

   Reaproveita os tokens de cor de base.css: no claro usa os "-container"
   (mais suaves, pensados para fundo claro); no escuro troca para
   "primary"/"secondary", que já ficam mais claros nesse tema — por isso
   não é o mesmo degradê repetido, cada tema usa a força que combina com
   o seu fundo. Ficam só no espaço ao redor dos cards/texto: nunca cobrem
   mais que um canto raso. Um toque quente (o mesmo laranja dos números
   da jornada) entra no hero e em Benefícios, para lembrar o degradê do
   Instagram sem virar bloco de cor. */
#hero {
    background-image:
        radial-gradient(85vw 190px at 50% 0%, rgb(var(--color-primary-container) / .15), transparent 70%),
        radial-gradient(50vw 220px at 0% 60px, rgb(var(--color-secondary-container) / .13), transparent 70%),
        radial-gradient(50vw 220px at 100% 90px, rgb(217 119 87 / .10), transparent 70%);
}
html.dark #hero {
    background-image:
        radial-gradient(85vw 190px at 50% 0%, rgb(var(--color-primary) / .20), transparent 70%),
        radial-gradient(50vw 220px at 0% 60px, rgb(var(--color-secondary) / .18), transparent 70%),
        radial-gradient(50vw 220px at 100% 90px, rgb(240 145 110 / .13), transparent 70%);
}
#como-funciona {
    background-image:
        radial-gradient(60vw 220px at 8% 0%, rgb(var(--color-primary-container) / .16), transparent 70%),
        radial-gradient(55vw 220px at 100% 100%, rgb(var(--color-secondary-container) / .14), transparent 70%);
}
html.dark #como-funciona {
    background-image:
        radial-gradient(60vw 220px at 8% 0%, rgb(var(--color-primary) / .22), transparent 70%),
        radial-gradient(55vw 220px at 100% 100%, rgb(var(--color-secondary) / .20), transparent 70%);
}
#recursos {
    background-image:
        radial-gradient(65vw 200px at 100% 0%, rgb(var(--color-primary-container) / .14), transparent 70%),
        radial-gradient(65vw 200px at 0% 100%, rgb(var(--color-secondary-container) / .12), transparent 70%);
}
html.dark #recursos {
    background-image:
        radial-gradient(65vw 200px at 100% 0%, rgb(var(--color-primary) / .19), transparent 70%),
        radial-gradient(65vw 200px at 0% 100%, rgb(var(--color-secondary) / .17), transparent 70%);
}
#beneficios {
    background-image:
        radial-gradient(55vw 220px at 100% 0%, rgb(var(--color-secondary-container) / .15), transparent 70%),
        radial-gradient(70vw 200px at 50% 100%, rgb(217 119 87 / .11), transparent 70%),
        radial-gradient(60vw 220px at 0% 100%, rgb(var(--color-primary-container) / .16), transparent 70%);
}
html.dark #beneficios {
    background-image:
        radial-gradient(55vw 220px at 100% 0%, rgb(var(--color-secondary) / .20), transparent 70%),
        radial-gradient(70vw 200px at 50% 100%, rgb(240 145 110 / .15), transparent 70%),
        radial-gradient(60vw 220px at 0% 100%, rgb(var(--color-primary) / .22), transparent 70%);
}

/* Em telas baixas os seis cartões de Benefícios não caberiam de uma vez:
   o bloco se comprime para caber inteiro na janela. */
@media (min-width: 1024px) and (max-height: 940px) {
    #beneficios .text-center.max-w-3xl { margin-bottom: 2rem; }
}
@media (min-width: 1024px) and (max-height: 860px) {
    #beneficios .text-center.max-w-3xl { margin-bottom: 1.5rem; }
    #beneficios .grid { gap: 1rem; }
    #beneficios .grid > div { padding: 1.5rem; }
    #beneficios .grid > div > div:first-child { width: 3rem; height: 3rem; margin-bottom: 1rem; }
    #beneficios .grid > div > div:first-child .material-symbols-outlined { font-size: 1.5rem; }
    #beneficios .grid h3 { margin-bottom: .5rem; }
}