:root {
    --blue: #A9D8FF;
    /* azul claro */
    --blue-200: #D8EDFF;
    --yellow: #FFE597;
    /* amarelo suave */
    --pink: #FFB3C7;
    /* rosa suave */
    --red: #FF7A8A;
    /* vermelho/rosa para destaques */
    --bg: #FAFCFF;
    /* fundo geral */
    --ink: #2B2B2B;
    /* texto principal */
    --ink-soft: #5E5E5E;
    --white: #FFFFFF;
    --shadow: 0 8px 24px rgba(0, 0, 0, .08);
    --radius: 20px;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: "Nunito", "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--ink);
    background: radial-gradient(1200px 600px at -10% -10%, var(--blue-200), transparent 60%), radial-gradient(1200px 600px at 110% -20%, #ffeef3, transparent 60%), var(--bg);
    line-height: 1.6;
}


/* Utilitários básicos */

.container {
    width: min(1120px, 92%);
    margin-inline: auto;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin: 0 0 .6rem
}

h1 {
    font-size: clamp(1.8rem, 2.8vw + 1rem, 3rem);
    font-weight: 800
}

h2 {
    font-size: clamp(1.4rem, 1.6vw + .8rem, 2.2rem);
    font-weight: 800
}

h3 {
    font-size: 1.125rem;
    font-weight: 700
}

p {
    margin: 0 0 .8rem
}

strong {
    font-weight: 800
}


/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit
}

.brand-icon {
    width: 36px;
    height: 36px
}

.brand-text {
    font-weight: 800;
    letter-spacing: .2px
}


/* Botões */

.btn {
    --btn-bg: var(--white);
    --btn-ink: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.2rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-ink);
    text-decoration: none;
    font-weight: 800;
    box-shadow: var(--shadow);
    transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}

.btn:active {
    transform: translateY(1px)
}

.btn--primary {
    --btn-bg: linear-gradient(180deg, var(--red), #ff8ea0);
    color: #fff;
}

.btn--outline {
    --btn-bg: transparent;
    color: var(--ink);
    border-color: rgba(0, 0, 0, .12);
    box-shadow: none
}

.btn--ghost {
    --btn-bg: #fff;
}

.btn--xl {
    font-size: 1.125rem;
    padding: 1rem 1.6rem
}

.btn:hover {
    box-shadow: 0 10px 28px rgba(255, 122, 138, .28)
}


/* HERO */

.hero {
    position: relative;
    padding: clamp(2rem, 4vw + 1rem, 5rem) 0 2rem;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: 1.1fr .9fr;
        align-items: center
    }
}

.hero-copy .sub {
    font-size: 1.1rem;
    color: var(--ink-soft);
    margin: .6rem 0 1.2rem
}

.hero-ctas {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin: 1rem 0
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    list-style: none;
    margin: 1rem 0 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 9999px;
    padding: .5rem .8rem;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: var(--shadow);
}

.badge svg {
    width: 18px;
    height: 18px;
    fill: var(--red)
}

.hero-media {
    width: 100%
}

.video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 6px solid var(--yellow);
}

.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .6rem;
    pointer-events: none;
    background: radial-gradient(800px 300px at 10% 0%, rgba(255, 229, 151, .4), transparent 60%), radial-gradient(800px 300px at 90% 100%, rgba(169, 216, 255, .45), transparent 60%), linear-gradient(135deg, #fff, #fff);
}

.play-icon {
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .15))
}

.video-placeholder p {
    font-weight: 700;
    color: var(--ink-soft)
}


/* Decorações suaves do hero */

.deco {
    position: absolute;
    pointer-events: none;
}

.deco--stars {
    left: -40px;
    top: 10%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 30% 30%, #fff 0 3px, transparent 4px), radial-gradient(circle at 60% 70%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 20%, #fff 0 2px, transparent 3px);
    opacity: .6;
    filter: blur(.2px);
}

