@import url("/Style%20Library/devgn-nm-all/style/cores-nm-root.css");
@import url("/Style%20Library/devgn-nm-all/style/escala-nm-root.css");
@import url("/Style%20Library/devgn-nm-all/style/fonts-nm-root.css");
@import url("/Style%20Library/devgn-nm-all/style/titulos-nm-root.css");

/* Gerado por MISC/entregas/gerar-prod.py a partir de Documents/styles/home-v20261014.css. Não editar: altere o original e gere de novo. */

/* ==========================================================
   BASE DA NOVA HOME
   ========================================================== */
:root {
    --ease: cubic-bezier(.22, 1, .36, 1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--caixa-ui-branco);
    color: var(--caixa-azul-profundo);
    font-family: var(--fonte-texto)
}

.caixa-home {
    overflow: hidden
}

/* Outras webparts da página aplicam fonte direto em
   a, p, li, div e span. Dentro das nossas seções esses elementos herdam a fonte
   do pai. Especificidade (0,0,2): vence o seletor solto delas (0,0,1) e perde
   para qualquer regra com classe nossa. */
:where(._efr_sp_section) :is(a, p, li, div, span, th, td):not(svg) {
    font-family: inherit;
    font-weight: inherit
}

.caixa-home button,
.caixa-home a {
    font: inherit
}

.caixa-home button {
    border: 0
}

.caixa-home img {
    display: block
}

.caixa-home h2,
.caixa-home h3,
.caixa-home h4,
.caixa-home p {
    margin-top: 0
}

.caixa-home a {
    color: inherit
}

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO HERO — DESTAQUES CAIXA                                            */
/* //                                                                          */
/* //  Todas as regras da hero (.home-hero*) estão entre este cabeçalho e o    */
/* //  marcador "FIM DA SEÇÃO — HERO". Mobile/tablet ≤999px (conteúdo preso à  */
/* //  base, Figma 2385:3379) · desktop ≥1000px (Figma 2385:3449/2385:4221).   */
/* //  Cada slide: fundo (imagem), título (imagem ou <h1>), texto e CTA. A     */
/* //  rotação dura --hero-interval e é dirigida pela animação da barra de     */
/* //  progresso (o JS troca de slide no animationend).                        */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

/* Desktop (Figma 1920px): pausa em y 106, área do título de 648 × 368px em
   y 170, texto 33px abaixo dela, CTA 40px abaixo do texto e 159px até a base:
   896px de altura, com título em imagem ou em <h1> (Figma 2385:3449/2385:4221). */
.home-hero {
    --hero-interval: 6000ms;
    --hero-margem: max(20px, calc((100% - 1640px) / 2));
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 var(--scale-200) var(--scale-200);
    background: var(--caixa-azul-profundo);
    color: var(--caixa-ui-porcelana)
}

.home-hero,
.home-hero * {
    box-sizing: border-box
}

/* Slides empilhados na mesma célula do grid: a hero fica com a altura do
   maior slide; a troca é um crossfade só de opacidade. */
.home-hero__slides {
    display: grid
}

.home-hero__slide {
    position: relative;
    display: flex;
    min-height: 896px;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .8s
}

.home-hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1), visibility 0s
}

/* Slot de imagem do fundo (Figma: retângulo #000D25 no lugar da foto). */
.home-hero__fundo,
.home-hero__fundo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%
}

.home-hero__fundo img {
    object-fit: cover;
    object-position: center
}

/* A área do título tem sempre 368px: imagem menor ou <h1> ficam na base dela,
   então texto e CTA não mudam de lugar entre os slides. */
.home-hero__conteudo {
    position: relative;
    display: grid;
    width: 100%;
    padding: 170px var(--hero-margem) 159px;
    grid-template-rows: minmax(var(--scale-2300), auto) auto auto;
    align-content: start;
    justify-items: start
}

.home-hero__titulo-imagem,
.home-hero__titulo {
    align-self: end
}

/* Título em imagem: até 648 × 368px (Figma), sem distorcer. */
.home-hero .home-hero__titulo-imagem {
    display: block;
    width: auto;
    max-width: min(100%, var(--scale-4050));
    height: auto;
    max-height: var(--scale-2300)
}

/* Título em texto (até 35 caracteres): H1 dos roots, Bold no Figma. */
.home-hero .home-hero__titulo {
    max-width: 650px;
    margin: 0;
    color: var(--titulo-h1-cor);
    font-family: var(--fonte-display);
    font-size: var(--titulo-h1-desktop);
    font-weight: var(--peso-bold);
    line-height: 4.625rem;
    overflow-wrap: break-word;
    /* Figma 2385:4221: duas linhas terminam 40px antes do fim da área. */
    padding-bottom: 40px
}

.home-hero .home-hero__texto {
    max-width: 650px;
    margin: 33px 0 0;
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-32);
    font-weight: var(--peso-regular);
    line-height: 2.375rem;
    letter-spacing: .03125rem
}

/* CTA da hero (Figma 2061:1581, "CTA Hero"): pílula azul de 335 × 50px. */
.home-hero .home-hero__cta {
    display: inline-flex;
    width: 335px;
    max-width: 100%;
    min-height: 50px;
    margin-top: 40px;
    padding: 0 var(--scale-150);
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--caixa-azul-principal);
    border-radius: var(--radius-pill);
    background: var(--caixa-azul-principal);
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-texto);
    font-size: 1.125rem;
    font-weight: var(--peso-medium);
    line-height: normal;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease
}

.home-hero .home-hero__cta-icone {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px
}

.home-hero .home-hero__cta:focus-visible {
    outline: 3px solid var(--caixa-azul-claro);
    outline-offset: 2px
}

/* Hover sobre fundo escuro: contorno Porcelana, sem preenchimento. */
@media (hover: hover) and (pointer: fine) {
    .home-hero .home-hero__cta:hover {
        border-color: var(--caixa-ui-porcelana);
        background: transparent
    }
}

.home-hero__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* Hero com um slide só: o script marca a pausa e o paginador com hidden. */
.home-hero .home-hero__pause[hidden],
.home-hero .home-hero__pager[hidden] {
    display: none
}

/* Pausar/Reproduzir (Figma: no topo, separado do paginador): círculo de 44px
   com o ícone e o rótulo ao lado. É o primeiro item da hero no Tab. */
.home-hero .home-hero__pause {
    position: absolute;
    z-index: 3;
    top: 106px;
    left: var(--hero-margem);
    display: flex;
    min-height: var(--control-min-height);
    padding: 0 var(--scale-150) 0 0;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    font-weight: var(--peso-medium);
    line-height: normal;
    cursor: pointer
}

.home-hero__pause-icone {
    display: grid;
    width: var(--control-min-height);
    height: var(--control-min-height);
    flex: 0 0 var(--control-min-height);
    place-items: center;
    border-radius: 50%;
    transition: background-color .2s ease
}

.home-hero__icon {
    display: block;
    grid-area: 1 / 1;
    width: 20px;
    height: 20px
}

/* Tocando: ícone de pausa e rótulo "Pausar"; pausado: play e "Reproduzir".
   As versões azuis aparecem sobre o círculo Porcelana (hover/foco). */
.home-hero__pause .home-hero__icon--pause-hover,
.home-hero__pause .home-hero__icon--play,
.home-hero__pause .home-hero__icon--play-hover,
.home-hero__pause[data-estado="pausado"] .home-hero__icon--pause,
.home-hero__pause .home-hero__pause-rotulo--reproduzir,
.home-hero__pause[data-estado="pausado"] .home-hero__pause-rotulo--pausar {
    display: none
}

.home-hero__pause[data-estado="pausado"] .home-hero__icon--play,
.home-hero__pause[data-estado="pausado"] .home-hero__pause-rotulo--reproduzir {
    display: block
}

.home-hero .home-hero__pause:focus-visible {
    outline: 3px solid var(--caixa-azul-claro);
    outline-offset: 2px
}

.home-hero__pause:focus-visible .home-hero__pause-icone {
    background: var(--caixa-ui-porcelana)
}

.home-hero__pause:focus-visible .home-hero__icon--pause,
.home-hero__pause:focus-visible .home-hero__icon--play {
    display: none
}

.home-hero__pause:focus-visible:not([data-estado="pausado"]) .home-hero__icon--pause-hover,
.home-hero__pause[data-estado="pausado"]:focus-visible .home-hero__icon--play-hover {
    display: block
}

/* Paginador (Figma 2410:6413): 192 × 44px direto sobre o fundo, sem pílula;
   setas e ponto ativo Porcelana, pontos inativos Blue 20. */
.home-hero__pager {
    position: absolute;
    z-index: 3;
    right: var(--hero-margem);
    bottom: 119px;
    display: flex;
    height: var(--control-min-height);
    padding: 0 12px;
    align-items: center;
    gap: 4px
}

.home-hero__arrow {
    display: grid;
    width: var(--control-min-height);
    height: var(--control-min-height);
    flex: 0 0 var(--control-min-height);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease
}

/* Hover e foco como na pausa: círculo Porcelana com a seta azul. */
.home-hero__arrow .home-hero__icon--seta-hover,
.home-hero__arrow:focus-visible .home-hero__icon--seta {
    display: none
}

.home-hero__arrow:focus-visible {
    background: var(--caixa-ui-porcelana);
    outline: 3px solid var(--caixa-azul-claro);
    outline-offset: 2px
}

.home-hero__arrow:focus-visible .home-hero__icon--seta-hover {
    display: block
}

@media (hover: hover) and (pointer: fine) {
    .home-hero__arrow:hover {
        background: var(--caixa-ui-porcelana)
    }

    .home-hero__arrow:hover .home-hero__icon--seta {
        display: none
    }

    .home-hero__arrow:hover .home-hero__icon--seta-hover {
        display: block
    }

    .home-hero__pause:hover .home-hero__pause-icone {
        background: var(--caixa-ui-porcelana)
    }

    /* Rótulo "Pausar"/"Reproduzir" sublinhado no hover (pedido da Caixa, 30/10). */
    .home-hero__pause:hover .home-hero__pause-rotulo {
        text-decoration: underline
    }

    .home-hero__pause:hover .home-hero__icon--pause,
    .home-hero__pause:hover .home-hero__icon--play {
        display: none
    }

    .home-hero__pause:hover:not([data-estado="pausado"]) .home-hero__icon--pause-hover,
    .home-hero__pause[data-estado="pausado"]:hover .home-hero__icon--play-hover {
        display: block
    }
}

/* Itens fixos de 24px (Figma): o ponto ativo vira uma trilha de 24 × 8px
   dentro do próprio item, sem deslocar os vizinhos. */
.home-hero__dots {
    display: flex;
    height: var(--control-min-height);
    align-items: center
}

.home-hero__dot {
    position: relative;
    width: 24px;
    height: var(--control-min-height);
    flex: 0 0 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

.home-hero__dot-track {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--caixa-azul-claro);
    transform: translate(-50%, -50%);
    transition: width .45s cubic-bezier(.4, 0, .2, 1)
}

.home-hero__dot[aria-current="true"] .home-hero__dot-track {
    width: 24px
}

/* Barra de progresso do slide ativo: cresce durante --hero-interval. */
.home-hero__dot-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--caixa-ui-porcelana)
}

.home-hero__dot[aria-current="true"] .home-hero__dot-progress {
    animation: home-hero-progress var(--hero-interval) linear forwards
}

.home-hero.is-paused .home-hero__dot-progress {
    animation-play-state: paused
}

@keyframes home-hero-progress {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.home-hero__dot:focus-visible {
    outline: 3px solid var(--caixa-azul-claro);
    outline-offset: -3px
}

/* Acima do Acesso Rápido, que sobe 86px (na escala de 1920): o paginador fica
   33px acima do card (o Figma de 28/10 mostra 30px, com o card subindo 89px;
   o encaixe do Acesso Rápido aprovado ficou como está). */
@media(min-width:1000px) and (max-width:1919px) {
    .home-hero__pager {
        bottom: calc(86 * 100vw / 1920 + 33px)
    }
}

/* Margem lateral igual à do card do Acesso Rápido, para conteúdo e paginador
   alinharem com ele. */
@media(min-width:1000px) and (max-width:1279px) {
    .home-hero {
        --hero-margem: 40px
    }
}

@media(min-width:1280px) and (max-width:1919px) {
    .home-hero {
        --hero-margem: calc(140 * 100vw / 1920)
    }
}

/* Mobile e tablet (≤999px), Figma 2385:3379: hero de 648px no mínimo, pausa
   a 94px do topo e conteúdo preso à base (CTA 104px acima do fim). */
@media(max-width:999px) {
    /* Fica acima do Acesso Rápido, cujo fundo começa 32px por trás dos cantos.
       Começa por trás da navbar do SharePoint, como no desktop (Figma 2385:3379:
       navbar de 74px sobre a hero); se a navbar mudar de altura, ajustar
       --hero-navbar. */
    .home-hero {
        z-index: 1;
        --hero-margem: 20px;
        --hero-navbar: 74px;
        margin-top: calc(-1 * var(--hero-navbar))
    }

    .home-hero__slide {
        min-height: 648px
    }

    .home-hero__conteudo {
        display: flex;
        padding: 158px var(--hero-margem) 104px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end
    }

    .home-hero .home-hero__titulo {
        max-width: 100%;
        padding-bottom: 0;
        font-size: var(--titulo-h1-mobile);
        line-height: 3.75rem
    }

    .home-hero .home-hero__texto {
        max-width: 100%;
        margin-top: 20px;
        font-size: 1.125rem;
        line-height: 1.3;
        letter-spacing: 0
    }

    .home-hero .home-hero__cta {
        width: 100%;
        min-height: var(--control-min-height);
        margin-top: 30px;
        font-size: var(--fonte-16)
    }

    .home-hero .home-hero__pause {
        top: 94px
    }

    .home-hero__pager {
        right: 50%;
        bottom: 20px;
        transform: translateX(50%)
    }
}

@media(prefers-reduced-motion:reduce) {
    .home-hero__slide,
    .home-hero__slide.is-active,
    .home-hero__dot-track {
        transition: none
    }

    /* Sem rotação automática: a barra do slide ativo fica cheia. */
    .home-hero__dot[aria-current="true"] .home-hero__dot-progress {
        width: 100%;
        animation: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — HERO                                                     */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO ACESSO RÁPIDO                                                     */
/* //                                                                          */
/* //  Todas as regras da seção (.quick*) estão entre este cabeçalho e o       */
/* //  marcador "FIM DA SEÇÃO — ACESSO RÁPIDO". Breakpoints iguais aos do Tem  */
/* //  Caixa: mobile ≤599px · tablet 600–999px · desktop compacto 1000–1279px  */
/* //  · desktop 1280–1919px (escala do Figma de 1920px) · ≥1920px (px).      */
/* //  No desktop o card sobe 86px (na escala de 1920) sobre a hero; no        */
/* //  mobile/tablet o fundo começa 32px por trás dos cantos da hero.          */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

/* Desktop (Figma 2204:1125): card de 1640 × 346px, raio 32px. */
.quick {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), 1640px);
    margin: -86px auto 0;
    overflow: hidden;
    border-radius: var(--scale-200);
}

.quick,
.quick * {
    box-sizing: border-box
}

.quick__background,
.quick__background img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%
}

