/* ===== VARIÁVEIS E RESET ===== */
:root {
    --primary: #000b45;
    --primary-dark: #000730;
    --primary-light: #1a3aa0;
    --secondary: #ff6d01;
    --secondary-hover: #e05c00;
    --accent: #ffb100;
    --bg-light: #f8fafc;
    --bg-card: #ffffff;
    --text-dark: #0b1a33;
    --text-gray: #475569;
    --text-muted: #64748b;
    --white: #ffffff;
    --success: #16a34a;
    --danger: #dc2626;
    --state-ce: #ffb100;
    --state-pa: #2dd4bf;
    --shadow-sm: 0 4px 12px rgba(13, 31, 107, 0.05);
    --shadow-md: 0 12px 32px rgba(13, 31, 107, 0.08);
    --shadow-lg: 0 20px 40px rgba(13, 31, 107, 0.12);
    --shadow-glow: 0 0 35px rgba(255, 122, 26, 0.35);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font);
    color: var(--text-dark);
    background: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* ===== PRELOADER ===== */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F7FA;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    overflow: hidden;
}
#preloader.preloader--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#preloaderVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 60%;
    max-width: 80%;
    max-height: 90vh;
    object-fit: contain;
    transform: translate(-50%, -50%);
    display: block;
    background: #F5F7FA;
}
body.preloading {
    overflow: hidden;
}

/* ===== PRELOADER RESPONSIVO ===== */
@media (max-width: 1024px) {
    #preloaderVideo {
        min-width: 70%;
        max-width: 90%;
        max-height: 85vh;
        object-fit: contain;
    }
}

@media (max-width: 768px) {
    #preloaderVideo {
        min-width: 85%;
        max-width: 95%;
        max-height: 80vh;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    #preloader {
        background: #F5F7FA;
    }
    #preloaderVideo {
        min-width: 92%;
        max-width: 98%;
        max-height: 85vh;
        object-fit: contain;
    }
}

/* ===== SCROLL PROGRESS ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    z-index: 1200;
    transition: width 0.1s linear;
}

/* ===== REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ===== BOTÕES ===== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary);
    color: var(--white);
    padding: 16px 36px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    box-shadow: 0 8px 24px rgba(13, 31, 107, 0.25);
    overflow: hidden;
    font-family: var(--font);
}
.btn-small {
    padding: 10px 24px;
    font-size: 0.85rem;
}
.btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    transition: var(--transition-smooth);
    pointer-events: none;
}
.btn:hover::after {
    left: 120%;
}
.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 28px rgba(13, 31, 107, 0.35);
}
.btn:active {
    transform: translateY(-1px) scale(0.99);
}
.btn-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, #ff8c38 100%);
    box-shadow: 0 8px 24px rgba(255, 122, 26, 0.35);
}
.btn-secondary:hover {
    box-shadow: 0 14px 28px rgba(255, 122, 26, 0.45);
}
.btn-outline {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    box-shadow: none;
}
.btn-outline:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}
.btn-file {
    background: var(--bg-light);
    color: var(--text-dark);
    border: 2px dashed #cbd5e1;
    box-shadow: none;
    padding: 12px 24px;
}
.btn-file:hover {
    border-color: var(--secondary);
    background: var(--white);
    transform: none;
    box-shadow: none;
}
.btn-file::after {
    display: none;
}

/* O header atual é definido na seção “HEADER RAPIX V37” abaixo. */

/* ===== HERO ===== */
.hero {
    position: relative;
    width: 100%;
    /* Altura fluida (sem saltos): escala continuamente com a largura da
       tela, entre 450px e 650px. Antes havia 5 valores fixos diferentes
       por breakpoint, o que fazia a imagem de fundo (background-size:
       cover) recortar/ampliar de forma diferente a cada salto — dando a
       impressão de que ela "mudava de tamanho" ao redimensionar/dar zoom. */
    min-height: clamp(450px, 380px + 19vw, 650px);
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
    background-image: linear-gradient(100deg, rgba(7, 18, 66, 0.95) 0%, rgba(7, 18, 66, 0.88) 32%, rgba(7, 18, 66, 0.4) 54%, rgba(7, 18, 66, 0) 72%), url('../imagens/garoto-tablet.jpg');
    background-size: cover, cover;
    background-position: right center, right center;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--primary-dark);
    padding: clamp(20px, 9px + 3vw, 50px) 0 clamp(32px, 22px + 3vw, 60px);
}

#fiberCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.2;
    pointer-events: none;
}

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

.hero-layout {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.hero-content {
    max-width: 640px;
    padding: 0;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.hero-content h1 span {
    color: var(--secondary);
    background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.92);
    max-width: 100%;
    margin: 0 0 36px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-actions {
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ===== LINHA DE URGÊNCIA ===== */
.hero-urgency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    background: rgba(255, 109, 1, 0.16);
    border: 1px solid rgba(255, 143, 45, 0.5);
    color: #ffce9c;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: none;
}
.hero-urgency i {
    color: var(--accent);
}

/* ===== MINI-VERIFICADOR DE CEP DO HERO ===== */
.hero-cep-check {
    margin: 0;
    padding: 0;
}
.hero-cep-inputwrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.hero-cep-inputwrap input {
    flex: 1;
    min-width: 160px;
    padding: 13px 18px;
    border-radius: 50px;
    border: 2px solid #e2e8f0;
    background: var(--bg-light);
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--text-dark);
    outline: none;
    transition: var(--transition-fast);
}
.hero-cep-inputwrap input::placeholder {
    color: #a0aec0;
}
.hero-cep-inputwrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13, 31, 107, 0.08);
    background: var(--white);
}
.hero-cep-btn {
    min-height: 0;
    padding: 12px 22px;
    white-space: nowrap;
}

.hero-cep-result {
    display: none;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
}
.hero-cep-result.show {
    display: block;
}
.hero-cep-result p {
    margin: 0 0 10px;
    line-height: 1.45;
}
.hero-cep-result .resultado-cep-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hero-cep-result .resultado-cep-actions .btn {
    min-height: 0;
    padding: 9px 16px;
    font-size: 0.8rem;
}
.hero-cep-result .btn-whatsapp-cep {
    background: #16a34a;
    box-shadow: none;
}

/* Modal de verificação de CEP: reaproveita o sistema .modal-overlay,
   só um pouco mais compacto por ter bem menos conteúdo. */
.modal-container-cep {
    max-width: 460px;
}
.modal-container-cep .modal-header {
    margin-bottom: 20px;
}

/* ===== RESPONSIVIDADE DO HERO ===== */

@media (max-width: 768px) {
    .hero {
        background-image: linear-gradient(180deg, rgba(7, 18, 66, 0.88) 0%, rgba(7, 18, 66, 0.80) 100%), url('../imagens/garoto-tablet.jpg');
        background-position: center center !important;
        background-size: cover, cover;
        align-items: center;
    }
    
    .hero-content {
        max-width: 100%;
        padding: 0 15px;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: clamp(1.8rem, 4.5vw, 2.4rem);
        margin-bottom: 16px;
    }
    
    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: 28px;
        padding: 0 10px;
    }
    
    .hero-actions {
        justify-content: center !important;
        gap: 14px;
    }
    
    .hero-actions .btn {
        padding: 14px 28px;
        font-size: 0.9rem;
        min-width: 170px;
    }

    .hero-urgency {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cep-inputwrap {
        flex-direction: column;
    }

    .hero-cep-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .hero-content h1 {
        font-size: clamp(1.6rem, 4vw, 2rem);
        margin-bottom: 12px;
    }
    
    .hero-content p {
        font-size: 0.9rem;
        margin-bottom: 24px;
        padding: 0 5px;
    }
    
    .hero-actions {
        gap: 12px;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
        padding: 13px 20px;
        font-size: 0.88rem;
        justify-content: center;
    }
    
    .hero-actions .btn-outline {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(4px);
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: clamp(1.4rem, 3.8vw, 1.7rem);
        margin-bottom: 10px;
    }
    
    .hero-content p {
        font-size: 0.85rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    
    .hero-actions {
        gap: 10px;
    }
    
    .hero-actions .btn {
        max-width: 260px;
        padding: 12px 18px;
        font-size: 0.82rem;
        min-height: 44px;
    }
}

@media (max-width: 390px) {
    .hero-content {
        padding: 0 10px;
    }
    
    .hero-content h1 {
        font-size: 1.25rem;
        margin-bottom: 8px;
        letter-spacing: -0.3px;
    }
    
    .hero-content p {
        font-size: 0.78rem;
        margin-bottom: 18px;
        line-height: 1.4;
        padding: 0 5px;
    }
    
    .hero-actions {
        gap: 8px;
    }
    
    .hero-actions .btn {
        max-width: 220px;
        padding: 10px 14px;
        font-size: 0.75rem;
        min-height: 38px;
        gap: 6px;
    }
    
    .hero-actions .btn i {
        font-size: 0.75rem;
    }
}
/* ===== PERSON SHOWCASE / BANNER CAROUSEL ===== */
.person-showcase {
    background: linear-gradient(180deg, var(--primary-dark) 0%, #081746 100%);
    color: var(--white);
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}
.person-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 24%, rgba(255, 110, 34, 0.18), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(59, 123, 255, 0.18), transparent 24%),
        radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.05), transparent 30%);
    pointer-events: none;
}
.person-showcase .container {
    position: relative;
    z-index: 1;
}
.showcase-carousel {
    position: relative;
}
.showcase-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.showcase-viewport::-webkit-scrollbar { display: none; }
.showcase-track {
    display: flex;
    gap: 20px;
    width: max-content;
    min-width: 100%;
}
.showcase-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;
}

/* ===== FAIXA DE NÚMEROS ===== */
.stats-strip {
    background: var(--bg-light);
    padding: 36px 0;
    border-bottom: 1px solid #e2e8f0;
}
.stats-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.stats-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 20px;
    border-right: 1px solid #e2e8f0;
}
.stats-strip-item:last-child {
    border-right: none;
}
.stats-strip-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
.stats-strip-label {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (max-width: 640px) {
    .stats-strip {
        padding: 28px 0;
    }
    .stats-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 22px;
    }
    .stats-strip-item {
        padding: 0 10px;
    }
    .stats-strip-item:nth-child(2n) {
        border-right: none;
    }
    .stats-strip-item:nth-child(1),
    .stats-strip-item:nth-child(2) {
        padding-bottom: 22px;
        border-bottom: 1px solid #e2e8f0;
    }
    .stats-strip-number {
        font-size: 1.7rem;
    }
    .stats-strip-label {
        font-size: 0.72rem;
    }
}