.deco--rainbow {
    right: -90px;
    bottom: -120px;
    width: 360px;
    height: 360px;
    background: conic-gradient(from 200deg, #ffb3c7, #ffd166, #a9d8ff, #ffb3c7);
    border-radius: 50%;
    opacity: .12;
    filter: blur(6px);
}


/* BENEFÍCIOS */

.beneficios {
    padding: clamp(2rem, 4vw + 1rem, 4rem) 0
}

.cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1.2rem;
}

@media (min-width: 720px) {
    .cards {
        grid-template-columns: repeat(3, 1fr)
    }
}

.card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: var(--radius);
    padding: 1.2rem;
    box-shadow: var(--shadow);
}

.card .icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--pink), #ffccda);
    border-radius: 14px;
    margin-bottom: .6rem;
    box-shadow: 0 6px 18px rgba(255, 122, 138, .2);
}

.card .icon svg {
    width: 26px;
    height: 26px;
    fill: #fff
}


/* CONTEÚDO */

.conteudo {
    padding: clamp(2rem, 4vw + 1rem, 4rem) 0
}

.conteudo .grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .conteudo .grid {
        grid-template-columns: .95fr 1.05fr
    }
}

.bullets {
    margin: .8rem 0 0;
    padding-left: 1rem
}

.bullets li {
    margin: .25rem 0
}

.gallery {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(1, 1fr);
}

.gallery .page {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: var(--shadow);
}

.gallery .page img {
    display: block;
    width: 100%;
    height: auto
}

@media (min-width: 640px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr)
    }
}


/* DEPOIMENTOS */

.depoimentos {
    padding: clamp(2rem, 4vw + 1rem, 4rem) 0
}

.quotes {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .quotes {
        grid-template-columns: repeat(3, 1fr)
    }
}

.quote {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
    position: relative;
}

.quote:before {
    content: "“";
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 80px;
    line-height: 0;
    color: rgba(255, 122, 138, .25);
    font-weight: 800;
}

.quote p {
    margin: .4rem 0 .6rem
}

.quote .stars {
    color: #f9a825;
    letter-spacing: 2px;
    font-size: 1.1rem;
    font-weight: 800
}


/* CTA FINAL */

.cta-final {
    position: relative;
    padding: clamp(2rem, 4vw + 1rem, 4rem) 0;
    background: radial-gradient(1000px 400px at 10% 0%, rgba(255, 229, 151, .35), transparent 60%), radial-gradient(1000px 400px at 90% 100%, rgba(169, 216, 255, .35), transparent 60%), linear-gradient(180deg, #fff, #fff);
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, .05);
}

.cta-final h2 {
    margin-bottom: .4rem
}

.cta-final p {
    margin-bottom: 1rem;
    color: var(--ink-soft)
}

.deco--pencils {
    position: absolute;
    inset: auto -60px -60px auto;
    width: 220px;
    height: 220px;
    background: linear-gradient(90deg, var(--pink) 0 33%, var(--yellow) 33% 66%, var(--blue) 66%), linear-gradient(#c87f00, #c87f00);
    -webkit-mask: conic-gradient(from 0deg, #000 0 20%, transparent 0 22%, #000 0 42%, transparent 0 44%, #000 0 64%, transparent 0 66%, #000 0 86%, transparent 0) top/100% 60% no-repeat, radial-gradient(30px 60px at 50% 85%, #000 98%, transparent 100%);
    mask: conic-gradient(from 0deg, #000 0 20%, transparent 0 22%, #000 0 42%, transparent 0 44%, #000 0 64%, transparent 0 66%, #000 0 86%, transparent 0) top/100% 60% no-repeat, radial-gradient(30px 60px at 50% 85%, #000 98%, transparent 100%);
    opacity: .14;
    filter: blur(.6px);
}


/* Footer */

.site-footer {
    padding: 1.2rem 0;
    text-align: center;
    color: var(--ink-soft)
}


/* Acessibilidade de foco */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}


/* Pequenos ajustes responsivos */

@media (max-width: 380px) {
    .btn {
        width: 100%;
        justify-content: center
    }
}