.quick__background img {
    object-fit: cover
}

.quick__inner {
    position: relative;
    display: flex;
    min-height: 346px;
    padding: 40px 80px 80px;
    flex-direction: column;
    align-items: center;
    gap: 40px
}

/* Figma: H2 Desktop, Caixa Display Medium 44px, Blue 120. */
.quick h2 {
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: var(--fonte-44);
    font-style: var(--estilo-normal);
    font-weight: var(--peso-medium);
    line-height: 3.125rem;
    text-align: center
}

.quick__grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 220px);
    justify-content: space-between
}

/* Tile Button: porcelana, raio 32px, Shadow 600. Hover/foco: Blue Primary com
   texto e ícone em porcelana (Figma 2152:1609). Especificidade acima de
   regras de base como `.caixa-home a { color: inherit }`. */
.quick .quick__tile {
    display: flex;
    min-height: 136px;
    padding: var(--space-xl);
    flex-direction: column;
    gap: var(--space-md);
    border-radius: var(--scale-200);
    background: var(--caixa-ui-porcelana);
    box-shadow: 0 8px 28px -6px rgba(255, 192, 107, .24), 0 18px 88px -4px rgba(255, 218, 169, .12);
    color: var(--caixa-azul-principal);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease
}

/* O ícone (em produção, o SVG da GECOM na biblioteca do site) vem do HTML em
   --icone e é usado como máscara: a cor é a do texto do atalho, azul e, no
   hover, Porcelana. Um url() relativo em variável resolve a partir deste CSS,
   por isso o caminho local no HTML sobe duas pastas (../../); em produção é
   absoluto. */
.quick__icon {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background-color: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat
}

/* Figma: BT, Caixa Text Medium 16px, numa caixa de 40px alinhada à base.
   O texto quebra linha em vez de usar reticências. */
.quick__label {
    display: flex;
    min-height: 40px;
    align-items: flex-end;
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    font-style: var(--estilo-normal);
    font-weight: var(--peso-medium);
    line-height: 1.25
}

.quick__tile:focus-visible {
    background: var(--caixa-azul-principal);
    color: var(--caixa-ui-porcelana);
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

@media (hover: hover) and (pointer: fine) {
    .quick__tile:hover {
        background: var(--caixa-azul-principal);
        color: var(--caixa-ui-porcelana)
    }
}

/* Mobile (Figma 2204:928): fundo de largura total que começa 32px por trás da
   hero; título H2 Mobile 20px/1.4; tiles em 2 colunas com Shadow 300. */
@media(max-width:999px) {
    .quick {
        z-index: 0;
        width: 100%;
        margin-top: -32px;
        border-radius: 0 0 var(--space-xl) var(--space-xl)
    }

    .quick__inner {
        min-height: 0;
        padding: 62px 20px 50px;
        gap: var(--space-lg)
    }

    .quick h2 {
        display: flex;
        min-height: 50px;
        align-items: center;
        font-size: var(--fonte-20);
        line-height: 1.4
    }

    .quick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md)
    }

    .quick .quick__tile {
        min-height: 120px;
        padding: var(--space-md);
        box-shadow: 0 6px 14px -6px rgba(0, 19, 100, .12), 0 10px 32px -4px rgba(0, 19, 100, .1)
    }
}

/* Tablet (sem frame no Figma): estrutura do mobile, 3 colunas, título 28px. */
@media(min-width:600px) and (max-width:999px) {
    .quick__inner {
        padding: 62px var(--space-5xl) 50px
    }

    .quick h2 {
        font-size: var(--titulo-h4-tablet)
    }

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

/* Desktop compacto: 6 tiles não cabem com o texto legível; 3 colunas. */
@media(min-width:1000px) and (max-width:1279px) {
    .quick {
        width: calc(100% - 80px);
        margin-top: calc(-86 * 100vw / 1920)
    }

    .quick__inner {
        min-height: 0;
        padding: var(--space-5xl) var(--space-5xl) 60px;
        gap: var(--space-5xl)
    }

    .quick h2 {
        font-size: var(--fonte-40)
    }

    .quick__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-md)
    }
}

/* Desktop 1280–1919px: composição de 1920px escalada (--u = 1px do Figma). */
@media(min-width:1280px) and (max-width:1919px) {
    .quick {
        --u: calc(100vw / 1920);
        width: calc(1640 * var(--u));
        margin-top: calc(-86 * var(--u));
        border-radius: calc(32 * var(--u))
    }

    .quick__inner {
        min-height: calc(346 * var(--u));
        padding: calc(40 * var(--u)) calc(80 * var(--u)) calc(80 * var(--u));
        gap: calc(40 * var(--u))
    }

    .quick h2 {
        font-size: calc(44 * var(--u));
        line-height: calc(50 * var(--u))
    }

    .quick__grid {
        grid-template-columns: repeat(6, calc(220 * var(--u)))
    }

    .quick .quick__tile {
        min-height: calc(136 * var(--u));
        padding: calc(24 * var(--u));
        gap: calc(16 * var(--u));
        border-radius: calc(32 * var(--u))
    }

    .quick__icon {
        width: calc(32 * var(--u));
        height: calc(32 * var(--u));
        flex-basis: calc(32 * var(--u))
    }

    .quick__label {
        min-height: calc(40 * var(--u));
        font-size: max(0.875rem, calc(16 * var(--u)))
    }
}

@media(prefers-reduced-motion:reduce) {
    .quick .quick__tile {
        transition: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — ACESSO RÁPIDO                                            */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO PLANO BOM É PLANO QUE SAI DO PAPEL                                */
/* //                                                                          */
/* //  Todas as regras da seção (.plans-home*) estão entre este cabeçalho e o  */
/* //  marcador "FIM DA SEÇÃO — PLANO BOM". Desktop (≥1000px): grade do Figma  */
/* //  escrita em --u (1px do Figma): 1px a partir de 1920px e 100vw / 1920    */
/* //  entre 1000 e 1919px. Mobile/tablet (≤999px): carrossel do Figma, com    */
/* //  setas e pontos (home-v20261014-plano.js).                               */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

.plans-home {
    --u: 1px;
    position: relative;
    overflow: hidden;
    padding-top: calc(113 * var(--u));
    color: var(--caixa-ui-preto);
}

.plans-home,
.plans-home * {
    box-sizing: border-box
}

/* Fundo ilustrado (Figma 2095:2892): 1920 × 600px atrás da segunda fileira. */
.plans-home__bg {
    position: absolute;
    z-index: 0;
    top: calc(1078 * var(--u));
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-radius: 0 0 calc(32 * var(--u)) calc(32 * var(--u));
    pointer-events: none
}

.plans-home__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Título H1 Desktop (Caixa Display Bold 56/66) e Body 1 Desktop (36/42). */
.plans-home__heading {
    position: relative;
    z-index: 1;
    text-align: center
}

.plans-home .plans-home__heading h2 {
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: calc(56 * var(--u));
    font-style: var(--estilo-normal);
    font-weight: var(--peso-bold);
    line-height: calc(66 * var(--u));
    letter-spacing: 0
}

.plans-home .plans-home__heading p {
    width: calc(600 * var(--u));
    min-height: calc(90 * var(--u));
    /* Figma: caixa do título de 115px (duas linhas de 66px = 132px) e 40px até
       o subtítulo; com a altura real do título, 23px dão a mesma posição. */
    margin: calc(23 * var(--u)) auto 0;
    font-family: var(--fonte-texto);
    font-size: max(var(--fonte-16), calc(36 * var(--u)));
    font-weight: var(--peso-regular);
    line-height: calc(42 * var(--u));
    letter-spacing: calc(.5 * var(--u))
}

.plans-home__viewport {
    position: relative;
    z-index: 1
}

/* Grade 780 | 50 | 482 (Figma): Habitação ocupa a primeira fileira com o texto
   à direita; Crédito e Cartões têm o texto abaixo da foto. */
.plans-home__grid {
    display: grid;
    width: calc(1312 * var(--u));
    margin: calc(60 * var(--u)) auto 0;
    grid-template-columns: calc(780 * var(--u)) calc(50 * var(--u)) calc(482 * var(--u));
    row-gap: calc(40 * var(--u))
}

.plans-home .plans-home__card {
    display: flex;
    margin: 0;
    flex-direction: column
}

.plans-home .plans-home__card--habitacao {
    display: grid;
    grid-column: 1 / 4;
    grid-template-columns: calc(780 * var(--u)) calc(440 * var(--u));
    column-gap: calc(50 * var(--u))
}

.plans-home__card--credito {
    grid-column: 1
}

.plans-home__card--cartoes {
    grid-column: 3
}

.plans-home__media {
    display: block;
    height: calc(420 * var(--u));
    overflow: hidden;
    border-radius: calc(24 * var(--u))
}

.plans-home__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.plans-home__card--credito .plans-home__media img {
    object-position: center top
}

/* Texto: H2 Desktop (44px), Body 2 Desktop (30/42) e "Conhecer" (BT 18px).
   O bloco reserva o espaço da grade; só o link (título + texto + "Conhecer")
   é clicável e recebe hover/foco — a foto não. */
.plans-home__body {
    min-height: calc(380 * var(--u));
    padding: calc(32 * var(--u)) 0
}

.plans-home .plans-home__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(32 * var(--u));
    color: inherit;
    text-decoration: none
}

.plans-home__card--credito .plans-home__body {
    width: calc(541 * var(--u));
    padding-left: calc(101 * var(--u))
}

.plans-home__card--cartoes .plans-home__body {
    width: calc(440 * var(--u))
}

/* Crédito e Cartões: o "Conhecer" desce para a base do bloco, na mesma
   altura nos dois cards, qualquer que seja o tamanho do texto. */
.plans-home__card--credito .plans-home__body,
.plans-home__card--cartoes .plans-home__body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column
}

.plans-home__card--credito .plans-home__link,
.plans-home__card--cartoes .plans-home__link {
    flex: 1 0 auto
}

.plans-home__card--credito .plans-home__action,
.plans-home__card--cartoes .plans-home__action {
    margin-top: auto
}

.plans-home .plans-home__body h3 {
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: calc(44 * var(--u));
    font-style: var(--estilo-normal);
    font-weight: var(--peso-medium);
    line-height: 1.2
}

.plans-home .plans-home__body p {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: max(var(--fonte-16), calc(30 * var(--u)));
    font-weight: var(--peso-regular);
    line-height: calc(42 * var(--u));
    letter-spacing: calc(.5 * var(--u))
}

.plans-home__action {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--u));
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-texto);
    font-size: max(0.875rem, calc(18 * var(--u)));
    font-weight: var(--peso-medium);
    line-height: 1;
    transition: color .2s ease
}

.plans-home__action-icon {
    display: grid;
    width: var(--control-min-height);
    height: var(--control-min-height);
    flex: 0 0 var(--control-min-height);
    place-items: center;
    border-radius: 50%;
    background: var(--caixa-azul-principal);
    transition: background-color .2s ease, box-shadow .2s ease
}

.plans-home__action-icon img {
    display: block;
    grid-area: 1 / 1;
    width: 24px;
    height: 24px
}

.plans-home__action-icon .plans-home__action-icon-hover {
    display: none
}

/* Hover/foco (Figma 2061:1581): "Conhecer" sublinhado e o círculo invertido,
   transparente com borda e seta Blue Primary (fundo transparente a pedido da
   Caixa). */
.plans-home .plans-home__link:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 8px;
    border-radius: var(--scale-025)
}

.plans-home__link:focus-visible .plans-home__action-text {
    text-decoration: underline
}

.plans-home__link:focus-visible .plans-home__action-icon {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
}

.plans-home__link:focus-visible .plans-home__action-icon img {
    display: none
}

.plans-home__link:focus-visible .plans-home__action-icon .plans-home__action-icon-hover {
    display: block
}

@media (hover: hover) and (pointer: fine) {
    .plans-home__link:hover .plans-home__action-text {
        text-decoration: underline
    }

    .plans-home__link:hover .plans-home__action-icon {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }

    .plans-home__link:hover .plans-home__action-icon img {
        display: none
    }

    .plans-home__link:hover .plans-home__action-icon .plans-home__action-icon-hover {
        display: block
    }
}

.plans-home__pager,
.plans-home__status {
    display: none
}

.plans-home__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap
}

/* Desktop 1000–1919px: a grade de 1920px escalada pela largura. */
@media(min-width:1000px) and (max-width:1919px) {
    .plans-home {
        --u: calc(100vw / 1920)
    }
}

/* Mobile e tablet (Figma 2204:847): título 30/36, subtítulo 18/1.3, carrossel
   de cards de 267 × 398px e paginador alinhado à esquerda. */
