/* 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%; */max-width: 35%;} .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: -12rem;text-align: left;width: 93%;z-index: 1;position: relative;} .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;} } /* ===== 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 .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: 1rem;align-items: flex-start;} .banner-app .loja-btn{display: flex;align-items: center;gap: .75rem;background: var(--Blue_Primary-700);border-radius: 2rem;padding: .75rem 1.75rem;color: #fff;text-decoration: none;width: fit-content;} .banner-app .loja-btn:hover{background: var(--Blue_Primary-800);text-decoration: none;} .banner-app .loja-btn i{font-size: 28px;} .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;} .banner-app h2{font-size: 1.75rem;} .banner-app .col-imagens{height: 24rem;} .banner-app .col-lojas{flex-direction: column;align-items: 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: 1;} .bloco-acc2__col-left {order: 2;} .bloco-acc2__item {display: none;} .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 2rem;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);} .boleto-emissao .card-item p {} @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;} .boleto-oferta .btn_primary{width: fit-content;} .boleto-oferta .zero{position:absolute;font-size: 12rem;display: flex;flex-direction: column;gap: 0;z-index: 0;opacity: 0.06;right: 0;} .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: 208px;} .boleto-oferta .selo-image{top: 0;position: absolute;right: 0;} @media (max-width: 767px) { .boleto-oferta {padding: 5rem 0;} .boleto-oferta .conteudo{flex-direction: column;gap: 3rem;} .boleto-oferta .conteudo .col-1{order: 2;max-width:none;} .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%;} } /* ===== Bloco: boleto-personalizacao ===== */ /* ============================================================= Bloco: Boleto Personalização ============================================================= */ .boleto-personalizacao {width: 100%;padding: 6rem 0;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: 1rem;} .boleto-personalizacao .topo h2 {max-width: 680px;} /* Corpo */ .boleto-personalizacao .corpo {display: flex;gap: 4rem;align-items: center;} .boleto-personalizacao .col-imagem {flex: 1;min-width: 0;} .boleto-personalizacao .col-imagem img {width: 100%;height: auto;display: block;border-radius: 1rem;box-shadow: 0 16px 48px rgba(0,0,0,.12);} /* Features */ .boleto-personalizacao .col-features {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 2rem;} .boleto-personalizacao .lista-features {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;justify-content: space-between;min-height: 29rem;} .boleto-personalizacao .feature-item {display: flex;gap: 1rem;align-items: flex-start;cursor: pointer;} .boleto-personalizacao .feature-icon {width: 47px;/* height: 42px; */aspect-ratio: 1;flex-shrink: 0;display: flex;align-items: center;justify-content: center;background: #ffffff;border-radius: 34% 11%;color: var(--Blue_Primary-600);font-size: 1.25rem;} .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, .boleto-personalizacao .fundo div{background-color:#4f7ec31a} .boleto-personalizacao .feature-item:hover .feature-icon{width: 4rem;font-size: 34px;} .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;} .boleto-personalizacao .col-imagem {width: 100%;order: 2;} .boleto-personalizacao .col-features {order: 1;} .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;} .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;} .cfc__flow-upper > .cfc__steps-row:last-of-type {/*margin-bottom: 0;*/} /* 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;} .cfc__final .cfc__card--5 {/* width: 100%; */} /* 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;align-items: center;gap: 2px;background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%), var(--Blue_Primary-600);color: #fff;font-size: 12px;font-weight: 700;padding: 12px 12px;border-radius: 8px;} .cfc__btn i {font-size: 16px;} /* Card 2: método e parcelas */ .cfc__conector {width: 1px;height: 22px;background: var(--Blue_Primary-200);} .cfc__card--2 .cfc__btn {/* width: 100%; */justify-content: center;} .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: 8px;font-size: 13px;font-weight: 600;color: #1aa64a;} .cfc__sucesso i {font-size: 18px;} /* 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: 52px;background: var(--Blue_Primary-600);border-radius: 12px 6px;} .cartao-metodos-pagamento .card-icon i{font-size: 1.25rem;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-600);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;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: 64%;height: auto;display: block;border-radius: 1rem;} .conciliacao-automatica .col-imagem .painel {position: absolute;width: 62%;height: auto;right: 0%;bottom: -12%;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.ativo{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.ativo 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} .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 .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;} .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);} .link-agilize-pagamentos .card-item p {} @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 #e9ecef00;padding: 1rem 0px 1.25rem;} .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: none;color: #0C235FBF;padding-top: 0.6rem;font-weight: 400;font-size: 14px;line-height: 150%;letter-spacing: 0%;} .lytex-acc1__text ul {padding-left: 1.25rem;margin: 0 0;} .lytex-acc1__item.is-active .lytex-acc1__text {display: block;animation: lytexTextIn 0.35s ease;} @keyframes lytexTextIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(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: 6rem 0; 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: 8rem; } .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: 40%; position: relative; } .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: -32px; */ } .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: 4rem 14%;font-weight: 600;} .lytex-api-1 .cards{text-align: left;display: flex;margin: 4rem 0;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: 2rem 0 1rem;} .lytex-api-1 .apidev p{font-size:14px;color: rgba(12, 35, 95, 0.5);margin-bottom:1rem;} .lytex-api-1 .apidev p b{color: #133295d1;font-weight: 600;} .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(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;} @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%;} .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; } .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); width: 28px; 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; } /* 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;} .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: 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;} .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-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: 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: 10%;} .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: 44%;position: relative;} .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;} } /* ===== 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 500ms ease; } .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} .bloco-pix-api .conteudo{display: flex;gap: 2rem;} .bloco-pix-api .conteudo .col-1{display: flex;flex-direction: column;gap: 1.5rem;flex: 1;} .bloco-pix-api .conteudo h3 span{color: var(--Blue_Primary-600);} .bloco-pix-api .conteudo .col-2{flex: 1;position: relative;text-align: right;} .bloco-pix-api .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-pix-api .acoes{display: flex;} .bloco-pix-api .imagem-fundo{width: 100%;z-index: 1;position: relative;margin: 0 0 0 auto;margin-right: 6%;max-width: 26rem;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;} .bloco-pix-api .conteudo .col-2{order: 1;aspect-ratio: 1;overflow: hidden} .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:66%} .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;} .pix-cobranca-2 .cabeca img{position: absolute;right: 0;bottom: 0px;} .pix-cobranca-2 .cards{text-align: left;display: flex;margin: 4rem 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: 5rem;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: 44%;} .pix-oferta .conteudo .col-2{flex: 1;position: relative;display: flex;max-width: 54%;align-items: center;} .pix-oferta .btn_primary{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-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;} .pix-oferta .pague span:nth-child(4){} } /* ===== 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 img{max-width: 86%;margin: 0 auto;} @media(max-width: 768px) { .pix-personalizacao{padding: 4rem 0;} .pix-personalizacao .conteudo img{max-width: 96%;margin: 0 auto;} } /* ===== 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 #ffffff1f;padding: 12px 0px 0px;border-radius: 8px;display: flex;flex-direction: column;gap: 8px;overflow: hidden;cursor: pointer;} .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 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} .bloco-seguranca-med .conteudo{display: flex;gap: 1rem;} .bloco-seguranca-med .conteudo .col-1{display: flex;flex-direction: column;gap: 1.5rem;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: 10px 24px;border-radius: 14px;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 i {font-size: 28px;} .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;} .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: 720px;} .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 1.5rem;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: 88px;height: 88px;background: var(--Blue_Primary-50);border-radius: 1.5rem 8px;} .seguranca-transacoes .card-icon i{font-size: 2.25rem;color: var(--Blue_Primary-600);} .seguranca-transacoes .card-icon-img img{max-width: 56px;max-height: 56px;} .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: #7d889f;} .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: 46%;display: flex;flex-direction: column;gap: 2rem;text-align: left;margin: 3rem 0 0 0;} .solucao-completa .cards .card h2{text-align: left;margin: 0;} .solucao-completa .cards .card p{margin: 0;} .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: 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 span {font-size: 23px;} .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: 6rem 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; } .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; }