/*
 * Página "Consumidor" (template consumidor.php).
 * Os estilos de cada elemento (tipografia, cores, espaçamentos) estão no Elementor; aqui ficam o
 * que ele não faz sozinho, ligados às classes globais criadas no Elementor:
 *   band-full, two-col-media, video-rounded, accordion-faq, posts-consumidor
 * e à simulação (HTML widget .of-sim) e aos cards (.consumidor-cards / .consumidor-arrows).
 */

/* Sem sidebar: o conteúdo ocupa toda a largura do wrapper. */
#content.site-main-secondary .col-content.col-content-full {
    width: 100%;
    flex: 1 1 100%;
}

body.page-template-consumidor {
    overflow-x: clip;
}

/*
 * O #content é um flex wrap e o .wrapper (item flex) não encolhe abaixo do min-content do conteúdo
 * (colunas com largura fixa, faixa em 100vw): entre ~1024px e 1284px ele passava da tela e cortava
 * o banner, o breadcrumb e as colunas. Com min-width:0 e width:100% ele acompanha a tela.
 */
body.page-template-consumidor #content.site-main-secondary > .wrapper {
    width: 100%;
    min-width: 0;
}

/* Faixa de cor em largura total (a simulação), com o conteúdo alinhado ao wrapper (1224px). */
.elementor .band-full {
    box-sizing: border-box;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(30px, calc((100vw - 1224px) / 2));
    padding-block: 0;
    transition: background-color 0.3s ease;
}

.elementor .band-full.of-sim-band--running { background-color: var(--site-rosa-500, #dd249b); }
.elementor .band-full.of-sim-band--verde { background-color: #187f96; }
.elementor .band-full.of-sim-band--amarelo { background-color: #ecbe00; }

/* Texto + mídia lado a lado (vídeo, cards). */
.elementor .two-col-media {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
}

.elementor .two-col-media > :first-child {
    flex: 0 0 min(660px, 54%);
    min-width: 0;
}

.elementor .two-col-media > :last-child {
    flex: 1 1 0;
    min-width: 0;
}

/* Seções em que o texto vem primeiro (cards): colunas invertidas. */
.elementor .two-col-media:has(.consumidor-cards) > :first-child {
    flex: 0 0 375px;
}

.elementor .two-col-media:has(.consumidor-cards) > :last-child {
    flex: 1 1 0;
}

.elementor .video-rounded {
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}

.elementor .video-rounded video {
    display: block;
    width: 100%;
    aspect-ratio: 1284 / 716;
    object-fit: cover;
}

/* Botão com seta (usa .btn-link / .btn-link-arrow-left do tema) sem sublinhado duplicado. */
.elementor .two-col-media .btn-link {
    align-self: flex-start;
}

/* Variação magenta do .btn-link (classe global btn-link-magenta): sublinhado, seta e hover em rosa/magenta. */
.btn-link.btn-link-magenta {
    color: var(--site-magenta);
}

.btn-link.btn-link-magenta:before {
    background: var(--site-magenta);
}

.btn-link.btn-link-magenta:after {
    background: url('../../public/images/icon-btn-arrow-magenta.svg') no-repeat;
    background-size: 100% auto;
    background-position: right center;
}

.btn-link.btn-link-magenta:hover {
    color: var(--site-rosa-pink);
}

.btn-link.btn-link-magenta:hover:before {
    background: var(--site-rosa-pink);
}

@media (max-width: 1023px) {
    .elementor .two-col-media {
        flex-direction: column;
        gap: 32px;
    }

    .elementor .two-col-media > :first-child,
    .elementor .two-col-media:has(.consumidor-cards) > :first-child {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ------------------------------------------------------------------ FAQ (sanfona rosa) */

.elementor .accordion-faq {
    border-top: 2px solid var(--site-rosa-500);
}

.elementor .accordion-faq .e-accordion-item-base {
    border-bottom: 2px solid var(--site-rosa-500) !important;
    border-radius: 0;
    background: transparent;
}

/* Cabeçalho (summary): sem cantos arredondados em nenhum estado (inclusive o do primeiro item). */
.elementor .accordion-faq .e-accordion-item-header-base,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:first-child .e-accordion-item-header-base,
.elementor .accordion-faq .e-accordion-item-base[open] .e-accordion-item-header-base,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]) .e-accordion-item-header-base:hover {
    border-radius: 0;
    background-color: transparent;
    padding: 20px 14px;
    transition: background-color 0.2s ease;
}

.elementor .accordion-faq .e-accordion-item-title-base,
.elementor .accordion-faq .e-accordion-item-base[open] .e-accordion-item-title-base {
    color: var(--site-grafite);
    font-size: var(--site-size-type-24);
    line-height: 1.1;
    transition: color 0.2s ease;
}

.elementor .accordion-faq .e-accordion-item-base .e-accordion-item-icon-base:before,
.elementor .accordion-faq .e-accordion-item-base[open] .e-accordion-item-icon-base:before {
    border-color: var(--site-rosa-500) transparent transparent transparent;
}

/* Fechado + hover/foco: fundo magenta, título e seta brancos. */
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]) .e-accordion-item-header-base:hover,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]) .e-accordion-item-header-base:focus-visible {
    background-color: var(--site-magenta);
}