@media(max-width:999px) {
    .plans-home {
        padding: 58px 0 56px
    }

    /* Arte de 375 × 330px no canto direito; o resto do fundo é o creme dela. */
    .plans-home__bg {
        top: auto;
        bottom: 0;
        height: 330px;
        border-radius: 0 0 var(--space-xl) var(--space-xl);
        background: #ffe6d4
    }

    /* O PNG traz os cantos de baixo arredondados em branco; recortados aqui,
       o creme do fundo aparece por baixo quando a tela passa de 375px. */
    .plans-home__bg img {
        width: 375px;
        margin-left: auto;
        border-radius: 0 0 var(--space-xl) var(--space-xl);
        object-fit: fill
    }

    .plans-home__heading {
        padding: 0 20px
    }

    .plans-home .plans-home__heading h2 {
        font-size: 1.875rem;
        line-height: var(--scale-225)
    }

    .plans-home .plans-home__heading p {
        width: auto;
        min-height: 60px;
        margin-top: 18px;
        font-size: 1.125rem;
        line-height: 1.3;
        letter-spacing: 0
    }

    .plans-home__viewport {
        margin-top: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-inline: 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain
    }

    .plans-home__viewport::-webkit-scrollbar {
        display: none
    }

    .plans-home__grid {
        display: flex;
        width: max-content;
        margin: 0;
        padding: 0 20px;
        gap: var(--space-md)
    }

    /* Figma mobile (2044:7878): Cartões, Habitação, Crédito. O HTML mantém a
       ordem do desktop; o JS percorre os cards na ordem visual. */
    .plans-home__card--cartoes {
        order: -1
    }

    .plans-home .plans-home__card,
    .plans-home .plans-home__card--habitacao {
        display: flex;
        width: 267px;
        min-height: 398px;
        padding-bottom: var(--space-md);
        flex: 0 0 267px;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--caixa-ui-porcelana);
        border-radius: var(--space-xl);
        background: var(--caixa-ui-porcelana);
        scroll-snap-align: start
    }

    .plans-home__media {
        height: 187px;
        flex: 0 0 187px;
        border-radius: var(--space-xl) var(--space-xl) 0 0
    }

    .plans-home__body,
    .plans-home__card--credito .plans-home__body,
    .plans-home__card--cartoes .plans-home__body {
        display: flex;
        width: auto;
        min-height: 0;
        padding: 0;
        flex: 1 0 auto;
        flex-direction: column
    }

    .plans-home .plans-home__link {
        width: 100%;
        flex: 1 0 auto;
        gap: 0
    }

    .plans-home .plans-home__body h3 {
        padding: var(--space-md) var(--space-xl) 0;
        font-size: var(--fonte-20);
        line-height: 1.4
    }

    .plans-home .plans-home__body p {
        padding: var(--space-md) var(--space-xl) 0;
        font-size: 1.125rem;
        line-height: 1.3;
        letter-spacing: 0
    }

    .plans-home__action {
        width: 100%;
        margin-top: auto;
        padding: var(--space-md) var(--space-xl) 0;
        justify-content: flex-end;
        gap: var(--space-md);
        font-size: var(--fonte-16)
    }

    .plans-home .plans-home__link:focus-visible {
        outline-offset: -3px;
        border-radius: 0 0 var(--space-xl) var(--space-xl)
    }

    .plans-home__pager {
        position: relative;
        z-index: 1;
        display: flex;
        width: max-content;
        margin: 20px 0 0 20px;
        align-items: center;
        gap: 4px
    }

    .plans-home__pager[hidden] {
        display: none
    }

    .plans-home__arrow {
        display: grid;
        width: var(--control-min-height);
        height: var(--control-min-height);
        flex: 0 0 var(--control-min-height);
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        transition: background-color .2s ease, box-shadow .2s ease
    }

    /* Em loop, as setas nunca ficam no limite: um ícone só. */
    .plans-home__arrow img {
        display: block;
        width: 20px;
        height: 20px
    }

    .plans-home__arrow:focus-visible {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal);
        outline: 3px solid var(--caixa-azul-principal);
        outline-offset: 2px
    }

    .plans-home__dots {
        display: flex;
        height: var(--control-min-height);
        align-items: center;
        gap: 4px
    }

    /* Área de clique de 24px (mínimo da WCAG 2.2); o traço visível continua
       com 12px, centralizado. */
    .plans-home__dot {
        position: relative;
        width: var(--scale-150);
        height: var(--control-min-height);
        flex: 0 0 var(--scale-150);
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        transition: width .45s cubic-bezier(.4, 0, .2, 1), flex-basis .45s cubic-bezier(.4, 0, .2, 1)
    }

    .plans-home__dot::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--scale-075);
        height: 8px;
        border-radius: var(--radius-pill);
        background: var(--caixa-azul-profundo);
        content: "";
        transform: translate(-50%, -50%);
        transition: background-color .3s ease
    }

    .plans-home__dot[aria-current="true"],
    .plans-home__dot[aria-current="true"]::after {
        width: var(--scale-150);
        flex-basis: var(--scale-150)
    }

    .plans-home__dot[aria-current="true"]::after {
        background: var(--caixa-azul-principal)
    }

    .plans-home__dot:focus-visible {
        outline: 3px solid var(--caixa-azul-principal);
        outline-offset: -3px
    }
}

/* Hover (Figma 2061:1581): círculo transparente com borda Blue Primary; a seta
   continua azul. */
@media (max-width:999px) and (hover: hover) and (pointer: fine) {
    .plans-home__arrow:hover {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }
}

@media(prefers-reduced-motion:reduce) {
    .plans-home__action,
    .plans-home__action-icon,
    .plans-home__arrow,
    .plans-home__dot,
    .plans-home__dot::after {
        transition: none
    }
}

/* Cópias do carrossel infinito (home-v20261014-plano.js): só aparecem no modo
   infinito do celular/tablet; na grade do desktop, nunca. */
.plans-home .plans-home__grid .plans-home__card--clone {
    display: none
}

@media(max-width:999px) {
    .plans-home.is-infinite .plans-home__grid .plans-home__card--clone {
        display: flex
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — PLANO BOM                                                */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO QUEM PLANEJA HOJE COLHE AMANHÃ                                    */
/* //                                                                          */
/* //  Todas as regras da seção (.future*) estão entre este cabeçalho e o      */
/* //  marcador "FIM DA SEÇÃO — QUEM PLANEJA HOJE". Desktop (≥1000px) escrito  */
/* //  em --u (1px do Figma): 1px a partir de 1920px e 100vw / 1920 entre 1000  */
/* //  e 1919px. Mobile/tablet (≤999px): slides de largura total. Abas,        */
/* //  setas, pontos e pausa em home-v20261014-futuro.js.                      */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

.future {
    --u: 1px;
    position: relative;
    overflow: hidden;
    padding: calc(121.5 * var(--u)) 0 calc(127 * var(--u));
    color: var(--caixa-ui-preto);
}

.future,
.future * {
    box-sizing: border-box
}

/* Título H1 Desktop (56/66): no Figma, caixa de 115px centrada em y 187,5;
   com as duas linhas reais (132px) o topo fica em 121,5px. Subtítulo Body 1. */
.future__heading {
    text-align: center
}

.future .future__heading h2 {
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: calc(56 * var(--u));
    font-style: var(--estilo-normal);
    font-weight: var(--peso-bold);
    line-height: calc(66 * var(--u));
    letter-spacing: 0
}

.future .future__heading p {
    width: calc(1015 * var(--u));
    min-height: calc(90 * var(--u));
    margin: calc(21.5 * var(--u)) auto 0;
    font-family: var(--fonte-texto);
    font-size: max(16px, calc(36 * var(--u)));
    font-weight: var(--peso-regular);
    line-height: calc(42 * var(--u));
    letter-spacing: calc(.5 * var(--u))
}

/* Abas (Figma 2044:6118): pílula de 600 × 70px, borda Blue 20. */
.future__tabs {
    display: flex;
    width: calc(600 * var(--u));
    height: calc(70 * var(--u));
    margin: calc(50 * var(--u)) auto 0;
    padding: calc(8 * var(--u));
    border: 1px solid var(--caixa-azul-claro);
    position: relative;
    border-radius: 1000px;
    background: var(--caixa-ui-porcelana)
}

.future .future__tab {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    height: 100%;
    padding: 4px 12px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 1000px;
    background: transparent;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-texto);
    font-size: max(14px, calc(18 * var(--u)));
    font-weight: var(--peso-medium);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease, color .35s ease .1s
}

.future .future__tab[aria-selected="true"] {
    background: var(--caixa-azul-principal);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    color: var(--caixa-ui-porcelana)
}

/* Pílula única que desliza até a aba ativa, como o indicador do contador. O JS
   mede a aba e liga .is-ready; sem JS, a aba ativa pinta o próprio fundo. */
/* Área de clique de no mínimo 44px de altura: a aba visível é mais baixa
   (36–39px), então um pseudo-elemento invisível a estende na vertical, sem
   alcançar as abas vizinhas. */
.future .future__tab::before {
    position: absolute;
    top: min(0px, calc(50% - 22px));
    right: 0;
    bottom: min(0px, calc(50% - 22px));
    left: 0;
    content: ""
}

.future__tabs-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tab-width, 0);
    height: var(--tab-height, 0);
    border-radius: 1000px;
    background: var(--caixa-azul-principal);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    opacity: 0;
    transform: translate(var(--tab-x, 0), var(--tab-y, 0));
    pointer-events: none
}

.future__tabs.is-ready .future__tabs-indicator {
    opacity: 1;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1)
}

.future__tabs.is-ready .future__tab[aria-selected="true"] {
    background: transparent;
    box-shadow: none
}

.future .future__tab:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

/* Abas sublinhadas no hover (pedido da Caixa, 30/10). */
@media (hover: hover) and (pointer: fine) {
    .future .future__tab:hover {
        text-decoration: underline
    }
}

/* Slides de largura total, lado a lado. Na troca, o JS rola a ilustração e
   atrasa os cards (--card-lag): primeiro vai a imagem, depois o texto. */
.future__viewport {
    margin-top: calc(70 * var(--u));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain
}

.future__viewport::-webkit-scrollbar {
    display: none
}

.future__track {
    display: flex
}

.future__slide {
    position: relative;
    width: 100%;
    height: calc(600 * var(--u));
    flex: 0 0 100%;
    scroll-snap-align: start
}

/* Ilustração (Figma 2044:6109): 1550 × 600px a partir da borda esquerda. */
.future__art {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--u));
    width: calc(1550 * var(--u));
    height: 100%
}

.future__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Card (Figma 2044:6110): 500 × 326px, Cream 40, raio 24px. Hover/foco:
   borda de 2px Blue Primary (Figma 2152:1558). */
.future .future__card {
    position: absolute;
    top: calc(126 * var(--u));
    left: calc(1229 * var(--u));
    display: flex;
    width: calc(500 * var(--u));
    min-height: calc(326 * var(--u));
    padding: calc(50 * var(--u)) calc(41 * var(--u)) calc(50 * var(--u)) calc(42.67 * var(--u));
    flex-direction: column;
    border-radius: calc(24 * var(--u));
    z-index: 1;
    background: var(--caixa-laranja-light-14);
    color: inherit;
    text-decoration: none;
    translate: var(--card-lag, 0px) 0;
    transition: box-shadow .2s ease
}

.future .future__card h4 {
    margin: 0;
    color: var(--titulo-h4-cor);
    font-family: var(--fonte-display);
    /* H4 dos roots (32px) a partir de 1920px; abaixo, escala com a seção. */
    font-size: min(var(--titulo-h4-desktop), calc(32 * var(--u)));
    font-style: var(--titulo-estilo);
    font-weight: var(--titulo-h4-peso);
    line-height: var(--linha-display)
}

.future .future__card p {
    margin: calc(16 * var(--u)) 0 0;
    font-family: var(--fonte-texto);
    font-size: max(16px, calc(24 * var(--u)));
    font-weight: var(--peso-regular);
    line-height: calc(30 * var(--u))
}

.future__card-icon {
    display: grid;
    width: var(--control-min-height);
    height: var(--control-min-height);
    margin-top: auto;
    flex: 0 0 var(--control-min-height);
    place-items: center;
    align-self: flex-end;
    border-radius: 50%;
    background: var(--caixa-azul-principal);
    transition: background-color .2s ease, box-shadow .2s ease
}

.future__card-icon img {
    display: block;
    grid-area: 1 / 1;
    width: 24px;
    height: 24px
}

.future__card-icon .future__card-icon-hover {
    display: none
}

.future .future__card:focus-visible {
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal);
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

/* Hover/foco (Figma 2061:1581): borda no card e círculo invertido, transparente
   com borda e seta Blue Primary. */
.future .future__card:focus-visible .future__card-icon {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
}

.future .future__card:focus-visible .future__card-icon img {
    display: none
}

.future .future__card:focus-visible .future__card-icon .future__card-icon-hover {
    display: block
}

@media (hover: hover) and (pointer: fine) {
    .future .future__card:hover {
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }

    .future .future__card:hover .future__card-icon {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }

    .future .future__card:hover .future__card-icon img {
        display: none
    }

    .future .future__card:hover .future__card-icon .future__card-icon-hover {
        display: block
    }
}

/* Paginador (Figma 2044:5972): setas, pontos em itens de 24px com indicador
   único e pausa; termina a 450px da borda direita (x 1470 no Figma). */
.future__pager {
    display: flex;
    width: max-content;
    margin: calc(40 * var(--u)) calc(450 * var(--u)) 0 auto;
    align-items: center;
    gap: 4px
}

.future__arrow,
.future__pause {
    display: grid;
    width: var(--control-min-height);
    height: var(--control-min-height);
    flex: 0 0 var(--control-min-height);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease
}

.future__icon {
    display: block;
    grid-area: 1 / 1;
    width: 20px;
    height: 20px
}

.future__pause .future__icon--play,
.future__pause[aria-pressed="true"] .future__icon--pause {
    display: none
}

.future__pause[aria-pressed="true"] .future__icon--play {
    display: block
}

/* Hover/foco (Figma 2061:1581): círculo transparente com borda Blue Primary; o
   ícone continua azul. */
.future__arrow:focus-visible,
.future__pause:focus-visible {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal);
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

@media (hover: hover) and (pointer: fine) {
    .future__arrow:hover,
    .future__pause:hover {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }
}

