/* CSS dos demais blocos (carregados perto do ). Gerado por migração única a partir de blocos */ /* ===== Bloco: antecipacao-recebiveis ===== */ /* ============================================================= Bloco: Antecipação de Recebíveis ============================================================= */ .antecipacao-recebiveis {width: 100%;padding: 64px;background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #010081 0%, #3249ae 100%);padding: 5rem 0 5rem;text-align: center;} .antecipacao-recebiveis .topo{display: flex;width: 100%;text-align: left;gap: 5rem;justify-content: space-between;} .antecipacao-recebiveis .topo-texto{flex: 0 0 65%;max-width: 54%;} .antecipacao-recebiveis .topo-imagem{/* flex: 0 0 35%; */margin: 0 -68px 0 0;max-width: 38%;} .antecipacao-recebiveis .topo-imagem img{max-width: 100%;height: auto;} @media (max-width: 767px) { .antecipacao-recebiveis .topo{flex-direction: column;} .antecipacao-recebiveis .topo-texto, .antecipacao-recebiveis .topo-imagem{flex: 0 0 100%;max-width: 100%;} } .antecipacao-recebiveis .box-branco{background: #fff;border-radius: 1.5rem;padding: 2rem 2rem;margin-top: -15rem;text-align: left;width: 93%;z-index: 1;position: relative;max-width: 1065px;} .antecipacao-recebiveis .box-branco-cards{display: flex;width: 100%;align-items: stretch;} .antecipacao-recebiveis .box-branco-card{flex: 1;padding: 0px 1rem;display: flex;flex-direction: column;gap: 0.75rem;border-left: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));} .antecipacao-recebiveis .box-branco-card:first-child{border-left: none;padding-left: 0;} .antecipacao-recebiveis .box-branco-card:last-child{/* border-left: none; */padding-right: 0;} .antecipacao-recebiveis .box-branco-icon{display: flex;align-items: center;justify-content: center;width: 56px;aspect-ratio: 1;background: var(--Blue_Primary-50);border-radius: 34% 13%;} .antecipacao-recebiveis .box-branco-icon i{font-size: 24px;color: var(--Blue_Primary-600);} .antecipacao-recebiveis .box-branco-card h4{margin: 0;font-size: 16px;font-weight: 600;color: var(--Blue_Primary-950);} .antecipacao-recebiveis .box-branco-card p{margin: 0;font-size: 0.95rem;color: #7d889f;} .antecipacao-recebiveis .box-branco-acoes{display: flex;justify-content: center;margin-top: 2.5rem;} .antecipacao-recebiveis .box-branco-acoes a.btn_primary{padding-left:4rem;padding-right:4rem;} @media (max-width: 991px) { .antecipacao-recebiveis .box-branco-cards{flex-direction: column;gap: 2rem;} .antecipacao-recebiveis .box-branco-card{border-left: none;border-top: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));padding: 2rem 0 0;} .antecipacao-recebiveis .box-branco-card:first-child{border-top: none;padding-top: 0;} .antecipacao-recebiveis .box-branco{width:100%;margin-top: -6rem;} .antecipacao-recebiveis .box-branco-acoes a.btn_primary{padding-left:3rem;padding-right:4rem;} } /* ===== Bloco: banner-app ===== */ /* ============================================================= Bloco: Banner App ============================================================= */ .banner-app {width: 100%;position: relative;overflow: hidden;color: #fff;padding: 1rem 0;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);height: 28rem;} .banner-app .container{position: relative;z-index: 1;} .banner-app .conteudo{display: flex;align-items: center;justify-content: space-between;gap: 2rem;height: 28rem;position: relative;} .banner-app .col-texto{width: 30%;display: flex;flex-direction: column;gap: 1.5rem;} .banner-app .label-app{font-weight: 500;font-size: 16px;line-height: 150%;color: rgba(255,255,255,.75);} .banner-app h2{color: #fff;font-size: 2.5rem;max-width: 20rem;} .banner-app .col-imagens{position: absolute;width: 100%;height: 100%;z-index: -1;} .banner-app .col-imagens-mobile{display: none;} .banner-app .col-imagens .imagem{position: absolute;width: auto;height: 100%;max-width: none;} .banner-app .col-imagens .imagem-1{left: 30%;bottom: -40px;height: 88%;z-index: 1;} .banner-app .col-imagens .imagem-2{right: 30%;bottom: -86px;height: 109%;z-index: 2;} .banner-app .col-imagens .imagem.is-entering{transition: left 0.9s ease-out, right 0.9s ease-out;} .banner-app .col-lojas{width: 22%;display: flex;flex-direction: column;gap: 9px;align-items: flex-start;} .banner-app .loja-btn{display: flex;align-items: center;gap: .75rem;background: var(--Blue_Primary-700);border-radius: 40px;padding: 12px 16px 16px;color: #fff;text-decoration: none;width: fit-content;min-width: 174px;} .banner-app .loja-btn:hover{background: var(--Blue_Primary-800);text-decoration: none;} .banner-app .loja-btn i{font-size: 28px;margin: 4px 0 -2px 0;} .banner-app .loja-btn .loja-texto{display: flex;flex-direction: column;line-height: 1.2;} .banner-app .loja-btn .loja-texto small{font-size: 11px;font-weight: 400;color: rgba(255,255,255,.75);} .banner-app .loja-btn .loja-texto strong{font-size: 16px;font-weight: 700;color: #fff;} @media (max-width: 1024px) { .banner-app .conteudo{flex-wrap: wrap;} .banner-app .col-texto{width: 100%;text-align: center;align-items: center;} .banner-app h2{max-width: 100%;} .banner-app .col-imagens{width: 100%;order: 3;margin: 2rem auto 0;} .banner-app .col-lojas{width: 100%;order: 2;flex-direction: row;justify-content: center;} } @media (max-width: 767px) { .banner-app {padding: 4rem 0; height: 40rem;} .banner-app h2{font-size: 1.75rem;} .banner-app .col-imagens{display: none;} .banner-app .col-imagens-mobile{display: block; position: relative;} .banner-app .col-lojas{flex-direction: column;align-items: center; position:absolute;} .col-imagens-mobile img.imagem.imagem-1 {position: relative;bottom: -197px;left: -58px;width: 222px;} .col-imagens-mobile img.imagem.imagem-2 {width: 200px;position: relative; bottom: 138px; right: -168px;} .banner-app .loja-btn {width: 100%; justify-content: center;} } /* ===== Bloco: bloco-acc2 ===== */ /* ============================================================= Bloco: Bloco Accordion 2 — Lista + Imagem com Overlay ============================================================= */ .bloco-acc2-block {width: 100%;padding: 6rem 0;background: var(--color-white);} .bloco-acc2__layout {display: flex;gap: 2rem;align-items: center;} .bloco-acc2__col-left {flex: 0 0 50%;max-width: 56%;display: flex;flex-direction: column;gap: 1.2rem;} .bloco-acc2__col-right {flex: 1 1 56%;} .bloco-acc2__col-left h2 {margin: 0;} .bloco-acc2__col-left h2 .cor-azul {color: var(--Blue_Primary-600);} .bloco-acc2__col-left > p {margin: 0;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));font-size: 16px;line-height: 150%;} /* ---------- Coluna esquerda: lista de títulos ---------- */ .bloco-acc2__list {display: flex;flex-direction: column;gap: 0.25rem;} .bloco-acc2__item {display: flex;align-items: center;gap: 6px;width: 100%;text-align: left;background: transparent;border: none;border-radius: 8px;padding: 1rem 1rem;cursor: pointer;color: var(--Blue_Primary-900);font-family: Plus Jakarta Sans;font-weight: normal;font-size: 16px;line-height: 150%;transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;} .bloco-acc2__item i {font-size: 1.5rem;color: var(--Blue_Primary-900);transition: color 0.35s ease;flex-shrink: 0;} .bloco-acc2__item:hover {background: var(--Blue_Primary-50);color:var(--Blue_Primary-700)} .bloco-acc2__item.is-active {font-weight:700;background: var(--Blue_Primary-600);color: var(--color-white);font-size:18px;} .bloco-acc2__item.is-active i {color: var(--color-white);font-size:2rem} /* ---------- Coluna direita: imagem + overlay ---------- */ .bloco-acc2__image-wrap {position: relative;width: 100%;aspect-ratio: 1;border-radius: 10rem 4rem;overflow: hidden;background: var(--Blue_Primary-50);} .bloco-acc2__img-slot {position: absolute;inset: 0;opacity: 0;transition: opacity 0.6s ease, transform 0.6s ease;transform: scale(1.04);pointer-events: none;} .bloco-acc2__img-slot.is-active {opacity: 1;transform: scale(1);pointer-events: auto;} .bloco-acc2__img {width: 100%;height: 100%;object-fit: cover;display: block;} .bloco-acc2__overlay {position: absolute;inset: 0;pointer-events: none;} .bloco-acc2__overlay-content {position: absolute;left: 6%;bottom: 8%;max-width: 78%;background: var(--Blue_Primary-900);color: var(--color-white);padding: 1.2rem 1.5rem 1.5rem;border-radius: 8px;opacity: 0;transform: translateX(40px);pointer-events: none;} .bloco-acc2__overlay-content.is-active {pointer-events: auto;animation: blocoAcc2SlideIn 0.6s ease 1s both;} .bloco-acc2__overlay-content h4 {margin: 0 0 0.5rem;font-size: 16px;font-weight: 600;color: var(--color-white);} .bloco-acc2__overlay-text {font-size: 14px;line-height: 150%;color: rgba(255, 255, 255, 0.85);} .bloco-acc2__overlay-text p {margin: 0;color: inherit;font-size: 14px;} @keyframes blocoAcc2SlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .bloco-acc2__progress {height: 3px;background: #e9ecef;border-radius: 2px;margin-top: 1.5rem;overflow: hidden;display: none;} .bloco-acc2__progress-bar {height: 100%;background: var(--Blue_Primary-600);width: 0%;} .bloco-acc2__empty {padding: 2rem 0;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));font-weight: 500;} @media (max-width: 767px) { .bloco-acc2-block {padding: 4rem 0;} .bloco-acc2__layout {flex-direction: column;gap: 2rem;} .bloco-acc2__col-left, .bloco-acc2__col-right {flex: 0 0 100%;max-width: 100%;} .bloco-acc2__col-right {order: 2; width: 100%;} .bloco-acc2__col-left {order: 1;} .bloco-acc2__item {margin-bottom: 9px;} .bloco-acc2__item.is-active {display: flex;transform: none;} .bloco-acc2__overlay-content {max-width: 90%;padding: 1.25rem 1.5rem;} .bloco-acc2__progress {display: block;} } /* ===== Bloco: boleto-emissao ===== */ /* ============================================================= Bloco: Boleto Emissão ============================================================= */ .boleto-emissao { width: 100%; padding: 6rem 0; background: #fff; } .boleto-emissao .conteudo { display: flex; flex-direction: column; align-items: center; gap: 3.5rem; } .boleto-emissao .conteudo h2 {text-align: center;max-width: 780px;} .boleto-emissao .conteudo h2 .destaque { color: var(--Blue_Primary-500); } .boleto-emissao .grid-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1rem 20px;width: 100%;} .boleto-emissao .card-item { display: flex; flex-direction: column; gap: 0.75rem; } .boleto-emissao .card-item .icone {width: 52px;height: 52px;background: var(--Blue_Primary-50);border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;} .boleto-emissao .card-item .icone i { font-size: 1.5rem; color: var(--Blue_Primary-500); } .boleto-emissao .card-item h3 {font-size: 16px;color: var(--Blue_Primary-900);min-height: 48px;} .boleto-emissao .card-item p{color: var(--Alfa-Oxford-50, #0C235F80);font-size: 14px;} @media (max-width: 991px) { .boleto-emissao .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } @media (max-width: 767px) { .boleto-emissao { padding: 4rem 0; } .boleto-emissao .conteudo h2 { font-size: 1.75rem; } .boleto-emissao .grid-cards { grid-template-columns: 1fr; gap: 2rem; } } /* ===== Bloco: boleto-oferta ===== */ /* ============================================================= Bloco: Boleto Oferta ============================================================= */ .boleto-oferta {width: 100%;padding: 8rem 0 6rem;} .boleto-oferta .conteudo{position:relative;display: flex;gap: 2rem;background: var(--Blue_Primary-950);background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);color: #fff;padding: 3rem 2rem;border-radius: 2rem;} .boleto-oferta .conteudo .col-1{display: flex;flex-direction: column;gap: 1.0rem;flex: 1;max-width: 42%;} .boleto-oferta .conteudo .col-2{flex: 1;position: relative;display: flex;max-width: 54%;align-items: center;gap: 6px;} .boleto-oferta .btn_primary{width: fit-content;} .boleto-oferta .zero{position:absolute;font-size: 20rem;display: flex;flex-direction: column;gap: 0;z-index: 0;opacity: 0.06;right: -74px;top: -4rem;line-height: 16rem;text-transform: lowercase;} .boleto-oferta .zero span{position: relative;line-height: 83%;font-weight: 900;} .boleto-oferta .taxa{display: flex;flex-direction: column;gap: 6px;text-align: left;width: 172px;} .boleto-oferta .taxa span:nth-child(1){font-size: 62px;font-weight: 900;line-height: 84%;} .boleto-oferta .taxa span:nth-child(2){font-size: 62px;font-weight: 900;line-height: 84%;} .boleto-oferta .taxa span:nth-child(3){font-size: 21px;line-height: 1;} .boleto-oferta .taxa span:nth-child(4){font-size: 27px;line-height: 1;font-weight: 900;} .boleto-oferta .zero-image{max-width: 230px;aspect-ratio: 0.63;} .boleto-oferta .selo-image{top: 0;position: absolute;right: 0;} .boleto-oferta .consulte-condicoes{position: absolute;bottom: 12px;right: 38px;color: var(--Alfa-White-75, #FFFFFFBF);font-size: 12px;} @media (max-width: 767px) { .boleto-oferta {padding: 5rem 0;} .boleto-oferta .conteudo{flex-direction: column;gap: 3rem;padding:3rem 20px;overflow: hidden;} .boleto-oferta .conteudo .col-1{order: 2;max-width:none;} .boleto-oferta .conteudo .col-1 p{color: var(--Alfa-White-75, #FFFFFFBF);font-size: 14px;} .boleto-oferta .btn_primary{width: auto;} .boleto-oferta .conteudo .col-2{order: 1;max-width:none;} .boleto-oferta .zero-image{max-width: 50%;} .boleto-oferta .selo-image{top: -32px;position: absolute;right: -14px;max-width: 16%;} .boleto-oferta .taxa{font-size: 45px;margin-left: 12px;} .boleto-oferta .taxa span:nth-child(1){font-size: 100%;} .boleto-oferta .taxa span:nth-child(2){font-size: 100%;} .boleto-oferta .taxa span:nth-child(3){font-size: 36%;} .boleto-oferta .taxa span:nth-child(4){font-size: 45%;} .boleto-oferta .consulte-condicoes{right: 0;width: 100%;text-align: center;} } /* ===== Bloco: boleto-personalizacao ===== */ /* ============================================================= Bloco: Boleto Personalização ============================================================= */ .boleto-personalizacao {width: 100%;padding: 6rem 0 0rem;background: var(--Blue_Primary-50);position: relative;overflow: hidden;} .boleto-personalizacao .container{z-index:3;position: relative;} .boleto-personalizacao .conteudo {display: flex;flex-direction: column;gap: 3rem;} /* Topo */ .boleto-personalizacao .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 9px;} .boleto-personalizacao .topo .elemento-01{margin:0;color: var(--Blue_Primary-600);} .boleto-personalizacao .topo h2 {max-width: 680px;} .boleto-personalizacao .topo h2 b{color: var(--Blue_Primary-600);font-weight: 600;} /* Corpo */ .boleto-personalizacao .corpo {/* display: flex; */gap: 4rem;/* align-items: center; */position: relative;} .boleto-personalizacao .col-imagem {/* flex: 1; */width: 718px;position: absolute;top: 0;right: 52%;} .boleto-personalizacao .col-imagem img {width: 100%;height: auto;/* position: absolute; */right: 0;top: 0;display: block;box-shadow: 0px 28px 37px rgba(0,0,0,0.12);} /* Features */ .boleto-personalizacao .col-features {/* flex: 1; */width: 48%;display: inline-flex;flex-direction: column;gap: 2rem;margin: 0 0 0 52%;height: 800px;justify-content: center;} .boleto-personalizacao .lista-features {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;justify-content: space-between;/* min-height: 29rem; */gap: 25px;} .boleto-personalizacao .feature-item {display: flex;gap: 1rem;align-items: flex-start;cursor: pointer;} .boleto-personalizacao .feature-icon {width: 48px;/* height: 42px; */aspect-ratio: 0.95;flex-shrink: 0;display: flex;align-items: center;justify-content: center;background: #ffffff;border-radius: 34% 15%;color: var(--Blue_Primary-600);font-size: 1.25rem;} .boleto-personalizacao .feature-icon img {width: 51%;height: auto;transition: all 300ms ease-in-out;} .boleto-personalizacao .feature-texto {display: flex;flex-direction: column;} .boleto-personalizacao .feature-texto strong {font-weight: 600;font-size: inherit;line-height: 150%;letter-spacing: 0%;margin: 0 0 0px 0;color: var(--Blue_Primary-950);} .boleto-personalizacao .feature-texto p {font-size: 78%;margin: 0;} .boleto-personalizacao .btn_primary {width: fit-content;} .boleto-personalizacao .fundo{content:"oii";display: block;width: 110%;aspect-ratio: 1;position: absolute;top: 6rem;left: -5%;border-radius: 50%;z-index: 0;} .boleto-personalizacao .fundo div{content:"oii";display: block;width: 82%;aspect-ratio: 1;position: absolute;top: 13%;left: 9%;border-radius: 50%;} .boleto-personalizacao .fundo{background-color: #e4f1ff;} .boleto-personalizacao .fundo > div{background-color: #d8eaff;} .boleto-personalizacao .fundo > div > div{background-color: #c4e1ff;} .boleto-personalizacao .feature-item:hover .feature-icon{width: 90px;font-size: 57px;border-radius: 20px 10px;} .boleto-personalizacao .feature-item:hover .feature-icon img{width: 82%;} .boleto-personalizacao .feature-item:hover .feature-texto{font-size: 129%!important;} .boleto-personalizacao .feature-icon, .boleto-personalizacao .feature-texto *, .boleto-personalizacao .transacao-300{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 991px) { .boleto-personalizacao .corpo {gap: 2.5rem;} } @media (max-width: 767px) { .boleto-personalizacao {padding: 4rem 0;} .boleto-personalizacao .fundo{width: 300%;left: -100%;top: 20rem;} .boleto-personalizacao .fundo div{top: 12rem;} .boleto-personalizacao .corpo {flex-direction: column; display: flex;} .boleto-personalizacao .col-imagem {width: 100%;order: 2; position: relative;top: 0;right: 0;} .boleto-personalizacao .col-features {order: 1; width: 100%; margin:0;} .boleto-personalizacao .btn_primary{width:auto;justify-content: center;} } /* ===== Bloco: boleto-usar ===== */ /* ============================================================= Bloco: Boleto Usar ============================================================= */ .boleto-usar {width: 100%;padding: 8rem 0 6rem;} .boleto-usar .conteudo {display: flex;flex-direction: column;gap: 3rem;} .boleto-usar .topo {text-align: center;max-width: 640px;margin: 0 auto;display: flex;flex-direction: column;gap: 1rem;} .boleto-usar .cards {display: flex;gap: 1rem;align-items: stretch;min-height: 420px;} .boleto-usar .card {flex: 1;background: var(--Blue_Primary-50);border-radius: 1.25rem;padding: 1.5rem;cursor: pointer;display: flex;flex-direction: column;justify-content: space-between;gap: 1rem;overflow: hidden;transition: flex 0.4s ease, background-color 0.4s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;} .boleto-usar .card:hover{background: var(--Blue_Primary-300);} .boleto-usar .card.ativo {flex: 2.5;background: var(--Blue_Primary-600);color: #fff;} .boleto-usar .card .card-icon {display: flex;align-items: center;justify-content: center;width: 2.75rem;height: 2.75rem;background: #fff;border-radius: 50%;flex-shrink: 0;transition: opacity 0.25s ease, transform 0.25s ease;} .boleto-usar .card .card-icon i {font-size: 1.25rem;color: var(--Blue_Primary-600);} .boleto-usar .card.ativo .card-icon {opacity: 0;transform: scale(0.5);pointer-events: none;height: 0;width: 0;padding: 0;margin: 0;display: none;} .boleto-usar .card .card-content {display: flex;flex-direction: column;gap: 0.75rem;} .boleto-usar .card .card-content h4 {font-size: 20px;font-weight: 600;line-height: 150%;margin: 0;color: var(--Blue_Primary-950);} .boleto-usar .card.ativo .card-content h4 {color: #fff;} .boleto-usar .card .card-content p {font-size: 0.875rem;margin: 0;opacity: 0;max-height: 0;overflow: hidden;transition: opacity 0.35s ease 0.1s, max-height 0.35s ease;} .boleto-usar .card.ativo .card-content p {opacity: 1;max-height: 6rem;color: inherit;} .boleto-usar .card .card-image {opacity: 0;max-height: 0;overflow: hidden;transition: opacity 0.35s ease 0.15s, max-height 0.4s ease;display: none;} .boleto-usar .card.ativo .card-image {opacity: 1;max-height: 260px;display: block;} .boleto-usar .mockup {background: var(--Blue_Primary-100);border-radius: 0.75rem;padding: 1.25rem;display: flex;flex-direction: column;gap: 0.75rem;min-height: 180px;} .boleto-usar .mockup-header {display: flex;align-items: flex-start;justify-content: space-between;} .boleto-usar .mockup-logo {display: flex;align-items: center;gap: 0.4rem;font-size: 0.75rem;font-weight: 700;color: var(--Blue_Primary-600);background: #fff;padding: 0.35rem 0.65rem;border-radius: 0.5rem;} .boleto-usar .mockup-logo i {font-size: 1rem;} .boleto-usar .mockup-qr {font-size: 2.5rem;color: var(--Blue_Primary-950);line-height: 1;} .boleto-usar .mockup-linha {height: 0.5rem;background: rgba(255,255,255,0.7);border-radius: 0.25rem;} .boleto-usar .mockup-linha.curta {width: 55%;} .boleto-usar .card.saindo {opacity: 0.3;transform: scale(0.97);} @media (max-width: 767px) { .boleto-usar .cards {flex-direction: column;min-height: unset;} .boleto-usar .card.ativo {flex: unset;} .boleto-usar .card.ativo .card-content p {max-height: unset;} .boleto-usar .card.ativo .card-image {max-height: unset;} } /* ===== Bloco: cartao-calculadora ===== */ /* ============================================================= Bloco: Cartão Calculadora ============================================================= */ .cartao-calculadora {width: 100%;padding: 8rem 0 6rem;background: var(--Blue_Primary-600);} .cartao-calculadora .conteudo{display: flex;gap: 2rem;} .cartao-calculadora .conteudo .col-1{display: flex;flex-direction: column;gap: 1rem;width: 56%;} .cartao-calculadora .conteudo .col-2{position: relative;width: 49%;/* margin-top: -2rem; */aspect-ratio: 1;display: flex;align-items: flex-end;} .cartao-calculadora .btn_primary{width: fit-content;} .cartao-calculadora h2{color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));} .cartao-calculadora p{color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .cartao-calculadora .imagem-fundo{width: 100%;aspect-ratio: 1;position: absolute;z-index: 0;bottom: 12rem;text-align: center;margin: 0 auto;left: auto;right: auto;} .cartao-calculadora .imagem-fundo img{margin: 0 auto;width: 70%;height: auto;} .cartao-calculadora .conteudo:hover .imagem-fundo img{width: 80%;} .cartao-calculadora p{margin:0;} .cartao-calculadora .icone-calculadora{background: var(--Blue_Primary-900);height: 56px;width: 56px;display: flex;align-items: center;justify-content: center;border-radius: 16px 6px;color: var(--color-white);font-size: 28px;} .cartao-calculadora .card-branco{display: flex;flex-direction: column;gap: 1.5rem;background: var(--color-white);border-radius: 16px;padding: 20px;box-shadow: 0 24px 48px rgba(11, 32, 90, 0.2);margin: 2rem 0 0 0;z-index: 1;} .cartao-calculadora .card-calculadora .card-titulo{font-size: 16px;font-weight: 800;color: var(--Blue_Primary-950);} .cartao-calculadora .campo{display: flex;flex-direction: column;gap: 0.5rem;} .cartao-calculadora .campo label{font-size: 14px;font-weight: 500;color: var(--Alfa-Oxford-75);} .cartao-calculadora .campo input, .cartao-calculadora .campo select{width: 100%;padding: 0.875rem 1rem;border: 1px solid #E4E8EE;border-radius: 8px;font-size: 16px;font-family: var(--font-base);color: var(--Blue_Primary-950);appearance: none;background: var(--Alfa-Oxford-5, rgba(12, 35, 95, 0.05));} .cartao-calculadora .campo select{cursor: pointer;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2311205A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 1rem center;} .cartao-calculadora .btn-simular{width: 100%;border: none;border-radius: 8px;padding: 1rem;background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), var(--Blue_Primary-600);color: var(--color-white);font-size: 14px;font-weight: 700;cursor: pointer;transition: background 0.2s;} .cartao-calculadora .btn-simular:hover{background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), var(--Blue_Primary-800);} .cartao-calculadora .card-aviso{font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .cartao-calculadora .col-2 .card{width: 100%;max-width: 100%;gap: 1rem;} .cartao-calculadora .opcoes-recebimento{display: flex;gap: 0.75rem;} .cartao-calculadora .opcoes-recebimento .opcao{flex: 1;display: flex;flex-direction: column;gap: 0;border: 1px solid #E4E8EE;border-radius: 12px;padding: 8px 16px; cursor: pointer;transition: border-color 0.2s, background 0.2s;} .cartao-calculadora .opcoes-recebimento .opcao span{font-size: 14px;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .cartao-calculadora .opcoes-recebimento .opcao strong{font-size: 24px;font-weight: 800;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .cartao-calculadora .opcoes-recebimento .opcao.ativa{border-color: var(--Blue_Primary-600);background: var(--Blue_Primary-50);} .cartao-calculadora .opcoes-recebimento .opcao.ativa span, .cartao-calculadora .opcoes-recebimento .opcao.ativa strong{color: var(--Blue_Primary-600);} .cartao-calculadora .resultado-linha{display: flex;flex-direction: column;} .cartao-calculadora .resultado-linha span{font-size: 14px;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .cartao-calculadora .resultado-linha span b{color: var(--Blue_Primary-600);font-weight: 700;} .cartao-calculadora .resultado-linha strong{font-size: 16px;font-weight: 800;color: var(--Blue_Primary-900);} .cartao-calculadora .resultado-linha strong.destaque{font-size: 16px;color: var(--Blue_Primary-900);} .cartao-calculadora .resultado-linha small{font-size: 14px;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .cartao-calculadora .imagem-fundo img{transition: width 0.6s ease;} @media (max-width: 767px) { .cartao-calculadora {padding: 5rem 0;} .cartao-calculadora .conteudo{ display: grid; gap: 1.5rem; grid-template-areas: "icone" "titulo" "paragrafo" "imagem" "form" "resultado"; } .cartao-calculadora .conteudo .col-1, .cartao-calculadora .conteudo .col-2{display: contents;} .cartao-calculadora .col-1 .icone-calculadora{grid-area: icone;} .cartao-calculadora .col-1 > h2{grid-area: titulo;} .cartao-calculadora .col-1 > p{grid-area: paragrafo;} .cartao-calculadora .col-1 .card-calculadora{grid-area: form;width: 100%;margin: -6rem 0 0;} .cartao-calculadora .col-2 .imagem-fundo{grid-area: imagem;position: static;width: 100%;aspect-ratio: 1;} .cartao-calculadora .col-2 .card{grid-area: resultado;width: 100%;margin: 0;} } /* ===== Bloco: cartao-funcionamento-cobranca ===== */ /* ============================================================= Bloco: Cartão - Funcionamento da Cobrança ============================================================= */ .cartao-funcionamento-cobranca {width: 100%;padding: 6rem 0;background: var(--Blue_Primary-50);} /* Topo */ .cfc__topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;margin: 0 0 4rem;} .cfc__topo h2 {max-width: 680px;} /* Diagrama: SVG desenha a linha tracejada ligando os badges, calculada via JS a partir da posição real de cada elemento */ .cfc__diagram {position: relative;} .cfc__wire-svg {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;} .cfc__wire-path {fill: none;stroke: var(--Blue_Primary-800);stroke-width: 2;stroke-dasharray: 7 7;stroke-linejoin: round;stroke-linecap: round;} .cfc__flow {position: relative;padding: 0 36px;z-index: 1;} .cfc__flow-upper {position: relative;} /* Numeração */ .cfc__badge {flex-shrink: 0;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;background: var(--Blue_Primary-600);color: #fff;font-weight: 700;font-size: 15px;border-radius: 16px 6px;box-shadow: 0 4px 10px rgba(4,76,255,.25);position: relative;z-index: 2;} .cfc__badge--centro {margin: 0 auto;} /* Linha do passo: badges centralizados sobre cada card */ .cfc__steps-row {position: relative;display: grid;grid-template-columns: 1fr 1fr;gap: 24px;align-items: center;margin-bottom: 28px;} .cfc__steps-row .cfc__badge {justify-self: center;} /* Grid 2x2 */ .cfc__grid {display: grid;grid-template-columns: 1fr 1fr;gap: 6rem;margin-bottom: 28px;} /* Card 5 final */ .cfc__final {position: relative;z-index: 1;display: flex;flex-direction: column;align-items: center;gap: 16px;max-width: 760px;margin-inline: auto;padding-top: 24px;} /* Cards */ .cfc__card {position: relative;z-index: 1;background: var(--color-white);border: 1px solid var(--Blue_Primary-100);border-radius: 10rem 2.5rem;padding: 3rem 3rem;cursor: pointer;display: flex;flex-direction: column;align-items: center;gap: 6px;text-align: center;width: 100%;max-width: 488px;margin-inline: auto;transition: background .3s ease, color .3s ease, border-color .3s ease;} .cfc__card-titulo {font-weight: 600;font-size: 20px;line-height: 130%;color: var(--Blue_Primary-950);margin: 0;transition: color .3s ease;margin-bottom: 1rem;} .cfc__card-texto {font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);margin: 0;transition: color .3s ease;max-width: 96%;margin-bottom: 2rem!important;} .cfc__card.active {background: var(--Blue_Primary-600);border-color: var(--Blue_Primary-600);} .cfc__card.active .cfc__card-titulo {color: #fff;} .cfc__card.active .cfc__card-texto {color: rgba(255,255,255,.75);} /* Avatar genérico (substitui foto por ícone, sem peso extra de imagem) */ .cfc__avatar-linha {display: flex;justify-content: center;margin: 1rem 0 0 0;} .cfc__card--4 .cfc__avatar-linha {margin: 0;} .cfc__avatar {width: 56px;height: 56px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 34px;box-shadow: 0 6px 16px rgba(12,35,95,.12);} .cfc__avatar--sm {width: 36px;height: 36px;font-size: 22px;flex-shrink: 0;} .cfc__card.active .cfc__avatar {background: var(--color-white);color: var(--Blue_Primary-600);} .cfc__avatar-foto {width: 84px;height: auto;display: block;} /* Card 1: chip pessoa jurídica */ .cfc__chip {background: var(--Blue_Primary-50);border-radius: 6px;padding: 12px 54px 12px 12px;display: flex;flex-direction: column;gap: 2px;text-align: center;} .cfc__chip strong {font-size: 14px;color: var(--Blue_Primary-600);font-weight: normal;} .cfc__chip span {font-size: 12px;color: var(--Alfa-Oxford-50);} .cfc__card.active .cfc__chip {background: var(--color-white);} /* Botão decorativo (Nova cobrança / Antecipar valores) */ .cfc__btn {width: fit-content;display: inline-flex!important;align-items: center;gap: 2px!important;font-size: 12px!important;font-weight: 700!important;padding: 0 12px!important;border-radius: 8px!important;height: 42px;min-height: 42px!important;} .cfc__btn i {font-size: 20px!important;} /* Card 2: método e parcelas */ .cfc__conector {width: 1px;height: 22px;background: var(--Blue_Primary-200);} .cfc__card--2 .cfc__btn {justify-content: center;padding: 8px 14px;min-height: 42px;font-size: 12px;gap: 7px;height: 42px;} .cfc__metodo {width: 100%;background: var(--Blue_Primary-50);border: 1px solid var(--Blue_Primary-600);border-radius: 16px;padding: 24px;display: flex;flex-direction: column;align-items: center;gap: 8px;color: var(--Blue_Primary-600);} .cfc__metodo i {font-size: 26px;} .cfc__metodo span {font-size: 15px;font-weight: 700;color: var(--Blue_Primary-950);} .cfc__card.active .cfc__metodo {background: var(--color-white);} .cfc__pills {width: 100%;display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;} .cfc__pill {font-size: 12px;font-weight: 500;padding: 8px 12px;border-radius: 8px;/* background: var(--Blue_Primary-50); */color: var(--Blue_Primary-950);border: 1px solid var(--Blue_Primary-100);} .cfc__pill--ativa {color: var(--Blue_Primary-600);border-color: var(--Blue_Primary-600);font-weight: 700;background: var(--Blue_Primary-50);} .cfc__card.active .cfc__pill {background: var(--color-white);} /* Card 4: cartão e confirmação */ .cfc__cartao-info {background: var(--Blue_Primary-50);border-radius: 12px;padding: 12px 16px;display: flex;align-items: center;gap: 10px;} .cfc__card.active .cfc__cartao-info {background: var(--color-white);} .cfc__visa {background: linear-gradient(135deg, #1434CB, #2566F0);color: #fff;font-style: italic;font-weight: 800;font-size: 11px;padding: 4px 8px;border-radius: 4px;letter-spacing: .5px;} .cfc__cartao-nome {font-size: 13px;font-weight: 600;color: var(--Blue_Primary-950);} .cfc__cartao-tipo {margin-left: 5rem;font-size: 12px;color: var(--Alfa-Oxford-50);} .cfc__sucesso {display: flex;align-items: center;gap: 0px;font-size: 13px;font-weight: 600;color: #1aa64a;} .cfc__sucesso-icone {width: 56px;aspect-ratio: 1;flex-shrink: 0;margin: 0 0px 0 0;} /* Card 3: notificações */ .cfc__label {font-size: 13px;font-weight: 600;color: var(--Blue_Primary-950);transition: color .3s ease;} .cfc__card.active .cfc__label {color: #fff;} .cfc__toggles {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;} .cfc__toggle {display: inline-flex;align-items: center;gap: 6px;background: var(--color-white);border: 1px solid var(--Blue_Primary-100);border-radius: 8px;padding: 10px 10px;font-size: 12px;font-weight: 600;color: var(--Blue_Primary-950);} .cfc__toggle--ativo {background: var(--Blue_Primary-50);border-color: var(--Blue_Primary-600);} .cfc__toggle i {font-size: 15px;color: var(--Blue_Primary-600);} .cfc__card.active .cfc__toggle {background: var(--color-white);} .cfc__card.active .cfc__toggle--ativo {background: var(--Blue_Primary-50);} .cfc__switch {width: 30px;height: 17px;border-radius: 999px;background: #d7dde6;position: relative;flex-shrink: 0;} .cfc__switch::after {content: "";position: absolute;width: 13px;height: 13px;border-radius: 50%;background: #fff;top: 2px;left: 2px;transition: left .2s ease;} .cfc__switch.is-on {background: var(--Blue_Primary-600);} .cfc__switch.is-on::after {left: 15px;} .cfc__mensagem {width: 70%;background: var(--Blue_Primary-50);border-radius: 14px;padding: 12px 14px;display: flex;align-items: center;gap: 10px;text-align: left;} .cfc__card.active .cfc__mensagem {background: var(--color-white);} .cfc__mensagem-avatar {position: relative;flex-shrink: 0;width: 80px;} .cfc__avatar-foto--sm {width: 100%;border-radius: 50%;aspect-ratio: 1;} .cfc__mensagem-badge {position: absolute;bottom: -2px;right: -2px;width: 20px;height: 20px;border-radius: 50%;background: var(--Blue_Primary-600);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 11px;box-shadow: 0 2px 4px rgba(0,0,0,.15);} .cfc__mensagem p {margin: 0;font-size: 12px;line-height: 145%;color: var(--Alfa-Oxford-50);text-align: left;} /* Card 5 */ .cfc__final .cfc__card--5 {/* max-width: 100%; */padding: 3rem 2rem;} .cfc__card--5 {flex-direction: column;} .cfc__final-linha {position: relative;display: flex;/* align-items: center; */justify-content: space-between;/* gap: 40px; *//* flex-wrap: wrap; */width: 100%;} .cfc__wire-svg--mini {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;} .cfc__wire-path--solido {stroke-dasharray: none;} .cfc__valores {position: relative;z-index: 1;display: flex;flex-direction: column;gap: 12px;flex: 1;/* min-width: 212px; */max-width: 226px;} .cfc__valor-box {background: var(--Blue_Primary-50);border: 1px solid transparent;border-radius: 9px;padding: 8px 8px;display: flex;flex-direction: column;gap: 4px;text-align: left;color: var(--Blue_Primary-900);} .cfc__valor-box--ativo {border-color: var(--Blue_Primary-600);border: 2px solid;} .cfc__valor-box span {font-size: 12px;/* color: var(--Alfa-Oxford-50); */} .cfc__valor-box strong {font-size: 29px;color: var(--Blue_Primary-600);font-weight: 800;letter-spacing: -1px;} .cfc__valor-box--ativo strong{color: var(--Blue_Primary-900);} .cfc__card.active .cfc__valor-box {background: var(--color-white);} .cfc__antecipar {position: relative;z-index: 1;display: flex;flex-direction: column;align-items: center;gap: 10px;} @media (max-width: 991px) { .cfc__flow {padding: 0 20px;} } @media (max-width: 767px) { .cartao-funcionamento-cobranca {padding: 4rem 0;} .cfc__flow {padding: 0;display: flex;flex-direction: column;align-items: center;gap: 28px;} .cfc__card {max-width: 100%;border-radius: 3rem 1.5rem;} .cfc__final-linha {flex-direction: column;align-items: stretch;} .cfc__antecipar {flex-direction: row;justify-content: center;} /* Empilha badge + card em sequência (1 a 5), cada badge centralizado sobre o seu card */ .cfc__flow-upper, .cfc__flow-upper > .cfc__steps-row, .cfc__flow-upper > .cfc__grid, .cfc__flow > .cfc__grid { display: contents; } .cfc__steps-row .cfc__badge {justify-self: unset;} .cfc__flow [data-badge="1"] {order: 1;} .cfc__flow .cfc__card--1 {order: 2;} .cfc__flow [data-badge="2"] {order: 3;} .cfc__flow .cfc__card--2 {order: 4;} .cfc__flow [data-badge="3"] {order: 5;} .cfc__flow .cfc__card--3 {order: 6;} .cfc__flow [data-badge="4"] {order: 7;} .cfc__flow .cfc__card--4 {order: 8;} } /* ===== Bloco: cartao-metodos-pagamento ===== */ /* ============================================================= Bloco: Cartão Métodos de Pagamento ============================================================= */ .cartao-metodos-pagamento {width: 100%;padding: 6rem 0;background: var(--Blue_Primary-50);} .cartao-metodos-pagamento .container{display: flex;} .cartao-metodos-pagamento .box-branco{width: 100%;background: #fff;border-radius: 24px;padding: 4rem;display: flex;flex-direction: column;align-items: center;gap: 3rem;} .cartao-metodos-pagamento .topo{text-align: center;max-width: 640px;display: flex;flex-direction: column;align-items: center;gap: 1rem;} .cartao-metodos-pagamento .topo h2{margin: 0;font-weight: 600;color: var(--Blue_Primary-950);} .cartao-metodos-pagamento .topo p{margin: 0;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .cartao-metodos-pagamento .cards{display: flex;gap: 1rem;width: 100%;align-items: stretch;} .cartao-metodos-pagamento .card{flex: 1;background: #fff;border: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));border-radius: 1rem;padding: 1.5rem;display: flex;flex-direction: column;gap: 1rem;min-height: 20rem;transition: background-color 300ms ease-in-out;} .cartao-metodos-pagamento .card:hover{background: var(--Alfa-Oxford-5, rgba(12,35,95,0.05));} .cartao-metodos-pagamento .card-icon{display: flex;align-items: center;justify-content: center;width: 52px;height: 55px;background: var(--Blue_Primary-600);border-radius: 16px 8px;} .cartao-metodos-pagamento .card-icon i{font-size: 1.5rem;color: #fff;} .cartao-metodos-pagamento .card h4{margin: 0;font-size: 16px;font-weight: 600;color: var(--Blue_Primary-950);} .cartao-metodos-pagamento .card p{margin: 0;font-size: 14px;flex: 1;/* color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); */} .cartao-metodos-pagamento .card a{margin-top: auto;width: fit-content;font-size: 14px;font-weight: 600;color: var(--Blue_Primary-950);text-decoration: underline;} @media (max-width: 767px) { .cartao-metodos-pagamento .box-branco{padding: 2rem;} .cartao-metodos-pagamento .cards{flex-direction: column;} .cartao-metodos-pagamento p{font-size:14px;} .cartao-metodos-pagamento .card{min-height: 18rem;} } /* ===== Bloco: conciliacao-automatica ===== */ /* ============================================================= Bloco: Conciliação Automática ============================================================= */ .conciliacao-automatica {width: 100%;padding: 6rem 0 12rem;background: var(--color-white);} .conciliacao-automatica .conteudo, .conciliacao-automatica .container{z-index: 2;position: relative;} .conciliacao-automatica .topo {display: flex;flex-direction: column;align-items: center;text-align: center;margin: 0 0 4rem;} .conciliacao-automatica .topo h2 {max-width: 680px;} .conciliacao-automatica .corpo {display: flex;gap: 2rem;align-items: center;} .conciliacao-automatica .col-imagem {flex: 1;min-width: 0;position: relative;} .conciliacao-automatica .col-imagem .foto {width: 54%;height: auto;display: block;border-radius: 1rem;} .conciliacao-automatica .col-imagem .painel {position: absolute;width: 73%;height: auto;right: 0%;bottom: -41%;border-radius: 0.75rem;box-shadow: 0 16px 48px rgba(12,35,95,.16);} .conciliacao-automatica .col-features {flex: 1;min-width: 0;} .conciliacao-automatica .lista-features {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 2rem;} .conciliacao-automatica .feature-item {display: flex;gap: 8px;align-items: center;} .conciliacao-automatica .feature-icon {/* width: 47px; *//* aspect-ratio: 1; *//* flex-shrink: 0; *//* display: flex; *//* align-items: center; *//* justify-content: center; *//* background: var(--Blue_Primary-50); *//* border-radius: 34% 11%; */color: var(--Blue_Primary-600);font-size: 1.5rem;} .conciliacao-automatica .feature-texto {display: flex;flex-direction: column;} .conciliacao-automatica .feature-texto strong {font-weight: 600;font-size: 16px;line-height: 150%;letter-spacing: 0%;margin: 0 0 4px 0;color: var(--Blue_Primary-950);} .conciliacao-automatica .feature-texto p {font-size: 14px;margin: 0;/* color: #7d889f; */} @media (max-width: 991px) { .conciliacao-automatica .corpo {gap: 2.5rem;} } @media (max-width: 767px) { .conciliacao-automatica {padding: 4rem 0;} .conciliacao-automatica .topo {margin: 0 0 2.5rem;} .conciliacao-automatica .corpo {flex-direction: column;} .conciliacao-automatica .col-imagem {width: 100%;margin-bottom:34%;} .conciliacao-automatica .col-features {width: 100%;} .conciliacao-automatica .col-imagem .painel{width: 88%;bottom: -55%;} } /* ===== Bloco: credito-como-receber ===== */ /* ============================================================= Bloco: Crédito Como Receber ============================================================= */ .credito-como-receber {width: 100%;padding: 6rem 0;} .credito-como-receber .container{display: flex;flex-direction: column;align-items: center;gap: 3rem;} .credito-como-receber .topo{text-align: center;max-width: 640px;display: flex;flex-direction: column;gap: 1rem;} .credito-como-receber .topo h2{margin: 0;font-weight: 600;color: var(--Blue_Primary-950);} .credito-como-receber .cards{display: flex;gap: 1rem;width: 100%;align-items: stretch;} .credito-como-receber .card{flex: 1;background: #fff;border: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));border-radius: 1rem;padding: 1.5rem;display: flex;flex-direction: column;gap: 1rem;cursor: pointer;transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;} .credito-como-receber .card:hover{background: var(--Blue_Primary-50);border-color: var(--Blue_Primary-600);} .credito-como-receber .card-icon{display: flex;align-items: center;justify-content: center;width: 52px;height: 52px;background: #fff;border-radius: 12px 6px;} .credito-como-receber .card-icon i{font-size: 1.25rem;color: var(--Blue_Primary-600);transition: color 300ms ease-in-out;} .credito-como-receber .card h4{margin: 0;font-size: 16px;font-weight: 600;color: var(--Blue_Primary-950);transition: color 300ms ease-in-out;} .credito-como-receber .card:hover h4{color: var(--Blue_Primary-600);} .credito-como-receber .card p{margin: 0;font-size: 14px;transition: color 300ms ease-in-out;} .credito-como-receber .acoes{display: flex;} .credito-como-receber .acoes a{padding-left:4rem;padding-right:4rem;} .elemento-juncao-01{display: block;width: 100%;height: 6rem;background: var(--Blue_Primary-600);position: relative;margin-top: -6rem;} .elemento-juncao-01:after{content: "";display: block;width: 100%;height: 100%;background: #ffffff;position: absolute;border-radius: 0 0 300px 300px;} @media (max-width: 767px) { .credito-como-receber .cards{flex-direction: column;} } /* ===== Bloco: documentacao ===== */ /* ============================================================= Bloco: Documentação ============================================================= */ .bloco-documentacao .elemento-01{margin:0;} .bloco-documentacao {width: 100%;padding: 6rem 0;background: #ffffff;color: var(--Gray_800);} .bloco-documentacao p{margin:0;font-size: 14px;} .bloco-documentacao .conteudo{display: flex;gap: 2rem;} .bloco-documentacao .conteudo .col-1{display: flex;flex-direction: column;gap: 1.5rem;flex: 1;} .bloco-documentacao .conteudo h3 span{color: var(--Blue_Primary-600);} .bloco-documentacao .conteudo .col-2{flex: 1;position: relative;text-align: right;} .bloco-documentacao .conteudo .col-2:before{content:"";display: block;position: absolute;bottom: 0;right: 0%;width: 88%;height: 110%;max-width: 30rem;aspect-ratio: 1;border-radius: 10% 10% 0 0;z-index: 0;background: #efefef;} .bloco-documentacao .acoes{display: flex;} .bloco-documentacao .acoes .btn_default{color: var(--Alfa-Oxford-75, #0C235FBF);} .bloco-documentacao .imagem-fundo{width: 100%;z-index: 1;position: relative;margin: 0 0 0 auto;margin-right: 6%;max-width: 26rem;right: 0;} .bloco-documentacao .imagem-fundo img{width: 100%;} @media (max-width: 767px) { .bloco-documentacao {padding: 4rem 0} .bloco-documentacao .conteudo{flex-direction: column;gap: 2.5rem} .bloco-documentacao .conteudo .col-1{order: 2;text-align: center;} .bloco-documentacao .conteudo .col-2{order: 1;aspect-ratio: 1;overflow: hidden} .bloco-documentacao .conteudo .col-2:before{width: 90%;right: 5%;} .bloco-documentacao .imagem-fundo{margin: 0 auto;} .bloco-documentacao .acoes{display:flex;flex-direction:column; gap:2rem;} .bloco-documentacao .acoes a{text-align:center;justify-content: center;} .bloco-documentacao .elemento-01{margin:0 auto;} } /* ===== Bloco: gerencie-assinaturas ===== */ /* Estilos do bloco Gerencie Assinaturas */ .gerencie-assinaturas{display:block;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);padding: 5rem 0 0;text-align: center;position: relative;color:#fff;overflow: hidden;} .gerencie-assinaturas h2{max-width: 848px;margin: auto;} .gerencie-assinaturas .hero-img{display:block;max-width: 56rem;width: 56rem;margin: 48px auto 0;} @media (max-width: 768px) { } /* ===== Bloco: link-agilize-pagamentos ===== */ /* ============================================================= Bloco: Link Agilize Pagamentos ============================================================= */ .link-agilize-pagamentos { width: 100%; padding: 6rem 0; background: #fff; } .link-agilize-pagamentos .conteudo { display: flex; flex-direction: column; align-items: center; gap: 3.5rem; } .link-agilize-pagamentos .conteudo h2 {text-align: center;max-width: 780px;} .link-agilize-pagamentos .conteudo h2 .destaque { color: var(--Blue_Primary-500); } .link-agilize-pagamentos .grid-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1rem 2rem;width: 100%;} .link-agilize-pagamentos .card-item { display: flex; flex-direction: column; gap: 0.75rem; } .link-agilize-pagamentos .card-item .icone {width: 52px;height: 52px;background: var(--Blue_Primary-50);border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;} .link-agilize-pagamentos .card-item .icone i { font-size: 1.5rem; color: var(--Blue_Primary-500); } .link-agilize-pagamentos .card-item h3 {font-size: 16px;color: var(--Blue_Primary-900);} @media (max-width: 991px) { .link-agilize-pagamentos .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } @media (max-width: 767px) { .link-agilize-pagamentos { padding: 4rem 0; } .link-agilize-pagamentos .conteudo h2 { font-size: 1.75rem; } .link-agilize-pagamentos .grid-cards { grid-template-columns: 1fr; gap: 2rem; } } /* ===== Bloco: link-facil ===== */ /* ============================================================= Bloco: Veja como é fácil gerar um Link na LyTex ============================================================= */ .link-facil {width: 100%;padding: 6rem 0;background: var(--Blue_Primary-50);} /* Topo */ .lf__topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;margin: 0 0 4rem;} .lf__topo h2 {max-width: 680px;} /* Diagrama: SVG desenha a linha tracejada ligando os badges, calculada via JS a partir da posição real de cada elemento */ .lf__diagram {position: relative;} .lf__wire-svg {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;} .lf__wire-path {fill: none;stroke: var(--Blue_Primary-800);stroke-width: 2;stroke-dasharray: 7 7;stroke-linejoin: round;stroke-linecap: round;} .lf__flow {position: relative;padding: 0 36px;z-index: 1;} .lf__flow-upper {position: relative;} /* Numeração */ .lf__badge {flex-shrink: 0;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;background: var(--Blue_Primary-600);color: #fff;font-weight: 700;font-size: 15px;border-radius: 16px 6px;box-shadow: 0 4px 10px rgba(4,76,255,.25);position: relative;z-index: 2;} /* Linha do passo: badges centralizados sobre cada card */ .lf__steps-row {position: relative;display: grid;grid-template-columns: 1fr 1fr;gap: 24px;align-items: center;margin-bottom: 28px;} .lf__steps-row .lf__badge {justify-self: center;} /* Grid 2x2 */ .lf__grid {display: grid;grid-template-columns: 1fr 1fr;gap: 6rem;margin-bottom: 28px;} /* Cards */ .lf__card {position: relative;z-index: 1;background: var(--color-white);border: 1px solid var(--Blue_Primary-100);border-radius: 10rem 2.5rem;padding: 3rem 3rem;cursor: pointer;display: flex;flex-direction: column;align-items: center;gap: 6px;text-align: center;width: 100%;max-width: 488px;margin-inline: auto;transition: background .3s ease, color .3s ease, border-color .3s ease;} .lf__card.paddingReduzido{padding: 3rem 1rem;} .lf__card-titulo {font-weight: 600;font-size: 20px;line-height: 130%;color: var(--Blue_Primary-950);margin: 0;transition: color .3s ease;margin-bottom: 1rem;} .lf__card-texto {font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);margin: 0;transition: color .3s ease;max-width: 96%;margin-bottom: 2rem!important;} .lf__card.active {background: var(--Blue_Primary-600);border-color: var(--Blue_Primary-600);} .lf__card.active .lf__card-titulo {color: #fff;} .lf__card.active .lf__card-texto {color: rgba(255,255,255,.75);} /* Botão decorativo (Nova cobrança / Link de Pagamentos) */ .lf__btn {width: fit-content;display: inline-flex;align-items: center;gap: 6px;background: var(--color-white);color: var(--Blue_Primary-600);font-size: 12px;font-weight: 700;padding: 12px 16px;border-radius: 8px;border: 1px solid var(--Blue_Primary-600);} .lf__btn i {font-size: 16px;} .lf__btn.btn_1{ background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), var(--Blue_Primary-600); border: 1px solid #ffffff33; border-bottom: 1px solid #044cffde; border-top: 1px solid #5986f7; color: var(--color-white); } .lf__conector {width: 1.2px;height: 22px;background: var(--Blue_Primary-400);} .lf__conector.c1 {margin: 0 0 0 68%;} .lf__card.active .lf__conector {background: rgba(255,255,255,.3);} /* Card 1: opções de links */ .lf__opcoes-links {width: 100%;display: flex;/* flex-wrap: wrap; */justify-content: center;gap: 5px;} .lf__opcao-link {flex: 1;background: var(--Blue_Primary-50);border: 1px solid var(--Blue_Primary-100);border-radius: 6px;padding: 1rem 4px;font-size: 10px;font-weight: 500;color: var(--Blue_Primary-950);} .lf__card.active .lf__opcao-link {background: rgba(255,255,255,.08);border-color: rgba(255,255,255,.25);color: #fff;} /* Card 2: métodos e taxas */ .lf__metodos {width: 100%;display: flex;gap: 10px;} .lf__metodo-opcao {flex: 1;display: flex;align-items: center;justify-content: center;gap: 6px;border: 1px solid var(--Blue_Primary-100);border-radius: 4px;padding: 16px 8px;font-size: 14px;color: var(--Blue_Primary-950);height: 4rem;} .lf__metodo-opcao--ativa {border-color: var(--Blue_Primary-600);color: var(--Blue_Primary-600);font-weight: 700;background: var(--Blue_Primary-50);padding: 3rem 8px;} .lf__metodo-opcao--ativa i {font-size: 22px;} .lf__card.active .lf__metodo-opcao {background: rgba(255,255,255,.08);border-color: rgba(255,255,255,.25);color: #fff;} .lf__card.active .lf__metodo-opcao--ativa {background: var(--color-white);color: var(--Blue_Primary-600);border-color: var(--color-white);padding: 4rem 8px;} .lf__taxas {width: 100%;display: flex;gap: 10px;} .lf__taxa {flex: 1;border: 1px solid var(--Blue_Primary-100);border-radius: 10px;padding: 12px 8px;font-size: 12px;font-weight: 500;color: var(--Blue_Primary-950);} .lf__card.active .lf__taxa {background: rgba(255,255,255,.08);border-color: rgba(255,255,255,.25);color: #fff;} /* Card 4: mensagens do chat */ .lf__mensagem {width: 73%;background: var(--Blue_Primary-50);border-radius: 14px 14px 6px 14px;padding: 12px 14px;display: flex;align-items: center;gap: 10px;text-align: left;margin-bottom: 12px;position: relative;margin-left: 26%;} .lf__mensagem:last-child {margin-bottom: 0;} .lf__mensagem--resposta {margin-right: auto;margin-left: initial;border-radius: 14px 14px 14px 6px;} .lf__card.active .lf__mensagem {background: var(--color-white);} .lf__mensagem-avatar {position: relative;/* flex-shrink: 0; */width: 36%;aspect-ratio: 1;/* height: 40px; *//* display: flex; *//* align-items: center; *//* justify-content: center; *//* border-radius: 50%; *//* background: var(--color-white); *//* color: var(--Blue_Primary-600); *//* font-size: 40px; */} .lf__mensagem-avatar img{width:100%;} .lf__card.active .lf__mensagem-avatar {background: var(--Blue_Primary-50);} .lf__mensagem-badge {position: absolute;bottom: -2px;right: -2px;width: 18px;height: 18px;border-radius: 50%;background: var(--Blue_Primary-600);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 10px;box-shadow: 0 2px 4px rgba(0,0,0,.15);} .lf__mensagem p {margin: 0;font-size: 12px;line-height: 145%;color: var(--Alfa-Oxford-50);text-align: left;width: 68%;/* background: aqua; */} .lf__mensagem p a {color: var(--Blue_Primary-600);word-break: break-all;} /* Card 3: notificações e configurações */ .lf__label {font-size: 13px;font-weight: 600;color: var(--Blue_Primary-950);transition: color .3s ease;} .lf__card.active .lf__label {color: #fff;} .lf__toggles {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;} .lf__toggle {display: inline-flex;align-items: center;gap: 6px;background: var(--color-white);border: 1px solid var(--Blue_Primary-100);border-radius: 8px;padding: 10px 10px;font-size: 12px;font-weight: 600;color: var(--Blue_Primary-950);} .lf__toggle--ativo {background: var(--Blue_Primary-50);border-color: var(--Blue_Primary-600);} .lf__toggle i {font-size: 15px;color: var(--Blue_Primary-600);} .lf__card.active .lf__toggle {background: var(--color-white);} .lf__card.active .lf__toggle--ativo {background: var(--Blue_Primary-50);} .lf__switch {width: 30px;height: 17px;border-radius: 999px;background: #d7dde6;position: relative;flex-shrink: 0;} .lf__switch::after {content: "";position: absolute;width: 13px;height: 13px;border-radius: 50%;background: #fff;top: 2px;left: 2px;transition: left .2s ease;} .lf__switch.is-on {background: var(--Blue_Primary-600);} .lf__switch.is-on::after {left: 15px;} .lf__config-box {/* width: 100%; *//* background: var(--Blue_Primary-50); */border: 1px solid var(--Blue_Primary-500);border-radius: 10px;padding: 12px;font-size: 13px;font-weight: 600;color: var(--Blue_Primary-950);} .lf__card.active .lf__config-box {background: var(--color-white);} @media (max-width: 991px) { .lf__flow {padding: 0 20px;} } @media (max-width: 767px) { .link-facil {padding: 4rem 0;} .lf__flow {padding: 0;display: flex;flex-direction: column;align-items: center;gap: 28px;} .lf__card {max-width: 100%;border-radius: 3rem 1.5rem;} /* Empilha badge + card em sequência (1 a 4), cada badge centralizado sobre o seu card */ .lf__flow-upper, .lf__flow-upper > .lf__steps-row, .lf__flow-upper > .lf__grid, .lf__flow > .lf__grid { display: contents; } .lf__steps-row .lf__badge {justify-self: unset;} .lf__flow [data-badge="1"] {order: 1;} .lf__flow .lf__card--1 {order: 2;} .lf__flow [data-badge="2"] {order: 3;} .lf__flow .lf__card--2 {order: 4;} .lf__flow [data-badge="3"] {order: 5;} .lf__flow .lf__card--3 {order: 6;} .lf__flow [data-badge="4"] {order: 7;} .lf__flow .lf__card--4 {order: 8;} } /* ===== Bloco: link-pagamentos ===== */ /* ============================================================= Bloco: Link de Pagamentos ============================================================= */ .link-pagamentos {width: 100%;padding: 8rem 0 6rem;background: var(--Blue_Primary-50);} .link-pagamentos .conteudo{display: flex;align-items: center;gap: 4rem;} .link-pagamentos .conteudo .col-1{display: flex;flex-direction: column;gap: 2rem;width: 50%;} .link-pagamentos .conteudo .col-1 h2{margin: 0;} .link-pagamentos .conteudo .col-2{width: 46%;} .link-pagamentos .conteudo .col-2 img{display: block;width: 100%;height: auto;} .link-pagamentos .elemento-01{margin: 0;} .link-pagamentos .grid-features{display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;width: 100%;} .link-pagamentos .feature-item{display: flex;gap: 0;background: var(--color-white);border-radius: 12px;padding: 1rem 1.25rem;flex-direction: column;} .link-pagamentos .feature-item i{font-size: 1.25rem;color: var(--Blue_Primary-600);} .link-pagamentos .feature-item span{font-weight: 600;font-size: 14px;color: var(--Blue_Primary-950);} .link-pagamentos .btn_primary{width: fit-content;} @media (max-width: 768px) { .link-pagamentos {padding: 5rem 0;} .link-pagamentos .conteudo{flex-direction: column;gap: 3rem;} .link-pagamentos .conteudo .col-1{order: 2;width: 100%;} .link-pagamentos .conteudo .col-2{order: 1;width: 100%;max-width: 360px;margin: 0 auto;} .link-pagamentos .grid-features{grid-template-columns: 1fr 1fr;gap: 0.75rem;} .link-pagamentos .feature-item{padding: 0.875rem 1rem;} .link-pagamentos .btn_primary{width:100%;justify-content:center;} } @media (max-width: 480px) { .link-pagamentos .grid-features{grid-template-columns: 1fr;} } /* ===== Bloco: lytex-acordion-1 ===== */ /* ============================================================= Widget: LyTex Accordion 1 — Two Column Layout ============================================================= */ .lytex-acc1 {width: 100%;padding-top: 64px;padding-bottom: 64px;} .lytex-acc1 h2 {margin: 0 0 32px;} .lytex-acc1__layout {display: flex;gap: 3rem;align-items: flex-start;} .lytex-acc1__col-left {flex: 0 0 45%;max-width: 45%;} .lytex-acc1__col-right {flex: 1 1 55%;display: grid;background: var(--Blue_Primary-50);padding: 32px;border-radius: 16px;} .lytex-acc1__item {border-bottom: 4px solid transparent;padding: 1rem 0px 1.25rem;transition: border-color 0.4s ease;} .lytex-acc1__item.is-active{border-bottom: 4px solid var(--Blue_Primary-600);} .lytex-acc1__btn {background: none;border: none;padding: 0;width: 100%;text-align: left;color: var(--Blue_Primary-900);cursor: pointer;display: flex;align-items: center;gap: 0;transition: color 0.25s ease;font-family: Plus Jakarta Sans;font-weight: 600;font-size: 20px;line-height: 150%;letter-spacing: 0%;} .lytex-acc1__item.is-active .lytex-acc1__btn, .lytex-acc1__item .lytex-acc1__btn:hover {color: var(--Blue_Primary-600);} .lytex-acc1__text {display: grid;grid-template-rows: 0fr;opacity: 0;color: #0C235FBF;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;} .lytex-acc1__text-inner {overflow: hidden;min-height: 0;padding-top: 0.6rem;} .lytex-acc1__item.is-active .lytex-acc1__text {grid-template-rows: 1fr;opacity: 1;} .lytex-acc1__text ul {padding-left: 1.25rem;margin: 0 0;} .lytex-acc1__text p:last-child {margin-bottom: 0;} .lytex-acc1__img-slot {grid-column: 1;grid-row: 1;opacity: 0;pointer-events: none;transition: opacity 0.5s ease;} .lytex-acc1__img-slot.is-active {opacity: 1;pointer-events: auto;} .lytex-acc1__img {width: 100%;height: auto;border-radius: 0.75rem;display: block;object-fit: cover;} .lytex-acc1__progress {height: 3px;background: #e9ecef;border-radius: 2px;margin-top: 1.5rem;overflow: hidden;display:none;} .lytex-acc1__progress-bar {height: 100%;background: #0d6efd;width: 0%;} .lytex-acc1__empty {padding: 2rem 0;color: #0C235FBF;font-weight: 500;} @media (max-width: 767px) { .lytex-acc1__layout {flex-direction: column;gap: 1.5rem;} .lytex-acc1__col-left, .lytex-acc1__col-right {flex: 0 0 100%;max-width: 100%;} .lytex-acc1__col-right {order: 1;} .lytex-acc1__item{display:none} .lytex-acc1__item.is-active{display:block} .lytex-acc1__progress {display:block;} } /* ===== Bloco: lytex-antecipacao-recebiveis ===== */ /* ============================================================ bloco: LyTex Antecipação de Recebíveis ============================================================ */ .lytex-antecipacao-recebiveis {width: 100%;padding: 8rem 0px;font-family: Arial, Helvetica, sans-serif;} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-container {width: 100%;margin: 0 auto;display: flex;align-items: flex-start;justify-content: space-between;gap: 6rem;} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-content {width: 50%;/* display: flex; *//* flex-direction: column; *//* justify-content: flex-start; *//* align-items: flex-start; */} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-content p {margin: 26px 0 50px 0;font-size: 16px;} .lytex-antecipacao-recebiveis .cta-buttons { display: flex; align-items: center; gap: 8px; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-image {flex: 1;display: inline-block;width: 41%;position: relative;margin: -4rem 0 0 0;} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-image:before { content: ""; position: absolute; bottom: 0; background: var(--Blue_Primary-50); border-radius: 44% 15%; height: 94%; width: 100%; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-image-wrapper { position: relative; width: 100%; height: fit-content; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-image-wrapper img {width: 100%;/* object-fit:contain; */position: relative;top: 0px;aspect-ratio: 0.94;} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-info-card {position: absolute;background: #fff;padding: 12px 22px;border-radius: 9px;box-shadow: 0 10px 30px rgb(0 31 158 / 15%);color: #1d3476;white-space: nowrap;font-weight: 600;font-size: 10.84px;line-height: 150%;letter-spacing: 0%;display: flex;gap: 6px;} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-info-card i{color:#000;color: var(--Blue_Primary-600);font-size: 16px;} .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-card-top { top: 32%; left: -12%; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-card-middle { top: calc(44% + 10px); left: -8%; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-floating-icon {position: absolute;right: 9%;bottom: -14%;width: 24%;height: auto;} @media(max-width: 768px) { .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-container { flex-direction: column; gap: 2rem; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-content { width: 100%; text-align: center; } .lytex-antecipacao-recebiveis .cta-buttons { display: block; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-image { width: 100%; } .lytex-antecipacao-recebiveis h2 { color: var(--Blue_Primary-950); margin-bottom: 35px; font-weight: 600; font-size: 32px; line-height: 150%; } .lytex-antecipacao-recebiveis h2 > span:before { width: 100%; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-content p { text-align: left; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-buttons { flex-direction: column; align-items: flex-start; gap: 20px; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-card-top { top: 39%; left: 0%; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-card-middle { top: 51%; left: 0%; } .lytex-antecipacao-recebiveis .lytex-antecipacao-recebiveis-floating-icon{right: 8%;bottom: -15%;} } /* ===== Bloco: lytex-api-1 ===== */ /* ============================================================ Widget: LyTex API 1 ============================================================ */ .lytex-api-1{background: linear-gradient(0deg, #0B389D 0%, #0C235F 100%);position: relative;padding: 6rem 0 6rem;} .lytex-api-1::before{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 18rem;background: var(--Blue_Primary-50);z-index: 0;} .lytex-api-1 .fundo-container{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;z-index: 0;} .lytex-api-1 .fundo{display: block;width: 110%;aspect-ratio: 1;position: absolute;top: -50rem;left: -5%;border-radius: 50%;z-index: 0;background-color: #051c3d24;} .lytex-api-1 .fundo div{display: block;width: 82%;aspect-ratio: 1;position: absolute;top: 8%;left: 9%;border-radius: 50%;background-color: #051c3d24} .lytex-api-1 .icone-sessao{position: absolute;left: calc(50% - 64px);width: 128px;top: -64px;z-index: 1;} .lytex-api-1 .icone-sessao img{color: #fff;} .lytex-api-1 .container{text-align: center;z-index: 2;position: relative;} .lytex-api-1 h1{margin: 4px 16% 0;font-weight: 500;} .lytex-api-1 .cards{text-align: left;display: flex;margin: 2.4rem 0 3rem;gap: 24px;} .lytex-api-1 .card{position:relative;color: #e9dcdc;border: 1.5px solid #ffffff1f;padding: 16px 24px 0px;border-radius: 8px;display: flex;flex-direction: column;gap: 8px;overflow: hidden;cursor: pointer;} .lytex-api-1 .card .icone{background: var(--Blue_Primary-950);display: inline-flex;width: 48px;height: 48px;align-items: center;justify-content: center;border-radius: 16px 8px;font-size: 24px;} .lytex-api-1 .card h3{font-weight: 700;font-size: 20px;line-height: 150%;color: var(--color-white);} .lytex-api-1 .card p{font-size: 14px;line-height: 150%;color: #ffffff78;} .lytex-api-1 .card a{color:#fff;padding-left: 0;font-weight: 400;} .lytex-api-1 .card > *{z-index:1;} .lytex-api-1 .card:before{display:block;position:absolute;content:"";top: 0;left: 0;width:100%;height:100%;background: linear-gradient(180deg, var(--Blue_Primary-800), #092aaa);z-index: 0;opacity: 0;} .lytex-api-1.card-1-selecionado .card-1:before{opacity: 1;} .lytex-api-1.card-2-selecionado .card-2:before{opacity: 1;} .lytex-api-1 .imgens{height: 346px;position: relative;width: 84%;margin: 0 auto;overflow: hidden;} .lytex-api-1 .imgens > div{display: block;width: 100%;position: absolute;top: 500px;height: 100%;background-size: 100%;opacity:0.4} .lytex-api-1.card-1-selecionado .img-card-1{top:0;opacity:1} .lytex-api-1.card-2-selecionado .img-card-2{top:0;opacity:1} .lytex-api-1 .apidev{position:relative;margin-top:-40px;} .lytex-api-1 .apidev .conteudo{background-color: #fff;position: relative;z-index: 1;border-radius: 24px;box-shadow: 0 -16px 116px rgb(0 0 0 / 42%);padding: 60px;display: flex;justify-content: space-between;text-align: left;} .lytex-api-1 .apidev .col-1{width: 48%;position: relative;} .lytex-api-1 .apidev .col-2{width: 48%;background: rgba(246, 248, 249, 1);padding: 16px 2rem;border-radius: 24px;} .lytex-api-1 .apidev .col-3{display:none;} .lytex-api-1 .apidev h3{font-weight: 600;font-size: 24px;line-height: 150%;letter-spacing: -4%;color: var(--Blue_Primary-900);margin: 0rem 0 28px;} .lytex-api-1 .apidev p{font-size:14px;margin-bottom: 28px;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} .lytex-api-1 .apidev p b{font-weight: 400;color: var(--Alfa-Oxford-90, rgba(12, 35, 95, 0.9));} .lytex-api-1 .apidev .btn_primary{position: absolute;bottom: 0;} .lytex-api-1 .apidev .col-2 img{max-width: 38px;} .lytex-api-1 .apidev .col-2 span{font-weight: 700;color: var(--Blue_Primary-900);} .lytex-api-1 .bts_linguagem{display: flex;margin-top: 24px;justify-content: space-between;gap: 2px;} .lytex-api-1 .btn_linguagem{display: inline-flex;align-items: center;padding: 0px 4px 4px;border: 2px solid #b4b4b400;border-radius: 10px;color: #fff;text-decoration: none;background: transparent;flex-direction: column;font-size: 12px;width: 13%;} .lytex-api-1 .btn_linguagem.active{border: 2px solid #dadadade;} .lytex-api-1 .codes{border-radius:6px 6px 0 0;margin-top: 24px;overflow: hidden;color: #ffffffa1;padding: 12px;background: var(--Blue_Primary-950);font-size: 12px;} .lytex-api-1 .codes > div{display: none;overflow: hidden;max-height: 284px;} .lytex-api-1 .codes > div.active{display: block;} .lytex-api-1 .card:before, .transacao-300 { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .lytex-api-1 .imgens > div, .transacao-900 { -webkit-transition: all 900ms ease-in-out; -moz-transition: all 900ms ease-in-out; -ms-transition: all 900ms ease-in-out; -o-transition: all 900ms ease-in-out; transition: all 900ms ease-in-out; } @media(max-width: 768px) { .lytex-api-1{padding: 4rem 0;} .lytex-api-1:before{height: 4rem;} .lytex-api-1 .icone-sessao{display:none;} .lytex-api-1 h2{margin: 2rem 0;font-size:24px;} .lytex-api-1 .cards{flex-direction:column;} .lytex-api-1 .card{padding: 12px 12px 0;} .lytex-api-1 .card h3{font-size:16px;} .lytex-api-1 .card p{font-size:12px;} .lytex-api-1 .imgens{height: 200px;position: relative;width: 100%;margin: 0 auto;overflow: hidden;} .lytex-api-1 .img-card-1{background-image: url(./blocos/lytex-api-1/lytex-api-1-img-card-1-mobile.png)!important;opacity: 1!important;top: 0!important;} .lytex-api-1 .apidev{margin:0;padding:0} .lytex-api-1 .apidev .conteudo{display: flex;padding: 2rem 1rem;flex-direction: column;} .lytex-api-1 .apidev .conteudo > div{width:100%;} .lytex-api-1 .apidev .col-1 p{display:none;} .lytex-api-1 .apidev .col-1 .btn_primary{display:none;} .lytex-api-1 .apidev .col-2{padding:16px;font-size:80%;border-radius:10px} .lytex-api-1 .btn_linguagem{font-size:10px} .lytex-api-1 .apidev .col-2 img{max-width:24px;} .lytex-api-1 .apidev .col-2 .codes{border-radius:6px 6px 0 0} .lytex-api-1 .apidev .btn_primary{position: relative;bottom: 0;} .lytex-api-1 .apidev .col-3{display:block;} } /* ===== Bloco: lytex-api-2 ===== */ /* ============================================================ Widget: LyTex API 2 ============================================================ */ .lytex-api-2{background: var(--Blue_Primary-50);padding: 6rem 0;} .lytex-api-2 .topo{max-width: 640px;margin: 0 auto 4rem;text-align: center;} .lytex-api-2 .topo h2{margin: 0;} .lytex-api-2 .cards{display: flex;gap: 24px;} .lytex-api-2 .cards .card{flex: 1;display: flex;flex-direction: column;gap: 16px;border-radius: 24px;} .lytex-api-2 .cards .card .imagem{background: var(--Blue_Primary-950);border-radius: 16px 16px 0 0;display: flex;align-items: center;justify-content: center;flex-direction: column;min-height: 248px;color: #fff;font-size: 18px;gap: 2px;} .lytex-api-2 .cards .card .imagem img{max-width: 100%;} .lytex-api-2 .cards .card h3{margin: 0;} .lytex-api-2 .cards .card p{margin: 0;color: rgba(12, 35, 95, 0.5);font-size: 14px;} .lytex-api-2 .cards .card .btn_primary{margin-top: auto;align-self: flex-start;min-width: 15rem;justify-content: center;} @media(max-width: 768px) { .lytex-api-2{padding: 4rem 0;} .lytex-api-2 .topo{margin-bottom: 2.5rem;} .lytex-api-2 .topo h2{font-size: 24px;} .lytex-api-2 .cards{flex-direction: column;gap: 4rem;} .lytex-api-2 .cards .card .imagem{min-height: 14rem;} .lytex-api-2 .cards .card .btn_primary{width: 100%;justify-content: center;gap: 12px;} } /* ===== Bloco: lytex-automacao-total ===== */ /* ============================================================= Widget: LyTex — Automação Total ============================================================= */ /* Responsivo */ @media (max-width: 767px) { .hide-in-mobile { display: none !important; } } @media (min-width: 768px) { .hide-in-desktop { display: none !important; } } .lytex-automacao-total {width: 100%;padding: 64px;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0c235f 0%, #0c235f 100%);padding: 5rem 0 5rem;text-align: center;} .lytex-automacao-total.comlytex{background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);} .lytex-automacao-total span.elemento-01 {margin: 0 0 32px;} .lytex-automacao-total .botoes{margin: 32px 0 20px;border: 1.5px solid #d7e8ff36;display: inline-block;padding: 4px 4px;border-radius: 4px;} .lytex-automacao-total__btn{color: var(--Blue_Primary-100);font-family: Plus Jakarta Sans;font-weight: 600;font-size: 14px;line-height: 150%;letter-spacing: 0%;border-radius: 4px;background: #ffffff00;padding: 12px;display: inline-block;text-decoration:none;} .lytex-automacao-total__btn.is-active{color: var(--Blue_Primary-950);background: white!important;} .lytex-automacao-total__btn:hover{text-decoration:none;background: #ffffff21;} /* Slider */ .lytex-automacao-total__slider {position: relative;} .slider-slide {opacity: 0;transition: opacity 0.5s ease;position: absolute;top: 0;left: 0;width: 100%;pointer-events: none;} .slider-slide.is-active {opacity: 1;position: relative;pointer-events: auto;} .slider-slide:last-child img{max-width:560px;margin:auto;} .lytex-automacao-total .image-mobile{margin: 32px auto 0;text-align: center;} .lytex-automacao-total .image-mobile img{margin: 0 auto;max-width:360px;width:90%;} /* ===== Bloco: lytex-banner-rotativo ===== */ /* ============================================================ Bloco: LyTex Banner Rotativo ============================================================ */ .lytex-banner-rotativo {--logos-visiveis: 5;--logos-gap: 24px;background: #ffffff;padding: 3rem 0;} .lytex-banner-rotativo .conteudo {display: flex;align-items: center;gap: 0;} .lytex-banner-rotativo .col-categoria {width: 18%;flex-shrink: 0;padding-right: 2rem;display: flex;align-items: center;} .lytex-banner-rotativo .col-categoria .categoria-label {font-weight: 600;font-size: 24px;line-height: 150%;letter-spacing: 0%;color: var(--Blue_Primary-900);} .lytex-banner-rotativo .col-logos {width: 82%;overflow: hidden;} .lytex-banner-rotativo .logos-viewport {overflow: hidden;position: relative;width: 100%;} .lytex-banner-rotativo .logos-track {display: flex;align-items: center;gap: var(--logos-gap);will-change: transform;} .lytex-banner-rotativo .logos-track img {width: calc((100% - ((var(--logos-visiveis) - 1) * var(--logos-gap))) / var(--logos-visiveis));height: 48px;object-fit: contain;flex-shrink: 0;display: block;opacity: 0.7;transition: opacity 300ms ease;} .lytex-banner-rotativo .logos-track img:hover {opacity: 1;} @media (max-width: 768px) { .lytex-banner-rotativo {--logos-visiveis: 2;--logos-gap: 16px;} .lytex-banner-rotativo .conteudo {flex-direction: column;align-items: flex-start;gap: 1.5rem;} .lytex-banner-rotativo .col-categoria {width: 100%;padding-right: 0;} .lytex-banner-rotativo .col-logos {width: 100%;} .lytex-banner-rotativo .logos-track img {height: 36px;} } @media (min-width: 769px) and (max-width: 1024px) { .lytex-banner-rotativo {--logos-visiveis: 3;--logos-gap: 20px;} } /* ===== Bloco: lytex-depoimentos ===== */ /* ============================================================ Widget: LyTex Depoimentos ============================================================ */ .lytex-depoimentos { background: var(--Blue_Primary-50); padding: 5rem 0; } .lytex-depoimentos .conteudo {display: flex;justify-content: space-between;} .lytex-depoimentos .col-1 {display: flex;flex-direction: column;gap: 22px;color: var(--Blue_Primary-950);width: 55%;position: relative;} .lytex-depoimentos .col-2 {position: relative;border-radius: 10rem 5rem;overflow: hidden;background: rgb(221 226 240);width: 29%;aspect-ratio: 4/7;} .lytex-depoimentos span.elemento-01 {margin: 0;} .lytex-depoimentos .depoimentos {position: relative;margin-top: 34px;} .lytex-depoimentos .depoimento-item {display: none;flex-direction: column;gap: 12px;position: relative;padding: 3rem 3rem 0;} .lytex-depoimentos .depoimento-item.is-active { display: flex; } .lytex-depoimentos .aspas {line-height: 1;margin-bottom: -8px;display: block;height: 79px;width: 103px;background-repeat: no-repeat;background-position: center;background-size: contain;position: absolute;top: 0;left: 0;z-index: 0;} .lytex-depoimentos .aspas i{display:none;} .lytex-depoimentos blockquote {z-index:1;color: var(--Blue_Primary-950);margin: 0;padding: 0;font-weight: 400;font-size: 20px;line-height: 150%;letter-spacing: 0%;} .lytex-depoimentos .autor { margin-top: 12px; } .lytex-depoimentos .autor strong { display: block; font-size: 14px; font-weight: 600; color: var(--Blue_Primary-600, #2563eb); } .lytex-depoimentos .dots {display: flex;gap: 8px;margin-top: 24px;align-items: center;position: absolute;bottom: 16px;left: 48px;} .lytex-depoimentos .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--Blue_Primary-200, #bfdbfe); border: none; padding: 0; cursor: pointer; transition: background 300ms, width 300ms; } .lytex-depoimentos .dot.is-active { background: var(--Blue_Primary-600, #2563eb); border-radius: 999px; } .lytex-depoimentos .depoimento-foto { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 450ms ease; } .lytex-depoimentos .depoimento-foto.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .lytex-depoimentos .depoimento-foto img {height: 100%;object-fit: cover;/* width: 100%; */} .lytex-depoimentos .btn-video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border: 1px solid rgba(24, 76, 182, 0.18);border-radius: 999px;width: 68px;height: 68px;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 10px 28px rgba(9, 31, 90, 0.26), inset 0 0 0 5px rgba(255, 255, 255, 0.8);transition: transform 200ms ease, box-shadow 200ms ease;} .lytex-depoimentos .btn-video:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 14px 32px rgba(9, 31, 90, 0.3), inset 0 0 0 5px rgba(255, 255, 255, 0.8); } .lytex-depoimentos .btn-video:focus-visible {outline: 3px solid var(--Blue_Primary-950);outline-offset: 4px;} .lytex-depoimentos .btn-video i { font-size: 30px; color: var(--Blue_Primary-600, #2563eb); } .lytex-depoimentos .modal-video { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .lytex-depoimentos .modal-video[hidden] { display: none; } .lytex-depoimentos .modal-video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); } .lytex-depoimentos .modal-video-content { position: relative; z-index: 1; width: 90%; max-width: 900px; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; } .lytex-depoimentos .modal-video-player { width: 100%; height: 100%; } .lytex-depoimentos .modal-video-player iframe, .lytex-depoimentos .modal-video-player video { width: 100%; height: 100%; border: none; display: block; } .lytex-depoimentos .modal-video-close { position: absolute; top: -44px; right: 0; background: transparent; border: none; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; padding: 4px; } /* Responsivo ----------------------------------------------- */ @media (max-width: 768px) { .lytex-depoimentos { padding: 3rem 0; } .lytex-depoimentos .conteudo { flex-direction: column; gap: 2.5rem; position: relative; } /* Permite intercalar a imagem entre o texto e os depoimentos no mobile. */ .lytex-depoimentos .col-1 { display: contents; } .lytex-depoimentos .col-2 { order: 4; width: 100%; min-height: 320px; position: relative; } .lytex-depoimentos .elemento-01 { order: 1; } .lytex-depoimentos .col-1 h2 { order: 2; } .lytex-depoimentos .col-1 > p { order: 3; } .lytex-depoimentos .depoimentos { order: 5; } .lytex-depoimentos .depoimento-item{padding:3rem 0 0 3rem;} .lytex-depoimentos .dots {order: 6;justify-content: center; bottom: -25px;} .lytex-depoimentos .col-1 h2 { font-size: 28px; } .lytex-depoimentos blockquote { font-size: 16px; } } /* ===== Bloco: lytex-parceria ===== */ .lytex-parceria {padding: 6rem 0 4rem;} .lytex-parceria .conteudo {display: flex;justify-content: space-between;gap: 3rem;align-items: center;} .lytex-parceria .col-1 {display: flex;flex-direction: column;align-items: flex-start;gap: 1.5rem;width: 40%;} .lytex-parceria .col-1 .elemento-01 {margin: 0;} .lytex-parceria .btn_primary {width: fit-content;} .lytex-parceria .col-2 {display: flex;justify-content: center;width: 50%;position: relative;margin: 53px 0 0 0;} .lytex-parceria .col-2:before{content: "";width: 75%;position: absolute;top: -14%;left: -2%;z-index: 0;aspect-ratio: 10/10;border-radius: 40% 20%;border: 2px solid var(--Blue_Primary-600);} .lytex-parceria .col-2:after{content: "";width: 75%;position: absolute;top: -27%;left: 26%;z-index: 0;aspect-ratio: 10/10;border-radius: 40% 20%;border: 2px solid var(--Blue_Primary-600);} .lytex-parceria .thumb-video {position: relative;display: inline-block;overflow: hidden;border-radius: 20px;box-shadow: 0 16px 38px rgba(11, 29, 86, 0.2);z-index: 2;} .lytex-parceria .thumb-video::before {content: '';position: absolute;inset: 0;background: rgba(7, 18, 53, 0.22);z-index: 1;transition: background 0.25s ease;} .lytex-parceria .thumb-video img {display: block;width: 100%;height: auto;} .lytex-parceria .btn-video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border: 1px solid rgba(24, 76, 182, 0.18);border-radius: 999px;width: 68px;height: 68px;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 10px 28px rgba(9, 31, 90, 0.26), inset 0 0 0 5px rgba(255, 255, 255, 0.8);transition: transform 200ms ease, box-shadow 200ms ease;z-index: 2;} .lytex-parceria .btn-video:hover {transform: translate(-50%, -50%) scale(1.08);box-shadow: 0 14px 32px rgba(9, 31, 90, 0.3), inset 0 0 0 5px rgba(255, 255, 255, 0.8);} .lytex-parceria .btn-video i {font-size: 30px;color: var(--Blue_Primary-600, #2563eb);} .lytex-parceria .thumb-video:hover::before, .lytex-parceria .thumb-video:focus-visible::before {background: rgba(7, 18, 53, 0.1);} .lytex-parceria .btn-video:focus-visible {outline: 3px solid var(--Blue_Primary-950);outline-offset: 4px;} .lytex-parceria .modal-video {position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;} .lytex-parceria .modal-video[hidden] {display: none;} .lytex-parceria .modal-video-overlay {position: absolute;inset: 0;background: rgba(0,0,0,0.75);} .lytex-parceria .modal-video-content {position: relative;z-index: 1;width: 90%;max-width: 900px;background: #000;border-radius: 16px;overflow: hidden;aspect-ratio: 16/9;} .lytex-parceria .modal-video-player {width: 100%;height: 100%;} .lytex-parceria .modal-video-player iframe, .lytex-parceria .modal-video-player video {width: 100%;height: 100%;border: none;display: block;} .lytex-parceria .modal-video-close {position: absolute;top: -44px;right: 0;background: transparent;border: none;color: #fff;font-size: 28px;cursor: pointer;line-height: 1;padding: 4px;} @media (max-width:768px) { .lytex-parceria .conteudo {flex-direction:column;} .lytex-parceria .col-1 {display: contents;} .lytex-parceria .col-2 {width: 100%;} .lytex-parceria .elemento-01{order:1;} .lytex-parceria h3{order:2;} .lytex-parceria .thumb-video{order:3;} .lytex-parceria p{order:4;} .lytex-parceria .btn_primary{order:5;} } /* ===== Bloco: lytex-perguntas-frequentes ===== */ .lytex-perguntas-frequentes {padding: 4rem 0;} .lytex-perguntas-frequentes .conteudo {display: flex;justify-content: center;gap: 4rem;/* align-items: center; */} .lytex-perguntas-frequentes .col-1 {align-items: flex-start;position: relative;color: var(--Blue_Primary-950);display: flex;flex-direction: column;gap: 1.5rem;width: 40%;} .lytex-perguntas-frequentes .col-1 .elemento-01 {margin: 0;} .lytex-perguntas-frequentes h2 {letter-spacing: -4%;} .lytex-perguntas-frequentes .pf-split {display: flex;flex-direction: column;gap: 1rem;width: 100%;margin: 0 0 20px 0;} .lytex-perguntas-frequentes .pf-split__item {display: flex;align-items: center;gap: 2rem;} .lytex-perguntas-frequentes .pf-split__icon {width: 48px;height: 48px;border-radius: 17px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);display: inline-flex;align-items: center;justify-content: center;/* flex: 0 0 2rem; */font-size: 22px;} .lytex-perguntas-frequentes .pf-split__text {display: flex;flex-direction: column;gap: .25rem;} .lytex-perguntas-frequentes .pf-split__text h4 {margin: 0;font-size: 1rem;line-height: 1.35;font-weight: 600;color: var(--Blue_Primary-950);} .lytex-perguntas-frequentes .btn_primary {width: fit-content;} .lytex-perguntas-frequentes .col-2 {width: 60%;} .lytex-perguntas-frequentes .pf-accordion {width: 100%;border-top: 1px solid rgba(12, 35, 95, 0.12);margin-top: 4em;} .lytex-perguntas-frequentes .pf-accordion__item {border-bottom: 1px solid rgba(12, 35, 95, 0.12);padding: 1.5rem 0;} .lytex-perguntas-frequentes .pf-accordion__header {display: flex;justify-content: flex-start;gap: 1rem;align-items: center;color: var(--Blue_Primary-950);cursor: pointer;user-select: none;} .lytex-perguntas-frequentes .pf-accordion__header:focus-visible {outline: 2px solid var(--Blue_Primary-500);outline-offset: 4px;border-radius: 8px;} .lytex-perguntas-frequentes .pf-accordion__index {color: var(--Blue_Primary-500);font-weight: 600;font-size: 20px;line-height: 150%;letter-spacing: 0%;text-align: center;} .lytex-perguntas-frequentes .pf-accordion__title {margin: 0;color: var(--Blue_Primary-950);font-weight: 400;font-size: 16px;line-height: 150%;letter-spacing: 0%;width: 100%;} .lytex-perguntas-frequentes .pf-accordion__toggle {width: 25px;height: 22px;border: 2px solid var(--Blue_Primary-500);border-radius: 999px;background: transparent;position: relative;justify-self: end;transition: transform .25s ease, background-color .25s ease;} .lytex-perguntas-frequentes .pf-accordion__toggle::before, .lytex-perguntas-frequentes .pf-accordion__toggle::after {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: var(--Blue_Primary-500);border-radius: 10px;transition: opacity .2s ease;} .lytex-perguntas-frequentes .pf-accordion__toggle::before {width: 12px;height: 2px;} .lytex-perguntas-frequentes .pf-accordion__toggle::after {width: 2px;height: 12px;} .lytex-perguntas-frequentes .pf-accordion__item.is-open .pf-accordion__toggle::after {opacity: 0;} .lytex-perguntas-frequentes .pf-accordion__content {padding-top: 0;overflow: hidden;max-height: 0;opacity: 0;transition: max-height .38s ease, opacity .28s ease, padding-top .28s ease;} .lytex-perguntas-frequentes .pf-accordion__item.is-open .pf-accordion__content {padding-top: .8rem;opacity: 1;} .lytex-perguntas-frequentes .pf-accordion__content-inner {font-family: Plus Jakarta Sans;font-size: 1rem;line-height: 1.5;font-weight: 500;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .lytex-perguntas-frequentes .pf-accordion__content-inner > :first-child {margin-top: 0;} .lytex-perguntas-frequentes .pf-accordion__content-inner > :last-child {margin-bottom: 0;} .lytex-perguntas-frequentes .pf-accordion__empty {margin: 1rem 0 0;font-size: .95rem;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .lytex-perguntas-frequentes.somente_perguntas .conteudo{flex-direction:column;} .lytex-perguntas-frequentes.somente_perguntas .col-1 {width:100%} .lytex-perguntas-frequentes.somente_perguntas .col-2 {width:100%} .lytex-perguntas-frequentes.somente_perguntas .pf-accordion{margin:0} @media (max-width: 768px) { .lytex-perguntas-frequentes .pf-accordion{margin:0} .lytex-perguntas-frequentes .conteudo{flex-direction:column} .lytex-perguntas-frequentes .col-1{width:100%} .lytex-perguntas-frequentes .col-2{width:100%} } /* ===== Bloco: index-atendimento-suporte ===== */ /* ============================================================= Bloco: Index — Atendimento e Suporte Clone de lytex-perguntas-frequentes, sem a variação por $tipo. ============================================================= */ .index-atendimento-suporte {padding: 4rem 0;} .index-atendimento-suporte .conteudo {display: flex;justify-content: center;gap: 4rem;} .index-atendimento-suporte .col-1 {align-items: flex-start;position: relative;color: var(--Blue_Primary-950);display: flex;flex-direction: column;gap: 1.5rem;width: 40%;} .index-atendimento-suporte .col-1 .elemento-01 {margin: 0;} .index-atendimento-suporte h2 {letter-spacing: -4%;} .index-atendimento-suporte .pf-split {display: flex;flex-direction: column;gap: 1rem;width: 100%;margin: 0 0 20px 0;} .index-atendimento-suporte .pf-split__item {display: flex;align-items: center;gap: 2rem;} .index-atendimento-suporte .pf-split__icon {min-width: 48px;height: 48px;border-radius: 17px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);display: inline-flex;align-items: center;justify-content: center;font-size: 22px;} .index-atendimento-suporte .pf-split__text {display: flex;flex-direction: column;gap: .25rem;} .index-atendimento-suporte .pf-split__text h4 {margin: 0;font-size: 1rem;line-height: 1.35;font-weight: 600;color: var(--Blue_Primary-950);} .index-atendimento-suporte .cta-buttons {display: flex;align-items: center;gap: 1.5rem;flex-wrap: wrap;} .index-atendimento-suporte .cta-buttons .btn_primary {width: fit-content;gap: 10px;} .index-atendimento-suporte .cta-buttons .btn_primary i {font-size: 20px;margin: 0;} .index-atendimento-suporte .cta-buttons .link-secundario {font-weight: 600;font-size: 14px;color: var(--Blue_Primary-950);text-decoration: underline;} .index-atendimento-suporte .cta-buttons .link-secundario:hover {color: var(--Blue_Primary-600);} .index-atendimento-suporte .col-2 {width: 60%;} .index-atendimento-suporte .pf-accordion {width: 100%;border-top: 1px solid rgba(12, 35, 95, 0.12);margin-top: 4em;} .index-atendimento-suporte .pf-accordion__item {border-bottom: 1px solid rgba(12, 35, 95, 0.12);padding: 1.5rem 0;} .index-atendimento-suporte .pf-accordion__header {display: flex;justify-content: flex-start;gap: 1rem;align-items: center;color: var(--Blue_Primary-950);cursor: pointer;user-select: none;} .index-atendimento-suporte .pf-accordion__header:focus-visible {outline: 2px solid var(--Blue_Primary-500);outline-offset: 4px;border-radius: 8px;} .index-atendimento-suporte .pf-accordion__index {color: var(--Blue_Primary-500);font-weight: 600;font-size: 20px;line-height: 150%;letter-spacing: 0%;text-align: center;} .index-atendimento-suporte .pf-accordion__title {margin: 0;color: var(--Blue_Primary-950);font-weight: 400;font-size: 16px;line-height: 150%;letter-spacing: 0%;width: 100%;} .index-atendimento-suporte .pf-accordion__toggle {width: 25px;height: 22px;border: 2px solid var(--Blue_Primary-500);border-radius: 999px;background: transparent;position: relative;justify-self: end;transition: transform .25s ease, background-color .25s ease;} .index-atendimento-suporte .pf-accordion__toggle::before, .index-atendimento-suporte .pf-accordion__toggle::after {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: var(--Blue_Primary-500);border-radius: 10px;transition: opacity .2s ease;} .index-atendimento-suporte .pf-accordion__toggle::before {width: 12px;height: 2px;} .index-atendimento-suporte .pf-accordion__toggle::after {width: 2px;height: 12px;} .index-atendimento-suporte .pf-accordion__item.is-open .pf-accordion__toggle::after {opacity: 0;} .index-atendimento-suporte .pf-accordion__content {padding-top: 0;overflow: hidden;max-height: 0;opacity: 0;transition: max-height .38s ease, opacity .28s ease, padding-top .28s ease;} .index-atendimento-suporte .pf-accordion__item.is-open .pf-accordion__content {padding-top: .8rem;opacity: 1;} .index-atendimento-suporte .pf-accordion__content-inner {font-family: Plus Jakarta Sans;font-size: 1rem;line-height: 1.5;font-weight: 500;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .index-atendimento-suporte .pf-accordion__content-inner > :first-child {margin-top: 0;} .index-atendimento-suporte .pf-accordion__content-inner > :last-child {margin-bottom: 0;} .index-atendimento-suporte .pf-accordion__empty {margin: 1rem 0 0;font-size: .95rem;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} @media (max-width: 768px) { .index-atendimento-suporte .pf-accordion{margin:0} .index-atendimento-suporte .conteudo{flex-direction:column} .index-atendimento-suporte .col-1{width:100%} .index-atendimento-suporte .col-2{width:100%} } /* ===== Bloco: lytex-seus-pagamentos-seguros ===== */ /* ============================================================= bloco: LyTex — Seus Pagamentos Seguros ============================================================= */ .lytex-seus-pagamentos-seguros {background: var(--Blue_Primary-50);padding: 4rem 0;} .lytex-seus-pagamentos-seguros .container {max-width: 1180px;margin: 0 auto;} .lytex-seus-pagamentos-seguros .security-header h2 {margin-bottom: 40px;color: var(--Blue_Primary-900);font-style: normal;font-weight: 600;line-height: 150%;} .lytex-seus-pagamentos-seguros .security-header h2 span.highlight {color: var(--Blue_Primary-600);} .lytex-seus-pagamentos-seguros .security-header h2 span.hide-icon {position: relative;display: inline-block;width: 0;height: 26px;margin: 0px -2px -4px 0;overflow: hidden;} .lytex-seus-pagamentos-seguros .security-header h2 span.hide-icon i {color: var(--Blue_Primary-600);position: absolute;top: 1px;left: 0;font-size: 26px;} .lytex-seus-pagamentos-seguros .container:hover .security-header h2 span.hide-icon {width: 28px;} .lytex-seus-pagamentos-seguros .stats-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 28px;margin-bottom: 40px;} .lytex-seus-pagamentos-seguros .stat-card {border: 1px solid var(--Blue_Primary-100);border-radius: 8px;padding: 8px;min-height: 120px;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} .lytex-seus-pagamentos-seguros .stat-card:hover {border: 1px solid var(--Blue_Primary-600);} .lytex-seus-pagamentos-seguros .stat-content {display: flex;align-items: center;gap: 18px;background: #fff;height: 100%;padding: 12px;justify-content: center;} .lytex-seus-pagamentos-seguros .stat-content .plus-icon{color: var(--Blue_Primary-600);font-size: 34px;line-height: 100%;padding: 0px 0 7px;} .lytex-seus-pagamentos-seguros .stat-content strong {color: var(--Blue_Primary-900);white-space: nowrap;font-weight: 600;font-size: 32px;line-height: 150%;letter-spacing: 0%;} .lytex-seus-pagamentos-seguros .stat-content span {color: #7d889f;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;} .lytex-seus-pagamentos-seguros .stat-content img {max-width: 90px;} .lytex-seus-pagamentos-seguros .stat-content svg, .lytex-seus-pagamentos-seguros .stat-content img {filter: grayscale(100%);transition: filter 300ms ease-in-out;} .lytex-seus-pagamentos-seguros .stat-card:hover .stat-content svg, .lytex-seus-pagamentos-seguros .stat-card:hover .stat-content img {filter: grayscale(0%);} .lytex-seus-pagamentos-seguros .stat-badge {min-width: 90px;height: 48px;padding: 0 16px;border-radius: 14px;display: inline-flex;align-items: center;justify-content: center;background: #eef4ff;color: #2563ff;font-size: 14px;font-weight: 700;letter-spacing: 0.04em;text-transform: uppercase;} .lytex-seus-pagamentos-seguros .stat-badge--pci {background: #eef4ff;} .lytex-seus-pagamentos-seguros .stat-badge--reclame {background: #f2f7ff;} .lytex-seus-pagamentos-seguros .cta-row {display: flex;justify-content: space-between;align-items: center;margin-bottom: 70px;gap: 30px;} .lytex-seus-pagamentos-seguros .tech-text {color: #12245b;display: flex;align-items: center;gap: 12px;font-family: Plus Jakarta Sans;font-weight: 600;font-size: 14px;line-height: 150%;letter-spacing: 0%;} .lytex-seus-pagamentos-seguros .tech-text .ph-plus {color: var(--Blue_Primary-600);font-size: 14px;border: 2px solid var(--Blue_Primary-600);display: inline-block;margin: 0;padding: 0;border-radius: 20px;} .lytex-seus-pagamentos-seguros .cta-buttons {display: flex;align-items: center;gap: 28px;} .lytex-seus-pagamentos-seguros .btn-primary {background: linear-gradient(180deg, #3572ff 0%, #1d49ff 100%);color: #fff;padding: 18px 42px;border-radius: 14px;text-decoration: none;font-weight: 600;transition: 0.3s;} .lytex-seus-pagamentos-seguros .btn-primary:hover {transform: translateY(-2px);} .lytex-seus-pagamentos-seguros .btn-link {color: #12245b;font-weight: 600;text-decoration: underline;} .lytex-seus-pagamentos-seguros .methods-box {background: #fff;border-radius: 24px;padding: 2rem;text-align: center;} .lytex-seus-pagamentos-seguros .methods-description {max-width: 760px;margin: 0 auto 55px;} .lytex-seus-pagamentos-seguros .methods-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;text-align: left;} .lytex-seus-pagamentos-seguros .method-card {border: 1px solid #e3eaf6;border-radius: 12px;padding: 10px;display: flex;flex-direction: column;} .lytex-seus-pagamentos-seguros .method-img{position:relative;overflow:hidden;display: block;height: 0%;opacity: 0;} .lytex-seus-pagamentos-seguros .method-img img{margin:0;} .lytex-seus-pagamentos-seguros .method-icon {width: 48px;height: 48px;background: #edf4ff;border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;font-size: 26px;color: #2563ff;overflow: hidden;} .lytex-seus-pagamentos-seguros .method-card h4 {color: var(--Blue_Primary-950);margin: 14px 0 10px;font-weight: 600;font-size: 16px;line-height: 150%;letter-spacing: 0%;} .lytex-seus-pagamentos-seguros .method-card p {color: #a5adbf;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;margin-bottom: auto;} .lytex-seus-pagamentos-seguros .method-card a{color: var(--Blue_Primary-950);font-weight: 600;font-size: 14px;line-height: 150%;display: flex;text-decoration-color: #d4d4d4} .lytex-seus-pagamentos-seguros .method-card a span {text-decoration: underline;text-decoration-style: solid;text-decoration-color: inherit;text-underline-offset: 2px;} .lytex-seus-pagamentos-seguros .method-card a i{font-size: 22px;margin: 0 0 0 6px;transform: rotate(90deg);opacity:0} .lytex-seus-pagamentos-seguros .method-card:hover{background-color: var(--Blue_Primary-50);} .lytex-seus-pagamentos-seguros .method-card:hover .method-img{height: 114px;opacity: 1;} .lytex-seus-pagamentos-seguros .method-card:hover .method-icon{height: 0px;opacity: 1;} .lytex-seus-pagamentos-seguros .method-card:hover h4, .lytex-seus-pagamentos-seguros .method-card:hover a{color: var(--Blue_Primary-600);text-decoration-color: var(--Blue_Primary-600);} .lytex-seus-pagamentos-seguros .method-card:hover a i{transform: rotate(0deg);opacity:1} .lytex-seus-pagamentos-seguros .container .security-header h2 span.hide-icon, .lytex-seus-pagamentos-seguros .method-card, .lytex-seus-pagamentos-seguros .method-img, .lytex-seus-pagamentos-seguros .method-icon, .lytex-seus-pagamentos-seguros .method-card a i, .transacao{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 1100px) { .lytex-seus-pagamentos-seguros .stats-grid {grid-template-columns: repeat(2, 1fr);} .lytex-seus-pagamentos-seguros .methods-grid {grid-template-columns: repeat(2, 1fr);} .lytex-seus-pagamentos-seguros .methods-box h3 {font-size: 42px;} } @media (max-width: 768px) { a.btn_primary,a.btn_default{text-align:center;justify-content: center;} a.btn_default i.ph-arrow-circle-up-right{opacity:1;transform: rotate(0deg);} .lytex-seus-pagamentos-seguros .stats-grid {gap: 36px 8px;} .lytex-seus-pagamentos-seguros .stat-card {padding:0;border:none;} .lytex-seus-pagamentos-seguros .methods-grid {grid-template-columns: 1fr;gap: 24px;} .lytex-seus-pagamentos-seguros .cta-row {flex-direction: column;align-items: flex-start;} .lytex-seus-pagamentos-seguros .cta-buttons {width: 100%;flex-direction: column;align-items: stretch;gap: 16px;} .lytex-seus-pagamentos-seguros .btn-primary {text-align: center;} .lytex-seus-pagamentos-seguros .security-header h2 {font-size: 32px;} .lytex-seus-pagamentos-seguros .methods-box {padding: 40px 25px;} .lytex-seus-pagamentos-seguros .methods-box h3 {font-size: 34px;} .lytex-seus-pagamentos-seguros .methods-description {font-size: 16px;} .lytex-seus-pagamentos-seguros .stat-content{flex-wrap:wrap;justify-content:flex-start;border-radius: 12px;gap: 0;} .lytex-seus-pagamentos-seguros .stat-content span:last-child{width:100%; font-size: 12px;} .lytex-seus-pagamentos-seguros .stat-content strong {font-size: 27px;} .lytex-seus-pagamentos-seguros .method-card{gap: 16px;padding: 16px;} .lytex-seus-pagamentos-seguros .method-img{display:none;} } /* ===== Bloco: numeros-lytex page-programa-de-parceria.php) ===== */ .numeros-lytex {padding: 4rem 0;} .numeros-lytex .container {max-width: 1180px;margin: 0 auto;} .numeros-lytex .security-header h3 {margin-bottom: 40px;color: var(--Blue_Primary-950);font-style: normal;font-weight: 600;line-height: 150%;} .numeros-lytex .stats-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 28px;margin-bottom: 40px;} .numeros-lytex .stat-card {border: 1px solid #d7e8ff00;border-radius: 8px;padding: 8px;min-height: 120px;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;background: var(--Blue_Primary-50);} .numeros-lytex .stat-card:hover {border: 1px solid var(--Blue_Primary-600);} .numeros-lytex .stat-content {display: flex;align-items: center;gap: 18px;/* background: #fff; */height: 100%;padding: 12px 100px;justify-content: center;} .numeros-lytex .stat-content .plus-icon{color: var(--Blue_Primary-600);font-size: 34px;line-height: 100%;padding: 0px 0 7px;} .numeros-lytex .stat-content strong {color: var(--Blue_Primary-900);white-space: nowrap;font-weight: 600;font-size: 32px;line-height: 150%;letter-spacing: 0%;} .numeros-lytex .stat-content span {color: #7d889f;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;} .numeros-lytex .stat-content svg {filter: grayscale(100%);transition: filter 300ms ease-in-out;} .numeros-lytex .stat-card:hover .stat-content svg {filter: grayscale(0%);} .transacao{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 1100px) { .numeros-lytex .stats-grid {grid-template-columns: repeat(2, 1fr);} .numeros-lytex .methods-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .numeros-lytex .stats-grid {gap: 36px 8px;grid-template-columns: repeat(1, 1fr);} .numeros-lytex .stat-card {padding:0;border:none;} .numeros-lytex .methods-grid {grid-template-columns: 1fr;gap: 24px;} .numeros-lytex .stat-content{padding:16px} } /* ===== Bloco: pra-quem-e (page-programa-de-parceria.php) ===== */ .pra-quem-e {padding: 2rem 0 4rem;position: relative;margin: 4rem 0 0 0;background: var(--Blue_Primary-950);} .pra-quem-e:before{content:" ";display: block;color: antiquewhite;position: absolute;top: -63px;left: 0;height: 64px;background: var(--Blue_Primary-950);width: 100%;border-radius: 64px 64px 0 0;} .pra-quem-e .container {max-width: 1180px;margin: 0 auto;} .pra-quem-e .topo {margin-bottom: 32px;/* max-width: 720px; */} .pra-quem-e .topo h2 {margin: 0 0 1rem;font-size: 40px;} .pra-quem-e .topo p {margin: 0;font-size: 14px;color: var(--alfa-white-100-base, rgba(255, 255, 255, 1));} .pra-quem-e .grid-publicos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 22px;} .pra-quem-e .card {background: var(--Blue_Primary-900);border-radius: 8px;padding: 18px;display: flex;flex-direction: column;gap: 12px;-webkit-transition: background 300ms ease-in-out;-moz-transition: background 300ms ease-in-out;-ms-transition: background 300ms ease-in-out;-o-transition: background 300ms ease-in-out;transition: background 300ms ease-in-out;} .pra-quem-e .card:hover {background: var(--Blue_Primary-900);} .pra-quem-e .card .icone {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 12px 5px;font-size: 20px;color: var(--color-white);background: #032680;} .pra-quem-e .card:hover .icone {background: var(--Blue_Primary-800);} .pra-quem-e .card h3 {margin: 0;color: var(--color-white);font-weight: 600;font-size: 18px;line-height: 150%;} .pra-quem-e .card p {margin: 0;color: #ffffffa1;font-size: 14px;line-height: 150%;} @media (max-width: 1100px) { .pra-quem-e .grid-publicos {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .pra-quem-e {padding: 0rem 0 4rem;} .pra-quem-e .grid-publicos {grid-template-columns: 1fr;gap: 20px;} } /* ===== Bloco: podemos-ajudar (page-programa-de-parceria.php) ===== */ .podemos-ajudar {padding: 5rem 0;position:relative;} .podemos-ajudar:after{content:" ";display: block;position: absolute;bottom: -63px;left: 0;height: 64px;background: #ffffff;width: 100%;border-radius: 0 0 64px 64px;} .podemos-ajudar .conteudo {display: flex;flex-direction: column;align-items: center;gap: 2.6rem;} .podemos-ajudar .conteudo h2 {text-align: center;margin: 0;color: var(--Blue_Primary-950);} .podemos-ajudar__subtitle {margin: -2rem 0 0;text-align: center;font-size: 14px;color: var(--Blue_Primary-950);} .podemos-ajudar .grid-cards {display: grid;grid-template-columns: repeat(4, 1fr);gap: 32px 20px;width: 100%;} .podemos-ajudar .card-item {display: flex;flex-direction: column;gap: 0.75rem;} .podemos-ajudar .card-item .icone {width: 52px;height: 52px;background: var(--Blue_Primary-50);border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;} .podemos-ajudar .card-item .icone i {font-size: 1.5rem;color: var(--Blue_Primary-500);} .podemos-ajudar .card-item h3 {font-size: 16px;margin: 0;color: var(--Blue_Primary-950);} .podemos-ajudar .card-item p {margin: 0;color: var(--Alfa-Oxford-50, #0C235F80);font-size: 14px;} @media (max-width: 1100px) { .podemos-ajudar .grid-cards {grid-template-columns: repeat(2, 1fr);gap: 2rem;} } @media (max-width: 767px) { .podemos-ajudar {padding: 4rem 0;} .podemos-ajudar .grid-cards {grid-template-columns: 1fr;gap: 2rem;} } /* ===== Bloco: parceiros-lytex (page-programa-de-parceria.php) ===== */ .parceiros-lytex {position: relative;padding: 8rem 0 3rem;background: var(--Blue_Primary-50);} .parceiros-lytex:after{content:" ";display: block;position: absolute;bottom: -63px;left: 0;height: 64px;background: var(--Blue_Primary-50);width: 100%;border-radius: 0 0 64px 64px;} .parceiros-lytex__box {background: var(--color-white);border-radius: 32px;padding: 2rem;display: flex;flex-direction: column;align-items: center;gap: 1.5rem;} .parceiros-lytex__box .elemento-01 {margin: 0;} .parceiros-lytex__box h2 {margin: 0 0 1rem;text-align: center;color: var(--Blue_Primary-950);} .parceiros-lytex .grid-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;width: 100%;} .parceiros-lytex .card-item {border: 1px solid var(--Blue_Primary-100);border-radius: 12px;padding: 12px 6px 12px 12px;display: flex;flex-direction: column;gap: 12px;-webkit-transition: border-color 300ms ease-in-out, background 300ms ease-in-out;-moz-transition: border-color 300ms ease-in-out, background 300ms ease-in-out;-ms-transition: border-color 300ms ease-in-out, background 300ms ease-in-out;-o-transition: border-color 300ms ease-in-out, background 300ms ease-in-out;transition: border-color 300ms ease-in-out, background 300ms ease-in-out;} .parceiros-lytex .card-item:hover{border-color: var(--Blue_Primary-600);background: var(--Blue_Primary-50);} .parceiros-lytex .card-item .icone {width: 40px;height: 40px;background: var(--Blue_Primary-50);border-radius: 14px 4px;display: flex;align-items: center;justify-content: center;} .parceiros-lytex .card-item .icone i {font-size: 1.15rem;color: var(--Blue_Primary-600);} .parceiros-lytex .card-item h3 {font-size: 16px;margin: 0;color: var(--Blue_Primary-950);} .parceiros-lytex .card-item:hover h3 {color: var(--Blue_Primary-600);} .parceiros-lytex .card-item p {margin: 0;color: var(--Alfa-Oxford-50, #0C235F80);font-size: 14px;letter-spacing: -0.2px;} @media (max-width: 1100px) { .parceiros-lytex .grid-cards {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 767px) { .parceiros-lytex {padding: 1.5rem 0px 0rem;margin: 0 0 4rem 0;} .parceiros-lytex__box {padding: 2rem 1.25rem;} .parceiros-lytex .grid-cards {grid-template-columns: 1fr;gap: 1rem;} } /* ===== Bloco: como-faco (page-programa-de-parceria.php) ===== */ .como-faco {padding: 8rem 0 5rem;} .como-faco .topo {margin-bottom: 2.5rem;} .como-faco__eyebrow {display: block;margin-bottom: 0.5rem;font-size: 14px;font-weight: 600;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .como-faco .topo h2 {margin: 0;color: var(--Blue_Primary-950);} .como-faco .grid-passos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;} .como-faco .passo-item {background: var(--Blue_Primary-50);border: 1px solid transparent;border-radius: 16px;padding: 22px;display: flex;flex-direction: column;gap: 12px;} .como-faco .passo-item:hover {border-color: var(--Blue_Primary-600);} .como-faco .passo-numero {font-size: 60px;font-weight: 800;line-height: 100%;color: var(--Blue_Primary-950);margin-bottom: 1.5rem;} .como-faco .passo-item:hover .passo-numero {color: var(--Blue_Primary-600);} .como-faco .passo-item h3 {margin: 0;font-size: 20px;font-weight: 600;color: var(--Blue_Primary-950);} .como-faco .passo-item:hover h3 {color: var(--Blue_Primary-600);} .como-faco .passo-item p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, #0C235F80);letter-spacing: -0.3px;} .como-faco .passo-item,.como-faco .passo-numero,.como-faco .passo-item h3{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 900px) { .como-faco .grid-passos {grid-template-columns: 1fr;gap: 1.25rem;} } @media (max-width: 640px) { .como-faco {padding: 4rem 0;} .como-faco .passo-numero {font-size: 32px;margin-bottom: 1.5rem;} } /* ===== Bloco: api-flexivel (page-programa-de-parceria.php) ===== */ .api-flexivel {width: 100%;padding: 5rem 0;overflow: hidden;} .api-flexivel .conteudo {display: flex;gap: 2.6rem;justify-content: space-between;} .api-flexivel .col-1 {flex: 0 0 50%;padding: 1rem 0 0 0;display: flex;flex-direction: column;gap: 1.2rem;align-items: flex-start;} .api-flexivel .elemento-01{margin:0;} .api-flexivel .col-1 p {margin: 0;color: var(--Alfa-Oxford-50, #0C235F80);font-size: 14px;} .api-flexivel h2 {margin: 0;} .api-flexivel .col-2 {position: relative;text-align: right;width: 42%;} .api-flexivel .col-2:before {content: "";display: block;position: absolute;bottom: 0;right: 0%;width: 100%;height: 110%;aspect-ratio: 1;border-radius: 10% 10% 0 0;z-index: 0;background: #efefef;} .api-flexivel .imagem-fundo {width: 100%;z-index: 1;position: relative;margin: 0 0 0 auto;margin-right: 5%;max-width: 27rem;right: 0;} .api-flexivel .imagem-fundo img {width: 100%;} .api-flexivel .acoes {display: flex;align-items: center;gap: 1.5rem;flex-wrap: wrap;margin-top: 2.2rem;} .api-flexivel .acoes .btn_primary {width: fit-content;} .api-flexivel .acoes .link-secundario {font-weight: 600;font-size: 14px;color: var(--Blue_Primary-950);text-decoration: underline;} .api-flexivel .acoes .link-secundario:hover {color: var(--Blue_Primary-600);} @media (max-width: 991px) { .api-flexivel .conteudo {flex-direction: column;gap: 2.5rem;} .api-flexivel .col-1, .api-flexivel .col-2 {flex: 0 0 100%;width: 100%;max-width: 100%;} .api-flexivel .col-1 {align-items: center;text-align: center;order: 2;} .api-flexivel .col-2 {order: 1;aspect-ratio: 1;overflow: hidden;} .api-flexivel .col-2:before {width: 90%;right: 5%;} .api-flexivel .imagem-fundo {margin: 0 auto;} .api-flexivel .acoes {justify-content: center;} } @media (max-width: 640px) { .api-flexivel {padding: 4rem 0;} } /* ===== Bloco: suas-transacoes (page-programa-de-parceria.php) ===== */ .suas-transacoes {width: 100%;padding: 6rem 0;} .suas-transacoes .container {display: flex;flex-direction: column;align-items: center;gap: 3.2rem;} .suas-transacoes .topo {text-align: center;} .suas-transacoes .topo .elemento-01 {margin: 0 auto 1.6rem;} .suas-transacoes .topo h2 {margin: 0;font-weight: 600;color: var(--Blue_Primary-950);} .suas-transacoes .cards {display: flex;width: 100%;align-items: stretch;} .suas-transacoes .card {flex: 1;text-align: center;padding: 0 0.5rem;display: flex;flex-direction: column;align-items: center;gap: 10px;border-left: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));} .suas-transacoes .card:first-child {border-left: none;} .suas-transacoes .card-icon {display: flex;align-items: center;justify-content: center;width: 120px;height: 120px;background: var(--Blue_Primary-50);border-radius: 2rem 10px;margin: 0 0 12px 0;} .suas-transacoes .card-icon i {font-size: 2.75rem;color: var(--Blue_Primary-600);} .suas-transacoes .card-icon-img img {max-width: 64px;aspect-ratio: 1;} .suas-transacoes .card h4 {margin: 0;color: var(--Blue_Primary-950);font-family: Plus Jakarta Sans;font-weight: 600;font-size: 16px;line-height: 150%;letter-spacing: 0%;text-align: center;} .suas-transacoes .card p {margin: 0;font-size: 14px;color: var(--Alfa-Oxford-75, #0C235FBF);letter-spacing: -0.3px;} @media (max-width: 991px) { .suas-transacoes .cards {flex-wrap: wrap;gap: 2.5rem;} .suas-transacoes .card {flex: 0 0 calc(50% - 1.25rem);border-left: none;} .suas-transacoes .card:nth-child(odd) {border-left: none;} } @media (max-width: 640px) { .suas-transacoes {padding: 4rem 0;} .suas-transacoes .cards {flex-direction: column;gap: 2.5rem;} .suas-transacoes .card {flex: 0 0 auto;border-left: none;border-top: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));padding: 2.5rem 0 0;} .suas-transacoes .card:first-child {border-top: none;padding-top: 0;} } /* ===== Bloco: pp-perguntas-frequentes (page-programa-de-parceria.php) ===== */ .pp-perguntas-frequentes {background: var(--Blue_Primary-50);padding: 5rem 0;} .pp-perguntas-frequentes .conteudo {display: flex;justify-content: space-between;gap: 1.6rem;} .pp-perguntas-frequentes .col-1 {width: 50%;color: var(--Blue_Primary-950);} .pp-perguntas-frequentes .col-1 h2 {margin: 0 13px 2.5rem 0;} .pp-perguntas-frequentes .col-1 h3 {margin: 0;color: var(--Blue_Primary-950);font-weight: 600;font-size: 24px;} .pp-perguntas-frequentes .col-2 {width: 50%;} .pp-perguntas-frequentes .pf-accordion {width: 100%;border-top: 1px solid rgba(12, 35, 95, 0.12);margin-top: 2rem;} .pp-perguntas-frequentes .pf-accordion__item {border-bottom: 1px solid rgba(12, 35, 95, 0.12);padding: 1.5rem 0;} .pp-perguntas-frequentes .pf-accordion__header {display: flex;justify-content: flex-start;gap: 1rem;align-items: center;color: var(--Blue_Primary-950);cursor: pointer;user-select: none;} .pp-perguntas-frequentes .pf-accordion__header:focus-visible {outline: 2px solid var(--Blue_Primary-500);outline-offset: 4px;border-radius: 8px;} .pp-perguntas-frequentes .pf-accordion__index {color: var(--Blue_Primary-500);font-weight: 600;font-size: 20px;line-height: 150%;letter-spacing: 0%;text-align: center;} .pp-perguntas-frequentes .pf-accordion__title {margin: 0;color: var(--Blue_Primary-950);font-weight: 400;font-size: 16px;line-height: 150%;letter-spacing: 0%;width: 100%;} .pp-perguntas-frequentes .pf-accordion__toggle {width: 25px;height: 22px;border: 2px solid var(--Blue_Primary-500);border-radius: 999px;background: transparent;position: relative;justify-self: end;transition: transform .25s ease, background-color .25s ease;} .pp-perguntas-frequentes .pf-accordion__toggle::before, .pp-perguntas-frequentes .pf-accordion__toggle::after {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: var(--Blue_Primary-500);border-radius: 10px;transition: opacity .2s ease;} .pp-perguntas-frequentes .pf-accordion__toggle::before {width: 12px;height: 2px;} .pp-perguntas-frequentes .pf-accordion__toggle::after {width: 2px;height: 12px;} .pp-perguntas-frequentes .pf-accordion__item.is-open .pf-accordion__toggle::after {opacity: 0;} .pp-perguntas-frequentes .pf-accordion__content {padding-top: 0;overflow: hidden;max-height: 0;opacity: 0;transition: max-height .38s ease, opacity .28s ease, padding-top .28s ease;} .pp-perguntas-frequentes .pf-accordion__item.is-open .pf-accordion__content {padding-top: .8rem;opacity: 1;} .pp-perguntas-frequentes .pf-accordion__content-inner {font-family: Plus Jakarta Sans;font-size: 1rem;line-height: 1.5;font-weight: 500;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .pp-perguntas-frequentes .pf-accordion__content-inner > :first-child {margin-top: 0;} .pp-perguntas-frequentes .pf-accordion__content-inner > :last-child {margin-bottom: 0;} .pp-perguntas-frequentes .pf-accordion__empty {margin: 1rem 0 0;font-size: .95rem;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .pp-perguntas-frequentes .form-inscricao {background: var(--color-white);border-radius: 16px;padding: 26px 22px;} .pp-perguntas-frequentes .form-inscricao h3 {margin: 0;color: var(--Blue_Primary-950);font-size: 18px;} .pp-perguntas-frequentes .form-inscricao > p {margin: 0.5rem 0 0;color: var(--Alfa-Oxford-50, #0C235F80);font-size: 14px;} .pp-perguntas-frequentes .form-inscricao form {display: flex;flex-direction: column;gap: 1.5rem;margin-top: 2rem;} .pp-perguntas-frequentes .form-inscricao .campo {display: flex;flex-direction: column;} .pp-perguntas-frequentes .form-inscricao label {font-weight: 600;font-size: 14px;color: var(--Blue_Primary-950);margin: 0 0 0.6rem;} .pp-perguntas-frequentes .form-inscricao input[type="text"], .pp-perguntas-frequentes .form-inscricao input[type="email"], .pp-perguntas-frequentes .form-inscricao input[type="tel"] {width: 100%;font-size: 14px;background: var(--Alfa-Oxford-5, #0C235F0D);border: none;border-radius: 8px;padding: 18px 16px;color: var(--Blue_Primary-950);} .pp-perguntas-frequentes .form-inscricao input::placeholder {color: var(--Alfa-Oxford-50, #0C235F80);} .pp-perguntas-frequentes .form-inscricao input:focus-visible {outline: 2px solid var(--Blue_Primary-600);outline-offset: 1px;} .pp-perguntas-frequentes .form-inscricao .icon-wrapper {position: relative;display: block;} .pp-perguntas-frequentes .form-inscricao .icon-wrapper .ph {position: absolute;left: 16px;top: 50%;transform: translateY(-50%);color: var(--Blue_Primary-600);font-size: 20px;pointer-events: none;} .pp-perguntas-frequentes .form-inscricao .icon-wrapper input {padding-left: 46px;} .pp-perguntas-frequentes .form-inscricao a.btn_primary {width: 100%;justify-content: center;border: none;cursor: pointer;} @media (max-width: 900px) { .pp-perguntas-frequentes .conteudo {flex-direction: column;gap: 2.5rem;} .pp-perguntas-frequentes .col-1, .pp-perguntas-frequentes .col-2 {width: 100%;} } @media (max-width: 768px) { .pp-perguntas-frequentes .col-1, .pp-perguntas-frequentes .col-2 {display: contents;} .pp-perguntas-frequentes .col-1 h2 {order: 1;margin: 0;} .pp-perguntas-frequentes .form-inscricao {order: 2;} .pp-perguntas-frequentes .col-1 h3 {order: 3;} .pp-perguntas-frequentes .pf-accordion, .pp-perguntas-frequentes .pf-accordion__empty {order: 4;margin-top: 0;} } /* ===== Bloco: lytex-split-pagamentos ===== */ /* ============================================================ Widget: LyTex Split Pagamentos ============================================================ */ .lytex-split-pagamentos{background: var(--Blue_Primary-50);padding: 4rem 0;} .lytex-split-pagamentos .conteudo{position:relative;display: flex;gap: 6%;} .lytex-split-pagamentos .conteudo .conteudo{background-color: #fff;position: relative;z-index: 1;border-radius: 24px;box-shadow: 0 -16px 116px rgb(0 0 0 / 42%);padding: 60px;display: flex;justify-content: space-between;text-align: left;} .container-page-cartao .lytex-split-pagamentos .conteudo{background:#fff;border-radius: 24px;padding: 1rem 2rem 2rem;} .lytex-split-pagamentos .conteudo .col-1, .lytex-split-pagamentos .conteudo .col-3{width: 48%;position: relative;color: var(--Blue_Primary-950);display: flex;flex-direction: column;gap: 8px;} .lytex-split-pagamentos .conteudo .col-2{width: 49%;position: relative;} .lytex-split-pagamentos .conteudo .col-2 div.imagem-selo{position:absolute;bottom: -22px;left: -50px;display: block;width: 116px;height: 116px;background-size: contain; z-index: 1;} .lytex-split-pagamentos .conteudo .col-3{display: none;} .lytex-split-pagamentos span.elemento-01{background: var(--alfa-white-100-base, rgba(255, 255, 255, 1));margin: 0;} .lytex-split-pagamentos .conteudo h2{margin: 2rem 0 1rem;letter-spacing: -2%;} .lytex-split-pagamentos .conteudo p{margin-bottom:1rem;} .lytex-split-pagamentos .conteudo p b{color: #133295d1;font-weight: 600;} .lytex-split-pagamentos .beneficios-split{display:flex;flex-direction:column;gap:8px} .lytex-split-pagamentos .beneficio-item{display:flex;align-items: center;gap: 16px;padding: 10px;} .lytex-split-pagamentos .icone{color: var(--Blue_Primary-600);font-size: 24px;} .lytex-split-pagamentos .conteudo .btn_primary{width: fit-content;} .lytex-split-pagamentos .conteudo .col-2 > img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;opacity: 0;transition: opacity 600ms ease-in-out;} .lytex-split-pagamentos .conteudo .col-2 > img:first-child, .lytex-split-pagamentos .conteudo .col-2 > img.is-active{opacity: 1;} .transacao-300 { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .transacao-900 { -webkit-transition: all 900ms ease-in-out; -moz-transition: all 900ms ease-in-out; -ms-transition: all 900ms ease-in-out; -o-transition: all 900ms ease-in-out; transition: all 900ms ease-in-out; } @media(max-width: 768px) { .lytex-split-pagamentos .conteudo{padding: 0px;flex-direction: column;gap: 4rem;} .lytex-split-pagamentos .conteudo .col-1, .lytex-split-pagamentos .conteudo .col-2, .lytex-split-pagamentos .conteudo .col-3{width: 100%;} .lytex-split-pagamentos .conteudo .col-1 .beneficios-split, .lytex-split-pagamentos .conteudo .col-1 .btn_primary{display: none;} .lytex-split-pagamentos .conteudo .col-3{display: block;} .lytex-split-pagamentos .conteudo h2{margin: 0rem 0 1rem;} .lytex-split-pagamentos .beneficio-item{padding:10px 0;} .lytex-split-pagamentos .conteudo .btn_primary {width: auto;justify-content: center;} .container-page-cartao .lytex-split-pagamentos .conteudo{background: none;border-radius: 0;padding: 0;} .container-page-cartao .conteudo .col-3{display: none;} .lytex-split-pagamentos .conteudo .col-2 div.imagem-selo {top: -36px;left: auto; right: -5px; width: 91px;height: 101px;} } /* ===== Bloco: lytex-tipos-links-pagamentos ===== */ /* ============================================================ Widget: LyTex Tipos de Links de Pagamentos ============================================================ */ .lytex-tipos-links-pagamentos { padding: 6rem 0; } .lytex-tipos-links-pagamentos .topo { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; } .lytex-tipos-links-pagamentos .col-1 { display: flex; flex-direction: column; gap: 0.75rem; } .lytex-tipos-links-pagamentos .eyebrow { font-size: 14px; font-weight: 600; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); } .lytex-tipos-links-pagamentos h2 { margin: 0; } .lytex-tipos-links-pagamentos .cor-azul { color: var(--Blue_Primary-600); } .lytex-tipos-links-pagamentos .btn_primary { flex-shrink: 0; } .lytex-tipos-links-pagamentos .carrossel-viewport { overflow: hidden; } .lytex-tipos-links-pagamentos .carrossel-track { display: flex; flex-wrap: nowrap; gap: 1.5rem; transition: transform 1000ms ease-in-out; } .lytex-tipos-links-pagamentos .card {flex: 0 0 calc((100% - 3rem) / 3);display: flex;flex-direction: column;gap: 14px;background: var(--Blue_Primary-50);border-radius: 16px;padding: 2rem 1.2rem 0;min-height: 28rem;overflow: hidden;} .lytex-tipos-links-pagamentos .card i {font-size: 1.75rem;color: var(--Blue_Primary-600);margin: 0 0 6px 0;} .lytex-tipos-links-pagamentos .card h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--Blue_Primary-950); } .lytex-tipos-links-pagamentos .card p { margin: 0; font-size: 14px; line-height: 150%; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); } .lytex-tipos-links-pagamentos .card .imagem {margin-top: auto;overflow: hidden;background: var(--Blue_Primary-600);border-radius: 1.5rem 1.5rem 0 0;padding: 1.5rem 1rem 0;} .lytex-tipos-links-pagamentos .card .imagem img {display: block;width: 100%;height: auto;} .lytex-tipos-links-pagamentos .dots {display: flex;justify-content: flex-start;align-items: center;gap: 0px;margin-top: 2.5rem;} .lytex-tipos-links-pagamentos .dots .dot {position: relative;width: 20px;height: 10px;background: transparent;border: none;padding: 0;cursor: pointer;} .lytex-tipos-links-pagamentos .dots .dot::after {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 999px;background: var(--Blue_Primary-200, #bfdbfe);transition: width 300ms, left 300ms, background 300ms;} .lytex-tipos-links-pagamentos .dots .dot.is-active::after {left: 0;transform: none;width: 20px;background: var(--Blue_Primary-600, #2563eb);} /* Fallback (antes do JS calcular a largura em px) ------------ */ @media (max-width: 1024px) { .lytex-tipos-links-pagamentos .card { flex-basis: calc((100% - 1.5rem) / 2); } } @media (max-width: 767px) { .lytex-tipos-links-pagamentos .card { flex-basis: 100%; } } /* Responsivo -------------------------------------------------- */ @media (max-width: 767px) { .lytex-tipos-links-pagamentos { padding: 3.5rem 0; } .lytex-tipos-links-pagamentos .topo { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; } .lytex-tipos-links-pagamentos .btn_primary { width: 100%; justify-content: center; } .lytex-tipos-links-pagamentos h2 { font-size: 28px; } } /* ===== Bloco: mais-praticidade ===== */ /* ============================================================= Bloco: Mais Praticidade ============================================================= */ .mais-praticidade {width: 100%;padding: 4rem 0;} .mais-praticidade .caixa{display: flex;align-items: center;gap: 1rem;background: linear-gradient(135deg, var(--Blue_Primary-500), var(--Blue_Primary-700));border-radius: 32px;padding: 1rem;} .mais-praticidade .col-1{width: 40%;} .mais-praticidade .col-2{width: 60%;} .mais-praticidade h2{margin: 0 0 2.5rem;} .mais-praticidade .lista-beneficios{display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem 2.5rem;} .mais-praticidade .beneficio-item{display: flex;align-items: flex-start;gap: 1rem;} .mais-praticidade .beneficio-item i{flex-shrink: 0;font-size: 1.5rem;color: var(--color-white);margin-top: 2px;} .mais-praticidade .beneficio-item p{margin: 0;font-size: 15px;line-height: 150%;color: var(--color-white);} .mais-praticidade .imagem-wrapper{position: relative;width: 100%;border-radius: 24px;overflow: hidden;aspect-ratio: 1;} .mais-praticidade .imagem-wrapper img{display: block;width: 100%;height: 100%;object-fit: cover;} .mais-praticidade .imagem-wrapper .btn_primary{position: absolute;left: calc(50% - 100px);bottom: 24px;width: fit-content;} @media (max-width: 991px) { .mais-praticidade .caixa{flex-direction: column;padding: 2rem;} .mais-praticidade .col-1{width: 100%;} .mais-praticidade .col-2{width: 100%;} } @media (max-width: 767px) { .mais-praticidade {padding: 4rem 0;} .mais-praticidade .caixa{border-radius: 20px;padding: 1.5rem;gap: 2rem;} .mais-praticidade .lista-beneficios{grid-template-columns: 1fr;gap: 1.5rem;} } /* ===== Bloco: pix-api ===== */ /* ============================================================= Bloco: API DEV PIX ============================================================= */ .bloco-pix-api .elemento-01{margin:0;} .bloco-pix-api {width: 100%;padding: 6rem 0;background: #ffffff;color: var(--Gray_800);} .bloco-pix-api p{margin:0;font-size: 14px;} .bloco-pix-api .conteudo{display: flex;/* gap: 8%; */justify-content: space-between;} .bloco-pix-api .conteudo .col-1{display: flex;flex-direction: column;gap: 1.5rem;width: 52%;} .bloco-pix-api .conteudo h3 span{color: var(--Blue_Primary-600);} .bloco-pix-api .conteudo .col-2{position: relative;text-align: right;width: 37%;} .bloco-pix-api .conteudo .col-2:before{content:"";display: block;position: absolute;bottom: 0;right: 0%;width: 100%;height: 110%;aspect-ratio: 1;border-radius: 10% 10% 0 0;z-index: 0;background: #efefef;} .bloco-pix-api .acoes{display: flex;} .bloco-pix-api .imagem-fundo{width: 100%;z-index: 1;position: relative;margin: 0 0 0 auto;margin-right: 5%;max-width: 24rem;right: 0;} .bloco-pix-api .imagem-fundo img{width: 100%;} @media (max-width: 767px) { .bloco-pix-api {padding: 4rem 0} .bloco-pix-api .conteudo{flex-direction: column;gap: 2.5rem} .bloco-pix-api .conteudo .col-1{order: 2;text-align: center; width: 100%;} .bloco-pix-api .conteudo .col-2{order: 1;aspect-ratio: 1;overflow: hidden; width: 100%;} .bloco-pix-api .conteudo .col-2:before{width: 90%;right: 5%;} .bloco-pix-api .imagem-fundo{margin: 0 auto;} .bloco-pix-api .acoes{display:flex;flex-direction:column; gap:2rem;} .bloco-pix-api .acoes a{text-align:center;justify-content: center;} .bloco-pix-api .elemento-01{margin:0 auto;} } /* ===== Bloco: pix-cobranca ===== */ /* ============================================================= bloco: LyTex — Seus Pagamentos Seguros ============================================================= */ .pix-cobranca {background: var(--Blue_Primary-50);padding: 4rem 0;} .pix-cobranca .container {max-width: 1180px;margin: 0 auto;} .pix-cobranca .methods-box {background: #fff;border-radius: 24px;padding: 2rem;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 3rem;} .pix-cobranca .methods-description {max-width: 760px;} .pix-cobranca .methods-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 22px;text-align: left;} .pix-cobranca .method-card {border-radius: 12px;display: flex;flex-direction: column;gap: 12px;} .pix-cobranca .method-img{position:relative;display: block;} .pix-cobranca .method-img img{margin:0;} .pix-cobranca .method-icon {width: 48px;height: 48px;background: #edf4ff;border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;font-size: 26px;color: #2563ff;overflow: hidden;} .pix-cobranca .method-card h4 {color: var(--Blue_Primary-950);margin: 0;font-weight: 600;font-size: 16px;line-height: 150%;letter-spacing: 0%;} .pix-cobranca .method-card p {color: #a5adbf;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;margin-bottom: auto;} .pix-cobranca .method-card a{color: var(--Blue_Primary-950);font-weight: 600;font-size: 14px;line-height: 150%;display: flex;text-decoration-color: #d4d4d4} .pix-cobranca .method-card a span {text-decoration: underline;text-decoration-style: solid;text-decoration-color: inherit;text-underline-offset: 2px;} .pix-cobranca .method-card a i{font-size: 22px;margin: 0 0 0 6px;transform: rotate(90deg);opacity:0} .pix-cobranca .method-card .method-icon{height: 0px;opacity: 1;} .pix-cobranca .method-card:hover h4, .pix-cobranca .method-card:hover a{color: var(--Blue_Primary-600);text-decoration-color: var(--Blue_Primary-600);} .pix-cobranca .method-card:hover a i{transform: rotate(0deg);opacity:1} .pix-cobranca a.btn_primary{width: 22rem;max-width: 100%;justify-content: center;} .pix-cobranca .method-card, .pix-cobranca .method-img, .pix-cobranca .method-icon, .pix-cobranca .method-card a i {-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 768px) { .pix-cobranca .methods-grid {grid-template-columns: 1fr;gap: 3rem;} .pix-cobranca .methods-box {padding: 40px 25px;} .pix-cobranca .method-card{gap: 8px;padding: 0;} } /* ===== Bloco: pix-cobranca-2 ===== */ /* ============================================================ Widget: Pix Cobranca ============================================================ */ .pix-cobranca-2{background: linear-gradient(0deg, #0B389D 0%, #0C235F 100%);position: relative;padding: 6rem 0 6rem;} .pix-cobranca-2 .fundo-container{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;z-index: 0;} .pix-cobranca-2 .fundo{display: block;width: 110%;aspect-ratio: 1;position: absolute;top: -50rem;left: -5%;border-radius: 50%;z-index: 0;background-color: #051c3d24;} .pix-cobranca-2 .fundo div{display: block;width: 82%;aspect-ratio: 1;position: absolute;top: 8%;left: 9%;border-radius: 50%;background-color: #051c3d24} .pix-cobranca-2 .container{z-index: 2;position: relative;} .pix-cobranca-2 .cabeca{display:flex;position:relative;} .pix-cobranca-2 .cabeca > div:first-child{width: 69%;} .pix-cobranca-2 .cabeca > div:last-child{width: 23%;display: block;position: relative;} .pix-cobranca-2 .cabeca h1{margin:0 0 16px 0;} .pix-cobranca-2 .cabeca p{color: var(--Alfa-White-50, rgba(255, 255, 255, 0.5));margin: 0;font-size: 14px;} .pix-cobranca-2 .cabeca img{position: absolute;right: 0;bottom: 0px;} .pix-cobranca-2 .cards{text-align: left;display: flex;margin: 3rem 0 0;gap: 24px;} .pix-cobranca-2 .card{position:relative;color: #e9dcdc;border: 1.5px solid #ffffff1f;padding: 16px 14px;border-radius: 8px;display: flex;flex-direction: column;gap: 8px;overflow: hidden;cursor: pointer;background: var(--Blue_Primary-950);flex: 1;} .pix-cobranca-2 .card .icone{background: var(--Blue_Primary-900);display: inline-flex;width: 48px;height: 48px;align-items: center;justify-content: center;border-radius: 16px 8px;font-size: 24px;} .pix-cobranca-2 .card h3{font-weight: 700;font-size: 20px;line-height: 150%;color: var(--color-white);} .pix-cobranca-2 .card p{font-size: 14px;line-height: 150%;color: #ffffff78;} .pix-cobranca-2 .card a{color:#fff;padding-left: 0;font-weight: 400;} .pix-cobranca-2 .card > *{z-index:1;} .pix-cobranca-2 .card:before{display:block;position:absolute;content:"";top: 0;left: 0;width:100%;height:100%;background: linear-gradient(180deg, var(--Blue_Primary-800), #092aaa);z-index: 0;opacity: 0;} .pix-cobranca-2 .card.active:before{opacity: 1;} .pix-cobranca-2 .card:before, .transacao-300 { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .transacao-900 { -webkit-transition: all 900ms ease-in-out; -moz-transition: all 900ms ease-in-out; -ms-transition: all 900ms ease-in-out; -o-transition: all 900ms ease-in-out; transition: all 900ms ease-in-out; } @media(max-width: 768px) { .pix-cobranca-2{padding: 4rem 0;} .pix-cobranca-2 .cabeca{display:block;margin-top:3rem;} .pix-cobranca-2 .cabeca > div:first-child{width:100%} .pix-cobranca-2 .cabeca > div:last-child{width: 35%;position:absolute;top:3rem;right:0} .pix-cobranca-2 h2{margin: 2rem 0;font-size:24px;} .pix-cobranca-2 .cards{flex-direction:column;} .pix-cobranca-2 .card{padding: 12px 12px 0;} .pix-cobranca-2 .card h3{font-size:16px;} .pix-cobranca-2 .card p{font-size:12px;} } /* ===== Bloco: pix-oferta ===== */ /* ============================================================= Bloco: Pix Oferta ============================================================= */ .pix-oferta {width: 100%;padding: 8rem 0 6rem;} .pix-oferta .conteudo{position:relative;display: flex;gap: 4.8rem;background: var(--Blue_Primary-950);background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);color: #fff;padding: 3rem 2rem;border-radius: 2rem;} .pix-oferta .conteudo .col-1{display: flex;flex-direction: column;gap: 1.0rem;flex: 1;max-width: 45%;position: relative;/* padding: 0 0 5rem 0; */} .pix-oferta .conteudo .col-1 p{color: var(--Alfa-White-75, #FFFFFFBF);} .pix-oferta .conteudo .col-2{flex: 1;position: relative;display: flex;max-width: 54%;align-items: center;} .pix-oferta .conteudo .botoes{width: 630px;display: flex;} .pix-oferta .btn_primary{width: fit-content;} .pix-oferta .btn_default{color: var(--Alfa-White-100, #FFFFFF);width: fit-content;} .pix-oferta .btn_default:hover{color: var(--Alfa-White-100, #FFFFFF);width: fit-content;} .pix-oferta .pague{display: flex;/* flex-direction: column; *//* gap: 6px; */text-align: left;width: 100%;flex-wrap: wrap;justify-content: center;position: relative;} .pix-oferta .pague span:nth-child(1):before{content:"";display:block;border-bottom: 1px solid #fff;width: 20%;} .pix-oferta .pague span:nth-child(1):after{content:"";display:block;border-bottom: 1px solid #fff;width: 20%;} .pix-oferta .pague span:nth-child(1){font-size: 24px;font-weight: 500;line-height: 84%;letter-spacing: 22%;text-align: center;width: 100%;display: flex;align-items: center;gap: 2%;justify-content: center;} .pix-oferta .selo-image{width: 26%;margin-right: -13px;} .pix-oferta .pague span:nth-child(3){font-size: 146px;font-weight: 900;line-height: 84%;text-shadow: 2px 2px var(--Blue_Primary-500);} .pix-oferta .pague span:nth-child(4){font-size: 16px;text-align: right;width: 100%;margin: -2% 2% 0 0;} @media (max-width: 767px) { .pix-oferta {padding: 5rem 0;} .pix-oferta .conteudo{flex-direction: column;gap: 3rem;} .pix-oferta .conteudo .col-1{order: 2;max-width:none;} .pix-oferta .conteudo .col-1 .botoes{display:block;width:auto} .pix-oferta .col-1 .botoes > *{width:auto} .pix-oferta .conteudo .col-2{order: 1;max-width:none;} .pix-oferta .pague span:nth-child(1){font-size: 21px;} .pix-oferta .pague span:nth-child(2){font-size: 100%;} .pix-oferta .pague span:nth-child(3){font-size: 113px;} } /* ===== Bloco: pix-personalizacao ===== */ /* ============================================================ Widget: Pix Personalização ============================================================ */ .pix-personalizacao{padding: 6rem 0 6rem;} .pix-personalizacao .conteudo{display: flex;flex-direction: column;gap: 2rem;text-align: center;} .pix-personalizacao .elemento-01{margin:0 auto;} .pix-personalizacao .conteudo h3{max-width: 680px;margin: 0 auto;} .pix-personalizacao .conteudo > div{position:relative;max-width: 86%;margin: 0 auto;} .pix-personalizacao .conteudo img{max-width: 100%;margin: 0 auto;} .pix-personalizacao .conteudo > div img.icone-central{position:absolute;top: 219px;left: 69%;width: 70px;} @media(max-width: 768px) { .pix-personalizacao{padding: 4rem 0;} .pix-personalizacao .conteudo img{max-width: 96%;margin: 0 auto;} .pix-personalizacao .conteudo > div img.icone-central {top: 53px;left: 66%;width: 35px;} } /* ===== Bloco: planos-tabela ===== */ /* ============================================================= Bloco: Planos Tabela ============================================================= */ .planos-tabela{width: 100%;padding: 6rem 0;} .planos-tabela .container{max-width: 1100px;margin: 0 auto;display: flex;flex-direction: column;align-items: center;gap: 3rem;} .planos-tabela .topo{text-align: center;max-width: 680px;display: flex;flex-direction: column;align-items: center;gap: 1.5rem;} .planos-tabela .topo h2{margin: 0;} .planos-tabela .topo p{margin: 0;} /* Tabela */ .planos-tabela .tabela-planos{width: 100%;border-collapse: collapse;table-layout: fixed;} .planos-tabela .tabela-planos tr{height: 60px;} .planos-tabela .tabela-planos tr.titulo{background: var(--Blue_Primary-50);} .planos-tabela .tabela-planos td{padding: 8px;text-align: left;vertical-align: middle;line-height: 150%;font-size: 14px;border-bottom: 2px solid rgb(12 35 95 / 6%);border-right: 2px solid rgb(12 35 95 / 6%);min-height: 100px;color: var(--Alfa-Oxford-50, #0C235F80);} .planos-tabela .tabela-planos tr.titulo td:not(:last-child){border-right:none;} .planos-tabela .tabela-planos td:not(:first-child){width: 22%;text-align: center;} .planos-tabela .tabela-planos td:nth-child(3){color: var(--Blue_Primary-600);} .planos-tabela .tabela-planos td i{font-size: 22px;line-height: 1;} .planos-tabela .tabela-planos tr:not(.planos) td:first-child{border-left: 2px solid rgb(12 35 95 / 6%);color: var(--Blue_Primary-950);font-size: 16px;font-weight: 600;} .tabela-planos .planos td:first-child{border-left: none;} .planos-tabela .tabela-planos tr.titulo td{font-size:10px;} .planos-tabela .tabela-planos tr.titulo td:first-child{color: var(--Blue_Primary-600);} .planos-tabela .tabela-planos tr:nth-child(2).titulo td:first-child{border-radius: 8px 0 0 0;} .tabela-planos tr.planos td{border-left: none;border-right: none;} .tabela-planos tr.planos td:not(:first-child){background: var(--Background-Background, #F3F6F9);border-left: none;border-right: none;font-size: 20px;font-weight: 600;} .tabela-planos tr.planos td:nth-child(2){border-radius: 8px 0 0 0;} .tabela-planos tr.planos td:nth-child(4){border-radius: 0 8px 0 0;} .tabela-planos tr.planos td:nth-child(3), .tabela-planos tr:nth-child(2).titulo td:nth-child(3){background: var(--Blue_Primary-600);color: #fff;} /* ============================================================= Ações (botões abaixo da tabela) ============================================================= */ .planos-tabela .acoes{display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;gap: 1.5rem;width: 100%;} .planos-tabela .acoes .btn-link{color: var(--Blue_Primary-600);font-weight: 700;font-size: 14px;text-decoration: underline;} .planos-tabela .acoes .btn-primary{display: flex;align-items: center;justify-content: center;min-width: 220px;height: 56px;padding: 0 2rem;border-radius: 8px;background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), var(--Blue_Primary-600);color: #fff;font-weight: 700;font-size: 14px;text-decoration: none;border: 1px solid #ffffff33;} .planos-tabela .acoes .btn-primary:hover{background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%), var(--Blue_Primary-800);} .planos-tabela .acoes .btn-outline{display: flex;align-items: center;justify-content: center;min-width: 220px;height: 56px;padding: 0 2rem;border-radius: 8px;background: #fff;color: var(--Blue_Primary-600);font-weight: 700;font-size: 14px;text-decoration: none;border: 1px solid var(--Blue_Primary-600);} .planos-tabela .acoes .btn-outline:hover{background: var(--Blue_Primary-50);} /* Tabs mobile — oculto no desktop */ .tabs-mobile-planos{display: none;} @media (max-width: 767px) { .planos-tabela{padding: 4rem 0;} .planos-tabela .container{gap: 1.5rem;} /* Tabs */ .tabs-mobile-planos{display: flex;gap: 0.5rem;width: 100%;} .tabs-mobile-planos .tab-btn{flex: 1;padding: 0.75rem 0.5rem;border-radius: 8px;border: none;background: var(--Background-Background, #F3F6F9);color: var(--Blue_Primary-950);font-size: 14px;font-weight: 600;cursor: pointer;transition: background 0.2s, color 0.2s;} .tabs-mobile-planos .tab-btn.active{background: var(--Blue_Primary-600);color: #fff;} /* Tabela */ .planos-tabela .tabela-planos{table-layout: auto;} .planos-tabela .tabela-planos tbody{display: inline;} .planos-tabela .tabela-planos tr.planos{display: none;} .planos-tabela .tabela-planos td{padding: 1rem 0.5rem;font-size: 12px;} .planos-tabela .tabela-planos tr.titulo td:first-child, .planos-tabela .tabela-planos tr:not(.planos):not(.titulo) td:first-child{font-size: 13px;} /* Chaveamento de colunas — col 1 = Essencial, col 2 = Empresarial, col 3 = Prime */ .tabela-planos.tab-col-1 td:nth-child(3), .tabela-planos.tab-col-1 td:nth-child(4){display: none;} .tabela-planos.tab-col-2 td:nth-child(2), .tabela-planos.tab-col-2 td:nth-child(4){display: none;} .tabela-planos.tab-col-3 td:nth-child(2), .tabela-planos.tab-col-3 td:nth-child(3){display: none;} .planos-tabela .tabela-planos td:not(:first-child){width: 48%;} /* Primeira linha .titulo: descrição do plano em cima, título da seção embaixo */ .planos-tabela .tabela-planos tr:nth-child(2).titulo{display: flex;flex-direction: column;height: auto;} .planos-tabela .tabela-planos tr:nth-child(2).titulo td{width: 100%;box-sizing: border-box;min-height: auto;padding: 22px 8px;} .planos-tabela .tabela-planos tr:nth-child(2).titulo td:first-child{order: 2;/* text-align: center; */} .planos-tabela .tabela-planos tr:nth-child(2).titulo td:not(:first-child){order: 1;/* text-align: left; */} .planos-tabela .acoes{flex-direction: column;align-items: stretch;justify-content: center;gap: 1rem;} .planos-tabela .acoes .btn-link{text-align: center;} /* Sticky tab buttons */ .tabs-mobile-planos.is-sticky{ position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding: 0.75rem 1rem; background: #fff; box-shadow: 0 2px 12px rgba(12,35,95,0.12); opacity: 1; transition: opacity 0.3s ease; } .tabs-mobile-planos.is-sticky.is-hiding{ opacity: 0; pointer-events: none; } } /* ===== Bloco: portal-cliente ===== */ /* ============================================================= Widget: LyTex — Portal Cliente ============================================================= */ /* Responsivo */ @media (max-width: 767px) { .hide-in-mobile { display: none !important; } } @media (min-width: 768px) { .hide-in-desktop { display: none !important; } } .portal-cliente {width: 100%;padding: 8rem 0 5rem;text-align: center;color:#fff;position: relative;margin: 0rem 0 0;} .portal-cliente{background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);} .portal-cliente span.elemento-01 {margin: 0 0 24px;display:block} .portal-cliente h1{/* font-size:2rem; */max-width: 60rem;text-align: center;margin: auto;} .portal-cliente .imagem{margin: 0 auto 0;text-align: center;max-width: 58rem;position: relative;} .portal-cliente .imagem img:first-child{max-width: 100%;width:100%;height:auto;margin: 0 auto;} .portal-cliente .imagem img:last-child{width: 112px;height:auto;margin: 0 auto;position: absolute;top: 27%;right: -6%;} .portal-cliente .cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin-top:24px} .portal-cliente .card{background:#0f2a66;padding:20px;border-radius:8px;color:#fff;width: 48%;text-align:left} .portal-cliente .card .icone{font-size:28px;margin-bottom:12px} .portal-cliente .card h3{margin:0 0 8px} .portal-cliente .btn_default{display:inline-block;margin-top:12px;color:#fff;text-decoration:none} /* Copiado de lytex-api-1: icone-sessao e cards */ .portal-cliente .icone-sessao{position: absolute;left: calc(50% - 64px);width: 128px;top: -64px;z-index: 1;} .portal-cliente .icone-sessao img{color: #fff;} .portal-cliente .container{text-align: center;z-index: 2;position: relative;display: flex;flex-direction: column;gap: 5rem;} .portal-cliente .cards{text-align: left;display: flex;margin: 0rem 0;gap: 2%;} .portal-cliente .card{position:relative;color: #e9dcdc;border: 1.5px solid #2563ebb0;padding: 12px 0px 0px;border-radius: 6px 22px;display: flex;flex-direction: column;gap: 8px;overflow: hidden;cursor: pointer;} .portal-cliente .card-1{border-radius:22px 6px;} .portal-cliente .card > div{display: flex;align-items: center;gap: 22px;padding: 0 22px;border-bottom: 1px solid var(--Blue_Primary-700);} .portal-cliente .card .icone{background: var(--Blue_Primary-950);display: inline-flex;width: 48px;height: 48px;align-items: center;justify-content: center;border-radius: 16px 8px;font-size: 24px;} .portal-cliente .card-2 .icone{background: var(--Blue_Primary-800);} .portal-cliente .card h3{font-weight: 700;font-size: 20px;line-height: 150%;color: var(--color-white);} .portal-cliente .card a{color:#fff;padding-left: 0;font-weight: 400;} .portal-cliente .card > *{z-index:1;} .portal-cliente .card ul{font-weight: 400;font-size: 14px;padding: 0 20px;line-height: 150%;letter-spacing: 0%;color: rgb(255 255 255 / 68%);margin: 0 20px 20px;} .portal-cliente .card:before{display:block;position:absolute;content:"";top: 0;left: 0;width:100%;height:100%;background: linear-gradient(180deg, var(--Blue_Primary-800), #092aaa);z-index: 0;opacity: 0;} .portal-cliente .card-1:before{opacity: 1;} @media(max-width: 768px) { .portal-cliente{padding: 6rem 0 6rem;} .portal-cliente .icone-sessao{display:none;} .portal-cliente .container{gap:4rem} .portal-cliente .cards{flex-direction:column;align-items:stretch;gap: 17px;} .portal-cliente .card{padding: 12px 12px 0;width: 100%;} .portal-cliente .card h3{font-size:16px;} .portal-cliente .card p{font-size:12px;} } /* ===== Bloco: recorrencias-personalizadas ===== */ /* ============================================================= Bloco: Recorrências Personalizadas ============================================================= */ .recorrencias-personalizadas {width: 100%;padding: 6rem 0;background: var(--color-white);} .recorrencias-personalizadas .conteudo{display: flex;gap: 4rem;align-items: center;justify-content: space-between;} .recorrencias-personalizadas .conteudo .col-1{display: flex;flex-direction: column;gap: 1.5rem;width: 50%;/* flex: 1; */} .recorrencias-personalizadas .conteudo span.elemento-01{margin: 0;} .recorrencias-personalizadas .conteudo .col-2{width: 46%;/* flex: 1; */} .recorrencias-personalizadas h2{margin: 0;} .recorrencias-personalizadas p{margin: 0;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .recorrencias-personalizadas .btn_primary{width: fit-content;} .recorrencias-personalizadas .grid-segmentos{display: grid;grid-template-columns: repeat(3, 1fr);gap: 12px;} .recorrencias-personalizadas .card{background: var(--Blue_Primary-50);border-radius: 1rem;padding: 10px;display: flex;flex-direction: column;gap: 14px;} .recorrencias-personalizadas .card i{font-size: 1.75rem;color: var(--Blue_Primary-600);} .recorrencias-personalizadas .card p{margin: 0;color: var(--Blue_Primary-950);font-weight: 600;font-size: 16px;} @media (max-width: 991px) { .recorrencias-personalizadas .conteudo{flex-direction: column;gap: 2.5rem;} .recorrencias-personalizadas .conteudo .col-1{width: 100%;text-align: center;align-items: center;} .recorrencias-personalizadas .conteudo .col-2{width: 100%;} } @media (max-width: 767px) { .recorrencias-personalizadas {padding: 4rem 0;} .recorrencias-personalizadas .grid-segmentos{grid-template-columns: repeat(2, 1fr);gap: 1rem;} .recorrencias-personalizadas .card{padding: 1.25rem;gap: 1.5rem;} } /* ===== Bloco: seguranca-med ===== */ /* ============================================================= Bloco: Segurança com MED ============================================================= */ .bloco-seguranca-med {width: 100%;padding: 6rem 0;background: #ffffff;color: var(--Gray_800);} .bloco-seguranca-med p{margin:0;color: var(--Alfa-Oxford-50, #0C235F80);font-size: 14px;max-width: 40rem;} .bloco-seguranca-med .conteudo{display: flex;gap: 1rem;} .bloco-seguranca-med .conteudo .col-1{display: flex;flex-direction: column;gap: 1.4rem;width: 61%;} .bloco-seguranca-med .conteudo h4 {color: var(--Blue_Primary-900);font-size: 20px;font-weight: 600;line-height: 150%;margin: 0;} .bloco-seguranca-med .conteudo .col-2{flex: 1;position: relative;text-align: right;} .bloco-seguranca-med .conteudo .col-2:before{content:"";display: block;position: relative;bottom: 0;right: 0%;width: 100%;aspect-ratio: 1;border-radius: 10%;z-index: 0;background: var(--Blue_Primary-50);} .bloco-seguranca-med .header-title {display: flex;align-items: center;gap: 1rem;justify-content: space-between;} .bloco-seguranca-med .header-title i:first-child {font-size: 28px;flex-shrink: 0;margin-top: 2px;} .bloco-seguranca-med .header-title h3 {font-size: 16px;background: var(--Blue_Primary-50);padding: 12px 24px;border-radius: 15px;display: flex;align-items: center;gap: 7px;} .bloco-seguranca-med .icons-group {display: flex;gap: 1rem;margin-left: auto;color: #000;align-items: center;} .bloco-seguranca-med .icons-group img {width: 32px;height: 32px;display: block;} .bloco-seguranca-med .imagem-fundo{width: 80%;z-index: 1;position: absolute;left: 10%;top: 10%;} .bloco-seguranca-med .imagem-fundo img{width: 100%;} .bloco-seguranca-med .security-icon {width: 100%;height: auto;max-width: 300px;} .bloco-seguranca-med .btn_primary {width: fit-content;margin: 2rem 0 0 0;padding: 16px 5rem;} .bloco-seguranca-med .btn_primary:hover {transform: translateY(-2px);} .bloco-seguranca-med .btn_primary i {margin-left: 8px;} @media (max-width: 767px) { .bloco-seguranca-med {padding: 4rem 0} .bloco-seguranca-med .conteudo{flex-direction: column;gap: 2.5rem} .bloco-seguranca-med .conteudo .col-1{order: 2;width: 100%;} .bloco-seguranca-med .conteudo .col-2{order: 1;aspect-ratio: 1;overflow: hidden;width: 100%;} .bloco-seguranca-med .header-title h3 {margin: 0;max-width: calc(100% - 140px);overflow: hidden;text-wrap-mode: nowrap;} .bloco-seguranca-med .icons-group {margin-left: 0;margin-bottom: 1rem;} .bloco-seguranca-med .btn_primary {width: 100%;text-align: center;justify-content: center;} } /* ===== Bloco: seguranca-transacoes ===== */ /* ============================================================= Bloco: Segurança das Transações ============================================================= */ .seguranca-transacoes {width: 100%;padding: 6rem 0;} .seguranca-transacoes .container{display: flex;flex-direction: column;align-items: center;gap: 3rem;} .seguranca-transacoes .topo{text-align: center;/* max-width: 817px; */} .seguranca-transacoes .topo h2{margin: 0;font-weight: 600;color: var(--Blue_Primary-950);} .seguranca-transacoes .cards{display: flex;width: 100%;align-items: stretch;} .seguranca-transacoes .card{flex: 1;text-align: center;padding: 0px 0.8rem;display: flex;flex-direction: column;align-items: center;gap: 1rem;border-left: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));} .seguranca-transacoes .card:first-child{border-left: none;} .seguranca-transacoes .card-icon{display: flex;align-items: center;justify-content: center;width: 110px;height: 110px;background: var(--Blue_Primary-50);border-radius: 1.5rem 8px;} .seguranca-transacoes .card-icon i{font-size: 3.25rem;color: var(--Blue_Primary-600);} .seguranca-transacoes .card-icon-img img{max-width: 58px;aspect-ratio: 1;} .seguranca-transacoes .card h4{margin: 0;font-size: 16px;font-weight: 600;color: var(--Blue_Primary-950);} .seguranca-transacoes .card p{margin: 0;font-size: 14px;color: var(--Alfa-Oxford-75, #0C235FBF);} .seguranca-transacoes .acoes{display: flex;} .seguranca-transacoes .acoes a{padding-left:4rem;padding-right:4rem;} @media (max-width: 991px) { .seguranca-transacoes .cards{flex-direction: column;gap: 2.5rem;} .seguranca-transacoes .card{border-left: none;border-top: 1px solid var(--Alfa-Oxford-10, rgba(12,35,95,0.1));padding: 2.5rem 0 0;} .seguranca-transacoes .card:first-child{border-top: none;padding-top: 0;} } /* ===== Bloco: solucao-completa ===== */ /* ============================================================ * Bloco Solução Completa - CSS ============================================================ */ .solucao-completa{background-color: #fff;padding: 4rem 0;} .solucao-completa .conteudo{position:relative;} .solucao-completa h2{text-align: center;margin: auto;letter-spacing: -2%;color: var(--Blue_Primary-950);} .solucao-completa .cards{display:flex;gap: 9px;flex-wrap:wrap;justify-content: space-between;margin-top: 4rem;} .solucao-completa .cards .card{width: 31%;display: flex;flex-direction: column;gap: 1rem;text-align: left;margin: 3rem 0 0 0;} .solucao-completa .cards .card h2{text-align: left;margin: 0; font-size: 24px;; min-height: 75px;} .solucao-completa .cards .card p{margin: 0; font-size: 14px; min-height: 65px;} .solucao-completa .cards .card a{padding: 0px;min-height: auto;width: fit-content;color: var(--Blue_Primary-600);border-radius: 0;} .solucao-completa .cards .card a span{border-bottom: 1px solid var(--Blue_Primary-600);} .solucao-completa .cards .card a i{transform: rotate(0deg);opacity: 1;} .solucao-completa .cards .card .imagem{font-weight:900;background: var(--Blue_Primary-50);padding: 2rem 2rem 0;border-radius: 28px 28px;} .solucao-completa .cards .card .imagem img{font-weight:900;} .transacao-300-sc { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } @media(max-width: 768px) { .solucao-completa .cards{flex-direction:column;gap: 4rem;} .solucao-completa .cards .card{width: 100%;margin: 0;gap: 16px;} } /* ===== Bloco: tudo-para-empresa ===== */ /* ============================================================ * Bloco Tudo para Empresa - CSS ============================================================ */ .tudo-para-empresa{background-color: #fff;padding: 4rem 0;} .tudo-para-empresa .conteudo{position:relative;} .tudo-para-empresa .conteudo > h2{max-width: 31rem;} .tudo-para-empresa .conteudo > h2 span{color: var(--Blue_Primary-600);} .tudo-para-empresa h2{text-align: center;margin: auto;letter-spacing: -2%;color: var(--Blue_Primary-950);} .tudo-para-empresa .cards{display: flex;flex-wrap:wrap;justify-content: space-between;margin-top: 4rem;gap: 16px;} .tudo-para-empresa .cards .card{display: flex;flex-direction: column;gap: 2rem;text-align: left;margin: 3rem 0 0 0;width: calc(50% - 9px);} .tudo-para-empresa .cards .card h2{text-align: left;margin: 0;} .tudo-para-empresa .cards .card p{margin: 0;font-size: 14px;} .tudo-para-empresa .cards .card a{padding: 0px;min-height: auto;width: fit-content;color: var(--Blue_Primary-600);border-radius: 0;} .tudo-para-empresa .cards .card a span{} .tudo-para-empresa .cards .card a i{transform: rotate(0deg);opacity: 1;} .tudo-para-empresa .cards .card .imagem{font-weight:900;background: var(--Blue_Primary-50);padding: 2rem 2rem 0;border-radius: 28px 28px;} .tudo-para-empresa .cards .card .imagem img{font-weight:900;} .transacao-300-tpe { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } @media(max-width: 768px) { .tudo-para-empresa .cards{flex-direction:column;gap: 4rem;} .tudo-para-empresa .cards .card{width: 100%;margin: 0;gap: 16px;} } /* ===== Bloco: sua-empresa-recebe-mais ===== */ /* ============================================================= Bloco: Sua Empresa Recebe Mais ============================================================= */ .sua-empresa-recebe-mais {width: 100%;padding: 4rem 0;} .sua-empresa-recebe-mais .caixa{display: flex;align-items: center;gap: 3rem;background: var(--Blue_Primary-50);border-radius: 32px;padding: 2rem;} .sua-empresa-recebe-mais .col-1{width: 50%;} .sua-empresa-recebe-mais .col-2{width: 50%;} .sua-empresa-recebe-mais h2{margin: 0 0 2.5rem;} .sua-empresa-recebe-mais .lista-beneficios{display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem 2.5rem;} .sua-empresa-recebe-mais .beneficio-item{display: flex;align-items: flex-start;gap: 1rem;} .sua-empresa-recebe-mais .beneficio-item i{flex-shrink: 0;font-size: 1.5rem;color: var(--Blue_Primary-600);margin-top: 2px;} .sua-empresa-recebe-mais .beneficio-item p{margin: 0;font-size: 15px;line-height: 150%;color: var(--Blue_Primary-950);} .sua-empresa-recebe-mais .imagem-wrapper{position: relative;width: 100%;border-radius: 24px;overflow: hidden;aspect-ratio: 1;} .sua-empresa-recebe-mais .imagem-wrapper img{display: block;width: 100%;height: 100%;object-fit: cover;} .sua-empresa-recebe-mais .imagem-wrapper .btn_primary{position: absolute;left: calc(50% - 100px);bottom: 24px;width: fit-content;} @media (max-width: 991px) { .sua-empresa-recebe-mais .caixa{flex-direction: column;padding: 2rem;} .sua-empresa-recebe-mais .col-1{width: 100%;} .sua-empresa-recebe-mais .col-2{width: 100%;} } @media (max-width: 767px) { .sua-empresa-recebe-mais {padding: 4rem 0;} .sua-empresa-recebe-mais .caixa{border-radius: 20px;padding: 1.5rem;gap: 2rem;} .sua-empresa-recebe-mais .lista-beneficios{grid-template-columns: 1fr;gap: 1.5rem;} } /* ===== Bloco: tabela-solucoes ===== */ /* ============================================================= Bloco: Tabela Soluções ============================================================= */ .tabela-solucoes {width: 100%;padding: 6rem 0;background: var(--Blue_Primary-50);} .tabela-solucoes .cabecalho {text-align: center;max-width: 46rem;margin: 0 auto 3rem;display: flex;flex-direction: column;gap: 1rem;} .tabela-solucoes .cabecalho h2 {line-height: 38px;} .tabela-solucoes .cabecalho h2 span {font-size: 23px;} .tabela-solucoes .cabecalho p{font-size: 14px;} .tabela-solucoes .conteudo {width: 100%;} .tabela-solucoes .tabela {background: #fff;border-radius: 1.5rem;box-shadow: 0 4px 24px rgba(0,0,0,0.06);border: 10px solid var(--Blue_Primary-100);padding: 0 0 24px 1px;} .tabela-solucoes .tabela-header, .tabela-solucoes .tabela-linha {display: grid;grid-template-columns: 1fr 20% 20%;align-items: center;} .tabela-solucoes .tabela-header {padding: 0 1.5rem;margin: 0 0 0;} .tabela-solucoes .tabela-header .col-lytex {background: var(--Blue_Primary-900);border-radius: 1rem 1rem 0 0;padding: 1.25rem 0.75rem;display: flex;flex-direction: column;align-items: center;gap: 0.5rem;color: #fff;font-size: 0.8rem;font-weight: 600;text-align: center;line-height: 1.3;min-height: 90px;justify-content: center;margin: -36px 0 -1px 0;} .tabela-solucoes .tabela-header .col-lytex .logo {width: 56%;height: auto;filter: brightness(0) invert(1);} .tabela-solucoes .tabela-header .col-concorrente {display: none;justify-content: center;align-items: center;padding: 1rem 0.5rem;color: var(--Neutral-300);font-size: 1.4rem;} .tabela-solucoes .tabela-linha {padding: 0px 1.5rem;/* border-top: 1px solid var(--Neutral-100, #f0f0f0); */} .tabela-solucoes .tabela-linha:first-child .col-recurso, .tabela-solucoes .tabela-linha:first-child .col-lytex, .tabela-solucoes .tabela-linha:first-child .col-concorrente {border-top: none;} .tabela-solucoes .tabela-linha .col-recurso {padding: 1rem 10px 1rem 1rem;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;color: var(--Alfa-Oxford-90, rgba(12, 35, 95, 0.9));border-top: 2px solid #00000012;margin-right: 12px;} .tabela-solucoes .tabela-linha .col-lytex {background: var(--Blue_Primary-900);display: flex;justify-content: center;align-items: center;height: 100%;border-top: 2px solid #ffffff26;/* border-left: 6px solid; */} .tabela-solucoes .tabela-linha .col-concorrente {margin-left: 12px;display: flex;justify-content: center;align-items: center;border-top: 2px solid #00000012;height: 100%;} .tabela-solucoes .check {display: inline-flex;align-items: center;justify-content: center;width: 26px;height: 26px;border-radius: 50%;background: var(--Brand-Color---Secundary-Green-400);color: #000000;font-size: 16px;font-weight: bold;} .tabela-solucoes .duvida {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 50%;color: var(--wp--preset--color--cyan-bluish-gray);font-size: 32px;background-color: var(--Blue_Primary-50);} .tabela-solucoes .tabela-linha:last-child .col-lytex {border-radius: 0 0 1rem 1rem;} @media (max-width: 767px) { .tabela-solucoes {padding: 4rem 0;} .tabela-solucoes .cabecalho h2 {font-size: 1.5rem;} .tabela-solucoes .tabela-header, .tabela-solucoes .tabela-linha {grid-template-columns: 56% 22% 22%;} .tabela-solucoes .tabela-header {padding: 0px 10px;} .tabela-solucoes .tabela-header .col-lytex .logo{width:100%} .tabela-solucoes .tabela-linha {padding: 0 10px;} .tabela-solucoes .tabela-linha .col-recurso {font-size: 0.85rem;padding: 8px;margin: 0;width: 100%;} .tabela-solucoes .tabela-linha .col-concorrente{margin: 0;} } /* ========================================= CSS das landing pages (demais seções) ========================================= */ /* ===== Landing page: juridico (demais seções) ===== */ /* ========================================= Benefícios — "Chega de cobrar clientes mandando dados bancários!" ========================================= */ .beneficios-juridico { padding: 7rem 0; background-color: var(--color-white); overflow: hidden; } .beneficios-juridico__inner { display: flex; align-items: center; justify-content: space-between; gap: 4rem; } .beneficios-juridico__content { max-width: 51%; flex-shrink: 0; } .beneficios-juridico__content h2 { font-weight: 700; line-height: 130%; margin: 0 0 2.5rem; } .beneficios-juridico__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; } .beneficios-juridico__item { border: 1px solid var(--Blue_Primary-100); border-radius: 12px; padding: 1.5rem; } .beneficios-juridico__item i { display: block; color: var(--Blue_Primary-600); font-size: 28px; margin-bottom: 1rem; } .beneficios-juridico__item p { margin: 0; font-size: 14px; line-height: 150%; color: var(--Alfa-Oxford-75, #0C235FBF); } .beneficios-juridico .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } .beneficios-juridico__media { flex: 1; display: flex; justify-content: center; } .beneficios-juridico__img { max-width: 100%; height: auto; } @media (max-width: 1000px) { .beneficios-juridico__inner { gap: 2rem; } } @media (max-width: 768px) { .beneficios-juridico__inner { flex-direction: column; } .beneficios-juridico__content { max-width: 100%; } .beneficios-juridico__content h2 { text-align: center; } .beneficios-juridico__grid { grid-template-columns: 1fr; } .beneficios-juridico .btn_primary { width: 100%; justify-content: center; } .beneficios-juridico__media { order: -1; margin-bottom: 2rem; } } @media (max-width: 768px) { .hero-juridico { display: flex; flex-direction: column; padding: 3rem 0 0; } .hero-juridico__consulte { display: none; } /* Bloco de texto (tag, título, tags, botão, "0") */ .hero-juridico__top { order: 1; } .hero-juridico__top h1 { max-width: 100%; text-align: center; } .hero-juridico span.elemento-02 { font-size: 13px; margin: 0 auto; display: flex; max-width: fit-content; } .hero-juridico__tags { flex-direction: column; align-items: center; gap: 0.85rem; font-size: 15px; max-width: 100%; } .hero-juridico .btn_primary { width: 100%; justify-content: center; margin: 0 auto; display: block; max-width: fit-content; } .hero-juridico__zero { flex-wrap: wrap; justify-content: center; text-align: left; display: none; } /* Selo circular: sai da posição absoluta e entra no fluxo, logo abaixo do bloco de texto e acima da foto */ .hero-juridico__badge { order: 2; position: relative; top: auto; left: auto; margin: 2.5rem 0 0 2rem; } .hero-juridico__badge::after { top: 100%; right: auto; left: 30%; width: 1px; height: 2.5rem; background: rgba(255, 255, 255, 0.5); } .hero-juridico__image-wrap {height: 100%;background-position: 80% -17px!important;} .hero-juridico__cards { order: 4; margin-top: 16rem; } .hero-juridico__cards-list { flex-wrap: nowrap; transition: transform 0.4s ease; gap: 0; } .hero-juridico__card { flex: 0 0 100%; } .hero-juridico__dots { display: flex; justify-content: center; gap: 0.5rem; margin: -1rem 0 2rem; } } /* ========================================= Recursos adicionais — "automatizar o seu escritório" ========================================= */ .recursos-juridico { background: var(--Blue_Primary-50); padding: 6rem 0; } .recursos-juridico__title { text-align: center; max-width: 720px; margin: 0 auto 3rem; } .recursos-juridico__title .destaque { color: var(--Blue_Primary-600); } .recursos-juridico__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 3rem; } .recursos-juridico__card { background: var(--color-white); border-radius: 16px; padding: 1.25rem; } .recursos-juridico__img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 1.25rem; display: block; } .recursos-juridico__card h3 { color: var(--Blue_Primary-600); margin: 0 0 0.5rem; font-size: 16px; } .recursos-juridico__card p { font-size: 14px; } .recursos-juridico .btn_primary { display: flex; width: fit-content; margin: 0 auto; text-transform: uppercase; } @media (max-width: 1000px) { .recursos-juridico__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .recursos-juridico__grid { grid-template-columns: 1fr; } } /*Slide*/ .recursos-juridico__grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;} .recursos-juridico__controls {display: none;} @media (max-width: 767px) { .recursos-juridico__slider { position: relative; width: 100%;} .recursos-juridico__grid {display: flex;gap: 16px; width: 100%;overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;scroll-behavior: smooth;overscroll-behavior-x: contain;-webkit-overflow-scrolling: touch;scrollbar-width: none;} .recursos-juridico__grid::-webkit-scrollbar {display: none;} .recursos-juridico__card {flex: 0 0 100%;min-width: 0;scroll-snap-align: start;scroll-snap-stop: always;} .recursos-juridico__controls {display: flex;align-items: center;justify-content: center;gap: 16px;margin-top: 24px; margin-bottom: 15px} .recursos-juridico__arrow {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;border: 1px solid #0d52ff;border-radius: 50%;background: transparent;color: #0d52ff;font-size: 30px;line-height: 1;cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;} .recursos-juridico__arrow:hover, .recursos-juridico__arrow:focus-visible {background-color: #0d52ff;color: #ffffff;} .recursos-juridico__arrow:focus-visible {outline: 3px solid rgba(13, 82, 255, 0.3);outline-offset: 3px;} .recursos-juridico__arrow:disabled {opacity: 0.35; cursor: not-allowed;} .recursos-juridico__dots {display: flex;align-items: center;justify-content: center;gap: 8px;} .recursos-juridico__dot {width: 10px;height: 10px;padding: 0;border: 0;border-radius: 50%;background-color: #c7d3ef;cursor: pointer;transition: width 0.2s ease, border-radius 0.2s ease, background-color 0.2s ease;} .recursos-juridico__dot.is-active {width: 24px; border-radius: 999px; background-color: #0d52ff;} } /* ========================================= Portal do Cliente — "Tudo em um só lugar para quem te contratou." ========================================= */ .portal-juridico { position: relative; background: var(--Blue_Primary-50); padding: 5rem 0 6rem; overflow: hidden; } .portal-juridico__bg { position: absolute; top: 0; left: 0; right: 0; height: 34rem; background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%); } .portal-juridico__inner { position: relative; z-index: 1; } .portal-juridico h2 { color: var(--color-white); text-align: center; max-width: 720px; margin: 0 auto; } .portal-juridico__subtitle { color: var(--color-white); text-align: center; opacity: 0.8; margin: 0.75rem 0 0; } .portal-juridico__screenshot { margin: 3rem auto 4rem; max-width: 1000px; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(9, 20, 66, 0.45); } .portal-juridico__img { display: block; width: 100%; height: auto; } .portal-juridico__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; } .portal-juridico__card { border-radius: 8px; padding: 14px; text-align: center; border: 1px solid var(--Blue_Primary-200); } .portal-juridico__card-inner { display: flex; flex-direction: column; align-items: center; background: #fff; height: 100%; padding: 38px; border-radius: 8px; transition: background-color 0.25s ease; } .portal-juridico__card-inner:hover { background: var(--Blue_Primary-600); } .portal-juridico__card-inner:hover .portal-juridico__icon { background: rgba(255, 255, 255, 0.15); } .portal-juridico__card-inner:hover .portal-juridico__icon i, .portal-juridico__card-inner:hover h3, .portal-juridico__card-inner:hover p, .portal-juridico__card-inner:hover p strong { color: var(--color-white); } .portal-juridico__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border-radius: 12px; background: var(--Blue_Primary-50); } .portal-juridico__icon i { color: var(--Blue_Primary-600); font-size: 24px; } .portal-juridico__card h3 { margin: 0 0 0.5rem; font-size: 16px; color: var(--Blue_Primary-900); } .portal-juridico__card p { margin: 0; font-size: 14px; line-height: 150%; color: var(--Color-3, #0C235F80); } .portal-juridico .btn_primary { display: flex; width: fit-content; margin: 0 auto; text-transform: uppercase; } @media (max-width: 1000px) { .portal-juridico__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .portal-juridico__bg { height: 23rem; } .portal-juridico__grid { grid-template-columns: 1fr; } } /* ========================================= Split de Pagamentos — "Trabalha com advogados associados?" ========================================= */ .split-juridico { background: var(--color-white); padding: 6rem 0; overflow-x: hidden; } .split-juridico__inner { display: flex; align-items: center; justify-content: space-between; gap: 5rem; } .split-juridico__content { max-width: 52%; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px; justify-content: space-around; } .split-juridico__title { margin: 0; } .split-juridico__title span { display: block; } .split-juridico__title-blue { color: var(--Blue_Primary-600); } .split-juridico__title-dark { color: var(--Blue_Primary-950); } .split-juridico__subtitle { color: var(--Alfa-Oxford-75, #0C235FBF); margin: 0!important; } .split-juridico__steps { display: flex; align-items: center; } .split-juridico__step { flex: 1; border: 1px solid var(--Blue_Primary-100); border-radius: 6px; padding: 12px; display: flex; align-items: center; height: 78px; gap: 10px; background: var(--Blue_Primary-50); } .split-juridico__step--active { border-color: var(--Blue_Primary-600); } .split-juridico__step-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--Blue_Primary-50); } .split-juridico__step-icon i { color: var(--Blue_Primary-600); font-size: 28px; } .split-juridico__step p { margin: 0; font-size: 10px; line-height: 140%; color: var(--Alfa-Oxford-50, #0C235F80); } .split-juridico__step-arrow { flex-shrink: 0; color: var(--Blue_Primary-300); font-size: 18px; } .split-juridico__list { list-style: none; display: flex; flex-wrap: wrap; gap: 3.5rem; padding: 0; font-size: 14px; } .split-juridico__list li { display: flex; align-items: center; gap: 0.35rem; color: var(--Blue_Primary-900); } .split-juridico__list li i { font-size: 20px; } .split-juridico .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } .split-juridico__media { position: relative; flex: 0 0 40%; aspect-ratio: 589 / 561; } .split-juridico__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; opacity: 0; transition: opacity 600ms ease-in-out; } .split-juridico__img:first-child, .split-juridico__img.is-active { opacity: 1; } .split-juridico__badge { position: absolute; z-index: 1; top: 38%; left: -3rem; width: 112px; aspect-ratio: 1; } @media (max-width: 1000px) { .split-juridico__inner { gap: 2rem; } .split-juridico__badge { width: 90px; left: -1rem; } } @media (max-width: 768px) { .split-juridico__inner { flex-direction: column; } .split-juridico__content { max-width: 100%; } .split-juridico__title, .split-juridico__subtitle { text-align: center; } .split-juridico__steps { flex-direction: column; align-items: stretch; } .split-juridico__step-arrow { align-self: center; transform: rotate(90deg); } .split-juridico__list { justify-content: center; flex-wrap: nowrap; gap: 4px; } .split-juridico__list li { width: 32%; display: inline-flex; line-height: 16px; align-items: flex-start; font-size: 10px; } .split-juridico .btn_primary { margin: 0 auto; } .split-juridico__media { flex-basis: auto; width: 100%; order: -1; margin-bottom: 3rem; } .split-juridico__badge { right: -26px; left: auto; } } /* ========================================= Modelos de cobrança — "Seja qual for a sua juridico..." ========================================= */ .modelos-juridico { background: var(--color-white); padding: 6rem 0; } .modelos-juridico__box { background: var(--Blue_Primary-50); border-radius: 14px; padding: 4rem; text-align: center; width: 90%; margin: 0 auto; } .modelos-juridico__title { max-width: 640px; margin: 0 auto 2.5rem; color: var(--Blue_Primary-950); } .modelos-juridico__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-bottom: 2.5rem; text-align: left; } .modelos-juridico__card { background: var(--color-white); border-radius: 12px; padding: 28px; display: flex; gap: 27px; align-items: center; } .modelos-juridico__icon i { color: var(--Blue_Primary-600); font-size: 38px; } .modelos-juridico__card h3 { margin: 0 0 0.35rem; font-size: 16px; color: var(--Blue_Primary-600); } .modelos-juridico__card p { margin: 0; font-size: 14px; line-height: 150%; color: var(--Alfa-Oxford-75, #0C235FBF); } .modelos-juridico .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } @media (max-width: 768px) { .modelos-juridico { padding: 3rem 0; } .modelos-juridico .container { margin: 0; padding: 0; } .modelos-juridico__box { padding: 2rem 1.25rem; width: 100%; border-radius: 0; } .modelos-juridico__grid { grid-template-columns: 1fr; gap: 10px; } .modelos-juridico__card { padding: 10px 16px; gap: 20px; } .modelos-juridico__icon i { font-size: 25px; } .modelos-juridico__card h3 { font-size: 13px; } .modelos-juridico__card p { font-size: 12px; } .modelos-juridico .btn_primary { width: 100%; justify-content: center; } } /* ========================================= Depoimentos — "Inspire-se com resultados de quem simplificou..." (cópia do bloco lytex-depoimentos, escopada para a landing de juridico) ========================================= */ .juridico-depoimentos { background: var(--Blue_Primary-50); padding: 5rem 0; } .juridico-depoimentos .conteudo { display: flex; justify-content: space-between; } .juridico-depoimentos .col-1 { display: flex; flex-direction: column; gap: 22px; color: var(--Blue_Primary-950); width: 62%; } .juridico-depoimentos .col-2 { position: relative; border-radius: 10rem 5rem; overflow: hidden; background: rgb(221 226 240); width: 29%; aspect-ratio: 4/5; text-align: center; } .juridico-depoimentos span.elemento-01 { margin: 0; } .juridico-depoimentos .depoimentos { position: relative; margin-top: 34px; } .juridico-depoimentos .depoimento-item { display: none; flex-direction: column; gap: 12px; position: relative; padding: 3rem 3rem 0; } .juridico-depoimentos .depoimento-item.is-active { display: flex; } .juridico-depoimentos .aspas { line-height: 1; margin-bottom: -8px; display: block; height: 79px; width: 103px; background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; top: 0; left: 0; z-index: 0; } .juridico-depoimentos .aspas i { display: none; } .juridico-depoimentos blockquote { z-index: 1; color: var(--Blue_Primary-950); margin: 0; padding: 0; font-weight: 400; font-size: 20px; line-height: 150%; letter-spacing: 0%; } .juridico-depoimentos .autor { margin-top: 12px; } .juridico-depoimentos .autor strong { display: block; font-size: 14px; font-weight: 600; color: var(--Blue_Primary-600, #2563eb); } .juridico-depoimentos .dots { display: flex; gap: 8px; margin-top: 24px; align-items: center; } .juridico-depoimentos .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--Blue_Primary-200, #bfdbfe); border: none; padding: 0; cursor: pointer; transition: background 300ms, width 300ms; } .juridico-depoimentos .dot.is-active { background: var(--Blue_Primary-600, #2563eb); width: 28px; border-radius: 999px; } .juridico-depoimentos .depoimento-foto { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 450ms ease; } .juridico-depoimentos .depoimento-foto.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .juridico-depoimentos .depoimento-foto img { height: 100%; object-fit: cover; width: 100%; } .juridico-depoimentos .btn-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border: 1px solid rgba(24, 76, 182, 0.18); border-radius: 999px; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 28px rgba(9, 31, 90, 0.26), inset 0 0 0 5px rgba(255, 255, 255, 0.8); transition: transform 200ms ease, box-shadow 200ms ease; } .juridico-depoimentos .btn-video:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 14px 32px rgba(9, 31, 90, 0.3), inset 0 0 0 5px rgba(255, 255, 255, 0.8); } .juridico-depoimentos .btn-video:focus-visible { outline: 3px solid var(--Blue_Primary-950); outline-offset: 4px; } .juridico-depoimentos .btn-video i { font-size: 30px; color: var(--Blue_Primary-600, #2563eb); } .juridico-depoimentos .modal-video { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .juridico-depoimentos .modal-video[hidden] { display: none; } .juridico-depoimentos .modal-video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); } .juridico-depoimentos .modal-video-content { position: relative; z-index: 1; width: 90%; max-width: 900px; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; } .juridico-depoimentos .modal-video-player { width: 100%; height: 100%; } .juridico-depoimentos .modal-video-player iframe, .juridico-depoimentos .modal-video-player video { width: 100%; height: 100%; border: none; display: block; } .juridico-depoimentos .modal-video-close { position: absolute; top: -44px; right: 0; background: transparent; border: none; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; padding: 4px; } /* Responsivo ----------------------------------------------- */ @media (max-width: 768px) { .juridico-depoimentos { padding: 3rem 0; } .juridico-depoimentos .conteudo { flex-direction: column; gap: 2.5rem; } /* Permite intercalar a imagem entre o texto e os epoimentos no mobile. */ .juridico-depoimentos .col-1 { display: contents; } .juridico-depoimentos .col-2 { order: 4; width: 100%; min-height: 320px; position: relative; } .juridico-depoimentos .elemento-01 { order: 1; } .juridico-depoimentos .col-1 h2 { order: 2; } .juridico-depoimentos .col-1 > p { order: 3; } .juridico-depoimentos .depoimentos { order: 5; } .juridico-depoimentos .depoimento-item { padding: 3rem 0 0 3rem; } .juridico-depoimentos .dots { order: 6; justify-content: center; } .juridico-depoimentos .col-1 h2 { font-size: 28px; } .juridico-depoimentos blockquote { font-size: 16px; } } /* Stats — cópia de .stat-content do bloco lytex-seus-pagamentos-seguros */ .juridico-depoimentos__stats { display: flex; gap: 28px; max-width: 38rem; margin: 8rem auto; } .juridico-depoimentos .stat-card { border: 1px solid var(--Blue_Primary-100); border-radius: 8px; padding: 8px; min-height: 120px; flex: 1; } .juridico-depoimentos .stat-content { display: flex; align-items: center; gap: 18px; background: #fff; min-height: 102px; padding: 12px; inset: 0; justify-content: center; } .juridico-depoimentos .stat-content .plus-icon { color: var(--Blue_Primary-600); font-size: 34px; line-height: 100%; padding: 0px 0 7px; } .juridico-depoimentos .stat-content strong { color: var(--Blue_Primary-900); white-space: nowrap; font-weight: 600; font-size: 32px; line-height: 150%; letter-spacing: 0%; } .juridico-depoimentos .stat-content span { color: #7d889f; font-weight: 400; font-size: 14px; line-height: 150%; letter-spacing: 0%; } @media (max-width: 600px) { .juridico-depoimentos__stats { flex-direction: column; gap: 16px; margin-top: 24px; } } /* Segurança nível bancário */ .juridico-depoimentos__seguranca { margin-top: 64px; text-align: center; } .juridico-depoimentos__seguranca-title { margin: 0 auto 3rem; color: var(--Blue_Primary-950); } .juridico-depoimentos__seguranca-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .juridico-depoimentos__seguranca-item { padding: 0 2.5rem; border-left: 1px solid var(--Blue_Primary-100); } .juridico-depoimentos__seguranca-item:first-child { border-left: none; } .juridico-depoimentos__seguranca-icon { display: block; width: 96px; height: 96px; margin: 0 auto 1.5rem; background: #fff;padding: 15px 0px;border-radius: 6px;outline-offset: 7px; outline: 1px solid var(--Blue_Primary-100);} .juridico-depoimentos__seguranca-item h3 { margin: 0 0 0.75rem; font-size: 18px; color: var(--Blue_Primary-950); } .juridico-depoimentos__seguranca-item p { margin: 0; font-size: 14px; line-height: 150%; color: var(--Alfa-Oxford-75, #0C235FBF); } @media (max-width: 768px) { .juridico-depoimentos__seguranca { margin-top: 3rem; } .juridico-depoimentos__seguranca-grid { grid-template-columns: 1fr; gap: 2.5rem; } .juridico-depoimentos__seguranca-item { padding: 0; border-left: none; } } /* ========================================= Perguntas Frequentes — cópia do bloco lytex-perguntas-frequentes (mesmo fundo da seção anterior, .juridico-depoimentos) ========================================= */ .juridico-perguntas-frequentes { background: var(--Blue_Primary-50); padding: 4rem 0; } .juridico-perguntas-frequentes .conteudo { display: flex; justify-content: center; gap: 4rem; } .juridico-perguntas-frequentes .col-1 { align-items: flex-start; position: relative; color: var(--Blue_Primary-950); display: flex; flex-direction: column; gap: 1.5rem; width: 40%; } .juridico-perguntas-frequentes .col-1 .elemento-01 { margin: 0; } .juridico-perguntas-frequentes h2 { letter-spacing: -4%; } .juridico-perguntas-frequentes .pf-split { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin: 0 0 20px 0; } .juridico-perguntas-frequentes .pf-split__item { display: flex; align-items: center; gap: 2rem; } .juridico-perguntas-frequentes .pf-split__icon { width: 48px; height: 48px; border-radius: 17px 8px; background: var(--color-white); color: var(--Blue_Primary-600); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } .juridico-perguntas-frequentes .pf-split__text { display: flex; flex-direction: column; gap: .25rem; } .juridico-perguntas-frequentes .pf-split__text h4 { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; color: var(--Blue_Primary-950); } .juridico-perguntas-frequentes .btn_primary { width: fit-content; } .juridico-perguntas-frequentes .col-2 { width: 60%; } .juridico-perguntas-frequentes .pf-accordion { width: 100%; border-top: 1px solid rgba(12, 35, 95, 0.12); margin-top: 4em; } .juridico-perguntas-frequentes .pf-accordion__item { border-bottom: 1px solid rgba(12, 35, 95, 0.12); padding: 1.5rem 0; } .juridico-perguntas-frequentes .pf-accordion__header { display: flex; justify-content: flex-start; gap: 1rem; align-items: center; color: var(--Blue_Primary-950); cursor: pointer; user-select: none; } .juridico-perguntas-frequentes .pf-accordion__header:focus-visible { outline: 2px solid var(--Blue_Primary-500); outline-offset: 4px; border-radius: 8px; } .juridico-perguntas-frequentes .pf-accordion__index { color: var(--Blue_Primary-500); font-weight: 600; font-size: 20px; line-height: 150%; letter-spacing: 0%; text-align: center; } .juridico-perguntas-frequentes .pf-accordion__title { margin: 0; color: var(--Blue_Primary-950); font-weight: 400; font-size: 16px; line-height: 150%; letter-spacing: 0%; width: 100%; } .juridico-perguntas-frequentes .pf-accordion__toggle { width: 25px; height: 22px; border: 2px solid var(--Blue_Primary-500); border-radius: 999px; background: transparent; position: relative; justify-self: end; transition: transform .25s ease, background-color .25s ease; } .juridico-perguntas-frequentes .pf-accordion__toggle::before, .juridico-perguntas-frequentes .pf-accordion__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--Blue_Primary-500); border-radius: 10px; transition: opacity .2s ease; } .juridico-perguntas-frequentes .pf-accordion__toggle::before { width: 12px; height: 2px; } .juridico-perguntas-frequentes .pf-accordion__toggle::after { width: 2px; height: 12px; } .juridico-perguntas-frequentes .pf-accordion__item.is-open .pf-accordion__toggle::after { opacity: 0; } .juridico-perguntas-frequentes .pf-accordion__content { padding-top: 0; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .38s ease, opacity .28s ease, padding-top .28s ease; } .juridico-perguntas-frequentes .pf-accordion__item.is-open .pf-accordion__content { padding-top: .8rem; opacity: 1; } .juridico-perguntas-frequentes .pf-accordion__content-inner { font-family: Plus Jakarta Sans; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); } .juridico-perguntas-frequentes .pf-accordion__content-inner > :first-child { margin-top: 0; } .juridico-perguntas-frequentes .pf-accordion__content-inner > :last-child { margin-bottom: 0; } .juridico-perguntas-frequentes .pf-accordion__empty { margin: 1rem 0 0; font-size: .95rem; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); } .juridico-perguntas-frequentes.somente_perguntas .conteudo { flex-direction: column; } .juridico-perguntas-frequentes.somente_perguntas .col-1 { width: 100%; } .juridico-perguntas-frequentes.somente_perguntas .col-2 { width: 100%; } .juridico-perguntas-frequentes.somente_perguntas .pf-accordion { margin: 0; } @media (max-width: 768px) { .juridico-perguntas-frequentes .pf-accordion { margin: 0; } .juridico-perguntas-frequentes .conteudo { flex-direction: column; } .juridico-perguntas-frequentes .col-1 { width: 100%; } .juridico-perguntas-frequentes .col-2 { width: 100%; } } /* ========================================= "Seu cliente contratou um advogado. Não um departamento de cobrança." ========================================= */ .juridico-automatize { position: relative; background-position: center, center, 32px 32px; padding: 6rem 0; overflow: hidden; background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, linear-gradient(164deg, var(--Blue_Primary-950) 46% 44%, #1141BE 80% 100%); } .juridico-automatize__inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .juridico-automatize__content { max-width: 50%; flex-shrink: 0; color: var(--color-white); } .juridico-automatize__icon { display: block; color: var(--color-white); font-size: 26px; margin-bottom: 1rem; } .juridico-automatize__title { margin: 0 0 1rem; color: var(--color-white); } .juridico-automatize__title span { display: block; } .juridico-automatize__subtitle { color: rgba(255, 255, 255, 0.7); margin: 0 0 2rem; } .juridico-automatize .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } .juridico-automatize__media { flex: 1; display: flex; justify-content: center; } .juridico-automatize__img { max-width: 100%; height: auto; } @media (max-width: 768px) { .juridico-automatize { padding: 3rem 0; } .juridico-automatize__inner { flex-direction: column; text-align: center; } .juridico-automatize__content { max-width: 100%; } .juridico-automatize__icon { margin-left: auto; margin-right: auto; } .juridico-automatize .btn_primary { margin: 0 auto; } .juridico-automatize__media { order: -1; margin-bottom: 2rem; } } .juridico-automatize .site-footer { margin-top: 10rem; } /* ========================================= Footer da LP Provedor (CTA + rodapé) ========================================= */ .provedor-footer {position: relative;padding: 6rem 0;overflow: hidden;background: linear-gradient(0deg, rgb(17 32 90) 59%, rgb(17 65 190 / 0%) 90%), url(landing-pages/provedor/provedor-session-footer.webp) center center;background-repeat: no-repeat;background-position: top center;} .provedor-footer__inner { display: flex; align-items: center; gap: 3rem; } .provedor-footer__content { max-width: 50%; flex-shrink: 0; color: var(--color-white); } .provedor-footer__icon { display: block; color: var(--color-white); font-size: 26px; margin-bottom: 1rem; } .provedor-footer__title { margin: 0 0 1rem; color: var(--color-white); } .provedor-footer__title span { display: block; } .provedor-footer__subtitle { color: rgba(255, 255, 255, 0.7); margin: 0 0 2rem; } .provedor-footer .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } @media (max-width: 768px) { .provedor-footer { padding: 3rem 0; background: linear-gradient(164deg, rgba(17, 32, 90, 0.92) 0%, rgba(17, 65, 190, 0.82) 100%), url(landing-pages/provedor/provedor-session-footer-moblide.webp) center center / cover no-repeat fixed; } .provedor-footer__inner { flex-direction: column; text-align: center; } .provedor-footer__content { max-width: 100%; } .provedor-footer__icon { margin-left: auto; margin-right: auto; } .provedor-footer .btn_primary { margin: 0 auto; } } .provedor-footer .site-footer { margin-top: 10rem; } /* Modal do formulário (abre a partir dos botões .btn_primary) -------------- */ .modal-form-juridico { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-form-juridico[hidden] { display: none; } .modal-form-juridico-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); opacity: 0; transition: opacity 400ms ease; } .modal-form-juridico-content { position: relative; z-index: 1; width: 100%; max-width: 860px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: 50px; opacity: 0; transform: scale(0.9); transition: opacity 400ms ease, transform 400ms ease; } .modal-form-juridico.is-visible .modal-form-juridico-overlay { opacity: 1; } .modal-form-juridico.is-visible .modal-form-juridico-content { opacity: 1; transform: scale(1); } .modal-form-juridico-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--Blue_Primary-50); border: none; border-radius: 50%; color: var(--Blue_Primary-950); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; transition: background 200ms ease, color 200ms ease; } .modal-form-juridico-close:hover { background: var(--Blue_Primary-100); } .modal-form-juridico-inner { display: flex; align-items: stretch; gap: 32px; } /* Coluna da imagem ---------------------------------------------------------- */ .modal-form-juridico-media { position: relative; flex: 0 0 48%; min-height: 460px; border-radius: 10px; overflow: hidden; background: var(--Blue_Primary-50); } .modal-form-juridico-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .modal-form-juridico-media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(230, 238, 250, 0.95) 0%, rgba(230, 238, 250, 0.65) 32%, rgba(230, 238, 250, 0) 55%); } .modal-form-juridico-media-text { position: relative; z-index: 1; padding: 32px 28px 0; } .modal-form-juridico-media-text h3 { margin: 0 0 12px; font-size: 1.4rem; line-height: 1.35; font-weight: 700; color: var(--Blue_Primary-950); } .modal-form-juridico-media-text h3 span { color: var(--Blue_Primary-600); } .modal-form-juridico-media-text p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--Alfa-Oxford-75); } /* Coluna do formulário ------------------------------------------------------ */ .modal-form-juridico-body { flex: 1; min-width: 0; } .modal-form-juridico-body ._form_44_ { width: 100%; } .modal-form-juridico-body ._form-content { display: flex; flex-direction: column; gap: 6px; } .modal-form-juridico-body ._form_element { display: flex; flex-direction: column; gap: 1px; } .modal-form-juridico-body ._form-label { font-size: 0.8rem; font-weight: 500; color: var(--Blue_Primary-950); } .modal-form-juridico-body ._form-label .field-required { color: var(--Blue_Primary-600); } .modal-form-juridico-body ._field-wrapper { position: relative; } .modal-form-juridico-body input[type="text"], .modal-form-juridico-body select { width: 100%; box-sizing: border-box; appearance: none; border: none; border-radius: 6px; background-color: var(--Blue_Primary-100); padding: 12px 16px; font-family: var(--font-base); font-size: 0.9rem; color: var(--Blue_Primary-950); } .modal-form-juridico-body input[type="text"]::placeholder { color: rgba(17, 32, 90, 0.45); } .modal-form-juridico-body input[type="text"]:focus, .modal-form-juridico-body select:focus { outline: 2px solid var(--Blue_Primary-600); outline-offset: 1px; } .modal-form-juridico-body input[type="text"]._has_error, .modal-form-juridico-body select._has_error { outline: 2px solid #e0433c; } .modal-form-juridico-body select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2311205A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } /* Ícones nos campos de e-mail e telefone */ .modal-form-juridico-body ._field_email input[type="text"], .modal-form-juridico-body ._x70906323 input[type="text"] { padding-left: 44px; background-repeat: no-repeat; background-position: 16px center; background-size: 18px 18px; } .modal-form-juridico-body ._field_email input[type="text"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 256 256' fill='%2311205A'%3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-19.8,16L128,133.15,51.8,64ZM40,184V74.19l82.59,74.74a8,8,0,0,0,10.82,0L216,74.19V184Z'/%3E%3C/svg%3E"); } .modal-form-juridico-body ._x70906323 input[type="text"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 256 256' fill='%2311205A'%3E%3Cpath d='M222.37,158.46l-47.24-21.29a14.19,14.19,0,0,0-13.18,1.22c-.06.05-.14.09-.19.14l-25,20.53a1.36,1.36,0,0,1-1.36.29c-19.24-9.44-35.94-26-45.46-45.32a1.34,1.34,0,0,1,.29-1.37L110.68,87c.05-.06.09-.13.14-.19a14.16,14.16,0,0,0,1.24-13.17L92.83,26.37a14.23,14.23,0,0,0-14.7-8.6A54.24,54.24,0,0,0,32,71.79C32,159.29,96.71,224,184.21,224a54.24,54.24,0,0,0,53.62-46.13A14.26,14.26,0,0,0,222.37,158.46Z'/%3E%3C/svg%3E"); } .modal-form-juridico-body ._button-wrapper { margin-top: 6px; } .modal-form-juridico-body ._submit { width: 100%; border: none; border-radius: 10px; background: var(--Blue_Primary-600); color: #fff; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 16px; cursor: pointer; transition: background 200ms ease; } .modal-form-juridico-body ._submit:hover { background: var(--Blue_Primary-800); } .modal-form-juridico-body ._submit.processing { opacity: 0.7; cursor: default; } .modal-form-juridico-body ._clear-element { display: none; } .modal-form-juridico-body ._form-thank-you { text-align: center; color: var(--Blue_Primary-950); font-size: 0.95rem; } .modal-form-juridico-body ._error, .modal-form-juridico-body ._error-inner { font-size: 0.75rem; color: #e0433c; margin-top: 4px; } .modal-form-juridico-body ._error-arrow { display: none; } @media (max-width: 768px) { .modal-form-juridico-close { top: 12px; right: 12px; } .modal-form-juridico-content { padding: 32px 24px; } .modal-form-juridico-inner { flex-direction: column; } .modal-form-juridico-media { flex: 0 0 auto; min-height: 220px; } } /* ===== Landing page: provedor (demais seções) ===== */ /* ========================================= Cobrança (baseado no bloco link-pagamentos) ========================================= */ .cobranca-provedor { width: 100%; padding: 10rem 0; background: var(--Blue_Primary-50); } .cobranca-provedor .conteudo { display: flex; align-items: center; gap: 4rem; } .cobranca-provedor .conteudo .col-1 { display: flex; flex-direction: column; gap: 1.5rem; width: 50%; } .cobranca-provedor .conteudo .col-1 h2 { margin: 0; color: var(--Blue_Primary-600); } .cobranca-provedor .conteudo .col-1 p { margin: 0; } .cobranca-provedor .conteudo .col-2 { width: 44%; } .cobranca-provedor .conteudo .col-2 img { display: block; width: 100%; height: auto; } .cobranca-provedor .grid-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; } .cobranca-provedor .feature-item { display: flex; gap: 0.5rem; background: var(--color-white); border-radius: 12px; padding: 1rem 1.25rem; flex-direction: column; } .cobranca-provedor .feature-item i { font-size: 1.25rem; color: var(--Blue_Primary-600); } .cobranca-provedor .feature-item span { font-size: 14px; color: var(--Blue_Primary-950); } .cobranca-provedor .feature-item span strong { font-weight: 600; } .cobranca-provedor .btn_primary { width: fit-content; text-transform: uppercase; } @media (max-width: 900px) { .cobranca-provedor .conteudo .col-1 { width: 55%; } .cobranca-provedor .conteudo .col-2 { width: 40%; } } @media (max-width: 768px) { .cobranca-provedor { padding: 4rem 0; } .cobranca-provedor .conteudo { flex-direction: column; gap: 2.5rem; } .cobranca-provedor .conteudo .col-1 { order: 2; width: 100%; } .cobranca-provedor .conteudo .col-2 { order: 1; width: 100%; max-width: 360px; margin: 0 auto; } .cobranca-provedor .grid-features { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .cobranca-provedor .feature-item { padding: 0.875rem 1rem; } .cobranca-provedor .btn_primary { width: 100%; justify-content: center; } } @media (max-width: 480px) { .cobranca-provedor .grid-features { grid-template-columns: 1fr; } } /* ========================================= Integração ERP ========================================= */ .integracao-provedor { width: 100%; padding: 6rem 0; position: relative; overflow: hidden; background: var(--color-white); } .integracao-provedor .container { position: relative; z-index: 3; } .integracao-provedor .fundo { content: ""; display: block; width: 110%; aspect-ratio: 1; position: absolute; top: 6rem; left: -5%; border-radius: 50%; z-index: 0; } .integracao-provedor .fundo div { content: ""; display: block; width: 82%; aspect-ratio: 1; position: absolute; top: 13%; left: 9%; border-radius: 50%; } .integracao-provedor .fundo, .integracao-provedor .fundo div { background-color: #4f7ec31a; } .integracao-provedor .conteudo { display: flex; align-items: center; gap: 4rem; } .integracao-provedor .col-1 { display: flex; flex-direction: column; gap: 1.5rem; width: 54%; } .integracao-provedor .col-1 h2 { margin: 0; } .integracao-provedor .col-1 h2 span { display: block; } .integracao-provedor__title-blue { color: var(--Blue_Primary-600); } .integracao-provedor__title-dark { color: var(--Blue_Primary-950); } .integracao-provedor .col-1 > p { margin: 0; } .integracao-provedor .grid-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: 100%; } .integracao-provedor .passo-item { display: flex; flex-direction: column; gap: 0.5rem; background: var(--color-white); border: 1px solid var(--Blue_Primary-600); border-radius: 12px; padding: 1rem 1.25rem; } .integracao-provedor .passo-numero { font-size: 1.25rem; font-weight: 800; color: var(--Blue_Primary-600); } .integracao-provedor .passo-item i { font-size: 1.25rem; color: var(--Blue_Primary-600); } .integracao-provedor .passo-item p { margin: 0; font-size: 13px; color: var(--Blue_Primary-950); } .integracao-provedor__nota { margin: 0; font-size: 14px; } .integracao-provedor .btn_primary { width: fit-content; text-transform: uppercase; } .integracao-provedor .col-2 { position: relative; width: 46%; display: flex; justify-content: center; } .integracao-provedor__backdrop { position: absolute; top: -1.5rem; right: 6%; width: 78%; aspect-ratio: 1; background: var(--Blue_Primary-600); border-radius: 2.5rem; z-index: 0; } .integracao-provedor__img { position: relative; z-index: 1; display: block; width: 88%; height: auto; border-radius: 1rem; box-shadow: 0 16px 48px rgba(0,0,0,.12); } @media (max-width: 1200px) { .integracao-provedor .col-1 { width: 58%; } } @media (max-width: 900px) { .integracao-provedor .conteudo { flex-direction: column; gap: 3rem; } .integracao-provedor .col-1 { order: 2; width: 100%; } .integracao-provedor .col-2 { order: 1; width: 100%; max-width: 300px; margin: 0 auto; } .integracao-provedor .fundo { top: 2rem; } } @media (max-width: 640px) { .integracao-provedor { padding: 4rem 0; } .integracao-provedor .grid-passos { display: block; width: 67%; margin: 0 auto; } .integracao-provedor .passo-item {display: block; margin-bottom: 30px; padding: 2rem 2.25rem;} .integracao-provedor .btn_primary { width: 100%; justify-content: center; } .integracao-provedor .fundo { width: 300%; left: -100%; top: 18rem; } .integracao-provedor .fundo div { top: 12rem; } .integracao-provedor .col-1 h2 span {display: block;text-align: center;} .integracao-provedor .col-1 > p {margin: 0;text-align: center;} } /* ========================================= Recursos (baseado no bloco link-agilize-pagamentos) ========================================= */ .recursos-provedor { width: 100%; padding: 6rem 0; background: var(--color-white); } .recursos-provedor .conteudo { display: flex; flex-direction: column; align-items: center; gap: 3.5rem; } .recursos-provedor .conteudo h2 { text-align: center; max-width: 780px; margin: 0; } .recursos-provedor .conteudo h2 span { display: block; } .recursos-provedor__title-blue { color: var(--Blue_Primary-600); } .recursos-provedor__title-dark { color: var(--Blue_Primary-950); } .recursos-provedor__subtitle { margin: -2rem 0 0; text-align: center; } .recursos-provedor .grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; width: 100%; } .recursos-provedor .card-item { display: flex; flex-direction: column; gap: 0.75rem; } .recursos-provedor .card-item .icone { width: 52px; height: 52px; background: var(--Blue_Primary-50); border-radius: 16px 8px; display: flex; align-items: center; justify-content: center; } .recursos-provedor .card-item .icone i { font-size: 1.5rem; color: var(--Blue_Primary-500); } .recursos-provedor .card-item h3 { font-size: 16px; margin: 0; color: var(--Blue_Primary-900); } .recursos-provedor .card-item p { margin: 0; } @media (max-width: 991px) { .recursos-provedor .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } @media (max-width: 767px) { .recursos-provedor { padding: 4rem 0; } .recursos-provedor .conteudo h2 { font-size: 1.75rem; } .recursos-provedor__subtitle { margin-top: -1rem; } .recursos-provedor .grid-cards { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================= Portal do Assinante (topo: .imagem copiado do bloco portal-cliente) ========================================= */ .portal-provedor {position: relative;background: #fff;padding: 5rem 0 6rem;overflow: hidden;} .portal-provedor__bg { position: absolute; top: 0; left: 0; right: 0; height: 34rem; background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0200c4d9 0%, #1637c4 100%); } .portal-provedor__inner { position: relative; z-index: 1; } .portal-provedor h2 {color: var(--color-white);text-align: center;/* max-width: 720px; */margin: 0 auto;font-size: 40px;} .portal-provedor__subtitle {color: var(--color-white);text-align: center;opacity: 0.8;margin: 0.75rem 0 0;font-size: 30px;} /* .imagem — copiado de blocos/portal-cliente/portal-cliente.css */ .portal-provedor .imagem { margin: 3rem auto 4rem; text-align: center; max-width: 58rem; position: relative; } .portal-provedor .imagem img:first-child { max-width: 100%; width: 100%; height: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(9, 20, 66, 0.45); } .portal-provedor .imagem img:last-child { width: 112px; height: auto; margin: 0 auto; position: absolute; top: 27%; right: -6%; } .portal-provedor__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 0; } .portal-provedor__card {border-radius: 8px;/* padding: 14px; */text-align: center;border: 1px solid #d2d2d2;} .portal-provedor__card-inner {display: flex;flex-direction: column;align-items: center;background: #fff;height: 100%;padding: 18px 32px;border-radius: 8px;transition: background-color 0.25s ease;} .portal-provedor__card-inner:hover { background: var(--Blue_Primary-600); } .portal-provedor__card-inner:hover .portal-provedor__icon { background: rgba(255, 255, 255, 0.15); } .portal-provedor__card-inner:hover .portal-provedor__icon i, .portal-provedor__card-inner:hover h3, .portal-provedor__card-inner:hover p { color: var(--color-white); } .portal-provedor__icon {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;margin: 0 auto 0.25rem;border-radius: 12px;background: var(--Blue_Primary-50);} .portal-provedor__icon i { color: var(--Blue_Primary-600); font-size: 24px; } .portal-provedor__card h3 { margin: 0 0 0.5rem; font-size: 16px; color: var(--Blue_Primary-900); } .portal-provedor__card p { margin: 0; font-size: 14px; line-height: 150%; color: #0C235F80; } @media (max-width: 991px) { .portal-provedor__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .portal-provedor { padding: 4rem 0; } .portal-provedor__bg { height: 26rem; } .portal-provedor h2 { font-size: 1.75rem; } .portal-provedor .imagem { margin: 2rem auto 3rem; } .portal-provedor .imagem img:last-child { width: 84px; top: 22%; right: -2%; } .portal-provedor__grid { grid-template-columns: 1fr; gap: 1rem; } .portal-provedor__card-inner{padding: 50px} } /* ========================================= Segurança (inspirado no bloco lytex-seus-pagamentos-seguros) ========================================= */ .seguranca-provedor { width: 100%; padding: 6rem 0; background: var(--Blue_Primary-50); } .seguranca-provedor__title { text-align: center; margin: 0 0 2.5rem; color: var(--Blue_Primary-950); } .seguranca-provedor__title .destaque { color: var(--Blue_Primary-600); } .seguranca-provedor__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .seguranca-provedor__card { display: flex; align-items: center; gap: 1rem; background: var(--color-white); border: 1px solid var(--Blue_Primary-100); border-radius: 8px; padding: 1.25rem 1.5rem; min-height: 96px; } .seguranca-provedor__card img { max-width: 64px; max-height: 40px; width: auto; height: auto; flex-shrink: 0; } .seguranca-provedor__card > span { font-size: 14px; color: #7d889f; font-weight: 400; line-height: 150%; } .seguranca-provedor__card--stat { gap: 0.5rem; } .seguranca-provedor__plus { color: var(--Blue_Primary-600); font-size: 32px; font-weight: 700; line-height: 1; flex-shrink: 0; } .seguranca-provedor__card--stat strong { font-size: 32px; font-weight: 700; color: var(--Blue_Primary-950); white-space: nowrap; margin-right: 0.25rem; } @media (max-width: 1100px) { .seguranca-provedor__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .seguranca-provedor { padding: 4rem 0; } .seguranca-provedor__title { font-size: 1.5rem; } .seguranca-provedor__grid { grid-template-columns: 1fr; } } /* ===== Landing page: educacao (demais seções) ===== */ /* ========================================= Você abriu uma escola para ensinar (baseado no bloco link-pagamentos) ========================================= */ .beneficios-educacao { width: 100%; padding: 6rem 0; background: var(--Blue_Primary-50); } .beneficios-educacao .conteudo {display: flex;align-items: center;/* gap: 4rem; */justify-content: space-between;} .beneficios-educacao .conteudo .col-1 {display: flex;flex-direction: column;gap: 1.5rem;width: 48%;} .beneficios-educacao .conteudo .col-1 h2 { margin: 0; } .beneficios-educacao .conteudo .col-1 h2 span { display: block; } .beneficios-educacao__title-blue { color: var(--Blue_Primary-600); } .beneficios-educacao__title-dark { color: var(--Blue_Primary-950); } .beneficios-educacao .conteudo .col-1 p { margin: 0; } .beneficios-educacao .conteudo .col-2 {width: 40%;} .beneficios-educacao__img { display: block; width: 100%; height: auto; } .beneficios-educacao .grid-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; } .beneficios-educacao .feature-item { display: flex; gap: 1rem; background: var(--color-white); border-radius: 12px; padding: 1.5rem; flex-direction: column; border: 1px solid var(--Blue_Primary-600);} .beneficios-educacao .feature-item i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--Blue_Primary-50); font-size: 1.15rem; color: var(--Blue_Primary-600); } .beneficios-educacao .feature-item span { font-size: 14px; color: var(--Blue_Primary-950); } @media (max-width: 900px) { .beneficios-educacao .conteudo .col-1 { width: 55%; } .beneficios-educacao .conteudo .col-2 { width: 40%; } } @media (max-width: 768px) { .beneficios-educacao { padding: 4rem 0; } .beneficios-educacao .conteudo { flex-direction: column; gap: 2.5rem; } .beneficios-educacao .conteudo .col-1 { order: 2; width: 100%; } .beneficios-educacao .conteudo .col-2 { order: 1; width: 100%; max-width: 320px; margin: 0 auto; } .beneficios-educacao .grid-features { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .beneficios-educacao .feature-item { padding: 1.25rem 1rem; } } @media (max-width: 480px) { .beneficios-educacao .grid-features { grid-template-columns: 1fr; } } /* ========================================= Menos inadimplência (baseado no bloco link-agilize-pagamentos) ========================================= */ .recursos-educacao { width: 100%; padding: 6rem 0; background: var(--color-white); } .recursos-educacao__box { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; background: var(--Blue_Primary-50); border-radius: 32px; padding: 3.5rem; } .recursos-educacao__box h2 { text-align: center; max-width: 780px; margin: 0; } .recursos-educacao__title-blue { color: var(--Blue_Primary-600); } .recursos-educacao__title-dark { color: var(--Blue_Primary-950); } .recursos-educacao__subtitle { margin: -1.5rem 0 0; text-align: center; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5)); } .recursos-educacao .grid-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.5rem;width: 100%;} .recursos-educacao .card-item {display: flex;flex-direction: column;gap: 0.75rem;background: var(--color-white);border-radius: 12px;padding: 2.5rem 12px 2rem;} .recursos-educacao .card-item .icone {width: 40px;height: 40px;background: var(--Blue_Primary-50);border-radius: 14px 4px;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;} .recursos-educacao .card-item .icone i { font-size: 1.15rem; color: var(--Blue_Primary-600); } .recursos-educacao .card-item h3 { font-size: 16px; margin: 0; color: var(--Blue_Primary-950); } .recursos-educacao .card-item p { margin: 0; font-size: 14px; } .recursos-educacao__banner {display: flex;align-items: center;gap: 1rem;max-width: 54rem;background: var(--color-white);border: 1px solid var(--Blue_Primary-600);border-radius: 8px;padding: 1.75rem 1.5rem;} .recursos-educacao__banner i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--Blue_Primary-50); color: var(--Blue_Primary-600); font-size: 1.15rem; } .recursos-educacao__banner p { margin: 0; color: var(--Blue_Primary-950); font-size: 14px; } .recursos-educacao__banner strong { font-weight: 700; } @media (max-width: 991px) { .recursos-educacao .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 767px) { .recursos-educacao { padding: 4rem 0; } .recursos-educacao .container{padding:0;} .recursos-educacao__box { padding: 2rem 1.25rem; border-radius: 0px; } .recursos-educacao__box h2 { font-size: 1.75rem; } .recursos-educacao__subtitle { margin-top: -0.5rem; } .recursos-educacao .grid-cards { grid-template-columns: 1fr; gap: 1rem; } .recursos-educacao__banner { flex-direction: column; text-align: center; padding: 1.5rem; } } /* ========================================= Cadastre o aluno uma vez ========================================= */ .cadastro-educacao { width: 100%; padding: 6rem 0; position: relative; overflow: hidden; background: var(--Blue_Primary-50); } .cadastro-educacao .container { position: relative; z-index: 3; } .cadastro-educacao .fundo { content: ""; display: block; width: 110%; aspect-ratio: 1; position: absolute; top: 6rem; left: -5%; border-radius: 50%; z-index: 0; } .cadastro-educacao .fundo div { content: ""; display: block; width: 82%; aspect-ratio: 1; position: absolute; top: 13%; left: 9%; border-radius: 50%; } .cadastro-educacao .fundo, .cadastro-educacao .fundo div { background-color: #4f7ec31a; } .cadastro-educacao .conteudo { display: flex; align-items: center; gap: 4rem; } .cadastro-educacao .col-1 { display: flex; flex-direction: column; gap: 1.5rem; width: 54%; } .cadastro-educacao .col-1 h2 { margin: 0; } .cadastro-educacao .col-1 h2 span { display: block; } .cadastro-educacao__title-blue { color: var(--Blue_Primary-600); } .cadastro-educacao__title-dark { color: var(--Blue_Primary-950); } .cadastro-educacao .col-1 > p { margin: 0; } .cadastro-educacao .grid-passos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;width: 100%;} .cadastro-educacao .passo-item {position: relative;display: flex;flex-direction: column;gap: 0;background: var(--Blue_Primary-50);border: 1px solid var(--Blue_Primary-600);border-radius: 8px;padding: 10px 12px;} .cadastro-educacao .passo-item:not(:nth-child(3n))::after {content: "";position: absolute;top: 50%;right: -2rem;width: 2rem;height: 2px;background: var(--Blue_Primary-600);transform: translateY(-50%);z-index: 0;} .cadastro-educacao .passo-numero { font-size: 1.25rem; font-weight: 800; color: var(--Blue_Primary-600); } .cadastro-educacao .passo-item--check i { font-size: 1.5rem; color: var(--Blue_Primary-600); } .cadastro-educacao .passo-item p {margin: 11px 0 0 0;font-weight: 400;font-size: 10.66px;letter-spacing: 0%;color: var(--Alfa-Oxford-50, #0C235F80);} .cadastro-educacao .btn_primary { width: fit-content; text-transform: uppercase; } .cadastro-educacao .col-2 { position: relative; width: 46%; display: flex; justify-content: center; } .cadastro-educacao__backdrop { position: absolute; top: -1.5rem; right: 6%; width: 78%; aspect-ratio: 1; background: var(--Blue_Primary-600); border-radius: 2.5rem; z-index: 0; } .cadastro-educacao__img { position: relative; z-index: 1; display: block; width: 88%; height: auto; border-radius: 1rem; box-shadow: 0 16px 48px rgba(0,0,0,.12); } @media (max-width: 1200px) { .cadastro-educacao .col-1 { width: 58%; } } @media (max-width: 900px) { .cadastro-educacao .conteudo { flex-direction: column; gap: 3rem; } .cadastro-educacao .col-1 { order: 2; width: 100%; } .cadastro-educacao .col-2 { order: 1; width: 100%; max-width: 300px; margin: 0 auto; } .cadastro-educacao .fundo { top: 2rem; } } @media (max-width: 640px) { .cadastro-educacao { padding: 4rem 0; } .cadastro-educacao .grid-passos { grid-template-columns: 1fr; } .cadastro-educacao .passo-item:not(:last-child)::after { content: ""; position: absolute; top: 100%; left: 50%; right: auto; width: 2px; height: 24px; background: var(--Blue_Primary-600); transform: translateX(-50%); } .cadastro-educacao .btn_primary { width: 100%; justify-content: center; } .cadastro-educacao .fundo { width: 300%; left: -100%; top: 18rem; } .cadastro-educacao .fundo div { top: 12rem; } } /* ========================================= O pai resolve sozinho (copiado do bloco portal-provedor) ========================================= */ .portal-educacao {position: relative;background: #fff;padding: 5rem 0 6rem;overflow: hidden;} .portal-educacao__bg { position: absolute; top: 0; left: 0; right: 0; height: 34rem; background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0200c4d9 0%, #1637c4 100%); } .portal-educacao__inner { position: relative; z-index: 1; } .portal-educacao h2 {color: var(--color-white);text-align: center;margin: 0 auto;font-size: 40px;} .portal-educacao__subtitle {color: var(--color-white);text-align: center;opacity: 0.8;margin: 0.75rem 0 0;font-size: 30px;} /* .imagem — copiado de blocos/portal-cliente/portal-cliente.css */ .portal-educacao .imagem { margin: 3rem auto 4rem; text-align: center; max-width: 58rem; position: relative; } .portal-educacao .imagem img:first-child { max-width: 100%; width: 100%; height: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(9, 20, 66, 0.45); } .portal-educacao .imagem img:last-child { width: 112px; height: auto; margin: 0 auto; position: absolute; top: 27%; right: -6%; } .portal-educacao__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 0; } .portal-educacao__card {border-radius: 8px;text-align: center;border: 1px solid #d2d2d2;} .portal-educacao__card-inner {display: flex;flex-direction: column;align-items: center;background: #fff;height: 100%;padding: 18px 32px;border-radius: 8px;transition: background-color 0.25s ease;} .portal-educacao__card-inner:hover { background: var(--Blue_Primary-600); } .portal-educacao__card-inner:hover .portal-educacao__icon { background: rgba(255, 255, 255, 0.15); } .portal-educacao__card-inner:hover .portal-educacao__icon i, .portal-educacao__card-inner:hover h3, .portal-educacao__card-inner:hover p { color: var(--color-white); } .portal-educacao__icon {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;margin: 0 auto 0.25rem;border-radius: 12px;background: var(--Blue_Primary-50);} .portal-educacao__icon i { color: var(--Blue_Primary-600); font-size: 24px; } .portal-educacao__card h3 { margin: 0 0 0.5rem; font-size: 16px; color: var(--Blue_Primary-900); } .portal-educacao__card p { margin: 0; font-size: 14px; line-height: 150%; color: #0C235F80; } @media (max-width: 991px) { .portal-educacao__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .portal-educacao { padding: 4rem 0; } .portal-educacao__bg { height: 26rem; } .portal-educacao h2 { font-size: 1.75rem; } .portal-educacao .imagem { margin: 2rem auto 3rem; } .portal-educacao .imagem img:last-child { width: 84px; top: 22%; right: -2%; } .portal-educacao__grid { grid-template-columns: 1fr; gap: 1rem; } } /* ========================================= Segurança (inspirado no bloco lytex-seus-pagamentos-seguros) ========================================= */ .seguranca-educacao { width: 100%; padding: 6rem 0; background: var(--Blue_Primary-50); } .seguranca-educacao__title { text-align: center; margin: 0 0 2.5rem; color: var(--Blue_Primary-950); } .seguranca-educacao__title .destaque { color: var(--Blue_Primary-600); } .seguranca-educacao__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .seguranca-educacao__card { display: flex; align-items: center; gap: 1rem; background: var(--color-white); border: 1px solid var(--Blue_Primary-100); border-radius: 8px; padding: 1.25rem 1.5rem; min-height: 96px; } .seguranca-educacao__card img { max-width: 64px; max-height: 40px; width: auto; height: auto; flex-shrink: 0; } .seguranca-educacao__card > span { font-size: 14px; color: #7d889f; font-weight: 400; line-height: 150%; } .seguranca-educacao__card--stat { gap: 0.5rem; } .seguranca-educacao__plus { color: var(--Blue_Primary-600); font-size: 32px; font-weight: 700; line-height: 1; flex-shrink: 0; } .seguranca-educacao__card--stat strong { font-size: 32px; font-weight: 700; color: var(--Blue_Primary-950); white-space: nowrap; margin-right: 0.25rem; } @media (max-width: 1100px) { .seguranca-educacao__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .seguranca-educacao { padding: 4rem 0; } .seguranca-educacao__title { font-size: 1.5rem; } .seguranca-educacao__grid { grid-template-columns: 1fr; } } /* ========================================= Footer da LP Educação (CTA + rodapé) ========================================= */ .educacao-footer {position: relative;padding: 6rem 0;overflow: hidden;background: linear-gradient(0deg, rgb(17 32 90) 36%, rgb(17 65 190 / 0%) 67%), linear-gradient(90deg, rgb(17 32 90 / 93%) 0%, rgb(17 32 90) 27%, rgb(17 65 190 / 0%) 68%), url(landing-pages/educacao/educacao-session-footer.webp) 0px -74px;background-repeat: no-repeat;/* background-position: center center; */background-size: cover;} .educacao-footer__inner { display: flex; align-items: center; gap: 3rem; } .educacao-footer__content { max-width: 50%; flex-shrink: 0; color: var(--color-white); } .educacao-footer__icon { display: block; color: var(--color-white); font-size: 26px; margin-bottom: 1rem; } .educacao-footer__title { margin: 0 0 1rem; color: var(--color-white); } .educacao-footer__title span { display: block; } .educacao-footer__subtitle { color: rgba(255, 255, 255, 0.7); margin: 0 0 2rem; } .educacao-footer .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } @media (max-width: 768px) { .educacao-footer { padding: 3rem 0; background: linear-gradient(164deg, rgba(17, 32, 90, 0.92) 0%, rgba(17, 65, 190, 0.82) 100%), url(landing-pages/educacao/educacao-session-footer-mobile.webp) center center / cover no-repeat fixed; } .educacao-footer__inner { flex-direction: column; text-align: center; } .educacao-footer__content { max-width: 100%; } .educacao-footer__icon { margin-left: auto; margin-right: auto; } .educacao-footer .btn_primary { margin: 0 auto; } } .educacao-footer .site-footer { margin-top: 10rem; } /* ===== Landing page: remarketing (demais seções) ===== */ /* ========================================= Toda a sua operação de recebimento ========================================= */ .recebimento-remarketing {width: 100%;padding: 8rem 0;background: var(--Blue_Primary-50);} .recebimento-remarketing .conteudo {display: flex;align-items: center;gap: 4rem;justify-content: space-between;} .recebimento-remarketing .col-1 {display: flex;flex-direction: column;gap: 1.5rem;width: 42%;} .recebimento-remarketing .col-2 {width: 46%;} .recebimento-remarketing h2 { margin: 0; color: var(--Blue_Primary-600); } .recebimento-remarketing .col-1 > p { margin: 0; color: var(--Alfa-Oxford-75); } .recebimento-remarketing__lista { display: flex; flex-direction: column; gap: 1rem; } .recebimento-remarketing__item {display: flex;align-items: center;gap: 1.25rem;background: var(--color-white);border-radius: 12px;padding: 1.25rem 1.5rem;box-shadow: 0 4px 24px rgba(9, 20, 66, 0.06);} .recebimento-remarketing__item i {color: var(--Blue_Primary-600);font-size: 34px;flex-shrink: 0;margin-top: 0.15rem;} .recebimento-remarketing__item p { margin: 0; color: var(--Blue_Primary-950); font-size: 15px; line-height: 150%; } .recebimento-remarketing__img { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .recebimento-remarketing .conteudo { flex-direction: column; gap: 2.5rem; } .recebimento-remarketing .col-1 { order: 2; width: 100%; } .recebimento-remarketing .col-2 { order: 1; width: 100%; max-width: 380px; margin: 0 auto; } } @media (max-width: 768px) { .recebimento-remarketing__item{flex-direction: column;align-items: flex-start;gap: 0.75rem;} .recebimento-remarketing { padding: 4rem 0; } .recebimento-remarketing h2 { text-align: center; } .recebimento-remarketing .col-1 > p { text-align: center; } } /* ========================================= Não é só uma taxa personalizada ========================================= */ .taxa-remarketing {width: 100%;padding: 8rem 0;background: var(--color-white);text-align: center;} .taxa-remarketing__title {margin: 0 auto;max-width: 52rem;color: var(--Blue_Primary-950);} .taxa-remarketing__title-blue { color: var(--Blue_Primary-600); } .taxa-remarketing__subtitle {margin: 2rem auto!important;color: var(--Alfa-Oxford-75);} .taxa-remarketing .grid-passos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 3rem;text-align: left;} .taxa-remarketing .passo-item {position: relative;background: var(--Blue_Primary-50);border: 2px solid var(--Blue_Primary-400);border-radius: 9px;padding: 1.5rem;} .taxa-remarketing .passo-item:not(:last-child)::after {content: "";position: absolute;top: 50%;right: -3.30rem;width: 3.2rem;height: 2px;background: var(--Blue_Primary-300);transform: translateY(-50%);z-index: 0;} .taxa-remarketing .passo-item__icone {display: inline-flex;align-items: center;justify-content: center;width: 46px;height: 46px;border-radius: 16px 6px;background: var(--color-white);color: var(--Blue_Primary-600);font-size: 22px;margin-bottom: 1.25rem;} .taxa-remarketing .passo-item h3 {margin: 0 0 0.35rem;color: var(--Blue_Primary-600);font-size: 16px;} .taxa-remarketing .passo-item p {margin: 12px 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, #0C235F80);} @media (max-width: 900px) { .taxa-remarketing .grid-passos { grid-template-columns: 1fr; gap: 2.5rem; } .taxa-remarketing .passo-item:not(:last-child)::after {top: 100%;left: 50%;right: auto;width: 2px;height: 2.6rem;transform: translateX(-50%);} } @media (max-width: 768px) { .taxa-remarketing { padding: 4rem 0; } .taxa-remarketing__title, .taxa-remarketing__subtitle{text-align:left;} } /* ========================================= Feita para empresas que cobram todos os meses (fundo copiado do bloco boleto-personalizacao) ========================================= */ .segmentos-remarketing {width: 100%;padding: 8rem 0;background: var(--Blue_Primary-50);position: relative;overflow: hidden;} .segmentos-remarketing .container { z-index: 3; position: relative; } .segmentos-remarketing .fundo { content: ""; display: block; width: 110%; aspect-ratio: 1; position: absolute; top: 6rem; left: -5%; border-radius: 50%; z-index: 0; } .segmentos-remarketing .fundo div { content: ""; display: block; width: 82%; aspect-ratio: 1; position: absolute; top: 13%; left: 9%; border-radius: 50%; } .segmentos-remarketing .fundo, .segmentos-remarketing .fundo div { background-color: #4f7ec31a; } .segmentos-remarketing .conteudo { display: flex; flex-direction: column; gap: 3rem; } .segmentos-remarketing .topo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .segmentos-remarketing .topo h2 { margin: 0; color: var(--Blue_Primary-950); max-width: 640px; } .segmentos-remarketing .topo p { margin: 0; color: var(--Alfa-Oxford-75); max-width: 520px; } .segmentos-remarketing .grid-segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .segmentos-remarketing .segmento-item {background: var(--color-white);border-radius: 10px;padding: 2.2rem 1.25rem;display: flex;flex-direction: column;gap: 14px;} .segmentos-remarketing .segmento-item i {display: block;color: var(--Blue_Primary-600);font-size: 30px;} .segmentos-remarketing .segmento-item h3 {color: var(--Blue_Primary-600);font-size: 17px;} .segmentos-remarketing .segmento-item p {margin: 0;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.50));font-size: 14px;} .segmentos-remarketing .cta-segmento {position: relative;margin-top: 8rem;background: var(--color-white);border-radius: 8px;padding: 3.5rem 2rem 2rem;text-align: center;/* overflow: hidden; */border-bottom: 9px solid var(--Blue_Primary-600);} .segmentos-remarketing .cta-segmento__icone {position: absolute;top: -15px;left: 50%;transform: translate(-50%, -50%);width: 10rem;height: auto;} .segmentos-remarketing .cta-segmento__icone img { display: block; width: 100%; height: 100%; } .segmentos-remarketing .cta-segmento h2 { margin: 0 0 0.5rem; font-weight: 600; color: var(--Blue_Primary-950); } .segmentos-remarketing .cta-segmento h2 a { color: var(--Blue_Primary-600); text-decoration: none; } .segmentos-remarketing .cta-segmento > p {margin: 0;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.50));text-align: center;font-size: 16px;} @media (max-width: 900px) { .segmentos-remarketing .grid-segmentos { grid-template-columns: 1fr; } } @media (max-width: 768px) { .segmentos-remarketing { padding: 4rem 0; } .segmentos-remarketing .fundo { width: 300%; left: -100%; top: 20rem; } .segmentos-remarketing .fundo div { top: 12rem; } } /* ========================================= Sua operação de recebimento inteira no automático ========================================= */ .automatico-remarketing {width: 100%;padding: 8rem 0;background: var(--color-white);text-align: center;} .automatico-remarketing__title { margin: 0; color: var(--Blue_Primary-950); } .automatico-remarketing__title-blue { color: var(--Blue_Primary-600); } .automatico-remarketing__subtitle {margin: 1rem 0 2.5rem!important;color: var(--Alfa-Oxford-50);} .automatico-remarketing__badges {display: flex;justify-content: center;flex-wrap: wrap;gap: 2.2rem;margin-bottom: 3rem;} .automatico-remarketing__badge {display: inline-flex;align-items: center;gap: 0.5rem;background: var(--Blue_Primary-600);color: var(--color-white);font-weight: 500;padding: 0.85rem 1.5rem;border-radius: 8px;font-size: 21px;} .automatico-remarketing__badge i {font-size: 30px;} .automatico-remarketing__painel {background: var(--Blue_Primary-50);border-radius: 8px;padding: 3rem;display: flex;flex-direction: column;align-items: center;gap: 2rem;} .automatico-remarketing__pill {display: inline-flex;background: var(--Blue_Primary-600);color: var(--color-white);font-weight: 400;padding: 0.6rem 2rem;border-radius: 999px;font-size: 15px;} .grid-automatico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; text-align: left; } .automatico-item {background: var(--color-white);border-radius: 6px;padding: 22px 16px;border: 1px solid rgb(12 35 95 / 13%);} .automatico-item__icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 16px 6px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 22px;margin-bottom: 1rem;} .automatico-item h3 {margin: 0 0 14px;color: var(--Blue_Primary-900);font-size: 16px;} .automatico-item p {margin: 0;color: var(--Alfa-Oxford-50);font-size: 14px;line-height: 150%;} .automatico-remarketing__nota {margin: 0;max-width: 640px;color: var(--Alfa-Oxford-50);} @media (max-width: 900px) { .grid-automatico { grid-template-columns: 1fr; } .automatico-remarketing__painel { padding: 2rem 1.5rem; } } @media (max-width: 768px) { .automatico-remarketing { padding: 4rem 0; } .automatico-remarketing__badges {flex-direction: column;align-items: center;display: grid;} .automatico-remarketing__badge{text-align:center;justify-content:center} } /* ========================================= Sessão 6 (mesmo fundo do hero) ========================================= */ .sessao6 { position: relative; overflow: hidden; padding: 7rem 0 8rem; color: var(--color-white); background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(70% 61% at 9% 92%, #010050 0%, #00228d 100%); } .sessao6 .top {text-align: center;max-width: 640px;margin: 0 auto 5rem;} .sessao6 .top h2 {margin: 0;color: var(--color-white);font-weight: 500;} .sessao6__title-lead {display: block;/* font-size: 20px; */font-weight: 700;/* margin-bottom: 0.5rem; */} .sessao6 .top p { margin: 1rem 0 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; } .sessao6 .colunas {display: flex;gap: 2rem;} .sessao6 .col-1 {width: 50%;} .sessao6 .col-1 img {width: 100%;height: auto;display: block;margin: -16px 0 0 0;} .sessao6 .col-2 { width: 62%; } .sessao6__duvidas { display: flex; flex-direction: column; } .sessao6__duvida {display: flex;gap: 1rem;align-items: flex-start;padding: 1.25rem 0;border-bottom: 2px solid rgb(255 255 255 / 48%);} .sessao6__duvida:first-child { padding-top: 0; } .sessao6__duvida-icone {width: 42px;height: 46px;border-radius: 16px 8px;background: var(--Blue_Primary-600);display: flex;align-items: center;justify-content: center;color: var(--color-white);font-size: 20px;flex-shrink: 0;} .sessao6__duvida-texto h3 {margin: 0 0 0.35rem;color: var(--color-white);font-size: 16px;} .sessao6__duvida-texto p {margin: 0;color: #EDF6FF;font-size: 13px;line-height: 150%;} .sessao6__cta { display: inline-flex; width: fit-content; text-transform: uppercase; margin-top: 2rem; } @media (max-width: 900px) { .sessao6 .colunas {flex-direction: column;gap: 2.5rem;} .sessao6 .col-1 {width: 100%;max-width: 260px;margin: 0 auto;} .sessao6 .col-2 { width: 100%; } } @media (max-width: 600px) { .sessao6 .container{display:flex;flex-direction:column;} .sessao6 .colunas{display:contents;} .sessao6 .top {order: 2;flex:1;margin: 4rem 0px;} .sessao6 .col-1 {order: 1;max-width: fit-content;} .sessao6 .col-2 {order: 3;} } /* ========================================= Segurança (copiado de seguranca-educacao) ========================================= */ .seguranca-remarketing { width: 100%; padding: 6rem 0; background: var(--Blue_Primary-50); } .seguranca-remarketing__title { text-align: center; margin: 0 0 2.5rem; color: var(--Blue_Primary-950); } .seguranca-remarketing__title .destaque { color: var(--Blue_Primary-600); } .seguranca-remarketing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .seguranca-remarketing__card { display: flex; align-items: center; gap: 1rem; background: var(--color-white); border: 1px solid var(--Blue_Primary-100); border-radius: 8px; padding: 1.25rem 1.5rem; min-height: 96px; } .seguranca-remarketing__card img { max-width: 64px; max-height: 40px; width: auto; height: auto; flex-shrink: 0; } .seguranca-remarketing__card > span { font-size: 14px; color: #7d889f; font-weight: 400; line-height: 150%; } .seguranca-remarketing__card--stat { gap: 0.5rem; } .seguranca-remarketing__plus { color: var(--Blue_Primary-600); font-size: 32px; font-weight: 700; line-height: 1; flex-shrink: 0; } .seguranca-remarketing__card--stat strong { font-size: 32px; font-weight: 700; color: var(--Blue_Primary-950); white-space: nowrap; margin-right: 0.25rem; } @media (max-width: 1100px) { .seguranca-remarketing__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .seguranca-remarketing { padding: 4rem 0; } .seguranca-remarketing__title { font-size: 1.5rem; } .seguranca-remarketing__grid { grid-template-columns: 1fr; } } /* ========================================= Footer da LP Remarketing (CTA + rodapé) ========================================= */ .remarketing-footer {position: relative;padding: 8rem 0;overflow: hidden;background: linear-gradient(0deg, rgb(209 180 159 / 58%) 17%, rgb(17 65 190 / 0%) 67%), linear-gradient(90deg, rgb(222 232 250) 0%, rgb(231 232 243) 27%, rgb(17 65 190 / 0%) 68%), url(landing-pages/remarketing/remarketing-footer.webp);background-repeat: no-repeat;background-size: auto 100%;background-position: center;} .remarketing-footer__inner { display: flex; align-items: center; gap: 3rem; } .remarketing-footer__content {max-width: 52%;flex-shrink: 0;color: var(--Blue_Primary-950);display: flex;flex-direction: column;gap: 19px;} .remarketing-footer__title {/* margin: 0 0 1rem; *//* font-weight: 700; */color: var(--Blue_Primary-950);font-size: 42px;} .remarketing-footer__title-lead {display: block;/* font-weight: 600; */color: var(--Blue_Primary-600);} .remarketing-footer__subtitle { color: var(--Alfa-Oxford-75); margin: 0 0 2rem; } .remarketing-footer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; } .remarketing-footer .btn_primary { display: inline-flex; width: fit-content; text-transform: uppercase; } .remarketing-footer__btn-outline {display: inline-flex;align-items: center;justify-content: center;min-height: 56px;padding: 16px 24px;border-radius: 6px;border: 1px solid var(--Blue_Primary-600);background: var(--color-white);color: var(--Blue_Primary-600);font-size: 14px;font-weight: 700;text-decoration: none;text-transform: uppercase;} .remarketing-footer__btn-outline:hover { background: var(--Blue_Primary-50); } @media (max-width: 768px) { .remarketing-footer {padding: 28rem 0 3rem;background: linear-gradient(0deg, rgb(234 247 255) 73%, rgb(17 65 190 / 0%) 86%), url(landing-pages/remarketing/remarketing-footer.webp);background-size: 264% auto;background-position: 76% 0px;} .remarketing-footer__inner { flex-direction: column; text-align: center; } .remarketing-footer__content { max-width: 100%; } .remarketing-footer__actions { justify-content: center; } .remarketing-footer .btn_primary { margin: 0 auto; } } .remarketing-footer .site-footer { margin-top: 8rem; } /* ===== Bloco: recursos-desenvolvedores ===== */ /* ============================================================ Bloco: Recursos Desenvolvedores ============================================================ */ .recursos-desenvolvedores {background: var(--color-gray);padding: 2rem 0;} .recursos-desenvolvedores-viewport {overflow: hidden;width: 100%;} .recursos-desenvolvedores-track {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;row-gap: 1.25rem;column-gap: 2rem;will-change: transform;} .recursos-desenvolvedores-item {display: flex;align-items: center;gap: 0.75rem;flex-shrink: 0;} .recursos-desenvolvedores-item.is-clone {display: none;} .recursos-desenvolvedores-item .icone {width: 24px;height: 24px;flex-shrink: 0;display: block;} .recursos-desenvolvedores-item span {font-size: 14px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-950);white-space: nowrap;} @media (min-width: 769px) and (max-width: 1024px) { .recursos-desenvolvedores-track {justify-content: center;} } @media (max-width: 768px) { .recursos-desenvolvedores {padding: 1.5rem 0;} .recursos-desenvolvedores-viewport {overflow: hidden;} .recursos-desenvolvedores-track {flex-wrap: nowrap;justify-content: flex-start;column-gap: 2.5rem;} .recursos-desenvolvedores-item {min-width: max-content;} .recursos-desenvolvedores-item.is-clone {display: flex;} .recursos-desenvolvedores-track.is-rodando {animation: recursos-desenvolvedores-marquee 35s linear infinite;} .recursos-desenvolvedores:hover .recursos-desenvolvedores-track.is-rodando {animation-play-state: paused;} } @keyframes recursos-desenvolvedores-marquee { from {transform: translateX(0);} to {transform: translateX(-400%);} } /* ============================================================ Bloco: Diferenciais Desenvolvedores ============================================================ */ .diferenciais-desenvolvedores {padding: 6rem 0;} .diferenciais-desenvolvedores .topo {max-width: 640px;margin: 0 auto 4rem;text-align: center;} .diferenciais-desenvolvedores .topo h2 {margin: 0;} .diferenciais-desenvolvedores .linhas {display: flex;flex-direction: column;gap: 5rem; padding: 0px 70px;} .diferenciais-desenvolvedores .linha {display: flex;align-items: center;gap: 2rem;} .diferenciais-desenvolvedores .imagem {flex: 0 0 auto;width: 570px;background: var(--Blue_Primary-50);border-radius: 24px;padding: 2rem;} .diferenciais-desenvolvedores .texto {flex: 1;} .diferenciais-desenvolvedores .texto h3 {margin: 0 0 0.75rem;} .diferenciais-desenvolvedores .texto p {margin: 0;} .diferenciais-desenvolvedores .browser-mockup {background: var(--color-white);border-radius: 16px;box-shadow: 0 24px 48px rgba(17, 32, 90, 0.12);overflow: hidden;} .diferenciais-desenvolvedores .browser-mockup-topo {display: flex;align-items: center;gap: 1rem;padding: 0.85rem 1rem;border-bottom: 1px solid var(--Blue_Primary-50);} .diferenciais-desenvolvedores .browser-mockup-dots {display: flex;gap: 6px;flex-shrink: 0;} .diferenciais-desenvolvedores .browser-mockup-dots span {width: 9px;height: 9px;border-radius: 50%;display: block;} .diferenciais-desenvolvedores .browser-mockup-dots span:nth-child(1) {background: #FF5F57;} .diferenciais-desenvolvedores .browser-mockup-dots span:nth-child(2) {background: #FEBC2E;} .diferenciais-desenvolvedores .browser-mockup-dots span:nth-child(3) {background: #28C840;} .diferenciais-desenvolvedores .browser-mockup-url {flex: 1;display: flex;align-items: center;justify-content: center;gap: 6px;background: var(--color-gray);border-radius: 999px;padding: 0.35rem 0.75rem;font-size: 11px;color: var(--Alfa-Oxford-50);} .diferenciais-desenvolvedores .browser-mockup-url i {font-size: 12px;} .diferenciais-desenvolvedores .browser-mockup-acoes {display: flex;align-items: center;gap: 10px;flex-shrink: 0;color: var(--Alfa-Oxford-50);font-size: 15px;} .diferenciais-desenvolvedores .browser-mockup-conteudo {padding: 1.5rem;min-height: 190px;} .diferenciais-desenvolvedores .tag-sandbox {display: inline-block;font-size: 12px;font-weight: 600;color: var(--Blue_Primary-600);background: var(--Blue_Primary-50);border: 1px solid var(--Blue_Primary-200);border-radius: 999px;padding: 6px 16px;margin-bottom: 1.25rem;} .diferenciais-desenvolvedores .skeleton-linha {height: 10px;border-radius: 999px;background: var(--color-gray);margin-bottom: 0.75rem;} .diferenciais-desenvolvedores .skeleton-linha.curta {width: 60%;} .diferenciais-desenvolvedores .testando {display: flex;align-items: center;gap: 8px;margin-top: 1.5rem;font-size: 13px;font-weight: 600;color: var(--Blue_Primary-950);} .diferenciais-desenvolvedores .testando i {color: var(--Blue_Primary-600);} .diferenciais-desenvolvedores .browser-mockup-conteudo.webhooks {display: flex;flex-direction: column;align-items: center;gap: 0.85rem;padding-top: 1rem;} .diferenciais-desenvolvedores .sino {width: 44px;height: 44px;border-radius: 12px;background: var(--Blue_Primary-50);display: flex;align-items: center;justify-content: center;color: var(--Blue_Primary-600);font-size: 20px;margin-bottom: 0.5rem;} .diferenciais-desenvolvedores .evento {width: 50%;text-align: center;background: var(--color-gray);border-radius: 8px;padding: 0.65rem 1rem;font-size: 13px;font-weight: 600;color: var(--Blue_Primary-950); box-shadow: 10px 11px 21.4px 0 rgba(0, 0, 0, 0.13);} @media (max-width: 991px) { .diferenciais-desenvolvedores {padding: 4rem 0;} .diferenciais-desenvolvedores .topo {margin-bottom: 2.5rem;} .diferenciais-desenvolvedores .topo h2 {font-size: 24px;} .diferenciais-desenvolvedores .linhas {gap: 3rem; padding: 0px;} .diferenciais-desenvolvedores .linha {flex-direction: column;gap: 1.5rem;} .diferenciais-desenvolvedores .evento {width: 75%;} .diferenciais-desenvolvedores .imagem {width: 100%;max-width: 400px;} } /* ============================================================ Bloco: Facilidades Desenvolvedores ============================================================ */ .facilidades-desenvolvedores {padding: 0 0 3rem;} .facilidades-desenvolvedores .cards {display: grid;grid-template-columns: 1fr 1fr;gap: 1.5rem; padding: 0 70px;} .facilidades-desenvolvedores .card {background: var(--color-white);border: 1px solid var(--Blue_Primary-100);border-radius: 16px;padding: 1.35rem 2rem;} .facilidades-desenvolvedores .card.card-destaque {background: var(--Blue_Primary-50);border-color: transparent;} .facilidades-desenvolvedores .card-icone {display: flex;align-items: center;justify-content: center;width: 2.5rem;height: 2.5rem;margin-bottom: 0.45rem;color: var(--Blue_Primary-600);font-size: 22px;} .facilidades-desenvolvedores .card h3 {margin: 0 0 0.75rem;} .facilidades-desenvolvedores .card p {margin: 0 0 1.5rem;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6));} .facilidades-desenvolvedores .card-links {display: flex;flex-wrap: wrap;gap: 0.5rem 1.75rem;} .facilidades-desenvolvedores .card-links a {display: inline-flex;align-items: center;gap: 6px;font-size: 14px;font-weight: 600;color: var(--Blue_Primary-600);text-decoration: underline;} .facilidades-desenvolvedores .card-links a i {font-size: 13px;} @media (max-width: 768px) { .facilidades-desenvolvedores {padding: 0 0 4rem;} .facilidades-desenvolvedores .cards {grid-template-columns: 1fr;gap: 1rem; padding: 0;} .facilidades-desenvolvedores .card {padding: 1.5rem;} } /* ============================================================ Bloco: API Desenvolvedores ============================================================ */ .api-desenvolvedores {padding: 0 0 6rem;} .api-desenvolvedores .cartao {display: flex;align-items: stretch;min-height: 480px;} .api-desenvolvedores .col-texto {flex: 0 0 50%;max-width: 50%;display: flex;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);} .api-desenvolvedores .conteudo {display: flex;flex-direction: column;justify-content: center;gap: 1.5rem;max-width: 555px;padding-block: 4rem;padding-right: var(--gap);margin-left: calc((100vw - min(100vw, var(--max-width))) / 2 + var(--gap));} .api-desenvolvedores .conteudo h2 {margin: 0;} .api-desenvolvedores .ponto-destaque {display: inline-block;width: 10px;height: 10px;margin-left: 4px;background: var(--Blue_Primary-400, #5986F7);border-radius: 2px;} .api-desenvolvedores .conteudo p {margin: 0;color: rgba(255, 255, 255, 0.75);} .api-desenvolvedores .conteudo .btn_primary {width: fit-content;} .api-desenvolvedores .col-imagem {flex: 0 0 50%;max-width: 50%;} .api-desenvolvedores .col-imagem img {display: block;width: 100%;height: 100%;object-fit: cover;} @media (max-width: 768px) { .api-desenvolvedores {padding: 0} .api-desenvolvedores .cartao {flex-direction: column;min-height: 0;} .api-desenvolvedores .col-texto, .api-desenvolvedores .col-imagem {flex-basis: auto;max-width: 100%;} .api-desenvolvedores .col-texto {background-attachment: scroll;} .api-desenvolvedores .conteudo {max-width: 100%;padding-block: 2.5rem;} .api-desenvolvedores .col-imagem img {height: 550px;} } /* ===== Bloco: metodos-recebimento (page-checkout.php) ===== */ .metodos-recebimento {width: 100%;padding: 5rem 0;background: var(--color-white);} .metodos-recebimento__topo {max-width: 640px;margin: 0 auto 3rem;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 1.2rem;} .metodos-recebimento__topo .elemento-01 {margin: 0;color: var(--Blue_Primary-600);} .metodos-recebimento__topo h2 {margin: 0;} .metodos-recebimento .methods-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 22px;text-align: left;} .metodos-recebimento .method-card {border: 1px solid #e3eaf6;border-radius: 12px;padding: 10px;display: flex;flex-direction: column;} .metodos-recebimento .method-img {position: relative;overflow: hidden;display: block;height: 0%;opacity: 0;} .metodos-recebimento .method-img img {margin: 0;} .metodos-recebimento .method-icon {width: 48px;height: 48px;background: #edf4ff;border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;font-size: 26px;color: #2563ff;overflow: hidden;} .metodos-recebimento .method-card h4 {color: var(--Blue_Primary-950);margin: 14px 0 10px;font-weight: 600;font-size: 16px;line-height: 150%;letter-spacing: 0%;} .metodos-recebimento .method-card p {color: #a5adbf;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;margin-bottom: auto;} .metodos-recebimento .method-card a {color: var(--Blue_Primary-950);font-weight: 600;font-size: 14px;line-height: 150%;display: flex;text-decoration-color: #d4d4d4} .metodos-recebimento .method-card a span {text-decoration: underline;text-decoration-style: solid;text-decoration-color: inherit;text-underline-offset: 2px;} .metodos-recebimento .method-card a i {font-size: 22px;margin: 0 0 0 6px;transform: rotate(90deg);opacity: 0} .metodos-recebimento .method-card:hover {background-color: var(--Blue_Primary-50);} .metodos-recebimento .method-card:hover .method-img {height: 167px;opacity: 1;} .metodos-recebimento .method-card:hover .method-icon {height: 0px;opacity: 1;} .metodos-recebimento .method-card:hover h4, .metodos-recebimento .method-card:hover a {color: var(--Blue_Primary-600);text-decoration-color: var(--Blue_Primary-600);} .metodos-recebimento .method-card:hover a i {transform: rotate(0deg);opacity: 1} .metodos-recebimento .method-card, .metodos-recebimento .method-img, .metodos-recebimento .method-icon, .metodos-recebimento .method-card a i {-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 1100px) { .metodos-recebimento .methods-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .metodos-recebimento {padding: 4rem 0;} .metodos-recebimento .methods-grid {grid-template-columns: 1fr;gap: 24px;} .metodos-recebimento .method-card {gap: 16px;padding: 16px;} .metodos-recebimento .method-img {display: none;} } /* ===== Bloco: como-funciona (page-checkout.php) ===== */ .como-funciona {width: 100%;padding: 6rem 0;position: relative;overflow: hidden;color: var(--color-white);background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);} .como-funciona .topo {max-width: 640px;margin: 0 auto 3rem;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 1.2rem;} .como-funciona .elemento-01.branco{color: var(--color-white);background: var(--Brand-Color---Blue-Primary-500, rgba(40, 119, 255, 1));} .como-funciona .topo h3 {margin: 0;color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));font-weight: 500;} .como-funciona .grid-passos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;} .como-funciona .passo-item {position: relative;border: 1px solid rgba(255, 255, 255, 0.12);border-radius: 20px;padding: 24px;display: flex;flex-direction: column;gap: 12px;background: rgba(237, 246, 255, 0.17);} .como-funciona .passo-item:not(:first-child)::before {content: '';position: absolute;left: -24px;top: 74px;width: 24px;height: 2px;background: rgba(255, 255, 255, 0.35);} .como-funciona .passo-numero {font-size: 60px;font-weight: 800;line-height: 100%;color: var(--color-white);margin-bottom: 1.5rem;color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));} .como-funciona .passo-item h3 {margin: 0;font-size: 20px;font-weight: 600;color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));} .como-funciona .passo-item p {margin: 0;font-size: 14px;line-height: 150%;color: rgba(255, 255, 255, 0.7);color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));letter-spacing: -0.5px;} .como-funciona .passo-item{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} .como-funciona .passo-item .passo-numero{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} .como-funciona .passo-item h3{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} .como-funciona .passo-item p{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} .como-funciona .passo-item.is-active, .como-funciona .passo-item:hover {border-color: var(--color-white);background: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));cursor:pointer;} .como-funciona .passo-item.is-active .passo-numero, .como-funciona .passo-item:hover .passo-numero {color: var(--Blue_Primary-600);} .como-funciona .passo-item.is-active h3, .como-funciona .passo-item:hover h3 {color: var(--brand-color-blue-primary-600-base, rgba(4, 76, 255, 1));} .como-funciona .passo-item.is-active p, .como-funciona .passo-item:hover p {color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} @media (max-width: 991px) { .como-funciona .grid-passos {grid-template-columns: 1fr;gap: 1.25rem;} .como-funciona .passo-item:not(:first-child)::before {display: none;} } @media (max-width: 768px) { .como-funciona {padding: 4rem 0;} .como-funciona .passo-numero {font-size: 40px;margin-bottom: 1rem;} } /* ===== Bloco: orquestracao-pagamentos (page-checkout.php) ===== */ .orquestracao-pagamentos {width: 100%;padding: 6rem 0;background: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));} .orquestracao-pagamentos .topo {max-width: 640px;margin: 0 auto 3rem;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 1.2rem;} .orquestracao-pagamentos__pill {display: inline-flex;background: var(--Blue_Primary-600);font-weight: 600;padding: 0.6rem 1.2rem;border-radius: 999px;font-size: 12px;color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));} .orquestracao-pagamentos .topo h2 {margin: 0;} .orquestracao-pagamentos .cards-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 12px;text-align: left;} .orquestracao-pagamentos .feature-card {border-radius: 8px;padding: 15px;display: flex;flex-direction: column;gap: 0.6rem;background: var(--Alfa-Oxford-5, rgba(12, 35, 95, 0.05));cursor:pointer;} .orquestracao-pagamentos .feature-icon {width: 52px;height: 52px;background: var(--color-white);border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;font-size: 26px;color: var(--Blue_Primary-600);} .orquestracao-pagamentos .feature-card h4 {margin: 0.6rem 0 0;font-size: 19px;font-weight: 600;color: var(--Blue_Primary-600);} .orquestracao-pagamentos .feature-card p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .orquestracao-pagamentos .feature-card.is-active, .orquestracao-pagamentos .feature-card:hover {background: var(--Blue_Primary-600);} .orquestracao-pagamentos .feature-card.is-active h4, .orquestracao-pagamentos .feature-card:hover h4 {color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .orquestracao-pagamentos .feature-card.is-active p, .orquestracao-pagamentos .feature-card:hover p {color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .orquestracao-pagamentos .feature-card, .orquestracao-pagamentos .feature-card h4, .orquestracao-pagamentos .feature-card p {-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 991px) { .orquestracao-pagamentos .cards-grid {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .orquestracao-pagamentos {padding: 4rem 0;} .orquestracao-pagamentos .cards-grid {grid-template-columns: 1fr;gap: 1.25rem;} } /* ===== Bloco: experiencia-compra (page-checkout.php) ===== */ .experiencia-compra {width: 100%;padding: 6rem 0;background: var(--color-white);} .experiencia-compra .topo {display: flex;flex-direction: column;align-items: flex-start;gap: 1.2rem;/* max-width: 720px; */margin-bottom: 3.5rem;} .experiencia-compra .topo .elemento-01 {margin: 0;} .experiencia-compra .topo h2 {margin: 0;} .experiencia-compra .topo p {margin: 0;} .experiencia-compra .grid-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.5rem 2rem;width: 100%;} .experiencia-compra .card-item {display: flex;flex-direction: column;gap: 0.75rem;} .experiencia-compra .card-item .icone {width: 52px;height: 52px;background: var(--Blue_Primary-50);border-radius: 16px 8px;display: flex;align-items: center;justify-content: center;} .experiencia-compra .card-item .icone i {font-size: 1.5rem;color: var(--Blue_Primary-500);} .experiencia-compra .card-item h3 {font-size: 16px;margin: 0;color: var(--Blue_Primary-900);} .experiencia-compra .card-item p {margin: 0;} @media (max-width: 991px) { .experiencia-compra .grid-cards {grid-template-columns: repeat(2, 1fr);gap: 2.5rem;} } @media (max-width: 768px) { .experiencia-compra {padding: 4rem 0;} .experiencia-compra .grid-cards {grid-template-columns: 1fr;gap: 2rem;} } /* ===== Bloco: api-pagamentos (page-checkout.php, cópia de lytex-api-2) ===== */ .api-pagamentos{padding: 6rem 0;} .api-pagamentos .topo{max-width: 34rem;margin: 0 auto 4rem;text-align: center;} .api-pagamentos .topo .elemento-01.branco{background: var(--Blue_Primary-600);color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));} .api-pagamentos .topo h2{margin: 0;} .api-pagamentos .cards{display: flex;gap: 24px;} .api-pagamentos .cards .card{flex: 1;display: flex;flex-direction: column;gap: 16px;border-radius: 24px;} .api-pagamentos .cards .card .imagem{background: var(--Blue_Primary-950);border-radius: 16px 16px 0 0;display: flex;align-items: center;justify-content: center;flex-direction: column;min-height: 248px;color: #fff;font-size: 18px;gap: 2px;} .api-pagamentos .cards .card .imagem img{max-width: 100%;} .api-pagamentos .cards .card h3{font-size: 18px;} .api-pagamentos .cards .card p{margin: 0;color: rgba(12, 35, 95, 0.5);font-size: 14px;} .api-pagamentos .cards .card .btn_primary{margin-top: auto;align-self: flex-start;min-width: 15rem;justify-content: center;} @media(max-width: 768px) { .api-pagamentos{padding: 4rem 0;} .api-pagamentos .topo{margin-bottom: 2.5rem;} .api-pagamentos .topo h2{font-size: 24px;} .api-pagamentos .cards{flex-direction: column;gap: 4rem;} .api-pagamentos .cards .card .imagem{min-height: 14rem;} .api-pagamentos .cards .card .btn_primary{width: 100%;justify-content: center;gap: 12px;} } /* ===== Bloco: checkout-boleto-personalizacao ===== ============================================================= */ .checkout-boleto-personalizacao {width: 100%;padding: 6rem 0 0rem;background: var(--Blue_Primary-50);position: relative;overflow: hidden;} .checkout-boleto-personalizacao .container{z-index:3;position: relative;} .checkout-boleto-personalizacao .conteudo {display: flex;flex-direction: column;gap: 3rem;} /* Topo */ .checkout-boleto-personalizacao .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 16px;max-width: 36rem;margin: auto;} .checkout-boleto-personalizacao .topo .elemento-01{margin:0;color: var(--Blue_Primary-600);} .checkout-boleto-personalizacao .topo h2 {} .checkout-boleto-personalizacao .topo p {color: #000;} /* Corpo */ .checkout-boleto-personalizacao .corpo {display: flex;gap: 2rem;align-items: flex-start;position: relative;} .checkout-boleto-personalizacao .col-imagem {width: 64%;} .checkout-boleto-personalizacao .col-imagem img {width: 100%;height: auto;/* position: absolute; */right: 0;top: 0;display: block;box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, 0.12);} /* Features */ .checkout-boleto-personalizacao .col-features {/* flex: 1; */width: 48%;display: inline-flex;flex-direction: column;gap: 2rem;justify-content: center;} .checkout-boleto-personalizacao .lista-features {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;justify-content: space-between;/* min-height: 29rem; */gap: 25px;} .checkout-boleto-personalizacao .feature-item {display: flex;gap: 1rem;align-items: flex-start;cursor: pointer;} .checkout-boleto-personalizacao .feature-icon {width: 48px;/* height: 42px; */aspect-ratio: 0.95;flex-shrink: 0;display: flex;align-items: center;justify-content: center;background: #ffffff;border-radius: 34% 15%;color: var(--Blue_Primary-600);font-size: 1.25rem;} .checkout-boleto-personalizacao .feature-icon img {width: 51%;height: auto;transition: all 300ms ease-in-out;} .checkout-boleto-personalizacao .feature-texto {display: flex;flex-direction: column;} .checkout-boleto-personalizacao .feature-texto strong {font-weight: 600;font-size: inherit;line-height: 150%;letter-spacing: 0%;margin: 0 0 0px 0;color: var(--Blue_Primary-950);} .checkout-boleto-personalizacao .feature-texto p {font-size: 78%;margin: 0;} .checkout-boleto-personalizacao .btn_primary {width: fit-content;} .checkout-boleto-personalizacao .fundo{content:"oii";display: block;width: 110%;aspect-ratio: 1;position: absolute;top: 6rem;left: -5%;border-radius: 50%;z-index: 0;} .checkout-boleto-personalizacao .fundo div{content:"oii";display: block;width: 82%;aspect-ratio: 1;position: absolute;top: 13%;left: 9%;border-radius: 50%;} .checkout-boleto-personalizacao .fundo{background-color: #e4f1ff;} .checkout-boleto-personalizacao .fundo > div{background-color: #d8eaff;} .checkout-boleto-personalizacao .fundo > div > div{background-color: #c4e1ff;} .checkout-boleto-personalizacao .feature-item:hover .feature-icon{width: 90px;font-size: 57px;border-radius: 20px 10px;} .checkout-boleto-personalizacao .feature-item:hover .feature-icon img{width: 82%;} .checkout-boleto-personalizacao .feature-item:hover .feature-texto{font-size: 129%!important;} .checkout-boleto-personalizacao .feature-icon, .checkout-boleto-personalizacao .feature-texto *, .checkout-boleto-personalizacao .transacao-300{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;} @media (max-width: 991px) { .checkout-boleto-personalizacao .corpo {gap: 2.5rem;} } @media (max-width: 767px) { .checkout-boleto-personalizacao {padding: 4rem 0;} .checkout-boleto-personalizacao .fundo{width: 300%;left: -100%;top: 20rem;} .checkout-boleto-personalizacao .fundo div{top: 12rem;} .checkout-boleto-personalizacao .corpo {flex-direction: column;} .checkout-boleto-personalizacao .col-imagem {width: 100%;order: 2;} .checkout-boleto-personalizacao .col-features {order: 1;width: 100%;} .checkout-boleto-personalizacao .btn_primary{width:auto;justify-content: center;} } /* ===== Page split pagamento: O que é Split ===== */ .o-que-e-split {width: 100%;padding: 5rem 0;background: var(--color-white);} .o-que-e-split .conteudo {display: flex;/* align-items: center; */gap: 4rem;justify-content: space-between;} .o-que-e-split .col-1 {flex: 0 0 48%;display: flex;flex-direction: column;gap: 1.2rem;align-items: flex-start;} .o-que-e-split .col-1 h2 {margin: 0;/* padding: 0 5rem 0 0; */font-size: 40px;} .o-que-e-split .col-1 p {margin: 0;color: var(--Alfa-Oxford-75);} .o-que-e-split__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-weight: 600;font-size: 12px;line-height: 150%;} .o-que-e-split .col-2 {flex: 1;display: flex;flex-direction: column;gap: 1.2rem;} .o-que-e-split__card {display: flex;align-items: center;gap: 1.5rem;padding: 1.8rem 2rem;border-radius: 16px;background: #F3F6FA;} .o-que-e-split__card > i {flex: 0 0 auto;font-size: 28px;color: var(--Blue_Primary-600);} .o-que-e-split__card h3 {margin: 0 0 0.3rem;font-size: 16px;font-weight: 600;line-height: 150%;} .o-que-e-split__card p {margin: 0;font-size: 12px;line-height: 150%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} @media (max-width: 991px) { .o-que-e-split .conteudo {flex-direction: column;align-items: stretch;gap: 2.5rem;} .o-que-e-split .col-1 {flex: 0 0 100%;} } @media (max-width: 768px) { .o-que-e-split {padding: 4rem 0;} } /* ===== Page split pagamento: Escolha seu modelo ===== */ .escolha-modelo {width: 100%;padding: 4rem 0 5rem;background: var(--Blue_Primary-50);} .escolha-modelo .container {max-width: 1180px;} .escolha-modelo .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1.2rem;max-width: 800px;margin: 0 auto;padding-bottom: 2.5rem;border-bottom: 1px solid rgba(12, 35, 95, 0.12);} .escolha-modelo .topo h2 {margin: 0;} .escolha-modelo .topo p {margin: 0;color: var(--Alfa-Oxford-75);} .escolha-modelo__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);font-weight: 600;font-size: 12px;line-height: 150%;color: var(--Blue_Primary-50);margin: 0 0 12px 0;} .escolha-modelo__tabs {display: flex;width: fit-content;margin: 2.5rem auto 1.8rem;padding: 8px;gap: 6px;border-radius: 999px;background: var(--color-white);} .escolha-modelo__tabs .aba {border: 0;cursor: pointer;font-family: inherit;font-size: 16px;font-weight: 500;line-height: 150%;padding: 0.7rem 1.6rem;border-radius: 999px;background: transparent;color: var(--Blue_Primary-950, #0C235F);transition: background 300ms ease, color 300ms ease;} .escolha-modelo__tabs .aba.ativo {background: var(--Blue_Primary-600);color: var(--color-white);} .escolha-modelo__painel {display: none;opacity: 0;transition: opacity 300ms ease;} .escolha-modelo__painel.ativo {display: block;} .escolha-modelo__painel.visivel {opacity: 1;} .escolha-modelo .descricao {max-width: 820px;margin: 0 auto 2rem;text-align: center;color: var(--Alfa-Oxford-75);} .escolha-modelo .fluxo {display: flex;align-items: center;justify-content: space-between;gap: 2rem;padding: 2rem 1.5rem;border-radius: 20px;background: var(--color-white);} .escolha-modelo .etapas {display: flex;align-items: center;justify-content: space-between;gap: 1rem;flex: 1;} .escolha-modelo .etapa {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 0.4rem;max-width: 10rem;} .escolha-modelo .etapa strong {font-size: 14px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-950);} .escolha-modelo .etapa strong.cor-azul {color: var(--Blue_Primary-600);} .escolha-modelo .etapa small {font-size: 14px;line-height: 140%;color: var(--Alfa-Oxford-75);} .escolha-modelo .etapa-dupla {display: flex;flex-direction: column;gap: 1rem;} .escolha-modelo .icone {position: relative;display: inline-flex;align-items: center;justify-content: center;width: 56px;height: 56px;margin-bottom: 0.4rem;border-radius: 12px;background: #F3F6FA;color: var(--Blue_Primary-600);font-size: 26px;} .escolha-modelo .etapa-invertida .icone {margin: 0.4rem 0 0;} .escolha-modelo .icone.verde {background: #3B9F26;color: var(--color-white);box-shadow: 0 6px 14px rgba(59, 159, 38, 0.3);} .escolha-modelo .icone.azul {background: var(--Blue_Primary-600);color: var(--color-white);} .escolha-modelo .icone .selo {position: absolute;right: -8px;bottom: -8px;display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 12px;font-weight: 700;} .escolha-modelo .seta {flex: 0 0 auto;font-size: 28px;color: #B8BDD0;} .escolha-modelo .seta.verde {color: #3B9F26;} .escolha-modelo .divisor {flex: 0 0 auto;font-size: 28px;color: var(--Blue_Primary-600);} .escolha-modelo .resultados {flex: 0 0 216px;display: flex;flex-direction: column;gap: 0.8rem;} .escolha-modelo .resultado {display: flex;align-items: center;gap: 1rem;padding: 1rem 1.2rem;border-radius: 14px;background: #F3F6FA;/* max-width: 13rem; */} .escolha-modelo .resultado > i {flex: 0 0 auto;font-size: 32px;color: var(--Blue_Primary-600);} .escolha-modelo .resultado strong {display: block;font-size: 16px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-950);} .escolha-modelo .resultado small {display: block;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));margin: 8px 0 0 0;} @media (max-width: 991px) { .escolha-modelo .fluxo {flex-direction: column;align-items: stretch;padding: 1.5rem;} .escolha-modelo .etapas {flex-direction: column;} .escolha-modelo .seta {transform: rotate(90deg);} .escolha-modelo .divisor {align-self: center;transform: rotate(90deg);} .escolha-modelo .resultados {flex: 1 1 auto;} .escolha-modelo .resultado{width: 14rem;margin: 0 auto;} } @media (max-width: 768px) { .escolha-modelo {padding: 3rem 0 4rem;} .escolha-modelo__tabs .aba {padding: 0.6rem 1rem;font-size: 14px;} } /* ===== Page split pagamento: Conta-bolsão ===== */ .conta-bolsao {width: 100%;padding: 4rem 0 5rem;position: relative;overflow: hidden;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0F33BE 0%, #0C235F 100%);} .conta-bolsao .container {max-width: 1180px;position: relative;z-index: 1;} .conta-bolsao .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1.8rem;/* max-width: 66rem; */margin: 0 auto 3rem;} .conta-bolsao .topo h2 {margin: 0;color: var(--color-white);} .conta-bolsao .topo p {margin: 0;color: rgba(255, 255, 255, 0.8);max-width: 50rem;} .conta-bolsao__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;color: var(--Blue_Primary-50);background: var(--Blue_Primary-900);font-weight: 500;font-size: 14px;line-height: 150%;} .conta-bolsao .cards {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.6rem;max-width: 1000px;margin: 0 auto;} .conta-bolsao .card {display: flex;flex-direction: column;align-items: flex-start;gap: 0.6rem;padding: 1.6rem 1.6rem 1.8rem;border-radius: 12px;background: var(--Blue_Primary-950);} .conta-bolsao .card h3 {margin: 0;color: var(--color-white);font-size: 20px;font-weight: 600;line-height: 150%;} .conta-bolsao .card p {margin: 0;color: rgba(255, 255, 255, 0.75);font-size: 14px;line-height: 150%;color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .conta-bolsao .icone {display: inline-flex;align-items: center;justify-content: center;width: 52px;height: 52px;margin-bottom: 0.4rem;border-radius: 18px 8px;color: var(--color-white);font-size: 24px;} .conta-bolsao .icone.vermelho {background: #C81E28;} .conta-bolsao .icone.verde {background: #3B9F26;} @media (max-width: 768px) { .conta-bolsao {padding: 3rem 0 4rem;} .conta-bolsao .cards {grid-template-columns: 1fr;} } /* ===== Page split pagamento: Seis motivos ===== */ .seis-motivos {width: 100%;padding: 4rem 0 5rem;background: var(--Blue_Primary-50);} .seis-motivos .container {max-width: 1180px;} .seis-motivos .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 0.8rem;margin-bottom: 3rem;} .seis-motivos .topo h2 {margin: 0;} .seis-motivos__tag {color: var(--Blue_Primary-600);font-size: 14px;font-weight: 500;line-height: 150%;} .seis-motivos .grid-motivos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 32px 22px;} .seis-motivos .card {display: flex;flex-direction: column;align-items: flex-start;gap: 0.6rem;padding: 16px;border: 1px solid transparent;border-radius: 12px;background: rgba(255, 255, 255, 0.7);transition: border-color 300ms ease, background 300ms ease;} .seis-motivos .card:hover {border-color: var(--Blue_Primary-600);background: var(--color-white);} .seis-motivos .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 0.6rem;border-radius: 18px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 22px;} .seis-motivos .card h3 {margin: 0;font-size: 16px;font-weight: 600;line-height: 150%;} .seis-motivos .card p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} @media (max-width: 991px) { .seis-motivos .grid-motivos {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .seis-motivos {padding: 3rem 0 4rem;} .seis-motivos .grid-motivos {grid-template-columns: 1fr;} } /* ===== Page split pagamento: Split Subcontas ===== */ .split-subcontas {width: 100%;padding: 6rem 0;position: relative;overflow: hidden;background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #3e5bcb 0%, #3c59ca 100%);} .split-subcontas .container {max-width: 1180px;} .split-subcontas .conteudo {display: flex;align-items: center;justify-content: space-between;gap: 4rem;} .split-subcontas .col-1 {flex: 0 0 45%;display: flex;flex-direction: column;align-items: flex-start;gap: 1.2rem;} .split-subcontas .col-1 h2 {margin: 0 0 0.8rem;color: var(--color-white);} .split-subcontas .texto h3 {margin: 0 0 0.4rem;color: var(--color-white);font-size: 16px;font-weight: 500;line-height: 150%;} .split-subcontas .texto p {margin: 0;color: rgba(255, 255, 255, 0.75);font-size: 14px;line-height: 150%;} .split-subcontas .col-1 .btn_primary {width: fit-content;margin-top: 0.8rem;} .split-subcontas__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--color-white);color: var(--Blue_Primary-950, #0C235F);font-weight: 500;font-size: 14px;line-height: 150%;} .split-subcontas .col-2 {flex: 1;display: flex;justify-content: center;} .split-subcontas__img {width: 100%;} @media (max-width: 991px) { .split-subcontas .conteudo {flex-direction: column;gap: 2.5rem;} .split-subcontas .col-1, .split-subcontas .col-2 {flex: 0 0 100%;max-width: 100%;} } @media (max-width: 768px) { .split-subcontas {padding: 4rem 0;} } /* ===== Page split pagamento: Como funciona o Split ===== */ .como-funciona-split {width: 100%;padding: 4rem 0 5rem;background: var(--Blue_Primary-50);overflow: hidden;} .como-funciona-split .container {max-width: 1000px;} .como-funciona-split .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;margin: 0 auto 4rem;} .como-funciona-split .topo h2 {margin: 0;} .como-funciona-split .topo p {margin: 0;color: var(--Alfa-Oxford-75);} .como-funciona-split__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--Brand-Color---Blue-Primary-50, rgba(237, 246, 255, 1));font-weight: 600;font-size: 12px;line-height: 150%;} .como-funciona-split .passo {position: relative;display: grid;grid-template-columns: 1fr 64px 1fr;align-items: center;} .como-funciona-split .passo:not(:last-child)::before {content: "";position: absolute;left: 50%;top: 50%;width: 2px;height: 100%;margin-left: -1px;background: var(--Blue_Primary-600);} .como-funciona-split .marcador {grid-column: 2;grid-row: 1;position: relative;z-index: 1;display: flex;align-items: center;justify-content: center;width: 54px;height: 54px;border-radius: 50%;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 20px;font-weight: 700;box-shadow: 0 0 0 3px var(--color-white), 0 4px 12px rgba(12, 35, 95, 0.2);} .como-funciona-split .lado {grid-row: 1;display: flex;align-items: center;margin: 1.2rem 0;} .como-funciona-split .lado.esq {grid-column: 1;} .como-funciona-split .lado.dir {grid-column: 3;flex-direction: row-reverse;} .como-funciona-split .lado .conector {flex: 1;min-width: 1rem;border-top: 1px dashed var(--Blue_Primary-600);} .como-funciona-split .card {flex: 0 1 380px;display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;padding: 1.2rem 1.3rem 1.4rem;border-radius: 12px;background: rgba(255, 255, 255, 0.8);} .como-funciona-split .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 0.5rem;border-radius: 16px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 22px;} .como-funciona-split .card h3 {margin: 0;font-size: 18px;font-weight: 600;line-height: 150%;} .como-funciona-split .card p {margin: 0;font-size: 16px;line-height: 150%;color: var(--Alfa-Oxford-75);} @media (max-width: 768px) { .como-funciona-split {padding: 3rem 0 4rem;} .como-funciona-split .topo {margin-bottom: 2.5rem;} .como-funciona-split .passo {grid-template-columns: 64px 1fr;column-gap: 0.2rem;} .como-funciona-split .passo::before {left: 32px;} .como-funciona-split .marcador {grid-column: 1;} .como-funciona-split .lado.esq, .como-funciona-split .lado.dir {grid-column: 2;flex-direction: row;} .como-funciona-split .lado .conector {display: none;} .como-funciona-split .card {flex: 1;} .como-funciona-split .passo:not(:last-child)::before{left: calc(54px / 2);} .como-funciona-split .card h3 {font-size:14px} .como-funciona-split .card p{font-size:12px} } /* ===== Bloco: split-duvidas (page-split-pagamento.php) ===== */ .split-duvidas {padding: 6rem 0 8rem;background: var(--Blue_Primary-50);position: relative;} .split-duvidas:after{content: " ";width: 100%;height: 100%;display:block;background: #fff;position:absolute;top:0;left: 0;z-index: 0;border-radius: 0 0 54px 54px;} .split-duvidas .conteudo {display: flex;justify-content: space-between;gap: 2rem;align-items: center;z-index: 2;position: relative;} .split-duvidas .col-1 {display: flex;flex-direction: column;align-items: flex-start;gap: 1.5rem;width: 40%;} .split-duvidas .col-1 .elemento-01 {margin: 0;} .split-duvidas .btn_primary {width: fit-content;} .split-duvidas .col-2 {display: flex;justify-content: center;flex: 0 0 57%;position: relative;margin: 53px 0 0 0;} .split-duvidas .col-2:before{content: "";width: 75%;position: absolute;top: -14%;left: -2%;z-index: 0;aspect-ratio: 10/10;border-radius: 40% 20%;border: 2px solid var(--Blue_Primary-600);} .split-duvidas .col-2:after{content: "";width: 75%;position: absolute;top: -27%;left: 26%;z-index: 0;aspect-ratio: 10/10;border-radius: 40% 20%;border: 2px solid var(--Blue_Primary-600);} .split-duvidas .thumb-video {position: relative;display: inline-block;overflow: hidden;border-radius: 20px;box-shadow: 0 16px 38px rgba(11, 29, 86, 0.2);z-index: 2;} .split-duvidas .thumb-video::before {content: '';position: absolute;inset: 0;background: rgba(7, 18, 53, 0.22);z-index: 1;transition: background 0.25s ease;} .split-duvidas .thumb-video img {display: block;width: 100%;height: auto;} .split-duvidas .btn-video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border: 1px solid rgba(24, 76, 182, 0.18);border-radius: 999px;width: 68px;height: 68px;display: flex;align-items: center;justify-content: center;cursor: pointer;box-shadow: 0 10px 28px rgba(9, 31, 90, 0.26), inset 0 0 0 5px rgba(255, 255, 255, 0.8);transition: transform 200ms ease, box-shadow 200ms ease;z-index: 2;} .split-duvidas .btn-video:hover {transform: translate(-50%, -50%) scale(1.08);box-shadow: 0 14px 32px rgba(9, 31, 90, 0.3), inset 0 0 0 5px rgba(255, 255, 255, 0.8);} .split-duvidas .btn-video i {font-size: 30px;color: var(--Blue_Primary-600, #2563eb);} .split-duvidas .thumb-video:hover::before, .split-duvidas .thumb-video:focus-visible::before {background: rgba(7, 18, 53, 0.1);} .split-duvidas .btn-video:focus-visible {outline: 3px solid var(--Blue_Primary-950);outline-offset: 4px;} .split-duvidas .modal-video {position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;} .split-duvidas .modal-video[hidden] {display: none;} .split-duvidas .modal-video-overlay {position: absolute;inset: 0;background: rgba(0,0,0,0.75);} .split-duvidas .modal-video-content {position: relative;z-index: 1;width: 90%;max-width: 900px;background: #000;border-radius: 16px;overflow: hidden;aspect-ratio: 16/9;} .split-duvidas .modal-video-player {width: 100%;height: 100%;} .split-duvidas .modal-video-player iframe, .split-duvidas .modal-video-player video {width: 100%;height: 100%;border: none;display: block;} .split-duvidas .modal-video-close {position: absolute;top: -44px;right: 0;background: transparent;border: none;color: #fff;font-size: 28px;cursor: pointer;line-height: 1;padding: 4px;} @media (max-width:768px) { .split-duvidas .conteudo {flex-direction:column;} .split-duvidas .col-1 {display: contents;} .split-duvidas .col-2 {width: 100%;} .split-duvidas .elemento-01{order:1;} .split-duvidas h3{order:2;} .split-duvidas .thumb-video{order:3;} .split-duvidas p{order:4;} .split-duvidas .btn_primary{order:5;} } /* ===== Page nota fiscal: Como funciona ===== */ .nota-fiscal-como-funciona {width: 100%;padding: 4rem 0 5rem;background: var(--color-white);overflow: hidden;} .nota-fiscal-como-funciona .container {max-width: 1000px;} .nota-fiscal-como-funciona .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;max-width: 820px;margin: 0 auto 4rem;} .nota-fiscal-como-funciona .topo h2 {margin: 0;} .nota-fiscal-como-funciona .topo p {margin: 0;color: var(--Alfa-Oxford-75);} .nota-fiscal-como-funciona__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--color-white);font-weight: 600;font-size: 14px;line-height: 150%;} .nota-fiscal-como-funciona .passo {position: relative;display: grid;grid-template-columns: 1fr 64px 1fr;align-items: center;} .nota-fiscal-como-funciona .passo:not(:last-child)::before {content: "";position: absolute;left: 50%;top: 50%;width: 2px;height: 100%;margin-left: -1px;background: var(--Blue_Primary-600);} .nota-fiscal-como-funciona .marcador {grid-column: 2;grid-row: 1;position: relative;z-index: 1;display: flex;align-items: center;justify-content: center;width: 54px;height: 54px;border-radius: 50%;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 20px;font-weight: 700;box-shadow: 0 0 0 3px var(--color-white), 0 4px 12px rgba(12, 35, 95, 0.2);} .nota-fiscal-como-funciona .lado {grid-row: 1;display: flex;align-items: center;margin: 1.2rem 0;} .nota-fiscal-como-funciona .lado.esq {grid-column: 1;} .nota-fiscal-como-funciona .lado.dir {grid-column: 3;flex-direction: row-reverse;} .nota-fiscal-como-funciona .lado .conector {flex: 1;min-width: 1rem;border-top: 1px dashed var(--Blue_Primary-600);} .nota-fiscal-como-funciona .card {flex: 0 1 380px;display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;padding: 1.2rem 1.3rem 1.4rem;border-radius: 12px;background: #f2f5f9;} .nota-fiscal-como-funciona .icone {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;margin-bottom: 0.5rem;border-radius: 10px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 22px;} .nota-fiscal-como-funciona .card h3 {margin: 0;font-size: 16px;font-weight: 600;line-height: 150%;} .nota-fiscal-como-funciona .card p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);} @media (max-width: 768px) { .nota-fiscal-como-funciona {padding: 3rem 0 4rem;background: var(--Blue_Primary-50);} .nota-fiscal-como-funciona .topo {margin-bottom: 2.5rem;} .nota-fiscal-como-funciona .passo {grid-template-columns: 64px 1fr;column-gap: 0.1rem;} .nota-fiscal-como-funciona .passo::before {left: 32px;} .nota-fiscal-como-funciona .marcador {grid-column: 1;width: 48px;height: 48px;font-size: 18px;} .nota-fiscal-como-funciona .lado.esq, .nota-fiscal-como-funciona .lado.dir {grid-column: 2;flex-direction: row;} .nota-fiscal-como-funciona .lado .conector {display: none;} .nota-fiscal-como-funciona .card {flex: 1;background: rgba(255, 255, 255, 0.8);} .nota-fiscal-como-funciona .card h3{font-size:14px} .nota-fiscal-como-funciona .card p{font-size:12px} .nota-fiscal-como-funciona .passo:not(:last-child)::before{left:calc(48px / 2);} } /* ===== Page nota fiscal: Benefícios ===== */ .nota-fiscal-beneficios {width: 100%;padding: 4rem 0 5rem;background: var(--Blue_Primary-50);} .nota-fiscal-beneficios .container {max-width: 1180px;} .nota-fiscal-beneficios .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 0.8rem;margin-bottom: 3.5rem;} .nota-fiscal-beneficios .topo h2 {margin: 0;} .nota-fiscal-beneficios__tag {color: var(--Blue_Primary-950);font-size: 14px;font-weight: 500;line-height: 150%;} .nota-fiscal-beneficios .grid-beneficios {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.4rem 1rem;} .nota-fiscal-beneficios .item {display: flex;flex-direction: column;align-items: flex-start;gap: 0.6rem;} .nota-fiscal-beneficios .icone {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;margin-bottom: 0.6rem;color: var(--Blue_Primary-600);font-size: 28px;} .nota-fiscal-beneficios .item h3 {margin: 0;font-size: 18px;font-weight: 600;line-height: 150%;} .nota-fiscal-beneficios .item p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);} @media (max-width: 991px) { .nota-fiscal-beneficios .grid-beneficios {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .nota-fiscal-beneficios {padding: 3rem 0 4rem;} .nota-fiscal-beneficios .topo {margin-bottom: 2.5rem;} .nota-fiscal-beneficios .grid-beneficios {grid-template-columns: 1fr;} } /* ===== Page nota fiscal: Envio ao cliente ===== */ .nota-fiscal-envio {position: relative;width: 100%;background: var(--color-white);overflow: hidden;} .nota-fiscal-envio .conteudo {display: flex;align-items: center;min-height: 480px;padding: 8rem 0;} .nota-fiscal-envio .col-1 {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;width: 588px;padding-right: 2rem;box-sizing: border-box;} .nota-fiscal-envio .col-1 h2 {margin: 0;} .nota-fiscal-envio .col-1 p {margin: 0 0 1rem;} .nota-fiscal-envio .col-1 .btn_primary {width: fit-content;} .nota-fiscal-envio__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--color-white);font-weight: 600;font-size: 14px;line-height: 150%;margin: 0 0 22px 0px;} .nota-fiscal-envio__media {position: absolute;top: 0;right: 0;bottom: 0;width: 50%;} .nota-fiscal-envio__img {display: block;width: 100%;height: 100%;object-fit: cover;object-position: center;} .nota-fiscal-envio .btn_primary{margin-top:3rem;} @media (max-width: 991px) { .nota-fiscal-envio .conteudo {min-height: 0;padding: 3rem 0;} .nota-fiscal-envio .col-1 {width: 100%;padding-right: 0;align-items: center;text-align: center;} .nota-fiscal-envio__media {position: static;width: 100%;height: 420px;} } @media (max-width: 768px) { .nota-fiscal-envio .col-1 {align-items: flex-start;text-align: left;} .nota-fiscal-envio .col-1 .btn_primary {width: 100%;justify-content: center;} .nota-fiscal-envio__media {height: 320px;} } /* ===== Page nota fiscal: API ===== */ .nota-fiscal-api {position: relative;width: 100%;padding: 6rem 0;background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0b3ce1 0%, #0e33bf 100%);color: var(--color-white);overflow: hidden;} .nota-fiscal-api .container {max-width: 1180px;} .nota-fiscal-api .conteudo {display: flex;align-items: center;justify-content: space-between;gap: 3rem;} .nota-fiscal-api .col-1 {flex: 0 0 52%;display: flex;flex-direction: column;align-items: flex-start;gap: 1.2rem;} .nota-fiscal-api .col-1 h2 {margin: 0;color: var(--color-white);font-size: 40px;} .nota-fiscal-api .col-1 p {margin: 0;color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .nota-fiscal-api__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--Blue_Primary-50);font-weight: 600;font-size: 12px;line-height: 150%;} .nota-fiscal-api__btn {display: inline-flex;align-items: center;gap: 10px;min-height: 56px;margin-top: 0.8rem;padding: 16px 24px;border-radius: 6px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 14px;font-weight: 700;text-decoration: none;transition: all 200ms ease-in-out;} .nota-fiscal-api__btn i {font-size: 26px;} .nota-fiscal-api__btn:hover {background: var(--color-white);} .nota-fiscal-api .col-2 {flex: 1;max-width: 520px;} .nota-fiscal-api__fluxo {display: flex;flex-direction: column;align-items: stretch;} .nota-fiscal-api .fluxo-card {padding: 1.6rem 1.7rem;border-radius: 24px;background: var(--color-white);color: var(--Blue_Primary-950);} .nota-fiscal-api .fluxo-card__topo {display: flex;align-items: center;gap: 1rem;} .nota-fiscal-api .fluxo-card__icone {display: inline-flex;align-items: center;justify-content: center;flex: 0 0 42px;width: 42px;height: 42px;border-radius: 10px;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 22px;} .nota-fiscal-api .fluxo-card__texto {display: flex;flex-direction: column;flex: 1;min-width: 0;} .nota-fiscal-api .fluxo-card__texto strong {font-size: 18px;font-weight: 600;line-height: 130%;} .nota-fiscal-api .fluxo-card__texto span {font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-75);} .nota-fiscal-api .fluxo-card__status {padding: 0.35rem 1.1rem;border-radius: 999px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 14px;font-weight: 500;} .nota-fiscal-api .fluxo-card__status.verde {background: #e3f9d5;color: #2f9e2f;} .nota-fiscal-api .fluxo-card__detalhes {display: flex;flex-direction: column;gap: 0.9rem;margin: 1.4rem 0 0;padding: 0;list-style: none;} .nota-fiscal-api .fluxo-card__detalhes li {display: flex;justify-content: space-between;gap: 1rem;font-size: 16px;} .nota-fiscal-api .fluxo-card__detalhes strong {font-weight: 500;color: var(--Blue_Primary-600);} .nota-fiscal-api .fluxo-conector {display: block;align-self: center;width: 2px;height: 36px;background: linear-gradient(180deg, rgba(0, 200, 255, 0.2), #12c4ff, rgba(0, 200, 255, 0.2));} @media (max-width: 991px) { .nota-fiscal-api .conteudo {flex-direction: column;align-items: stretch;gap: 3rem;} .nota-fiscal-api .col-1 {flex: 0 0 100%;} .nota-fiscal-api .col-2 {max-width: 100%;} } @media (max-width: 768px) { .nota-fiscal-api {padding: 4rem 0;} .nota-fiscal-api__btn {width: 100%;justify-content: center;} .nota-fiscal-api .fluxo-card {padding: 1.2rem;border-radius: 20px;} .nota-fiscal-api .fluxo-card__texto strong {font-size: 16px;} } /* ============================================================ Bloco: Portal Cliente Como Funciona (page-portal-cliente.php) ============================================================ */ .portal-cliente-como-funciona {width: 100%;padding: 4rem 0 5rem;background: var(--color-white);} .portal-cliente-como-funciona .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;max-width: 820px;margin: 0 auto 3.5rem;} .portal-cliente-como-funciona .topo h2 {margin: 0;} .portal-cliente-como-funciona .topo p {margin: 0;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));max-width: 720px;} .portal-cliente-como-funciona__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-950);font-weight: 600;font-size: 12px;line-height: 150%;} .portal-cliente-como-funciona .passos {display: flex;align-items: stretch;gap: 1rem;} .portal-cliente-como-funciona .card {flex: 1;display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;padding: 26px;border-radius: 18px;background: var(--Blue_Primary-50);} .portal-cliente-como-funciona .card:hover {background: var(--Blue_Primary-600);} .portal-cliente-como-funciona .seta {flex: 0 0 auto;align-self: center;display: flex;font-size: 48px;color: var(--Alfa-Oxford-25, rgba(12, 35, 95, 0.25));} .portal-cliente-como-funciona .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 1.2rem;border-radius: 16px 8px;background: var(--color-white);color: var(--Blue_Primary-600);font-size: 24px;} .portal-cliente-como-funciona .card:hover .icone {background: var(--Blue_Primary-700);color: var(--color-white);} .portal-cliente-como-funciona .card h3 {margin: 0;font-size: 20px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-600);} .portal-cliente-como-funciona .card p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} .portal-cliente-como-funciona .card:hover h3, .portal-cliente-como-funciona .card:hover p {color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} @media (max-width: 991px) { .portal-cliente-como-funciona .passos {flex-direction: column;gap: 1rem;} .portal-cliente-como-funciona .seta {transform: rotate(90deg);font-size: 32px;} } @media (max-width: 768px) { .portal-cliente-como-funciona {padding: 3rem 0 4rem;} .portal-cliente-como-funciona .topo {margin-bottom: 2.5rem;} .portal-cliente-como-funciona .card {padding: 1.5rem;border-radius: 20px;} .portal-cliente-como-funciona .card h3 {font-size: 20px;} } /* ============================================================ Bloco: Portal Cliente Personalizável (page-portal-cliente.php) ============================================================ */ .portal-cliente-personalizavel {width: 100%;padding: 5rem 0;background: var(--Blue_Primary-50);overflow: hidden;} .portal-cliente-personalizavel .conteudo {display: flex;align-items: center;gap: 4rem;justify-content: space-between;} .portal-cliente-personalizavel .col-1 {flex: 0 0 52%;display: flex;flex-direction: column;align-items: flex-start;gap: 1.2rem;} .portal-cliente-personalizavel .col-1 > p {margin: 0;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .portal-cliente-personalizavel h2 {margin: 0;} .portal-cliente-personalizavel__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--color-white);font-weight: 600;font-size: 12px;line-height: 150%;} .portal-cliente-personalizavel__lista {display: flex;flex-direction: column;gap: 1.8rem;margin: 0.6rem 0 0;padding: 0;list-style: none;} .portal-cliente-personalizavel__lista li {display: flex;align-items: center;gap: 0.5rem;} .portal-cliente-personalizavel__lista li > i {flex: 0 0 auto;margin-top: 0.4rem;color: var(--Blue_Primary-600);font-size: 26px;} .portal-cliente-personalizavel__lista h3 {margin: 0 0 14px;font-size: 16px;font-weight: 600;line-height: 150%;} .portal-cliente-personalizavel__lista p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} .portal-cliente-personalizavel .col-2 {flex: 1;display: flex;justify-content: center;} .portal-cliente-personalizavel__img {display: block;width: 100%;max-width: 640px;height: auto;} @media (max-width: 991px) { .portal-cliente-personalizavel .conteudo {flex-direction: column;align-items: stretch;gap: 2.5rem;} .portal-cliente-personalizavel .col-1 {flex: 0 0 100%;} } @media (max-width: 768px) { .portal-cliente-personalizavel {padding: 4rem 0;} .portal-cliente-personalizavel__lista h3 {font-size: 16px;} .portal-cliente-personalizavel__lista p {font-size: 14px;} } /* ============================================================ Bloco: Portal Cliente Autoatendimento (page-portal-cliente.php) ============================================================ */ .portal-cliente-autoatendimento {width: 100%;padding: 4rem 0 5rem;background: var(--color-white);} .portal-cliente-autoatendimento .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;max-width: 820px;margin: 0 auto 3.5rem;} .portal-cliente-autoatendimento .topo h2 {margin: 0;} .portal-cliente-autoatendimento .topo p {margin: 0;color: var(--Alfa-Oxford-75);} .portal-cliente-autoatendimento__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-950);font-weight: 600;font-size: 12px;line-height: 150%;} .portal-cliente-autoatendimento .recursos {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2.5rem 3rem;} .portal-cliente-autoatendimento .recurso {display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;} .portal-cliente-autoatendimento .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 0.7rem;border-radius: 16px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 22px;} .portal-cliente-autoatendimento .recurso h3 {margin: 0;font-size: 16px;font-weight: 600;line-height: 150%;} .portal-cliente-autoatendimento .recurso p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} @media (max-width: 991px) { .portal-cliente-autoatendimento .recursos {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .portal-cliente-autoatendimento {padding: 3rem 0 4rem;} .portal-cliente-autoatendimento .topo {margin-bottom: 2.5rem;} .portal-cliente-autoatendimento .recursos {grid-template-columns: 1fr;gap: 2rem;} .portal-cliente-autoatendimento .recurso h3 {font-size: 18px;} .portal-cliente-autoatendimento .recurso p {font-size: 14px;} } /* ============================================================ Bloco: Portal Cliente Benefícios (page-portal-cliente.php) ============================================================ */ .portal-cliente-beneficios {width: 100%;position: relative;overflow: hidden;padding: 5rem 0;background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, linear-gradient(180deg, #1b45e9 0%, #0C235F 100%);} .portal-cliente-beneficios .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;margin: 0 auto 2.5rem;} .portal-cliente-beneficios .topo h2 {margin: 0;color: var(--color-white);} .portal-cliente-beneficios__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-800);color: var(--color-white);/* font-weight: 600; */font-size: 12px;line-height: 150%;} .portal-cliente-beneficios .cards {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;} .portal-cliente-beneficios .card {display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;padding: 13px;border-radius: 12px;background: rgba(255, 255, 255, 0.08);} .portal-cliente-beneficios .card:hover {background: var(--Blue_Primary-600);} .portal-cliente-beneficios .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 0.5rem;border-radius: 16px 8px;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 22px;} .portal-cliente-beneficios .card:hover .icone {background: var(--color-white);color: var(--Blue_Primary-600);} .portal-cliente-beneficios .card h3 {margin: 0;font-size: 20px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-50);} .portal-cliente-beneficios .card p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));letter-spacing: -1%;} @media (max-width: 991px) { .portal-cliente-beneficios .cards {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .portal-cliente-beneficios {padding: 4rem 0;} .portal-cliente-beneficios .cards {grid-template-columns: 1fr;} } /* ============================================================ Bloco: Solução Completa 01 (NFS-e, Régua Anti-inadimplência e SERASA) ============================================================ */ .solucao-completa-01 {background-color: #fff;padding: 4rem 0;} .solucao-completa-01 .conteudo {position: relative;} .solucao-completa-01 h2 {text-align: center;margin: auto;letter-spacing: -2%;color: var(--Blue_Primary-950);} .solucao-completa-01 .cards {display: flex;gap: 6px;flex-wrap: wrap;justify-content: space-between;margin-top: 2rem;} .solucao-completa-01 .cards .card {width: 32%;display: flex;flex-direction: column;gap: 1rem;text-align: left;margin: 3rem 0 0 0;} .solucao-completa-01 .cards .card h2 {text-align: left;margin: 0;font-size: 24px;min-height: 75px;} .solucao-completa-01 .cards .card p {margin: 0;font-size: 14px;min-height: 65px;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));letter-spacing: -2%;} .solucao-completa-01 .cards .card a {padding: 0;min-height: auto;width: fit-content;color: var(--Blue_Primary-600);border-radius: 0;} .solucao-completa-01 .cards .card a span {border-bottom: 1px solid var(--Blue_Primary-600);text-decoration: none;} .solucao-completa-01 .cards .card a i {transform: rotate(0deg);opacity: 1;} .solucao-completa-01 .cards .card .imagem {/* background: var(--Blue_Primary-50); *//* padding: 2rem 2rem 0; *//* border-radius: 28px; */margin: 20px 0 0 0;} .solucao-completa-01 .cards .card .imagem img {display: block;width: 100%;height: auto;} @media (max-width: 768px) { .solucao-completa-01 .cards {flex-direction: column;gap: 4rem;} .solucao-completa-01 .cards .card {width: 100%;margin: 0;gap: 16px;} } /* ============================================================ Bloco: Consulta Negativação Público (carrossel de cards) ============================================================ */ .consulta-negativacao-publico {--per-view: 4;--gap-cards: 1.5rem;background: var(--Blue_Primary-50);padding: 4rem 0 5rem;} .consulta-negativacao-publico h2 {text-align: center;max-width: 780px;margin: 0 auto 3rem;font-size: 24px;color: var(--Blue_Primary-950);} .consulta-negativacao-publico .carrossel__viewport {overflow: hidden;padding: 4px;margin: -4px;} .consulta-negativacao-publico .carrossel__track {display: flex;gap: var(--gap-cards);transition: transform 500ms ease;will-change: transform;} .consulta-negativacao-publico .carrossel__slide {flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap-cards)) / var(--per-view));display: flex;} .consulta-negativacao-publico .card {width: 100%;display: flex;flex-direction: column;gap: 1rem;padding: 20px 15px;background: #fff;border: 1px solid var(--Blue_Primary-100, #e6eefc);border-radius: 24px;} .consulta-negativacao-publico .tags {display: flex;flex-wrap: wrap;gap: .5rem;} .consulta-negativacao-publico .tag {display: inline-flex;align-items: center;padding: 6px 22px;border: 1px solid var(--Blue_Primary-600);border-radius: 999px;color: var(--Blue_Primary-600);font-size: 12px;line-height: 150%;} .consulta-negativacao-publico .tag--extra {border-color: transparent;background: var(--Blue_Primary-50);padding: 6px 16px;} .consulta-negativacao-publico .card h3 {margin: 8px 0 0;font-size: 20px;font-weight: 600;line-height: 130%;color: var(--Blue_Primary-950);} .consulta-negativacao-publico .card p {margin: 0;font-size: 14px;line-height: 175%;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .consulta-negativacao-publico .card .btn_primary {margin-top: auto;width: 100%;justify-content: center;} .consulta-negativacao-publico .carrossel__dots {display: flex;gap: 8px;align-items: center;margin-top: 2rem;} .consulta-negativacao-publico .dot {width: 14px;height: 14px;border-radius: 50%;border: none;padding: 0;cursor: pointer;background: var(--Blue_Primary-100, #dbe7fb);transition: background 300ms;} .consulta-negativacao-publico .dot.is-active {background: var(--Blue_Primary-600);} @media (max-width: 991px) { .consulta-negativacao-publico {--per-view: 2;} } @media (max-width: 768px) { .consulta-negativacao-publico {--per-view: 1;padding: 3rem 0 4rem;} .consulta-negativacao-publico h2 {margin-bottom: 2rem;} .consulta-negativacao-publico .carrossel__dots {justify-content: center;} } /* ============================================================ Bloco: Consulta Negativação Inadimplência (page-consulta-negativacao.php) ============================================================ */ .consulta-negativacao-inadimplencia {width: 100%;position: relative;overflow: hidden;padding: 6rem 0 6rem;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, linear-gradient(90deg, #1D4FF0 0%, #0F33BE 100%);} .consulta-negativacao-inadimplencia .container {position: relative;z-index: 1;} .consulta-negativacao-inadimplencia .conteudo {max-width: 782px;margin-right: auto;display: flex;flex-direction: column;align-items: flex-start;gap: 1.2rem;} .consulta-negativacao-inadimplencia__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--Blue_Primary-50);font-weight: 500;font-size: 12px;line-height: 150%;} .consulta-negativacao-inadimplencia h2 {margin: 0;color: var(--color-white);font-size: 40px;max-width: 690px;} .consulta-negativacao-inadimplencia p {margin: 0;color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));font-size: 16px;max-width: 690px;} .consulta-negativacao-inadimplencia .cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;width: 100%;margin-top: 2rem;} .consulta-negativacao-inadimplencia .card {display: flex;align-items: center;gap: 6px;padding: 20px 16px;border-radius: 8px;background: var(--Alfa-Oxford-25, rgba(12, 35, 95, 0.25));color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .consulta-negativacao-inadimplencia .card i {font-size: 24px;line-height: 1;margin-top: 4px;} .consulta-negativacao-inadimplencia .card strong {display: block;font-size: 20px;font-weight: 600;line-height: 150%;} .consulta-negativacao-inadimplencia .card span {display: block;font-size: 14px;line-height: 150%;color: rgba(255, 255, 255, 0.75);letter-spacing: -1%;} .consulta-negativacao-inadimplencia__img {position: absolute;top: 3rem;right: 9%;width: 34%;max-width: 680px;height: auto;z-index: 0;pointer-events: none;} @media (max-width: 1199px) { .consulta-negativacao-inadimplencia__img {opacity: .35;} } @media (max-width: 991px) { .consulta-negativacao-inadimplencia .cards {grid-template-columns: 1fr;} .consulta-negativacao-inadimplencia {display: flex;flex-direction: column;} .consulta-negativacao-inadimplencia__img {position: static;display: block;order: 2;width: 80%;max-width: 420px;margin: 2rem auto 0;opacity: 1;} } @media (max-width: 768px) { .consulta-negativacao-inadimplencia {padding: 4rem 0;} } /* ============================================================ Bloco: Consulta Negativação Motores (abas com fade) ============================================================ */ .consulta-negativacao-motores {background: #fff;padding: 5rem 0;} .consulta-negativacao-motores .topo {display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 800px;margin: 0 auto 3rem;} .consulta-negativacao-motores .topo span.elemento-01 {margin-bottom: 1rem;} .consulta-negativacao-motores .topo h3 {margin: 0;font-size: 24px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-950);} .consulta-negativacao-motores .painel {display: grid;grid-template-columns: 1fr 1fr;gap: 1.5rem;padding: 24px;max-width: 994px;margin: 0 auto;border-radius: 24px;background: var(--Blue_Primary-50);} .consulta-negativacao-motores .col-1 {display: flex;flex-direction: column;gap: .75rem;} .consulta-negativacao-motores .etapa {display: flex;align-items: center;gap: 1rem;width: 100%;padding: 14px 1rem .6rem .6rem;border: none;border-radius: 12px;background: #fff;text-align: left;cursor: pointer;font-family: inherit;color: var(--Blue_Primary-950);transition: background 300ms, color 300ms;} .consulta-negativacao-motores .etapa .numero {display: flex;align-items: center;justify-content: center;height: 42px;width: 42px;border-radius: 10px;background: #f1f3f8;font-size: 20px;font-weight: 600;color: #6b7494;letter-spacing: -2%;transition: background 300ms, color 300ms;} .consulta-negativacao-motores .etapa .texto {flex: 1;display: flex;flex-direction: column;} .consulta-negativacao-motores .etapa .texto strong {font-size: 20px;font-weight: 600;line-height: 140%;color: var(--Alfa-Oxford-75, rgba(12, 35, 95, 0.75));} .consulta-negativacao-motores .etapa .texto span {font-size: 16px;line-height: 140%;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} .consulta-negativacao-motores .etapa > i {font-size: 26px;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} .consulta-negativacao-motores .etapa:hover {background: #f7f9ff;} .consulta-negativacao-motores .etapa.is-active {background: var(--Blue_Primary-600);} .consulta-negativacao-motores .etapa.is-active .numero {background: var(--Blue_Primary-900);color: #fff;} .consulta-negativacao-motores .etapa.is-active .texto strong, .consulta-negativacao-motores .etapa.is-active .texto span, .consulta-negativacao-motores .etapa.is-active > i {color: var(--Blue_Primary-50);} .consulta-negativacao-motores .col-2 {display: grid;background: #fff;border-radius: 20px;overflow: hidden;} .consulta-negativacao-motores .conteudo-etapa {grid-area: 1 / 1;display: flex;flex-direction: column;padding: 20px;opacity: 0;visibility: hidden;transition: opacity 400ms ease, visibility 0s linear 400ms;} .consulta-negativacao-motores .conteudo-etapa.is-active {opacity: 1;visibility: visible;transition: opacity 400ms ease, visibility 0s;} .consulta-negativacao-motores .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 16px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 24px;margin-bottom: 1rem;} .consulta-negativacao-motores .conteudo-etapa h4 {margin: 0 0 .5rem;font-size: 20px;font-weight: 600;line-height: 140%;color: var(--Blue_Primary-950);} .consulta-negativacao-motores .conteudo-etapa p {margin: 0 0 1.5rem;font-size: 14px;line-height: 175%;} .consulta-negativacao-motores .conteudo-etapa ul {display: flex;flex-direction: column;gap: .9rem;margin: 0 0 2rem;padding: 0;list-style: none;} .consulta-negativacao-motores .conteudo-etapa li {display: flex;align-items: center;gap: .6rem;font-size: 14px;color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.5));} .consulta-negativacao-motores .conteudo-etapa li i {font-size: 24px;color: var(--Blue_Primary-600);} .consulta-negativacao-motores .conteudo-etapa .imagem {margin-top: auto;} .consulta-negativacao-motores .conteudo-etapa .imagem img {display: block;width: 100%;height: auto;} @media (max-width: 991px) { .consulta-negativacao-motores .painel {grid-template-columns: 1fr;} } @media (max-width: 768px) { .consulta-negativacao-motores {padding: 4rem 0;} .consulta-negativacao-motores .topo h3 {font-size: 24px;} .consulta-negativacao-motores .painel {padding: 1rem;border-radius: 24px;} .consulta-negativacao-motores .etapa .texto strong {font-size: 20px;} .consulta-negativacao-motores .etapa .texto span {font-size: 16px;} .consulta-negativacao-motores .conteudo-etapa {padding: 1.5rem 1.5rem 0;} } /* ============================================================ Bloco: Consulta Negativação Resultado (page-consulta-negativacao.php) ============================================================ */ .consulta-negativacao-resultado {position: relative;overflow: hidden;padding: 6rem 0;background: linear-gradient(0deg, #0B389D 0%, #0C235F 100%);} .consulta-negativacao-resultado .fundo-container {position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;z-index: 0;} .consulta-negativacao-resultado .fundo {display: block;width: 110%;aspect-ratio: 1;position: absolute;top: -50rem;left: -5%;border-radius: 50%;background-color: #051c3d24;} .consulta-negativacao-resultado .fundo div {display: block;width: 82%;aspect-ratio: 1;position: absolute;top: 8%;left: 9%;border-radius: 50%;background-color: #051c3d24;} .consulta-negativacao-resultado .container {position: relative;z-index: 1;} .consulta-negativacao-resultado .conteudo {display: flex;align-items: flex-start;justify-content: space-between;gap: 3rem;} .consulta-negativacao-resultado .col-1 {flex: 0 0 46%;display: flex;flex-direction: column;align-items: flex-start;gap: 1.2rem;} .consulta-negativacao-resultado__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-800);color: var(--Blue_Primary-50);font-weight: 500;font-size: 12px;line-height: 150%;} .consulta-negativacao-resultado h2 {margin: 0;color: var(--color-white);/* max-width: 486px; */} .consulta-negativacao-resultado p {margin: 0;color: var(--Alfa-White-50, rgba(255, 255, 255, 0.5));font-size: 14px;} .consulta-negativacao-resultado .col-2 {flex: 1;display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.1rem;} .consulta-negativacao-resultado .card {display: flex;align-items: center;gap: 1rem;padding: 1.2rem 1.3rem;border-radius: 8px;background: var(--Blue_Primary-950);color: var(--Blue_Primary-50);font-size: 16px;font-weight: 500;line-height: 150%;} .consulta-negativacao-resultado .card i {flex: 0 0 auto;font-size: 28px;color: #2f9e2f;} @media (max-width: 991px) { .consulta-negativacao-resultado .conteudo {flex-direction: column;gap: 2.5rem;} .consulta-negativacao-resultado .col-1 {flex: 0 0 100%;} .consulta-negativacao-resultado .col-2 {width: 100%;} } @media (max-width: 768px) { .consulta-negativacao-resultado {padding: 4rem 0;} .consulta-negativacao-resultado .col-2 {grid-template-columns: 1fr;} } /* ============================================================ Bloco: Solução Completa 02 (NFS-e, Consulta/Negativação SERASA, Portal do cliente e Split) - 2 colunas ============================================================ */ .solucao-completa-02 {background-color: #fff;padding: 4rem 0;} .solucao-completa-02 .conteudo {position: relative;} .solucao-completa-02 h2 {text-align: center;margin: auto;letter-spacing: -2%;color: var(--Blue_Primary-950);} .solucao-completa-02 .conteudo > h2 {max-width: 780px;} .solucao-completa-02 .cards {display: flex;gap: 2rem;flex-wrap: wrap;justify-content: space-between;margin-top: 4rem;} .solucao-completa-02 .cards .card {width: calc(50% - 1rem);display: flex;flex-direction: column;gap: 1rem;text-align: left;margin: 3rem 0 0 0;} .solucao-completa-02 .cards .card h2 {text-align: left;margin: 0;font-size: 32px;} .solucao-completa-02 .cards .card p {margin: 0;font-size: 16px;min-height: 56px;} .solucao-completa-02 .cards .card a {padding: 0;min-height: auto;width: fit-content;margin-bottom: 1rem;color: var(--Blue_Primary-600);border-radius: 0;} .solucao-completa-02 .cards .card a span {border-bottom: 1px solid var(--Blue_Primary-600);text-decoration: none;} .solucao-completa-02 .cards .card a i {transform: rotate(0deg);opacity: 1;} .solucao-completa-02 .cards .card .imagem img {display: block;width: 100%;height: auto;} @media (max-width: 768px) { .solucao-completa-02 .conteudo > h2 {font-size: 24px;} .solucao-completa-02 .cards {flex-direction: column;gap: 4rem;} .solucao-completa-02 .cards .card {width: 100%;margin: 0;gap: 16px;} .solucao-completa-02 .cards .card h2 {font-size: 24px;} .solucao-completa-02 .cards .card p {min-height: 0;} } /* ===== Page régua de cobrança: Como funciona ===== */ .regua-cobranca-como-funciona {width: 100%;padding: 4rem 0 5rem;background: var(--color-white);overflow: hidden;} .regua-cobranca-como-funciona .container {max-width: 1000px;} .regua-cobranca-como-funciona .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;max-width: 820px;margin: 0 auto 4rem;} .regua-cobranca-como-funciona .topo h2 {margin: 0;} .regua-cobranca-como-funciona .topo p {margin: 0;color: var(--Alfa-Oxford-75);} .regua-cobranca-como-funciona__tag {display: inline-flex;align-items: center;padding: 0.6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-600);color: var(--color-white);font-weight: 600;font-size: 14px;line-height: 150%;} .regua-cobranca-como-funciona .passo {position: relative;display: grid;grid-template-columns: 1fr 64px 1fr;align-items: center;} .regua-cobranca-como-funciona .passo:not(:last-child)::before {content: "";position: absolute;left: 50%;top: 50%;width: 2px;height: 100%;margin-left: -1px;background: var(--Blue_Primary-600);} .regua-cobranca-como-funciona .marcador {grid-column: 2;grid-row: 1;position: relative;z-index: 1;display: flex;align-items: center;justify-content: center;width: 54px;height: 54px;border-radius: 50%;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 20px;font-weight: 700;box-shadow: 0 0 0 3px var(--color-white), 0 4px 12px rgba(12, 35, 95, 0.2);} .regua-cobranca-como-funciona .lado {grid-row: 1;display: flex;align-items: center;margin: 1.2rem 0;} .regua-cobranca-como-funciona .lado.esq {grid-column: 1;} .regua-cobranca-como-funciona .lado.dir {grid-column: 3;flex-direction: row-reverse;} .regua-cobranca-como-funciona .lado .conector {flex: 1;min-width: 1rem;border-top: 1px dashed var(--Blue_Primary-600);} .regua-cobranca-como-funciona .card {flex: 0 1 380px;display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;padding: 1.2rem 1.3rem 1.4rem;border-radius: 12px;background: #f2f5f9;} .regua-cobranca-como-funciona .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: 0.5rem;border-radius: 16px 8px;background: #fff;color: var(--Blue_Primary-600);font-size: 22px;} .regua-cobranca-como-funciona .card h3 {margin: 0;font-size: 16px;font-weight: 600;line-height: 150%;} .regua-cobranca-como-funciona .card p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);} @media (max-width: 768px) { .regua-cobranca-como-funciona {padding: 3rem 0 4rem;background: var(--Blue_Primary-50);} .regua-cobranca-como-funciona .topo {margin-bottom: 2.5rem;} .regua-cobranca-como-funciona .passo {grid-template-columns: 64px 1fr;column-gap: 0.1rem;} .regua-cobranca-como-funciona .passo::before {left: 32px;} .regua-cobranca-como-funciona .marcador {grid-column: 1;width: 48px;height: 48px;font-size: 18px;} .regua-cobranca-como-funciona .lado.esq, .regua-cobranca-como-funciona .lado.dir {grid-column: 2;flex-direction: row;} .regua-cobranca-como-funciona .lado .conector {display: none;} .regua-cobranca-como-funciona .card {flex: 1;background: rgba(255, 255, 255, 0.8);} .regua-cobranca-como-funciona .card h3{font-size:14px} .regua-cobranca-como-funciona .card p{font-size:12px} .regua-cobranca-como-funciona .passo:not(:last-child)::before{left:calc(48px / 2);} } /* ===== Page régua de cobrança: Perfis ===== */ .regua-cobranca-perfis {width: 100%;padding: 4rem 0 5rem;background: var(--color-white);overflow: hidden;} .regua-cobranca-perfis .container {max-width: 1180px;} .regua-cobranca-perfis .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1rem;max-width: 720px;margin: 0 auto 3rem;} .regua-cobranca-perfis .topo h2 {margin: 0;} .regua-cobranca-perfis .topo p {margin: 0;color: var(--Alfa-Oxford-75);} .regua-cobranca-perfis .conteudo {display: flex;align-items: stretch;gap: 1.2rem;} .regua-cobranca-perfis .legenda {flex: 0 0 auto;display: flex;flex-direction: column;justify-content: center;gap: 1.1rem;margin: 0;padding: 12px 6px;list-style: none;border-radius: 16px;background: #f2f5f9;width: 180px;} .regua-cobranca-perfis .legenda li {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-950);} .regua-cobranca-perfis .legenda i {font-size: 32px;} .regua-cobranca-perfis .legenda .azul i {color: var(--Blue_Primary-600);} .regua-cobranca-perfis .legenda .verde i {color: #43a02a;} .regua-cobranca-perfis .legenda .laranja i {color: #f58220;} .regua-cobranca-perfis .legenda .vermelho i {color: #d0202e;} .regua-cobranca-perfis .linha-tempo {flex: 1;display: flex;margin: 0;padding: 1.5rem 1rem 1.2rem;list-style: none;border-radius: 16px;background: #f2f5f9;} .regua-cobranca-perfis .etapa {flex: 1;position: relative;display: flex;flex-direction: column;align-items: center;text-align: center;min-width: 0;} .regua-cobranca-perfis .rotulo {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 8.5rem;font-size: 14px;line-height: 150%;color: var(--Blue_Primary-950);} .regua-cobranca-perfis .dia {margin-top: 3.4rem;font-size: 14px;font-weight: 600;line-height: 150%;color: var(--Blue_Primary-950);} .regua-cobranca-perfis .ponto {position: relative;display: block;width: 100%;height: 20px;margin: .8rem 0 .7rem;} .regua-cobranca-perfis .ponto::before {content: "";position: absolute;left: 50%;top: 8px;width: 100%;height: 4px;background: var(--cor);} .regua-cobranca-perfis .ponto::after {content: "";position: absolute;left: 50%;top: 0;width: 18px;height: 18px;margin-left: -10px;border-radius: 50%;background: var(--cor);z-index: 1;} .regua-cobranca-perfis .etapa:last-child .ponto::before {display: none;} .regua-cobranca-perfis .etapa.cinza {--cor: #b9bfd0;} .regua-cobranca-perfis .etapa.azul {--cor: var(--Blue_Primary-600);} .regua-cobranca-perfis .etapa.verde {--cor: #43a02a;} .regua-cobranca-perfis .etapa.laranja {--cor: #f58220;} .regua-cobranca-perfis .canais {display: flex;align-items: center;justify-content: center;gap: 0px;color: var(--Alfa-Oxford-50);font-size: 20px;} @media (max-width: 991px) { .regua-cobranca-perfis .conteudo {flex-direction: column;} .regua-cobranca-perfis .legenda {justify-content: flex-start;padding: 1.2rem; width: 100%;} .regua-cobranca-perfis .linha-tempo {flex-direction: column;padding: 1.5rem 1rem;} .regua-cobranca-perfis .etapa {display: grid;grid-template-columns: 1fr 24px 1fr;grid-template-rows: auto auto;column-gap: 1.2rem;align-items: center;min-height: 6.5rem;} .regua-cobranca-perfis .rotulo {position: static;transform: none;width: auto;grid-column: 1;grid-row: 1;align-self: end;text-align: center;font-size: 14px;} .regua-cobranca-perfis .dia {grid-column: 1;grid-row: 2;align-self: start;margin: 0;text-align: center;} .regua-cobranca-perfis .etapa:not(:has(.rotulo)) .dia {grid-row: 1 / span 2;align-self: center;} .regua-cobranca-perfis .ponto {grid-column: 2;grid-row: 1 / span 2;align-self: stretch;height: auto;margin: 0;} .regua-cobranca-perfis .ponto::before {left: 50%;top: 50%;width: 4px;height: 100%;margin-left: -2px;} .regua-cobranca-perfis .ponto::after {top: 50%;margin-top: -10px;} .regua-cobranca-perfis .canais {grid-column: 3;grid-row: 1 / span 2;justify-content: flex-start;} } /* ===== Page régua de cobrança: Reduzir inadimplência ===== */ .regua-cobranca-reduzir {width: 100%;padding: 4rem 0 5rem;background: var(--Blue_Primary-50);overflow: hidden;} .regua-cobranca-reduzir .container {max-width: 1180px;} .regua-cobranca-reduzir .topo {text-align: center;margin-bottom: 3rem;} .regua-cobranca-reduzir .topo h2 {margin: 0;} .regua-cobranca-reduzir .conteudo {display: flex;align-items: center;justify-content: space-between;gap: 2.5rem;} .regua-cobranca-reduzir .col-1 {flex: 0 0 56%;display: grid;grid-template-columns: repeat(2, 1fr);gap: 2.6rem 1.5rem;} .regua-cobranca-reduzir .item {display: flex;align-items: flex-start;gap: .8rem;} .regua-cobranca-reduzir .icone {flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;margin-top: 2.2rem;color: var(--Blue_Primary-600);font-size: 26px;} .regua-cobranca-reduzir .texto {display: flex;flex-direction: column;gap: .5rem;} .regua-cobranca-reduzir .item h3 {margin: 0;font-size: 16px;font-weight: 600;line-height: 150%;} .regua-cobranca-reduzir .item p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);} .regua-cobranca-reduzir .col-2 {flex: 1;display: flex;justify-content: center;} .regua-cobranca-reduzir__img {display: block;width: 100%;max-width: 460px;height: auto;} @media (max-width: 991px) { .regua-cobranca-reduzir .conteudo {flex-direction: column;gap: 3rem;} .regua-cobranca-reduzir .col-1 {flex: 0 0 100%;width: 100%;} } @media (max-width: 768px) { .regua-cobranca-reduzir {padding: 3rem 0 4rem;} .regua-cobranca-reduzir .topo {margin-bottom: 2.5rem;} .regua-cobranca-reduzir .col-1 {grid-template-columns: 1fr;gap: 2rem;} .regua-cobranca-reduzir .icone {margin-top: 0;} } /* ===== Page régua de cobrança: Comparativo ===== */ .regua-cobranca-comparativo {width: 100%;position: relative;overflow: hidden;padding: 5rem 0 6rem;color: #fff;background: url('assets/images/sessao-bg-1.png') center center / cover no-repeat fixed, #0C235F;} .regua-cobranca-comparativo .container {max-width: 1180px;position: relative;z-index: 1;} .regua-cobranca-comparativo .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1.2rem;max-width: 800px;margin: 0 auto 3.5rem;} .regua-cobranca-comparativo .topo h2 {margin: 0;color: #fff;} .regua-cobranca-comparativo .topo p {margin: 0;color: rgba(255, 255, 255, .75);} .regua-cobranca-comparativo .comparativo {display: flex;align-items: flex-start;justify-content: center;gap: 2rem;} .regua-cobranca-comparativo .card {flex: 1;max-width: 486px;padding: 34px 10px 10px;border: 1px solid var(--borda);background: var(--fundo);backdrop-filter: blur(6px);} .regua-cobranca-comparativo .card.sem {--borda: #d0202e;--fundo: rgba(120, 30, 90, .35);--ponto: #e5242f;--icone: #d0202e;} .regua-cobranca-comparativo .card.com {--borda: #43a02a;--fundo: rgba(30, 110, 110, .3);--ponto: #43b02a;--icone: #43a02a;border-radius: 6px 60px 6px 6px;} .regua-cobranca-comparativo .card.sem {border-radius: 60px 6px 6px 6px;max-width: 486px;} .regua-cobranca-comparativo .card-topo {display: flex;align-items: center;gap: 1rem;margin-bottom: 1.3rem;} .regua-cobranca-comparativo .card-topo .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 16px 8px;background: var(--icone);color: #fff;font-size: 28px;} .regua-cobranca-comparativo .card-topo h3 {margin: 0;color: #fff;font-size: 32px;font-weight: 600;line-height: 130%;} .regua-cobranca-comparativo ul {display: flex;flex-direction: column;gap: .7rem;margin: 0;padding: 0;list-style: none;} .regua-cobranca-comparativo li {position: relative;padding: 1.1rem 1rem 1.1rem 2.2rem;border-radius: 8px;background: rgba(255, 255, 255, .06);font-size: 16px;line-height: 150%;font-weight: 300;color: rgba(255, 255, 255, .85);background: rgba(197, 27, 41, 0.1);background: rgba(63, 160, 38, 0.1);} .regua-cobranca-comparativo li::before {content: "";position: absolute;left: 1rem;top: 50%;width: 8px;height: 8px;margin-top: -4px;border-radius: 50%;background: var(--ponto);} .regua-cobranca-comparativo li strong {font-weight: 500;color: var(--Blue_Primary-50);font-size: 16px;letter-spacing: 0%;} @media (max-width: 991px) { .regua-cobranca-comparativo .comparativo {flex-direction: column;align-items: stretch;} .regua-cobranca-comparativo .card {max-width: none;} } @media (max-width: 768px) { .regua-cobranca-comparativo {padding: 3.5rem 0 4rem;} .regua-cobranca-comparativo .topo {margin-bottom: 2.5rem;} .regua-cobranca-comparativo .card {border-radius: 32px 6px 6px 6px !important;} .regua-cobranca-comparativo .card-topo h3 {font-size: 24px;} .regua-cobranca-comparativo li {font-size: 14px;} } /* ===== Page régua de cobrança: Para quem é ===== */ .regua-cobranca-publico {width: 100%;padding: 4rem 0 5rem;background: var(--color-white);} .regua-cobranca-publico .container {max-width: 1180px;} .regua-cobranca-publico .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1.2rem;max-width: 940px;margin: 0 auto 3.5rem;} .regua-cobranca-publico .topo h2 {margin: 0;} .regua-cobranca-publico__tag {display: inline-flex;align-items: center;padding: .6rem 1.3rem;border-radius: 999px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-950);font-size: 14px;font-weight: 500;line-height: 150%;} .regua-cobranca-publico .grid-publico {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2.2rem 1.5rem;} .regua-cobranca-publico .item {display: flex;flex-direction: column;align-items: flex-start;gap: .6rem;} .regua-cobranca-publico .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-bottom: .5rem;border-radius: 16px 8px;background: var(--Blue_Primary-50);color: var(--Blue_Primary-600);font-size: 22px;} .regua-cobranca-publico .item h3 {margin: 0;font-size: 18px;font-weight: 600;line-height: 150%;} .regua-cobranca-publico .item p {margin: 0;font-size: 14px;line-height: 150%;color: var(--Alfa-Oxford-50);} .regua-cobranca-publico .item p strong {font-weight: 400;color: var(--Blue_Primary-950);} @media (max-width: 991px) { .regua-cobranca-publico .grid-publico {grid-template-columns: repeat(2, 1fr);} } @media (max-width: 768px) { .regua-cobranca-publico {padding: 3rem 0 4rem;} .regua-cobranca-publico .topo {margin-bottom: 2.5rem;} .regua-cobranca-publico .grid-publico {grid-template-columns: 1fr;} } /* ===== Page régua de cobrança: Ecossistema ===== */ .regua-cobranca-ecossistema {width: 100%;overflow: hidden;padding: 5rem 0 6rem;color: #fff;background: linear-gradient(180deg, #0C235F 0%, #14349A 100%);} .regua-cobranca-ecossistema .container {max-width: 1180px;} .regua-cobranca-ecossistema .topo {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 1.2rem;max-width: 820px;margin: 0 auto 2.5rem;} .regua-cobranca-ecossistema .topo h2 {margin: 0;color: #fff;max-width: 49rem;} .regua-cobranca-ecossistema .topo p {margin: 0;font-size: 14px;color: var(--Alfa-White-50, rgba(255, 255, 255, 0.5));} .regua-cobranca-ecossistema__tag {display: inline-flex;align-items: center;padding: .6rem 1.3rem;border-radius: 999px;background: #1135c0;color: #fff;font-size: 12px;font-weight: 500;line-height: 150%;} .regua-cobranca-ecossistema .palco {position: relative;width: 100%;max-width: 900px;aspect-ratio: 1;margin: 0 auto;} .regua-cobranca-ecossistema .anel {position: absolute;left: 50%;top: 50%;border-radius: 50%;transform: translate(-50%, -50%);} .regua-cobranca-ecossistema .anel-1 {width: 639px;height: 639px;border: 2px dashed rgba(255, 255, 255, .25);} .regua-cobranca-ecossistema .anel-2 {width: 507px;height: 507px;border: 1px solid rgba(255, 255, 255, .1);} .regua-cobranca-ecossistema .anel-3 {width: 47%;aspect-ratio: 1;height: 47%;border: 1px solid rgba(255, 255, 255, .12);background: radial-gradient(circle at 50% 50%, rgba(21, 60, 200, .55) 0%, rgba(17, 51, 170, .25) 100%);} .regua-cobranca-ecossistema .centro {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 50%;display: flex;flex-direction: column;align-items: center;text-align: center;gap: .4rem;} .regua-cobranca-ecossistema .centro-logo {width: 12%;min-width: 48px;height: auto;margin-bottom: .6rem;} .regua-cobranca-ecossistema .centro strong {font-size: clamp(18px, 4.6vw, 42px);font-weight: 700;line-height: 120%;font-size: 32px;color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .regua-cobranca-ecossistema .centro span {font-size: clamp(11px, 2.2vw, 20px);font-weight: 500;line-height: 140%;color: rgba(255, 255, 255, .85);font-size: 16px;color: var(--Alfa-White-75, rgba(255, 255, 255, 0.75));} .regua-cobranca-ecossistema .orbita {position: absolute;transform: translate(-50%, -50%);display: flex;flex-direction: column;align-items: center;} .regua-cobranca-ecossistema .orbita .icone {display: inline-flex;align-items: center;justify-content: center;gap: 10px;min-width: 40px;height: 40px;padding: 0 10px;border-radius: 16px 8px;background: #0a4cff;color: #fff;font-size: 22px;transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;} .regua-cobranca-ecossistema .orbita:hover .icone {transform: scale(1.18);box-shadow: 0 8px 24px rgba(10, 76, 255, .5);} .regua-cobranca-ecossistema .orbita .rotulo {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);width: 6rem;margin-top: .6rem;font-size: 14px;line-height: 150%;text-align: center;color: #fff;} .regua-cobranca-ecossistema .palco-mobile {display: none;} @media (max-width: 768px) { .regua-cobranca-ecossistema {padding: 3.5rem 0 4rem;} .regua-cobranca-ecossistema .topo {margin-bottom: 2rem;} .regua-cobranca-ecossistema .orbita .icone {gap: 6px;min-width: 38px;height: 38px;padding: 0 8px;border-radius: 10px 4px 10px 10px;font-size: 18px;} .regua-cobranca-ecossistema .orbita .rotulo {width: 6.5rem;margin-top: .3rem;font-size: 12px;} .regua-cobranca-ecossistema .palco {display: none;} .regua-cobranca-ecossistema .palco-mobile {display: block;} } /* ===== Page régua de cobrança: Tipos de links de pagamentos ===== */ .regua-cobranca-links { padding: 6rem 0; overflow: hidden; } .regua-cobranca-links .topo { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; } .regua-cobranca-links .col-1 { display: flex; flex-direction: column; gap: 0.75rem; } .regua-cobranca-links .eyebrow { font-size: 14px; font-weight: 600; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); } .regua-cobranca-links h2 { margin: 0; } .regua-cobranca-links .cor-azul { color: var(--Blue_Primary-600); } .regua-cobranca-links .btn_primary { flex-shrink: 0; } .regua-cobranca-links .carrossel-viewport { overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); } .regua-cobranca-links .carrossel-track { display: flex; flex-wrap: nowrap; gap: 1.5rem; transition: transform 1000ms ease-in-out; } .regua-cobranca-links .card {flex: 0 0 calc((100% - 3rem) / 2.4);display: flex;flex-direction: column;gap: 14px;background: var(--Blue_Primary-50);border-radius: 16px;padding: 2rem 1.2rem 0;min-height: 28rem;overflow: hidden;} .regua-cobranca-links .card i {font-size: 1.75rem;color: var(--Blue_Primary-600);margin: 0 0 6px 0;} .regua-cobranca-links .card h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--Blue_Primary-950); } .regua-cobranca-links .card p { margin: 0; font-size: 14px; line-height: 150%; color: var(--Alfa-Oxford-50, rgba(12, 35, 95, 0.6)); } .regua-cobranca-links .card .imagem {margin-top: auto;overflow: hidden;background: var(--Blue_Primary-600);border-radius: 1.5rem 1.5rem 0 0;padding: 1.5rem 1rem 0;} .regua-cobranca-links .card .imagem img {display: block;width: 100%;height: auto;} .regua-cobranca-links .dots {display: flex;justify-content: flex-start;align-items: center;gap: 0px;margin-top: 2.5rem;} .regua-cobranca-links .dots .dot {position: relative;width: 20px;height: 10px;background: transparent;border: none;padding: 0;cursor: pointer;} .regua-cobranca-links .dots .dot::after {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 10px;height: 10px;border-radius: 999px;background: var(--Blue_Primary-200, #bfdbfe);transition: width 300ms, left 300ms, background 300ms;} .regua-cobranca-links .dots .dot.is-active::after {left: 0;transform: none;width: 20px;background: var(--Blue_Primary-600, #2563eb);} /* Fallback (antes do JS calcular a largura em px) ------------ */ @media (max-width: 1024px) { .regua-cobranca-links .card { flex-basis: 60%; } } @media (max-width: 767px) { .regua-cobranca-links .card { flex-basis: 88%; } } /* Responsivo -------------------------------------------------- */ @media (max-width: 767px) { .regua-cobranca-links { padding: 3.5rem 0; } .regua-cobranca-links .topo { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; } .regua-cobranca-links .btn_primary { width: 100%; justify-content: center; } .regua-cobranca-links h2 { font-size: 28px; } } /* ============================================================ Bloco: Empresa Universo (page-empresa.php) ============================================================ */ .empresa-universo {width: 100%;padding: 5rem 0;text-align: center;background: url(assets/images/sessao-bg-1.png) center center / cover no-repeat fixed, radial-gradient(61.36% 54.43% at 50% 81.07%, #0b3ce1 0%, #0e33bf 100%);} .empresa-universo h2 {margin: 0 0 2.5rem;} .empresa-universo .cards {display: flex;justify-content: center;gap: 1.5rem;max-width: 58rem;margin: 0 auto;} .empresa-universo .card {flex: 1 1 0;display: flex;flex-direction: column;gap: 8px;padding: 1.5rem;text-align: left;border: 1px solid rgb(255 255 255 / 30%); border-bottom: 0px;border-radius: 8px 8px 0px 0px;background: linear-gradient(180deg, rgb(0 0 0 / 29%) 0%, rgb(157 157 157 / 9%) 99%);} .empresa-universo .card .icone {display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin: 0 0 8px;border-radius: 12px 6px;background: var(--Blue_Primary-600);color: var(--color-white);font-size: 24px;} .empresa-universo .card h3 {margin: 0;font-size: 20px;color: var(--color-white);} .empresa-universo .card p {margin: 0;font-size: 14px;line-height: 150%;color: rgb(255 255 255 / 68%);} .empresa-universo .card strong {color: var(--color-white);font-weight: 700;} @media (max-width: 768px) { .empresa-universo {padding: 4rem 0;} .empresa-universo h2 {font-size: 28px;} .empresa-universo .cards {flex-direction: column;} } /* ============================================================ Bloco: Empresa Quem Somos (page-empresa.php) ============================================================ */ .empresa-quem-somos {padding: 5rem 0;background: #fff;} .empresa-quem-somos .conteudo {display: flex;align-items: center;justify-content: space-between;gap: 1rem;} .empresa-quem-somos .col-1 {flex: 1 1 50%;display: flex;flex-direction: column;gap: 2rem;} .empresa-quem-somos .col-2 {flex: 1 1 50%;display: flex;justify-content: center;} .empresa-quem-somos__bloco h2 {font-size: 1.75rem;margin: 0 0 1rem;} .empresa-quem-somos__bloco p {margin: 0;} .empresa-quem-somos__divisor {display: block;width: 100%;height: 3px;border-radius: 999px;background: linear-gradient(90deg, var(--Blue_Primary-300) 0%, var(--Blue_Primary-600) 45%, var(--Blue_Primary-950) 100%);} .empresa-quem-somos__img {display: block;width: 100%;max-width: 450px;height: auto;} @media (max-width: 991px) { .empresa-quem-somos .conteudo {flex-direction: column;gap: 2.5rem;} .empresa-quem-somos .col-1, .empresa-quem-somos .col-2 {flex: 0 0 100%;max-width: 100%;width: 100%;} .empresa-quem-somos .col-2 {order: -1;} } @media (max-width: 768px) { .empresa-quem-somos {padding: 3rem 0;} .empresa-quem-somos__img {max-width: 340px;} } /* ============================================================ Bloco: Empresa Conecte-se (page-empresa.php) ============================================================ */ .empresa-conecte-se {position: relative;display: flex;align-items: center;min-height: 540px;padding: 4rem 0;background: #fff;overflow: hidden;} .empresa-conecte-se__media {position: absolute;top: 0;left: 0;width: 50%;height: 100%;} .empresa-conecte-se__img {display: block;width: 100%;height: 100%;object-fit: cover;object-position: right center;} .empresa-conecte-se .container {position: relative;z-index: 1;} .empresa-conecte-se .conteudo {width: 50%;margin-left: 50%;padding-left: 4rem;} .empresa-conecte-se h2 {margin: 0 0 1rem;line-height: 130%;} .empresa-conecte-se p {margin: 0 0 1.5rem;max-width: 34rem;font-size: 14px;color: var(--Blue_Primary-950);} .empresa-conecte-se .btn_primary {width: fit-content;} @media (max-width: 991px) { .empresa-conecte-se {flex-direction: column;align-items: stretch;min-height: 0;padding: 0 0 3rem;} .empresa-conecte-se__media {position: static;width: 100%;height: auto;margin: 0 0 2.5rem;} .empresa-conecte-se__img {height: auto;} .empresa-conecte-se .conteudo {width: 100%;margin-left: 0;padding-left: 0;} .empresa-conecte-se p {max-width: 100%;} } @media (max-width: 768px) { .empresa-conecte-se h2 {font-size: 28px;} .empresa-conecte-se .btn_primary {width: 100%;justify-content: center;} }