/* =============================================================================
   Revista Seleções — Landing (Bootstrap 4)
   Tokens + componentes padronizados
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------------------- */
:root {
    /* Cores da marca */
    --rs-primary: #FF5722;
    ;
    --rs-primary-hover: #2d5299;
    --rs-accent: #fcca31;
    --rs-accent-soft: #fbf17b;
    --rs-cta: #e31e24;
    --rs-cta-border: #ff932f;
    --rs-cta-hover: #fcc930;
    --rs-secondary-action: #2bc9bc;
    --rs-secondary-border: #FFEB3B;
    /* Superfícies e texto */
    --rs-text: #1f2933;
    --rs-text-body: #3e4c59;
    --rs-text-muted: #6d6d6d;
    --rs-text-inverse: #ffffff;
    --rs-surface: #ffffff;
    --rs-surface-alt: #f4f6f9;
    --rs-surface-muted: #f5f5f5;
    --rs-border: #e4e4e4;
    --rs-overlay-dark: rgba(14, 30, 59, 0.62);
    /* Espaçamento vertical (seções) */
    --rs-section-y: 2.75rem;
    --rs-section-y-md: 3.25rem;
    --rs-section-y-lg: 4.5rem;
    /* Tipografia */
    --rs-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rs-text-sm: 0.8125rem;
    --rs-text-base: 1rem;
    --rs-text-md: 1.0625rem;
    --rs-text-lg: 1.125rem;
    --rs-text-xl: 1.25rem;
    --rs-h1: clamp(2.2rem, 4.9vw, 3.8rem);
    --rs-h2: clamp(1.75rem, 3.5vw, 2.875rem);
    --rs-h3-lg: 1.625rem;
    --rs-h3-sm: 1.125rem;
    --rs-radius-sm: 8px;
    --rs-radius-md: 12px;
    --rs-radius-lg: 16px;
    --rs-shadow-card: 0 4px 24px rgba(31, 47, 79, 0.08);
    --rs-shadow-cta: 0 8px 28px rgba(227, 30, 36, 0.35);
    /* Compat legado (outros trechos / assets) */
    --main-color-pessego: #ff6b6b;
    --main-color-amarelo: #fcca31;
    --main-color-amareloClaro: #fbf17b;
}

/* -----------------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--rs-font);
    font-size: var(--rs-text-base);
    line-height: 1.5;
    color: var(--rs-text-body);
    -webkit-font-smoothing: antialiased;
}

/* Escala global de títulos — corpo da página (hero sobrescreve h1) */
h2 {
    font-family: var(--rs-font);
    font-size: var(--rs-h2);
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--rs-text);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

    h2 > b {
        font-weight: 800;
    }

h3 {
    font-family: var(--rs-font);
    font-size: var(--rs-h3-sm);
    font-weight: 700;
    color: var(--rs-text);
    line-height: 1.3;
}

p {
    margin-bottom: 1rem;
}

/* Texto corrido legível */
.lp-lead {
    font-size: var(--rs-text-lg);
    line-height: 1.55;
    color: var(--rs-text-body);
    max-width: 38rem;
}

.lp-text-muted {
    color: var(--rs-text-muted);
    font-size: var(--rs-text-sm);
    margin-top: 1.25rem;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   3. Layout — seções
   ----------------------------------------------------------------------------- */
.lp-section {
    padding-top: var(--rs-section-y);
    padding-bottom: var(--rs-section-y);
}

@media (min-width: 768px) {
    .lp-section {
        padding-top: var(--rs-section-y-md);
        padding-bottom: var(--rs-section-y-md);
    }
}

@media (min-width: 992px) {
    .lp-section {
        padding-top: var(--rs-section-y-lg);
        padding-bottom: var(--rs-section-y-lg);
    }
}

.lp-section--surface-alt {
    background-color: var(--rs-surface-alt);
}

/* -----------------------------------------------------------------------------
   4. Botões (CTA)
   ----------------------------------------------------------------------------- */
.botao,
.btn-cta {
    display: inline-block;
    font-family: var(--rs-font);
    font-size: 1.125rem;
    font-weight: 800;
    text-align: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--rs-radius-md);
    border: 2px solid transparent;
    color: var(--rs-text-inverse);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

    .btn-cta:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(57, 104, 197, 0.45);
    }