.future__dots {
    position: relative;
    display: flex;
    height: var(--control-min-height);
    align-items: center
}

.future__dot {
    position: relative;
    width: 24px;
    height: var(--control-min-height);
    flex: 0 0 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

.future__dot::after {
    position: absolute;
    top: calc(50% - 6px);
    left: 6px;
    width: 12px;
    height: 8px;
    border-radius: 1000px;
    background: var(--caixa-azul-claro);
    content: ""
}

.future__dot:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: -3px
}

/* Indicador do ponto ativo: desliza por translate e encolhe/incha na troca,
   como no Tem Caixa. */
.future__dots-indicator {
    position: absolute;
    top: calc(50% - 6px);
    left: 0;
    width: 24px;
    height: 8px;
    border-radius: 1000px;
    background: var(--caixa-azul-principal);
    pointer-events: none;
    translate: calc(var(--active-dot, 0) * 24px) 0;
    transition: translate .45s cubic-bezier(.4, 0, .2, 1)
}

.future__dots-indicator.is-moving {
    animation: future-dot-grow .5s cubic-bezier(.45, 0, .25, 1)
}

@keyframes future-dot-grow {
    0% {
        scale: 1 1
    }

    30% {
        scale: .6 1
    }

    100% {
        scale: 1 1
    }
}

.future__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap
}

/* Desktop 1000–1919px: a composição de 1920px escalada pela largura. */
@media(min-width:1000px) and (max-width:1919px) {
    .future {
        --u: calc(100vw / 1920)
    }
}

/* Mobile e tablet (Figma 2204:822): título 30/36, subtítulo 18/1.3, abas de
   335 × 56px, slides com ilustração de 375 × 230px e card de 267 × 221px. */
@media(max-width:999px) {
    .future {
        padding: 59px 0 66px
    }

    .future__heading {
        padding: 0 20px
    }

    .future .future__heading h2 {
        font-size: 30px;
        line-height: 36px
    }

    .future .future__heading p {
        width: auto;
        max-width: 335px;
        min-height: 60px;
        margin-top: 18px;
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 0
    }

    .future__heading p br {
        display: none
    }

    /* 8px mais larga que o Figma (335px) para "Open Finance" selecionada não
       ficar colada na pílula. */
    .future__tabs {
        width: min(343px, calc(100% - 2 * var(--space-md)));
        height: 56px;
        margin-top: 10px;
        padding: 0 10px;
        align-items: center
    }

    /* Figma 2044:7864: as duas primeiras abas na largura do texto, com 12px
       de folga, e a última com o espaço que sobra. */
    .future .future__tab {
        height: 36px;
        flex: 0 0 auto;
        font-size: var(--fonte-16)
    }

    .future .future__tab:last-of-type {
        padding-inline: var(--space-xxs);
        flex: 1 1 0
    }

    .future__viewport {
        margin-top: 20px
    }

    .future__slide {
        display: flex;
        height: auto;
        flex-direction: column;
        align-items: center
    }

    .future__art {
        position: relative;
        left: 0;
        width: 100%;
        height: clamp(230px, calc(230 * 100vw / 375), 380px);
        overflow: hidden;
        border-radius: var(--space-xl)
    }

    .future .future__card {
        position: relative;
        top: auto;
        left: auto;
        width: 267px;
        min-height: 221px;
        margin-top: -30px;
        padding: var(--space-xl);
        border-radius: var(--space-xl)
    }

    /* H4 dos roots também no celular, a pedido da Caixa: o card cresce na
       altura (min-height), não na largura. */
    .future .future__card h4 {
        font-size: var(--titulo-h4-mobile)
    }

    /* O botão fica na base do card; a margem garante 16px mínimos até ele. */
    .future .future__card p {
        margin: var(--space-md) 0 var(--space-md);
        font-size: 18px;
        line-height: 1.3
    }

    .future__pager {
        margin: 30px auto 0
    }
}

/* Abaixo de 375px as abas de 16px não cabem: texto de 14px, 8px de folga e a
   caixa um pouco mais larga. */
@media(max-width:374px) {
    .future__tabs {
        width: calc(100% - 2 * var(--space-sm))
    }

    .future .future__tab,
    .future .future__tab:last-of-type {
        padding-inline: var(--space-xs);
        flex: 1 1 auto;
        font-size: 0.875rem
    }
}

/* Ordem do Tab: no HTML a pausa vem primeiro (logo depois do título), para ser
   o primeiro Tab da seção; na tela o paginador fica abaixo do carrossel e a
   pausa no fim dele. */
.future {
    display: flex;
    flex-direction: column
}

.future__pager,
.future__pause {
    order: 1
}

.future__status {
    order: 2
}

@media(prefers-reduced-motion:reduce) {
    .future .future__tab,
    .future .future__card,
    .future__tabs-indicator,
    .future__tabs.is-ready .future__tabs-indicator,
    .future__arrow,
    .future__pause,
    .future__dots-indicator,
    .future__dots-indicator.is-moving {
        transition: none;
        animation: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — QUEM PLANEJA HOJE                                        */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO LOTERIAS CAIXA                                                    */
/* //                                                                          */
/* //  Todas as regras da seção (.lottery*) estão entre este cabeçalho e o     */
/* //  marcador "FIM DA SEÇÃO — LOTERIAS". Desktop (≥1000px): foto da seção    */
/* //  em --u (1px do Figma a partir de 1920px; 100vw / 1920 entre 1000 e      */
/* //  1919px) e card de 432px. Mobile/tablet (≤999px): foto no topo e         */
/* //  painel creme. Resultados e seletor: home-v20261014-loterias.js.         */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

/* Desktop (Figma 2044:5934 e 2385:2657): foto de 1920px de largura, raio 32px,
   com o card de 432px a 140px da esquerda. O card cresce com o jogo (Loteca)
   e a seção acompanha. Cor do jogo em --lottery-cor (data-jogo, pelo JS). */
.lottery {
    --u: 1px;
    --lottery-cor: var(--caixa-loterias-wcag-mega-sena);
    position: relative;
    display: flex;
    min-height: calc(1000 * var(--u));
    align-items: center;
    padding: calc(90 * var(--u)) calc(140 * var(--u));
    color: var(--caixa-ui-preto)
}

@media (min-width:1000px) and (max-width:1919px) {
    .lottery {
        --u: calc(100vw / 1920)
    }
}

.lottery,
.lottery * {
    box-sizing: border-box
}

.lottery [hidden] {
    display: none !important
}

/* Cores dos jogos: tokens de loterias dos roots; os jogos sem token usam o
   hex do Figma. */
.lottery[data-jogo="lotofacil"] { --lottery-cor: var(--caixa-loterias-wcag-lotofacil) }
.lottery[data-jogo="quina"] { --lottery-cor: var(--caixa-loterias-wcag-quina) }
.lottery[data-jogo="lotomania"] { --lottery-cor: var(--caixa-loterias-wcag-lotomania) }
.lottery[data-jogo="timemania"] { --lottery-cor: var(--caixa-loterias-wcag-timemania) }
.lottery[data-jogo="duplasena"] { --lottery-cor: var(--caixa-loterias-wcag-dupla-sena) }
.lottery[data-jogo="loteca"] { --lottery-cor: var(--caixa-loterias-wcag-loteca) }
.lottery[data-jogo="superSete"] { --lottery-cor: var(--caixa-loterias-wcag-super-sete) }
.lottery[data-jogo="diaDeSorte"] { --lottery-cor: #AE9319 }
.lottery[data-jogo="maisMilionaria"] { --lottery-cor: #2A3580 }
.lottery[data-jogo="federal"] { --lottery-cor: #103099 }

.lottery__picture {
    display: contents
}

/* Desktop: a foto aproxima quando a seção cresce (Loteca e outros jogos
   longos), em vez de mostrar mais céu. A moldura é um contêiner do tamanho
   da seção; a foto tem a largura da seção ou 1920/1700 da altura dela (o que
   for maior). O topo do rosto (y 950 da imagem de 2470px) fica a 310px do
   topo da seção (na escala de 1920), então ele continua no alto com zoom; o
   clamp() prende a foto às bordas para nunca sobrar fundo. Até ~1040px de
   altura não há zoom. */
@media(min-width:1000px) {
    .lottery__picture {
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        overflow: hidden;
        border-radius: var(--scale-200);
        container-type: size;
        /* A foto muda de posição no zoom: sem isto o navegador a usa como
           âncora de rolagem e a página rola sozinha na troca de jogo. */
        overflow-anchor: none
    }

    .lottery .lottery__photo {
        --foto-largura: max(100cqw, 100cqh * 1920 / 1700);
        --foto-altura: calc(var(--foto-largura) * 2470 / 1920);
        top: clamp(100cqh - var(--foto-altura), 100cqw * 310 / 1920 - var(--foto-altura) * 950 / 2470, 0px);
        right: auto;
        bottom: auto;
        left: calc(50cqw - var(--foto-largura) / 2);
        width: var(--foto-largura);
        max-width: none;
        height: var(--foto-altura);
        border-radius: 0;
        object-fit: fill
    }
}

.lottery__photo {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--scale-200);
    object-fit: cover;
    /* Foto alta: 40% mostra a mão inteira e o rosto nos jogos curtos. */
    object-position: 50% 40%
}

.lottery__card {
    position: relative;
    z-index: 1;
    display: flex;
    width: 432px;
    max-width: 100%;
    flex-direction: column
}

.lottery .lottery__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

/* Parte de cima (Porcelana): título, seletor e resultado. */
.lottery__panel {
    display: flex;
    flex-direction: column;
    gap: var(--scale-125);
    padding: var(--scale-150) var(--scale-150) var(--scale-075);
    border-radius: var(--scale-150) var(--scale-150) 0 0;
    background: var(--caixa-ui-porcelana)
}

.lottery__intro {
    display: flex;
    flex-direction: column;
    gap: var(--scale-125)
}

/* H1 Desktop (Caixa Display Bold 56/66) e Body 3 Desktop (Caixa Text 24/30). */
.lottery .lottery__intro h2 {
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: var(--fonte-56);
    font-style: var(--estilo-normal);
    font-weight: var(--peso-bold);
    line-height: 4.125rem;
    letter-spacing: 0
}

.lottery .lottery__intro > p {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: var(--fonte-24);
    font-weight: var(--peso-regular);
    line-height: 1.875rem
}

/* Seletor (Figma 2282:7000): botão pílula com borda Blue 20; aberto, borda
   de 2px Blue Primary e seta girada. A lista sobrepõe a página. */
.lottery__select {
    position: relative
}

.lottery .lottery__trigger {
    display: flex;
    width: 100%;
    margin: 0;
    padding: var(--scale-100) var(--scale-150);
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-100);
    border: 1px solid var(--caixa-azul-claro);
    border-radius: var(--radius-pill);
    background: var(--caixa-ui-porcelana);
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-texto);
    font-size: 1.125rem;
    font-weight: var(--peso-medium);
    line-height: normal;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease
}

.lottery .lottery__trigger[aria-expanded="true"] {
    border-color: var(--caixa-azul-principal);
    box-shadow: inset 0 0 0 1px var(--caixa-azul-principal)
}

.lottery .lottery__trigger:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

.lottery__chevron {
    display: block;
    width: var(--scale-275);
    height: var(--scale-275);
    flex: 0 0 var(--scale-275);
    padding: var(--scale-075);
    transition: transform .2s ease
}

.lottery__trigger[aria-expanded="true"] .lottery__chevron {
    transform: rotate(180deg)
}

.lottery .lottery__options {
    position: absolute;
    z-index: 5;
    top: calc(100% + var(--scale-050));
    right: 0;
    left: 0;
    margin: 0;
    padding: var(--scale-150);
    border: 2px solid var(--caixa-azul-principal);
    border-radius: var(--scale-150);
    background: var(--caixa-ui-porcelana);
    box-shadow: 0 14px 28px rgb(0 0 0 / 10%);
    list-style: none
}

.lottery .lottery__options [role="option"] {
    display: flex;
    min-height: var(--scale-275);
    margin: 0;
    padding: var(--scale-050) var(--scale-100);
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-050);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-medium);
    line-height: 1.3;
    letter-spacing: .016rem;
    cursor: pointer
}

.lottery .lottery__options [role="option"].is-active {
    border-color: var(--caixa-azul-principal)
}

@media (hover: hover) and (pointer: fine) {
    .lottery .lottery__options [role="option"]:hover {
        border-color: var(--caixa-azul-principal)
    }
}

.lottery .lottery__options [aria-selected="true"] {
    background: var(--caixa-azul-principal);
    color: var(--caixa-ui-porcelana)
}

.lottery__check {
    display: none;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border-radius: 50%;
    background: var(--caixa-ui-porcelana)
}

.lottery__check img {
    display: block;
    width: 20px;
    height: 20px
}

.lottery__options [aria-selected="true"] .lottery__check {
    display: grid
}

.lottery .lottery__status {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    line-height: 1.3
}

/* Resultado (Figma 2347:5175). */
.lottery__result {
    display: flex;
    flex-direction: column;
    gap: var(--scale-125)
}

/* H6 Desk Mob (Caixa Text Medium 24) na cor do jogo. */
.lottery .lottery__game {
    display: flex;
    margin: 0;
    align-items: center;
    gap: var(--scale-100);
    color: var(--lottery-cor);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-24);
    font-weight: var(--peso-medium);
    line-height: 1.5;
    letter-spacing: 0
}

.lottery__game-icon {
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px
}

.lottery__draw {
    display: flex;
    flex-direction: column;
    gap: var(--scale-050)
}

.lottery .lottery__label {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: 1.125rem;
    font-weight: var(--peso-regular);
    line-height: 1.3
}

/* H4 Desk Mob (Caixa Display Medium 34/1.4): 43px por número, linhas de sete
   com 6px; até seis números, uma linha de ponta a ponta. */
.lottery .lottery__numbers {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: var(--scale-125) 6px;
    color: var(--lottery-cor);
    font-family: var(--fonte-display);
    font-size: 2.125rem;
    font-weight: var(--peso-medium);
    line-height: 1.4;
    list-style: none;
    text-align: center
}

