/* =========================================================================
   LP - Curso de Educação Física | UNASP
   1. Tokens
   2. Reset / base
   3. Utilitários e componentes
   4. Seções
   ========================================================================= */

/* ------------------------------- 1. Tokens ------------------------------ */
:root {
    --azul: #163059;
    --azul-escuro: #0f2242;
    --azul-texto: #2a365a;
    --laranja: #ff5900;
    --laranja-papel: #ff6a00;
    --verde: #4b963e;
    --verde-escuro: #3d7d33;
    --branco-suave: #f1f1f1;
    --branco: #ffffff;

    --fonte-titulo: 'Poppins', system-ui, sans-serif;
    --fonte-texto: 'Ubuntu', system-ui, sans-serif;
    --fonte-corpo: 'Montserrat', system-ui, sans-serif;

    /* largura útil do conteúdo (design: 1920px de canvas) */
    --container: 1440px;
    --gutter: clamp(1.25rem, 4vw, 5rem);
}

/* ---------------------------- 2. Reset / base --------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fonte-texto);
    color: var(--azul);
    background: var(--branco);
    line-height: 1.5;
    overflow-x: hidden;
}

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

h1, h2, h3, p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------- 3. Utilitários e componentes --------------------- */
.u-orange {
    color: var(--laranja);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Título de seção */
.secao__titulo {
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    line-height: 1.2;
    text-align: center;
    color: var(--azul);
}

.secao__titulo--branco {
    color: var(--branco);
}

/* Botão */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--fonte-texto);
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 80px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.btn:focus-visible {
    outline: 3px solid var(--laranja);
    outline-offset: 3px;
}

/* Variante contornada (hero) */
.btn--ghost {
    min-height: clamp(3.5rem, 5.2vw, 5.1875rem);
    padding: .875rem clamp(1.5rem, 3vw, 2.5rem);
    width: min(510px, 100%);
    border: 1px solid var(--branco);
    color: var(--branco);
    font-size: clamp(1.125rem, 1.6vw, 1.75rem);
    letter-spacing: .02em;
}

.btn--ghost:hover {
    background: var(--branco);
    color: var(--azul);
    transform: translateY(-2px);
}

/* Variante sólida verde (CTAs internos) */
.btn--verde {
    width: min(320px, 100%);
    min-height: 3.3125rem;
    padding: .75rem 1.5rem;
    background: var(--verde);
    color: var(--branco-suave);
    font-size: clamp(1rem, 1.15vw, 1.125rem);
}

.btn--verde:hover {
    background: var(--verde-escuro);
    transform: translateY(-2px);
}

/* Lista com marcador ✅ */
.lista-check {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-check li {
    line-height: 1.35;
}

.lista-check li::before {
    content: '✅';
    margin-right: .55em;
    font-size: .8em;
}

/* ------------------------------ 4. Seções ------------------------------- */

/* ------------------------------- 4.1 Hero ------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(800px, 100svh);
    padding: clamp(3rem, 7vw, 7.5rem) var(--gutter);
    background: var(--azul-escuro);
    overflow: hidden;
    isolation: isolate;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 825px;
    text-align: center;
}

.hero__logo {
    width: clamp(11.25rem, 16vw, 19.375rem);
    height: auto;
    margin-bottom: clamp(2.5rem, 6vw, 6.1875rem);
}

/* Bloco do título sobre o papel rasgado */
.hero__headline {
    position: relative;
    width: min(599px, 100%);
    margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}

.hero__tape {
    position: absolute;
    top: clamp(-3.375rem, -2.8vw, -1.75rem);
    left: 50%;
    translate: -50% 0;
    width: clamp(8.75rem, 11vw, 13rem);
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.hero__paper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem);
    background: url('../assets/svg/paper-hero.svg') center / 100% 100% no-repeat;
}

.hero__title {
    width: min(654px, 112%);
    font-family: var(--fonte-titulo);
    font-weight: 900;
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    line-height: 1.19;
    letter-spacing: .04em;
    color: var(--azul);
}

.hero__text {
    max-width: 825px;
    margin-bottom: clamp(2rem, 4vw, 2.875rem);
    font-size: clamp(.9375rem, 1.1vw, 1.125rem);
    line-height: 1.38;
    letter-spacing: .11em;
    color: var(--branco);
}

