/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ /* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ body { overflow-x: hidden; } /* Destaca o acesso à política no rodapé sem fugir da identidade visual. */ #cta-privacidade[role="button"] { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 2px solid currentColor; border-radius: 999px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } #cta-privacidade[role="button"]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); } #cta-privacidade:focus-visible, .privacy-link-button:focus-visible, .cookie-consent__button:focus-visible, .cookie-consent__close:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } .privacy-modal__content h3 { margin: 28px 0 8px; font-size: 1.05rem; font-weight: 800; } .privacy-modal__content p, .privacy-modal__content li { line-height: 1.65; } .privacy-modal__content ul { padding-left: 20px; } .privacy-modal__notice { padding: 16px; border-radius: 16px; background: rgba(255, 209, 0, 0.22); margin-bottom: 20px; } .privacy-link-button { appearance: none; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; } /* Botão de leitura da política dentro do aviso de cookies. */ .privacy-link-button--highlight { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 11px 16px; border: 2px solid #111; border-radius: 999px; background: #FFD100; color: #111; font-weight: 850; line-height: 1.2; text-decoration: none; box-shadow: 0 5px 0 #111; transition: transform 160ms ease, box-shadow 160ms ease; } .privacy-link-button--highlight:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #111; } .cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100000; display: none; max-width: 760px; margin: 0 auto; padding: 18px; border-radius: 20px; background: #fff; color: #111; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); font-family: "Inter", sans-serif; } .cookie-consent.is-visible { display: block; } .cookie-consent__title { margin: 0 0 6px; font-weight: 850; font-size: 1.05rem; } .cookie-consent__text { margin: 0; line-height: 1.5; font-size: 0.94rem; } .cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cookie-consent__button { appearance: none; border: 1px solid #111; border-radius: 999px; padding: 10px 14px; background: #fff; color: #111; font: inherit; font-weight: 750; cursor: pointer; } .cookie-consent__button--primary { background: #111; color: #fff; } .cookie-consent__settings { display: none; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.12); } .cookie-consent__settings.is-open { display: block; } .cookie-consent__option { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; } .cookie-consent__option input { margin-top: 4px; } .cookie-consent__option strong { display: block; } .cookie-consent__option small { display: block; margin-top: 2px; line-height: 1.4; opacity: 0.76; } @media (min-width:780px) { .cookie-consent { left: 24px; right: auto; bottom: 24px; width: min(720px, calc(100vw - 48px)); } } /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ #topo-lp-rota-pequizinho { width: 100%; height: auto; position: relative; float: left; } #menu-fixo-lp { width: 100%; height: 70px; position: fixed; z-index: 9999; } #tag-logo-pequizinho { width: 200px; height: 200px; margin-left: -90px; position: absolute; left: 50%; background-color: #FFD100; border-radius: 0px 0px 20px 20px; } #logo-pequizinho { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; background: url('../img/logo-pequizinho.png'); background-size: 120px; } #menu-fixo-cta { width: 65px; height: 65px; position: absolute; right: 20px; top: 20px; background-color: #027FE6; border-radius: 10px; } #icn-menu-int { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/cta-menu.png'); background-size: 40px; } #menu-fixo-cta:hover { background-color: #01559B; } /*Banner fotos topo*/ .swiper, swiper-container { margin-left: auto; margin-right: auto; min-height: 50px; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .fotos-banner-topo { width: 100%; height: auto; position: relative; float: left; background-color: #0B75CC; } #item-slide-fotos { width: 100%; height: auto; position: relative; float: left; } .img-banner-desktop-maior { display: block; } .img-banner-desktop { display: none; } .img-banner-tablet { display: none; } .img-banner-mobile { display: none; } #ancora-planos { width: 1px; height: 1px; position: absolute; left: 0px; top: -190px; } .gd { display: block; } .gm { display: none; } #div-conteudo-int-topo { width: 100%; height: auto; position: relative; float: left; z-index: 10; } #div-veiculo-logo-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -500px; } #div-rota-pequizinho-icone-topo { width: 1000px; height: auto; position: relative; margin: auto; } #faixa-tag-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #faixa-tag-ivana-int { width: 300px; height: auto; position: absolute; left: 50%; margin-left: -150px; } #conteudo-txt-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; } #tipografia-logo { width: 100%; height: auto; position: relative; float: left; } #tipografia-logo-int { width: 500px; height: auto; position: relative; margin: auto; } #txt-sobre-topo { width: 100%; height: auto; position: relative; float: unset; margin: auto; padding: 0px 60px; margin-top: 10px; font-size: 25px; color: #000; text-align: center; max-width: 940px; } #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-topo { width: 400px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 25px; padding: 16px 20px 16px 45px; } #cta-int-topo:hover { background-color: #08508B; } #circulo-cta-topo { width: 50px; height: 50px; position: absolute; left: 14px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #faixa-iconografia { width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box; padding-top: 50px; } #faixa-iconografia .swiper-wrapper { align-items: center; } .item-slide { width: 100%; height: auto; position: relative; display: flex; align-items: center; justify-content: center; /* Espaço entre as três iconografias */ gap: 20px; padding: 0 40px; box-sizing: border-box; } .item-iconografia { width: 100px; max-width: 100px; height: auto; position: relative; flex: 0 0 100px; display: flex; align-items: center; justify-content: center; } .item-iconografia img { display: block; width: 100%; height: auto; } /*Inicio avaliacoes google*/ #slider-avalicoes-google { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; } .item-slide-avaliacao-google { width: auto; height: 360px; position: relative; float: left; background-color: #EBFAFF; border-radius: 25px; padding: 0px 25px; } .toolbar-avaliacao-google { width: 100%; height: auto; position: relative; float: left; padding-top: 25px; } .nome-avaliacao-google { width: 80%; height: auto; position: relative; float: left; margin-top: 8px; font-size: 28px; font-weight: 600; color: #0B75CB; } .logo-google { width: 100px; height: auto; position: absolute; right: 10px; top: 7px; } .txt-avaliacao-google { width: 100%; height: 140px; position: relative; float: left; margin-top: 15px; color: #000; font-size: 19px; padding: 0px 0px; } .box-estrelas-avaliacao { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; } .item-strela-avaliacao { width: 16px; height: auto; position: relative; float: left; margin-right: 10px; } .tag-localizacao-avaliacao { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #0975CB; margin-left: 0px; margin-top: 10px; padding: 10px 20px; border: 1px solid #B3EBFF; border-radius: 30px; text-align: center; } #faixa-controles-slide-avaliacoes { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #box-controles-slide-int { width: 200px; height: auto; position: relative; margin: auto; } /*controles slide*/ .controle-slide-avalicoes { width: 80px; height: 80px; position: relative; float: left; margin-left: 20px; cursor: pointer; background-color: #0B75CB; border-radius: 50%; } .controle-slide-avalicoes:hover { background-color: #084E87; } .icone-seta-controle-avaliacao { width: 36px; height: 36px; position: absolute; left: 50%; top: 50%; margin-left: -18px; margin-top: -18px; } /*Inicio carrossel visibulidade*/ #faixa-chamada-visibilidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0 20px; box-sizing: border-box; display: none; } /* Contêiner principal do Swiper */ #div-slide-visibilidade { width: 50%; height: 500px; position: relative; float: left; margin-top: 30px; background-color: #dadada; border-radius: 20px; overflow: hidden; box-sizing: border-box; } /* Wrapper que se movimenta */ #box-slide-visibilidade-int { width: 100%; height: 100%; position: relative; /* O Swiper precisa organizar os slides horizontalmente */ display: flex; /* Removendo propriedades que causam conflito */ float: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-sizing: border-box; } /* Cada slide */ .item-slide-fotos-visibilidade { width: 100%; height: 100%; position: relative; /* Não usar float dentro do Swiper */ float: none; /* Impede o slide de encolher */ flex-shrink: 0; box-sizing: border-box; overflow: hidden; } /* Imagem principal do slide */ .item-slide-fotos-visibilidade > img { display: block; width: 100%; height: 100%; /* Preenche o slide sem deformar */ object-fit: cover; } /* Tag */ .tag-slide-fotos-visibilidade { width: 90%; height: auto; position: absolute; bottom: 20px; left: 5px; background-color: #fff; border-radius: 20px; padding: 10px 20px 10px 40px; z-index: 90; box-sizing: border-box; } .icn-loc-tag { width: 20px; height: 20px; position: absolute; left: 10px; top: 11px; } #div-slide-visibilidade-int-b { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px 0px 30px; } #div-txt-int { width: 100%; height: auto; position: relative; float: left; margin-top: 210px; font-size: 24px; line-height: 25px; font-weight: 700; color: #000; } #slider-fotos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; overflow: hidden; } .item-slide-foto-galeria { width: 100%; height: auto; position: relative; float: left; } #div-sobre-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 40px; } #titulo-ivana { width: 25%; height: auto; position: relative; float: left; margin-top: 70px; color: #000; text-align: left; text-align: left; font-size: 50px; line-height: 52px; font-weight: 600; padding: 0px 30px 0px 0px; } #div-sobre-ivana-txt { width: 50%; height: auto; position: relative; float: right; font-size: 30px; color: #000; padding: 0px 0px; margin-top: 89px; } #div-cta-sobre-ivana-txt { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } #cta-int-ivana { width: 320px; height: auto; position: relative; margin: auto; float: left; padding: 10px 20px; font-size: 14px; color: #0B75CC; border: 1px solid #0B75CC; border-radius: 50px; font-size: 27px; text-align: center; } #cta-int-ivana:hover { background-color: #0B75CC; color: #fff; } /*Faixa ornamento categorias*/ #faixa-ornamento-categorias { width: 100%; height: 200px; position: relative; float: left; margin-top: 125px; overflow: hidden; } .faixa-cat-01 { width: 12010px; height: auto; position: absolute; left: 0px; margin-right: 200%; } .faixa-cat-02 { width: 16000px; height: auto; position: absolute; top: 89px; left: -2430px; margin-left: 100%; } .item-categoria-ornamento { width: auto; height: auto; position: relative; float: left; margin-left: 10px; font-size: 32px; padding: 10px 30px; background-color: #000; color: #fff; border-radius: 50px; } .color-azul-celeste { background-color: #43a9d1; } .color-coral { background-color: #e66f57; } .color-verde-claro { background-color: #b5d982; } .color-amarelo-ouro { background-color: #d5a62a; } .color-azul-claro { background-color: #78b5e8; } .color-amarelo-claro { background-color: #e6c45b; } .color-ciano-claro { background-color: #82d9df; } .color-azul-escuro { background-color: #274c68; } .color-amarelo-sol { background-color: #dfb12c; } .color-verde-cerrado { background-color: #87ad58; } .color-rosa { background-color: #e78f98; } /*Chamada Guia*/ #chamada-guia-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 130px; } #chamada-guia-titulo { width: 100%; height: auto; position: relative; float: left; font-size: 61px; color: #000; text-align: center; margin-bottom: 20px; font-weight: 600; margin-top: 50px; line-height: 67px; } #sobre-guia-regiao { width: 100%; height: auto; position: relative; float: unset; margin: auto; margin-top: 50px; font-size: 23px; color: #000; text-align: center; padding: 0px 20px; max-width: 1000px; } #faixa-circulos-01 { width: 100%; height: 202px; position: relative; float: left; margin-top: 96px; overflow: hidden; } #fotos-bloco-circulos-01 { width: 3300px; height: auto; position: absolute; left: 20px; } #faixa-circulos-02 { width: 100%; height: 290px; position: relative; float: left; margin-top: 16px; overflow: hidden; } #fotos-bloco-circulos-02 { width: 2370px; height: auto; position: absolute; left: -90px; } #faixa-cta-circulos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-topo-02 { width: 360px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 140px; cursor: pointer; text-align: center; color: #fff; font-size: 24px; margin-top: -60px; padding: 16px 20px 16px 45px; } #cta-int-topo-02:hover { background-color: #08508B; } #circulo-cta-topo-02 { width: 45px; height: 45px; position: absolute; left: 20px; top: 11px; background-color: #FFCC13; border-radius: 110%; padding: 5px; } #blocos-diferenciais-projeto { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; } #view-bloco-diferenciais-projeto { width: 90%; height: auto; position: relative; margin: auto; max-width: 1600px; } /*item bloco diferencial*/ .item-bloco-diferencial { width: 47%; height: 350px; position: relative; float: left; margin-bottom: 40px; border-radius: 20px; margin-left: 2.5%; padding: 20px 40px 45px 37px; } /*cores blocos*/ .cor-bloco-01 { background-color: #F0FFE1; } .cor-bloco-02 { background-color: #FFECB9; } .cor-bloco-03 { background-color: #EAFBFF; } .cor-bloco-04 { background-color: #FFEEEF; } .cor-bloco-icn-01 { background-color: #93C262; } .cor-bloco-icn-02 { background-color: #FCC327; } .cor-bloco-icn-03 { background-color: #0B75CB; } .cor-bloco-icn-04 { background-color: #FC7356; } .toolbar-card-diferencial { width: 100%; height: auto; position: relative; float: left; margin-top: 26px; } .titulo-toolbar-card-diferencial { width: 62%; height: auto; position: relative; float: left; padding: 0px 10px; line-height: 40px; font-size: 32px; font-weight: 700; color: #000; } .icone-toolbar-card-diferencial { width: 66px; height: 66px; position: absolute; right: 13px; top: 1px; border-radius: 50%; } .txt-bloco-card-diferencial { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; font-size: 20px; margin-top: 19px; color: #000; } .icn-bloco-diferencial { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; padding: 5px; } #bloco-video { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; } #video-int-bloco { width: 90%; height: 750px; position: relative; float: left; margin-left: 5%; border-radius: 20px; overflow: hidden; background-color: #dadada; } /*Chamada planos*/ #div-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; } #view-div-planos { width: 90%; height: auto; position: relative; margin: auto; } #titulo-planos { width: 48%; height: auto; position: relative; float: left; font-size: 64px; color: #000; padding: 0px 10px; font-weight: 700; line-height: 57px; } #txt-chamada-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 35px; padding: 0px 10px; font-size: 24px; } /*incio cards planos*/ #div-s-cards { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; padding: 0px 20px; } #view-div-card { width: 95%; height: auto; position: relative; margin: auto; max-width: 1440px; } .item-card-plano { width: 47%; height: 1020px; position: relative; float: left; border: 3px dashed #0B75CC; border-radius: 20px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px; margin-left: 1.5%; margin-bottom: 40px; } .toolbar-card-plano { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; } .titulo-card-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 42px; margin-left: 10px; line-height: 38px; font-size: 28px; color: #0B75CC; font-weight: 700; } .valor-dividido-plano { width: 100%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 35px; margin-top: -7px; color: #0B75CC; font-weight: 700; } .valor-a-vista { width: 90%; height: 100px; position: relative; float: left; padding-left: 10px; font-size: 20px; line-height: 28px; margin-top: 30px; color: #0B75CC; font-weight: 300; } .box-int-itens-planos { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; padding: 0px 20px; } /*item plano*/ .item-lista-plano { width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #0B75CB; padding-bottom: 10px; margin-bottom: 29px; } .icn-lista-plano { width: 40px; height: 40px; position: relative; float: left; border-radius: 90%; } .txt-item-plano { width: 80%; height: auto; position: relative; float: left; font-size: 19px; margin-left: 13px; margin-top: 5px; color: #0D74CB; } .faixa-cta-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-int-topo-02 { width: 420px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 18px; padding: 20px 20px 20px 45px; } .cta-int-topo-02:hover { background-color: #08508B; } .circulo-cta-topo-02 { width: 52px; height: 52px; position: absolute; left: 13px; top: 7px; background-color: #FFCC13; border-radius: 80%; padding: 5px; } /*Alerta planos*/ #faixa-alerta { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #faixa-alerta-int { width: 90%; height: 150px; position: relative; margin: auto; padding: 20px 30px; border-radius: 20px; background-color: #F0FFE1; } #txt-alerta-planos { width: 60%; height: auto; position: relative; float: left; font-size: 25px; margin-top: 18px; margin-left: 10px; color: #000; } .icone-alerta-plano { width: 75px; height: 75px; position: absolute; right: 40px; top: 40px; background-color: #93C362; border-radius: 50%; padding: 10px; } /*inicio bloco iconografia*/ #faixa-iconografia-02 { width: 100%; height: 213px; position: relative; float: left; margin-top: 100px; margin-bottom: 50px; overflow: hidden; } #iconografia-int-animada { width: 7600px; height: auto; position: absolute; left: 0px; } /*Sessao quem vive na cidade sabe*/ #sessao-quem-vive-na-cidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #view-sessao-vive-na-cidade { width: 370px; height: 0px; position: relative; margin: auto; } /*Inicio sessão feito pormpesssoas*/ #sessao-feito-por-pessoas { width: 100%; height: auto; position: relative; float: left; margin-top: 65px; } #view-feito-por-pessoas { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 12px; max-width: 1650px; } #chamada-feito-por-pessoas { width: 45%; height: auto; position: relative; float: left; margin-top: -30px; font-size: 44px; color: #000; font-weight: 700; line-height: 42px; } #txt-sessao-sobre-pessoas { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 20px; color: #000; } .sessao-cards-perfil { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; } .view-sessa-perfil { width: 90%; height: 300px; position: relative; margin: auto; } /*item-card-perfil*/ .item-card-perfil { width: 100%; height: auto; position: relative; float: left; background-color: #F7F7F7; border-radius: 20px; padding-bottom: 70px; padding-left: 20px; padding-top: 20px; padding-right: 20px; margin-bottom: 30px; } .toolbar-card-perfil { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; } .titulo-toolbar { width: 50%; height: auto; position: relative; float: left; margin-top: 55px; margin-left: -2px; font-size: 48px; color: #000; font-weight: 700; line-height: 30px; } .foto-perfil-card { width: 130px; height: 130px; position: absolute; right: 9px; top: 35px; background-color: #dadada; border-radius: 50%; overflow: hidden; } .foto-perfil-int { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px; } .descricao-perfil { width: 80%; height: auto; position: relative; float: left; font-size: 19px; padding: 0px 15px; color: #000; margin-top: 25px; } .faixa-cta-card { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-conheca-mais { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 49px; background-color: #0B75CC; border-radius: 50px; color: #fff; font-size: 23px; } .cta-conheca-mais:hover { background-color: #085493; } /*inicio perguntas frequentes*/ #sessao-perguntas-frequentes { width: 100%; height: auto; position: relative; float: left; } #view-perguntas-frequentes { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 10px; } #titulo-faq { width: 80%; height: auto; position: relative; float: left; font-size: 59px; margin-top: 80px; color: #000; font-weight: 700; } #sessao-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } /* Estrutura geral */ .collapsible { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: none; box-shadow: none; background: transparent; } /* Cada item do FAQ */ .collapsible > li { margin: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 16px; background-color: #ffffff; box-shadow: none; } /* Pergunta */ .collapsible .collapsible-header { min-height: 76px; padding: 20px 26px; display: flex; align-items: center; gap: 18px; border: none; background-color: #ffffff; font-size: 21px; font-weight: 500; line-height: 1.35; color: #252525; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } /* Efeito ao passar o mouse */ .collapsible .collapsible-header:hover { background-color: #f6f6f3; } /* Ícone */ .collapsible .collapsible-header i { width: auto; margin: 0; flex: 0 0 auto; font-size: 28px; color: #252525; transition: transform 0.3s ease; } /* Gira a seta quando abrir */ .collapsible > li.active .collapsible-header i { transform: rotate(180deg); } /* Estado aberto */ .collapsible > li.active .collapsible-header { background-color: #f6f6f3; font-weight: 600; } /* Resposta */ .collapsible .collapsible-body { padding: 22px 26px 26px 72px; border: none; border-top: 1px solid #e4e4e4; background-color: #ffffff; font-size: 17px; line-height: 1.65; color: #555555; } /* Remove margens internas indesejadas */ .collapsible .collapsible-body span { display: block; margin: 0; } /*Rodape */ #inicio-sessao-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; padding-bottom: 110px; background-color: #FFF9E7; } #view-sessao-rodape { width: 630px; height: auto; position: relative; margin: auto; } #faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: -90px; } #logo-rodape { width: 330px; height: 220px; position: relative; margin: auto; } #txt-rodape { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; margin-top: 140px; padding: 0px 20px; text-align: center; } /*Faixa CTA rota*/ #faixa-cta-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 100px; } .cta-int-topo-03 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-03:hover { background-color: #08508B; } .circulo-cta-topo-03 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #vagas-limitadas-cta { width: 300px; height: auto; position: absolute; bottom: -55px; color: #000; font-size: 15px; text-align: center; left: 50%; margin-left: -150px; } #chamada-redes-sociais { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #000; text-align: center; font-weight: 600; margin-bottom: 15px; } #bloco-redes-sociais { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #bloco-int-rs { width: 240px; height: auto; position: relative; margin: auto; } .item-rede-social-rodape { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; } .faixa-cta-politica-privacidade { width: 100%; height: auto; position: relative; margin-top: 25px; float: left; } #view-cta-politica-privacidade { width: 301px; height: auto; position: relative; margin: auto; } #cta-privacidade { width: 315px; height: auto; position: relative; margin: auto; font-size: 18px; color: #fff; background-color: #0B75CC; padding: 15px 20px; border-radius: 60px; text-align: center; } * { box-sizing: border-box; } body { width: 100%; font-family: "Inter", sans-serif; box-sizing: border-box; } @media only screen and (min-width:770px) and (max-width:1200px) { #topo-lp-rota-pequizinho { width: 100%; height: auto; position: relative; float: left; } #menu-fixo-lp { width: 100%; height: 70px; position: fixed; z-index: 9999; } #tag-logo-pequizinho { width: 180px; height: 180px; margin-left: -90px; position: absolute; left: 50%; background-color: #FFD100; border-radius: 0px 0px 20px 20px; } #logo-pequizinho { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -62px; margin-top: -57px; background: url('../img/logo-pequizinho.png'); background-size: 120px; } #menu-fixo-cta { width: 65px; height: 65px; position: absolute; right: 20px; top: 20px; background-color: #027FE6; border-radius: 10px; } #icn-menu-int { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/cta-menu.png'); background-size: 40px; } #menu-fixo-cta:hover { background-color: #01559B; } /*Banner fotos topo*/ .swiper, swiper-container { margin-left: auto; margin-right: auto; min-height: 50px; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .fotos-banner-topo { width: 100%; height: auto; position: relative; float: left; background-color: #0B75CC; } #item-slide-fotos { width: 100%; height: auto; position: relative; float: left; } .img-banner-desktop-maior { display: none; } .img-banner-desktop { display: block; } .img-banner-tablet { display: none; } .img-banner-mobile { display: none; } #div-conteudo-int-topo { width: 100%; height: auto; position: relative; float: left; z-index: 10; } #div-veiculo-logo-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -290px; } #div-rota-pequizinho-icone-topo { width: 570px; height: auto; position: relative; margin: auto; } #faixa-tag-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } #faixa-tag-ivana-int { width: 240px; height: auto; position: absolute; left: 50%; margin-left: -120px; } #conteudo-txt-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; } #tipografia-logo { width: 100%; height: auto; position: relative; float: left; } #tipografia-logo-int { width: 410px; height: auto; position: relative; margin: auto; } #txt-sobre-topo { width: 100%; height: auto; position: relative; float: unset; padding: 0px 20px; margin-top: 10px; font-size: 20px; color: #000; text-align: center; margin: auto; max-width: 570px; } #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; } #cta-int-topo { width: 400px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 25px; padding: 16px 20px 16px 45px; } #cta-int-topo:hover { background-color: #08508B; } #circulo-cta-topo { width: 50px; height: 50px; position: absolute; left: 14px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #faixa-iconografia { width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box; padding-top: 50px; } #faixa-iconografia .swiper-wrapper { align-items: center; } .item-slide { width: 100%; height: auto; position: relative; display: flex; align-items: center; justify-content: center; /* Espaço entre as três iconografias */ gap: 20px; padding: 0 40px; box-sizing: border-box; } .item-iconografia { width: 100px; max-width: 100px; height: auto; position: relative; flex: 0 0 100px; display: flex; align-items: center; justify-content: center; } .item-iconografia img { display: block; width: 100%; height: auto; } /*Inicio avaliacoes google*/ #slider-avalicoes-google { width: 100%; height: auto; position: relative; float: left; margin-top: 120px; } .item-slide-avaliacao-google { width: auto; height: 360px; position: relative; float: left; background-color: #EBFAFF; border-radius: 25px; padding: 0px 25px; } .toolbar-avaliacao-google { width: 100%; height: auto; position: relative; float: left; padding-top: 25px; } .nome-avaliacao-google { width: 80%; height: auto; position: relative; float: left; margin-top: 8px; font-size: 27px; font-weight: 600; color: #0B75CB; } .logo-google { width: 100px; height: auto; position: absolute; right: 10px; top: 7px; } .txt-avaliacao-google { width: 100%; height: 140px; position: relative; float: left; margin-top: 15px; color: #000; font-size: 16px; padding: 0px 0px; } .box-estrelas-avaliacao { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; } .item-strela-avaliacao { width: 16px; height: auto; position: relative; float: left; margin-right: 10px; } .tag-localizacao-avaliacao { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #0975CB; margin-left: 0px; margin-top: 10px; padding: 10px 20px; border: 1px solid #B3EBFF; border-radius: 30px; text-align: center; } #faixa-controles-slide-avaliacoes { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #box-controles-slide-int { width: 200px; height: auto; position: relative; margin: auto; } /*controles slide*/ .controle-slide-avalicoes { width: 80px; height: 80px; position: relative; float: left; margin-left: 20px; cursor: pointer; background-color: #0B75CB; border-radius: 50%; } .controle-slide-avalicoes:hover { background-color: #084E87; } .icone-seta-controle-avaliacao { width: 36px; height: 36px; position: absolute; left: 50%; top: 50%; margin-left: -18px; margin-top: -18px; } /*Inicio carrossel visibulidade*/ #faixa-chamada-visibilidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0 20px; box-sizing: border-box; display: none; } /* Contêiner principal do Swiper */ #div-slide-visibilidade { width: 50%; height: 500px; position: relative; float: left; margin-top: 30px; background-color: #dadada; border-radius: 20px; overflow: hidden; box-sizing: border-box; } /* Wrapper que se movimenta */ #box-slide-visibilidade-int { width: 100%; height: 100%; position: relative; /* O Swiper precisa organizar os slides horizontalmente */ display: flex; /* Removendo propriedades que causam conflito */ float: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-sizing: border-box; } /* Cada slide */ .item-slide-fotos-visibilidade { width: 100%; height: 100%; position: relative; /* Não usar float dentro do Swiper */ float: none; /* Impede o slide de encolher */ flex-shrink: 0; box-sizing: border-box; overflow: hidden; } /* Imagem principal do slide */ .item-slide-fotos-visibilidade > img { display: block; width: 100%; height: 100%; /* Preenche o slide sem deformar */ object-fit: cover; } /* Tag */ .tag-slide-fotos-visibilidade { width: 90%; height: auto; position: absolute; bottom: 20px; left: 5px; background-color: #fff; border-radius: 20px; padding: 10px 20px 10px 40px; z-index: 90; box-sizing: border-box; } .icn-loc-tag { width: 20px; height: 20px; position: absolute; left: 10px; top: 11px; } #div-slide-visibilidade-int-b { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px 0px 30px; } #div-txt-int { width: 100%; height: auto; position: relative; float: left; margin-top: 210px; font-size: 24px; line-height: 25px; font-weight: 700; color: #000; } #slider-fotos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; overflow: hidden; } .item-slide-foto-galeria { width: 100%; height: auto; position: relative; float: left; } #div-sobre-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 40px; } #titulo-ivana { width: 50%; height: auto; position: relative; float: left; margin-top: 70px; color: #000; text-align: left; text-align: left; font-size: 40px; line-height: 41px; font-weight: 600; padding: 0px 30px 0px 0px; } #div-sobre-ivana-txt { width: 50%; height: auto; position: relative; float: left; font-size: 21px; color: #000; padding: 0px 0px; margin-top: 68px; } #div-cta-sobre-ivana-txt { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-ivana { width: 214px; height: auto; position: relative; margin: auto; float: left; padding: 10px 20px; font-size: 14px; color: #0B75CC; border: 1px solid #0B75CC; border-radius: 50px; font-size: 21px; text-align: center; } #cta-int-ivana:hover { background-color: #0B75CC; color: #fff; } /*Faixa ornamento categorias*/ #faixa-ornamento-categorias { width: 100%; height: 200px; position: relative; float: left; margin-top: 125px; overflow: hidden; } .faixa-cat-01 { width: 10000px; height: auto; position: absolute; left: 0px; margin-right: 200%; } .faixa-cat-02 { width: 16000px; height: auto; position: absolute; top: 72px; left: -1800px; margin-left: 100%; } .item-categoria-ornamento { width: auto; height: auto; position: relative; float: left; margin-left: 10px; font-size: 24px; padding: 10px 20px; background-color: #000; color: #fff; border-radius: 50px; } .color-azul-celeste { background-color: #43a9d1; } .color-coral { background-color: #e66f57; } .color-verde-claro { background-color: #b5d982; } .color-amarelo-ouro { background-color: #d5a62a; } .color-azul-claro { background-color: #78b5e8; } .color-amarelo-claro { background-color: #e6c45b; } .color-ciano-claro { background-color: #82d9df; } .color-azul-escuro { background-color: #274c68; } .color-amarelo-sol { background-color: #dfb12c; } .color-verde-cerrado { background-color: #87ad58; } .color-rosa { background-color: #e78f98; } /*Chamada Guia*/ #chamada-guia-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #chamada-guia-titulo { width: 100%; height: auto; position: relative; float: left; font-size: 55px; color: #000; text-align: center; font-weight: 600; margin-top: 50px; line-height: 57px; } #sobre-guia-regiao { width: 100%; height: auto; position: relative; float: unset; margin: auto; margin-top: 20px; font-size: 21px; color: #000; text-align: center; padding: 0px 10px; max-width: 750px; } #faixa-circulos-01 { width: 100%; height: 152px; position: relative; float: left; margin-top: 76px; overflow: hidden; } #fotos-bloco-circulos-01 { width: 2500px; height: auto; position: absolute; left: 20px; } #faixa-circulos-02 { width: 100%; height: 170px; position: relative; float: left; margin-top: 26px; overflow: hidden; } #fotos-bloco-circulos-02 { width: 1900px; height: auto; position: absolute; left: -90px; } #faixa-cta-circulos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } #cta-int-topo-02 { width: 360px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 21px; padding: 16px 20px 16px 45px; } #cta-int-topo-02:hover { background-color: #08508B; } #circulo-cta-topo-02 { width: 45px; height: 45px; position: absolute; left: 12px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #blocos-diferenciais-projeto { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; } #view-bloco-diferenciais-projeto { width: 90%; height: auto; position: relative; margin: auto; } /*item bloco diferencial*/ .item-bloco-diferencial { width: 47%; height: 370px; position: relative; float: left; margin-bottom: 20px; border-radius: 20px; padding: 20px 15px 45px 15px; margin-left: 2.5%; } /*cores blocos*/ .cor-bloco-01 { background-color: #F0FFE1; } .cor-bloco-02 { background-color: #FFECB9; } .cor-bloco-03 { background-color: #EAFBFF; } .cor-bloco-04 { background-color: #FFEEEF; } .cor-bloco-icn-01 { background-color: #93C262; } .cor-bloco-icn-02 { background-color: #FCC327; } .cor-bloco-icn-03 { background-color: #0B75CB; } .cor-bloco-icn-04 { background-color: #FC7356; } .toolbar-card-diferencial { width: 100%; height: auto; position: relative; float: left; margin-top: 26px; } .titulo-toolbar-card-diferencial { width: 73%; height: auto; position: relative; float: left; padding: 0px 10px; line-height: 23px; font-size: 22px; font-weight: 700; color: #000; } .icone-toolbar-card-diferencial { width: 66px; height: 66px; position: absolute; right: 1px; top: -10px; border-radius: 50%; } .txt-bloco-card-diferencial { width: 80%; height: auto; position: relative; float: left; padding: 0px 10px; font-size: 14px; margin-top: 29px; color: #000; } .icn-bloco-diferencial { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; padding: 5px; } #bloco-video { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } #video-int-bloco { width: 90%; height: 500px; position: relative; float: left; margin-left: 5%; border-radius: 20px; overflow: hidden; background-color: #dadada; } /*Chamada planos*/ #div-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #view-div-planos { width: 90%; height: auto; position: relative; margin: auto; } #titulo-planos { width: 48%; height: auto; position: relative; float: left; font-size: 40px; color: #000; padding: 0px 10px; font-weight: 700; line-height: 38px; } #txt-chamada-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 35px; padding: 0px 10px; font-size: 16px; } /*incio cards planos*/ #div-s-cards { width: 100%; height: auto; position: relative; float: left; margin-top: 70px; padding: 0px 20px; } #view-div-card { width: 90%; height: auto; position: relative; margin: auto; } .item-card-plano { width: 100%; height: auto; position: relative; float: left; border: 3px dashed #0B75CC; border-radius: 20px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px; margin-left: 0%; margin-bottom: 40px; } .toolbar-card-plano { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; } .titulo-card-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 42px; margin-left: 10px; line-height: 38px; font-size: 28px; color: #0B75CC; font-weight: 700; } .valor-dividido-plano { width: 100%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 35px; margin-top: -7px; color: #0B75CC; font-weight: 700; } .valor-a-vista { width: 90%; height: 100px; position: relative; float: left; padding-left: 10px; font-size: 20px; line-height: 28px; margin-top: 30px; color: #0B75CC; font-weight: 300; } .box-int-itens-planos { width: 100%; height: auto; position: relative; float: left; margin-top: -30px; padding: 0px 20px; } /*item plano*/ .item-lista-plano { width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #0B75CB; padding-bottom: 10px; margin-bottom: 20px; } .icn-lista-plano { width: 40px; height: 40px; position: relative; float: left; border-radius: 90%; } .txt-item-plano { width: 80%; height: auto; position: relative; float: left; font-size: 17px; margin-left: 10px; margin-top: 3px; color: #0D74CB; } .faixa-cta-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-int-topo-02 { width: 350px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 18px; padding: 16px 20px 18px 45px; } .cta-int-topo-02:hover { background-color: #08508B; } .circulo-cta-topo-02 { width: 40px; height: 40px; position: absolute; left: 13px; top: 10px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } /*Alerta planos*/ #faixa-alerta { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #faixa-alerta-int { width: 90%; height: 150px; position: relative; margin: auto; padding: 20px 30px; border-radius: 20px; background-color: #F0FFE1; } #txt-alerta-planos { width: 70%; height: auto; position: relative; float: left; font-size: 18px; margin-top: 22px; color: #000; } .icone-alerta-plano { width: 65px; height: 65px; position: absolute; right: 40px; top: 40px; background-color: #93C362; border-radius: 50%; padding: 10px; } /*inicio bloco iconografia*/ #faixa-iconografia-02 { width: 100%; height: 170px; position: relative; float: left; margin-top: 100px; margin-bottom: 50px; overflow: hidden; } #iconografia-int-animada { width: 5600px; height: auto; position: absolute; left: 0px; } /*Sessao quem vive na cidade sabe*/ #sessao-quem-vive-na-cidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #view-sessao-vive-na-cidade { width: 370px; height: 0px; position: relative; margin: auto; } /*Inicio sessão feito pormpesssoas*/ #sessao-feito-por-pessoas { width: 100%; height: auto; position: relative; float: left; margin-top: -25px; } #view-feito-por-pessoas { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 12px; max-width: 1200px; } #chamada-feito-por-pessoas { width: 55%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 44px; color: #000; font-weight: 700; line-height: 42px; } #txt-sessao-sobre-pessoas { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 20px; color: #000; } .sessao-cards-perfil { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; } .view-sessa-perfil { width: 90%; height: 300px; position: relative; margin: auto; } /*item-card-perfil*/ .item-card-perfil { width: 100%; height: auto; position: relative; float: left; background-color: #F7F7F7; border-radius: 20px; padding-bottom: 70px; padding-left: 20px; padding-top: 20px; padding-right: 20px; margin-bottom: 30px; } .toolbar-card-perfil { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; } .titulo-toolbar { width: 50%; height: auto; position: relative; float: left; margin-top: 55px; margin-left: -2px; font-size: 40px; color: #000; font-weight: 700; line-height: 39px; } .foto-perfil-card { width: 80px; height: 80px; position: absolute; right: 9px; top: 35px; background-color: #dadada; border-radius: 50%; overflow: hidden; } .foto-perfil-int { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } .descricao-perfil { width: 80%; height: auto; position: relative; float: left; font-size: 19px; padding: 0px 15px; color: #000; margin-top: 25px; } .faixa-cta-card { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-conheca-mais { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 49px; background-color: #0B75CC; border-radius: 50px; color: #fff; font-size: 23px; } .cta-conheca-mais:hover { background-color: #085493; } /*inicio perguntas frequentes*/ #sessao-perguntas-frequentes { width: 100%; height: auto; position: relative; float: left; } #view-perguntas-frequentes { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 10px; } #titulo-faq { width: 80%; height: auto; position: relative; float: left; font-size: 39px; margin-top: 30px; color: #000; font-weight: 700; } #sessao-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } /* Estrutura geral */ .collapsible { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: none; box-shadow: none; background: transparent; } /* Cada item do FAQ */ .collapsible > li { margin: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 16px; background-color: #ffffff; box-shadow: none; } /* Pergunta */ .collapsible .collapsible-header { min-height: 76px; padding: 20px 26px; display: flex; align-items: center; gap: 18px; border: none; background-color: #ffffff; font-size: 21px; font-weight: 500; line-height: 1.35; color: #252525; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } /* Efeito ao passar o mouse */ .collapsible .collapsible-header:hover { background-color: #f6f6f3; } /* Ícone */ .collapsible .collapsible-header i { width: auto; margin: 0; flex: 0 0 auto; font-size: 28px; color: #252525; transition: transform 0.3s ease; } /* Gira a seta quando abrir */ .collapsible > li.active .collapsible-header i { transform: rotate(180deg); } /* Estado aberto */ .collapsible > li.active .collapsible-header { background-color: #f6f6f3; font-weight: 600; } /* Resposta */ .collapsible .collapsible-body { padding: 22px 26px 26px 72px; border: none; border-top: 1px solid #e4e4e4; background-color: #ffffff; font-size: 17px; line-height: 1.65; color: #555555; } /* Remove margens internas indesejadas */ .collapsible .collapsible-body span { display: block; margin: 0; } /*Rodape */ #inicio-sessao-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; padding-bottom: 110px; background-color: #FFF9E7; } #view-sessao-rodape { width: 500px; height: auto; position: relative; margin: auto; } #faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: -90px; } #logo-rodape { width: 330px; height: 220px; position: relative; margin: auto; } #txt-rodape { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; margin-top: 140px; padding: 0px 20px; text-align: center; } /*Faixa CTA rota*/ #faixa-cta-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } .cta-int-topo-03 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-03:hover { background-color: #08508B; } .circulo-cta-topo-03 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #vagas-limitadas-cta { width: 300px; height: auto; position: absolute; bottom: -55px; color: #000; font-size: 15px; text-align: center; left: 50%; margin-left: -150px; } #chamada-redes-sociais { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #000; text-align: center; font-weight: 600; margin-bottom: 15px; } #bloco-redes-sociais { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #bloco-int-rs { width: 240px; height: auto; position: relative; margin: auto; } .item-rede-social-rodape { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; } .faixa-cta-politica-privacidade { width: 100%; height: auto; position: relative; margin-top: 25px; float: left; } #view-cta-politica-privacidade { width: 360px; height: auto; position: relative; margin: auto; } #cta-privacidade { width: 310px; height: auto; position: relative; margin: auto; font-size: 18px; color: #fff; background-color: #0B75CC; padding: 15px 20px; border-radius: 60px; text-align: center; } } @media only screen and (min-width:500px) and (max-width:770px) { .gd { display: block; } .gm { display: none; } #topo-lp-rota-pequizinho { width: 100%; height: auto; position: relative; float: left; } #menu-fixo-lp { width: 100%; height: 70px; position: fixed; z-index: 9999; } #tag-logo-pequizinho { width: 180px; height: 180px; margin-left: -90px; position: absolute; left: 50%; background-color: #FFD100; border-radius: 0px 0px 20px 20px; } #logo-pequizinho { width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -62px; margin-top: -57px; background: url('../img/logo-pequizinho.png'); background-size: 120px; } #menu-fixo-cta { width: 65px; height: 65px; position: absolute; right: 20px; top: 20px; background-color: #027FE6; border-radius: 10px; } #icn-menu-int { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/cta-menu.png'); background-size: 40px; } #menu-fixo-cta:hover { background-color: #01559B; } /*Banner fotos topo*/ .swiper, swiper-container { margin-left: auto; margin-right: auto; min-height: 50px; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .fotos-banner-topo { width: 100%; height: auto; position: relative; float: left; background-color: #0B75CC; } #item-slide-fotos { width: 100%; height: auto; position: relative; float: left; } .img-banner-desktop-maior { display: none; } .img-banner-desktop { display: none; } .img-banner-tablet { display: block; } .img-banner-mobile { display: none; } #div-conteudo-int-topo { width: 100%; height: auto; position: relative; float: left; z-index: 10; } #div-veiculo-logo-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -260px; } #div-rota-pequizinho-icone-topo { width: 540px; height: auto; position: relative; margin: auto; } #faixa-tag-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; } #faixa-tag-ivana-int { width: 220px; height: auto; position: absolute; left: 50%; margin-left: -110px; } #conteudo-txt-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; } #tipografia-logo { width: 100%; height: auto; position: relative; float: left; } #tipografia-logo-int { width: 470px; height: auto; position: relative; margin: auto; } #txt-sobre-topo { width: 100%; height: auto; position: relative; float: left; padding: 0px 110px; margin-top: 10px; font-size: 20px; color: #000; text-align: center; } #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-topo { width: 400px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 24px; padding: 16px 20px 16px 45px; } #cta-int-topo:hover { background-color: #08508B; } #circulo-cta-topo { width: 50px; height: 50px; position: absolute; left: 14px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #faixa-iconografia { width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box; padding-top: 50px; } #faixa-iconografia .swiper-wrapper { align-items: center; } .item-slide { width: 100%; height: auto; position: relative; display: flex; align-items: center; justify-content: center; /* Espaço entre as três iconografias */ gap: 20px; padding: 0 40px; box-sizing: border-box; } .item-iconografia { width: 100px; max-width: 80px; height: auto; position: relative; flex: 0 0 80px; display: flex; align-items: center; justify-content: center; } .item-iconografia img { display: block; width: 100%; height: auto; } /*Inicio avaliacoes google*/ #slider-avalicoes-google { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } .item-slide-avaliacao-google { width: auto; height: 340px; position: relative; float: left; background-color: #EBFAFF; border-radius: 25px; padding: 0px 25px; } .toolbar-avaliacao-google { width: 100%; height: auto; position: relative; float: left; padding-top: 25px; } .nome-avaliacao-google { width: 80%; height: auto; position: relative; float: left; margin-top: 8px; font-size: 19px; font-weight: 600; color: #0B75CB; } .logo-google { width: 80px; height: auto; position: absolute; right: 10px; top: 7px; } .txt-avaliacao-google { width: 100%; height: 140px; position: relative; float: left; margin-top: 15px; color: #000; font-size: 14px; padding: 0px 0px; } .box-estrelas-avaliacao { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; } .item-strela-avaliacao { width: 16px; height: auto; position: relative; float: left; margin-right: 10px; } .tag-localizacao-avaliacao { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #0975CB; margin-left: 0px; margin-top: 10px; padding: 10px 20px; border: 1px solid #B3EBFF; border-radius: 30px; text-align: center; } #faixa-controles-slide-avaliacoes { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #box-controles-slide-int { width: 166px; height: auto; position: relative; margin: auto; } /*controles slide*/ .controle-slide-avalicoes { width: 60px; height: 60px; position: relative; float: left; margin-left: 20px; cursor: pointer; background-color: #0B75CB; border-radius: 50%; } .controle-slide-avalicoes:hover { background-color: #084E87; } .icone-seta-controle-avaliacao { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; } /*Inicio carrossel visibulidade*/ #faixa-chamada-visibilidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0 20px; box-sizing: border-box; display: none; } /* Contêiner principal do Swiper */ #div-slide-visibilidade { width: 50%; height: 500px; position: relative; float: left; margin-top: 30px; background-color: #dadada; border-radius: 20px; overflow: hidden; box-sizing: border-box; } /* Wrapper que se movimenta */ #box-slide-visibilidade-int { width: 100%; height: 100%; position: relative; /* O Swiper precisa organizar os slides horizontalmente */ display: flex; /* Removendo propriedades que causam conflito */ float: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-sizing: border-box; } /* Cada slide */ .item-slide-fotos-visibilidade { width: 100%; height: 100%; position: relative; /* Não usar float dentro do Swiper */ float: none; /* Impede o slide de encolher */ flex-shrink: 0; box-sizing: border-box; overflow: hidden; } /* Imagem principal do slide */ .item-slide-fotos-visibilidade > img { display: block; width: 100%; height: 100%; /* Preenche o slide sem deformar */ object-fit: cover; } /* Tag */ .tag-slide-fotos-visibilidade { width: 90%; height: auto; position: absolute; bottom: 20px; left: 5px; background-color: #fff; border-radius: 20px; padding: 10px 20px 10px 40px; z-index: 90; box-sizing: border-box; } .icn-loc-tag { width: 20px; height: 20px; position: absolute; left: 10px; top: 11px; } #div-slide-visibilidade-int-b { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px 0px 30px; } #div-txt-int { width: 100%; height: auto; position: relative; float: left; margin-top: 210px; font-size: 24px; line-height: 25px; font-weight: 700; color: #000; } #slider-fotos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 57px; overflow: hidden; } .item-slide-foto-galeria { width: 100%; height: auto; position: relative; float: left; } #div-sobre-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 40px; } #titulo-ivana { width: 60%; height: auto; position: relative; float: left; margin-top: 40px; color: #000; text-align: left; font-size: 35px; line-height: 35px; font-weight: 600; padding: 0px 30px 0px 0px; } #div-sobre-ivana-txt { width: 90%; height: auto; position: relative; float: left; font-size: 21px; color: #000; padding: 0px 0px; margin-top: 20px; } #div-cta-sobre-ivana-txt { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-ivana { width: 214px; height: auto; position: relative; margin: auto; float: left; padding: 10px 20px; font-size: 14px; color: #0B75CC; border: 1px solid #0B75CC; border-radius: 50px; font-size: 21px; text-align: center; } #cta-int-ivana:hover { background-color: #0B75CC; color: #fff; } /*Faixa ornamento categorias*/ #faixa-ornamento-categorias { width: 100%; height: 200px; position: relative; float: left; margin-top: 55px; overflow: hidden; } .faixa-cat-01 { width: 7000px; height: auto; position: absolute; left: 0px; margin-right: 200%; } .faixa-cat-02 { width: 6000px; height: auto; position: absolute; top: 59px; left: -1800px; margin-left: 100%; } .item-categoria-ornamento { width: auto; height: auto; position: relative; float: left; margin-left: 10px; font-size: 18px; padding: 10px 20px; background-color: #000; color: #fff; border-radius: 50px; } .color-azul-celeste { background-color: #43a9d1; } .color-coral { background-color: #e66f57; } .color-verde-claro { background-color: #b5d982; } .color-amarelo-ouro { background-color: #d5a62a; } .color-azul-claro { background-color: #78b5e8; } .color-amarelo-claro { background-color: #e6c45b; } .color-ciano-claro { background-color: #82d9df; } .color-azul-escuro { background-color: #274c68; } .color-amarelo-sol { background-color: #dfb12c; } .color-verde-cerrado { background-color: #87ad58; } .color-rosa { background-color: #e78f98; } /*Chamada Guia*/ #chamada-guia-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: -50px; } #chamada-guia-titulo { width: 100%; height: auto; position: relative; float: left; font-size: 43px; color: #000; text-align: center; font-weight: 600; margin-top: 50px; line-height: 46px; } #sobre-guia-regiao { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 21px; color: #000; text-align: center; padding: 0px 60px; } #faixa-circulos-01 { width: 100%; height: 120px; position: relative; float: left; margin-top: 46px; overflow: hidden; } #fotos-bloco-circulos-01 { width: 2000px; height: auto; position: absolute; left: 20px; } #faixa-circulos-02 { width: 100%; height: 170px; position: relative; float: left; margin-top: 16px; overflow: hidden; } #fotos-bloco-circulos-02 { width: 1480px; height: auto; position: absolute; left: -450px; } #faixa-cta-circulos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-topo-02 { width: 360px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 21px; padding: 16px 20px 16px 45px; } #cta-int-topo-02:hover { background-color: #08508B; } #circulo-cta-topo-02 { width: 45px; height: 45px; position: absolute; left: 12px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #blocos-diferenciais-projeto { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #view-bloco-diferenciais-projeto { width: 90%; height: auto; position: relative; margin: auto; } /*item bloco diferencial*/ .item-bloco-diferencial { width: 100%; height: auto; position: relative; float: left; margin-bottom: 20px; margin-left: 0px; border-radius: 20px; padding: 20px 40px 45px 37px; } /*cores blocos*/ .cor-bloco-01 { background-color: #F0FFE1; } .cor-bloco-02 { background-color: #FFECB9; } .cor-bloco-03 { background-color: #EAFBFF; } .cor-bloco-04 { background-color: #FFEEEF; } .cor-bloco-icn-01 { background-color: #93C262; } .cor-bloco-icn-02 { background-color: #FCC327; } .cor-bloco-icn-03 { background-color: #0B75CB; } .cor-bloco-icn-04 { background-color: #FC7356; } .toolbar-card-diferencial { width: 100%; height: auto; position: relative; float: left; margin-top: 26px; } .titulo-toolbar-card-diferencial { width: 53%; height: auto; position: relative; float: left; padding: 0px 10px; line-height: 28px; font-size: 26px; font-weight: 700; color: #000; } .icone-toolbar-card-diferencial { width: 66px; height: 66px; position: absolute; right: 1px; top: -20px; border-radius: 50%; } .txt-bloco-card-diferencial { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; font-size: 18px; margin-top: 19px; color: #000; } .icn-bloco-diferencial { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; padding: 5px; } #bloco-video { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #video-int-bloco { width: 90%; height: 500px; position: relative; float: left; margin-left: 5%; border-radius: 20px; overflow: hidden; background-color: #dadada; } /*Chamada planos*/ #div-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #view-div-planos { width: 90%; height: auto; position: relative; margin: auto; } #titulo-planos { width: 80%; height: auto; position: relative; float: left; font-size: 40px; color: #000; padding: 0px 10px; font-weight: 700; line-height: 38px; } #txt-chamada-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 15px; padding: 0px 10px; font-size: 19px; } /*incio cards planos*/ #div-s-cards { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; padding: 0px 20px; } #view-div-card { width: 90%; height: auto; position: relative; margin: auto; } .item-card-plano { width: 95%; height: auto; position: relative; float: left; border: 3px dashed #0B75CC; border-radius: 20px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px; margin-left: 2.5%; margin-bottom: 40px; } .toolbar-card-plano { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; } .titulo-card-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 42px; margin-left: 10px; font-size: 43px; color: #0B75CC; line-height: 40px; font-weight: 700; } .valor-dividido-plano { width: 100%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 35px; margin-top: 0px; color: #0B75CC; font-weight: 700; } .valor-a-vista { width: 52%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 23px; line-height: 32px; color: #0B75CC; font-weight: 300; } .box-int-itens-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 20px; } /*item plano*/ .item-lista-plano { width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #0B75CB; padding-bottom: 10px; margin-bottom: 20px; } .icn-lista-plano { width: 40px; height: 40px; position: relative; float: left; border-radius: 90%; } .txt-item-plano { width: 85%; height: auto; position: relative; float: left; font-size: 19px; margin-left: 18px; margin-top: 4px; color: #0D74CB; } .faixa-cta-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-int-topo-02 { width: 450px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 21px; padding: 20px 20px 21px 45px; } .cta-int-topo-02:hover { background-color: #08508B; } .circulo-cta-topo-02 { width: 50px; height: 50px; position: absolute; left: 13px; top: 10px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } /*Alerta planos*/ #faixa-alerta { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #faixa-alerta-int { width: 520px; height: 150px; position: relative; margin: auto; padding: 20px 30px; border-radius: 20px; background-color: #F0FFE1; } #txt-alerta-planos { width: 70%; height: auto; position: relative; float: left; font-size: 18px; margin-top: 22px; color: #000; } .icone-alerta-plano { width: 65px; height: 65px; position: absolute; right: 40px; top: 40px; background-color: #93C362; border-radius: 50%; padding: 10px; } /*inicio bloco iconografia*/ #faixa-iconografia-02 { width: 100%; height: 140px; position: relative; float: left; margin-top: 90px; margin-bottom: 50px; overflow: hidden; } #iconografia-int-animada { width: 3600px; height: auto; position: absolute; left: 0px; } /*Sessao quem vive na cidade sabe*/ #sessao-quem-vive-na-cidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #view-sessao-vive-na-cidade { width: 370px; height: 0px; position: relative; margin: auto; } /*Inicio sessão feito pormpesssoas*/ #sessao-feito-por-pessoas { width: 100%; height: auto; position: relative; float: left; margin-top: -25px; } #view-feito-por-pessoas { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 12px; max-width: 750px; } #chamada-feito-por-pessoas { width: 80%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 44px; color: #000; font-weight: 700; line-height: 42px; } #txt-sessao-sobre-pessoas { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; font-size: 20px; color: #000; } .sessao-cards-perfil { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; } .view-sessa-perfil { width: 90%; height: 300px; position: relative; margin: auto; } /*item-card-perfil*/ .item-card-perfil { width: 100%; height: auto; position: relative; float: left; background-color: #F7F7F7; border-radius: 20px; padding-bottom: 70px; padding-left: 20px; padding-top: 20px; padding-right: 20px; margin-bottom: 30px; } .toolbar-card-perfil { width: 100%; height: auto; position: relative; float: left; padding: 0px 20px; } .titulo-toolbar { width: 50%; height: auto; position: relative; float: left; margin-top: 55px; margin-left: 4px; font-size: 27px; color: #000; font-weight: 700; line-height: 30px; } .foto-perfil-card { width: 80px; height: 80px; position: absolute; right: 9px; top: 35px; background-color: #dadada; border-radius: 50%; overflow: hidden; } .foto-perfil-int { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } .descricao-perfil { width: 80%; height: auto; position: relative; float: left; font-size: 17px; padding: 0px 20px; color: #000; margin-top: 10px; } .faixa-cta-card { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-conheca-mais { width: auto; height: auto; position: relative; float: left; margin-left: 20px; padding: 10px 38px; background-color: #0B75CC; border-radius: 50px; color: #fff; font-size: 19px; } .cta-conheca-mais:hover { background-color: #085493; } /*inicio perguntas frequentes*/ #sessao-perguntas-frequentes { width: 100%; height: auto; position: relative; float: left; } #view-perguntas-frequentes { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 10px; } #titulo-faq { width: 80%; height: auto; position: relative; float: left; font-size: 39px; margin-top: 30px; color: #000; font-weight: 700; } #sessao-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } /* Estrutura geral */ .collapsible { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: none; box-shadow: none; background: transparent; } /* Cada item do FAQ */ .collapsible > li { margin: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 16px; background-color: #ffffff; box-shadow: none; } /* Pergunta */ .collapsible .collapsible-header { min-height: 76px; padding: 20px 26px; display: flex; align-items: center; gap: 18px; border: none; background-color: #ffffff; font-size: 21px; font-weight: 500; line-height: 1.35; color: #252525; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } /* Efeito ao passar o mouse */ .collapsible .collapsible-header:hover { background-color: #f6f6f3; } /* Ícone */ .collapsible .collapsible-header i { width: auto; margin: 0; flex: 0 0 auto; font-size: 28px; color: #252525; transition: transform 0.3s ease; } /* Gira a seta quando abrir */ .collapsible > li.active .collapsible-header i { transform: rotate(180deg); } /* Estado aberto */ .collapsible > li.active .collapsible-header { background-color: #f6f6f3; font-weight: 600; } /* Resposta */ .collapsible .collapsible-body { padding: 22px 26px 26px 72px; border: none; border-top: 1px solid #e4e4e4; background-color: #ffffff; font-size: 17px; line-height: 1.65; color: #555555; } /* Remove margens internas indesejadas */ .collapsible .collapsible-body span { display: block; margin: 0; } /*Rodape */ #inicio-sessao-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; padding-bottom: 110px; background-color: #FFF9E7; } #view-sessao-rodape { width: 500px; height: auto; position: relative; margin: auto; } #faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: -90px; } #logo-rodape { width: 330px; height: 220px; position: relative; margin: auto; } #txt-rodape { width: 100%; height: auto; position: relative; float: left; font-size: 18px; color: #000; margin-top: 140px; padding: 0px 20px; text-align: center; } /*Faixa CTA rota*/ #faixa-cta-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } .cta-int-topo-03 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-03:hover { background-color: #08508B; } .circulo-cta-topo-03 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #vagas-limitadas-cta { width: 300px; hseight: auto; position: absolute; bottom: -55px; color: #000; font-size: 15px; text-align: center; left: 50%; margin-left: -150px; } #chamada-redes-sociais { width: 100%; height: auto; position: relative; float: left; font-size: 23px; color: #000; text-align: center; font-weight: 600; margin-bottom: 15px; } #bloco-redes-sociais { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #bloco-int-rs { width: 240px; height: auto; position: relative; margin: auto; } .item-rede-social-rodape { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; } .faixa-cta-politica-privacidade { width: 100%; height: auto; position: relative; margin-top: 25px; float: left; } #view-cta-politica-privacidade { width: 310px; height: auto; position: relative; margin: auto; } #cta-privacidade { width: 310px; height: auto; position: relative; margin: auto; font-size: 18px; color: #fff; background-color: #0B75CC; padding: 15px 20px; border-radius: 60px; text-align: center; } } @media only screen and (min-width:380px) and (max-width:500px) { .gd { display: none; } .gm { display: block; } #topo-lp-rota-pequizinho { width: 100%; height: auto; position: relative; float: left; } #menu-fixo-lp { width: 100%; height: 70px; position: fixed; z-index: 9999; } #tag-logo-pequizinho { width: 140px; height: 120px; position: absolute; left: 50%; margin-left: -70px; background-color: #FFD100; border-radius: 0px 0px 20px 20px; } #logo-pequizinho { width: 90px; height: 90px; position: absolute; left: 50%; top: 50%; margin-left: -45px; margin-top: -45px; background: url('../img/logo-pequizinho.png'); background-size: 90px; } #menu-fixo-cta { width: 65px; height: 65px; position: absolute; right: 20px; top: 20px; background-color: #027FE6; border-radius: 10px; } #icn-menu-int { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/cta-menu.png'); background-size: 40px; } #menu-fixo-cta:hover { background-color: #01559B; } /*Banner fotos topo*/ .swiper, swiper-container { margin-left: auto; margin-right: auto; min-height: 50px; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .fotos-banner-topo { width: 100%; height: auto; position: relative; float: left; background-color: #0B75CC; } #item-slide-fotos { width: 100%; height: auto; position: relative; float: left; } .img-banner-desktop-maior { display: none; } .img-banner-desktop { display: none; } .img-banner-tablet { display: none; } .img-banner-mobile { display: block; } #div-conteudo-int-topo { width: 100%; height: auto; position: relative; float: left; z-index: 10; } #div-veiculo-logo-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -190px; } #div-rota-pequizinho-icone-topo { width: 360px; height: auto; position: relative; margin: auto; } #faixa-tag-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; } #faixa-tag-ivana-int { width: 180px; height: auto; position: absolute; left: 50%; margin-left: -90px; } #conteudo-txt-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; } #tipografia-logo { width: 100%; height: auto; position: relative; float: left; } #tipografia-logo-int { width: 280px; height: auto; position: relative; margin: auto; } #txt-sobre-topo { width: 100%; height: auto; position: relative; float: left; padding: 0px 40px; margin-top: 10px; font-size: 15px; color: #000; text-align: center; } #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-topo { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } #cta-int-topo:hover { background-color: #08508B; } #circulo-cta-topo { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #faixa-iconografia { width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box; padding-top: 30px; } #faixa-iconografia .swiper-wrapper { align-items: center; } .item-slide { width: 100%; height: auto; position: relative; display: flex; align-items: center; justify-content: center; /* Espaço entre as três iconografias */ gap: 20px; padding: 0 40px; box-sizing: border-box; } .item-iconografia { width: 70px; max-width: 70px; height: auto; position: relative; /* Não deixa os itens aumentarem */ flex: 0 0 70px; display: flex; align-items: center; justify-content: center; } .item-iconografia img { display: block; width: 100%; height: auto; } /*Inicio avaliacoes google*/ #slider-avalicoes-google { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } .item-slide-avaliacao-google { width: 80%; height: 340px; position: relative; float: left; background-color: #EBFAFF; border-radius: 25px; padding: 0px 25px; } .toolbar-avaliacao-google { width: 100%; height: auto; position: relative; float: left; padding-top: 25px; } .nome-avaliacao-google { width: 80%; height: auto; position: relative; float: left; margin-top: 8px; font-size: 19px; font-weight: 600; color: #0B75CB; } .logo-google { width: 80px; height: auto; position: absolute; right: 10px; top: 7px; } .txt-avaliacao-google { width: 100%; height: 140px; position: relative; float: left; margin-top: 15px; color: #000; font-size: 14px; padding: 0px 0px; } .box-estrelas-avaliacao { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; } .item-strela-avaliacao { width: 16px; height: auto; position: relative; float: left; margin-right: 10px; } .tag-localizacao-avaliacao { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #0975CB; margin-left: 0px; margin-top: 10px; padding: 10px 20px; border: 1px solid #B3EBFF; border-radius: 30px; text-align: center; } #faixa-controles-slide-avaliacoes { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } #box-controles-slide-int { width: 166px; height: auto; position: relative; margin: auto; } /*controles slide*/ .controle-slide-avalicoes { width: 60px; height: 60px; position: relative; float: left; margin-left: 20px; cursor: pointer; background-color: #0B75CB; border-radius: 50%; } .controle-slide-avalicoes:hover { background-color: #084E87; } .icone-seta-controle-avaliacao { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; } /*Inicio carrossel visibulidade*/ #faixa-chamada-visibilidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0 20px; box-sizing: border-box; } /* Contêiner principal do Swiper */ #div-slide-visibilidade { width: 50%; height: 280px; position: relative; float: left; margin-top: 30px; background-color: #dadada; border-radius: 20px; /* O overflow deve ficar no contêiner externo */ overflow: hidden; box-sizing: border-box; } /* Wrapper que se movimenta */ #box-slide-visibilidade-int { width: 100%; height: 100%; position: relative; /* O Swiper precisa organizar os slides horizontalmente */ display: flex; /* Removendo propriedades que causam conflito */ float: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-sizing: border-box; } /* Cada slide */ .item-slide-fotos-visibilidade { width: 100%; height: 100%; position: relative; /* Não usar float dentro do Swiper */ float: none; /* Impede o slide de encolher */ flex-shrink: 0; box-sizing: border-box; overflow: hidden; } /* Imagem principal do slide */ .item-slide-fotos-visibilidade > img { display: block; width: 100%; height: 100%; /* Preenche o slide sem deformar */ object-fit: cover; } /* Tag */ .tag-slide-fotos-visibilidade { width: 90%; height: auto; position: absolute; bottom: 20px; left: 5px; background-color: #fff; border-radius: 20px; padding: 10px 20px 10px 40px; z-index: 90; box-sizing: border-box; } .icn-loc-tag { width: 20px; height: 20px; position: absolute; left: 10px; top: 11px; } #div-slide-visibilidade-int-b { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px 0px 30px; } #div-txt-int { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; font-size: 24px; line-height: 25px; font-weight: 700; color: #000; } #slider-fotos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; overflow: hidden; } .item-slide-foto-galeria { width: 100%; height: auto; position: relative; float: left; } #div-sobre-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; } #titulo-ivana { width: 80%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; text-align: left; font-size: 24px; line-height: 28px; font-weight: 600; padding: 0px 30px 0px 0px; } #div-sobre-ivana-txt { width: 90%; height: auto; position: relative; float: left; font-size: 16px; color: #000; padding: 0px 0px; margin-top: 10px; } #div-cta-sobre-ivana-txt { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-ivana { width: 200px; height: auto; position: relative; margin: auto; float: left; padding: 10px 20px; font-size: 14px; color: #0B75CC; border: 1px solid #0B75CC; border-radius: 50px; font-size: 14px; text-align: center; } #cta-int-ivana:hover { background-color: #0B75CC; color: #fff; } /*Faixa ornamento categorias*/ #faixa-ornamento-categorias { width: 100%; height: 200px; position: relative; float: left; margin-top: 45px; overflow: hidden; } .faixa-cat-01 { width: 6000px; height: auto; position: absolute; left: 0px; margin-right: 200%; } .faixa-cat-02 { width: 6000px; height: auto; position: absolute; top: 50px; left: -1800px; margin-left: 100%; } .item-categoria-ornamento { width: auto; height: auto; position: relative; float: left; font-size: 14px; margin-left: 10px; padding: 10px 20px; background-color: #000; color: #fff; border-radius: 50px; } .color-azul-celeste { background-color: #43a9d1; } .color-coral { background-color: #e66f57; } .color-verde-claro { background-color: #b5d982; } .color-amarelo-ouro { background-color: #d5a62a; } .color-azul-claro { background-color: #78b5e8; } .color-amarelo-claro { background-color: #e6c45b; } .color-ciano-claro { background-color: #82d9df; } .color-azul-escuro { background-color: #274c68; } .color-amarelo-sol { background-color: #dfb12c; } .color-verde-cerrado { background-color: #87ad58; } .color-rosa { background-color: #e78f98; } /*Chamada Guia*/ #chamada-guia-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: -108px; } #chamada-guia-titulo { width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #000; text-align: center; font-weight: 600; line-height: 29px; } #sobre-guia-regiao { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 15px; color: #000; text-align: center; padding: 0px 28px; } #faixa-circulos-01 { width: 100%; height: 120px; position: relative; float: left; margin-top: 46px; overflow: hidden; } #fotos-bloco-circulos-01 { width: 2000px; height: auto; position: absolute; left: 20px; } #faixa-circulos-02 { width: 100%; height: 170px; position: relative; float: left; margin-top: 16px; overflow: hidden; } #fotos-bloco-circulos-02 { width: 1480px; height: auto; position: absolute; left: -1000px; } #faixa-cta-circulos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; } #cta-int-topo-02 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } #cta-int-topo-02:hover { background-color: #08508B; } #circulo-cta-topo-02 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #blocos-diferenciais-projeto { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #view-bloco-diferenciais-projeto { width: 90%; height: auto; position: relative; margin: auto; } /*item bloco diferencial*/ .item-bloco-diferencial { width: 100%; height: auto; position: relative; float: left; margin-left: 0px; margin-bottom: 20px; border-radius: 20px; padding: 0px 20px 32px 20px; } /*cores blocos*/ .cor-bloco-01 { background-color: #F0FFE1; } .cor-bloco-02 { background-color: #FFECB9; } .cor-bloco-03 { background-color: #EAFBFF; } .cor-bloco-04 { background-color: #FFEEEF; } .cor-bloco-icn-01 { background-color: #93C262; } .cor-bloco-icn-02 { background-color: #FCC327; } .cor-bloco-icn-03 { background-color: #0B75CB; } .cor-bloco-icn-04 { background-color: #FC7356; } .toolbar-card-diferencial { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } .titulo-toolbar-card-diferencial { width: 65%; height: auto; position: relative; float: left; padding: 0px 10px; line-height: 24px; font-size: 22px; font-weight: 700; color: #000; } .icone-toolbar-card-diferencial { width: 50px; height: 50px; position: absolute; right: 1px; top: -10px; border-radius: 50%; } .txt-bloco-card-diferencial { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; font-size: 14px; margin-top: 13px; color: #000; } .icn-bloco-diferencial { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; padding: 5px; } #bloco-video { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #video-int-bloco { width: 90%; height: 500px; position: relative; float: left; margin-left: 5%; border-radius: 20px; overflow: hidden; background-color: #dadada; } /*Chamada planos*/ #div-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 57px; } #view-div-planos { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 0px; } #titulo-planos { width: 90%; height: auto; position: relative; float: left; font-size: 22px; color: #000; padding: 0px 10px; font-weight: 700; line-height: 26px; } #txt-chamada-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 15px; font-size: 15px; padding: 0px 10px; } /*incio cards planos*/ #div-s-cards { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; padding: 0px 20px; /* display: none; */ overflow: hidden; } #view-div-card { width: 90%; height: auto; position: relative; margin: auto; } .item-card-plano { width: 90%; height: auto; position: relative; float: left; border: 1px solid #0B75CC; border-radius: 20px; padding-bottom: 40px; margin-bottom: 30px; padding-left: 5px; padding-right: 5px; margin-left: 5%; } .toolbar-card-plano { width: 100%; height: auto; position: relative; float: left; padding: 0px 9px; } .titulo-card-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 42px; margin-left: 10px; font-size: 24px; color: #0B75CC; line-height: 27px; font-weight: 700; } .valor-dividido-plano { width: 100%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 18px; color: #0B75CC; font-weight: 700; margin-top: 5px; } .valor-a-vista { width: 80%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 16px; margin-top: 10px; color: #0B75CC; line-height: 23px; font-weight: 300; } .box-int-itens-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 20px; } /*item plano*/ .item-lista-plano { width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #0B75CB; padding-bottom: 10px; margin-bottom: 20px; font-size: 20px; } .icn-lista-plano { width: 30px; height: 30px; position: relative; float: left; border-radius: 90%; } .txt-item-plano { width: 85%; height: auto; position: relative; float: left; font-size: 14px; margin-left: 8px; margin-top: -3px; color: #0D74CB; } .faixa-cta-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-int-topo-02 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-02:hover { background-color: #08508B; } .circulo-cta-topo-02 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } /*Alerta planos*/ #faixa-alerta { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; /* display: none; */ } #faixa-alerta-int { width: 340px; height: 150px; position: relative; margin: auto; padding: 20px 20px; border-radius: 20px; background-color: #F0FFE1; } #txt-alerta-planos { width: 55%; height: auto; position: relative; float: left; font-size: 13px; color: #000; } .icone-alerta-plano { width: 65px; height: 65px; position: absolute; right: 30px; top: 41px; background-color: #93C362; border-radius: 50%; padding: 10px; } /*inicio bloco iconografia*/ #faixa-iconografia-02 { width: 100%; height: 140px; position: relative; float: left; margin-top: 70px; overflow: hidden; /* display: none; */ } #iconografia-int-animada { width: 4450px; height: auto; position: absolute; left: 0px; } /*Sessao quem vive na cidade sabe*/ #sessao-quem-vive-na-cidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #view-sessao-vive-na-cidade { width: 370px; height: 0px; position: relative; margin: auto; } /*Inicio sessão feito pormpesssoas*/ #sessao-feito-por-pessoas { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-top: -55px; /* display: none; */ } #view-feito-por-pessoas { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 12px; } #chamada-feito-por-pessoas { width: 80%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 22px; color: #000; font-weight: 700; padding: 0px 15px; line-height: 28px; } #txt-sessao-sobre-pessoas { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 15px; padding-left: 15px; color: #000; } .sessao-cards-perfil { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 0px; /* display: none; */ } .view-sessa-perfil { width: 90%; height: 300px; position: relative; margin: auto; padding: 0px 20px; } /*item-card-perfil*/ .item-card-perfil { width: 100%; height: auto; position: relative; float: left; background-color: #F7F7F7; border-radius: 20px; padding-bottom: 40px; margin-bottom: 30px; } .toolbar-card-perfil { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; margin-top: 9px; } .titulo-toolbar { width: 50%; height: auto; position: relative; float: left; margin-top: 7px; margin-left: 0px; font-size: 32px; color: #000; font-weight: 700; line-height: 34px; } .foto-perfil-card { width: 80px; height: 80px; position: absolute; right: 20px; top: 6px; background-color: #dadada; border-radius: 50%; overflow: hidden; } .foto-perfil-int { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } .descricao-perfil { width: 100%; height: auto; position: relative; float: left; font-size: 14px; padding: 0px 10px; color: #000; margin-top: 35px; } .faixa-cta-card { width: 100%; height: auto; position: relative; float: left; margin-top: 29px; } .cta-conheca-mais { width: auto; height: auto; position: relative; float: left; margin-left: 6px; font-size: 16px; padding: 10px 20px; background-color: #0B75CC; border-radius: 50px; color: #fff; } .cta-conheca-mais:hover { background-color: #085493; } /*inicio perguntas frequentes*/ #sessao-perguntas-frequentes { width: 100%; height: auto; position: relative; float: left; /* display: none; */ } #view-perguntas-frequentes { width: 90%; height: auto; position: relative; margin: auto; padding: 0px 20px; } #titulo-faq { width: 80%; height: auto; position: relative; float: left; font-size: 30px; color: #000; margin-top: 35px; line-height: 33px; font-weight: 700; } #sessao-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } /* Estrutura geral */ .collapsible { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: none; box-shadow: none; background: transparent; } /* Cada item do FAQ */ .collapsible > li { margin: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 16px; background-color: #ffffff; box-shadow: none; } /* Pergunta */ .collapsible .collapsible-header { min-height: 76px; padding: 20px 26px; display: flex; align-items: center; gap: 18px; border: none; background-color: #ffffff; font-size: 21px; font-weight: 500; line-height: 1.35; color: #252525; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } /* Efeito ao passar o mouse */ .collapsible .collapsible-header:hover { background-color: #f6f6f3; } /* Ícone */ .collapsible .collapsible-header i { width: auto; margin: 0; flex: 0 0 auto; font-size: 28px; color: #252525; transition: transform 0.3s ease; } /* Gira a seta quando abrir */ .collapsible > li.active .collapsible-header i { transform: rotate(180deg); } /* Estado aberto */ .collapsible > li.active .collapsible-header { background-color: #f6f6f3; font-weight: 600; } /* Resposta */ .collapsible .collapsible-body { padding: 22px 26px 26px 72px; border: none; border-top: 1px solid #e4e4e4; background-color: #ffffff; font-size: 17px; line-height: 1.65; color: #555555; } /* Remove margens internas indesejadas */ .collapsible .collapsible-body span { display: block; margin: 0; } /*Rodape */ #inicio-sessao-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; padding-bottom: 50px; background-color: #FFF9E7; /* display: none; */ } #view-sessao-rodape { width: 370px; height: auto; position: relative; margin: auto; } #faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: -90px; } #logo-rodape { width: 220px; height: 220px; position: relative; margin: auto; } #txt-rodape { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #000; margin-top: 20px; padding: 0px 20px; } /*Faixa CTA rota*/ #faixa-cta-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } .cta-int-topo-03 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-03:hover { background-color: #08508B; } .circulo-cta-topo-03 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #vagas-limitadas-cta { width: 300px; height: auto; position: absolute; bottom: -55px; color: #000; font-size: 14px; text-align: center; left: 50%; margin-left: -150px; } #chamada-redes-sociais { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; font-weight: 600; margin-bottom: 15px; } #bloco-redes-sociais { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #bloco-int-rs { width: 240px; height: auto; position: relative; margin: auto; } .item-rede-social-rodape { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; } .faixa-cta-politica-privacidade { width: 100%; height: auto; position: relative; margin-top: 25px; float: left; } #view-cta-politica-privacidade { width: 300px; height: auto; position: relative; margin: auto; } #cta-privacidade { width: 280px; height: auto; position: relative; margin: auto; font-size: 16px; color: #fff; background-color: #0B75CC; padding: 15px 20px; border-radius: 60px; text-align: center; } } @media only screen and (min-width:100px) and (max-width:380px) { .gd { display: none; } .gm { display: block; } #topo-lp-rota-pequizinho { width: 100%; height: auto; position: relative; float: left; } #menu-fixo-lp { width: 100%; height: 70px; position: fixed; z-index: 9999; } #tag-logo-pequizinho { width: 140px; height: 120px; position: absolute; left: 50%; margin-left: -70px; background-color: #FFD100; border-radius: 0px 0px 20px 20px; } #logo-pequizinho { width: 90px; height: 90px; position: absolute; left: 50%; top: 50%; margin-left: -45px; margin-top: -45px; background: url('../img/logo-pequizinho.png'); background-size: 90px; } #menu-fixo-cta { width: 65px; height: 65px; position: absolute; right: 20px; top: 20px; background-color: #027FE6; border-radius: 10px; } #icn-menu-int { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; background: url('../img/cta-menu.png'); background-size: 40px; } #menu-fixo-cta:hover { background-color: #01559B; } /*Banner fotos topo*/ .swiper, swiper-container { margin-left: auto; margin-right: auto; min-height: 50px; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .fotos-banner-topo { width: 100%; height: auto; position: relative; float: left; background-color: #0B75CC; } #item-slide-fotos { width: 100%; height: auto; position: relative; float: left; } .img-banner-desktop-maior { display: none; } .img-banner-desktop { display: none; } .img-banner-tablet { display: none; } .img-banner-mobile { display: block; } #div-conteudo-int-topo { width: 100%; height: auto; position: relative; float: left; z-index: 10; } #div-veiculo-logo-topo { width: 100%; height: auto; position: relative; float: left; margin-top: -190px; } #div-rota-pequizinho-icone-topo { width: 360px; height: auto; position: relative; margin: auto; } #faixa-tag-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; } #faixa-tag-ivana-int { width: 180px; height: auto; position: absolute; left: 50%; margin-left: -90px; } #conteudo-txt-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 80px; } #tipografia-logo { width: 100%; height: auto; position: relative; float: left; } #tipografia-logo-int { width: 280px; height: auto; position: relative; margin: auto; } #txt-sobre-topo { width: 100%; height: auto; position: relative; float: left; padding: 0px 40px; margin-top: 10px; font-size: 15px; color: #000; text-align: center; } #faixa-cta-topo { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-topo { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } #cta-int-topo:hover { background-color: #08508B; } #circulo-cta-topo { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #faixa-iconografia { width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box; padding-top: 30px; } #faixa-iconografia .swiper-wrapper { align-items: center; } .item-slide { width: 100%; height: auto; position: relative; display: flex; align-items: center; justify-content: center; /* Espaço entre as três iconografias */ gap: 20px; padding: 0 40px; box-sizing: border-box; } .item-iconografia { width: 70px; max-width: 70px; height: auto; position: relative; /* Não deixa os itens aumentarem */ flex: 0 0 70px; display: flex; align-items: center; justify-content: center; } .item-iconografia img { display: block; width: 100%; height: auto; } /*Inicio avaliacoes google*/ #slider-avalicoes-google { width: 100%; height: auto; position: relative; float: left; margin-top: 60px; } .item-slide-avaliacao-google { width: 80%; height: 340px; position: relative; float: left; background-color: #EBFAFF; border-radius: 25px; padding: 0px 25px; } .toolbar-avaliacao-google { width: 100%; height: auto; position: relative; float: left; padding-top: 25px; } .nome-avaliacao-google { width: 80%; height: auto; position: relative; float: left; margin-top: 8px; font-size: 19px; font-weight: 600; color: #0B75CB; } .logo-google { width: 80px; height: auto; position: absolute; right: 10px; top: 7px; } .txt-avaliacao-google { width: 100%; height: 140px; position: relative; float: left; margin-top: 15px; color: #000; font-size: 14px; padding: 0px 0px; } .box-estrelas-avaliacao { width: 90%; height: auto; position: relative; float: left; margin-top: 20px; } .item-strela-avaliacao { width: 16px; height: auto; position: relative; float: left; margin-right: 10px; } .tag-localizacao-avaliacao { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #0975CB; margin-left: 0px; margin-top: 10px; padding: 10px 20px; border: 1px solid #B3EBFF; border-radius: 30px; text-align: center; } #faixa-controles-slide-avaliacoes { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } #box-controles-slide-int { width: 166px; height: auto; position: relative; margin: auto; } /*controles slide*/ .controle-slide-avalicoes { width: 60px; height: 60px; position: relative; float: left; margin-left: 20px; cursor: pointer; background-color: #0B75CB; border-radius: 50%; } .controle-slide-avalicoes:hover { background-color: #084E87; } .icone-seta-controle-avaliacao { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; } /*Inicio carrossel visibulidade*/ #faixa-chamada-visibilidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0 20px; box-sizing: border-box; } /* Contêiner principal do Swiper */ #div-slide-visibilidade { width: 50%; height: 280px; position: relative; float: left; margin-top: 30px; background-color: #dadada; border-radius: 20px; /* O overflow deve ficar no contêiner externo */ overflow: hidden; box-sizing: border-box; } /* Wrapper que se movimenta */ #box-slide-visibilidade-int { width: 100%; height: 100%; position: relative; /* O Swiper precisa organizar os slides horizontalmente */ display: flex; /* Removendo propriedades que causam conflito */ float: none; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: transparent; box-sizing: border-box; } /* Cada slide */ .item-slide-fotos-visibilidade { width: 100%; height: 100%; position: relative; /* Não usar float dentro do Swiper */ float: none; /* Impede o slide de encolher */ flex-shrink: 0; box-sizing: border-box; overflow: hidden; } /* Imagem principal do slide */ .item-slide-fotos-visibilidade > img { display: block; width: 100%; height: 100%; /* Preenche o slide sem deformar */ object-fit: cover; } /* Tag */ .tag-slide-fotos-visibilidade { width: 90%; height: auto; position: absolute; bottom: 20px; left: 5px; background-color: #fff; border-radius: 20px; padding: 10px 20px 10px 40px; z-index: 90; box-sizing: border-box; } .icn-loc-tag { width: 20px; height: 20px; position: absolute; left: 10px; top: 11px; } #div-slide-visibilidade-int-b { width: 50%; height: auto; position: relative; float: left; padding: 0px 20px 0px 30px; } #div-txt-int { width: 100%; height: auto; position: relative; float: left; margin-top: 110px; font-size: 24px; line-height: 25px; font-weight: 700; color: #000; } #slider-fotos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; overflow: hidden; } .item-slide-foto-galeria { width: 100%; height: auto; position: relative; float: left; } #div-sobre-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; padding: 0px 20px; } #titulo-ivana { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; color: #000; text-align: left; font-size: 24px; line-height: 25px; font-weight: 600; padding: 0px 30px 0px 0px; } #div-sobre-ivana-txt { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; padding: 0px 0px; margin-top: 10px; } #div-cta-sobre-ivana-txt { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #cta-int-ivana { width: 200px; height: auto; position: relative; margin: auto; float: left; padding: 10px 20px; font-size: 14px; color: #0B75CC; border: 1px solid #0B75CC; border-radius: 50px; font-size: 14px; text-align: center; } #cta-int-ivana:hover { background-color: #0B75CC; color: #fff; } /*Faixa ornamento categorias*/ #faixa-ornamento-categorias { width: 100%; height: 200px; position: relative; float: left; margin-top: 45px; overflow: hidden; } .faixa-cat-01 { width: 6000px; height: auto; position: absolute; left: 0px; margin-right: 200%; } .faixa-cat-02 { width: 6000px; height: auto; position: absolute; top: 50px; left: -1800px; margin-left: 100%; } .item-categoria-ornamento { width: auto; height: auto; position: relative; float: left; font-size: 14px; margin-left: 10px; padding: 10px 20px; background-color: #000; color: #fff; border-radius: 50px; } .color-azul-celeste { background-color: #43a9d1; } .color-coral { background-color: #e66f57; } .color-verde-claro { background-color: #b5d982; } .color-amarelo-ouro { background-color: #d5a62a; } .color-azul-claro { background-color: #78b5e8; } .color-amarelo-claro { background-color: #e6c45b; } .color-ciano-claro { background-color: #82d9df; } .color-azul-escuro { background-color: #274c68; } .color-amarelo-sol { background-color: #dfb12c; } .color-verde-cerrado { background-color: #87ad58; } .color-rosa { background-color: #e78f98; } /*Chamada Guia*/ #chamada-guia-s4 { width: 100%; height: auto; position: relative; float: left; margin-top: -108px; } #chamada-guia-titulo { width: 100%; height: auto; position: relative; float: left; font-size: 24px; color: #000; text-align: center; font-weight: 600; line-height: 28px; } #sobre-guia-regiao { width: 100%; height: auto; position: relative; float: left; margin-top: -10px; font-size: 16px; color: #000; text-align: center; padding: 0px 20px; } #faixa-circulos-01 { width: 100%; height: 120px; position: relative; float: left; margin-top: 46px; overflow: hidden; } #fotos-bloco-circulos-01 { width: 2000px; height: auto; position: absolute; left: 20px; } #faixa-circulos-02 { width: 100%; height: 170px; position: relative; float: left; margin-top: 16px; overflow: hidden; } #fotos-bloco-circulos-02 { width: 1480px; height: auto; position: absolute; left: -1000px; } #faixa-cta-circulos-galeria { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; } #cta-int-topo-02 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } #cta-int-topo-02:hover { background-color: #08508B; } #circulo-cta-topo-02 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #blocos-diferenciais-projeto { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #view-bloco-diferenciais-projeto { width: 330px; height: auto; position: relative; margin: auto; } /*item bloco diferencial*/ .item-bloco-diferencial { width: 100%; height: auto; position: relative; float: left; margin-left: 0px; margin-bottom: 20px; border-radius: 20px; padding: 0px 20px 32px 20px; } /*cores blocos*/ .cor-bloco-01 { background-color: #F0FFE1; } .cor-bloco-02 { background-color: #FFECB9; } .cor-bloco-03 { background-color: #EAFBFF; } .cor-bloco-04 { background-color: #FFEEEF; } .cor-bloco-icn-01 { background-color: #93C262; } .cor-bloco-icn-02 { background-color: #FCC327; } .cor-bloco-icn-03 { background-color: #0B75CB; } .cor-bloco-icn-04 { background-color: #FC7356; } .toolbar-card-diferencial { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } .titulo-toolbar-card-diferencial { width: 65%; height: auto; position: relative; float: left; padding: 0px 10px; line-height: 24px; font-size: 22px; font-weight: 700; color: #000; } .icone-toolbar-card-diferencial { width: 50px; height: 50px; position: absolute; right: 1px; top: -10px; border-radius: 50%; } .txt-bloco-card-diferencial { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; font-size: 14px; margin-top: 13px; color: #000; } .icn-bloco-diferencial { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; padding: 5px; } #bloco-video { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #video-int-bloco { width: 90%; height: 500px; position: relative; float: left; margin-left: 5%; border-radius: 20px; overflow: hidden; background-color: #dadada; } /*Chamada planos*/ #div-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 50px; } #view-div-planos { width: 370px; height: auto; position: relative; margin: auto; padding: 0px 20px; } #titulo-planos { width: 90%; height: auto; position: relative; float: left; font-size: 22px; color: #000; padding: 0px 10px; font-weight: 700; line-height: 26px; } #txt-chamada-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 15px; font-size: 15px; padding: 0px 10px; } /*incio cards planos*/ #div-s-cards { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 20px; /* display: none; */ overflow: hidden; } #view-div-card { width: 370px; height: auto; position: relative; margin: auto; } .item-card-plano { width: 90%; height: auto; position: relative; float: left; border: 1px solid #0B75CC; border-radius: 20px; padding-bottom: 40px; margin-bottom: 20px; padding-left: 5px; padding-right: 5px; margin-left: 0px; } .toolbar-card-plano { width: 100%; height: auto; position: relative; float: left; padding: 0px 9px; } .titulo-card-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 42px; margin-left: 10px; font-size: 24px; color: #0B75CC; line-height: 27px; font-weight: 700; } .valor-dividido-plano { width: 100%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 18px; color: #0B75CC; font-weight: 700; margin-top: 5px; } .valor-a-vista { width: 80%; height: auto; position: relative; float: left; padding-left: 10px; font-size: 16px; margin-top: 10px; color: #0B75CC; line-height: 23px; font-weight: 300; } .box-int-itens-planos { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; padding: 0px 20px; } /*item plano*/ .item-lista-plano { width: 100%; height: auto; position: relative; float: left; border-bottom: 1px solid #0B75CB; padding-bottom: 10px; margin-bottom: 20px; font-size: 20px; } .icn-lista-plano { width: 30px; height: 30px; position: relative; float: left; border-radius: 90%; } .txt-item-plano { width: 85%; height: auto; position: relative; float: left; font-size: 14px; margin-left: 8px; margin-top: -3px; color: #0D74CB; } .faixa-cta-plano { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } .cta-int-topo-02 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-02:hover { background-color: #08508B; } .circulo-cta-topo-02 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } /*Alerta planos*/ #faixa-alerta { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; /* display: none; */ } #faixa-alerta-int { width: 340px; height: 150px; position: relative; margin: auto; padding: 20px 20px; border-radius: 20px; background-color: #F0FFE1; } #txt-alerta-planos { width: 55%; height: auto; position: relative; float: left; font-size: 13px; color: #000; } .icone-alerta-plano { width: 65px; height: 65px; position: absolute; right: 30px; top: 41px; background-color: #93C362; border-radius: 50%; padding: 10px; } /*inicio bloco iconografia*/ #faixa-iconografia-02 { width: 100%; height: 140px; position: relative; float: left; margin-top: 70px; overflow: hidden; /* display: none; */ } #iconografia-int-animada { width: 4450px; height: auto; position: absolute; left: 0px; } /*Sessao quem vive na cidade sabe*/ #sessao-quem-vive-na-cidade { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } #view-sessao-vive-na-cidade { width: 370px; height: 0px; position: relative; margin: auto; } /*Inicio sessão feito pormpesssoas*/ #sessao-feito-por-pessoas { width: 100%; height: auto; position: relative; float: left; padding: 0px 0px; margin-top: -55px; /* display: none; */ } #view-feito-por-pessoas { width: 370px; height: auto; position: relative; margin: auto; padding: 0px 12px; } #chamada-feito-por-pessoas { width: 80%; height: auto; position: relative; float: left; margin-top: 40px; font-size: 22px; color: #000; font-weight: 700; padding: 0px 15px; line-height: 28px; } #txt-sessao-sobre-pessoas { width: 100%; height: auto; position: relative; float: left; margin-top: 10px; font-size: 15px; padding-left: 15px; color: #000; } .sessao-cards-perfil { width: 100%; height: auto; position: relative; float: left; margin-top: 40px; padding: 0px 0px; /* display: none; */ } .view-sessa-perfil { width: 360px; height: 300px; position: relative; margin: auto; padding: 0px 20px; } /*item-card-perfil*/ .item-card-perfil { width: 100%; height: auto; position: relative; float: left; background-color: #F7F7F7; border-radius: 20px; padding-bottom: 40px; margin-bottom: 30px; } .toolbar-card-perfil { width: 100%; height: auto; position: relative; float: left; padding: 0px 10px; margin-top: 9px; } .titulo-toolbar { width: 50%; height: auto; position: relative; float: left; margin-top: 15px; margin-left: 0px; font-size: 22px; color: #000; font-weight: 700; line-height: 30px; } .foto-perfil-card { width: 80px; height: 80px; position: absolute; right: 20px; top: 6px; background-color: #dadada; border-radius: 50%; overflow: hidden; } .foto-perfil-int { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } .descricao-perfil { width: 100%; height: auto; position: relative; float: left; font-size: 14px; padding: 0px 10px; color: #000; margin-top: 35px; } .faixa-cta-card { width: 100%; height: auto; position: relative; float: left; margin-top: 29px; } .cta-conheca-mais { width: auto; height: auto; position: relative; float: left; margin-left: 6px; font-size: 16px; padding: 10px 20px; background-color: #0B75CC; border-radius: 50px; color: #fff; } .cta-conheca-mais:hover { background-color: #085493; } /*inicio perguntas frequentes*/ #sessao-perguntas-frequentes { width: 100%; height: auto; position: relative; float: left; /* display: none; */ } #view-perguntas-frequentes { width: 370px; height: auto; position: relative; margin: auto; padding: 0px 30px; } #titulo-faq { width: 80%; height: auto; position: relative; float: left; font-size: 30px; color: #000; margin-top: 35px; line-height: 33px; font-weight: 700; } #sessao-faq { width: 100%; height: auto; position: relative; float: left; margin-top: 20px; } /* Estrutura geral */ .collapsible { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: none; box-shadow: none; background: transparent; } /* Cada item do FAQ */ .collapsible > li { margin: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 16px; background-color: #ffffff; box-shadow: none; } /* Pergunta */ .collapsible .collapsible-header { min-height: 76px; padding: 20px 26px; display: flex; align-items: center; gap: 18px; border: none; background-color: #ffffff; font-size: 21px; font-weight: 500; line-height: 1.35; color: #252525; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } /* Efeito ao passar o mouse */ .collapsible .collapsible-header:hover { background-color: #f6f6f3; } /* Ícone */ .collapsible .collapsible-header i { width: auto; margin: 0; flex: 0 0 auto; font-size: 28px; color: #252525; transition: transform 0.3s ease; } /* Gira a seta quando abrir */ .collapsible > li.active .collapsible-header i { transform: rotate(180deg); } /* Estado aberto */ .collapsible > li.active .collapsible-header { background-color: #f6f6f3; font-weight: 600; } /* Resposta */ .collapsible .collapsible-body { padding: 22px 26px 26px 72px; border: none; border-top: 1px solid #e4e4e4; background-color: #ffffff; font-size: 17px; line-height: 1.65; color: #555555; } /* Remove margens internas indesejadas */ .collapsible .collapsible-body span { display: block; margin: 0; } /*Rodape */ #inicio-sessao-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 150px; padding-bottom: 50px; background-color: #FFF9E7; /* display: none; */ } #view-sessao-rodape { width: 370px; height: auto; position: relative; margin: auto; } #faixa-logo-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: -90px; } #logo-rodape { width: 220px; height: 220px; position: relative; margin: auto; } #txt-rodape { width: 100%; height: auto; position: relative; float: left; font-size: 14px; color: #000; margin-top: 20px; padding: 0px 20px; } /*Faixa CTA rota*/ #faixa-cta-rodape { width: 100%; height: auto; position: relative; float: left; margin-top: 30px; } .cta-int-topo-03 { width: 300px; height: auto; position: relative; margin: auto; background-color: #0B75CC; border-radius: 50px; cursor: pointer; text-align: center; color: #fff; font-size: 16px; padding: 16px 20px 16px 45px } .cta-int-topo-03:hover { background-color: #08508B; } .circulo-cta-topo-03 { width: 40px; height: 40px; position: absolute; left: 10px; top: 8px; background-color: #FFCC13; border-radius: 50%; padding: 5px; } #vagas-limitadas-cta { width: 300px; height: auto; position: absolute; bottom: -55px; color: #000; font-size: 14px; text-align: center; left: 50%; margin-left: -150px; } #chamada-redes-sociais { width: 100%; height: auto; position: relative; float: left; font-size: 16px; color: #000; text-align: center; font-weight: 600; margin-bottom: 15px; } #bloco-redes-sociais { width: 100%; height: auto; position: relative; float: left; margin-top: 90px; } #bloco-int-rs { width: 240px; height: auto; position: relative; margin: auto; } .item-rede-social-rodape { width: 33%; height: auto; position: relative; float: left; padding: 0px 20px; } .faixa-cta-politica-privacidade { width: 100%; height: auto; position: relative; margin-top: 25px; float: left; } #view-cta-politica-privacidade { width: 300px; height: auto; position: relative; margin: auto; } #cta-privacidade { width: 280px; height: auto; position: relative; margin: auto; font-size: 16px; color: #fff; background-color: #0B75CC; padding: 15px 20px; border-radius: 60px; text-align: center; } } /* Responsivo */ @media (max-width:600px) { .collapsible { gap: 10px; } .collapsible > li { border-radius: 12px; } .collapsible .collapsible-header { min-height: 64px; padding: 17px 18px; gap: 12px; font-size: 17px; line-height: 1.4; } .collapsible .collapsible-header i { font-size: 24px; } .collapsible .collapsible-body { padding: 18px; font-size: 15px; line-height: 1.6; } } /* ========================================================================== Helper classes ========================================================================== */ /* * Hide visually and from screen readers */ .hidden, [hidden] { display: none !important; } .img-ratio { width: 100% !important; height: auto !important; } /* * Hide only visually, but have it available for screen readers: * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. For long content, line feeds are not interpreted as spaces and small width * causes content to wrap 1 word per line: * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ .visually-hidden { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ } /* * Extends the .visually-hidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * The use of `table` rather than `block` is only necessary if using * `::before` to contain the top-margins of child elements. */ .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width:35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-webkit-min-device-pixel-ratio:1.25), (min-resolution:1.25dppx), (min-resolution:120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *::before, *::after { background: #fff !important; color: #000 !important; /* Black prints faster */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " ("attr(href) ")"; } abbr[title]::after { content: " ("attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ========================================================== ANIMAÇÃO — FAIXA DE FOTOS DOS CÍRCULOS A faixa se movimenta para a esquerda, mas para antes que a ponta direita da imagem entre completamente na tela. Isso evita espaço vazio na margem direita. ========================================================== */ #faixa-circulos-01 { overflow: hidden; } #fotos-bloco-circulos-01 { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } /* ========================================================== DESKTOP — ACIMA DE 1200px Mantém aproximadamente 260px da faixa para fora da margem direita no ponto máximo da animação. ========================================================== */ @media only screen and (min-width:1201px) { #fotos-bloco-circulos-01 { -webkit-animation: movimento-circulos-desktop 24s ease-in-out infinite; animation: movimento-circulos-desktop 24s ease-in-out infinite; } @-webkit-keyframes movimento-circulos-desktop { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(calc(-100% + 100vw + 240px), 0, 0); transform: translate3d(calc(-100% + 100vw + 240px), 0, 0); } } @keyframes movimento-circulos-desktop { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(calc(-100% + 100vw + 240px), 0, 0); transform: translate3d(calc(-100% + 100vw + 240px), 0, 0); } } } /* ========================================================== TABLETS — DE 500px ATÉ 1200px Mantém aproximadamente 200px da faixa para fora da margem direita no ponto máximo da animação. ========================================================== */ @media only screen and (min-width:500px) and (max-width:1200px) { #fotos-bloco-circulos-01 { -webkit-animation: movimento-circulos-tablet 20s ease-in-out infinite; animation: movimento-circulos-tablet 20s ease-in-out infinite; } @-webkit-keyframes movimento-circulos-tablet { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(calc(-100% + 100vw + 180px), 0, 0); transform: translate3d(calc(-100% + 100vw + 180px), 0, 0); } } @keyframes movimento-circulos-tablet { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(calc(-100% + 100vw + 180px), 0, 0); transform: translate3d(calc(-100% + 100vw + 180px), 0, 0); } } } /* ========================================================== MOBILE — ABAIXO DE 500px Mantém aproximadamente 140px da faixa para fora da margem direita no ponto máximo da animação. ========================================================== */ @media only screen and (max-width:499px) { #fotos-bloco-circulos-01 { -webkit-animation: movimento-circulos-mobile 20s ease-in-out infinite; animation: movimento-circulos-mobile 20s ease-in-out infinite; } @-webkit-keyframes movimento-circulos-mobile { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(calc(-100% + 100vw + 120px), 0, 0); transform: translate3d(calc(-100% + 100vw + 120px), 0, 0); } } @keyframes movimento-circulos-mobile { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(calc(-100% + 100vw + 120px), 0, 0); transform: translate3d(calc(-100% + 100vw + 120px), 0, 0); } } } /* ========================================================== ANIMAÇÃO — FAIXA DE CÍRCULOS 02 IMPORTANTE: O ponto inicial da animação é o valor de "left" que já existe em cada Media Query. Exemplo no mobile 100px até 380px: left: -1000px; Movimento: -1000px → 20px → -1000px Em outros tamanhos de tela, ela usa automaticamente o "left" definido naquele breakpoint. ========================================================== */ #fotos-bloco-circulos-02 { -webkit-animation-name: movimento-faixa-circulos-02; -moz-animation-name: movimento-faixa-circulos-02; -o-animation-name: movimento-faixa-circulos-02; animation-name: movimento-faixa-circulos-02; -webkit-animation-duration: 22s; -moz-animation-duration: 22s; -o-animation-duration: 22s; animation-duration: 22s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: left; } /* ========================================================== SAFARI / WEBKIT ========================================================== */ @-webkit-keyframes movimento-faixa-circulos-02 { /* Como não definimos 0%, o navegador utiliza o valor original de "left" definido no CSS / Media Query. */ 50% { left: 20px; } /* Como não definimos 100%, ela retorna suavemente ao valor original de "left". */ } /* ========================================================== FIREFOX ANTIGO ========================================================== */ @-moz-keyframes movimento-faixa-circulos-02 { 50% { left: 20px; } } /* ========================================================== OPERA ANTIGO ========================================================== */ @-o-keyframes movimento-faixa-circulos-02 { 50% { left: 20px; } } /* ========================================================== PADRÃO ATUAL ========================================================== */ @keyframes movimento-faixa-circulos-02 { 50% { left: 20px; } } /* ========================================================== ACESSIBILIDADE — REDUZIR MOVIMENTO ========================================================== */ @media (prefers-reduced-motion:reduce) { #fotos-bloco-circulos-02 { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; } } /* ========================================================== ANIMAÇÃO — FAIXAS DE CATEGORIAS Movimento mais lento e com deslocamento reduzido FAIXA 01 = move para a esquerda FAIXA 02 = move para a direita ========================================================== */ .faixa-cat-01, .faixa-cat-02 { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } /* ========================================================== DESKTOP — ACIMA DE 1200px ========================================================== */ @media only screen and (min-width:1201px) { /* FAIXA 01 — DIREITA PARA ESQUERDA */ .faixa-cat-01 { -webkit-animation: movimento-faixa-cat-01-desktop 55s ease-in-out infinite; -moz-animation: movimento-faixa-cat-01-desktop 55s ease-in-out infinite; -o-animation: movimento-faixa-cat-01-desktop 55s ease-in-out infinite; animation: movimento-faixa-cat-01-desktop 55s ease-in-out infinite; } @-webkit-keyframes movimento-faixa-cat-01-desktop { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(-900px, 0, 0); transform: translate3d(-900px, 0, 0); } } @keyframes movimento-faixa-cat-01-desktop { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-900px, 0, 0); } } /* FAIXA 02 — ESQUERDA PARA DIREITA */ .faixa-cat-02 { -webkit-animation: movimento-faixa-cat-02-desktop 60s ease-in-out infinite; -moz-animation: movimento-faixa-cat-02-desktop 60s ease-in-out infinite; -o-animation: movimento-faixa-cat-02-desktop 60s ease-in-out infinite; animation: movimento-faixa-cat-02-desktop 60s ease-in-out infinite; } @-webkit-keyframes movimento-faixa-cat-02-desktop { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(1000px, 0, 0); transform: translate3d(1000px, 0, 0); } } @keyframes movimento-faixa-cat-02-desktop { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1000px, 0, 0); } } } /* ========================================================== TABLETS — DE 500px ATÉ 1200px Movimento reduzido ========================================================== */ @media only screen and (min-width:500px) and (max-width:1200px) { /* FAIXA 01 */ .faixa-cat-01 { -webkit-animation: movimento-faixa-cat-01-tablet 48s ease-in-out infinite; -moz-animation: movimento-faixa-cat-01-tablet 48s ease-in-out infinite; -o-animation: movimento-faixa-cat-01-tablet 48s ease-in-out infinite; animation: movimento-faixa-cat-01-tablet 48s ease-in-out infinite; } @-webkit-keyframes movimento-faixa-cat-01-tablet { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(-600px, 0, 0); transform: translate3d(-600px, 0, 0); } } @keyframes movimento-faixa-cat-01-tablet { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-600px, 0, 0); } } /* FAIXA 02 */ .faixa-cat-02 { -webkit-animation: movimento-faixa-cat-02-tablet 52s ease-in-out infinite; -moz-animation: movimento-faixa-cat-02-tablet 52s ease-in-out infinite; -o-animation: movimento-faixa-cat-02-tablet 52s ease-in-out infinite; animation: movimento-faixa-cat-02-tablet 52s ease-in-out infinite; } @-webkit-keyframes movimento-faixa-cat-02-tablet { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(600px, 0, 0); transform: translate3d(600px, 0, 0); } } @keyframes movimento-faixa-cat-02-tablet { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(600px, 0, 0); } } } /* ========================================================== MOBILE — ABAIXO DE 500px Movimento bem menor ========================================================== */ @media only screen and (max-width:499px) { /* FAIXA 01 */ .faixa-cat-01 { -webkit-animation: movimento-faixa-cat-01-mobile 42s ease-in-out infinite; -moz-animation: movimento-faixa-cat-01-mobile 42s ease-in-out infinite; -o-animation: movimento-faixa-cat-01-mobile 42s ease-in-out infinite; animation: movimento-faixa-cat-01-mobile 42s ease-in-out infinite; } @-webkit-keyframes movimento-faixa-cat-01-mobile { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(-350px, 0, 0); transform: translate3d(-350px, 0, 0); } } @keyframes movimento-faixa-cat-01-mobile { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-350px, 0, 0); } } /* FAIXA 02 */ .faixa-cat-02 { -webkit-animation: movimento-faixa-cat-02-mobile 46s ease-in-out infinite; -moz-animation: movimento-faixa-cat-02-mobile 46s ease-in-out infinite; -o-animation: movimento-faixa-cat-02-mobile 46s ease-in-out infinite; animation: movimento-faixa-cat-02-mobile 46s ease-in-out infinite; } @-webkit-keyframes movimento-faixa-cat-02-mobile { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(350px, 0, 0); transform: translate3d(350px, 0, 0); } } @keyframes movimento-faixa-cat-02-mobile { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(350px, 0, 0); } } } /* ========================================================== ANIMAÇÃO — ICONOGRAFIA INTERNA Movimento suave para a esquerda e retorno à posição inicial Máximo de 1000px em qualquer versão ========================================================== */ #iconografia-int-animada { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } /* ========================================================== DESKTOP — ACIMA DE 1200px Movimento máximo: 1000px ========================================================== */ @media only screen and (min-width:1201px) { #iconografia-int-animada { -webkit-animation: movimento-iconografia-desktop 60s ease-in-out infinite; -moz-animation: movimento-iconografia-desktop 60s ease-in-out infinite; -o-animation: movimento-iconografia-desktop 60s ease-in-out infinite; animation: movimento-iconografia-desktop 60s ease-in-out infinite; } @-webkit-keyframes movimento-iconografia-desktop { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(-1000px, 0, 0); transform: translate3d(-1000px, 0, 0); } } @keyframes movimento-iconografia-desktop { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-1000px, 0, 0); } } } /* ========================================================== TABLET — DE 500px ATÉ 1200px Movimento reduzido: 700px ========================================================== */ @media only screen and (min-width:500px) and (max-width:1200px) { #iconografia-int-animada { -webkit-animation: movimento-iconografia-tablet 52s ease-in-out infinite; -moz-animation: movimento-iconografia-tablet 52s ease-in-out infinite; -o-animation: movimento-iconografia-tablet 52s ease-in-out infinite; animation: movimento-iconografia-tablet 52s ease-in-out infinite; } @-webkit-keyframes movimento-iconografia-tablet { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(-700px, 0, 0); transform: translate3d(-700px, 0, 0); } } @keyframes movimento-iconografia-tablet { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-700px, 0, 0); } } } /* ========================================================== MOBILE — ABAIXO DE 500px Movimento reduzido: 400px ========================================================== */ @media only screen and (max-width:499px) { #iconografia-int-animada { -webkit-animation: movimento-iconografia-mobile 46s ease-in-out infinite; -moz-animation: movimento-iconografia-mobile 46s ease-in-out infinite; -o-animation: movimento-iconografia-mobile 46s ease-in-out infinite; animation: movimento-iconografia-mobile 46s ease-in-out infinite; } @-webkit-keyframes movimento-iconografia-mobile { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); } } @keyframes movimento-iconografia-mobile { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-400px, 0, 0); } } } /* ========================================================== ANIMAÇÃO — TAG IVANA Efeito de placa balançando suavemente Ponto de apoio: canto inferior esquerdo ========================================================== */ #faixa-tag-ivana-int { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; -webkit-animation: balanco-tag-ivana 5s ease-in-out infinite; -moz-animation: balanco-tag-ivana 5s ease-in-out infinite; -o-animation: balanco-tag-ivana 5s ease-in-out infinite; animation: balanco-tag-ivana 5s ease-in-out infinite; } /* ========================================================== SAFARI / CHROME / WEBKIT ========================================================== */ @-webkit-keyframes balanco-tag-ivana { 0%, 100% { -webkit-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 50% { -webkit-transform: rotate(2.5deg); transform: rotate(2.5deg); } } /* ========================================================== FIREFOX ANTIGO ========================================================== */ @-moz-keyframes balanco-tag-ivana { 0%, 100% { -moz-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 50% { -moz-transform: rotate(2.5deg); transform: rotate(2.5deg); } } /* ========================================================== OPERA ANTIGO ========================================================== */ @-o-keyframes balanco-tag-ivana { 0%, 100% { -o-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 50% { -o-transform: rotate(2.5deg); transform: rotate(2.5deg); } } /* ========================================================== PADRÃO ATUAL ========================================================== */ @keyframes balanco-tag-ivana { 0%, 100% { -webkit-transform: rotate(-2.5deg); -moz-transform: rotate(-2.5deg); -o-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 50% { -webkit-transform: rotate(2.5deg); -moz-transform: rotate(2.5deg); -o-transform: rotate(2.5deg); transform: rotate(2.5deg); } } /* ========================================================== MOBILE — BALANÇO UM POUCO MAIS DISCRETO ========================================================== */ @media only screen and (max-width:499px) { @-webkit-keyframes balanco-tag-ivana { 0%, 100% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 50% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } } @keyframes balanco-tag-ivana { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } } /* ========================================================== ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO ========================================================== */ @media (prefers-reduced-motion:reduce) { #faixa-tag-ivana-int { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* ========================================================== ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO ========================================================== */ @media (prefers-reduced-motion:reduce) { #iconografia-int-animada { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* ========================================================== ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO ========================================================== */ @media (prefers-reduced-motion:reduce) { .faixa-cat-01, .faixa-cat-02 { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* ========================================================== ANIMAÇÃO — VOLANTES DOS CTAs Movimento mais perceptível, mas ainda suave ========================================================== */ #circulo-cta-topo, #circulo-cta-topo-02, #circulo-cta-topo-03, #circulo-cta-topo-4, .circulo-cta-topo, .circulo-cta-topo-02, .circulo-cta-topo-03, .circulo-cta-topo-4 { -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; -webkit-animation: movimento-volante-cta 5s ease-in-out infinite; -moz-animation: movimento-volante-cta 5s ease-in-out infinite; -o-animation: movimento-volante-cta 5s ease-in-out infinite; animation: movimento-volante-cta 5s ease-in-out infinite; } /* SAFARI / CHROME */ @-webkit-keyframes movimento-volante-cta { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-transform: rotate(9deg); transform: rotate(9deg); } 75% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* FIREFOX ANTIGO */ @-moz-keyframes movimento-volante-cta { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 25% { -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -moz-transform: rotate(9deg); transform: rotate(9deg); } 75% { -moz-transform: rotate(-6deg); transform: rotate(-6deg); } 100% { -moz-transform: rotate(0deg); transform: rotate(0deg); } } /* OPERA ANTIGO */ @-o-keyframes movimento-volante-cta { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 25% { -o-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -o-transform: rotate(9deg); transform: rotate(9deg); } 75% { -o-transform: rotate(-6deg); transform: rotate(-6deg); } 100% { -o-transform: rotate(0deg); transform: rotate(0deg); } } /* PADRÃO ATUAL */ @keyframes movimento-volante-cta { 0% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-6deg); } 100% { transform: rotate(0deg); } } /* ACESSIBILIDADE */ @media (prefers-reduced-motion:reduce) { #circulo-cta-topo, #circulo-cta-topo-02, #circulo-cta-topo-03, #circulo-cta-topo-4, .circulo-cta-topo, .circulo-cta-topo-02, .circulo-cta-topo-03, .circulo-cta-topo-4 { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; transform: rotate(0deg); } } /* ========================================================== VÍDEO RESPONSIVO — BLOCO PRINCIPAL O vídeo ocupa 100% da largura e altura do #video-int-bloco, usando object-fit: cover. Desktop: video-desktop.mp4 Tablet + Mobile: video-mobile.mp4 ========================================================== */ /* ========================================================== CONTAINER ========================================================== */ #video-int-bloco { position: relative; overflow: hidden; } /* ========================================================== CONFIGURAÇÃO GERAL DOS VÍDEOS ========================================================== */ #video-int-bloco .video-bloco { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; -webkit-object-fit: cover; object-fit: cover; -webkit-object-position: center center; object-position: center center; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ========================================================== DESKTOP — PADRÃO Mostra: video-desktop.mp4 Esconde: video-mobile.mp4 ========================================================== */ #video-int-bloco .video-bloco-desktop { display: block; } #video-int-bloco .video-bloco-mobile { display: none; } /* ========================================================== TABLET + MOBILE — ABAIXO DE 770px Mostra: video-mobile.mp4 Esconde: video-desktop.mp4 ========================================================== */ @media only screen and (max-width:769px) { #video-int-bloco .video-bloco-desktop { display: none; } #video-int-bloco .video-bloco-mobile { display: block; } } /* ========================================================== ACESSIBILIDADE Desativa o movimento para pessoas que configuraram o dispositivo para reduzir animações. ========================================================== */ @media (prefers-reduced-motion:reduce) { #fotos-bloco-circulos-01 { -webkit-animation: none; animation: none; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* ========================================================================== MODAL DE BIOS DA EQUIPE · ROTA DO PEQUIZINHO ========================================================================== */ /* Corrige o fluxo dos cards, já que a estrutura original usa muitos floats. */ .view-sessa-perfil { height: auto !important; display: flex; flex-direction: column; gap: 30px; } .item-card-perfil { float: none !important; margin-bottom: 0 !important; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.045); box-shadow: 0 14px 38px rgba(16, 24, 40, 0.045); transition: transform 0.25s ease, box-shadow 0.25s ease; } .item-card-perfil::after, .toolbar-card-perfil::after, .faixa-cta-card::after { content: ""; display: table; clear: both; } .descricao-perfil { line-height: 1.55; } /* O CTA agora é um