.lottery .lottery__numbers li {
    width: 2.6875rem;
    margin: 0;
    flex: 0 0 auto
}

.lottery .lottery__numbers.is-uma-linha {
    justify-content: space-between
}

/* Super Sete: colunas 1–7 e o número sorteado em cada uma. */
.lottery .lottery__columns {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-light);
    line-height: normal
}

.lottery .lottery__columns th,
.lottery .lottery__columns td {
    padding: var(--scale-050) 0;
    font-weight: var(--peso-light);
    text-align: center
}

.lottery .lottery__columns tr > :first-child {
    width: 4.375rem;
    text-align: left
}

.lottery .lottery__columns tr + tr td {
    color: var(--lottery-cor);
    font-weight: var(--peso-medium)
}

/* +Milionária: trevos de 40px com o número em Porcelana. */
.lottery__clovers {
    display: flex;
    flex-direction: column;
    gap: var(--scale-100)
}

.lottery .lottery__clovers ul {
    display: flex;
    margin: 0;
    padding: 0;
    gap: var(--scale-050);
    list-style: none
}

.lottery .lottery__clover {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0;
    place-items: center;
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-medium);
    line-height: 1
}

.lottery__clover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%
}

.lottery__clover span {
    position: relative
}

/* Federal: prêmios principais em tabela. */
.lottery__federal {
    display: flex;
    flex-direction: column;
    gap: var(--scale-100)
}

.lottery .lottery__federal h4 {
    margin: 0;
    color: var(--caixa-ui-preto);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-24);
    font-weight: var(--peso-medium);
    line-height: normal;
    letter-spacing: 0
}

.lottery .lottery__federal table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    line-height: normal;
    text-align: left
}

.lottery .lottery__federal th {
    padding: var(--scale-050) var(--scale-050) var(--scale-100) 0;
    font-weight: var(--peso-light)
}

.lottery .lottery__federal td {
    padding: var(--scale-100) var(--scale-050) var(--scale-100) 0;
    border-top: 1px solid var(--caixa-ui-neutra-75);
    color: var(--lottery-cor);
    font-weight: var(--peso-medium);
    white-space: nowrap
}

.lottery .lottery__federal tr > :last-child {
    padding-right: 0
}

.lottery .lottery__federal tbody tr:last-child td {
    border-bottom: 1px solid var(--caixa-ui-neutra-75)
}

/* Selos: faixa de 36px com o ícone de 46 × 46px à esquerda. */
.lottery .lottery__badge {
    position: relative;
    display: flex;
    min-height: 46px;
    margin: 0;
    padding-left: 46px;
    align-items: center;
    justify-content: center;
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    font-weight: var(--peso-regular);
    line-height: 1.3;
    text-align: center
}

.lottery__badge::before {
    position: absolute;
    inset: 5px 0;
    content: "";
    border-radius: var(--scale-075);
    background: var(--lottery-selo)
}

.lottery__badge > span {
    position: relative
}

.lottery .lottery__badge-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: var(--scale-075);
    background: var(--lottery-selo-icone)
}

.lottery__badge-icon img {
    display: block;
    width: 32px;
    height: 32px
}

/* Ganhadores em verde e Acumulado em laranja (cores trocadas a pedido da
   Caixa, 28/10/2026). Verdes do Figma, sem token nos roots. */
.lottery__badge--winners {
    --lottery-selo: #6CF5A3;
    --lottery-selo-icone: #054728
}

.lottery__badge--accumulated {
    --lottery-selo: var(--caixa-laranja-light-14);
    --lottery-selo-icone: var(--caixa-laranja-principal)
}

/* Loteca: 14 jogos; a marca na cor do jogo fica no vencedor ou, no empate,
   no quadrado do meio. */
.lottery .lottery__matches {
    margin: 0;
    padding: 0;
    list-style: none
}

.lottery .lottery__match {
    margin: 0
}

.lottery .lottery__match-title {
    margin: 0;
    padding: var(--scale-050);
    border-radius: var(--radius-md);
    background: var(--caixa-ui-neutra-90);
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-light);
    line-height: normal;
    text-align: center
}

.lottery .lottery__match-score {
    display: grid;
    min-height: 70px;
    margin: 0;
    grid-template-columns: 30px 1fr 20px 1fr 30px;
    align-items: center;
    column-gap: var(--scale-050);
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-light);
    line-height: 1.2;
    text-align: center
}

.lottery .lottery__goal {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 2px;
    background: var(--caixa-ui-neutra-75);
    font-weight: var(--peso-medium)
}

.lottery .lottery__draw-mark {
    width: 20px;
    height: 20px;
    border-radius: 2px
}

.lottery .lottery__goal.is-marcado,
.lottery .lottery__draw-mark.is-marcado {
    background: var(--lottery-cor);
    color: var(--caixa-ui-porcelana)
}

.lottery .lottery__team {
    overflow-wrap: break-word
}

/* Title Table (Caixa Display Light 16). */
.lottery .lottery__contest {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-light);
    line-height: normal
}

/* "Conferir detalhes" + círculo com seta; hover como nos outros cards. */
.lottery .lottery__details {
    display: flex;
    min-height: 49px;
    align-self: flex-end;
    align-items: center;
    gap: var(--scale-100);
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    font-weight: var(--peso-medium);
    line-height: normal;
    text-decoration: none
}

.lottery__details-icon {
    display: grid;
    width: var(--scale-275);
    height: var(--scale-275);
    flex: 0 0 var(--scale-275);
    place-items: center;
    border-radius: 50%;
    background: var(--caixa-azul-principal);
    transition: background-color .2s ease, box-shadow .2s ease
}

.lottery__details-icon img {
    display: block;
    grid-area: 1 / 1;
    width: 24px;
    height: 24px
}

.lottery .lottery__icon-hover {
    display: none
}

.lottery .lottery__details:focus-visible,
.lottery .lottery__play:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 4px
}

.lottery .lottery__details:focus-visible > span:first-child {
    text-decoration: underline
}

.lottery .lottery__details:focus-visible .lottery__details-icon {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
}

/* Parte de baixo (Blue 10): próximo sorteio, estimativa e "Jogar nas Loterias". */
.lottery__next {
    display: flex;
    flex-direction: column;
    gap: var(--scale-150);
    padding: var(--scale-150);
    border-radius: 0 0 var(--scale-150) var(--scale-150);
    background: var(--caixa-azul-light-14)
}

.lottery__estimate {
    display: flex;
    flex-direction: column;
    gap: var(--scale-100)
}

.lottery__estimate > img {
    display: block;
    width: 40px;
    height: 40px
}

.lottery .lottery__estimate p {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: var(--fonte-24);
    font-weight: var(--peso-regular);
    line-height: 1.875rem
}

.lottery .lottery__estimate .lottery__prize {
    color: var(--caixa-azul-profundo);
    font-family: var(--fonte-display);
    font-size: 2.125rem;
    font-weight: var(--peso-medium);
    line-height: 1.4;
    overflow-wrap: anywhere
}

.lottery .lottery__estimate .lottery__prize-note {
    font-family: var(--fonte-display);
    font-size: var(--fonte-16);
    font-weight: var(--peso-light);
    line-height: normal
}

.lottery .lottery__play {
    display: flex;
    min-height: var(--scale-350);
    padding: 0 var(--scale-150);
    align-items: center;
    justify-content: center;
    gap: var(--scale-075);
    border: 1px solid var(--caixa-azul-principal);
    border-radius: var(--radius-pill);
    background: var(--caixa-azul-principal);
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-texto);
    font-size: 1.125rem;
    font-weight: var(--peso-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease
}

.lottery__play img {
    display: block;
    width: 20px;
    height: 20px
}

/* Hover (não definido no Figma para o botão): fundo transparente, texto e
   seta azuis, como os botões das outras seções. */
@media (hover: hover) and (pointer: fine) {
    .lottery .lottery__details:hover > span:first-child {
        text-decoration: underline
    }

    .lottery .lottery__details:hover .lottery__details-icon {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }

    .lottery .lottery__details:hover .lottery__details-icon img,
    .lottery .lottery__play:hover img {
        display: none
    }

    .lottery .lottery__details:hover .lottery__details-icon .lottery__icon-hover,
    .lottery .lottery__play:hover .lottery__icon-hover {
        display: block
    }

    .lottery .lottery__play:hover {
        background: transparent;
        color: var(--caixa-azul-principal)
    }
}

.lottery .lottery__details:focus-visible .lottery__details-icon img {
    display: none
}

.lottery .lottery__details:focus-visible .lottery__details-icon .lottery__icon-hover {
    display: block
}

/* Mobile/tablet (Figma 2351:6520): foto de 300px no topo, painel creme de
   471px com título e seletor, e o card de 335px por cima, com a borda Blue
   20; "Jogar nas Loterias" sai do card e fica 20px abaixo dele. */
@media(max-width:999px) {
    .lottery {
        --lottery-foto: clamp(300px, 80vw, 480px);
        display: block;
        min-height: 0;
        padding: 0
    }

    .lottery::before {
        position: absolute;
        z-index: 0;
        top: var(--lottery-foto);
        right: 0;
        left: 0;
        height: 471px;
        content: "";
        border-radius: 0 0 var(--scale-150) var(--scale-150);
        background: var(--caixa-laranja-light-14)
    }

    .lottery__photo {
        position: relative;
        height: var(--lottery-foto);
        border-radius: var(--scale-150) var(--scale-150) 0 0
    }

    .lottery__card {
        width: min(100% - 40px, 432px);
        margin: var(--scale-125) auto 0
    }

    .lottery__panel {
        padding: 0;
        border-radius: 0;
        background: transparent
    }

    .lottery__intro {
        gap: .625rem
    }

    .lottery .lottery__intro h2 {
        font-size: 1.875rem;
        line-height: var(--scale-225)
    }

    .lottery .lottery__intro > p {
        font-size: 1.125rem;
        line-height: 1.3
    }

    .lottery .lottery__trigger {
        font-size: var(--fonte-16)
    }

    .lottery__result {
        padding: var(--scale-150) var(--scale-150) var(--scale-075);
        border: 1px solid var(--caixa-azul-claro);
        border-bottom: 0;
        border-radius: var(--scale-150) var(--scale-150) 0 0;
        background: var(--caixa-ui-porcelana)
    }

    .lottery.is-sem-estimativa .lottery__result {
        padding-bottom: var(--scale-150);
        border-bottom: 1px solid var(--caixa-azul-claro);
        border-radius: var(--scale-150)
    }

    /* Seis números por linha em 285px: 4px entre eles em vez de 6px. */
    .lottery .lottery__numbers {
        column-gap: var(--scale-025)
    }

    .lottery .lottery__details {
        margin-top: var(--scale-025)
    }

    /* Loteca: nomes como "GALATASARAY" não cabem nos 86px do Figma a 16px. */
    .lottery .lottery__match-score {
        column-gap: var(--scale-025)
    }

    .lottery .lottery__team {
        font-size: .875rem
    }

    .lottery__next {
        padding: 0;
        gap: var(--scale-125);
        border-radius: 0;
        background: transparent
    }

    .lottery__estimate {
        padding: var(--scale-075) var(--scale-150) var(--scale-150);
        border: 1px solid var(--caixa-azul-claro);
        border-radius: 0 0 var(--scale-150) var(--scale-150);
        background: var(--caixa-azul-light-14)
    }

    .lottery .lottery__estimate p {
        font-size: var(--fonte-16);
        line-height: 1.3
    }

    .lottery .lottery__estimate .lottery__prize {
        font-family: var(--fonte-texto);
        font-size: 1.625rem;
        font-weight: var(--peso-bold);
        line-height: normal
    }

    .lottery .lottery__play {
        font-size: var(--fonte-16)
    }
}

/* Alto contraste do Windows: fundos somem, então seleção, destaque e a marca
   da Loteca ganham cores do sistema e contorno. */
@media (forced-colors: active) {
    .lottery .lottery__options [role="option"].is-active {
        border-color: Highlight
    }

    .lottery .lottery__options [aria-selected="true"] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText
    }

    .lottery .lottery__goal.is-marcado,
    .lottery .lottery__draw-mark.is-marcado {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText
    }

    .lottery .lottery__trigger[aria-expanded="true"] {
        border-color: Highlight
    }
}

@media(prefers-reduced-motion:reduce) {
    .lottery__chevron,
    .lottery__trigger,
    .lottery__details-icon,
    .lottery .lottery__play {
        transition: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — LOTERIAS                                                 */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO TEM CAIXA PARA CADA MOMENTO DA SUA VIDA                           */
/* //                                                                          */
/* //  Todas as regras da seção (.solutions*) estão entre este cabeçalho e     */
/* //  o marcador "FIM DA SEÇÃO". Breakpoints usados aqui:                     */
/* //  mobile ≤599px (1 card) · tablet 600–999px (2 cards)                     */
/* //  desktop compacto 1000–1279px (2 cards) · desktop ≥1280px (3 cards)      */
/* //  1280–1919px escala a composição de 1920px; os limites estão no JS.      */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

.solutions-demo-page {
    margin: 0
}

.solutions,
.solutions * {
    box-sizing: border-box
}

.solutions button,
.solutions a {
    font: inherit
}

.solutions button {
    border: 0
}

.solutions {
    position: relative;
    width: 100%;
    height: 750px;
    overflow: hidden;
    background: var(--caixa-ui-branco);
    color: var(--caixa-azul-profundo);
    font-family: var(--fonte-texto);
    color-scheme: light;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --card-height: 448px;
    --title-height: 72px
}

.solutions__background {
    position: absolute;
    inset: 335px 0 0;
    border-radius: var(--scale-200) var(--scale-200) 0 0;
    background: var(--caixa-azul-profundo)
}

.solutions__layout {
    position: relative;
    width: min(calc(100% - 40px), 1640px);
    height: 100%;
    margin-inline: auto
}

.solutions h2 {
    position: absolute;
    z-index: 3;
    top: 60px;
    left: 80px;
    width: 412px;
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: var(--titulo-h2-desktop);
    font-style: var(--estilo-normal);
    font-weight: var(--peso-bold);
    line-height: var(--titulo-line-height);
    letter-spacing: 0
}

.solutions__mobile-scene {
    display: none
}

.solutions__keyboard-help {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.solutions__carousel {
    position: absolute;
    z-index: 4;
    top: 143px;
    left: 554px;
    width: 1086px;
    height: var(--card-height);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain
}

.solutions__carousel:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 4px;
    border-radius: var(--scale-150)
}

.solutions__carousel::-webkit-scrollbar {
    display: none
}

.solutions__track {
    display: flex;
    width: max-content;
    height: var(--card-height);
    align-items: stretch;
    gap: 30px
}

.solutions__card {
    position: relative;
    display: flex;
    flex: 0 0 342px;
    width: 342px;
    height: var(--card-height);
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--caixa-ui-neutra-95);
    border-radius: var(--scale-150);
    background: var(--caixa-ui-porcelana);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: translateZ(0);
    transition: transform .5s var(--ease), opacity .35s ease
}

.solutions__card::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    border: 2px solid var(--caixa-azul-principal);
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease
}

