/*
 * Blocos das páginas institucionais (home, sobre nós, segurados, parceiros, corretores,
 * assessorias, representantes e estipulantes). Medidas tiradas do CSS do Elementor do original.
 */

@layer components {
  /* ---------- Botões usados nesses blocos ---------- */

  /* Verde com borda de 2px (Fale conosco / Seja parceiro); hover azul. */
  .btn--borda {
    border-color: var(--cor-secundaria);
  }

  .btn--borda:hover,
  .btn--borda:focus-visible {
    border-color: var(--cor-primaria);
  }

  /* Sobre fundo azul o hover é branco com texto azul. */
  .btn--borda-clara:hover,
  .btn--borda-clara:focus-visible {
    background: var(--cor-branco);
    border-color: var(--cor-branco);
    color: var(--cor-primaria);
  }

  /* Contorno verde ("Saiba mais"); hover preenche de verde. */
  .btn--contorno-verde {
    background: transparent;
    border-color: var(--cor-secundaria);
    color: var(--cor-secundaria);
  }

  .btn--contorno-verde:hover,
  .btn--contorno-verde:focus-visible {
    background: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
    color: var(--cor-branco);
  }

  /* ---------- Icon box ---------- */
  .icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .icon-box__icone {
    display: inline-flex;
    flex-shrink: 0;
    padding: 10px;
    border-radius: var(--raio-md);
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    font-size: 32px;
  }

  .icon-box__titulo {
    margin-bottom: 4px;
    font-size: var(--h5);
    line-height: var(--h5-lh);
  }

  @media (max-width: 767px) {
    .icon-box {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ---------- Bloco de apresentação (texto + imagem) ---------- */
  .apresentacao {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-block: 100px 120px;
  }

  .apresentacao__texto {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
  }

  .apresentacao__texto .texto-rico {
    margin-top: 12px;
  }

  .apresentacao__imagem {
    flex: 0 0 calc(50% - 40px);
    width: calc(50% - 40px);
    border-radius: var(--raio-lg);
  }

  /* Entrada da imagem igual ao Elementor do original: fadeInRight cheio (100% da largura em 1.25s);
     no mobile vira fadeInUp (100% da altura). */
  .apresentacao__imagem[data-reveal] {
    --reveal-distancia: 100%;
    --reveal-duracao: 1.25s;
  }

  @media (max-width: 767px) {
    .apresentacao__imagem[data-reveal="fade-right"] {
      --reveal-de: translate3d(0, 100%, 0);
    }
  }

  @media (max-width: 1024px) {
    .apresentacao {
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
    }

    .apresentacao__imagem {
      flex-basis: auto;
      width: 60%;
      margin-top: 20px;
    }
  }

  @media (max-width: 767px) {
    .apresentacao__imagem {
      width: 100%;
    }
  }

  /* Etiquetas ("Financeiras", "Varejo"...) */
  .etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
  }

  .etiquetas li {
    padding: 8px;
    border-radius: var(--raio-md);
    background: var(--cor-fundo-claro);
  }

  /* ---------- Vantagens ---------- */
  .vantagens {
    margin-block: 120px 164px;
  }

  .vantagens__cabecalho {
    max-width: 65%;
    padding-bottom: 60px;
  }

  .vantagens__cabecalho .secao__rotulo {
    margin-bottom: 12px;
  }

  .vantagens__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 48px;
  }

  .vantagens__item {
    padding: 20px 16px; /* cartões de ~132px no original */
    border-radius: var(--raio-md);
    background: var(--cor-fundo-claro);
  }

  @media (max-width: 1024px) {
    .vantagens__cabecalho {
      max-width: none;
      padding-bottom: 60px;
    }

    .vantagens__lista {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  @media (max-width: 767px) {
    .vantagens {
      margin-block: 80px 100px;
    }
  }

  /* ---------- Números ---------- */
  .numeros {
    display: flex;
    gap: 20px;
  }

  .numeros__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column-reverse; /* valor em cima, rótulo embaixo */
    justify-content: flex-end;
    gap: 4px;
    padding: 12px 12px 6px;
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-claro);
  }

  .numeros__valor {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: var(--h4);
    font-weight: var(--peso-negrito);
    line-height: var(--h4-lh);
    color: var(--cor-secundaria);
  }

  .numeros__rotulo {
    margin-bottom: var(--esp-4);
  }

  @media (max-width: 767px) {
    .numeros {
      flex-direction: column;
    }

    .numeros__item {
      width: 65%;
    }

    .numeros__item:nth-child(2) { align-self: center; }
    .numeros__item:nth-child(3) { align-self: flex-end; }
  }

  /* ---------- Etapas ("Como funciona") ---------- */
  .etapas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 64px;
    margin-block: 0 120px;
  }

  /* Original: colunas de 50% sem espaço; a lista tem 20px de cada lado (cartões de 600px a 1440px). */
  @media (min-width: 1025px) {
    .etapas {
      column-gap: 0;
    }

    .etapas__lista {
      padding-inline: 20px;
    }
  }

  .etapas__cabecalho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .etapas__cabecalho .secao__rotulo {
    margin-bottom: 10px;
  }

  .etapas__botao {
    margin-top: 40px;
  }

  .etapas__botao--mobile {
    display: none;
  }

  .etapas__lista {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-left: 20px;
  }

  .etapa {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 32px 40px;
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-claro);
  }

  /* Número 64px saindo pela borda superior esquerda do cartão (medido no original a 1440px). */
  .etapa__numero {
    position: absolute;
    top: -30px;
    left: -20px;
    font-family: var(--fonte-titulo);
    font-size: 64px;
    font-weight: var(--peso-negrito);
    line-height: 1;
    color: var(--cor-secundaria);
  }

  .etapa__titulo {
    font-size: var(--h4);
    line-height: var(--h4-lh);
  }

  @media (max-width: 1024px) {
    .etapas {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

  @media (max-width: 767px) {
    .etapas__cabecalho .etapas__botao {
      display: none;
    }

    .etapas__botao--mobile {
      display: inline-flex;
      margin-top: 0;
    }

    .etapa {
      padding: 32px 20px 20px;
    }
  }

  /* ---------- Acordeão (FAQ e condições gerais) ---------- */
  .acordeao__item {
    border-bottom: 1px solid var(--cor-borda);
  }

  .acordeao__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 36px 24px; /* altura de linha do acordeão do original (~99px por item) */
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: var(--peso-negrito);
    line-height: 26px;
    color: var(--cor-primaria);
    cursor: pointer;
    list-style: none;
    transition: color var(--transicao);
  }

  .acordeao__titulo::-webkit-details-marker {
    display: none;
  }

  .acordeao__titulo:hover,
  .acordeao__item[open] > .acordeao__titulo {
    color: var(--cor-secundaria);
  }

  /* Chevron para baixo; gira para cima quando o item está aberto, como no original. */
  .acordeao__icone {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--cor-secundaria);
    transition: transform var(--transicao);
  }

  .acordeao__item[open] > .acordeao__titulo .acordeao__icone {
    transform: rotate(180deg);
  }

  .acordeao__item[open] > .acordeao__titulo {
    padding-bottom: 24px;
  }

  .acordeao__conteudo {
    padding: 0 20px 32px;
  }

  /* ---------- FAQ ---------- */
  .faq {
    display: flex;
    flex-direction: row-reverse; /* título vem antes no HTML, mas fica à direita no desktop */
    gap: 80px;
    margin-block: 120px;
  }

  /* Original: perguntas em ~metade da largura e o título ao lado, em uma linha. */
  .faq__lista {
    flex: 0 1 calc(50% - 40px);
  }

  .faq__cabecalho {
    flex: 1 1 0;
    align-self: flex-start;
  }

  .faq__cabecalho .secao__rotulo {
    margin-bottom: 12px;
  }

  .faq__contato {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 32px;
  }

  @media (max-width: 1024px) {
    .faq {
      flex-direction: column;
      gap: 64px;
    }
  }

  @media (max-width: 767px) {
    .faq {
      margin-block: 80px;
    }
  }

  /* ---------- Ecossistema ---------- */
  /* Sequência de blocos (home e parceiros): claros e faixas azuis. */
  .lista-ecossistema {
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 100px;
  }

  .ecossistema__faixa {
    display: flex;
    align-items: center;
    gap: 80px;
  }

  .ecossistema__imagem {
    flex: 0 0 calc(50% - 40px);
    width: calc(50% - 40px);
    border-radius: var(--raio-lg);
  }

  .ecossistema__texto {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
  }

  .ecossistema__texto .secao__rotulo {
    margin-bottom: 0;
  }

  .ecossistema__descricao {
    margin-top: 12px;
  }

  .ecossistema__botoes {
    margin-top: 20px;
  }

  /* Faixa azul: o fundo vai até a borda esquerda da tela e a caixa tem cantos arredondados à direita. */
  .ecossistema--escuro {
    background-image: linear-gradient(90deg, var(--cor-primaria) 50%, transparent 50%);
  }

  .ecossistema--escuro .ecossistema__faixa {
    flex-direction: row-reverse;
    padding: 80px;
    border-radius: 0 var(--raio-lg) var(--raio-lg) 0;
    background: var(--cor-primaria);
  }

  .ecossistema--escuro :is(.ecossistema__titulo, .ecossistema__descricao) {
    color: var(--cor-branco);
  }

  .ecossistema--escuro .ecossistema__descricao {
    margin-top: 20px;
  }

  @media (max-width: 1024px) {
    .ecossistema__faixa,
    .ecossistema--escuro .ecossistema__faixa {
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
    }

    .ecossistema__imagem {
      order: 2;
      flex-basis: auto;
      width: 60%;
    }

    .ecossistema--escuro .ecossistema__faixa {
      padding: 80px 20px;
    }
  }

  @media (max-width: 767px) {
    .ecossistema__imagem {
      width: 100%;
    }

    /* Medido no original a 390px: 60px entre texto e imagem, 23px abaixo do rótulo,
       34px entre a descrição e os botões e 20px entre eles. */
    .ecossistema__faixa,
    .ecossistema--escuro .ecossistema__faixa {
      gap: 60px;
    }

    .ecossistema__texto .secao__rotulo {
      margin-bottom: 15px;
    }

    /* Original: botões empilhados, largura total. */
    .ecossistema__botoes {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      margin-top: 34px;
    }

    .ecossistema--escuro .ecossistema__faixa {
      padding: 40px 20px;
    }
  }

  /* ---------- Diferenciais ---------- */
  .diferenciais {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    margin-block: 120px 160px;
  }

  .diferenciais--invertido {
    flex-direction: row-reverse;
  }

  .diferenciais__midia {
    position: relative;
    flex: 0 0 38%;
  }

  .diferenciais__imagem {
    width: 100%;
    border-radius: var(--raio-lg);
  }

  /* Desktop: números empilhados sobre a borda da imagem. */
  .diferenciais__midia .numeros {
    position: absolute;
    top: 20%;
    right: -80px;
    flex-direction: column;
    gap: 40px;
    width: 40%;
  }

  .diferenciais--invertido .diferenciais__midia .numeros {
    right: auto;
    left: -80px;
  }

  .diferenciais__midia .numeros__item {
    width: 100%;
  }

  /* Entrada escalonada dos indicadores (fadeInRight com delays 0/500/1000 ms no original). */
  .diferenciais__midia .numeros__item[data-reveal].is-reveal-visivel {
    animation-delay: 0ms;
  }

  .diferenciais__midia .numeros__item:nth-child(2)[data-reveal].is-reveal-visivel {
    animation-delay: 500ms;
  }

  .diferenciais__midia .numeros__item:nth-child(3)[data-reveal].is-reveal-visivel {
    animation-delay: 1000ms;
  }

  .diferenciais__texto {
    display: flex;
    flex: 0 1 50%;
    flex-direction: column;
    gap: 8px;
  }

  .diferenciais__texto .secao__rotulo {
    margin-bottom: 0;
  }

  .diferenciais__lista .icon-box {
    align-items: flex-end;
    gap: 15px;
    margin-top: 24px;
  }

  .diferenciais__lista .icon-box__icone {
    padding: 12px;
  }

  @media (max-width: 1024px) {
    .diferenciais,
    .diferenciais--invertido {
      flex-direction: column;
      align-items: stretch;
    }

    .diferenciais__midia {
      order: 2;
      flex-basis: auto;
    }

    .diferenciais__midia .numeros,
    .diferenciais--invertido .diferenciais__midia .numeros {
      position: static;
      flex-direction: row;
      gap: 20px;
      width: 100%;
      margin-top: 24px;
    }
  }

  @media (max-width: 767px) {
    .diferenciais {
      margin-block: 100px 80px;
    }

    .diferenciais__midia .numeros,
    .diferenciais--invertido .diferenciais__midia .numeros {
      flex-direction: column;
      margin-top: -80px;
      padding-inline: 12px;
    }

    .diferenciais__midia .numeros__item {
      width: 65%;
    }

    .diferenciais__lista .icon-box {
      align-items: flex-start;
    }
  }

  /* ---------- Cabeçalho de seção centralizado ("Nosso Ecossistema") ---------- */
  .titulo-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 120px;
  }

  .titulo-centro .secao__rotulo {
    margin-bottom: 0;
  }

  @media (max-width: 767px) {
    .titulo-centro .secao__rotulo {
      margin-bottom: 15px; /* medido no original a 390px */
    }
  }

  /* ---------- Faixa com fundo claro até a borda direita (carrosséis e trajetória) ---------- */
  .faixa-clara {
    padding-left: var(--container-padding);
    background-image: linear-gradient(90deg, transparent 50%, var(--cor-fundo-claro) 50%);
  }

  .faixa-clara__caixa {
    max-width: calc(var(--container-max) + (100vw - var(--container-max)) / 2);
    margin-left: auto;
    padding: 80px 20px 80px 80px;
    border-radius: var(--raio-lg) 0 0 var(--raio-lg);
    background: var(--cor-fundo-claro);
  }

  .faixa-clara--espaco {
    margin-bottom: 120px;
  }

  /* Carrossel de produtos dentro da faixa (home e segurados). */
  .faixa-produtos {
    display: flex;
    flex-direction: column;
    gap: 64px;
  }

  .faixa-produtos .secao__cabecalho {
    margin-bottom: 0;
  }

  @media (max-width: 767px) {
    .faixa-produtos {
      gap: 40px;
    }

    .faixa-clara--espaco {
      margin-bottom: 80px;
    }
  }

  @media (max-width: 1280px) {
    .faixa-clara__caixa {
      max-width: none;
    }
  }

  @media (max-width: 1024px) {
    .faixa-clara__caixa {
      padding: 80px 20px;
    }
  }

  @media (max-width: 767px) {
    .faixa-clara__caixa {
      padding: 40px 20px;
    }
  }
}

@layer pages {
  /* ---------- Condições gerais ---------- */
  .condicoes {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-block: 40px 100px;
  }

  .condicoes__documentos {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
  }

  .condicoes__documentos a {
    color: var(--cor-secundaria);
    font-size: 14px;
    text-decoration: none; /* como no original; sublinhado no hover/foco */
  }

  .condicoes__documentos a:hover,
  .condicoes__documentos a:focus-visible {
    color: var(--cor-primaria);
    text-decoration: underline;
  }

  @media (max-width: 1024px) {
    .condicoes {
      margin-block: 40px;
    }
  }

  /* Original a 390px: acordeão de borda a borda e 13px abaixo do título. */
  @media (max-width: 767px) {
    .condicoes {
      gap: 13px;
    }

    .condicoes .acordeao {
      margin-inline: calc(-1 * var(--container-padding));
    }
  }

  /* ---------- Sucesso ---------- */
  .sucesso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 800px;
    margin-block: 40px 80px;
    text-align: center;
  }

  @media (max-width: 767px) {
    .sucesso {
      margin-block: 40px 60px;
    }

    .sucesso h1 {
      font-size: 40px;
      line-height: 46px;
    }
  }
}