/* ===== PLANOS / OFERTAS ===== */
.planos-ofertas {
    padding: 104px 0 110px;
    background:
        radial-gradient(circle at 14% 12%, rgba(38, 91, 255, 0.07), transparent 28%),
        radial-gradient(circle at 88% 85%, rgba(255, 83, 17, 0.07), transparent 24%),
        #f8fafc;
    overflow: hidden;
}
.ofertas-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}
.ofertas-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 8px;
}
.ofertas-title {
    font-size: clamp(2.45rem, 4vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 800;
    color: #071443;
    margin: 0 0 13px;
}
.ofertas-subtitle {
    max-width: 790px;
    color: #59647a;
    font-size: 1rem;
    line-height: 1.7;
}
.ofertas-tabbar {
    border-bottom: 1px solid #dce1ea;
    margin-bottom: 34px;
}
.ofertas-tab {
    position: relative;
    display: inline-flex;
    padding: 0 22px 14px;
    color: #0a1946;
    font-size: 0.95rem;
    font-weight: 800;
}
.ofertas-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    border-radius: 99px 99px 0 0;
    background: linear-gradient(90deg, #ff4b0b, #ff7a1a);
}
.planos-grid.ofertas-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.oferta-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2e6ed;
    overflow: visible;
    box-shadow: 0 10px 28px rgba(8, 25, 70, 0.09);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
    min-width: 0;
}
.oferta-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 86, 20, 0.32);
    box-shadow: 0 22px 48px rgba(8, 25, 70, 0.15);
}
.oferta-card.oferta-destaque {
    border-color: rgba(255, 86, 20, 0.45);
}
.oferta-badge {
    position: absolute;
    left: 0;
    top: -14px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 6px 14px;
    border-radius: 11px 11px 11px 0;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 7px 15px rgba(9, 20, 54, .18);
}
.oferta-badge-orange { background: linear-gradient(100deg, #ff7317, #ff4c0d); }
.oferta-badge-blue { background: linear-gradient(100deg, #3979ff, #164eea); }
.oferta-badge-demo { background: repeating-linear-gradient(135deg, #6b7386, #6b7386 8px, #5b6377 8px, #5b6377 16px); }
.oferta-badge-tv { background: linear-gradient(100deg, #7b2ff7, #b026ff); }

/* Empilha dois selos (ex.: MAIS VENDIDO + COM RAPIX TV) no mesmo card. */
.oferta-badges-stack {
    position: absolute;
    left: 0;
    top: -14px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.oferta-badges-stack .oferta-badge {
    position: static;
}
.oferta-visual {
    position: relative;
    min-height: 244px;
    padding: 25px 22px 20px;
    color: #fff;
    overflow: hidden;
    border-radius: 17px 17px 0 0;
    background:
        radial-gradient(circle at 88% 52%, rgba(24, 111, 255, .30), transparent 28%),
        linear-gradient(145deg, #061339 0%, #071747 55%, #04102f 100%);
    isolation: isolate;
}
.oferta-visual::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(255, 91, 15, .12), transparent 70%);
    border-radius: 50%;
}
/* Variante com foto de produto: por padrão mostra o mesmo gradiente escuro
   do card comum. Para usar uma foto real, defina background-image
   diretamente no elemento via style inline (ver index.html) — assim a URL
   resolve certinho em relação à página, e não à folha de estilo. */
.oferta-visual-photo {
    background-image:
        linear-gradient(180deg, rgba(6, 12, 26, .30) 0%, rgba(4, 8, 18, .82) 100%),
        linear-gradient(145deg, #061339 0%, #071747 55%, #04102f 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.oferta-brand {
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.05em;
    text-transform: lowercase;
    margin-bottom: 4px;
}
.oferta-brand span { color: #ff5b15; margin-left: 1px; }
.oferta-tier {
    color: #ff6018;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 5px;
}
.oferta-speed {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: max-content;
    line-height: .84;
    text-shadow: 0 3px 16px rgba(0,0,0,.25);
}
.oferta-speed strong {
    font-size: clamp(3.15rem, 4vw, 4.2rem);
    letter-spacing: -.065em;
    font-weight: 800;
}
.oferta-speed span {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.035em;
}
.oferta-chip {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 3px 13px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    font-size: .66rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .01em;
    background: rgba(2, 10, 38, .20);
    backdrop-filter: blur(5px);
}
.oferta-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 20px 17px;
}
.oferta-price-label {
    color: #17203a;
    font-size: .76rem;
    font-weight: 600;
    margin-bottom: 1px;
}
.oferta-price {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    color: #07143d;
    line-height: 1;
    margin-bottom: 15px;
    white-space: nowrap;
}
.oferta-price small {
    font-size: 1rem;
    font-weight: 800;
    padding-bottom: 5px;
}
.oferta-price strong {
    font-size: 2.18rem;
    letter-spacing: -.055em;
    font-weight: 800;
}
.oferta-price span {
    font-size: .72rem;
    font-weight: 700;
    padding-bottom: 5px;
}
.oferta-divider { height: 1px; background: #e5e9ef; margin-bottom: 12px; }
.oferta-products-title {
    color: #111b36;
    font-size: .74rem;
    font-weight: 800;
    margin-bottom: 9px;
}
.oferta-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 54px;
    margin-bottom: 17px;
}
.oferta-products-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oferta-products-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.produto-mini-tv i { background: linear-gradient(145deg, #5b0fc9, #9526f0); }
.produto-mini {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1f2a45;
}
.produto-mini i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, #071344, #102879);
    font-size: .9rem;
    box-shadow: 0 6px 13px rgba(8, 28, 92, .14);
}
.produto-mini b {
    min-width: 0;
    font-size: .7rem;
    line-height: 1.2;
    font-weight: 700;
}
/* Variante com mini-logo "rapix" acima do ícone, dentro do mesmo quadrado escuro */
.produto-mini-v2 i {
    position: relative;
    padding-top: 10px;
}
.produto-mini-v2 i::before {
    content: 'rapix';
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .34rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .6);
    text-transform: lowercase;
}
/* Preço em duas cores (parte inteira em azul vivo, centavos em azul-marinho) */
.oferta-price-v2 strong { color: #2f6bff; }
.oferta-price-v2 b {
    font-size: 2.18rem;
    letter-spacing: -.055em;
    font-weight: 800;
    color: #07143d;
}
.oferta-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oferta-card .btn { width: 100%; }
.oferta-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(100deg, #ff3f05, #ff6510);
    box-shadow: 0 9px 19px rgba(255, 73, 6, .18);
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.oferta-btn-primary:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 12px 24px rgba(255, 73, 6, .24);
}
.oferta-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    border: 1.5px solid #ff4d0a;
    border-radius: 10px;
    color: #ff4d0a;
    background: #fff;
    font-size: .75rem;
    font-weight: 800;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.oferta-btn-whatsapp:hover { background: #fff6f1; transform: translateY(-1px); }
.oferta-btn-whatsapp i { font-size: 1.06rem; }
.oferta-btn-whatsapp.oferta-demo-disabled {
    border-color: #ccd1db;
    font-family: inherit;
    opacity: 1;
    color: #7a8296;
    background: #f3f4f7;
    cursor: not-allowed;
    pointer-events: none;
}
.oferta-btn-whatsapp.oferta-demo-disabled:hover { background: #f3f4f7; transform: none; }
.oferta-btn-primary.oferta-demo-primary {
    background: #aeb4c2;
    border-color: #aeb4c2;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}
.oferta-btn-primary.oferta-demo-primary:hover { background: #aeb4c2; transform: none; }
.oferta-details-btn {
    min-height: 34px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #ff4d0a;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}
.oferta-details-btn i { margin-left: 5px; transition: transform .2s ease; }
.oferta-details-btn:hover i { transform: rotate(90deg); }
.ofertas-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 820px;
    margin: 24px auto 0;
    text-align: center;
    color: #6b7488;
    font-size: .76rem;
}
.ofertas-note i { color: #ff6b17; margin-top: 3px; }

/* ===== ECOSSISTEMA RAPIX + DIFERENCIAIS ===== */
.rapix-ecosystem {
    position: relative;
    overflow: hidden;
    padding: 104px 0 112px;
    background: #fff;
}
.rapix-ecosystem::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -330px;
    top: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 23, .12), rgba(255, 107, 23, 0) 68%);
    pointer-events: none;
}
.ecosystem-intro {
    max-width: 820px;
    margin-bottom: 42px;
}
.ecosystem-kicker,
.company-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--secondary);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.ecosystem-intro h2,
.why-rapix-content > h2 {
    color: var(--text-dark);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin-bottom: 16px;
}
.ecosystem-intro p,
.why-rapix-lead {
    max-width: 720px;
    color: var(--text-gray);
    font-size: 1.05rem;
    line-height: 1.7;
}
.ecosystem-services {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: start;
    gap: 22px;
}
.ecosystem-service-card {
    position: relative;
    min-height: 260px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(145deg, #061339 0%, #071747 55%, #04102f 100%);
    box-shadow: 0 18px 55px rgba(8, 22, 52, .18);
}
.ecosystem-service-digital::after,
.ecosystem-service-mobile::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    right: -110px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(255, 107, 23, .16), rgba(255, 107, 23, 0) 70%);
    pointer-events: none;
}
.ecosystem-service-head {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 16px;
}
.ecosystem-service-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    font-size: 1.25rem;
    background: var(--secondary);
    box-shadow: 0 10px 28px rgba(255, 107, 23, .26);
}
.ecosystem-service-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.55rem;
    line-height: 1.15;
}
.ecosystem-service-description {
    max-width: 610px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .72);
    font-size: .96rem;
    line-height: 1.6;
}
.ecosystem-products {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ecosystem-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    transition: border-color .3s ease, background .3s ease;
}
.ecosystem-product i { color: var(--secondary); font-size: .95rem; }
.ecosystem-product:hover {
    border-color: rgba(255, 107, 23, .5);
    background: rgba(255, 255, 255, .1);
}
.mobile-feature-stage {
    display: grid;
    grid-template-columns: 145px 1fr;
    align-items: center;
    gap: 20px;
    margin-top: 6px;
}
.mobile-phone {
    width: 124px;
    height: 218px;
    padding: 8px;
    margin-inline: auto;
    border-radius: 28px;
    background: #030b19;
    border: 2px solid rgba(255,255,255,.25);
    box-shadow: 0 24px 50px rgba(0,0,0,.35);
    transform: rotate(-5deg);
}
.mobile-phone-screen {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: radial-gradient(circle at 30% 20%, rgba(255,107,23,.58), transparent 34%), linear-gradient(155deg, #153d7b, #081832 72%);
}
.mobile-phone-screen::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}
.mobile-phone-speaker {
    position: absolute;
    z-index: 2;
    width: 42px;
    height: 5px;
    margin: 7px 0 0 33px;
    border-radius: 10px;
    background: #162235;
}
.mobile-5g {
    position: relative;
    z-index: 2;
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -.06em;
}
.mobile-signal { position: relative; z-index: 2; margin-top: 2px; color: var(--secondary); }
.mobile-brand { position: relative; z-index: 2; margin-top: 36px; font-size: .65rem; font-weight: 800; letter-spacing: .16em; opacity: .7; }
.mobile-benefits { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.mobile-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    font-size: .88rem;
    font-weight: 700;
    transition: border-color .3s ease, background .3s ease;
}
.mobile-benefits span:hover {
    border-color: rgba(255, 107, 23, .5);
    background: rgba(255, 255, 255, .1);
}
.mobile-benefits i { color: var(--secondary); font-size: .95rem; }
.ecosystem-coming {
    margin-top: 20px;
    color: rgba(255,255,255,.62);
    font-size: .74rem;
}
.ecosystem-coming i { margin-right: 5px; color: var(--secondary); }
.ecosystem-divider {
    width: 100%;
    height: 1px;
    margin: 74px 0;
    background: linear-gradient(90deg, transparent, #dfe5ee 15%, #dfe5ee 85%, transparent);
}
.why-rapix {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 64px;
    align-items: center;
}
.why-rapix-visual {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.why-rapix-image-wrap {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    height: 480px;
    overflow: hidden;
    border-radius: 48% 48% 42% 42% / 40% 40% 52% 52%;
    background: radial-gradient(circle at 50% 42%, #fff 0 13%, #edf4ff 40%, #dce9fb 72%);
    box-shadow: 0 28px 70px rgba(7, 29, 70, .13);
}
.why-rapix-image-wrap::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    background: linear-gradient(to top, rgba(8, 31, 73, .1), transparent);
    pointer-events: none;
}
.why-rapix-image-wrap img {
    width: 100%;
    height: 110%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(2%);
}
.why-rapix-orbit {
    position: absolute;
    z-index: 1;
    border: 2px solid rgba(255, 107, 23, .18);
    border-radius: 50%;
}
.why-rapix-orbit-one { width: 470px; height: 470px; }
.why-rapix-orbit-two { width: 365px; height: 365px; border-color: rgba(13, 50, 105, .12); }
.why-rapix-content > h2 { margin-bottom: 13px; }
.why-rapix-lead { margin-bottom: 28px; }
.why-rapix-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.why-card {
    min-height: 196px;
    padding: 24px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.why-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,107,23,.42);
    box-shadow: 0 16px 38px rgba(8, 22, 52, .08);
}
.why-card-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 13px;
    color: var(--secondary);
    background: #fff3ec;
}
.why-card h3 {
    margin-bottom: 8px;
    color: var(--text-dark);
    font-size: 1rem;
}
.why-card p {
    color: var(--text-gray);
    font-size: .82rem;
    line-height: 1.55;
}

/* ===== PÁGINA A EMPRESA ===== */
.company-page { background: #fff; }
.company-hero {
    padding: 92px 0 82px;
    background: linear-gradient(135deg, #071633, #0d2c5e);
    color: #fff;
}
.company-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 60px;
    align-items: center;
}
.company-hero-copy h1 {
    max-width: 760px;
    margin-bottom: 20px;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.company-hero-copy > p { max-width: 680px; color: rgba(255,255,255,.74); font-size: 1.08rem; line-height: 1.7; }
.company-hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.company-text-link { color: #fff; font-weight: 700; }
.company-text-link i { margin-left: 6px; color: var(--secondary); }
.company-hero-card {
    padding: 34px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
}
.company-hero-card > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 16px; background: var(--secondary); font-size: 1.25rem; }
.company-hero-card strong { display: block; margin-bottom: 8px; font-size: 1.65rem; }
.company-hero-card p { color: rgba(255,255,255,.7); line-height: 1.6; }
.company-story { padding: 100px 0; }
.company-story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.company-story-copy h2, .company-pillars-head h2 { margin-bottom: 22px; color: var(--text-dark); font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.1; letter-spacing: -.035em; }
.company-story-copy p { margin-bottom: 16px; color: var(--text-gray); line-height: 1.75; }
.company-values { display: grid; gap: 14px; }
.company-value { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px; border: 1px solid #e4e9f0; border-radius: 18px; background: #f8fafc; }
.company-value > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--secondary); background: #fff3ec; }
.company-value h3 { margin-bottom: 5px; font-size: 1rem; }
.company-value p { color: var(--text-gray); font-size: .86rem; line-height: 1.55; }
.company-pillars { padding: 92px 0 104px; background: #f7f9fc; }
.company-pillars-head { max-width: 720px; margin-bottom: 36px; }
.company-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.company-pillar { padding: 30px; border: 1px solid #e1e7ef; border-radius: 22px; background: #fff; }
.company-pillar i { margin-bottom: 18px; color: var(--secondary); font-size: 1.45rem; }
.company-pillar h3 { margin-bottom: 8px; }
.company-pillar p { color: var(--text-gray); line-height: 1.6; font-size: .9rem; }

/* ===== FAQ ===== */
.faq {
    padding: 100px 0;
    background: var(--white);
}
.faq .section-title,
.faq .section-subtitle {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.faq .section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 14px;
}
.faq .section-subtitle {
    color: var(--text-gray);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 48px;
}
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.faq-item {
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: var(--transition-fast);
}
.faq-pergunta {
    padding: 22px 28px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
}
.faq-pergunta i {
    color: var(--secondary);
    transition: transform 0.3s ease;
}
.faq-resposta {
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    color: var(--text-gray);
    font-size: 1rem;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active {
    border-color: var(--secondary);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.faq-item.active .faq-pergunta i {
    transform: rotate(180deg);
}
.faq-item.active .faq-resposta {
    max-height: 600px;
    padding: 0 28px 24px;
}

/* ===== CONTATO ===== */
.contato {
    padding: 100px 0;
    background: var(--bg-light);
}
.contato-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}
.contato-form {
    background: var(--white);
    padding: 32px 36px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contato-form input,
.contato-form textarea,
.contato-form select {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid #cbd5e1;
    font-family: var(--font);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-fast);
    background: var(--white);
    color: var(--text-dark);
}
.contato-form input:focus,
.contato-form textarea:focus,
.contato-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13, 31, 107, 0.1);
}
.contato-form input.error,
.contato-form select.error {
    border-color: var(--danger);
    background: #fef2f2;
}
.contato-form input.success,
.contato-form select.success {
    border-color: var(--success);
    background: #f0fdf4;
}
.contato-form .error-message {
    font-size: 0.75rem;
    color: var(--danger);
    font-weight: 600;
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: var(--transition-fast);
}
.contato-form .error-message.show {
    opacity: 1;
    transform: translateY(0);
}
.contato-form .error-message i {
    font-size: 0.65rem;
}
.contato-form textarea {
    resize: vertical;
    min-height: 100px;
}
.contato-form .file-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--bg-light);
}
.contato-form .file-upload-area:hover {
    border-color: var(--secondary);
    background: var(--white);
}
.contato-form .file-upload-area.dragover {
    border-color: var(--secondary);
    background: rgba(255, 122, 26, 0.05);
}
.contato-form .file-upload-area .file-icon {
    font-size: 1.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.contato-form .file-upload-area .file-text {
    color: var(--text-gray);
    font-size: 0.85rem;
}
.contato-form .file-upload-area .file-text strong {
    color: var(--secondary);
}
.contato-form .file-upload-area .file-text br {
    display: none;
}
.contato-form .file-upload-area .file-text small {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
}
.contato-form .file-info {
    display: none;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
    color: #166534;
    font-weight: 600;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}
.contato-form .file-info.show {
    display: flex;
}
.contato-form .file-info .file-remove {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
}
.contato-form .file-info .file-remove:hover {
    color: #b91c1c;
}
.form-msg {
    display: none;
    color: #16a34a;
    font-weight: 700;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.form-msg.show {
    display: flex;
}
.form-msg.error-msg {
    color: var(--danger);
}
.contato-form .btn {
    padding: 14px 28px;
    font-size: 0.95rem;
}

/* ===== TRABALHE CONOSCO ===== */
.trabalhe-conosco-section {
    padding: 0;
    border-top: none !important;
    margin-top: 0 !important;
}

.trabalhe-conosco-section .titulo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.trabalhe-conosco-section .titulo i {
    color: var(--secondary);
    font-size: 1.6rem;
}

.trabalhe-conosco-section .descricao {
    font-size: 1.05rem;
    color: var(--text-gray);
    margin-bottom: 20px;
    line-height: 1.7;
}

.trabalhe-conosco-section .destaque-box {
    background: linear-gradient(135deg, #f0f7ff 0%, #f8f0e8 100%);
    border-left: 4px solid var(--secondary);
    padding: 20px 24px;
    border-radius: var(--radius-sm);
    margin: 24px 0 20px;
}

.trabalhe-conosco-section .destaque-box p {
    margin-bottom: 4px;
    font-size: 0.95rem;
    color: var(--text-gray);
}

.trabalhe-conosco-section .destaque-box strong {
    color: var(--primary);
}

.trabalhe-conosco-section .beneficios {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.trabalhe-conosco-section .beneficio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-gray);
    padding: 6px 0;
}

.trabalhe-conosco-section .beneficio-item i {
    color: var(--success);
    font-size: 1.1rem;
    width: 22px;
    flex-shrink: 0;
}

/* ===== MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 18, 66, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: modalOverlayIn 0.3s ease;
}

@keyframes modalOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-overlay.open {
    display: flex;
}

.modal-overlay.closing {
    animation: modalOverlayOut 0.3s ease forwards;
}

@keyframes modalOverlayOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.modal-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 580px;
    width: 100%;
    max-height: 94vh;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.closing .modal-container {
    animation: modalOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
}

.modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary), var(--accent), var(--secondary));
    background-size: 200% 100%;
    animation: shimmerBar 3s ease-in-out infinite;
    z-index: 5;
}

@keyframes shimmerBar {
    0%,
    100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
}

.modal-scroll {
    max-height: 94vh;
    overflow-y: auto;
    padding: 32px 34px 28px;
}

.modal-scroll::-webkit-scrollbar {
    width: 4px;
}
.modal-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.modal-scroll::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 10px;
}

.modal-close {
    position: sticky;
    top: 12px;
    float: right;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    margin-bottom: -38px;
}

.modal-close:hover {
    background: var(--secondary);
    color: var(--white);
    transform: rotate(90deg);
}

.modal-header {
    text-align: center;
    margin-bottom: 24px;
    padding-top: 8px;
}

.modal-header .modal-plano-badge {
    display: inline-block;
    background: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 4px 16px;
    border-radius: 50px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
}

.modal-header .modal-plano-badge.premium-badge {
    background: linear-gradient(90deg, var(--secondary), var(--accent));
    color: var(--white);
    border: none;
}

.modal-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-dark);
}

.modal-header h2 span {
    color: var(--secondary);
}

.modal-header .modal-preco {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin-top: 2px;
}

.modal-header .modal-preco small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-gray);
}

.modal-helper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 520px;
    margin: 9px auto 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
}
.modal-helper i {
    margin-top: 2px;
    color: var(--secondary);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.form-group label .required {
    color: var(--secondary);
}

.form-group input,
.form-group select {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 2px solid #e2e8f0;
    font-family: var(--font);
    font-size: 0.95rem;
    transition: var(--transition-fast);
    outline: none;
    background: var(--bg-light);
    width: 100%;
    color: var(--text-dark);
}

.form-group input::placeholder {
    color: #a0aec0;
    font-size: 0.85rem;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13, 31, 107, 0.08);
    background: var(--white);
}

.form-group input.error,
.form-group select.error {
    border-color: var(--danger);
    background: #fef2f2;
}

.form-group input.error:focus,
.form-group select.error:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.form-group input.success,
.form-group select.success {
    border-color: var(--success);
    background: #f0fdf4;
}

.form-group .error-message {
    font-size: 0.78rem;
    color: var(--danger);
    font-weight: 600;
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: var(--transition-fast);
}

.form-group .error-message.show {
    opacity: 1;
    transform: translateY(0);
}

.form-group .error-message i {
    font-size: 0.7rem;
}

.modal-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
    animation: successIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-success.show {
    display: block;
}

@keyframes successIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-success .success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2.4rem;
    color: var(--white);
    box-shadow: 0 12px 32px rgba(22, 163, 74, 0.3);
}

.modal-success h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.modal-success p {
    color: var(--text-gray);
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto 24px;
}

.modal-success .btn {
    min-width: 160px;
}

.modal-error {
    display: none;
    text-align: center;
    padding: 40px 20px;
    animation: errorIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-error.show {
    display: block;
}

@keyframes errorIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-error .error-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2.4rem;
    color: var(--white);
    box-shadow: 0 12px 32px rgba(220, 38, 38, 0.3);
}

.modal-error h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.modal-error p {
    color: var(--text-gray);
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto 24px;
}

.modal-error .btn {
    min-width: 160px;
}

.modal-submit {
    width: 100%;
    margin-top: 6px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 50px;
    transition: var(--transition-smooth);
}

.modal-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.modal-submit .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ===== MODAL DE DETALHES DA OFERTA ===== */
.offer-details-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10020;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 15, 42, .76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.offer-details-overlay.open { display: flex; animation: modalOverlayIn .25s ease; }
.offer-details-container {
    position: relative;
    width: min(760px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    animation: modalIn .35s cubic-bezier(.16,1,.3,1);
}
.offer-details-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 1px solid #d9dee8;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #697386;
    cursor: pointer;
    transition: .2s ease;
}
.offer-details-close:hover { color: #fff; background: #ff5a13; border-color: #ff5a13; transform: rotate(90deg); }
.offer-details-head { padding: 28px 64px 18px 30px; border-bottom: 1px solid #e7eaf0; }
.offer-details-eyebrow { color: #667086; font-size: .78rem; font-weight: 700; }
.offer-details-head h2 { margin: 3px 0 4px; color: #07143d; font-size: 1.65rem; font-weight: 800; letter-spacing: -.035em; }
.offer-details-head p { color: #6d7585; font-size: .86rem; }
.offer-details-main { padding: 24px 30px 20px; }
.offer-details-summary {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) 1.2fr;
    gap: 8px 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e4e8ef;
}
.offer-details-plan {
    align-self: end;
    width: max-content;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(100deg, #ff5f16, #ff3e08);
    font-size: .72rem;
    font-weight: 800;
}
.offer-details-plan.demo-badge {
    background: repeating-linear-gradient(135deg, #6b7386, #6b7386 8px, #5b6377 8px, #5b6377 16px);
}
.offer-details-speed {
    grid-column: 1;
    color: #0a1b55;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.05em;
}
.offer-details-specs {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    align-content: center;
}
.offer-spec {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f687b;
    font-size: .76rem;
    line-height: 1.3;
}
.offer-spec i { width: 18px; color: #0c1e61; text-align: center; }
.offer-details-products-wrap { padding: 18px 0 20px; border-bottom: 1px solid #e4e8ef; }
.offer-details-products-wrap h3 { color: #27314a; font-size: .86rem; font-weight: 800; margin-bottom: 10px; }
.offer-details-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.offer-detail-product { display: flex; align-items: center; gap: 9px; min-width: 0; }
.offer-detail-product i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #0d1f6b;
}
.offer-detail-product span { color: #283147; font-size: .75rem; line-height: 1.25; font-weight: 700; }
.offer-details-disclaimer { padding-top: 16px; }
.offer-details-disclaimer strong { display: block; color: #657087; font-size: .7rem; margin-bottom: 3px; }
.offer-details-disclaimer p { color: #777f8f; font-size: .68rem; line-height: 1.45; }
.offer-details-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr minmax(220px, 255px);
    gap: 20px;
    align-items: center;
    padding: 18px 30px;
    background: #f2f4f8;
    border-top: 1px solid #e5e8ee;
}
.offer-details-price span { display: block; color: #5d6575; font-size: .7rem; font-weight: 700; }
.offer-details-price strong { color: #07143d; font-size: 1.9rem; line-height: 1; letter-spacing: -.045em; }
.offer-details-price strong small { font-size: .75rem; font-weight: 700; letter-spacing: 0; }
.offer-details-footer .oferta-btn-primary { width: 100%; }

/* Pré-assinatura: identidade visual alinhada aos novos cards.
   Escopado a #modalContratacao para não vazar pra outros modais
   que reaproveitam as mesmas classes (ex.: #modalVerificarCep). */
#modalContratacao .modal-container { max-width: 650px; border-radius: 22px; }
#modalContratacao .modal-scroll { padding: 30px 36px 30px; }
#modalContratacao .modal-header {
    margin: -30px -36px 24px;
    padding: 27px 64px 22px 36px;
    text-align: left;
    background:
        radial-gradient(circle at 90% 25%, rgba(46, 112, 255, .22), transparent 35%),
        linear-gradient(140deg, #07133c, #0a1d5c);
    color: #fff;
}
#modalContratacao .modal-header .modal-plano-badge {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.10);
    color: #fff;
    margin-bottom: 7px;
}
#modalContratacao .modal-header .modal-plano-badge.premium-badge { background: linear-gradient(90deg, #ff6e17, #ff4809); }
#modalContratacao .modal-header .modal-plano-badge.blue-badge { background: linear-gradient(90deg, #3979ff, #164eea); border-color: transparent; }
#modalContratacao .modal-header .modal-plano-badge.demo-badge { background: repeating-linear-gradient(135deg, #6b7386, #6b7386 8px, #5b6377 8px, #5b6377 16px); border-color: transparent; }
#modalContratacao .modal-header h2 { color: #fff; font-size: 1.75rem; }
#modalContratacao .modal-header h2 span { color: #fff; }
#modalContratacao .modal-header .modal-preco { color: #fff; font-size: 2.25rem; }
#modalContratacao .modal-header .modal-preco small { color: rgba(255,255,255,.72); }
#modalContratacao .modal-helper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 520px;
    margin-top: 9px;
    color: rgba(255,255,255,.76);
    font-size: .72rem;
    line-height: 1.45;
}
#modalContratacao .modal-helper i { margin-top: 2px; color: #ff7a1a; }
#modalContratacao .modal-close { position: absolute; top: 18px; right: 18px; float: none; background: rgba(255,255,255,.12); color: #fff; }
#modalContratacao .modal-close:hover { background: #ff5a13; }
.modal-form .form-group label { text-transform: none; letter-spacing: 0; font-size: .75rem; }
.modal-form .form-group input,
.modal-form .form-group select { border-width: 1px; background: #f8fafc; }
.modal-submit { border-radius: 10px; background: linear-gradient(100deg, #ff3f05, #ff6510); }

/* ===== FOOTER ===== */
footer {
    background: var(--primary-dark);
    color: var(--white);
    padding: 60px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
footer .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}
footer .footer-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(13, 31, 107, 0.25));
}
footer .footer-links {
    display: flex;
    gap: 24px 32px;
    flex-wrap: wrap;
    justify-content: center;
}
footer .footer-links a {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    transition: color 0.3s ease;
}
footer .footer-links a:hover {
    color: var(--secondary);
}
footer .social {
    display: flex;
    gap: 20px;
    font-size: 1.5rem;
}
footer .social a {
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition-fast);
}
footer .social a:hover {
    color: var(--secondary);
    transform: translateY(-3px);
}
footer .copy {
    width: 100%;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== FLUTUANTES ===== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
    z-index: 990;
    transition: var(--transition-smooth);
}
.whatsapp-float:hover {
    transform: scale(1.1);
}
.whatsapp-float-balao {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(8px, -50%);
    background: var(--white);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.whatsapp-float:hover .whatsapp-float-balao,
.whatsapp-float:focus-visible .whatsapp-float-balao {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}
.whatsapp-float-balao::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--white);
}
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 48px;
    height: 48px;
    background: var(--white);
    color: var(--primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-md);
    z-index: 990;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: var(--transition-smooth);
}
.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--secondary);
    color: var(--white);
}

@media (max-width: 480px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        font-size: 1.5rem;
    }
    .whatsapp-float-balao {
        display: none;
    }
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left: 16px;
        font-size: 0.95rem;
    }
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 1024px) {
    .planos-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
    .plano-card.premium {
        transform: none;
    }
    .plano-card.premium:hover {
        transform: translateY(-8px);
    }
    .showcase-banner {
        grid-template-columns: 1fr;
        min-height: 0;
        text-align: center;
        padding: 30px 22px;
    }
    .showcase-banner-content {
        max-width: none;
    }
    .showcase-banner-actions,
    .showcase-chip-row,
    .showcase-speeds {
        justify-content: center;
    }
    .showcase-banner-visual {
        min-height: 280px;
    }
    .person-showcase-img {
        max-height: 360px;
    }
    .showcase-visual-card,
    .showcase-meter-card,
    .showcase-support-card,
    .showcase-device-stack {
        width: min(100%, 420px);
        margin-inline: auto;
    }
    .contato-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 980px) {
    .ecosystem-services, .why-rapix, .company-hero-grid, .company-story-grid { grid-template-columns: 1fr; }
    .why-rapix { gap: 34px; }
    .why-rapix-visual { min-height: 430px; order: 2; }
    .why-rapix-content { order: 1; }
    .why-rapix-image-wrap { height: 410px; }
    .company-pillars-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .rapix-ecosystem { padding: 72px 0 80px; }
    .ecosystem-intro { margin-bottom: 28px; }
    .ecosystem-service-card { min-height: 0; padding: 23px 18px; border-radius: 21px; }
    .ecosystem-products { gap: 8px; }
    .ecosystem-product { padding: 9px 14px; font-size: .82rem; }
    .mobile-feature-stage { grid-template-columns: 105px 1fr; gap: 12px; }
    .mobile-phone { width: 90px; height: 166px; border-radius: 22px; }
    .mobile-phone-speaker { width: 30px; margin-left: 23px; }
    .mobile-5g { font-size: 1.6rem; }
    .mobile-benefits { gap: 8px; }
    .mobile-benefits span { padding: 9px 14px; font-size: .82rem; }
    .ecosystem-divider { margin: 52px 0; }
    .why-rapix-grid { grid-template-columns: 1fr; }
    .why-card { min-height: 0; }
    .why-rapix-visual { min-height: 350px; }
    .why-rapix-image-wrap { width: 300px; height: 345px; }
    .why-rapix-orbit-one { width: 320px; height: 320px; }
    .why-rapix-orbit-two { width: 250px; height: 220px; }
    .company-hero { padding: 68px 0 60px; }
    .company-hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
    .company-story, .company-pillars { padding: 72px 0; }
}

@media (max-width: 1150px) {
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--primary-dark);
        flex-direction: column;
        padding: 30px 24px 40px;
        gap: 16px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        clip-path: circle(0% at 100% 0);
        transition: clip-path 0.5s ease-in-out;
        z-index: 999;
    }
    .nav-menu.open {
        clip-path: circle(140% at 100% 0);
    }
    .nav-menu a:not(.btn):not(.nav-link-outline) {
        font-size: 1rem;
    }
    .nav-link-outline {
        border: none;
        padding: 4px 0;
        font-size: 1rem;
    }
    .menu-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    .contato-form {
        padding: 24px 18px;
    }

    .modal-container {
        max-width: 100%;
        margin: 0 8px;
        border-radius: var(--radius-md);
    }

    .modal-scroll {
        padding: 24px 18px 20px;
    }

    .modal-header h2 {
        font-size: 1.4rem;
    }
    .modal-header .modal-preco {
        font-size: 1.8rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .modal-close {
        top: 8px;
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .form-group input,
    .form-group select {
        padding: 11px 12px;
        font-size: 0.9rem;
    }

    .modal-success .success-icon,
    .modal-error .error-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .contato-form .file-upload-area .file-text br {
        display: block;
    }

    /* TRABALHE CONOSCO - Responsivo */
    .trabalhe-conosco-section .titulo {
        font-size: 1.4rem;
    }
    .trabalhe-conosco-section .descricao {
        font-size: 0.95rem;
    }
    .trabalhe-conosco-section .destaque-box {
        padding: 16px 18px;
    }
    .trabalhe-conosco-section .beneficio-item {
        font-size: 0.9rem;
    }

    .logo-img {
        height: 44px;
    }
    header.scrolled .logo-img {
        height: 34px;
    }
}

@media (max-width: 480px) {
    .modal-scroll {
        padding: 18px 14px 16px;
    }
    .modal-header h2 {
        font-size: 1.2rem;
    }
    .modal-header .modal-preco {
        font-size: 1.5rem;
    }
    .form-group label {
        font-size: 0.7rem;
    }
    .modal-submit {
        padding: 14px;
        font-size: 0.9rem;
    }
    .modal-success h3,
    .modal-error h3 {
        font-size: 1.2rem;
    }
    .contato-form {
        padding: 18px 14px;
    }
    .contato-form .file-upload-area {
        padding: 14px 12px;
    }
    .contato-form .file-upload-area .file-icon {
        font-size: 1.4rem;
        margin-bottom: 4px;
    }
    .contato-form .file-upload-area .file-text {
        font-size: 0.8rem;
    }
    .contato-form .file-upload-area .file-text small {
        font-size: 0.65rem;
    }

    /* TRABALHE CONOSCO - Mobile */
    .trabalhe-conosco-section .titulo {
        font-size: 1.2rem;
    }
    .trabalhe-conosco-section .beneficio-item {
        font-size: 0.85rem;
    }
    .trabalhe-conosco-section .destaque-box p {
        font-size: 0.85rem;
    }

    .logo-img {
        height: 38px;
    }
    header.scrolled .logo-img {
        height: 30px;
    }
}

@media (max-width: 768px) and (max-height: 700px) {
    .modal-container {
        max-height: 98vh;
    }
    .modal-scroll {
        max-height: 98vh;
        padding: 16px 14px 12px;
    }
    .modal-header {
        margin-bottom: 14px;
    }
    .modal-header h2 {
        font-size: 1.1rem;
    }
    .modal-header .modal-preco {
        font-size: 1.3rem;
    }
    .form-group input,
    .form-group select {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    .modal-submit {
        padding: 12px;
        font-size: 0.85rem;
        margin-top: 4px;
    }
}


/* ===== RESPONSIVIDADE DAS NOVAS OFERTAS ===== */
@media (max-width: 1180px) {
    .oferta-visual { min-height: 258px; }
    .oferta-speed strong { font-size: 4.35rem; }
    .produto-mini b { font-size: .64rem; }
}
@media (max-width: 768px) {
    .planos-ofertas { padding: 76px 0 84px; }
    .ofertas-heading { margin-bottom: 22px; }
    .ofertas-title { font-size: clamp(2.05rem, 10vw, 2.7rem); }
    .ofertas-subtitle { font-size: .92rem; }
    .ofertas-tabbar { margin-bottom: 24px; }
    .oferta-card:hover { transform: none; }
    .oferta-visual { min-height: 238px; }
    .oferta-speed strong { font-size: 3.8rem; }
    .oferta-products-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ofertas-note { margin-top: 10px; font-size: .7rem; }
    .offer-details-container { border-radius: 16px; }
    .offer-details-head { padding: 24px 56px 15px 20px; }
    .offer-details-main { padding: 20px; }
    .offer-details-summary { grid-template-columns: 1fr; gap: 9px; }
    .offer-details-specs { grid-column: 1; grid-row: auto; margin-top: 8px; }
    .offer-details-products { grid-template-columns: 1fr 1fr; }
    .offer-details-footer { grid-template-columns: 1fr; gap: 12px; padding: 15px 20px; }
    .offer-details-footer .oferta-btn-primary { min-height: 45px; }
    .modal-scroll { padding: 22px 18px 20px; }
    .modal-header { margin: -22px -18px 20px; padding: 24px 58px 20px 20px; }
    .modal-header h2 { font-size: 1.35rem; }
    .modal-header .modal-preco { font-size: 1.85rem; }
}
@media (max-width: 420px) {
    .oferta-body { padding: 18px 16px 15px; }
    .oferta-visual { padding-left: 18px; }
    .oferta-chip { left: 18px; }
    .oferta-products { gap: 5px; }
    .produto-mini { gap: 4px; }
    .produto-mini i { flex-basis: 31px; width: 31px; height: 31px; }
    .produto-mini b { font-size: .52rem; }
    .offer-details-specs { grid-template-columns: 1fr; }
    .offer-details-products { grid-template-columns: 1fr; }
    /* Evita que "Melhores ofertas" fique cortado sem indicação de rolagem
       em telas muito estreitas (~320-340px). */
    .ofertas-tab { padding-left: 11px; padding-right: 11px; font-size: .87rem; }
}


/* ============================================================
   RAPIX v20 — abas + carrossel das ofertas
   Sem setas: navegação por arraste/toque e dots. O mouse wheel não move os cards.
   ============================================================ */
.ofertas-tabbar {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.ofertas-tab {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease, background .2s ease;
    border-radius: 9px 9px 0 0;
}
.ofertas-tab:hover { color: #ff5411; background: rgba(255, 85, 17, .045); }
.ofertas-tab:focus-visible { outline: 3px solid rgba(38, 91, 255, .2); outline-offset: 3px; }
.ofertas-tab:not(.active)::after { display: none; }
.ofertas-panel[hidden] { display: none !important; }
.ofertas-carousel { position: relative; }
.ofertas-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 18px;
    padding-bottom: 20px;
    cursor: default;
}
.ofertas-viewport::-webkit-scrollbar { display: none; }
.planos-grid.ofertas-grid.ofertas-track {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0 2px;
    overflow: visible;
}
.ofertas-track .oferta-card {
    flex: 0 0 calc((min(1200px, 100vw - 48px) - 54px) / 4);
    width: calc((min(1200px, 100vw - 48px) - 54px) / 4);
    max-width: none;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    justify-self: auto;
}
.ofertas-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 34px;
    margin-top: 2px;
}
.ofertas-dots { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 18px; }
.ofertas-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d6dbe5;
    cursor: pointer;
    transition: width .22s ease, background .22s ease, transform .22s ease;
}
.ofertas-dot:hover { transform: scale(1.2); background: #aeb7c8; }
.ofertas-dot.active { width: 22px; background: linear-gradient(90deg, #ff4b0b, #ff7a1a); }
.ofertas-dot:focus-visible { outline: 3px solid rgba(38, 91, 255, .22); outline-offset: 3px; }
.ofertas-counter { color: #536079; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.ofertas-counter strong { color: #0a1946; font-size: .95rem; }
.oferta-price-zone {
    display: grid;
    grid-template-rows: 18px auto auto 27px;
    align-content: start;
    min-height: 103px;
}
.oferta-price-old {
    min-height: 18px;
    color: #687188;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
}
.oferta-price-note {
    min-height: 27px;
    margin: -9px 0 10px;
    color: #778094;
    font-size: .58rem;
    line-height: 1.25;
}
.oferta-price-placeholder {
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}

/* Variações visuais dos cards individuais */
.oferta-visual-individual-giga { background: radial-gradient(circle at 88% 50%, rgba(255, 102, 16, .32), transparent 29%), linear-gradient(145deg, #07153f 0%, #091e5b 58%, #071238 100%); }
.oferta-visual-individual-700 { background: radial-gradient(circle at 88% 50%, rgba(59, 123, 255, .34), transparent 29%), linear-gradient(145deg, #07143d 0%, #0b225e 58%, #07143d 100%); }
.oferta-visual-individual-500 { background: radial-gradient(circle at 88% 50%, rgba(30, 189, 255, .27), transparent 29%), linear-gradient(145deg, #07143d 0%, #0b2b55 58%, #07143d 100%); }

@media (max-width: 1180px) {
    .planos-grid.ofertas-grid.ofertas-track { gap: 24px; }
    .ofertas-track .oferta-card { flex: 0 0 calc((100vw - 72px) / 2); width: calc((100vw - 72px) / 2); max-width: none; }
}
@media (max-width: 768px) {
    .ofertas-tabbar { gap: 0; overflow-x: auto; scrollbar-width: none; }
    .ofertas-tabbar::-webkit-scrollbar { display: none; }
    .ofertas-tab { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
    .ofertas-viewport { margin: 0 -24px; width: calc(100% + 48px); padding: 18px 24px 20px; }
    .planos-grid.ofertas-grid.ofertas-track { gap: 15px; min-width: max-content; padding: 0; }
    .ofertas-track .oferta-card { flex: 0 0 min(86vw, 350px); width: min(86vw, 350px); max-width: none; }
    .ofertas-carousel-footer { gap: 14px; margin-top: 0; }
}


/* ============================================================
   RAPIX v21 — reforço visual do carrossel + correção de cache
   ============================================================ */
#planos { scroll-margin-top: 92px; }

/* Mantém as duas categorias lado a lado e bem legíveis. */
.ofertas-tabbar {
    position: relative;
    z-index: 2;
}
.ofertas-tab {
    white-space: nowrap;
}

/* Dá uma pista visual inequívoca de que os cards continuam para o lado,
   sem reintroduzir as setas removidas a pedido. */
@media (min-width: 1181px) {
    #ofertas-nossas .ofertas-viewport {
        /* Respiro lateral no desktop: o primeiro card não encosta na borda visual. */
        padding-left: 18px;
        padding-right: 42px;
    }
    #ofertas-nossas .ofertas-track .oferta-card {
        flex-basis: 292px;
        width: 292px;
    }
}

/* RAPIX v36 — corrige lacuna de respiro lateral entre 769px e 1180px,
   faixa que ficava sem padding e deixava os cards colados na borda. */
@media (min-width: 769px) and (max-width: 1180px) {
    .planos-ofertas .ofertas-viewport {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* O contador/indicadores sempre ficam visíveis e destacados. */
.ofertas-carousel-footer {
    position: relative;
    z-index: 3;
}
.ofertas-counter {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(10, 25, 70, .05);
}

/* Evita que cards da seção fiquem invisíveis caso a animação de reveal
   não inicialize em uma visualização local/preview. */
.planos-ofertas .oferta-card.reveal,
.planos-ofertas .ofertas-heading.reveal,
.planos-ofertas .ofertas-tabbar.reveal,
.planos-ofertas .ofertas-note.reveal {
    opacity: 1;
    transform: none;
}


/* ============================================================
   RAPIX v22 — indicadores do carrossel de banners
   ============================================================ */
.showcase-carousel .ofertas-dots { min-height: 18px; }
.showcase-carousel .ofertas-dot { background: rgba(255, 255, 255, 0.26); }
.showcase-carousel .ofertas-dot:hover { background: rgba(255, 255, 255, 0.42); }
.showcase-carousel .ofertas-dot.active { background: linear-gradient(90deg, #ff6416, #ff8f1b); }

/* ============================================================
   RAPIX v29 — carrossel de banners definitivo / responsivo
   Desktop: 1600x620 (2.58:1), limitado a 1600px para não ficar gigante.
   Tablet: mesma proporção do desktop, sem cortes artificiais.
   Mobile <= 640px: 1080x1350 (4:5), usando arte própria.
   ============================================================ */
.person-showcase {
    padding: 0;
    background: #f7f8fb;
}
.person-showcase::before { display: none; }
.person-showcase .container {
    max-width: none;
    padding: 0;
}
.showcase-carousel-full {
    width: 100%;
}
.showcase-carousel-full .showcase-viewport {
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.showcase-carousel-full .showcase-track {
    /* Todos os slides ficam empilhados na mesma célula do grid (grid-area
       1/1 abaixo); a troca entre eles é um crossfade de opacidade
       controlado via JS pela classe .is-active. */
    display: grid;
    width: 100%;
}
.showcase-banner-slide {
    grid-area: 1 / 1;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #081746;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition: opacity 650ms ease-in-out, visibility 0s linear 650ms;
}
.showcase-banner-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: opacity 650ms ease-in-out, visibility 0s linear 0s;
}
.showcase-banner-link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1600 / 620;
    overflow: hidden;
    background: #081746;
    text-decoration: none;
}
.showcase-banner-link:focus-visible {
    outline: 4px solid rgba(255, 100, 22, .8);
    outline-offset: -4px;
}
.showcase-banner-picture {
    display: block;
    width: 100%;
    height: 100%;
}
.showcase-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #081746;
    user-select: none;
    -webkit-user-drag: none;
}
/* Navegação sobreposta ao banner: setas translúcidas + indicadores discretos. */
.showcase-carousel-full {
    position: relative;
}
.showcase-overlay-controls {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}
.showcase-carousel-progress.showcase-progress-overlay {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(5, 16, 48, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
.showcase-progress-overlay .ofertas-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 8px;
}
.showcase-progress-overlay .ofertas-dot {
    width: 24px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    box-shadow: none;
    cursor: default;
    transform: none;
    transition: width .25s ease, background .25s ease, opacity .25s ease;
}
.showcase-progress-overlay .ofertas-dot:hover { background: rgba(255,255,255,.7); }
.showcase-progress-overlay .ofertas-dot.active {
    width: 38px;
    background: linear-gradient(90deg,#ff6416,#ff8f1b);
}
.showcase-progress-overlay .ofertas-dot:focus-visible {
    outline: 3px solid rgba(255,100,22,.38);
    outline-offset: 3px;
}
.showcase-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.30);
    background: rgba(5,16,48,.18);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    color: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: default;
    font: 400 34px/1 Arial,sans-serif;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.showcase-nav-btn-prev { left: clamp(14px,2.5vw,42px); }
.showcase-nav-btn-next { right: clamp(14px,2.5vw,42px); }
.showcase-nav-btn:hover {
    background: rgba(5,16,48,.38);
    border-color: rgba(255,255,255,.55);
    transform: translateY(-50%) scale(1.04);
}
.showcase-nav-btn:focus-visible {
    outline: 3px solid rgba(255,100,22,.55);
    outline-offset: 3px;
}
.showcase-carousel-full .ofertas-counter { display:none; }

/* Tablet: não altera a proporção da arte desktop. */
@media (max-width: 991px) and (min-width: 641px) {
    .showcase-nav-btn { width: 46px; height: 46px; font-size: 30px; }
    .showcase-progress-overlay .ofertas-dot { width: 20px; }
    .showcase-progress-overlay .ofertas-dot.active { width: 30px; }
}

/* Smartphone: usa a arte 4:5 própria; nada do banner desktop é recortado. */
@media (max-width: 640px) {
    .person-showcase { background: #f7f8fb; }
    .showcase-banner-slide {
        padding: 0;
        background: #081746;
    }
    .showcase-banner-link {
        width: 100%;
        aspect-ratio: 1080 / 1350;
        border-radius: 0;
    }
    .showcase-banner-image {
        object-fit: contain;
    }
    .showcase-nav-btn { width: 38px; height: 38px; font-size: 25px; }
    .showcase-nav-btn-prev { left: 10px; }
    .showcase-nav-btn-next { right: 10px; }
    .showcase-carousel-progress.showcase-progress-overlay { bottom: 10px; padding: 6px 9px; }
    .showcase-progress-overlay .ofertas-dots { gap: 5px; }
    .showcase-progress-overlay .ofertas-dot { width: 12px; height: 3px; }
    .showcase-progress-overlay .ofertas-dot.active { width: 24px; }
}

/* RAPIX v34 — arraste desktop fluido: trilho livre + inércia + snap leve no final. */
@media (pointer: fine) {
    .planos-ofertas .ofertas-viewport {
            touch-action: pan-y;
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
    .planos-ofertas .ofertas-track .oferta-card {
        scroll-snap-stop: normal;
    }
    .planos-ofertas .ofertas-viewport.is-dragging,
    .planos-ofertas .ofertas-viewport.is-gliding {
        scroll-behavior: auto;
        scroll-snap-type: none;
        user-select: none;
    }
    .planos-ofertas .ofertas-viewport.is-dragging {
    }
    .planos-ofertas .ofertas-viewport.is-dragging * {
        user-select: none;
        pointer-events: none;
    }
}

/* ============================================================
   RAPIX v35 — ofertas desktop com comportamento tipo Swiper/Brisanet
   ============================================================ */
@media (pointer: fine) and (min-width: 769px) {
    .planos-ofertas .ofertas-carousel {
        overflow: hidden;
    }
    .planos-ofertas .ofertas-viewport {
        overflow: hidden;
            touch-action: pan-y;
        scroll-snap-type: none;
        scroll-behavior: auto;
        padding-left: 0;
        padding-right: 0;
    }
    .planos-ofertas .planos-grid.ofertas-grid.ofertas-track {
        min-width: max-content;
        width: max-content;
        padding-left: 10px;
        padding-right: 10px;
        will-change: transform;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
    }
    .planos-ofertas .ofertas-track .oferta-card {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        flex-shrink: 0;
    }
    .planos-ofertas .ofertas-viewport.is-dragging {
        user-select: none;
    }
    .planos-ofertas .ofertas-viewport.is-dragging * {
        user-select: none;
    }
}


/* ===== HEADER RAPIX V37 — FIXO + TOPBAR + MAINBAR AZUL ===== */
:root {
    --rapix-topbar-h: 34px;
    --rapix-mainbar-h: 76px;
    --rapix-header-h: calc(var(--rapix-topbar-h) + var(--rapix-mainbar-h));
}

/* ===== CONTAINER GERAL DO HEADER ===== */
.site-header,
.site-header.scrolled {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    z-index: 1000;
    padding: 0;
    color: #081746;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}

.header-spacer {
    height: var(--rapix-header-h);
    flex: 0 0 var(--rapix-header-h);
}

/* ===== TOPBAR LARANJA ===== */
.rapix-topbar {
    height: var(--rapix-topbar-h);
    position: relative;
    z-index: 2;
    background: linear-gradient(
        90deg,
        #ff5f00 0%,
        var(--secondary) 48%,
        #ff8700 100%
    );
    color: #fff;
}

.rapix-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.rapix-location {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #fff;
    font-size: 0.73rem;
    line-height: 1;
    white-space: nowrap;
}

.rapix-location > i {
    font-size: 0.76rem;
}

.rapix-location strong {
    font-weight: 800;
}

.rapix-location-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .45);
    font-weight: 700;
}

.rapix-location:hover .rapix-location-action {
    text-decoration: underline;
}

.rapix-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    font-size: 0.7rem;
}

.rapix-top-link,
.rapix-top-phone {
    color: #fff;
    white-space: nowrap;
}

.rapix-top-link {
    opacity: .96;
}

.rapix-top-link:hover {
    text-decoration: underline;
    opacity: 1;
}

.rapix-top-phone {
    display: none;
    align-items: center;
    gap: 6px;
    font-weight: 800;
}

.rapix-top-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .48);
    flex: 0 0 1px;
}

/* ==========================================================
   MAINBAR — TODA A ÁREA AZUL
   ========================================================== */
.rapix-mainbar {
    height: var(--rapix-mainbar-h);
    z-index: 1;
    background: var(--primary);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 7px 24px rgba(0, 11, 69, .20);
    opacity: 1;
}

/* Ao rolar a altura da mainbar, somente a topbar continua visível.
   A mainbar sobe por trás da topbar, sem alterar o fluxo da página. */
.site-header.mainbar-hidden {
    pointer-events: none;
}

.site-header.mainbar-hidden .rapix-topbar {
    pointer-events: auto;
    box-shadow: 0 5px 16px rgba(0, 11, 69, .14);
}

.site-header.mainbar-hidden .rapix-mainbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.rapix-mainbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

/* ===== LOGO ===== */
.header-logo {
    flex: 0 0 auto;
    align-self: stretch;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Remove qualquer bloco/pseudo-elemento azul exclusivo da logo */
.header-logo::before,
.header-logo::after,
.header-logo-panel::before,
.header-logo-panel::after {
    content: none !important;
    display: none !important;
}

.header-logo-panel {
    width: 148px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-header .logo-img,
.site-header.scrolled .logo-img {
    width: 134px;
    height: 48px;
    max-width: none;
    object-fit: contain;
    filter: none;
    transition: none;
}

/* ===== NAVEGAÇÃO PRINCIPAL ===== */
.site-header .nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 1.6vw, 26px);
    flex: 1 1 auto;
}

.site-header .nav-menu .nav-main-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--rapix-mainbar-h);
    padding: 2px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: color .2s ease;
}

.site-header .nav-menu .nav-main-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--secondary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.site-header .nav-menu .nav-main-link:hover,
.site-header .nav-menu .nav-main-link.active {
    color: var(--secondary) !important;
}

.site-header .nav-menu .nav-main-link:hover::after,
.site-header .nav-menu .nav-main-link.active::after {
    transform: scaleX(1);
}

/* Atalhos adicionais aparecem somente no menu colapsado/mobile. */
.site-header .nav-menu .nav-mobile-extra {
    display: none;
}

/* ===== AÇÕES DO LADO DIREITO ===== */
.rapix-main-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex: 0 0 auto;
}

/* ===== ASSINE JÁ ===== */
.header-sign-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: .88rem;
    font-weight: 800;
    white-space: nowrap;
    transition: color .2s ease;
}

.header-sign-link i {
    font-size: .62rem;
}

.header-sign-link:hover {
    color: var(--secondary);
}

/* ===== ÁREA DO CLIENTE ===== */
.header-client-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1.5px solid var(--secondary);
    border-radius: 10px;
    background: var(--secondary);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(255, 109, 1, .18);
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.header-client-link:hover {
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 109, 1, .24);
}

.header-client-link i {
    color: inherit;
}

.header-client-arrow {
    font-size: .62rem;
}

/* ===== MENU HAMBÚRGUER ===== */
.site-header .menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 1.15rem;
    transition: background .2s ease, border-color .2s ease;
}

.site-header .menu-toggle:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .48);
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 3px solid rgba(255, 177, 0, .72);
    outline-offset: 2px;
}

/* Compatibilidade com a classe antiga .scrolled */
.site-header.scrolled .rapix-topbar {
    height: var(--rapix-topbar-h);
}

.site-header.scrolled .rapix-mainbar {
    height: var(--rapix-mainbar-h);
}

/* ==========================================================
   RESPONSIVO — MENU COLAPSADO
   ========================================================== */
@media (max-width: 1150px) {
    .site-header .nav-menu {
        position: fixed;
        top: var(--rapix-header-h);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--rapix-header-h));
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 22px 20px;
        background: var(--primary);
        border-top: 1px solid rgba(255, 255, 255, .10);
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 0 22px 36px rgba(0, 11, 69, .26);
        clip-path: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;
        z-index: 999;
    }

    .site-header .nav-menu.open,
    .site-header .nav-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        clip-path: none;
    }

    .site-header .nav-menu .nav-main-link {
        width: min(100%, 1200px);
        height: auto;
        min-height: 48px;
        margin: 0 auto;
        padding: 0 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        color: rgba(255, 255, 255, .94);
        font-size: .94rem;
    }

    .site-header .nav-menu .nav-mobile-extra {
        display: flex;
        color: rgba(255, 255, 255, .78);
        font-size: .88rem;
        font-weight: 650;
    }

    .site-header .nav-menu .nav-mobile-extra--first {
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .site-header .nav-menu .nav-mobile-extra.active {
        color: var(--secondary) !important;
    }

    .site-header .nav-menu .nav-main-link::after {
        left: 8px;
        right: auto;
        bottom: 7px;
        width: 34px;
        height: 2px;
        transform-origin: left;
    }

    .site-header .menu-toggle {
        display: inline-flex;
    }
}

/* ===== TABLET ===== */
@media (max-width: 860px) {
    :root {
        --rapix-topbar-h: 32px;
        --rapix-mainbar-h: 68px;
    }

    .rapix-topbar-inner {
        padding-inline: 18px;
    }

    .rapix-location-action,
    .rapix-top-link,
    .rapix-top-divider {
        display: none;
    }

    .rapix-top-phone {
        display: inline-flex;
    }

    .rapix-mainbar-inner {
        padding-inline: 18px;
        gap: 12px;
    }

    .header-logo {
        min-width: 124px;
        margin: 0;
        padding: 0;
    }

    .header-logo-panel {
        width: 124px;
        height: 100%;
    }

    .site-header .logo-img,
    .site-header.scrolled .logo-img {
        width: 114px;
        height: 42px;
    }

    .header-sign-link {
        display: none;
    }

    .header-client-link {
        min-height: 40px;
        padding-inline: 12px;
    }
}

/* ===== SMARTPHONE ===== */
@media (max-width: 560px) {
    .rapix-location {
        max-width: 56%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .68rem;
    }

    .rapix-top-phone {
        font-size: .68rem;
    }

    .rapix-mainbar-inner {
        padding-inline: 14px;
    }

    .header-logo {
        min-width: 112px;
        margin: 0;
        padding: 0;
    }

    .header-logo-panel {
        width: 112px;
        height: 100%;
    }

    .site-header .logo-img,
    .site-header.scrolled .logo-img {
        width: 104px;
        height: 39px;
    }

    .header-client-link {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 10px;
    }

    .header-client-link span,
    .header-client-arrow {
        display: none;
    }

    .site-header .menu-toggle {
        width: 42px;
        height: 42px;
    }
}

/* ===== SMARTPHONES PEQUENOS ===== */
@media (max-width: 390px) {
    .rapix-top-phone {
        font-size: 0;
        gap: 0;
    }

    .rapix-top-phone i {
        font-size: .72rem;
    }

    .header-logo {
        min-width: 106px;
    }

    .header-logo-panel {
        width: 106px;
    }

    .rapix-main-actions {
        gap: 8px;
    }
}



/* ===== PRODUTOS RAPIX — CARROSSEL INFINITO V63 ===== */
.rapix-products-compact {
    padding: 84px 0 76px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.rapix-products-compact::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -180px;
    top: -190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 11, 69, 0.07) 0%, rgba(0, 11, 69, 0) 70%);
    pointer-events: none;
}

.rapix-products-compact-head {
    max-width: 690px;
    margin-bottom: 32px;
}

.rapix-products-compact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--secondary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rapix-products-compact-head h2 {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.rapix-products-compact-head p {
    margin: 0;
    max-width: 610px;
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.65;
}

/* Janela do marquee. O fade nas laterais evita um corte seco dos cards. */
.rapix-products-marquee {
    width: 100%;
    overflow: hidden;
    padding: 8px 0 14px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.rapix-products-marquee-track {
    width: max-content;
    display: flex;
    align-items: stretch;
    animation: rapix-products-marquee 31s linear infinite;
    will-change: transform;
}

.rapix-products-marquee:hover .rapix-products-marquee-track,
.rapix-products-marquee:focus-within .rapix-products-marquee-track {
    animation-play-state: paused;
}

.rapix-products-marquee-group {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding-right: 14px;
}

@keyframes rapix-products-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.rapix-compact-card {
    flex: 0 0 clamp(245px, 21vw, 292px);
    width: clamp(245px, 21vw, 292px);
    min-height: 188px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid #e7ebf3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 11, 69, 0.045);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
}

.rapix-compact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 109, 1, .38);
    box-shadow: 0 16px 30px rgba(0, 11, 69, 0.085);
}

.rapix-compact-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(0, 11, 69, .055);
    color: var(--primary);
    font-size: 1.05rem;
}

.rapix-compact-category {
    display: block;
    margin-bottom: 5px;
    color: var(--secondary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rapix-compact-card h3 {
    margin: 0 0 6px;
    color: var(--primary);
    font-size: 1.04rem;
    line-height: 1.25;
}

.rapix-compact-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.rapix-products-compact-footer {
    margin-top: 20px;
    padding-top: 22px;
    border-top: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.rapix-products-compact-footer p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.rapix-products-compact-footer p i {
    color: var(--secondary);
    margin-right: 6px;
}

.rapix-products-compact-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font-size: .84rem;
    font-weight: 800;
    transition: transform .22s ease, background .22s ease;
}

.rapix-products-compact-cta:hover {
    transform: translateY(-2px);
    background: var(--primary-dark);
}

@media (max-width: 720px) {
    .rapix-products-compact {
        padding: 64px 0 58px;
    }

    .rapix-products-compact-head {
        margin-bottom: 22px;
    }

    .rapix-products-marquee {
        margin-left: -4px;
        width: calc(100% + 8px);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
    }

    .rapix-products-marquee-track {
        animation-duration: 25s;
    }

    .rapix-products-marquee-group {
        gap: 10px;
        padding-right: 10px;
    }

    .rapix-compact-card {
        flex-basis: min(78vw, 278px);
        width: min(78vw, 278px);
        min-height: 170px;
        padding: 19px 17px;
        gap: 22px;
        border-radius: 18px;
    }

    .rapix-products-compact-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 460px) {
    .rapix-products-compact-cta {
        width: 100%;
    }
}

/* ============================================================
   RAPIX v64 — efeito mola nas extremidades dos cards (mobile)
   Inspirado na sensação de pull-to-refresh, sem recarregar a página.
   ============================================================ */
@media (max-width: 768px), (pointer: coarse) {
    .planos-ofertas .ofertas-track {
        will-change: transform;
        backface-visibility: hidden;
    }

    .planos-ofertas .ofertas-viewport.is-elastic-pulling {
        scroll-snap-type: none;
    }

    .planos-ofertas .ofertas-viewport.is-elastic-pulling .oferta-card {
        transition-duration: .18s;
    }

    .planos-ofertas .ofertas-viewport.is-elastic-returning .ofertas-track {
        will-change: transform;
    }
}

/* ============================================================
   BANNERS DAS PÁGINAS INTERNAS — v65
   Padrão visual único para Empresa, Contato, Trabalhe Conosco
   e Política de Privacidade.
   ============================================================ */
.external-page-hero {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 82% 28%, rgba(255,109,1,.18), transparent 24%),
        radial-gradient(circle at 18% 90%, rgba(26,58,160,.38), transparent 34%),
        linear-gradient(125deg, #000730 0%, #000b45 56%, #071a63 100%);
    isolation: isolate;
}
.external-page-hero::before,
.external-page-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
.external-page-hero::before {
    width: 520px;
    height: 520px;
    right: -170px;
    top: -260px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 145px rgba(255,255,255,.018);
}
.external-page-hero::after {
    width: 150px;
    height: 10px;
    left: 7%;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--secondary);
}
.external-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
    gap: clamp(34px, 6vw, 78px);
    align-items: center;
    width: 100%;
    padding-block: 68px;
}
.external-page-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
}
.external-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.external-page-kicker::before {
    content: "";
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: var(--secondary);
}
.external-page-hero h1 {
    max-width: 760px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(2.25rem, 4.9vw, 4.15rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.external-page-hero-copy > p {
    max-width: 640px;
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
}
.external-page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}
.external-page-hero-actions .company-text-link,
.external-page-hero-actions .external-page-text-link {
    color: #fff;
    font-weight: 700;
}
.external-page-hero-actions .external-page-text-link i,
.external-page-hero-actions .company-text-link i {
    margin-left: 7px;
    color: var(--secondary);
}
.external-page-hero-visual {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.external-page-visual-card {
    position: relative;
    width: min(100%, 500px);
    min-height: 285px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}
.external-page-visual-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 38%);
}

/* Empresa — foto humana no banner, sem repetir publicidade da home */
.external-page-hero--company .external-page-visual-card {
    min-height: 300px;
}
.external-page-hero--company .external-page-visual-card img {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: saturate(.9) contrast(1.02);
}
.external-page-hero--company .external-page-visual-card::before {
    content: "Desde 2005";
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(0,11,69,.82);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

/* Contato — usa a pessoa já existente no projeto */
.external-page-hero--contact .external-page-visual-card {
    min-height: 310px;
    background:
        radial-gradient(circle at 66% 44%, rgba(255,109,1,.2), transparent 27%),
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
}
.external-page-hero--contact .external-page-visual-card img {
    position: absolute;
    z-index: 1;
    right: 7%;
    bottom: 0;
    width: auto;
    height: 292px;
    max-width: 60%;
    object-fit: contain;
    object-position: bottom;
}
.external-contact-chip {
    position: absolute;
    z-index: 3;
    left: 22px;
    top: 24px;
    width: 158px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: rgba(0,7,48,.68);
    box-shadow: 0 18px 38px rgba(0,0,0,.2);
    backdrop-filter: blur(12px);
}
.external-contact-chip i {
    display: block;
    margin-bottom: 13px;
    color: var(--secondary);
    font-size: 1.35rem;
}
.external-contact-chip strong { display: block; margin-bottom: 4px; font-size: .92rem; }
.external-contact-chip span { color: rgba(255,255,255,.65); font-size: .72rem; line-height: 1.35; }

/* Trabalhe Conosco — composição editorial, sem foto genérica */
.external-career-stack {
    position: relative;
    width: min(100%, 470px);
    min-height: 290px;
}
.external-career-main {
    position: absolute;
    inset: 12px 36px 28px 10px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    box-shadow: 0 28px 70px rgba(0,0,0,.25);
    backdrop-filter: blur(12px);
}
.external-career-main > i {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 17px;
    background: var(--secondary);
    color: #fff;
    font-size: 1.35rem;
}
.external-career-main strong { display: block; margin-bottom: 8px; font-size: 1.5rem; }
.external-career-main p { max-width: 300px; color: rgba(255,255,255,.7); font-size: .86rem; line-height: 1.55; }
.external-career-mini {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 9px;
}
.external-career-mini span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 172px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    background: rgba(0,7,48,.86);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(0,0,0,.18);
    backdrop-filter: blur(9px);
}
.external-career-mini i { color: var(--secondary); }

/* Política — banner mais sóbrio para conteúdo institucional/legal */
.external-page-hero--policy { min-height: 320px; }
.external-page-hero--policy .external-page-hero-grid { padding-block: 54px; }
.external-policy-visual {
    position: relative;
    width: min(100%, 400px);
    min-height: 230px;
    display: grid;
    place-items: center;
}
.external-policy-shield {
    position: relative;
    width: 160px;
    height: 160px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 42px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 28px 60px rgba(0,0,0,.24), 0 0 0 22px rgba(255,255,255,.025);
    transform: rotate(5deg);
    backdrop-filter: blur(10px);
}
.external-policy-shield i {
    color: var(--secondary);
    font-size: 4.5rem;
    transform: rotate(-5deg);
}
.external-policy-badge {
    position: absolute;
    right: 4%;
    bottom: 24px;
    padding: 11px 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,7,48,.82);
    color: rgba(255,255,255,.78);
    font-size: .75rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
    .external-page-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-block: 54px;
    }
    .external-page-hero-copy { max-width: 760px; }
    .external-page-hero-visual { min-height: 260px; }
    .external-page-visual-card { width: min(100%, 620px); }
    .external-page-hero--company .external-page-visual-card,
    .external-page-hero--company .external-page-visual-card img { height: 290px; min-height: 290px; }
    .external-page-hero--contact .external-page-visual-card { min-height: 290px; }
}

@media (max-width: 620px) {
    .external-page-hero { min-height: 0; }
    .external-page-hero-grid { gap: 26px; padding-block: 42px 46px; }
    .external-page-hero h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
    .external-page-hero-copy > p { font-size: .98rem; }
    .external-page-hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
    .external-page-hero-visual { min-height: 220px; }
    .external-page-visual-card { border-radius: 22px; }
    .external-page-hero--company .external-page-visual-card,
    .external-page-hero--company .external-page-visual-card img { height: 220px; min-height: 220px; }
    .external-page-hero--company .external-page-visual-card::before { left: 14px; bottom: 14px; }
    .external-page-hero--contact .external-page-visual-card { min-height: 205px; }
    .external-page-hero--contact .external-page-visual-card img { right: 2%; height: 220px; max-width: 62%; }
    .external-contact-chip { left: 14px; top: 16px; width: 140px; padding: 13px; }
    .external-career-stack { min-height: 245px; }
    .external-career-main { inset: 0 18px 24px 0; padding: 24px; border-radius: 22px; }
    .external-career-main > i { width: 48px; height: 48px; margin-bottom: 18px; }
    .external-career-main strong { font-size: 1.25rem; }
    .external-career-mini span { min-width: 152px; padding: 9px 11px; font-size: .7rem; }
    .external-page-hero--policy .external-page-hero-visual { display: none; }
    .external-page-hero--policy .external-page-hero-grid { padding-block: 40px 44px; }
}


/* ============================================================
   AJUSTE v66 — banners internos com mesma proporção e sem botões
   ============================================================ */
.external-page-hero {
    min-height: 390px;
}
.external-page-hero-grid {
    padding-block: 68px;
}
.external-page-hero-meta {
    margin-top: 22px;
}
.external-page-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    line-height: 1.5;
}
.external-page-hero-meta i {
    color: var(--secondary);
}
.external-page-hero-visual {
    min-height: 300px;
}
.external-page-visual-card,
.external-page-hero--company .external-page-visual-card,
.external-page-hero--contact .external-page-visual-card {
    min-height: 300px;
}
.external-page-hero--company .external-page-visual-card img {
    height: 300px;
}
.external-career-stack,
.external-policy-visual {
    min-height: 300px;
}
.external-page-hero--policy {
    min-height: 390px;
}
.external-page-hero--policy .external-page-hero-grid {
    padding-block: 68px;
}

@media (max-width: 980px) {
    .external-page-hero { min-height: 320px; }
    .external-page-hero-grid { padding-block: 54px; }
    .external-page-hero--policy { min-height: 320px; }
    .external-page-hero-visual,
    .external-career-stack,
    .external-policy-visual { min-height: 280px; }
    .external-page-visual-card,
    .external-page-hero--company .external-page-visual-card,
    .external-page-hero--contact .external-page-visual-card,
    .external-page-hero--company .external-page-visual-card img { min-height: 280px; height: 280px; }
}

@media (max-width: 620px) {
    .external-page-hero-grid { padding-block: 42px 46px; }
    .external-page-hero-visual,
    .external-career-stack,
    .external-policy-visual { min-height: 220px; }
    .external-page-visual-card,
    .external-page-hero--company .external-page-visual-card,
    .external-page-hero--contact .external-page-visual-card,
    .external-page-hero--company .external-page-visual-card img { min-height: 220px; height: 220px; }
    .external-page-hero-meta { font-size: .84rem; }
}

/* ============================================================
   AJUSTE v68 — banners internos mais compactos
   Arte desktop: 1920x600 | Arte mobile: 1080x1200
   Exibição: desktop 420–480px | tablet 320–390px | mobile 300–360px
   ============================================================ */
.page-image-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000b45;
}
.page-image-banner__picture {
    display: block;
    width: 100%;
    background: #000b45;
}
.page-image-banner__picture img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    background: #000b45;
}

/* ============================================================
   v71 — utilitários de interface
   ============================================================ */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ============================================================
   RAPIX v72 — controles e utilitários de formulário
   ============================================================ */
button.faq-pergunta {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
}


/* Input de arquivo invisível usado pelo seletor visual de currículo. */
.sr-only-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* Amplia a área clicável dos indicadores sem mudar o desenho visual. */
.ofertas-dot { position: relative; }
.ofertas-dot::before {
    content: "";
    position: absolute;
    inset: -5px;
}



/* ============================================================
   v85 — ajustes gerais de navegação e reflow
   ============================================================ */
/* Evita estouro de textos em ampliação/reflow. */
main, header, footer, section, article, .container { min-width: 0; }
p, li, dd, dt, h1, h2, h3, h4, h5, h6, a, button, label { overflow-wrap: anywhere; }
img, video, iframe { max-width: 100%; }

/* Área mínima de controles de interface. */
button, input[type="button"], input[type="submit"], input[type="reset"], .menu-toggle, .back-to-top, .whatsapp-float {
    min-width: 24px;
    min-height: 24px;
}

/* Navegação do carrossel de ofertas. */
.ofertas-carousel-footer { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ofertas-carousel-nav {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 11, 69, .16);
    border-radius: 50%;
    background: #fff;
    color: #000b45;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}
.ofertas-carousel-nav:hover { background: #f6f8fd; }

/* Redução de movimento solicitada pelo sistema operacional. */

.site-map-list, .site-map-list ul { padding-left: 1.4rem; }
.site-map-list { max-width: 760px; display: grid; gap: 14px; font-size: 1.02rem; }
.site-map-list ul { margin-top: 10px; display: grid; gap: 8px; }
.site-map-list a { color: #000b45; text-underline-offset: 3px; }
.site-map-list a:hover { color: #c95400; }

/* Evita que destinos de links internos fiquem escondidos sob o cabeçalho fixo. */
[id] { scroll-margin-top: 132px; }
@media (max-width: 768px) { [id] { scroll-margin-top: 108px; } }

/* ============================================================
   v92 — BANNERS INTERNOS COMPOSICIONAIS
   Fundo em CSS + texto HTML + visual independente.
   Substitui a necessidade de arte desktop/mobile fechada.
   ============================================================ */
.secao-degrade {
    background: linear-gradient(
        90deg,
        #08145f 0%,
        #0c178d 18%,
        #1019e8 50%,
        #0c178d 82%,
        #08145f 100%
    );
}

.internal-banner {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(300px, 26vw, 500px);
    overflow: hidden;
    color: #fff;
}

.internal-banner__inner {
    width: min(100%, 1760px);
    min-height: inherit;
    margin: 0 auto;
    padding: 0 clamp(28px, 3.6vw, 68px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    align-items: center;
    gap: clamp(18px, 2.6vw, 48px);
}

.internal-banner__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    padding: clamp(28px, 3.2vw, 56px) 0;
}


.internal-banner__eyebrow {
    margin: 0 0 clamp(10px, 1.2vw, 18px);
    color: rgba(255, 177, 0, .92);
    font-size: clamp(.82rem, 1.05vw, 1.2rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .08em;
}

.internal-banner h1 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.05vw, 3.7rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 4px 20px rgba(0, 0, 30, .18);
}

.internal-banner__accent {
    color: #ffb100;
}

.internal-banner__title-light {
    font-weight: 400;
}

.internal-banner__title-strong {
    font-weight: 800;
}

.internal-banner__description {
    max-width: 650px;
    margin: clamp(18px, 2vw, 28px) 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: clamp(.92rem, 1.13vw, 1.25rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .035em;
}

.internal-banner__visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.internal-banner__visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 7%;
    width: min(34vw, 560px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 42%, transparent 70%);
    filter: blur(5px);
    pointer-events: none;
}

.internal-banner__visual img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: clamp(270px, 24vw, 470px);
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 22px 30px rgba(0, 0, 30, .24));
}

.internal-banner--empresa .internal-banner__visual img {
    max-width: 112%;
}

.internal-banner--contato .internal-banner__visual img {
    max-height: clamp(280px, 25vw, 480px);
}

.internal-banner--trabalhe .internal-banner__visual img {
    max-width: 106%;
}

.internal-banner__visual--politica {
    align-items: center;
}

.internal-banner__visual--politica img {
    width: min(100%, 570px);
    max-height: clamp(205px, 19vw, 365px);
}

@media (max-width: 980px) {
    .internal-banner {
        min-height: 320px;
    }

    .internal-banner__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(270px, .95fr);
        gap: 20px;
        padding-inline: clamp(24px, 4vw, 42px);
    }

    .internal-banner h1 {
        font-size: clamp(2rem, 4.6vw, 3rem);
    }

    .internal-banner__visual img {
        max-height: 315px;
    }

    .internal-banner__visual--politica img {
        max-height: 220px;
    }
}

@media (max-width: 720px) {
    .internal-banner {
        min-height: 0;
    }

    .internal-banner__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0;
        padding: 0 22px;
    }

    .internal-banner__content {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
        padding: 26px 0 8px;
        text-align: left;
    }

    .internal-banner__eyebrow {
        margin-bottom: 10px;
        font-size: .82rem;
        letter-spacing: .055em;
    }

    .internal-banner h1 {
        max-width: 610px;
        font-size: clamp(1.85rem, 8.2vw, 2.7rem);
        line-height: 1.04;
        letter-spacing: -.04em;
    }

    .internal-banner__description {
        max-width: 560px;
        margin-top: 16px;
        font-size: .94rem;
        line-height: 1.5;
        letter-spacing: .02em;
    }

    .internal-banner__visual {
        height: clamp(190px, 58vw, 290px);
        align-self: auto;
        justify-content: center;
        overflow: visible;
    }

    .internal-banner__visual::before {
        width: min(92vw, 430px);
        bottom: -9%;
    }

    .internal-banner__visual img,
    .internal-banner--contato .internal-banner__visual img {
        max-height: 100%;
        max-width: min(100%, 520px);
    }

    .internal-banner--empresa .internal-banner__visual img {
        max-width: min(112%, 560px);
    }

    .internal-banner--trabalhe .internal-banner__visual img {
        max-width: min(108%, 540px);
    }

    .internal-banner__visual--politica {
        height: clamp(170px, 48vw, 235px);
        padding-bottom: 16px;
    }

    .internal-banner__visual--politica img {
        width: min(82vw, 420px);
        max-height: 100%;
    }
}

@media (max-width: 420px) {
    .internal-banner__inner {
        padding-inline: 18px;
    }

    .internal-banner__content {
        padding-top: 24px;
    }

    .internal-banner h1 {
        font-size: clamp(1.72rem, 8.7vw, 2.15rem);
    }

    .internal-banner__description {
        font-size: .88rem;
    }

    .internal-banner__visual {
        height: 205px;
    }

    .internal-banner--contato .internal-banner__visual {
        height: 220px;
    }
}


/* ============================================================
   RAPIX v113 — SHOWCASE COMPOSICIONAL
   Carrossel principal no mesmo conceito dos banners internos:
   fundo em CSS + texto HTML + visual independente.
   ============================================================ */
.degrade-azul {
  background-color: #0221ed;

  background-image:
    radial-gradient(
      ellipse at 0% 0%,
      #00c1fe 0%,
      #028de9 22%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 100% 50%,
      #0360ff 0%,
      #0254ff 30%,
      transparent 67%
    ),
    radial-gradient(
      ellipse at 40% 100%,
      #031ade 0%,
      transparent 58%
    ),
    linear-gradient(
      110deg,
      #0266ec 0%,
      #021ee7 48%,
      #035dff 100%
    );

  background-repeat: no-repeat;
  background-size: cover;
}

.person-showcase .showcase-banner-slide {
    background: #0221ed;
}

.person-showcase .showcase-banner-link {
    display: block;
    width: 100%;
    min-height: clamp(340px, 38.75vw, 620px);
    aspect-ratio: auto;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.showcase-banner-inner {
    position: relative;
    isolation: isolate;
    width: min(100%, 1760px);
    min-height: clamp(340px, 38.75vw, 620px);
    margin: 0 auto;
    padding: 0 clamp(70px, 8vw, 150px);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    align-items: center;
    gap: clamp(22px, 3.8vw, 72px);
}

.showcase-banner-content {
    position: relative;
    z-index: 3;
    max-width: 780px;
    padding: clamp(42px, 4.6vw, 78px) 0 clamp(62px, 5.6vw, 92px);
}

.showcase-banner-eyebrow {
    margin: 0 0 clamp(10px, 1.15vw, 18px);
    color: #ffb100;
    font-size: clamp(.82rem, 1.02vw, 1.1rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.showcase-banner-content h2 {
    max-width: 800px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.25vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.048em;
    text-wrap: balance;
}

.showcase-banner-content h2 span {
    color: #ffb100;
}

.showcase-banner-description {
    max-width: 640px;
    margin: clamp(17px, 1.8vw, 27px) 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(.94rem, 1.08vw, 1.18rem);
    line-height: 1.55;
}

.showcase-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: clamp(20px, 2.1vw, 30px);
    color: #fff;
    font-size: clamp(.9rem, .95vw, 1.02rem);
    font-weight: 700;
    line-height: 1;
}

.showcase-banner-cta i {
    transition: transform .22s ease;
}

.showcase-banner-link:hover .showcase-banner-cta i {
    transform: translateX(5px);
}

.showcase-banner-visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    overflow: hidden;
}

.showcase-banner-visual::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -1px;
    inset-block: 0;
    width: 26%;
    background: linear-gradient(90deg, #0221ed 0%, rgba(2,33,237,.72) 30%, transparent 100%);
    pointer-events: none;
}

.person-showcase .showcase-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(340px, 38.75vw, 620px);
    object-fit: cover;
    object-position: center;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
    filter: saturate(1.03) contrast(1.02);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 100%);
}

.showcase-banner-visual--brand .showcase-banner-image {
    object-position: 58% center;
}

@media (max-width: 991px) {
    .showcase-banner-inner {
        min-height: 500px;
        padding: 0 clamp(58px, 7vw, 86px);
        grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr);
        gap: 22px;
    }
    .showcase-banner-content {
        padding-block: 42px 70px;
    }
    .person-showcase .showcase-banner-link,
    .person-showcase .showcase-banner-image {
        min-height: 500px;
    }
}

@media (max-width: 640px) {
    .person-showcase .showcase-banner-slide {
        padding: 0;
        background: #0221ed;
    }
    .person-showcase .showcase-banner-link {
        min-height: 590px;
        aspect-ratio: auto;
        border-radius: 0;
    }
    .showcase-banner-inner {
        min-height: 590px;
        padding: 0 28px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 245px;
        gap: 0;
        align-items: end;
    }
    .showcase-banner-content {
        max-width: 100%;
        padding: 44px 18px 14px;
        text-align: left;
    }
    .showcase-banner-eyebrow {
        margin-bottom: 10px;
        font-size: .72rem;
    }
    .showcase-banner-content h2 {
        max-width: 92%;
        font-size: clamp(1.9rem, 9vw, 2.55rem);
        line-height: 1.02;
    }
    .showcase-banner-description {
        max-width: 94%;
        margin-top: 14px;
        font-size: .9rem;
        line-height: 1.45;
    }
    .showcase-banner-cta {
        margin-top: 16px;
        font-size: .86rem;
    }
    .showcase-banner-visual {
        min-height: 245px;
        margin: 0 -28px;
        align-self: end;
    }
    .showcase-banner-visual::before {
        inset: -1px 0 auto;
        width: 100%;
        height: 30%;
        background: linear-gradient(180deg, #0221ed 0%, rgba(2,33,237,.64) 32%, transparent 100%);
    }
    .person-showcase .showcase-banner-image {
        width: 100%;
        height: 245px;
        min-height: 245px;
        object-fit: cover;
        object-position: center 28%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
    }
    .showcase-banner-visual--brand .showcase-banner-image {
        object-position: center;
    }
    .showcase-carousel-progress.showcase-progress-overlay {
        bottom: 10px;
    }
}

/* ============================================================
   RAPIX v115 — VISUAIS TRANSPARENTES DO SHOWCASE
   Usa os recortes sem fundo enviados pelo usuário e mantém o
   fundo em degradê do próprio banner. O 4º slide (Rapix TV)
   conserva o visual anterior por não haver um novo recorte TV.
   ============================================================ */
.showcase-banner-visual--cutout {
    align-items: flex-end;
    justify-content: flex-end;
    overflow: visible;
    padding-top: clamp(18px, 2.2vw, 38px);
}

.showcase-banner-visual--cutout::before {
    display: none;
}

.person-showcase .showcase-banner-visual--cutout .showcase-banner-image {
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 118%;
    max-height: clamp(300px, 34vw, 560px);
    margin: 0;
    object-fit: contain;
    object-position: right bottom;
    background: transparent;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.person-showcase .showcase-banner-visual--mascotes .showcase-banner-image {
    max-width: 132%;
    max-height: clamp(275px, 32vw, 525px);
    transform: translateX(3%);
}

.person-showcase .showcase-banner-visual--musica .showcase-banner-image {
    max-width: 122%;
    max-height: clamp(315px, 35vw, 570px);
    transform: translateX(5%);
}

.person-showcase .showcase-banner-visual--marca .showcase-banner-image {
    max-width: 134%;
    max-height: clamp(250px, 29vw, 480px);
    transform: translateX(8%);
}

.person-showcase .showcase-banner-visual--movel .showcase-banner-image {
    max-width: 102%;
    max-height: clamp(315px, 35vw, 565px);
    transform: translateX(2%);
}

/* Os CTAs visuais foram removidos do HTML; o banner inteiro continua
   clicável para preservar a navegação sem adicionar um botão na arte. */

@media (max-width: 991px) {
    .person-showcase .showcase-banner-visual--cutout .showcase-banner-image {
        max-width: 126%;
        max-height: 425px;
    }

    .person-showcase .showcase-banner-visual--mascotes .showcase-banner-image {
        max-width: 142%;
        max-height: 380px;
    }

    .person-showcase .showcase-banner-visual--marca .showcase-banner-image {
        max-width: 142%;
        max-height: 345px;
    }
}

@media (max-width: 640px) {
    .showcase-banner-visual--cutout {
        min-height: 245px;
        margin: 0 -28px;
        padding: 0 8px;
        align-items: flex-end;
        justify-content: center;
        overflow: visible;
    }

    .showcase-banner-visual--cutout::before {
        display: none;
    }

    .person-showcase .showcase-banner-visual--cutout .showcase-banner-image {
        width: auto;
        height: auto;
        min-height: 0;
        max-width: 118%;
        max-height: 238px;
        object-fit: contain;
        object-position: center bottom;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .person-showcase .showcase-banner-visual--mascotes .showcase-banner-image {
        max-width: 132%;
        max-height: 205px;
    }

    .person-showcase .showcase-banner-visual--musica .showcase-banner-image {
        max-width: 120%;
        max-height: 245px;
    }

    .person-showcase .showcase-banner-visual--marca .showcase-banner-image {
        max-width: 132%;
        max-height: 195px;
    }

    .person-showcase .showcase-banner-visual--movel .showcase-banner-image {
        max-width: 100%;
        max-height: 235px;
    }
}


/* ============================================================
   RAPIX v116 — AJUSTES FINOS DO SHOWCASE
   1) Banner 1: mascotes maiores e mais à direita
   2) Banner 2: imagem maior e ancorada na base
   3) Banner 3: somente a marca, ocupando todo o banner
   ============================================================ */
.person-showcase .showcase-banner-visual--mascotes {
    justify-content: flex-end;
}

.person-showcase .showcase-banner-visual--mascotes .showcase-banner-image {
    max-width: 140%;
    max-height: clamp(300px, 34vw, 548px);
    transform: translateX(11%);
}

.person-showcase .showcase-banner-visual--musica {
    justify-content: flex-end;
    align-items: flex-end;
}

.person-showcase .showcase-banner-visual--musica .showcase-banner-image {
    max-width: 146%;
    max-height: clamp(390px, 42vw, 680px);
    transform: translate(13%, 7%);
}

.showcase-banner-slide--image-only .showcase-banner-link {
    min-height: clamp(340px, 38.75vw, 620px);
}

.showcase-banner-inner--image-only {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: clamp(340px, 38.75vw, 620px);
    padding: 0 clamp(22px, 3vw, 52px);
}

.showcase-banner-visual--image-only {
    width: 100%;
    min-height: clamp(340px, 38.75vw, 620px);
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 2vw, 30px) 0;
    overflow: hidden;
}

.person-showcase .showcase-banner-visual--image-only .showcase-banner-image,
.person-showcase .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
    width: 100%;
    height: 100%;
    max-width: min(100%, 1760px);
    max-height: clamp(310px, 34vw, 560px);
    object-fit: contain;
    object-position: center center;
    transform: none;
}

@media (max-width: 991px) {
    .person-showcase .showcase-banner-visual--mascotes .showcase-banner-image {
        max-width: 148%;
        max-height: 402px;
        transform: translateX(12%);
    }

    .person-showcase .showcase-banner-visual--musica .showcase-banner-image {
        max-width: 150%;
        max-height: 500px;
        transform: translate(12%, 6.5%);
    }

    .showcase-banner-inner--image-only {
        grid-template-columns: 1fr;
        padding: 0 32px;
    }
}

@media (max-width: 640px) {
    .person-showcase .showcase-banner-visual--mascotes .showcase-banner-image {
        max-width: 148%;
        max-height: 226px;
        transform: translateX(14%);
    }

    .person-showcase .showcase-banner-visual--musica .showcase-banner-image {
        max-width: 142%;
        max-height: 300px;
        transform: translate(9%, 4%);
    }

    .showcase-banner-slide--image-only .showcase-banner-link {
        min-height: 320px;
    }

    .showcase-banner-inner--image-only {
        min-height: 320px;
        padding: 0 10px;
        grid-template-rows: 1fr;
        align-items: center;
    }

    .showcase-banner-visual--image-only {
        min-height: 320px;
        margin: 0 -10px;
        padding: 0;
        justify-content: center;
        align-items: center;
    }

    .person-showcase .showcase-banner-visual--image-only .showcase-banner-image,
    .person-showcase .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
        width: 108%;
        height: auto;
        max-width: 108%;
        max-height: 285px;
        object-fit: contain;
        object-position: center center;
        transform: none;
    }
}


/* ============================================================
   RAPIX v117 — BANNER 4 COM NOVA ARTE TRANSPARENTE
   Mantém a imagem concentrada à direita, com elementos nos cantos,
   preservando a área central/esquerda para o texto do site.
   ============================================================ */
.person-showcase .showcase-banner-visual--tv {
    justify-content: flex-end;
    align-items: flex-end;
    overflow: visible;
}

.person-showcase .showcase-banner-visual--tv .showcase-banner-image {
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 122%;
    max-height: clamp(320px, 36vw, 600px);
    object-fit: contain;
    object-position: right bottom;
    transform: translate(3%, 14%);
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
}

@media (max-width: 991px) {
    .person-showcase .showcase-banner-visual--tv .showcase-banner-image {
        max-width: 132%;
        max-height: 440px;
        transform: translate(4%, 13%);
    }
}

@media (max-width: 640px) {
    .person-showcase .showcase-banner-visual--tv .showcase-banner-image {
        max-width: 126%;
        max-height: 254px;
        transform: translate(1%, 12%);
    }
}


/* ============================================================
   RAPIX v118 — NOVO FUNDO DO SHOWCASE PARA TESTE VISUAL
   Aplica apenas na seção showcase, preservando o restante do site.
   ============================================================ */
.person-showcase .showcase-banner-link {
    background-color: #050d1b;
    background-image:
        radial-gradient(
            ellipse at bottom right,
            rgba(22, 58, 116, 0.3) 0%,
            transparent 60%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(3, 8, 17, 0.35) 100%
        ),
        linear-gradient(
            90deg,
            #07172e 0%,
            #061326 20%,
            #050f1f 40%,
            #050d1b 50%,
            #071022 60%,
            #0c1d3b 80%,
            #112b56 100%
        );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* ============================================================
   RAPIX v119 — COR DE DESTAQUE + INDICADORES MINIMALISTAS
   ============================================================ */
/* O destaque textual do showcase passa do amarelo para o laranja Rapix. */
.showcase-banner-eyebrow,
.showcase-banner-content h2 span {
    color: #ff6416;
}

/* Indicadores em traços simples, sem cápsula de fundo. */
.showcase-carousel-progress.showcase-progress-overlay {
    padding: 4px 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
}

.showcase-progress-overlay .ofertas-dots {
    gap: 8px;
    min-height: 8px;
}

.showcase-progress-overlay .ofertas-dot {
    width: 24px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    opacity: 1;
    transition: width .25s ease, background-color .25s ease, opacity .25s ease;
}

.showcase-progress-overlay .ofertas-dot:hover {
    background: rgba(255,255,255,.62);
}

.showcase-progress-overlay .ofertas-dot.active {
    width: 40px;
    background: #fff;
}

.showcase-progress-overlay .ofertas-dot:focus-visible {
    outline: 2px solid rgba(255,255,255,.8);
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .showcase-carousel-progress.showcase-progress-overlay {
        bottom: 12px;
        padding: 3px 0;
    }

    .showcase-progress-overlay .ofertas-dots {
        gap: 6px;
    }

    .showcase-progress-overlay .ofertas-dot {
        width: 18px;
        height: 3px;
    }

    .showcase-progress-overlay .ofertas-dot.active {
        width: 32px;
    }
}


/* ============================================================
   RAPIX v120 — PRODUTOS INCLUSOS COM ÍCONES PERSONALIZADOS
   ============================================================ */
.produto-mini-media {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: block;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 6px 13px rgba(8, 28, 92, .14);
}

.produto-mini-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

@media (max-width: 640px) {
    .produto-mini-media {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }
}


/* ============================================================
   RAPIX v121 — QUINTO MINI-CARD DE PRODUTOS INCLUSOS
   ============================================================ */
.oferta-products-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .oferta-products-five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .oferta-products-five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   RAPIX v122 — VERIFICAÇÃO FINAL DOS INDICADORES EM TODOS OS DISPOSITIVOS
   Mantém o estilo de traços horizontais minimalistas em desktop,
   tablet, mobile e telas pequenas, sobrescrevendo diferenças antigas.
   ============================================================ */
.showcase-carousel-progress.showcase-progress-overlay {
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
}

.showcase-progress-overlay .ofertas-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 8px;
}

.showcase-progress-overlay .ofertas-dot {
    width: 24px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition: width .25s ease, background-color .25s ease, opacity .25s ease;
}

.showcase-progress-overlay .ofertas-dot:hover {
    background: rgba(255,255,255,.62);
}

.showcase-progress-overlay .ofertas-dot.active {
    width: 40px;
    background: #fff;
}

.showcase-progress-overlay .ofertas-dot:focus-visible {
    outline: 2px solid rgba(255,255,255,.8);
    outline-offset: 4px;
}

/* Tablet */
@media (max-width: 991px) and (min-width: 641px) {
    .showcase-carousel-progress.showcase-progress-overlay {
        bottom: 14px;
        padding: 4px 0;
    }

    .showcase-progress-overlay .ofertas-dots {
        gap: 7px;
    }

    .showcase-progress-overlay .ofertas-dot {
        width: 20px;
        height: 4px;
    }

    .showcase-progress-overlay .ofertas-dot.active {
        width: 34px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .showcase-carousel-progress.showcase-progress-overlay {
        bottom: 12px;
        padding: 3px 0;
    }

    .showcase-progress-overlay .ofertas-dots {
        gap: 6px;
    }

    .showcase-progress-overlay .ofertas-dot {
        width: 18px;
        height: 3px;
    }

    .showcase-progress-overlay .ofertas-dot.active {
        width: 30px;
    }
}

/* Telas muito pequenas */
@media (max-width: 380px) {
    .showcase-carousel-progress.showcase-progress-overlay {
        bottom: 10px;
    }

    .showcase-progress-overlay .ofertas-dots {
        gap: 5px;
    }

    .showcase-progress-overlay .ofertas-dot {
        width: 14px;
        height: 3px;
    }

    .showcase-progress-overlay .ofertas-dot.active {
        width: 24px;
    }
}


/* ============================================================
   RAPIX v124 — NOVO FUNDO DO SHOWCASE + ILUMINAÇÃO DO ELEMENTO
   Baseado no CSS enviado pelo usuário, adaptado para a estrutura
   atual do showcase.
   ============================================================ */
.person-showcase .showcase-banner-slide {
    background: transparent;
}

.person-showcase .showcase-banner-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        #07172e 0%,
        #050d1b 45%,
        #112b56 100%
    );
}

/* Contêiner equivalente ao .elemento-iluminado */
.person-showcase .showcase-banner-visual,
.person-showcase .showcase-banner-visual--cutout,
.person-showcase .showcase-banner-visual--tv {
    position: relative;
    isolation: isolate;
    align-self: end;
}

/* Luz de estúdio atrás do elemento */
.person-showcase .showcase-banner-visual::before,
.person-showcase .showcase-banner-visual--cutout::before,
.person-showcase .showcase-banner-visual--tv::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    inset: -12% -38% -10%;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 38% 28% at 50% 20%,
            rgba(42, 112, 245, 0.72) 0%,
            rgba(30, 88, 205, 0.4) 45%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 36% 49% at 25% 53%,
            rgba(32, 103, 233, 0.7) 0%,
            rgba(23, 75, 174, 0.38) 48%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 34% 49% at 78% 52%,
            rgba(45, 119, 250, 0.72) 0%,
            rgba(27, 88, 200, 0.4) 48%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 50% 30% at 50% 85%,
            rgba(25, 84, 192, 0.44) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 65% 80% at 50% 48%,
            rgba(25, 72, 153, 0.46) 0%,
            rgba(31, 67, 121, 0.18) 52%,
            transparent 100%
        );
    filter: blur(19px);
}