/* Em telas estreitas o título passa a caber dentro do papel */
@media (max-width: 720px) {
    .hero__title {
        width: 100%;
    }
}

/* ------------ Divisor de papel rasgado (transição de seções) -----------
   O mesmo recorte serve às duas transições: o SVG entra como máscara e a
   cor vem do background, evitando duplicar o arquivo só para trocar a cor. */
.divisor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: clamp(1.75rem, 2.8vw, 3.3125rem);
    pointer-events: none;
    -webkit-mask: url('../assets/svg/divisor-papel.svg') center / 100% 100% no-repeat;
    mask: url('../assets/svg/divisor-papel.svg') center / 100% 100% no-repeat;
}

.divisor--laranja {
    background: var(--laranja-papel);
}

.divisor--azul {
    background: var(--azul);
}

/* -------------------- 4.2 Muito além do esporte ------------------------ */
.sobre {
    position: relative;
    padding-block: clamp(4rem, 9vw, 11rem) clamp(6rem, 12vw, 13.75rem);
    background: var(--branco);
    /* o selo avança sobre a borda da foto; corta só no eixo X */
    overflow-x: clip;
}

.sobre__grid {
    display: grid;
    grid-template-columns: 1.256fr 1fr;
    align-items: center;
    gap: clamp(2.5rem, 6.4vw, 7.625rem);
}

.sobre__midia {
    position: relative;
    margin: 0;
}

.sobre__foto {
    width: 100%;
    aspect-ratio: 682 / 545;
    object-fit: cover;
    border-radius: clamp(.75rem, 1.3vw, 1.5rem);
}

.sobre__selo {
    position: absolute;
    right: -12%;
    bottom: -12.3%;
    width: 32.6%;
    height: auto;
    rotate: -15.65deg;
    filter: drop-shadow(0 8px 18px rgb(0 0 0 / .22));
}

.sobre__titulo {
    margin-bottom: clamp(1.25rem, 2.3vw, 2.75rem);
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    line-height: 1.2;
    color: #000;
}

.sobre__destaque {
    margin-bottom: clamp(1.25rem, 2.1vw, 2.5rem);
    font-size: clamp(1.125rem, 1.55vw, 1.5rem);
    line-height: 1.2;
    color: var(--azul);
}

.sobre__paragrafo {
    font-size: clamp(1rem, 1.42vw, 1.375rem);
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--azul-texto);
}

@media (max-width: 860px) {
    .sobre__grid {
        grid-template-columns: 1fr;
        gap: clamp(3.5rem, 12vw, 5rem);
    }

    .sobre__selo {
        right: -4%;
        bottom: -14%;
        width: 28%;
    }
}

/* --------------- 4.3 Uma formação construída na prática ---------------- */
.pratica {
    position: relative;
    padding-block: clamp(3.5rem, 6vw, 5.75rem) clamp(4.5rem, 8vw, 8rem);
    background: var(--laranja-papel);
}

.pratica__checklist {
    max-width: 781px;
    margin: clamp(1.25rem, 2.2vw, 1.9375rem) auto clamp(2.25rem, 4.5vw, 3.75rem);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: clamp(1rem, 2.4vw, 2rem);
    row-gap: .35em;
    font-size: clamp(1.0625rem, 2.1vw, 2rem);
    line-height: 1.2;
    color: var(--branco);
}

.pratica__checklist li::before {
    content: '✅';
    margin-right: .35em;
    font-size: .72em;
}

.pratica__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.7vw, 3.25rem);
    max-width: 1186px;
    margin-inline: auto;
}

.card-pratica {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    overflow: hidden;
}

.card-pratica__midia {
    position: relative;
}

.card-pratica__midia img {
    width: 100%;
    aspect-ratio: 361 / 259;
    object-fit: cover;
}

/* Degradê azul que escurece a base da foto, como no design */
.card-pratica__midia::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(22 48 89 / 0), rgb(22 48 89 / .5));
    pointer-events: none;
}