.btn.btn-cta {
    white-space: normal;
    line-height: 1.25;
}

/* Padrão — CTAs fora do hero */
.botao,
.btn-cta--default {
    background-color: var(--rs-primary);
    border-color: var(--rs-secondary-border);
    color: var(--rs-text-inverse);
}

    .botao:hover,
    .btn-cta--default:hover {
        background-color: var(--rs-secondary-action);
        border-color: var(--rs-secondary-border);
        color: var(--rs-text-inverse);
        text-decoration: none;
    }

/* Primário — hero / conversão máxima (somente topo) */
#page-top .btn-cta--primary,
#page-top .botao {
    background-color: var(--rs-cta);
    border-color: var(--rs-cta-border);
    color: var(--rs-text-inverse);
    box-shadow: var(--rs-shadow-cta);
    animation: rs-cta-pulse 1.2s ease-in-out infinite alternate;
    margin-top: 1.5rem;
}

    #page-top .btn-cta--primary:hover,
    #page-top .botao:hover {
        background-color: var(--rs-cta-hover);
        border-color: var(--rs-cta-border);
        color: var(--rs-text);
        text-decoration: none;
        box-shadow: 0 12px 32px rgba(252, 201, 48, 0.35);
    }

/* Destaque do preço */
#blocoPreco .box-botao > a.botao,
#blocoPreco .box-botao > a.btn-cta {
    padding: 0.75rem 2.5rem;
    margin: 1rem 0;
    font-size: 1.125rem;
}

.lp-cta-wrap {
    margin-top: 1.75rem;
}

.lp-cta-wrap--center {
    text-align: center;
}

/* Blocos de botão entre seções */
.box-botao {
    margin-top: 0;
}

#oquetem .box-botao,
#especialista .box-botao {
    padding: 2rem 0 4rem;
}

#blocoPreco .box-botao {
    padding: 0;
}

/* -----------------------------------------------------------------------------
   5. Navbar
   ----------------------------------------------------------------------------- */
.navbar-topo {
    background: linear-gradient(to bottom, #1a4d98 0%, transparent 100%);
    z-index: 1030;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

    .navbar-topo .navbar-nav .nav-link {
        color: var(--rs-text-inverse);
        font-weight: 500;
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.5rem 0.75rem;
    }

        .navbar-topo .navbar-nav .nav-link:hover,
        .navbar-topo .navbar-nav .nav-link:focus {
            color: var(--rs-accent);
            text-decoration: none;
        }

    .navbar-topo .nav-item {
        padding-right: 0.5rem;
    }

@media (min-width: 992px) {
    .navbar-topo .nav-item {
        padding-right: 1.25rem;
    }
}

.navbar-topo .navbar-collapse {
    min-height: 3.5rem;
}

.navbar-topo .nav-button > a {
    background-color: var(--main-color-pessego) !important;
    border-radius: 18px;
    color: var(--main-color-amarelo) !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    text-align: center !important;
}

.navbar-brand img {
    height: 52px;
    width: auto;
}

@media (max-width: 575px) {
    .navbar-brand img {
        height: 40px;
    }
}

.navbar-toggler-icon {
    background-image: url('../../images/oferta/open-menu.svg') !important;
}

.navbar-topo .navbar-toggler {
    border: 0;
    padding: 0.3rem;
}

    .navbar-topo .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(252, 202, 49, 0.35);
        border-radius: 6px;
    }

.nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    padding: 0;
    margin: 0 0 1.25rem auto;
}

    .nav-close:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(252, 202, 49, 0.4);
    }

/* -----------------------------------------------------------------------------
   6. Hero
   ----------------------------------------------------------------------------- */
header {
    background: #1f2f4f url('../../images/oferta/Fundo-hero.jpg') center center no-repeat;
    background-size: cover;
    padding-top: calc(var(--rs-section-y-md) + 64px);
    padding-bottom: var(--rs-section-y-md);
    position: relative;
    overflow: hidden;
}

#page-top {
    position: relative;
    background-position: 50% 50%;
}

/* #page-top::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 40%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	animation: pageTopGlow 8s ease-in-out infinite;
} */