.solutions__card:focus-visible::after,
.solutions__card.is-keyboard-current::after {
    opacity: 1
}

@media (hover: hover) and (pointer: fine) {
    .solutions__card:hover::after {
        opacity: 1
    }
}

.solutions__media {
    position: relative;
    flex: 0 0 192px;
    height: 192px;
    overflow: hidden;
    border-radius: 1.4375rem 1.4375rem 0 0;
    background: var(--caixa-azul-light-14)
}

.solutions__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transition: transform .65s var(--ease)
}

.solutions__card:focus-visible .solutions__media img,
.solutions__card.is-keyboard-current .solutions__media img {
    transform: translateZ(0) scale(1.025)
}

@media (hover: hover) and (pointer: fine) {
    .solutions__card:hover .solutions__media img {
        transform: translateZ(0) scale(1.025)
    }
}

.solutions__body {
    position: relative;
    display: flex;
    min-height: 255px;
    padding: 24px 24px 68px;
    flex: 1;
    flex-direction: column;
    background: var(--caixa-ui-porcelana)
}

.solutions__body h5 {
    height: auto;
    min-height: var(--title-height);
    margin: 0;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-display);
    font-size: 1.625rem;
    font-style: var(--estilo-normal);
    font-weight: var(--peso-medium);
    line-height: var(--scale-225);
    overflow-wrap: anywhere;
    white-space: normal
}

.solutions__body p {
    margin: 8px 0 0;
    color: var(--caixa-ui-preto);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    font-style: var(--estilo-normal);
    font-weight: var(--peso-regular);
    line-height: var(--linha-titulo)
}

.solutions__action {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--caixa-azul-principal);
    font-family: var(--fonte-interativa);
    font-size: 1.125rem;
    font-style: var(--estilo-normal);
    font-weight: var(--peso-medium);
    line-height: var(--control-min-height)
}

.solutions__action-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--caixa-azul-principal);
    transition: background-color .25s ease, box-shadow .25s ease, transform .35s var(--ease)
}

.solutions__action-icon img {
    grid-area: 1 / 1;
    width: 24px;
    height: 24px
}

.solutions__action-icon .solutions__action-icon-hover {
    display: none
}

/* Hover/foco (Figma 2061:1581): círculo invertido, transparente com borda e seta
   Blue Primary; o "Conhecer" continua azul e ganha sublinhado, como no Plano
   bom. */
.solutions__card:focus-visible .solutions__action > span:first-child,
.solutions__card.is-keyboard-current .solutions__action > span:first-child {
    text-decoration: underline
}

@media (hover: hover) and (pointer: fine) {
    .solutions__card:hover .solutions__action > span:first-child {
        text-decoration: underline
    }
}

.solutions__card:focus-visible .solutions__action-icon,
.solutions__card.is-keyboard-current .solutions__action-icon {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal);
    transform: translateX(2px)
}

.solutions__card:focus-visible .solutions__action-icon img,
.solutions__card.is-keyboard-current .solutions__action-icon img {
    display: none
}

.solutions__card:focus-visible .solutions__action-icon .solutions__action-icon-hover,
.solutions__card.is-keyboard-current .solutions__action-icon .solutions__action-icon-hover {
    display: block
}

@media (hover: hover) and (pointer: fine) {
    .solutions__card:hover .solutions__action-icon {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal);
        transform: translateX(2px)
    }

    .solutions__card:hover .solutions__action-icon img {
        display: none
    }

    .solutions__card:hover .solutions__action-icon .solutions__action-icon-hover {
        display: block
    }
}

.solutions__card:focus-visible,
.solutions__arrow:focus-visible,
.solutions__dot:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: -3px
}

.solutions__card:focus-visible {
    z-index: 2;
    outline-width: 5px;
    outline-offset: -5px;
    box-shadow: inset 0 0 0 2px var(--caixa-ui-porcelana), 0 0 0 3px rgba(255, 154, 46, .35)
}

.solutions__pagination {
    position: absolute;
    z-index: 5;
    top: 641px;
    left: 554px;
    display: flex;
    width: 1086px;
    height: 56px;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.solutions__arrow {
    display: grid;
    width: 56px;
    height: 56px;
    padding: 0;
    flex: 0 0 56px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease
}

.solutions__arrow picture {
    display: block;
    width: 20px;
    height: 20px
}

.solutions__arrow img {
    display: block;
    width: 20px;
    height: 20px;
    opacity: .72;
    transition: opacity .2s ease, transform .32s var(--ease)
}

/* Hover e foco (Figma 2061:1581): círculo transparente com borda Blue Primary;
   a seta continua azul, sem a transparência do estado padrão. */
.solutions__arrow:focus-visible {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
}

.solutions__arrow:focus-visible img {
    opacity: 1
}

@media (hover: hover) and (pointer: fine) {
    .solutions__arrow:hover {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }

    .solutions__arrow:hover img {
        opacity: 1
    }
}

.solutions__dots {
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.solutions__dot {
    position: relative;
    width: 12px;
    height: 44px;
    padding: 0;
    flex: 0 0 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: width .45s cubic-bezier(.4, 0, .2, 1)
}

.solutions__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--scale-075);
    height: var(--scale-050);
    border-radius: var(--radius-pill);
    background: var(--caixa-azul-claro);
    transform: translate(-50%, -50%);
    transition: width .45s cubic-bezier(.4, 0, .2, 1), background-color .3s ease
}

.solutions__dot[aria-current="true"] {
    width: 24px;
    flex-basis: 24px
}

.solutions__dot[aria-current="true"]::after {
    width: 24px;
    background: var(--caixa-azul-principal)
}

@media (max-width:599px) {
    .solutions {
        height: 900px;
        background: var(--caixa-azul-profundo);
        --card-height: 430px;
        --title-height: 84px
    }

    .solutions::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 507px;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--caixa-ui-branco)
    }

    .solutions__background {
        inset: 0;
        border-radius: 0;
        background: var(--caixa-azul-profundo)
    }

    .solutions__layout {
        width: 100%;
        height: 900px
    }

    .solutions h2 {
        top: 60px;
        left: 119px;
        width: 236px;
        color: var(--caixa-ui-porcelana);
        font-size: 1.875rem;
        line-height: var(--scale-225);
        font-weight: var(--peso-bold)
    }

    .solutions__carousel {
        top: 347px;
        left: 0;
        width: 100%;
        height: var(--card-height);
        padding: 0;
        scroll-padding-inline: 54px;
        scroll-snap-type: x mandatory
    }

    .solutions__track {
        height: var(--card-height);
        gap: 16px
    }

    .solutions__card {
        flex-basis: 267px;
        width: 267px;
        height: var(--card-height);
        border-radius: var(--scale-150);
        scroll-snap-align: center;
        transform: translateZ(0);
        will-change: transform;
        transition: none
    }

    .solutions__media {
        flex-basis: 160px;
        height: 160px
    }

    .solutions__card .solutions__media img,
    .solutions__card.is-current .solutions__media img {
        transform: translateZ(0) scale(var(--image-scale, 1));
        transition: none
    }

    .solutions__body {
        min-height: 269px;
        padding: 16px 24px 58px
    }

    .solutions__body h5 {
        min-height: var(--title-height);
        font-size: var(--fonte-20);
        line-height: var(--scale-175)
    }

    .solutions__body p {
        margin-top: 16px;
        font-size: 1.125rem;
        line-height: 1.3
    }

    .solutions__action {
        right: 24px;
        bottom: 16px;
        font-size: 0.81rem;
        line-height: 2.475rem
    }

    .solutions__pagination {
        top: 797px;
        left: 50%;
        width: auto;
        max-width: 100%;
        height: 44px;
        transform: translateX(-50%)
    }

    .solutions__arrow {
        width: 44px;
        height: 44px;
        flex-basis: 44px
    }

    .solutions__dots {
        gap: 4px
    }

    /* Área de clique de 24px (mínimo da WCAG 2.2); o traço visível continua
       com 12px, centralizado. */
    .solutions__dot,
    .solutions__dot[aria-current="true"] {
        width: var(--scale-150);
        flex-basis: var(--scale-150)
    }
}

@media (min-width:600px) and (max-width:999px) {
    .solutions__layout {
        width: min(calc(100% - 48px), 1160px)
    }

    .solutions h2 {
        width: 310px;
        font-size: var(--fonte-44);
        line-height: var(--scale-325)
    }

    .solutions__carousel {
        left: 370px;
        width: 790px
    }

    .solutions__pagination {
        left: 370px;
        width: 790px
    }
}

@media (prefers-reduced-motion:reduce) {
    .solutions__card,
    .solutions__media img,
    .solutions__dot,
    .solutions__dot::after {
        transition-duration: .01ms !important
    }

    .solutions__carousel {
        scroll-behavior: auto !important
    }
}

@media(min-width:1000px) {
    .solutions {
        height: max(797px, calc(297px + var(--card-height)));
        background: var(--caixa-ui-branco);
        --card-height: 400px
    }

    .solutions__background {
        inset: 335px 0 0;
        border-radius: 0;
        background: transparent
    }

    .solutions__layout {
        width: min(calc(100% - 40px), 1640px)
    }

    .solutions h2 {
        color: var(--caixa-azul-principal)
    }

    .solutions__carousel {
        top: 143px
    }

    .solutions__pagination {
        top: calc(193px + var(--card-height));
        height: var(--control-min-height)
    }

    .solutions__card {
        height: var(--card-height);
        border: 0
    }

    .solutions__body {
        min-height: 208px;
        padding: var(--space-xl) var(--space-xl) 68px
    }

    /* Figma: título em top 24px e parágrafo em top 68px no corpo do card. */
    .solutions__body h5 {
        min-height: 0;
        font-family: var(--fonte-texto);
        font-size: var(--titulo-h5-desktop);
        font-style: var(--estilo-normal);
        font-weight: var(--peso-medium);
        line-height: var(--linha-titulo)
    }

    .solutions__body p {
        margin-top: var(--space-sm)
    }

    .solutions__action {
        gap: var(--space-xl);
        color: var(--caixa-azul-principal)
    }

    .solutions__arrow {
        width: var(--control-min-height);
        height: var(--control-min-height);
        flex-basis: var(--control-min-height)
    }

    .solutions__dot::after {
        background: var(--caixa-azul-claro)
    }

    .solutions__dot[aria-current="true"]::after {
        background: var(--caixa-azul-principal)
    }
}

.solutions__pause {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: var(--caixa-azul-principal);
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease
}

/* Ícone de pausa exportado do Figma (node 2102:767); retomar segue o mesmo traço. */
.solutions__pause-icon {
    display: block;
    grid-area: 1 / 1;
    width: 20px;
    height: 20px
}

/* Dois ícones, pausa e retomar. A especificidade fica acima de regras de base
   como `.caixa-home img`. */
.solutions__pause .solutions__pause-icon {
    display: none
}

.solutions__pause:not([aria-pressed="true"]) .solutions__pause-icon--pause,
.solutions__pause[aria-pressed="true"] .solutions__pause-icon--play {
    display: block
}

/* Hover/foco (Figma 2061:1581): como as setas. */
.solutions__pause:focus-visible {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
}

@media (hover: hover) and (pointer: fine) {
    .solutions__pause:hover {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--caixa-azul-principal)
    }
}

.solutions__pause:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

@media(min-width:1000px) and (max-width:1279px) {
    .solutions__layout {
        width: calc(100% - 80px)
    }

    .solutions h2 {
        left: 0;
        width: 34%;
        font-size: clamp(var(--fonte-40), 3.35vw, var(--fonte-52));
        line-height: var(--linha-display)
    }

    .solutions__carousel {
        left: 34%;
        width: 66%
    }

    .solutions__track {
        --solutions-gap: clamp(20px, 1.8vw, 30px);
        --solutions-card-width: calc((((100vw - 80px) * .66) - (2 * var(--solutions-gap)))/3);
        gap: var(--solutions-gap)
    }

    .solutions__card {
        width: var(--solutions-card-width);
        flex-basis: var(--solutions-card-width)
    }

    .solutions__media {
        width: 100%
    }

    .solutions__body h5 {
        font-family: var(--fonte-texto);
        font-size: clamp(var(--fonte-20), 1.7vw, var(--fonte-24));
        font-style: var(--estilo-normal);
        font-weight: var(--peso-medium);
        line-height: var(--linha-titulo)
    }

    .solutions__pagination {
        left: 34%;
        width: 66%
    }
}

@media(min-width:1000px) and (max-width:1279px) {
    .solutions__layout {
        --solutions-gap: clamp(20px, 1.8vw, 30px);
        --solutions-card-width: min(342px, calc((((100vw - 80px) * .66) - var(--solutions-gap))/2));
        --solutions-carousel-width: calc(2 * var(--solutions-card-width) + var(--solutions-gap))
    }

    .solutions h2 {
        width: calc(100% - var(--solutions-carousel-width) - var(--space-5xl))
    }

    .solutions__track {
        --solutions-card-width: inherit
    }

    .solutions__carousel,
    .solutions__pagination {
        left: calc(100% - var(--solutions-carousel-width));
        width: var(--solutions-carousel-width)
    }
}