.card-pratica__texto {
    flex: 1;
    padding: clamp(1rem, 1.7vw, 1.3125rem) clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 2.5vw, 2.25rem);
    font-size: clamp(.9375rem, 1.42vw, 1.375rem);
    line-height: 1.2;
    color: var(--azul);
}

@media (max-width: 900px) {
    .pratica__cards {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}

/* ------------- 4.4 O diferencial da sua formação começa aqui ----------- */
.diferencial {
    position: relative;
    min-height: min(941px, 49vw);
    padding-block: clamp(3.5rem, 6.4vw, 7.5625rem) clamp(4rem, 7vw, 7.5rem);
    background: var(--azul);
    overflow: hidden;
}

.diferencial__conteudo {
    /* deixa o texto na metade esquerda, livre da foto recortada */
    max-width: min(1440px, 96%);
    padding-right: 0;
}

.diferencial__titulo {
    max-width: 488px;
    margin-bottom: clamp(1.5rem, 2.5vw, 2.9375rem);
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    line-height: 1.2;
    color: var(--branco);
}

.diferencial .lista-check {
    display: grid;
    row-gap: .8em;
    max-width: 602px;
    margin-bottom: clamp(2.25rem, 4.2vw, 4.5rem);
    font-size: clamp(1rem, 1.42vw, 1.375rem);
    letter-spacing: .03em;
    color: var(--branco);
}

.diferencial__figura {
    position: absolute;
    right: 3.7%;
    bottom: 0;
    width: 47.66%;
    aspect-ratio: 915 / 923;
    overflow: hidden;
    pointer-events: none;
}

.diferencial__aluno {
    width: 100%;
    height: auto;
}

.diferencial__selo {
    position: absolute;
    left: 0;
    top: 13.9%;
    width: 25.1%;
    height: auto;
    rotate: -11.01deg;
}

@media (max-width: 1100px) {
    .diferencial {
        min-height: 0;
    }

    /* segue relative para o selo continuar ancorado na foto */
    .diferencial__figura {
        position: relative;
        inset: auto;
        width: min(420px, 80%);
        margin: clamp(2.5rem, 6vw, 4rem) auto 0;
        aspect-ratio: auto;
    }
}

/* ------------- 4.5 Onde a Educação Física pode levar você? ------------- */
.areas {
    padding-block: clamp(3.5rem, 6.4vw, 7.625rem) clamp(4rem, 7vw, 7.5rem);
    background: var(--branco);
}

.areas__titulo {
    letter-spacing: .03em;
}

.areas__subtitulo {
    max-width: 1211px;
    margin: clamp(1rem, 2.2vw, 2.25rem) auto clamp(1.75rem, 3vw, 2.5rem);
    font-family: var(--fonte-corpo);
    font-size: clamp(1rem, 1.42vw, 1.375rem);
    line-height: 1.5;
    letter-spacing: .02em;
    text-align: center;
    color: var(--azul);
}

.areas__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.25rem, 2.6vw, 3.125rem);
    row-gap: clamp(1rem, 1.4vw, 1.5625rem);
    max-width: 1316px;
    margin-inline: auto;
}

.card-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 10.6rem;
    padding: clamp(1.5rem, 2.4vw, 2.3125rem) clamp(1.25rem, 2.4vw, 2.8125rem);
    background: rgb(129 129 131 / .06);
    font-family: var(--fonte-corpo);
    font-size: clamp(1rem, 1.42vw, 1.375rem);
    line-height: 1.5;
    letter-spacing: .02em;
    text-align: center;
    color: var(--azul-texto);
}

.card-area h3 {
    margin: 0;
    font-size: inherit;
    font-weight: 800;
}

.card-area p {
    margin: 0;
}

@media (max-width: 820px) {
    .areas__grid {
        grid-template-columns: 1fr;
        max-width: 633px;
    }
}

/* -------------- 4.6 Prepare-se para o mercado de trabalho -------------- */
.mercado {
    padding-block: clamp(3.5rem, 6.4vw, 9.625rem);
    background: var(--laranja-papel);
}

.mercado__grid {
    display: grid;
    grid-template-columns: 800fr 582fr;
    align-items: center;
    gap: clamp(2.5rem, 5.6vw, 6.5rem);
    max-width: 1497px;
}

