/* CSS BASE */
/* variaveis */
:root {
    --wine-900: #2a0004;
    --wine-800: #3c0008;
    --wine-700: #520910;
    --wine-600: #5b0f15;
    --ink-900: #0a0a0a;
    --ink-800: #111111;
    --gold-500: #d4af37;
    --gold-600: #c49b3a;
    --gold-700: #a88621;
    --cream: #f3efe6;
    --muted: #c2b8a2;
}

/* reset */
*,
*::before,
*::after {
    box-sizing: border-box
}

html {
  scroll-behavior: smooth;
}


html,
body {
    margin: 0;
    height: 100%
}

body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    color: #e9e7e1;
    background: var(--ink-900);
    line-height: 1.6
}

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

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

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 24px
}

/* CSS DO GRADIENTE PREMIUM */
/* gradiente premium */
.bg-premium {
    position: relative;
    background:
        radial-gradient(1200px 600px at 50% -200px, rgba(212, 175, 55, .12), transparent 55%),
        radial-gradient(600px 600px at 85% 20%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(160deg, var(--wine-800) 0%, var(--wine-600) 52%, var(--ink-900) 100%);
    overflow: hidden;
    isolation: isolate;
}

/* textura veludo muito sutil */
.bg-premium::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    opacity: .25;
    pointer-events: none;
    background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 20% 80%, rgba(255, 255, 255, .03));
    filter: blur(30px);
}

/* vinheta inferior */
.bg-premium::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 220px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .65));
}

/* CSS DE TIPOGRAFIA */
/* tipografia */
.display {
    font-family: "Playfair Display", serif;
    letter-spacing: .2px
}

.h1 {
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1.1;
    font-weight: 800
}

.h2 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800
}

.lead {
    font-size: clamp(16px, 1.8vw, 20px);
    color: #e6e0d2;
    opacity: .9
}

/* CSS DE COMPONENTES */
/* componentes */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.25rem;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, .45);
    background: linear-gradient(180deg, rgba(212, 175, 55, .18), rgba(212, 175, 55, .05));
    color: #f6f2e6;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border-bottom-width: 2px
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, .25), inset 0 0 0 999px rgba(212, 175, 55, .08)
}

.btn.gold {
    background: linear-gradient(180deg, #f3e3a1, #d4af37);
    color: #1a1207;
    border-color: #a88621
}

.btn.gold:hover {
    box-shadow: 0 10px 28px rgba(212, 175, 55, .35)
}

/* botao maior do hero */
.btn-lg {
    padding: 1.05rem 1.35rem;
    font-size: 1.05rem
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .4);
    color: #f1e8ca;
    font-weight: 600;
    font-size: .85rem
}

.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
}

.card.dark {
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2));
    border-color: rgba(255, 255, 255, .08)
}

.gold {
    color: var(--gold-500)
}

.muted {
    color: #d0c7b3;
    opacity: .85
}

.sep {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .1), transparent)
}

/* CSS DA NAVBAR */
/* header */
header.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, .45);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(212, 175, 55, .25)
}

.nav .brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800
}

.brand .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 16px rgba(212, 175, 55, .6)
}

.nav a.cta {
    padding: .6rem 1rem;
    border: 1px solid rgba(212, 175, 55, .5);
    border-radius: 10px
}

/* CSS DO HERO */
/* hero */
.hero {
    padding: 16vh 0 14vh
}

.hero .kicker {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f1e8ca;
    font-weight: 700;
    opacity: .9
}

.hero .em {
    color: var(--gold-500);
    text-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 18px rgba(212, 175, 55, .15)
}

/* CSS DO GRID UTIL */
/* grid util */
.grid {
    display: grid;
    gap: 28px
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media (max-width:980px) {

    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr
    }
}

/* helpers */
.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-8 {
    margin-top: 2rem
}

.mb-0 {
    margin-bottom: 0
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.center {
    text-align: center
}

.row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center
}

.between {
    justify-content: space-between
}

.pill {
    border-radius: 999px
}

.pillee {
    margin-top: 30px;
    border-radius: 999px
}

/* CSS DOS VOLUMES */
/* cards dos volumes */
.book {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.book-cover {
    aspect-ratio: 4/5;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(212, 175, 55, .22)
}

.book-cover .cover-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 120% at 30% 10%, rgba(212, 175, 55, .12), transparent 40%),
        linear-gradient(160deg, #0b0b0b, #1a0c0d 40%, #3c0008 55%, #000 100%)
}