/* pageTopBgMove removed — background is now static */

@keyframes pageTopGlow {

    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 0.18;
        transform: scale(1.02);
    }
}

/* header::before,
header .hero-overlay {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--rs-overlay-dark);
	z-index: 1;
} */

header::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-container {
    position: relative;
    z-index: 2;
}

.hero-row {
    align-items: center;
}

header .row {
    align-items: center;
}

header h1 {
    font-family: var(--rs-font);
    font-size: var(--rs-h1);
    text-align: center;
    color: var(--rs-text-inverse);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 4px 15px rgba(104, 115, 174, 0.45);
}

    header h1 > span {
        color: var(--rs-accent);
    }

.hero-kicker {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: var(--rs-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 40px;
    padding: 0.375rem 0.875rem;
    font-size: var(--rs-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: var(--rs-text-lg);
    line-height: 1.5;
    color: rgba(245, 247, 253, 0.95);
    max-width: 38rem;
    margin-top: 1rem;
    margin-bottom: 0;
}

.hero-benefits {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .hero-benefits > span {
        background-color: rgba(255, 255, 255, 0.14);
        color: var(--rs-text-inverse);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 24px;
        padding: 0.45rem 0.85rem;
        font-size: var(--rs-text-sm);
        font-weight: 700;
    }

.box-img-header {
    text-align: center;
}

.img-header {
    max-width: 100%;
    height: auto;
}

/* Botão do hero (estilo da referência) */
.btn-cta--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    border-radius: 14px;
    padding: 1.1rem 1.25rem 0.95rem;
    background: linear-gradient(180deg, #e51b23 0%, #c9151b 100%);
    border: 2px solid var(--rs-cta-border);
    box-shadow: 0 14px 34px rgba(227, 30, 36, 0.35);
    text-transform: uppercase;
    text-align: center;
}

    .btn-cta--hero:hover {
        background: linear-gradient(180deg, #f03a2c 0%, #d61f1f 100%);
    }

.btn-cta__label {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-align: center;
}

.btn-cta__note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
    opacity: 0.95;
    text-align: center;
}

@media (max-width: 991px) {
    header {
        padding-top: calc(2.5rem + 58px);
        padding-bottom: 2.25rem;
    }

    header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background: url('../../images/oferta/fundo-mesa.png') bottom center no-repeat;
        background-size: cover;
        z-index: 1;
    }

    .hero-row {
        text-align: center;
    }

    .box-img-header {
        margin-top: 1.5rem;
    }

    .img-header {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        font-size: var(--rs-text-md);
    }

    .hero-benefits {
        justify-content: center;
    }

    .navbar-topo .navbar-collapse.show {
        position: fixed;
        inset: 0;
        background: rgba(10, 20, 40, 0.94);
        padding: 1.25rem 1.25rem 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1040;
    }

    .navbar-topo .nav-close {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        margin: 0;
    }

    .navbar-topo .navbar-nav {
        margin-top: 0;
        text-align: center;
        width: 100%;
        ;
    }

    .navbar-topo .nav-item {
        padding-right: 0;
        margin-bottom: 0.5rem;
    }

    .navbar-topo .navbar-nav .nav-link {
        font-size: 1.1rem;
        letter-spacing: 0.03em;
        padding: 0.65rem 0;
    }

    body.nav-open {
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    header h1 {
        /* text-align: left; */
        font-size: clamp(2rem, 3.5vw, 2.75rem);
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }
}

@media (min-width: 992px) {
    .hero-row {
        align-items: flex-end;
    }

    header h1 {
        font-size: clamp(2.6rem, 3.4vw, 3.4rem);
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
    }

    .hero-text-content {
        padding-bottom: 2rem;
    }

    .box-img-header {
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .img-header {
        max-height: 550px;
        display: block;
    }

    header {
        padding-top: calc(4rem + 64px);
        padding-bottom: 0;
    }

    /* Desktop: botão não estica a coluna */
    .btn-cta--hero {
        width: auto;
        min-width: 420px;
    }
}

/* -----------------------------------------------------------------------------
   7. Brinde
   ----------------------------------------------------------------------------- */
#brinde-especial.brinde-showcase {
    background-color: var(--rs-surface-alt);
    padding-top: var(--rs-section-y-md);
    padding-bottom: var(--rs-section-y-md);
    border-top: 1px solid rgba(57, 104, 197, 0.08);
    border-bottom: 1px solid rgba(57, 104, 197, 0.08);
}

.brinde-showcase__row {
    row-gap: 1.5rem;
}

.brinde-showcase__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0 1.5rem;
}

@media (min-width: 992px) {
    .brinde-showcase__visual {
        justify-content: flex-start;
        padding: 0 1.5rem 0 0;
    }

    #brinde-especial.brinde-showcase {
        padding-top: var(--rs-section-y-lg);
        padding-bottom: var(--rs-section-y-lg);
    }
}

.brinde-showcase__photo-ring {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 2.25rem;
    /* background: linear-gradient(165deg, #ffffff 0%, #eef2f8 100%); */
    border-radius: var(--rs-radius-lg);
    /* box-shadow: var(--rs-shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.9) inset; */
}

    .brinde-showcase__photo-ring::before {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: var(--rs-radius-md);
        background: radial-gradient(ellipse 80% 70% at 50% 72%, rgba(57, 104, 197, 0.07) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
    }

.brinde-showcase__photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--rs-radius-sm);
    filter: drop-shadow(0 16px 28px rgba(31, 47, 79, 0.12));
}