@media(min-width:1920px) {
    .solutions h2 {
        --solutions-title-left: max(112px, calc(252px - (100vw - 1640px)/2));
        top: 29px;
        left: var(--solutions-title-left);
        width: min(412px, calc(524px - var(--solutions-title-left)))
    }
}

@media(max-width:767px) {
    .solutions {
        height: calc(470px + var(--card-height))
    }

    .solutions__layout {
        height: 100%
    }

    .solutions__pagination {
        top: calc(367px + var(--card-height))
    }

    .solutions__pause {
        width: 44px;
        height: 44px;
        flex-basis: 44px
    }

    .solutions__dot::after {
        background: var(--caixa-azul-light-10)
    }

    .solutions__dot[aria-current="true"]::after {
        background: var(--caixa-azul-principal)
    }
}

@media(max-width:599px) {
    .solutions {
        height: calc(494px + var(--card-height));
        background: var(--caixa-ui-branco);
        --card-height: 430px;
        --title-height: 0
    }

    .solutions::after {
        top: 530px;
        background: var(--caixa-ui-branco)
    }

    .solutions__background {
        display: none
    }

    .solutions__layout {
        width: 100%;
        height: 100%
    }

    .solutions h2 {
        z-index: 2;
        top: 105px;
        right: var(--space-md);
        left: auto;
        width: 240px;
        height: 100px;
        color: var(--caixa-azul-principal);
        font-family: var(--fonte-display);
        font-size: 1.875rem;
        font-style: var(--estilo-normal);
        font-weight: var(--peso-bold);
        line-height: var(--scale-225)
    }

    /* Card centralizado, com os vizinhos aparecendo dos dois lados, a pedido
       da CAIXA (como na home atual). */
    .solutions__carousel {
        top: 370px;
        height: var(--card-height);
        scroll-padding-inline: calc((100% - 267px) / 2)
    }

    .solutions__track {
        height: var(--card-height);
        padding-inline: var(--space-lg);
        gap: var(--space-md)
    }

    .solutions__card {
        width: 267px;
        height: var(--card-height);
        flex-basis: 267px;
        border: 0;
        border-radius: var(--scale-150);
        background: var(--caixa-ui-porcelana);
        scroll-snap-align: start
    }

    .solutions__media {
        width: 267px;
        height: 160px;
        flex-basis: 160px
    }

    .solutions__card .solutions__media img {
        transition: transform .55s var(--ease)
    }

    .solutions__card:focus-visible .solutions__media img,
    .solutions__card.is-keyboard-current .solutions__media img {
        transform: translateZ(0) scale(1.035)
    }

    .solutions__body {
        min-height: calc(var(--card-height) - 160px);
        padding: 14px 20px 68px
    }

    .solutions__body h5 {
        min-height: 0;
        font-family: var(--fonte-display);
        font-size: var(--titulo-h5-mobile);
        font-style: var(--estilo-normal);
        font-weight: var(--peso-medium);
        line-height: 1.4
    }

    .solutions__body p {
        margin-top: 14px;
        font-size: 1.125rem;
        line-height: 1.3
    }

    .solutions__action {
        right: 20px;
        bottom: 16px;
        gap: 16px;
        font-size: 0.81rem;
        line-height: 2.475rem
    }

    .solutions__pagination {
        top: calc(390px + var(--card-height))
    }

    .solutions__dots {
        gap: 3px
    }
}

@media(min-width:600px) and (max-width:999px) {
    .solutions {
        height: calc(500px + var(--card-height));
        background: var(--caixa-ui-branco);
        --card-height: 400px;
        --title-height: 0
    }

    .solutions::after {
        display: none
    }

    .solutions__background {
        display: none
    }

    .solutions__layout {
        width: 100%;
        height: 100%
    }

    .solutions__mobile-scene {
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        pointer-events: none
    }

    .solutions__mobile-scene img {
        position: absolute;
        display: block;
        max-width: none
    }

    .solutions__mobile-background {
        top: 59px;
        left: 0;
        width: 100%;
        height: 471px;
        border-radius: var(--space-xl) var(--space-xl) 0 0;
        object-fit: cover
    }

    .solutions__mobile-rug {
        top: 316px;
        left: -80px;
        width: 1300px;
        height: 119px
    }

    .solutions__mobile-sofa {
        top: 174px;
        left: -42px;
        width: 520px;
        height: auto
    }

    .solutions__mobile-cat {
        top: 323px;
        left: 58%;
        width: 112px;
        height: auto
    }

    .solutions h2 {
        z-index: 2;
        top: 82px;
        right: var(--space-6xl);
        left: auto;
        width: 360px;
        height: auto;
        color: var(--caixa-azul-principal);
        font-family: var(--fonte-display);
        font-size: var(--titulo-h3-tablet);
        font-style: var(--estilo-normal);
        font-weight: var(--peso-bold);
        line-height: var(--linha-display)
    }

    /* A janela do carrossel tem exatamente 2 cards: sem padding interno,
       nenhum card vizinho fica visível e o snap coincide com o destino do JS. */
    .solutions__layout {
        --solutions-card-width: min(342px, calc((100vw - 2 * var(--space-5xl) - var(--space-lg))/2));
        --solutions-carousel-width: calc(2 * var(--solutions-card-width) + var(--space-lg))
    }

    .solutions__carousel {
        top: 370px;
        left: calc(50% - var(--solutions-carousel-width)/2);
        width: var(--solutions-carousel-width);
        height: var(--card-height);
        padding: 0;
        scroll-padding-inline: 0;
        scroll-snap-type: x mandatory
    }

    .solutions__track {
        height: var(--card-height);
        padding-inline: 0;
        gap: var(--space-lg)
    }

    .solutions__card {
        width: var(--solutions-card-width);
        height: var(--card-height);
        flex-basis: var(--solutions-card-width);
        border: 0;
        border-radius: var(--space-xl);
        background: var(--caixa-ui-porcelana);
        scroll-snap-align: start;
        transform: translateZ(0);
        will-change: auto;
        transition: transform .5s var(--ease), opacity .35s ease
    }

    .solutions__media {
        width: 100%;
        height: var(--scale-1000);
        flex-basis: var(--scale-1000)
    }

    .solutions__card .solutions__media img,
    .solutions__card.is-current .solutions__media img {
        transform: translateZ(0) scale(1);
        transition: transform .65s var(--ease)
    }

    .solutions__body {
        min-height: calc(var(--card-height) - var(--scale-1000));
        padding: 18px var(--space-lg) 68px
    }

    .solutions__body h5 {
        min-height: 0;
        font-family: var(--fonte-texto);
        font-size: var(--titulo-h5-tablet);
        font-style: var(--estilo-normal);
        font-weight: var(--peso-medium);
        line-height: var(--linha-titulo)
    }

    .solutions__body p {
        margin-top: 10px;
        font-size: var(--fonte-16);
        line-height: var(--linha-titulo)
    }

    .solutions__action {
        right: var(--space-lg);
        bottom: var(--space-md);
        gap: var(--space-md);
        font-size: 0.875rem;
        line-height: var(--space-5xl)
    }

    .solutions__pagination {
        top: calc(382px + var(--card-height));
        left: 0;
        width: 100%;
        height: var(--control-min-height);
        max-width: none;
        transform: none
    }

    .solutions__arrow {
        width: var(--control-min-height);
        height: var(--control-min-height);
        flex-basis: var(--control-min-height)
    }
}

/* Fundo ilustrado: uma imagem por breakpoint, exportada do Figma em 2x.
   Desktop: bg_s4 (2102:638), 1920 × 580px, ancorado no rodapé da seção.
   Mobile: BG_s4 (2102:1250), 375 × 471px. O tablet usa as camadas de
   .solutions__mobile-scene. */
.solutions__art {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.solutions__art img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none
}

@media(max-width:599px) {
    /* A composição do topo escala com a largura (375px = Figma); o carrossel
       acompanha a mesma proporção para o gato e o sofá não ficarem atrás dos cards. */
    .solutions {
        height: calc(183px + 311 * 100vw / 375 + var(--card-height))
    }

    .solutions::after {
        top: calc(59px + 471 * 100vw / 375)
    }

    .solutions__mobile-scene {
        display: none
    }

    .solutions__art {
        top: 59px;
        bottom: auto;
        overflow: hidden;
        border-radius: var(--space-xl) var(--space-xl) 0 0
    }

    .solutions__carousel {
        top: calc(59px + 311 * 100vw / 375)
    }

    .solutions__pagination {
        top: calc(79px + 311 * 100vw / 375 + var(--card-height))
    }
}

@media(min-width:600px) and (max-width:999px) {
    .solutions__art {
        display: none
    }
}

@media(min-width:1000px) and (max-width:1279px) {
    .solutions__art {
        right: auto;
        left: -20px
    }

    .solutions__art img {
        width: auto
    }
}

/* Desktop 1280–1919px: a composição de 1920px do Figma inteira, escalada pela
   largura (--u = 1px do Figma). Mostra e avança 3 cards. Textos do card têm
   piso de legibilidade; controles da paginação mantêm o alvo mínimo de 44px. */
@media(min-width:1280px) and (max-width:1919px) {
    .solutions {
        --u: calc(100vw / 1920);
        height: max(calc(797 * var(--u)), calc(297 * var(--u) + var(--card-height)))
    }

    .solutions__layout {
        width: calc(1640 * var(--u))
    }

    .solutions h2 {
        top: calc(29 * var(--u));
        left: calc(112 * var(--u));
        width: calc(412 * var(--u));
        font-size: calc(56 * var(--u));
        line-height: calc(66 * var(--u))
    }

    .solutions__carousel {
        top: calc(143 * var(--u));
        left: calc(554 * var(--u));
        width: calc(1086 * var(--u))
    }

    .solutions__track {
        gap: calc(30 * var(--u))
    }

    .solutions__card {
        width: calc(342 * var(--u));
        flex-basis: calc(342 * var(--u));
        border-radius: calc(24 * var(--u))
    }

    .solutions__media {
        height: calc(192 * var(--u));
        flex-basis: calc(192 * var(--u));
        border-radius: calc(23 * var(--u)) calc(23 * var(--u)) 0 0
    }

    .solutions__body {
        min-height: calc(208 * var(--u));
        padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(68 * var(--u))
    }

    .solutions__body h5 {
        font-size: max(1.125rem, calc(24 * var(--u)))
    }

    .solutions__body p {
        margin-top: calc(12 * var(--u));
        font-size: max(var(--fonte-12), calc(16 * var(--u)))
    }

    .solutions__action {
        right: calc(24 * var(--u));
        bottom: calc(24 * var(--u));
        gap: calc(24 * var(--u));
        font-size: max(0.875rem, calc(18 * var(--u)));
        line-height: calc(44 * var(--u))
    }

    .solutions__action-icon {
        width: calc(44 * var(--u));
        height: calc(44 * var(--u));
        flex-basis: calc(44 * var(--u))
    }

    .solutions__action-icon img {
        width: calc(24 * var(--u));
        height: calc(24 * var(--u))
    }

    .solutions__pagination {
        top: calc(193 * var(--u) + var(--card-height));
        left: calc(554 * var(--u));
        width: calc(1086 * var(--u))
    }
}

/* Fundo desktop: o creme começa 118px abaixo do topo da imagem (1920px) e tem
   de coincidir com a divisa imagem/texto dos cards (335px na seção); o gato
   termina 570px abaixo do topo e deve deitar na base da seção, onde começa o
   rodapé. Por isso a imagem é presa pelo topo (217px) e a seção mede 787px. */
@media(min-width:1000px) {
    .solutions__art {
        bottom: auto
    }
}

@media(min-width:1000px) and (max-width:1279px) {
    /* A escala k da imagem sai da altura da seção (297px + card):
       creme em 335px e gato na base => 335 + 452k = altura. */
    .solutions {
        --art-height: calc((var(--card-height) - 38px) * 580 / 452);
        height: calc(297px + var(--card-height))
    }

    .solutions__art {
        top: calc(335px - var(--art-height) * 118 / 580)
    }

    .solutions__art img {
        height: var(--art-height)
    }
}

@media(min-width:1280px) and (max-width:1919px) {
    .solutions {
        height: max(calc(787 * var(--u)), calc(297 * var(--u) + var(--card-height)))
    }

    .solutions__art {
        top: calc(217 * var(--u))
    }
}

@media(min-width:1920px) {
    /* A imagem acompanha a largura da tela; a divisa dos cards fica em 335px. */
    .solutions {
        height: max(calc(335px + 452 * 100vw / 1920), calc(297px + var(--card-height)))
    }

    .solutions__art {
        top: calc(335px - 118 * 100vw / 1920)
    }
}

/* Mobile: o título encolhe junto com a ilustração abaixo de 375px, para não
   encostar na cabeça da personagem (ex.: 320px). Acima de 375px fica fixo. */
@media(max-width:599px) {
    .solutions h2 {
        top: calc(59px + min(46px, 46 * 100vw / 375));
        right: min(16px, 16 * 100vw / 375);
        width: min(240px, 240 * 100vw / 375);
        height: auto;
        font-size: min(1.875rem, 30 * 100vw / 375);
        line-height: min(var(--scale-225), 36 * 100vw / 375)
    }
}

/* Contador (a partir de 600px): posições fixas de 24px por item, como no
   Figma; um indicador único desliza por transform até o item ativo. Nada muda
   de largura durante a troca, então os pontos não tremem. O mobile, com uma
   bolinha por card, mantém o indicador que cresce no próprio ponto. */
.solutions__dots-indicator {
    display: none
}