.person-showcase .showcase-banner-image {
    background: transparent;
}

@media (max-width: 600px) {
    .person-showcase .showcase-banner-visual::before,
    .person-showcase .showcase-banner-visual--cutout::before,
    .person-showcase .showcase-banner-visual--tv::before {
        filter: blur(14px);
    }
}

/* ============================================================
   RAPIX v125 — ILUMINAÇÃO PRECISA DOS ELEMENTOS DO SHOWCASE
   A luz agora acompanha a própria arte transparente, em vez de
   ficar solta no fundo do banner. O drop-shadow usa o canal alpha
   do PNG, mantendo a iluminação perfeitamente alinhada ao elemento.
   ============================================================ */
.person-showcase .showcase-banner-visual,
.person-showcase .showcase-banner-visual--cutout,
.person-showcase .showcase-banner-visual--tv {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

/* Remove a iluminação genérica anterior */
.person-showcase .showcase-banner-visual::before,
.person-showcase .showcase-banner-visual--cutout::before,
.person-showcase .showcase-banner-visual--tv::before {
    display: none;
    content: none;
}

/* A própria silhueta do PNG gera o brilho: assim a luz nunca se
   desloca em relação à pessoa, mascotes, TV ou demais elementos. */
.person-showcase .showcase-banner-image {
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 0 9px rgba(18, 112, 255, .78))
        drop-shadow(0 0 24px rgba(16, 101, 255, .52))
        drop-shadow(0 0 48px rgba(15, 84, 235, .30));
}