.book-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .65)
}

.book-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(180deg, #f3e3a1, #d4af37);
    color: #1a1207;
    font-weight: 800;
    font-size: .9rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid #a88621
}

/* CSS DOS ICONES */
/* feature icons */
.ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(212, 175, 55, .12);
    border: 1px solid rgba(212, 175, 55, .35)
}

/* CSS DO PRICING */
/* pricing */
.pricing {
    padding: 90px 0
}

.price-card {
    position: relative
}

.price-card.popular {
    outline: 2px solid var(--gold-500);
    outline-offset: 0;
    border-radius: 18px
}

.badge-pop {
    position: absolute;
    top: -14px;
    right: 18px;
    background: linear-gradient(180deg, #f3e3a1, #d4af37);
    color: #1a1207;
    font-weight: 900;
    border-radius: 999px;
    padding: .35rem .7rem;
    border: 1px solid #a88621;
    box-shadow: 0 8px 20px rgba(212, 175, 55, .35)
}

/* css do precos - titulo grande */
.price {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    line-height: 1.05;
    font-size: clamp(34px, 6vw, 56px);
    margin: 6px 0 14px;
    letter-spacing: .2px;
}

.price small {
    font-size: .52em;
    font-weight: 700;
    margin-right: .25rem;
    vertical-align: baseline;
    opacity: .95;
}

/* css do pricing: bullets e layout dos itens com preco */
.price-breakdown {
    list-style: none;
    margin: 18px 0 6px;
    padding: 0;
    display: grid;
    gap: 0;
    /* linhas com divisoria, sem espaco entre elas */
}

.price-breakdown li {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    /* bolinha | texto | antigo | atual */
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.price-breakdown li:first-child {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* bolinha dourada (mesma cara da .tick) */
.price-breakdown li::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fff 0 25%, rgba(255, 255, 255, .2) 26% 100%),
        linear-gradient(180deg, #f3e3a1, #d4af37);
    border: 1px solid #a88621;
    box-shadow: 0 3px 10px rgba(212, 175, 55, .25);
}

/* colunas de texto/preco */
.price-breakdown .label {
    color: #f4f1e8;
}

.price-breakdown .old {
    color: #c9c1ae;
    opacity: .85;
    text-decoration: line-through;
    justify-self: end;
    /* encosta à direita da coluna antiga */
}

.price-breakdown .now {
    color: #fff;
    font-weight: 800;
    justify-self: end;
}

/* fix: centralizar botoes dos cards de preco */
.pricing .price-card {
    display: flex;
    /* vira flex so para o card */
    flex-direction: column;
    /* empilha o conteudo */
}

.pricing .price-card .btn {
    display: inline-flex;
    /* mantem o estilo do botao */
    margin: 24px auto 0;
    /* centraliza horizontalmente */
    width: max-content;
    /* nao estica */
}


/* gratis em badge dourado */
.price-breakdown .tag {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #f3e3a1, #d4af37);
    color: #1a1207;
    border: 1px solid #a88621;
    box-shadow: 0 6px 18px rgba(212, 175, 55, .25);
    font-weight: 900;
}

/* bonus: marca a linha toda sutil */
.price-breakdown .bonus .label {
    color: #f7efe0;
}

/* responsivo: em telas pequenas, label ocupa a linha toda e os preços ficam à direita */
@media (max-width:640px) {
    .price {
        font-size: clamp(32px, 8vw, 46px);
    }

    .price-breakdown li {
        grid-template-columns: 1fr auto;
        /* 2 colunas */
    }

    .price-breakdown .label {
        grid-column: 1 / -1;
        /* label ocupa a linha toda */
    }

    .price-breakdown .old {
        order: 2;
        margin-right: 8px;
        font-size: .95rem;
    }

    .price-breakdown .now {
        order: 3;
        font-size: 1rem;
    }
}


.ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px
}

.ul li {
    display: flex;
    gap: .6rem;
    align-items: center
}

.tick {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0 25%, rgba(255, 255, 255, .2) 26% 100%), linear-gradient(180deg, #f3e3a1, #d4af37);
    border: 1px solid #a88621
}

/* CSS DOS TESTEMUNHOS */
/* testimonials */
.testi {
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 24px
}

/* CSS DO FOOTER CTA */
/* footer cta */
.cta-section {
    padding: 96px 0;
    background:
        radial-gradient(800px 320px at 50% -40px, rgba(212, 175, 55, .12), transparent 60%),
        linear-gradient(180deg, var(--wine-700), var(--wine-600) 60%, var(--ink-900))
}

/* CSS DO SCROLL REVEAL */
/* scroll reveal suave */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
    transition: opacity .8s ease, transform .8s ease
}