.brinde-showcase__copy {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .brinde-showcase__copy {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        padding-left: 0.75rem;
    }
}

.brinde-showcase__eyebrow {
    font-size: var(--rs-text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rs-primary);
    margin-bottom: 0.75rem;
}

.brinde-showcase__title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rs-text);
    margin: 0 0 0.75rem;
    text-align: left;
    background: none;
    padding-bottom: 0;
}

.brinde-showcase__lead {
    font-size: var(--rs-text-md);
    line-height: 1.55;
    color: var(--rs-text-body);
    margin: 0 0 1.5rem;
}

.brinde-showcase__topics {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .brinde-showcase__topics li {
        position: relative;
        padding-left: 1.75rem;
        margin-bottom: 0.875rem;
        font-size: var(--rs-text-base);
        line-height: 1.5;
        color: var(--rs-text-body);
    }

        .brinde-showcase__topics li:last-child {
            margin-bottom: 0;
        }

        .brinde-showcase__topics li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: 0;
            font-size: 1.1em;
            font-weight: 700;
            color: var(--rs-accent);
            line-height: 1.4;
        }

        .brinde-showcase__topics li strong {
            color: var(--rs-text);
            font-weight: 800;
        }

/* -----------------------------------------------------------------------------
   8. Faixa de capas
   ----------------------------------------------------------------------------- */
#capas {
    background-color: var(--rs-surface-muted);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.imagens-capas {
    height: 106px;
    width: 100%;
    background-image: url('../../images/oferta/capas-revistas.png');
    background-size: auto 100%;
    background-position-x: -20px;
    background-repeat: repeat-x;
}

@media (min-width: 768px) {
    .imagens-capas {
        height: 140px;
    }
}

@media (min-width: 992px) {
    .imagens-capas {
        height: 180px;
    }
}

/* -----------------------------------------------------------------------------
   9. O que vem (#oquetem)
   ----------------------------------------------------------------------------- */
#oquetem {
    background: var(--rs-surface) url('../../images/oferta/bg-mosaico-left.png') left bottom no-repeat;
    background-size: 150px auto;
}

@media (min-width: 768px) {
    #oquetem {
        background-size: 250px auto;
    }
}

@media (min-width: 992px) {
    #oquetem {
        background-size: 450px auto;
    }
}

.foto-destaque {
    height: 300px;
    background-image: url('../../images/oferta/destaque-oquetem.jpg');
    background-size: cover;
    background-position: -30px;
    position: relative;
}

@media (min-width: 768px) {
    .foto-destaque {
        height: 500px;
        border-radius: 120px;
        background-position: center;
    }
}

.texto-destaque {
    width: 90%;
    background-color: var(--rs-surface-muted);
    border-radius: var(--rs-radius-md);
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 250px;
    padding: 2rem;
    box-shadow: var(--rs-shadow-card);
}