/* Pequena luz difusa adicional atrás de cada arte. Os valores são
   específicos de cada composição para que o halo fique centralizado
   no elemento e não no espaço vazio do banner. */
.person-showcase .showcase-banner-visual--mascotes::after,
.person-showcase .showcase-banner-visual--musica::after,
.person-showcase .showcase-banner-visual--marca::after,
.person-showcase .showcase-banner-visual--tv::after,
.person-showcase .showcase-banner-visual--movel::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 76%;
    height: 76%;
    left: 24%;
    top: 15%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(29, 105, 255, .48) 0%,
        rgba(23, 91, 226, .27) 34%,
        rgba(16, 73, 190, .12) 52%,
        transparent 74%
    );
    filter: blur(22px);
    opacity: .9;
}

.person-showcase .showcase-banner-visual--mascotes::after {
    left: 29%;
    top: 17%;
    width: 68%;
    height: 72%;
}

.person-showcase .showcase-banner-visual--musica::after {
    left: 28%;
    top: 13%;
    width: 70%;
    height: 80%;
}

.person-showcase .showcase-banner-visual--marca::after {
    left: 18%;
    top: 17%;
    width: 78%;
    height: 70%;
}

.person-showcase .showcase-banner-visual--tv::after {
    left: 24%;
    top: 12%;
    width: 74%;
    height: 80%;
}