.reveal.show {
    opacity: 1;
    transform: none
}

/* CSS DO QUEM SOU EU */
/* manter todos os estilos originais */
.quem-sou-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
}

@media(max-width:768px) {
    .quem-sou-grid {
        grid-template-columns: 1fr;
        text-align: center
    }
}

.quem-sou-img img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.feature-icon {
    color: var(--gold-500);
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 4px
}

/* CSS DO VIDEO */
/* video fix */
.video-section {
    padding: 60px 20px;
    text-align: center
}

.video-wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    background: #000;
    position: relative
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    min-height: auto !important;
}

@media (min-width:1024px) {
    .video-wrapper {
        max-width: 900px
    }
}

/* CSS DO MANIFESTO */
/* manifesto texto corrido */
.manifesto-full {
    padding: 80px 0;
    text-align: center
}

.manifesto-full .wrap {
    max-width: 880px;
    margin: 0 auto
}

.manifesto-full p {
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.9;
    color: #e9e6dd;
    margin-bottom: 20px
}

.manifesto-full p strong {
    font-weight: 700;
    color: #fff;
    font-size: calc(1em + 4px)
}

.manifesto-full p.em {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: clamp(20px, 2vw, 22px);
    color: #fff
}

/* destaque serifado dourado */
.serif-gold {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--gold-500, #d4af37);
    font-size: clamp(22px, 2.3vw, 26px);
    line-height: 1.25;
    letter-spacing: .2px;
    text-shadow: 0 0 18px rgba(212, 175, 55, .12)
}

/* o serif para letra grande */
.serif-biggold {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--gold-500, #d4af37);
    font-size: clamp(26px, 2.5vw, 28px);
    line-height: 1.25;
    letter-spacing: .2px;
    text-shadow: 0 0 18px rgba(212, 175, 55, .12)
}

/* use quando quiser o destaque em uma linha so */
.serif-gold.block {
    display: block;
    margin: 6px auto 14px
}

.serif-biggold.block {
    display: block;
    margin: 6px auto 14px
}

/* destaque inline */
.serif-gold-in {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--gold-500, #d4af38);
    font-size: calc(1em + 4px);
    letter-spacing: .2px;
    text-shadow: 0 0 14px rgba(212, 175, 55, .14)
}

.serif-wine-in {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--wine-500, #D12C4A);
    font-size: calc(1em + 4px);
    letter-spacing: .2px;
    text-shadow: 0 0 14px rgba(212, 55, 55, .212)
}

.serif-white-in {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: #fff;
    font-size: calc(1em + 4px);
    letter-spacing: .2px;
    text-shadow: 0 0 10px rgba(255, 255, 255, .14)
}