/* Aberto: fundo rosa pink, título e seta brancos. */
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base[open] .e-accordion-item-header-base {
    background-color: var(--site-rosa-pink);
}

.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]):hover .e-accordion-item-title-base,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]) .e-accordion-item-header-base:focus-visible .e-accordion-item-title-base,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base[open] .e-accordion-item-title-base {
    color: #fff;
}

.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]) .e-accordion-item-header-base:hover .e-accordion-item-icon-base:before,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base:not([open]) .e-accordion-item-header-base:focus-visible .e-accordion-item-icon-base:before,
.elementor .accordion-faq.e-accordion-base .e-accordion-item-base[open] .e-accordion-item-icon-base:before {
    border-color: #fff transparent transparent transparent;
}

/* Conteúdo: uma coluna só, texto de 18px (variáveis de tipografia do tema). */
.elementor .accordion-faq .e-accordion-item-content-base > div {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
}

.elementor .accordion-faq .e-accordion-item-content-base > div > div {
    width: 100%;
    max-width: none;
}

.elementor .accordion-faq .e-accordion-item-content-base p {
    font-family: var(--font-sans-10-regular);
    font-size: var(--site-size-type-18);
}

/* ------------------------------------------------------------------ Cards "Ative seus poderes" */

.consumidor-arrows {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

/* Mesmo estilo dos botões de seta da Diretoria Executiva (components.css), com borda de 3px e seta maior. */
.consumidor-arrow {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 3px solid var(--site-azul-claro);
    border-radius: 50%;
    background-color: transparent;
    background-image: url('../../public/images/nav-arrow.svg');
    background-repeat: no-repeat;
    background-size: 14px 22px;
    background-position: center;
    cursor: pointer;
}

.consumidor-arrow[data-ofew-prev] {
    transform: rotate(180deg);
}

.consumidor-arrow:hover,
.consumidor-arrow:focus-visible {
    background-color: var(--site-azul-claro);
    background-image: url('../../public/images/nav-arrow-white.svg');
}

.consumidor-arrow[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

/* Sem o traço (::after) abaixo do título dos cards, só nesta página. */
.elementor .consumidor-cards .ofew-card__title::after {
    content: none;
    display: none;
}

/* Card em coluna: o texto (<p class="ofew-card__text">) fica sempre alinhado embaixo. */
.elementor .consumidor-cards .swiper-slide.ofew-card {
    display: flex;
    flex-direction: column;
}

.elementor .consumidor-cards .ofew-card__text {
    margin-top: auto;
}

@media (min-width: 1024px) {
    .elementor .consumidor-cards .swiper-slide.ofew-card {
        min-height: 340px;
    }
}

.consumidor-cards .ofew-card__title {
    font-family: var(--font-sans-10-bold);
    font-size: var(--site-size-type-48);
    line-height: 1.25;
}

.consumidor-cards .ofew-card__text {
    font-family: var(--font-sans-10-medium);
    font-size: var(--site-size-type-18);
    line-height: 1.25;
}

/* ------------------------------------------------------------------ Informação é poder (Open Finance Post List) */

.ofpl-post-list.posts-consumidor {
    --ofpl-columns: 3;
    gap: 32px;
    font-family: var(--font-sans-10-regular);
    color: var(--site-grafite);
}

.posts-consumidor .ofpl-post__link {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: inherit;
    text-decoration: none;
}

/* Ordem do Figma: meta, imagem, título (o HTML já vem nessa ordem). */
.posts-consumidor .ofpl-post__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    font-family: var(--font-sans-10-regular);
    font-size: var(--site-size-type-16);
    line-height: normal;
    opacity: 1;
}

.posts-consumidor .ofpl-post__taxonomy {
    font-family: var(--font-sans-10-medium);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.posts-consumidor .ofpl-post__taxonomy::after {
    content: "/";
    margin-left: 10px;
    font-family: var(--font-sans-10-regular);
    font-weight: 400;
    opacity: 0.5;
}

@supports (content: "a" / "") {
    .posts-consumidor .ofpl-post__taxonomy::after {
        content: "/" / "";
    }
}

.posts-consumidor .ofpl-post__media {
    margin-bottom: 15px;
    border-radius: 6px;
}

.posts-consumidor .ofpl-post__image {
    width: 100%;
    aspect-ratio: 361 / 240;
    object-fit: cover;
    border-radius: 6px;
}

.posts-consumidor .ofpl-post__title {
    margin: 0;
    color: #000;
    font-family: var(--font-sans-10-regular);
    font-size: var(--site-size-type-18);
    font-weight: 400;
    line-height: 1.1;
}

.posts-consumidor .ofpl-post__link:hover .ofpl-post__title,
.posts-consumidor .ofpl-post__link:focus-visible .ofpl-post__title {
    color: var(--site-azul-claro);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ Simulação Open Finance */

.of-sim {
    display: grid;
    grid-template-columns: minmax(0, 486px) minmax(0, 422px);
    justify-content: space-between;
    align-items: stretch;
    min-height: 664px;
    padding-top: 48px;
    color: #fff;
}

.of-sim__left {
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding-bottom: 48px;
}

.of-sim__title {
    margin: 0;
    max-width: 292px;
    color: #fff;
    font-family: var(--font-sans-10-medium);
    font-size: clamp(2rem, 1.6702rem + 1.4072vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
}

.of-sim__slides {
    min-height: 270px;
}

.of-sim__slide[hidden] {
    display: none;
}

.of-sim__text {
    margin: 0;
    color: #fff;
    font-family: var(--font-sans-10-medium);
    font-size: clamp(1.125rem, 1.0013rem + 0.5277vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
}

.of-sim__kicker {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    margin: 0 0 16px;
    font-size: var(--site-size-type-18);
    line-height: 1.25;
}

.of-sim__step {
    grid-column: 1 / -1;
    font-family: var(--font-sans-10-regular);
}

.of-sim__desc {
    font-family: var(--font-sans-10-bold);
    font-weight: 700;
}

.of-sim__total {
    font-family: var(--font-sans-10-regular);
}

.of-sim__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -40px;
}

.of-sim__nav[hidden] {
    display: none;
}

.of-sim__prev,
.of-sim__next {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.of-sim__dots {
    display: inline-flex;
    gap: 8px;
}

.of-sim__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.of-sim__dots i:nth-child(2) {
    width: 20px;
    border-radius: 999px;
    background: var(--site-amarelo-500, #f5bc00);
}

.of-sim__right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.of-sim__phone {
    position: relative;
    width: 409px;
    max-width: 100%;
    height: 640px;
    overflow: hidden;
}

.of-sim__screen {
    display: block;
    width: 100%;
    height: auto;
}

.of-sim__screen[hidden] {
    display: none;
}

/* Tela inicial desenhada (igual ao Figma): moldura branca, hora e ícones de status. */
.of-sim__intro-phone {
    position: absolute;
    inset: 24px 0 0;
    border: 3px solid #fff;
    border-bottom: 0;
    border-radius: 32px 32px 0 0;
}

.of-sim__intro-phone[hidden] {
    display: none;
}

.of-sim__time {
    position: absolute;
    top: 16px;
    left: 21px;
    font-family: var(--font-sans-10-medium);
    font-size: var(--site-size-type-18);
    line-height: 1.25;
}

.of-sim__status {
    position: absolute;
    top: 15px;
    right: 21px;
    display: flex;
    gap: 4px;
    color: #fff;
}

.of-sim__status svg {
    display: block;
}

.of-sim__start {
    position: absolute;
    top: 316px;
    left: 50%;
    padding: 16px 24px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 40px;
    background: var(--site-amarelo, #ffe191);
    color: #000;
    font-family: var(--font-sans-10-bold);
    font-size: var(--site-size-type-18);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.of-sim__start:hover,
.of-sim__start:focus-visible {
    background: var(--site-grafite);
    color: #fff;
}

.of-sim__start[hidden],
.of-sim__hotspot[hidden] {
    display: none;
}

.of-sim__hotspot {
    position: absolute;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffd31a;
    box-shadow: 0 0 12px 4px rgba(255, 211, 26, 0.7);
    transform: translate(-50%, -50%);
    cursor: pointer;
    animation: of-sim-pulse 1.5s ease-in-out infinite;
}

@keyframes of-sim-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
}

/* Faixa amarela: textos e controles escuros, como no site Mais poder. */
.of-sim-band--amarelo .of-sim,
.of-sim-band--amarelo .of-sim__title,
.of-sim-band--amarelo .of-sim__text {
    color: #000;
}

.of-sim-band--amarelo .of-sim__dots i {
    background: #000;
}

.of-sim-band--amarelo .of-sim__dots i:nth-child(2),
.of-sim-band--amarelo .of-sim__hotspot {
    background: var(--site-rosa-500, #dd249b);
}

.of-sim-band--amarelo .of-sim__hotspot {
    box-shadow: 0 0 12px 4px rgba(221, 36, 155, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .of-sim__hotspot {
        animation: none;
    }

    .elementor .band-full,
    .of-sim__start {
        transition: none;
    }
}

@media (max-width: 1023px) {
    .of-sim {
        grid-template-columns: 1fr;
        padding-block: 48px;
        gap: 40px;
        min-height: 0;
    }

    .of-sim__right {
        order: -1;
        justify-content: center;
    }

    .of-sim__left {
        gap: 32px;
        padding-bottom: 0;
    }

    .of-sim__nav {
        margin-top: 0;
    }

    .of-sim__phone {
        width: min(409px, 100%);
        height: auto;
        aspect-ratio: 407 / 640;
    }

    .of-sim__start {
        top: 46%;
    }

    .of-sim__slides {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .elementor .band-full {
        padding-inline: 15px;
    }

    .posts-consumidor .ofpl-post__meta {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------ Breadcrumb + menu "Consumidor Interno" */

#content.site-main-secondary .page-breadcrumbs-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    width: 100%;
    margin-bottom: 50px;
}

#content.site-main-secondary .page-breadcrumbs-wrapper .page-breadcrumbs {
    width: auto;
    margin-bottom: 0;
}

.menu-consumidor-interno__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-consumidor-interno__list li {
    margin: 0;
    padding: 0;
}

.menu-consumidor-interno__list a {
    display: block;
    padding: 4px 4px 8px 0;
    border-bottom: 1px solid var(--site-grafite);
    font-family: var(--font-sans-10-regular);
    font-size: var(--site-size-type-16, 1rem);
    line-height: normal;
    color: var(--site-azul-escuro);
    text-decoration: none;
}

.menu-consumidor-interno__list .current-menu-item > a,
.menu-consumidor-interno__list a[aria-current="page"] {
    color: var(--site-grafite);
}

.menu-consumidor-interno__list a:hover,
.menu-consumidor-interno__list a:focus-visible {
    color: var(--site-azul-claro);
    border-bottom-color: var(--site-azul-claro);
}

@media (max-width: 1023px) {
    #content.site-main-secondary .page-breadcrumbs-wrapper {
        margin-bottom: 32px;
    }

    .menu-consumidor-interno__list {
        justify-content: flex-start;
    }

    /*
     * Tablet e mobile: o menu fica escondido só visualmente (continua na árvore de acessibilidade, então
     * leitores de tela o encontram e o Tab passa pelos links). Quando um link recebe foco, o menu aparece
     * para quem navega pelo teclado.
     */
    #content.site-main-secondary .page-breadcrumbs-wrapper .menu-consumidor-interno:not(:focus-within) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    #content.site-main-secondary .page-breadcrumbs-wrapper .menu-consumidor-interno:focus-within {
        width: 100%;
    }
}