.person-showcase .showcase-banner-visual--movel::after {
    left: 28%;
    top: 14%;
    width: 68%;
    height: 78%;
}

@media (max-width: 640px) {
    .person-showcase .showcase-banner-image {
        filter:
            drop-shadow(0 0 7px rgba(18, 112, 255, .72))
            drop-shadow(0 0 18px rgba(16, 101, 255, .45))
            drop-shadow(0 0 34px rgba(15, 84, 235, .25));
    }

    .person-showcase .showcase-banner-visual--mascotes::after,
    .person-showcase .showcase-banner-visual--musica::after,
    .person-showcase .showcase-banner-visual--marca::after,
    .person-showcase .showcase-banner-visual--tv::after,
    .person-showcase .showcase-banner-visual--movel::after {
        width: 82%;
        height: 78%;
        left: 9%;
        top: 9%;
        filter: blur(17px);
    }
}


/* ============================================================
   RAPIX v131 — BANNER 3 DO SHOWCASE PREENCHENDO MELHOR A ÁREA
   Ajuste do slide com imagem única para ocupar 100% do banner.
   ============================================================ */
.showcase-banner-slide--image-only .showcase-banner-link,
.showcase-banner-inner--image-only,
.showcase-banner-visual--image-only {
    min-height: clamp(340px, 38.75vw, 620px);
}