@media (min-width: 768px) {
    .texto-destaque {
        margin: initial;
        left: inherit;
        width: 500px;
        right: 50px;
        top: 150px;
    }
}

#oquetem .texto-destaque h2 {
    text-align: left;
    word-spacing: -0.05em;
    background-image: url('../../images/oferta/traco-decor-amarelo.jpg');
    background-repeat: no-repeat;
    background-position: bottom left;
    padding-bottom: 1.875rem;
    margin-bottom: 0;
    font-size: clamp(1.375rem, 2.5vw, 2.25rem);
}

#oquetem .texto-destaque p {
    font-size: var(--rs-text-md);
    font-weight: 400;
    margin-top: 1.25rem;
    color: var(--rs-text);
    line-height: 1.55;
    letter-spacing: normal;
}

.grupo1 {
    margin-bottom: 0;
}

.subtitulo-topicos {
    justify-content: center;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

    .subtitulo-topicos h3,
    .lp-section-subtitle {
        font-size: var(--rs-h3-lg);
        font-weight: 300;
        color: var(--rs-text);
        text-align: center;
        width: 100%;
        line-height: 1.3;
    }

.topico1,
.topico2,
.topico3,
.topico4 {
    padding-left: 5.25rem;
    background-position: left top;
    background-repeat: no-repeat;
    margin-bottom: 1.5rem;
}

.topico1 {
    background-image: url('../../images/oferta/ico-1.png');
}

.topico2 {
    background-image: url('../../images/oferta/ico-2.png');
}

.topico3 {
    background-image: url('../../images/oferta/ico-3.png');
}

.topico4 {
    background-image: url('../../images/oferta/ico-4.png');
}

    .topico1 h3,
    .topico2 h3,
    .topico3 h3,
    .topico4 h3 {
        font-size: var(--rs-h3-sm);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        background-repeat: no-repeat;
        background-position: bottom left;
        padding: 0.5rem 0 1.5rem;
        color: var(--rs-text);
        margin-bottom: 0;
    }

.topico1 h3 {
    background-image: url('../../images/oferta/traco-decor-azul.jpg');
}

.topico2 h3 {
    background-image: url('../../images/oferta/traco-decor-lilas.jpg');
}

.topico3 h3 {
    background-image: url('../../images/oferta/traco-decor-verde.jpg');
}

.topico4 h3 {
    background-image: url('../../images/oferta/traco-decor-marrom.jpg');
}

.topico1 > p,
.topico2 > p,
.topico3 > p,
.topico4 > p {
    font-size: var(--rs-text-base) !important;
    color: var(--rs-text-muted) !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    margin-bottom: 0;
}

@media (min-width: 768px) {

    .topico1,
    .topico2,
    .topico3,
    .topico4 {
        min-height: 8rem;
    }
}

/* -----------------------------------------------------------------------------
   10. Bloco preço
   ----------------------------------------------------------------------------- */
#blocoPreco {
    background: var(--rs-surface-muted) url('../../images/oferta/bg-mosaico-left.png') left bottom no-repeat;
    background-size: 150px auto;
    position: relative;
}

    #blocoPreco::before {
        content: "";
        width: 100px;
        height: 100px;
        background-image: url('../../images/oferta/bg-mosaico-right.png');
        background-size: 100px auto;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        right: 0;
        pointer-events: none;
    }

    #blocoPreco h2 {
        text-align: center;
        background-image: url('../../images/oferta/traco-decor-amarelo.jpg');
        background-repeat: no-repeat;
        background-position: bottom center;
        padding-bottom: 1.875rem;
        margin-left: auto;
        margin-right: auto;
    }

@media (min-width: 768px) {
    #blocoPreco h2 {
        max-width: 40rem;
    }
}

#blocoPreco .box-preco {
    width: 100%;
    border: 2px solid var(--rs-accent);
    border-radius: var(--rs-radius-md);
    padding: 1.75rem 1.25rem 2rem;
    background: var(--rs-surface);
    box-shadow: var(--rs-shadow-card);
}

#blocoPreco .box-preco,
#blocoPreco .destaque-preco {
    margin-top: 2rem;
}