/* A ilustração é maior que o cartão branco: o recorte segue o design */
.mercado__ilustracao {
    position: relative;
    aspect-ratio: 800 / 624;
    border-radius: clamp(1rem, 2vw, 2rem);
    background: var(--branco);
    overflow: hidden;
}

.mercado__ilustracao img {
    position: absolute;
    left: -3.875%;
    top: -11.86%;
    width: 107.6%;
    max-width: none;
    height: auto;
}

.mercado__titulo {
    margin-bottom: clamp(1.25rem, 2.2vw, 2.1875rem);
    max-width: 505px;
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    line-height: 1.47;
    letter-spacing: .03em;
    color: var(--branco);
}

.mercado__texto p {
    margin-bottom: 1.5em;
    font-family: var(--fonte-corpo);
    font-size: clamp(1rem, 1.42vw, 1.375rem);
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--branco);
}

.mercado__texto .btn--verde {
    margin-top: clamp(1rem, 2.4vw, 2.75rem);
}

@media (max-width: 900px) {
    .mercado__grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------- 4.7 Lista de espera (formulário) ----------------- */
.lista {
    position: relative;
    padding-block: clamp(3.5rem, 6vw, 6.5rem) clamp(4rem, 7vw, 7rem);
    background: var(--azul);
    overflow: hidden;
}

/* Lettering decorativo "Experiências pra vida" no canto inferior esquerdo */
.lista__marca {
    position: absolute;
    left: -3.07%;
    bottom: -4%;
    width: 39%;
    height: auto;
    opacity: .5;
    pointer-events: none;
}

/* Bloco centralizado na página; o texto fica alinhado à esquerda dentro dele */
.lista__conteudo {
    position: relative;
    max-width: 711px;
}

.lista__titulo {
    max-width: 615px;
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(1.625rem, 2.4vw, 2.25rem);
    line-height: 1.4;
    color: var(--branco);
}

.lista__subtitulo {
    max-width: 577px;
    margin-block: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.75rem, 3vw, 2.8125rem);
    font-size: clamp(1rem, 1.42vw, 1.375rem);
    line-height: 1.4;
    color: var(--branco);
}

/* --------------------------- Formulário -------------------------------- */
.formulario {
    width: 100%;
    padding: clamp(1.5rem, 3.4vw, 2.5rem);
    background: var(--branco);
    border-radius: 1.54rem;
}

/* Espaço reservado para o embed do RD Station (ele traz o próprio estilo).
   A altura mínima evita que a seção "pule" enquanto o script carrega. */
.formulario__embed {
    min-height: 25.875rem;
}

/* ---------------------- 4.8 Ainda tem dúvidas? ------------------------- */
.duvidas {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(800px, 100svh);
    padding: clamp(2.5rem, 5vw, 3.75rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
    background: var(--azul-escuro);
    overflow: hidden;
    isolation: isolate;
}

.duvidas__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.duvidas__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 805px;
    text-align: center;
}

.duvidas__titulo {
    margin-bottom: clamp(2.5rem, 6vw, 7.4375rem);
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(1.875rem, 3.2vw, 3rem);
    line-height: 1.2;
    color: var(--branco);
}

.duvidas__headline {
    position: relative;
    width: min(805px, 100%);
    margin-bottom: clamp(2rem, 4vw, 3.125rem);
}

.duvidas__tape {
    position: absolute;
    top: clamp(-3.75rem, -3.35vw, -2rem);
    left: 50%;
    translate: -50% 0;
    width: clamp(9.375rem, 12.2vw, 14.6875rem);
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.duvidas__paper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    background: url('../assets/svg/paper-duvidas.svg') center / 100% 100% no-repeat;
}

.duvidas__papel-texto {
    max-width: 727px;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(1.125rem, 1.85vw, 1.75rem);
    line-height: 1.36;
    color: var(--azul);
}

.duvidas__texto {
    max-width: 430px;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.875;
    color: var(--branco);
}

.duvidas .btn--verde {
    font-size: .9375rem;
}

@media (max-width: 720px) {
    .lista__marca {
        width: 70%;
        opacity: .25;
    }
}