.showcase-banner-inner--image-only {
    padding: 0;
}

.showcase-banner-visual--image-only {
    padding: 0;
}

.person-showcase .showcase-banner-visual--marca.showcase-banner-visual--image-only {
    justify-content: stretch;
    align-items: stretch;
}

.person-showcase .showcase-banner-visual--image-only .showcase-banner-image,
.person-showcase .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    transform: none;
}

@media (max-width: 640px) {
    .showcase-banner-slide--image-only .showcase-banner-link,
    .showcase-banner-inner--image-only,
    .showcase-banner-visual--image-only {
        min-height: 320px;
    }

    .showcase-banner-inner--image-only,
    .showcase-banner-visual--image-only {
        padding: 0;
        margin: 0;
    }

    .person-showcase .showcase-banner-visual--image-only .showcase-banner-image,
    .person-showcase .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: center center;
    }
}


/* ============================================================
   RAPIX v134 — ÍCONES DE PRODUTOS SEM NOME + PREÇO EM DESTAQUE
   1) Remove o nome ao lado/abaixo de cada ícone de produto incluso
      (mantém apenas os ícones), em todos os cards das duas abas.
   2) Ícones passam a ficar agrupados e mais próximos entre si
      (flex com gap curto), em vez de espalhados pela largura toda
      do card — e isso também resolve a sobreposição que ocorria
      no card de 5 produtos (Conecta 700) no layout em grid antigo.
   3) Preço com destaque visual maior para chamar mais atenção.
   ============================================================ */