@media(min-width:600px) {
    .solutions__dots {
        position: relative;
        gap: 0
    }

    .solutions__dot,
    .solutions__dot[aria-current="true"] {
        width: 24px;
        flex-basis: 24px;
        transition: none
    }

    .solutions__dot::after,
    .solutions__dot[aria-current="true"]::after {
        width: 12px;
        background: var(--caixa-azul-claro);
        transition: none
    }

    /* Posição em `translate` e tamanho em `scale`: ao trocar de página o
       indicador encolhe, viaja pequeno e incha ao chegar no item ativo. */
    .solutions__dots-indicator {
        position: absolute;
        top: calc(50% - 4px);
        left: 0;
        display: block;
        width: 24px;
        height: 8px;
        border-radius: var(--radius-pill);
        background: var(--caixa-azul-principal);
        pointer-events: none;
        translate: calc(var(--active-dot, 0) * 24px) 0;
        transition: translate .45s cubic-bezier(.4, 0, .2, 1)
    }

    .solutions__dots-indicator.is-moving {
        animation: solutions-dot-grow .5s cubic-bezier(.45, 0, .25, 1)
    }
}

/* Encolhe pouco e rápido e volta a crescer ainda durante a viagem: sem
   fase parada no tamanho pequeno. */
@keyframes solutions-dot-grow {
    0% {
        scale: 1 1
    }

    30% {
        scale: .6 1
    }

    100% {
        scale: 1 1
    }
}

/* Desktop: transform e opacidade dos cards são controlados quadro a quadro
   pelo efeito de profundidade do JS; transição CSS atrasaria o movimento. */
@media(min-width:1000px) {
    .solutions__card {
        transition: none
    }

    /* Sem snap nativo no desktop: os pontos de snap usariam o transform dos
       cards que afundam. O JS alinha ao card mais próximo ao fim do scroll. */
    .solutions__carousel {
        scroll-snap-type: none
    }
}

/* Fundo da seção: a ilustração desktop é transparente acima do creme (cabeça
   da personagem), então a cor que aparece ali é a da seção. Para trocar a cor
   (azul, vermelho…), basta mudar --solutions-fundo. */
.solutions {
    --solutions-fundo: var(--caixa-ui-branco);
    background: var(--solutions-fundo)
}

.solutions::after {
    background: var(--solutions-fundo)
}

/* Encaixe no rodapé (Figma): o rodapé sobe sobre a base do Tem Caixa — 12px
   sobre o gato no desktop (escala de 1920) e 21px no celular. Para o rodapé
   ficar por cima, ele precisa ser posicionado (position: relative). */
.solutions {
    margin-bottom: -21px
}

@media(min-width:1000px) and (max-width:1279px) {
    .solutions {
        margin-bottom: calc(-12 * var(--art-height) / 580)
    }
}

@media(min-width:1280px) and (max-width:1919px) {
    .solutions {
        margin-bottom: calc(-12 * var(--u))
    }
}

@media(min-width:1920px) {
    .solutions {
        margin-bottom: calc(-12 * 100vw / 1920)
    }
}

/* Ordem do Tab: no HTML a pausa vem primeiro na paginação (e a paginação antes
   dos cards), para ser o primeiro Tab da seção; na tela ela fica no fim. */
.solutions__pause {
    order: 1
}

/* Celular: o card em evidência fica maior que os vizinhos (--card-scale, de
   .88 a 1, vem do JS conforme a distância ao centro). A escala parte da divisa
   foto/texto (160px), que continua alinhada com o fim da ilustração. */
@media(max-width:599px) {
    .solutions__card {
        transform: translateZ(0) scale(var(--card-scale, 1));
        transform-origin: 50% 160px
    }
}

@media(prefers-reduced-motion:reduce) {
    .solutions__dots-indicator,
    .solutions__dots-indicator.is-moving {
        transition: none;
        animation: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — TEM CAIXA PARA CADA MOMENTO DA SUA VIDA                  */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO CTA FIXO — VEM REALIZAR                                           */
/* //                                                                          */
/* //  Todas as regras da barra (.cta-bar*) estão entre este cabeçalho e o     */
/* //  marcador "FIM DA SEÇÃO — CTA FIXO". Barra fixa no rodapé da janela      */
/* //  durante todo o scroll: 100px a partir de 1000px, 74px abaixo disso.     */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

/* Desktop (Figma 2044:9497): 1920 × 100px, Blue Primary, raio superior de
   24px e Shadow Home. Logo de 40px + "Vem realizar" (H3 Desktop, 34px) e o
   botão vazado "Abrir conta" de 50px, 61px à direita. */
.cta-bar {
    --cta-altura: 100px;
    position: fixed;
    z-index: 9998;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: var(--cta-altura);
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    gap: 61px;
    border-radius: var(--space-xl) var(--space-xl) 0 0;
    background: var(--caixa-azul-principal);
    box-shadow: 0 0 30px rgba(0, 19, 100, .16);
    transition: transform .4s var(--ease), visibility 0s
}

/* Antes da primeira rolagem (home-v20261014-cta.js): fora da tela e fora da
   ordem de tabulação. */
.cta-bar[data-oculta] {
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .4s var(--ease), visibility 0s linear .4s
}

/* Plano B: se o script não marcar a barra (data-js) em 3s, ela aparece mesmo
   assim, para nunca sumir de vez. */
.cta-bar[data-oculta]:not([data-js]) {
    animation: cta-sem-js 0s linear 3s forwards
}

@keyframes cta-sem-js {
    to {
        visibility: visible;
        transform: none
    }
}

.cta-bar,
.cta-bar * {
    box-sizing: border-box
}

/* Espaço no fim da página com a altura da barra: no fim da rolagem, o
   endereço do rodapé (obrigatório por lei) fica logo acima dela. */
body:has(.cta-bar) {
    padding-bottom: var(--cta-altura-pagina, 100px)
}

.cta-bar .cta-bar__title {
    display: flex;
    margin: 0;
    padding: 0 4px;
    align-items: center;
    gap: var(--space-xl);
    color: var(--titulo-h5-cor-invertido);
    font-family: var(--fonte-display);
    font-size: var(--titulo-h5-desktop);
    font-style: var(--titulo-estilo);
    font-weight: var(--titulo-h5-peso);
    line-height: var(--linha-display);
    white-space: nowrap
}

.cta-bar .cta-bar__logo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto
}

.cta-bar .cta-bar__button {
    display: flex;
    height: 50px;
    padding: 0 var(--space-xl);
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid var(--caixa-ui-porcelana);
    border-radius: var(--radius-pill);
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-texto);
    font-size: 1.125rem;
    font-weight: var(--peso-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease
}

.cta-bar .cta-bar__icon {
    width: 20px;
    height: 20px
}

.cta-bar .cta-bar__icon--hover {
    display: none
}

.cta-bar .cta-bar__button:focus-visible {
    outline: 3px solid var(--caixa-azul-claro);
    outline-offset: 2px
}

/* Hover (não definido no Figma): fundo Porcelana com texto e seta azuis,
   como os controles das outras seções. */
@media (hover: hover) and (pointer: fine) {
    .cta-bar .cta-bar__button:hover {
        background: var(--caixa-ui-porcelana);
        color: var(--caixa-azul-principal)
    }

    .cta-bar .cta-bar__button:hover .cta-bar__icon {
        display: none
    }

    .cta-bar .cta-bar__button:hover .cta-bar__icon--hover {
        display: block
    }
}

/* Mobile/tablet (Figma 2044:9431): 74px, título à esquerda e botão de
   151 × 44px à direita. */
@media(max-width:999px) {
    .cta-bar {
        --cta-altura: 74px;
        padding: 10px 20px;
        justify-content: space-between;
        gap: var(--space-md)
    }

    body:has(.cta-bar) {
        --cta-altura-pagina: 74px
    }

    .cta-bar .cta-bar__title {
        min-width: 0;
        flex: 1 1 auto;
        gap: var(--space-md);
        font-family: var(--fonte-texto);
        font-size: var(--titulo-h5-mobile);
        line-height: 1.2
    }

    .cta-bar .cta-bar__logo {
        width: 16px;
        height: 16px
    }

    /* Figma: botão de 151px; o padding de 24px não cabe com a seta, então o
       conteúdo fica centralizado na largura fixa. */
    .cta-bar .cta-bar__button {
        width: 151px;
        height: 44px;
        padding: 0;
        justify-content: center;
        font-size: var(--fonte-16)
    }
}

/* Abaixo de 375px, menos respiro nas laterais para o H5 caber ao lado do
   botão; abaixo de 340px nem assim cabe, e o título usa --fonte-16. */
@media(max-width:374px) {
    .cta-bar {
        padding-inline: var(--space-md);
        gap: var(--space-sm)
    }

    .cta-bar .cta-bar__title {
        gap: var(--space-xs)
    }
}

@media(max-width:339px) {
    .cta-bar .cta-bar__title {
        font-size: var(--fonte-16)
    }
}

@media(prefers-reduced-motion:reduce) {
    .cta-bar,
    .cta-bar[data-oculta],
    .cta-bar .cta-bar__button {
        transition: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — CTA FIXO                                                 */
/* ============================================================================ */
/* ============================================================================ */

/* ============================================================================ */
/* ============================================================================ */
/* //                                                                          */
/* //  SEÇÃO CA — ASSISTENTE VIRTUAL                                           */
/* //                                                                          */
/* //  Todas as regras da Ca (.ca-trigger*) estão entre este cabeçalho e o     */
/* //  marcador "FIM DA SEÇÃO — CA". Avatar fixo no canto inferior direito,    */
/* //  acima da barra "Vem realizar"; leva ao assistente (aixa.caixa.gov.br),  */
/* //  como na página de habitação da CAIXA.                                   */
/* //                                                                          */
/* ============================================================================ */
/* ============================================================================ */

/* Figma 2044:9347/9352: círculo de 120px (Blue 20, borda Blue Primary, Shadow
   Home) com a foto e o balão Blue 150 de 151 × 74px à esquerda, sobrepondo o
   avatar em 21px. Desktop: 32px da borda e 32px acima da barra (no Figma,
   frame 2044:9321, a base ficava a 440px do fim da tela, cobrindo o botão de
   Libras). */
.ca-trigger {
    /* Diâmetro do avatar; o recorte da foto e o balão acompanham. No desktop,
       96px (120px no Figma), a pedido da Caixa. */
    --ca-tamanho: var(--scale-600);
    position: fixed;
    z-index: 9999;
    right: 32px;
    /* 32px acima da barra de 100px: abaixo do botão de Libras, que fica no
       meio da lateral direita. */
    bottom: calc(100px + var(--space-3xl))
}

.ca-trigger,
.ca-trigger * {
    box-sizing: border-box
}

.ca-trigger .ca-trigger__link {
    position: relative;
    display: block;
    width: var(--ca-tamanho);
    height: var(--ca-tamanho);
    border-radius: 50%;
    color: inherit;
    text-decoration: none
}

.ca-trigger__avatar {
    position: relative;
    display: block;
    width: var(--ca-tamanho);
    height: var(--ca-tamanho);
    overflow: hidden;
    border: 1px solid var(--caixa-azul-principal);
    border-radius: 50%;
    background: var(--caixa-azul-claro);
    box-shadow: 0 0 30px rgba(0, 19, 100, .16)
}

/* Recorte da foto no Figma (círculo de 120px): 161 × 267px, 20,3px para a
   esquerda e 5,3px abaixo do topo do círculo; proporcional ao --ca-tamanho. */
.ca-trigger .ca-trigger__avatar img {
    position: absolute;
    top: calc(var(--ca-tamanho) * 4.27 / 120);
    left: calc(var(--ca-tamanho) * -21.28 / 120);
    width: calc(var(--ca-tamanho) * 161.03 / 120);
    height: calc(var(--ca-tamanho) * 267.39 / 120);
    max-width: none
}

/* Balão: sempre visível em telas de toque; com mouse, aparece só no hover
   (ou no foco do teclado) e some ao sair, com transição de .4s. No toque,
   sai da frente enquanto estiver sobre o paginador de um carrossel
   (data-balao-oculto, home-v20261014-ca.js). */
.ca-trigger__bubble {
    position: absolute;
    z-index: 1;
    top: 0;
    right: calc(var(--ca-tamanho) * 99 / 120);
    display: block;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--scale-200) var(--scale-200) 0 var(--scale-200);
    background: var(--caixa-azul-profundo);
    box-shadow: 0 0 15px rgba(0, 19, 100, .16);
    color: var(--caixa-ui-porcelana);
    font-family: var(--fonte-texto);
    font-size: var(--fonte-16);
    font-weight: var(--peso-regular);
    line-height: 1.3;
    white-space: nowrap;
    transform-origin: right top;
    pointer-events: none
}

.ca-trigger .ca-trigger__link:focus-visible {
    outline: 3px solid var(--caixa-azul-principal);
    outline-offset: 2px
}

@media (hover: hover) and (pointer: fine) {
    .ca-trigger__bubble {
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px) scale(.98);
        transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s
    }

    .ca-trigger__link:hover .ca-trigger__bubble,
    .ca-trigger__link:focus-visible .ca-trigger__bubble {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .4s ease, transform .4s ease, visibility 0s
    }
}

@media (hover: none), (pointer: coarse) {
    .ca-trigger .ca-trigger__bubble {
        transition: opacity .25s ease, visibility 0s
    }

    .ca-trigger[data-balao-oculto] .ca-trigger__bubble {
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s
    }
}

/* Mobile/tablet: menor que no Figma (2044:9284, 120px), a pedido da CAIXA,
   para não cobrir os cards. Fica 16px acima da barra de 74px e 16px da borda;
   o balão encolhe junto. */
@media(max-width:999px) {
    .ca-trigger {
        --ca-tamanho: var(--scale-500);
        right: var(--space-md);
        bottom: calc(74px + var(--space-md))
    }

    .ca-trigger__bubble {
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--scale-150) var(--scale-150) 0 var(--scale-150);
        font-size: 0.875rem
    }
}

@media(max-width:599px) {
    .ca-trigger {
        --ca-tamanho: var(--scale-400)
    }
}

@media(prefers-reduced-motion:reduce) {
    .ca-trigger__bubble,
    .ca-trigger__link:hover .ca-trigger__bubble,
    .ca-trigger__link:focus-visible .ca-trigger__bubble {
        transition: none
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* //  FIM DA SEÇÃO — CA                                                       */
/* ============================================================================ */
/* ============================================================================ */

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .caixa-home * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }
}