.serif-wine-gd {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    color: var(--wine-500, #ab0d02);
    font-size: calc(1em + 4px);
    letter-spacing: .2px;
    text-shadow: 0 0 14px rgba(209, 44, 74, .18)
}

/* CSS DO GOLD DIVIDER */
/* gold divider filete dourado */
.gold-divider {
    --gold: var(--gold-500, #d4af37);
    --w: 120px;
    --h: 2px;
    --glow: .35;
    display: block;
    width: var(--w);
    height: var(--h);
    margin: 22px auto;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);
    box-shadow: 0 0 14px rgba(212, 175, 55, var(--glow)), inset 0 0 6px rgba(212, 175, 55, .55);
    pointer-events: none;
}

/* tamanhos opcionais */
.gold-divider.is-sm {
    --w: 90px;
    --h: 1.5px
}

.gold-divider.is-lg {
    --w: 150px;
    --h: 2.5px
}

/* CSS DO STORYTELLING */
/* storytelling texto emocional */
.story-section {
    padding: 72px 0 56px
}

.story {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
    padding: 0 16px
}

/* micro tipografia */
.story p {
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.95;
    color: #e9e6dd;
    margin: 8px 0;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal
}

/* perguntas titulos curtos no fluxo */
.story .ask,
.story .mini-title {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .2px;
    color: #fff;
    margin: 14px 0 6px
}

/* bloco com as tres frases da mente */
.story .thoughts {
    margin: 8px 0 14px;
    padding: 12px 14px 12px 16px;
    border-left: 2px solid rgba(212, 175, 55, .55);
    background: linear-gradient(90deg, rgba(212, 175, 55, .10), rgba(212, 175, 55, .04) 55%, transparent);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.story .thoughts p {
    margin: 4px 0;
    font-style: italic;
    color: #f0ead7
}

/* fecho poetico */
.story .closing {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: clamp(20px, 2vw, 24px);
    letter-spacing: .2px;
    color: #fff;
    margin-top: 10px
}

/* storytelling v2 reforcos */
.story-section {
    padding: 72px 0 56px
}

.story {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 0 16px
}

.story p {
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.95;
    color: #e9e6dd;
    margin: 8px 0;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto
}

/* bloco de enfase com barra lateral e fundo suave */
.story .callout {
    margin: 12px 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.story .callout p {
    margin: 6px 0
}

.story .callout .title {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: clamp(20px, 2vw, 24px);
    letter-spacing: .2px;
    margin: 0 0 6px
}

/* variacoes de cor do callout */
.story .callout.gold {
    border-left: 2px solid rgba(212, 175, 55, .65);
    background: linear-gradient(90deg, rgba(212, 175, 55, .12), rgba(212, 175, 55, .04) 55%, transparent)
}

.story .callout.gold .title {
    color: var(--gold-500)
}

.story .callout.wine {
    border-left: 2px solid rgba(209, 44, 74, .7);
    background: linear-gradient(90deg, rgba(209, 44, 74, .12), rgba(209, 44, 74, .05) 55%, transparent)
}

.story .callout.wine .title {
    color: #D12C4A
}

/* frase de impacto */
.story .punch {
    font-family: "Playfair Display", serif;
    font-weight: 900;
    font-size: clamp(22px, 2.2vw, 28px);
    color: #fff;
    letter-spacing: .2px
}

/* CSS DO GRADIENTE VINHO */
/* fundo vinho premium */
.bg-wine {
    position: relative;
    background:
        radial-gradient(800px 320px at 50% -40px, rgba(212, 175, 55, .12), transparent 60%),
        linear-gradient(180deg, var(--wine-700), var(--wine-600) 60%, var(--ink-900));
    overflow: hidden;
    isolation: isolate
}

/* textura veludo sutil */
.bg-wine::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 20% 80%, rgba(255, 255, 255, .03));
    filter: blur(26px);
    opacity: .25;
    pointer-events: none;
    z-index: -1
}

.bg-wine::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 180px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .65));
    pointer-events: none
}

/* padding da secao */
.section-dom {
    padding: 86px 0 48px
}

/* cards glass para fundo vinho */
.card.glass {
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .22));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .35)
}

/* CSS DA BANDA VINHO PREMIUM */
/* banda vinho premium */
.bg-premium--band {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, transparent 0, rgba(91, 15, 21, .28) 28%, rgba(60, 0, 8, .22) 72%, transparent 100%)
}

/* textura veludo suave na banda */
.bg-premium--band::before {
    content: "";
    position: absolute;
    inset: -8% 0;
    pointer-events: none;
    background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 20% 80%, rgba(255, 255, 255, .035));
    filter: blur(24px);
    opacity: .35;
    z-index: -1
}

/* variacoes de ancoragem */
.bg-premium--band.is-top {
    background: linear-gradient(180deg, rgba(91, 15, 21, .28) 0, rgba(60, 0, 8, .22) 60%, transparent 100%)
}

.bg-premium--band.is-bottom {
    background: linear-gradient(180deg, transparent 0, rgba(60, 0, 8, .22) 40%, rgba(91, 15, 21, .28) 100%)
}

/* spotlight sutil */
.bg-premium--spot {
    position: relative;
    isolation: isolate
}

.bg-premium--spot::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -60px;
    width: min(900px, 85%);
    height: 360px;
    background: radial-gradient(50% 60% at 50% 40%, rgba(91, 15, 21, .35), rgba(91, 15, 21, .20) 45%, transparent 70%);
    filter: blur(10px);
    opacity: .6;
    pointer-events: none;
    z-index: -1
}