.box-preco h3 {
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.lp-badge,
.box-preco .tag-plano {
    display: inline-block;
    font-size: var(--rs-text-sm);
    font-weight: 700;
    padding: 0.35rem 1rem;
    background-color: #e8ebf0;
    color: var(--rs-text);
    border-radius: 999px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--rs-border);
}

.box-preco span {
    background-image: url('../../images/oferta/check-azul.png');
    background-size: 28px 24px;
    background-position: left 0.1rem;
    background-repeat: no-repeat;
    font-size: var(--rs-text-base);
    padding-left: 2.25rem;
    display: inline-block;
    margin: 0.35rem 0;
    line-height: 1.4;
    color: var(--rs-text-body);
}

    .box-preco span > b {
        color: #3968c5;
        font-weight: 800;
    }

.listaPreco {
    text-align: left;
    padding: 0.5rem 0.25rem 0;
}

@media (max-width: 991px) {
    #blocoPreco {
        background-size: 250px auto;
    }
}

@media (min-width: 992px) {
    #blocoPreco {
        background-size: 450px auto;
    }

        #blocoPreco::before {
            width: 180px;
            height: 180px;
            background-size: 180px auto;
        }

        #blocoPreco .box-preco {
            min-height: 0;
            padding-top: 2rem;
        }
}

/* -----------------------------------------------------------------------------
   11. Especialista + depoimentos
   ----------------------------------------------------------------------------- */
#especialista {
    background-image: url('../../images/oferta/bcg-especialista.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: var(--rs-section-y-lg);
}

    #especialista > .container > h2 {
        text-align: center;
        background-image: url('../../images/oferta/traco-decor-amarelo.jpg');
        background-repeat: no-repeat;
        background-position: bottom center;
        padding-bottom: 1.875rem;
        margin-left: auto;
        margin-right: auto;
    }

@media (min-width: 768px) {
    #especialista > .container > h2 {
        max-width: 40rem;
    }
}

.depoimentos {
    background-color: var(--rs-accent);
    background-image: url('../../images/oferta/bcg-depoimentos.jpg');
    background-position: top;
    background-repeat: repeat-x;
}

.center-depo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .center-depo {
        margin-top: 4rem;
    }
}

.depoimentos .row {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .depoimentos .row {
        width: 92%;
    }
}

.item-depoimento {
    background-color: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-md);
    padding: 3rem 1.5rem 1.75rem;
    box-shadow: var(--rs-shadow-card);
    position: relative;
    margin-top: 1.5rem;
    /* height: 100%; */
}

    .item-depoimento img {
        max-width: 100%;
        height: auto;
        border-radius: var(--rs-radius-sm);
    }

#especialista .item-depoimento > p {
    font-weight: 400;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-size: var(--rs-text-base);
    letter-spacing: normal;
    word-spacing: normal;
    font-style: italic;
    color: var(--rs-text-body);
    line-height: 1.55;
}

#especialista .item-depoimento > span {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--rs-text);
    letter-spacing: -0.02em;
    display: block;
}

.item-depoimento .aspas {
    width: 48px;
    height: auto;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}

/* -----------------------------------------------------------------------------
   12. Rodapé
   ----------------------------------------------------------------------------- */
footer {
    padding: var(--rs-section-y) 0;
    background-color: var(--rs-accent);
}

    footer p {
        font-size: var(--rs-text-sm);
        line-height: 1.55;
        text-align: center;
        color: var(--rs-text);
        max-width: 56rem;
        margin-left: auto;
        margin-right: auto;
    }

/* ------------------------------ */

.endereco-rodape {
    background-color: #f0f0f0;
}

.logo-slogan img {
    padding-top: 12px;
    padding-bottom: 16px;
}

.endereco-rodape p {
    padding-top: 12px;
    padding-bottom: 24px;
    font-size: 12px;
    line-height: 1.2;
}

    .endereco-rodape p a {
        color: #212529;
        text-decoration: underline;
    }

#selos {
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center;
    display: flex;
    flex-direction: inherit;
    justify-content: center;
    align-items: flex-start;
}

/* -----------------------------------------------------------------------------
   13. Animações
   ----------------------------------------------------------------------------- */
@-webkit-keyframes rs-cta-pulse {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.03);
    }
}

@keyframes rs-cta-pulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.03);
    }
}