/* 1) Nomes ocultos (funciona para o ícone em <i> e para o ícone em imagem) */
.produto-mini > b {
    display: none;
}

/* 2) Ícones agrupados e próximos, com uma distância curta e uniforme */
.oferta-products,
.oferta-products-three,
.oferta-products-four,
.oferta-products-five {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 0;
}

.produto-mini {
    gap: 0;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .oferta-products,
    .oferta-products-three,
    .oferta-products-four,
    .oferta-products-five {
        gap: 9px;
    }
}

/* 3) Preço com destaque: cartucho com leve gradiente da marca,
      barra de acento lateral e valor maior. */
.oferta-price-zone {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 100, 22, .09), rgba(47, 107, 255, .07));
    border: 1px solid rgba(47, 107, 255, .16);
    border-radius: 14px;
    padding: 12px 16px 10px 20px;
    margin: 2px 0 16px;
    overflow: hidden;
}

.oferta-price-zone::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ff7a1a, #2f6bff);
}

.oferta-price-label {
    color: #ff6416;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.oferta-price-v2 strong {
    font-size: 2.55rem;
    text-shadow: 0 2px 14px rgba(47, 107, 255, .22);
}

.oferta-price-v2 b {
    font-size: 2.55rem;
}

@media (max-width: 640px) {
    .oferta-price-zone {
        padding: 10px 14px 8px 18px;
    }
    .oferta-price-v2 strong,
    .oferta-price-v2 b {
        font-size: 2.15rem;
    }
}