/* AJUSTES MOBILE */
/* ajustes mobile */
@media (max-width:768px) {

    /* navbar fixa no mobile */
    header.nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0
    }

    /* compensacao para nao cobrir conteudo */
    body {
        padding-top: 64px
    }

    /* nav mais confortavel no mobile */
    .nav nav.row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px
    }

    /* hero mais compacto */
    .hero {
        padding: 12vh 0 10vh
    }

    .h1 {
        font-size: clamp(26px, 7vw, 34px)
    }

    .lead {
        font-size: 15px
    }

    /* grids em uma coluna */
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr !important
    }

    /* video responsivo */
    .video-section {
        padding: 40px 16px
    }

    .video-wrapper {
        max-width: 100%;
        border-radius: 10px
    }

    /* manifesto mais estreito para leitura */
    .manifesto-full .wrap {
        max-width: 92%
    }

    .manifesto-full p {
        font-size: 17px;
        line-height: 1.85
    }

    /* storytelling centrado fica ok */
    .story {
        max-width: 92%
    }

    /* quem sou em uma coluna e imagem menor */
    .quem-sou-grid {
        grid-template-columns: 1fr;
        text-align: center
    }

    .quem-sou-img img {
        max-width: 320px;
        margin: 0 auto
    }

    /* cards com mais respiro */
    .card {
        padding: 18px
    }

    /* pricing com padding menor e preco legivel */
    .pricing {
        padding: 64px 0
    }

    .price {
        font-size: 32px
    }

    /* garantia */
    .garantia-section {
        padding: 60px 0;
    }

    .garantia-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .garantia-img {
        max-width: 100%;
        height: auto;
        width: 100%;
        max-height: 400px;
        /* ajusta a altura conforme o espaço que tu marcou */
        object-fit: contain;
    }

    /* responsivo */
    @media (max-width: 768px) {
        .garantia-img {
            max-height: 300px;
        }
    }
}

/* ===== Controle deslizante (prefixo cdz-), escopado por #feedback ===== */
#feedback .cdz-slider {
    --cdz-gap: 20px;
    --cdz-per: 1;
    /* 1 card no mobile */
    --cdz-bg1: #eef2ff;
    /* mantidas p/ compat., não usadas */
    --cdz-bg2: #e6edff;
    --cdz-border: #e5e7eb;
    --cdz-text: #0f172a;
    --cdz-muted: #475569;

    position: relative;
    border-radius: 0;
    /* sem borda arredondada do container */
    padding: 28px 56px 44px;
    /* espaço setas + dots */
    background: transparent !important;
    /* remove fundo claro/gradiente */
    box-shadow: none !important;
    /* remove sombra clara do container */
    user-select: none;
}

@media (min-width:740px) {
    #feedback .cdz-slider {
        --cdz-per: 2;
    }
}

@media (min-width:1024px) {
    #feedback .cdz-slider {
        --cdz-per: 3;
    }
}

#feedback .cdz-viewport {
    overflow: hidden;
}

/* força flex e remove marcadores do UL, mesmo com css global */
#feedback .cdz-track {
    display: flex !important;
    gap: var(--cdz-gap);
    transition: transform .45s ease;
    will-change: transform;
    list-style: none;
    margin: 0;
    padding: 0;
}

#feedback .cdz-slide {
    flex: 0 0 calc((100% - var(--cdz-gap)*(var(--cdz-per)-1))/var(--cdz-per));
}

/* ===== Card (dark: transparente) */
#feedback .cdz-card {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
    background: transparent !important;
    /* <- sem branco */
    color: #e6e6e6;
    /* texto claro */
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 14px;
    padding: 16px;
    box-shadow: none !important;
}

#feedback .cdz-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #fff;
}

#feedback .cdz-meta {
    margin: 0;
    font-size: 14px;
    color: #b7c0d0;
}

#feedback .cdz-desc {
    margin: 0;
    color: #e5e7eb;
}

/* Chips: sem fundo, só contorno/cores */
#feedback .cdz-chip {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    border: 1px solid currentColor;
    background: transparent !important;
    /* <- sem fundo */
    color: #9aa4b2;
}

#feedback .cdz--blue .cdz-chip {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, .65);
}

#feedback .cdz--green .cdz-chip {
    color: #86efac;
    border-color: rgba(134, 239, 172, .65);
}

#feedback .cdz--orange .cdz-chip {
    color: #fdba74;
    border-color: rgba(253, 186, 116, .65);
}

/* CTA bolinha: transparente no dark */
#feedback .cdz-cta {
    justify-self: start;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(147, 197, 253, .55);
    /* azul suave */
    background: transparent !important;
    /* <- sem branco */
    text-decoration: none;
    font-size: 16px;
    color: #93c5fd;
    box-shadow: none !important;
    transition: transform .2s, box-shadow .2s, background .2s;
}

#feedback .cdz-cta:hover {
    transform: translateY(-1px);
    background: rgba(147, 197, 253, .08);
}

/* ===== Setas laterais (dark) */
#feedback .cdz-nav {
    all: unset;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent !important;
    /* <- sem branco */
    color: #e5e7eb;
    font-size: 22px;
    line-height: 1;
    box-shadow: none !important;
    cursor: pointer;
}

#feedback .cdz-prev {
    left: 14px;
}

#feedback .cdz-next {
    right: 14px;
}

#feedback .cdz-nav:hover {
    background: rgba(255, 255, 255, .08) !important;
}

#feedback .cdz-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ===== Dots (dark) */
#feedback .cdz-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

#feedback .cdz-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: #444e60;
}

#feedback .cdz-dot[aria-selected="true"] {
    background: #3b82f6;
}

/* mesma largura exata para todos os cards */
#feedback .cdz-track {
    align-items: stretch;
}

/* só para garantir */

/* fixa a largura do item e permite encolher */
#feedback .cdz-slide {
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--cdz-per) - 1) * var(--cdz-gap)) / var(--cdz-per));
    width: calc((100% - (var(--cdz-per) - 1) * var(--cdz-gap)) / var(--cdz-per));
    min-width: 0;
    /* evita que o conteúdo force o item a alargar */
    max-width: calc((100% - (var(--cdz-per) - 1) * var(--cdz-gap)) / var(--cdz-per));
}

/* garante que o card ocupe 100% da largura do slide */
#feedback .cdz-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* se tiver textos muito longos/URLs, não deixam expandir */
#feedback .cdz-card * {
    min-width: 0;
    word-break: break-word;
}


/* .ask maior (aprox. +20%) */
.story .ask.ask--big {
    /* base da .ask é: clamp(22px, 2.2vw, 28px)  → multiplicamos por 1.2 */
    font-size: clamp(calc(22px * 1.2), calc(2.2vw * 1.2), calc(28px * 1.2));
}


/* imagem de reviews abaixo do quem sou eu */
.reviews-section {
    padding: 48px 0 64px;
}

.reviews-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1200px;
    /* mesmo grid do site */
    margin-inline: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

/* (opcional) se quiser “sangrar” de borda a borda da tela, use a classe abaixo no <section>:
   <section class="reviews-section reviews-fullbleed"> ... </section>  */
.reviews-fullbleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

.reviews-fullbleed .reviews-img {
    max-width: min(1400px, 96vw);
}

/* ===== FAQ (escopo local) ===== */
.faqz-list {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.faqz-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    overflow: hidden;
}

.faqz-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    color: #fff;
    font-weight: 800;
    position: relative;
}

.faqz-item summary::-webkit-details-marker {
    display: none;
}

.faqz-item summary::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(212, 175, 55, .95);
    border-bottom: 2px solid rgba(212, 175, 55, .95);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform .25s ease;
}