/* ============================================================
   RAPIX v136 — SLIDE 1 (GRUPO DE MASCOTES) COM LAYOUT CENTRALIZADO
   Layout exclusivo deste slide: um único texto centralizado acima
   da imagem, e a imagem do grupo de mascotes centralizada abaixo.
   Não afeta nenhum outro slide do showcase.
   ============================================================ */
.showcase-banner-inner--group {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: clamp(8px, 1.4vw, 20px);
    justify-items: center;
    align-items: stretch;
    padding: 0 clamp(24px, 4vw, 60px);
}

.showcase-banner-content--group {
    max-width: 920px;
    padding: 0;
    text-align: center;
}

.showcase-banner-content--group h2 {
    max-width: 820px;
    margin: 0 auto;
    text-wrap: balance;
}

.showcase-banner-visual--group {
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    padding-top: 0;
}

.person-showcase .showcase-banner-visual--group {
    align-self: auto;
}

.person-showcase .showcase-banner-visual--group .showcase-banner-image {
    width: auto;
    height: auto;
    max-width: min(100%, 1500px);
    max-height: clamp(230px, 29vw, 440px);
    object-fit: contain;
    object-position: center bottom;
    transform: none;
}

/* Recentraliza o brilho ambiente atrás do grupo (antes calculado para
   a imagem ficar mais à direita, no layout de duas colunas). */
.person-showcase .showcase-banner-visual--group::after {
    left: 15%;
    top: 12%;
    width: 70%;
    height: 80%;
}

@media (max-width: 991px) {
    .showcase-banner-inner--group {
        padding: 0 32px;
    }
    .person-showcase .showcase-banner-visual--group .showcase-banner-image {
        max-height: 360px;
    }
}

@media (max-width: 640px) {
    .showcase-banner-inner--group {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        padding: 0 18px;
        align-items: stretch;
    }
    .showcase-banner-content--group {
        max-width: 100%;
        padding: 0 6px;
        text-align: center;
    }
    .showcase-banner-content--group h2 {
        max-width: 100%;
        font-size: clamp(1.7rem, 8vw, 2.3rem);
    }
    .showcase-banner-visual--group {
        min-height: 0;
        margin: 0;
    }
    .person-showcase .showcase-banner-visual--group {
        align-self: auto;
    }
    .person-showcase .showcase-banner-visual--group .showcase-banner-image {
        max-width: 148%;
        max-height: 280px;
        width: auto;
    }
    .person-showcase .showcase-banner-visual--group::after {
        left: 10%;
        top: 10%;
        width: 80%;
        height: 82%;
    }
}


/* ============================================================
   RAPIX v143 — AJUSTE FINO MOBILE DOS BANNERS 1, 2 E 5
   1) Banner 1: imagem centralizada no meio no mobile.
   2) Banner 2: imagem centralizada no meio no mobile.
   3) Banner 5: bloco inteiro mais centralizado, com texto e imagem
      bem equilibrados no mobile.
   ============================================================ */
@media (max-width: 640px) {
    /* Banner 1 */
    .person-showcase .showcase-banner-slide--group .showcase-banner-inner--group {
        grid-template-rows: auto auto;
        align-content: center;
        justify-items: center;
        gap: 8px;
        padding: 0 20px;
    }

    .person-showcase .showcase-banner-slide--group .showcase-banner-content--group {
        padding: 34px 8px 4px;
        text-align: center;
    }

    .person-showcase .showcase-banner-slide--group .showcase-banner-visual--group {
        min-height: 250px;
        margin: 0;
        justify-content: center;
        align-items: center;
    }

    .person-showcase .showcase-banner-slide--group .showcase-banner-visual--group .showcase-banner-image {
        max-width: 138%;
        max-height: 258px;
        width: auto;
        height: auto;
        margin: 0 auto;
        object-position: center center;
        transform: none;
    }

    /* Banner 2 */
    .person-showcase .showcase-banner-slide:nth-child(2) .showcase-banner-visual--musica {
        min-height: 250px;
        margin: 0;
        justify-content: center;
        align-items: center;
    }

    .person-showcase .showcase-banner-slide:nth-child(2) .showcase-banner-visual--musica .showcase-banner-image {
        max-width: 132%;
        max-height: 292px;
        width: auto;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        transform: none;
    }

    .person-showcase .showcase-banner-slide:nth-child(2) .showcase-banner-visual--musica::after {
        left: 14%;
        top: 10%;
        width: 72%;
        height: 78%;
    }

    /* Banner 5 */
    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-inner {
        grid-template-rows: auto auto;
        align-content: center;
        justify-items: center;
        gap: 6px;
        padding: 0 22px;
    }

    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-content {
        max-width: 100%;
        padding: 34px 10px 8px;
        text-align: center;
    }

    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-content h2,
    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-visual--movel {
        min-height: 250px;
        margin: 0;
        justify-content: center;
        align-items: center;
    }

    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-visual--movel .showcase-banner-image {
        max-width: 126%;
        max-height: 260px;
        width: auto;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        transform: none;
    }

    .person-showcase .showcase-banner-slide:nth-child(5) .showcase-banner-visual--movel::after {
        left: 16%;
        top: 12%;
        width: 68%;
        height: 76%;
    }
}


/* ============================================================
   RAPIX v144 — SUAVIZAÇÃO DO BANNER 1 + CENTRALIZAÇÃO BANNER 3
   1) Banner 1: efeito de fumaça/blur azul na borda inferior da imagem.
   2) Banner 3: imagem centralizada no meio do banner.
   ============================================================ */

/* Banner 3 — centralização geral da arte */
.person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--marca.showcase-banner-visual--image-only {
    display: flex;
    justify-content: center;
    align-items: center;
}

.person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
    object-fit: contain;
    object-position: center center;
}

@media (max-width: 640px) {
    /* Banner 1 — fumaça azul na base da imagem */
    .person-showcase .showcase-banner-slide--group .showcase-banner-visual--group {
        position: relative;
        overflow: visible;
    }

    .person-showcase .showcase-banner-slide--group .showcase-banner-visual--group::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 88%;
        height: 62px;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 1;
        border-radius: 999px;
        background:
            radial-gradient(ellipse at center,
                rgba(16, 25, 232, 0.42) 0%,
                rgba(12, 23, 141, 0.28) 38%,
                rgba(8, 20, 95, 0.16) 62%,
                rgba(8, 20, 95, 0) 100%);
        filter: blur(16px);
    }

    .person-showcase .showcase-banner-slide--group .showcase-banner-visual--group .showcase-banner-image {
        position: relative;
        z-index: 2;
    }

    /* Banner 3 — arte bem no meio do banner */
    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-link,
    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-inner--image-only,
    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--image-only {
        min-height: 320px;
    }

    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-inner--image-only {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
    }

    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--marca.showcase-banner-visual--image-only {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
        width: auto;
        height: auto;
        max-width: 94%;
        max-height: 248px;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        transform: none;
    }
}


/* ============================================================
   RAPIX v146 — REMOVER 1º COMBO + CENTRALIZAR BANNER 3 NO MOBILE
   ============================================================ */
@media (max-width: 640px) {
    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 320px;
    }

    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-inner--image-only {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 320px;
        padding: 0 14px;
    }

    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--marca.showcase-banner-visual--image-only {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 320px;
        margin: 0 auto;
        inset: auto;
        transform: none;
    }

    .person-showcase .showcase-banner-slide:nth-child(3) .showcase-banner-visual--marca.showcase-banner-visual--image-only .showcase-banner-image {
        display: block;
        width: auto;
        height: auto;
        max-width: 92%;
        max-height: 250px;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        transform: none;
        left: auto;
        right: auto;
    }
}