.faqz-item[open] summary {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.faqz-item[open] summary::after {
    transform: translateY(-30%) rotate(45deg);
}

.faqz-content {
    padding: 16px 20px 22px;
    color: #e9e6dd;
}

.faqz-content p {
    margin: 10px 0;
}

.faqz-sub {
    margin: 12px 0 6px;
    color: var(--gold-500, #d4af37);
    font-weight: 800;
}

.faqz-ul {
    list-style: none;
    padding-left: 0;
    margin: 8px 0;
    display: grid;
    gap: 6px;
}

.faqz-ul li {
    position: relative;
    padding-left: 22px;
    color: #e9e6dd;
}

.faqz-ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0 35%, rgba(255, 255, 255, .25) 36% 100%),
        linear-gradient(180deg, #f3e3a1, #d4af37);
    border: 1px solid #a88621;
    box-shadow: 0 2px 8px rgba(212, 175, 55, .25);
}

/* foco acessível */
.faqz-item summary:focus-visible {
    outline: 2px solid
}

/* Pricing — títulos maiores e preço centralizado */
.pricing .plan-title {
    font-family: "Playfair Display", serif;
    /* mantém a vibe */
    font-weight: 900;
    letter-spacing: .2px;
    text-align: center;
    font-size: clamp(24px, 2.6vw, 36px);
    /* ~40%+ maior */
    margin-top: 4px;
}

.pricing .plan-sub {
    text-align: center;
    margin-top: 2px;
}

.pricing .price {
    text-align: center;
    /* centraliza o valor */
    width: 100%;
}


/* imagem das capas no rodapé/cta */
.cta-collection {
    margin: 28px auto 36px;
    /* espaçamento entre botão e direitos */
    max-width: 1100px;
    /* limita dentro do container */
}

.cta-collection img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

/* mobile: um pouco menos de raio e sombra */
@media (max-width: 640px) {
    .cta-collection {
        margin: 22px auto 28px;
    }

    .cta-collection img {
        border-radius: 10px;
    }
}

/* COLEÇÃO — capa visível por completo */
#colecao {
    --cover-scale: .94;
}

/* ajuste aqui: .80 = 80%, .90 = 90%... */

#colecao .book-cover {
    aspect-ratio: 4 / 5;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, .22);
}

/* mantém o fundo/gradiente do card */
#colecao .book-cover .cover-bg {
    position: absolute;
    inset: 0;
    display: flex;
    /* centraliza o <img> */
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 120% at 30% 10%, rgba(212, 175, 55, .12), transparent 40%),
        linear-gradient(160deg, #0b0b0b, #1a0c0d 40%, #3c0008 55%, #000 100%);
}

/* faz a capa caber inteira e bem centralizada */
#colecao .book-cover .cover-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* <- não corta a imagem */
    object-position: center;
    transform: scale(var(--cover-scale));
    /* margem interna elegante */
    pointer-events: none;
    border-radius: 10px;
    /* cantos suaves, opcional */
}

/* ====== MOBILE PATCH (seguro, sem conflito) ====== */
@media (max-width: 768px) {
    :root {
        /* controle do respiro lateral no mobile */
        --gutter-m: 20px;
    }

    /* 1) Navbar menor no mobile (não mexe no desktop) */
    header.nav {
        padding-block: 10px;
    }

    header.nav .brand {
        font-size: 15px;
    }

    /* nome/logo */
    header.nav nav a {
        font-size: 14px;
    }

    /* links */
    header.nav a.cta {
        font-size: 14px;
        padding: .5rem .8rem;
    }

    /* botão da nav */

    /* 2) Respiro lateral para textos “centrados” das seções */
    /* Aplica só quando há o wrapper .center dentro de um .container */
    .container>.center {
        padding-inline: var(--gutter-m);
    }

    /* 3) Feedback – respiro garantido antes do carrossel */
    #feedback .center {
        padding-inline: var(--gutter-m);
    }

    /* (opcional) Se quiser o slider um pouco mais “para dentro”, mantenha: */
    #feedback .cdz-slider {
        padding-left: calc(var(--gutter-m) + 26px);
        padding-right: calc(var(--gutter-m) + 26px);
    }

}

@media (max-width: 768px) {
    :root {
        --gutter-m: 20px;
    }

    /* ... (o resto do patch que já colou) ... */

    /* 4) Quem sou — respiro lateral igual ao Feedback */
    .quem-sou-grid {
        padding-inline: var(--gutter-m);
        row-gap: 22px;
        /* opcional: dá um respiro vertical entre blocos no mobile */
    }
}

/* ===========================
   PATCH: mobile-only & ajustes finos
   Cole no final do seu CSS
   =========================== */

/* 1) Respiro logo abaixo da navbar no mobile (entre o topo e o hero) */
@media (max-width: 768px) {
    header.nav+section {
        margin-top: clamp(6px, 2vw, 14px);
    }
}

/* 2) Capas da Coleção: mostram a capa inteira com mais “folga” em telas menores */
@media (max-width: 480px) {
    #colecao {
        --cover-scale: .92;
    }

    /* antes .94 */
}

@media (max-width: 380px) {
    #colecao {
        --cover-scale: .88;
    }
}

/* 3) Bolinhas (bullets) do pricing centralizadas verticalmente */
.price-breakdown li {
    align-items: center;
    /* centraliza conteúdo na linha */
}

.price-breakdown li::before {
    display: block;
    /* evita baseline estranho */
    align-self: center;
    /* crava a bolinha no centro vertical */
    margin: 0;
    /* sem deslocamento extra */
}

/* ===== GARANTIA (layout selo à esquerda, texto à direita) ===== */
.garantia-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 24px;
    max-width: 1100px;
    /* segue o padrão do container */
    margin-inline: auto;
}

.SeloGarantia {
    width: 100%;
    height: auto;
    max-width: 160px;
    /* controle fino do selo */
    display: block;
}

.garantia-copy p {
    color: #e9e6dd;
}

.garantia-list {
    margin: 10px 0 6px;
}

/* verdinho do "TOTAL" - mesmo tom suave do tema */
.green {
    color: #00ff5e;
}

/* Responsivo: empilha no mobile */
@media (max-width: 768px) {
    .garantia-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .SeloGarantia {
        max-width: 120px;
        margin: 0 0 4px 0;
    }
}

/* ===================== */
/* REVIEWS — BLOCO NOVO  */
/* ===================== */

.rvx-section {
    padding: 64px 0;
}

.rvx-shell {
    width: min(1120px, 92%);
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .18));
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.rvx-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.95fr;
    gap: 0;
    /* sem gap, pois o cartão já tem borda contínua */
}

/* ——— Coluna esquerda ——— */
.rvx-left {
    background: #2a0b0b;
    /* vinho escuro elegante */
    padding: 28px 26px;
    color: #f3ece6;
}

.rvx-title {
    font-weight: 900;
    line-height: 1;
    margin: 0 0 14px 0;
    font-size: clamp(28px, 3.4vw, 56px);
    letter-spacing: -.02em;
}

.rvx-left p {
    margin: 10px 0;
    opacity: .95;
}

.rvx-link {
    color: #d4af37;
    /* “gold” suave */
    text-underline-offset: 3px;
}

/* ——— Coluna direita (bolhas) ——— */
.rvx-right {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* espaço entre as mensagens */
}

.rvx-msg {
    color: #e8e6e3;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.rvx-msg p {
    margin: 6px 0;
}

.rvx-time,
.rvx-seen {
    display: block;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #c9c1ae;
    opacity: .9;
}

.rvx-note {
    border-color: rgba(220, 38, 38, .35);
    background: linear-gradient(180deg, rgba(220, 38, 38, .12), transparent);
}

/* ——— Responsivo ——— */
@media (max-width: 980px) {
    .rvx-grid {
        grid-template-columns: 1fr;
    }

    .rvx-left {
        padding: 22px 18px;
    }

    .rvx-right {
        padding: 14px;
    }

    .rvx-section {
        padding: 48px 0;
    }
}

/* ===== REVIEWS: stack de imagens (mesmo modelo das bolhas) ===== */
.rvx-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* mude para 10px ou 15px se preferir */
    padding: 12px;
}

.rvx-shot {
    border-radius: 12px;
    /* bordinha redonda */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.rvx-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* mobile continua empilhando como antes */
@media (max-width: 980px) {
    .rvx-stack {
        padding: 12px;
    }
}

/* ===== Banda vinho com topo/rodapé pretos ===== */
.bg-premium--plus{
  position: relative;
  isolation: isolate;
  /* 1) camada TOP preta -> some até ficar transparente */
  background:
    linear-gradient(180deg, var(--ink-900) 0%, rgba(10,10,10,0) 16%),
    /* 2) camada BOTTOM preta -> aparece do transparente pro preto */
    linear-gradient(180deg, rgba(10,10,10,0) 84%, var(--ink-900) 100%),
    /* 3) banda VINHO (igual à bg-premium--band) */
    linear-gradient(180deg, rgba(91,15,21,.28) 28%, rgba(60,0,8,.22) 72%);
}

/* textura de veludo (mesma da bg-premium--band) */
.bg-premium--plus::before{
  content:"";
  position:absolute;
  inset:-8% 0;
  pointer-events:none;
  background: conic-gradient(from 180deg at 50% 50%,
              rgba(255,255,255,.035), rgba(255,255,255,0) 20% 80%,
              rgba(255,255,255,.035));
  filter: blur(24px);
  opacity:.35;
  z-index:-1;
}