/* * Marcelo Faria — folha de estilos unificada * Gerada a partir das seis páginas fornecidas. * Cada página é isolada por uma classe no elemento . */ /* ========================================================= condominios.php ========================================================= */ body.page-condominios{ --primary: #173f5f; --primary-dark: #0b293f; --primary-light: #2a658e; --secondary: #d6a84b; --secondary-dark: #b8892e; --background: #f4f7f9; --surface: #ffffff; --surface-muted: #edf2f5; --text: #1e2933; --text-muted: #65717c; --border: #dce4e9; --success: #2d8a60; --container: 1180px; --radius-small: 10px; --radius-medium: 18px; --radius-large: 28px; --shadow-small: 0 10px 35px rgba( 11, 41, 63, 0.08 ); --shadow-medium: 0 28px 70px rgba( 11, 41, 63, 0.15 ); } body.page-condominios, body.page-condominios *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body.page-condominios{ margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var( --text ); background: var( --background ); line-height: 1.6; } body.page-condominios.menu-open{ overflow: hidden; } body.page-condominios a{ color: inherit; text-decoration: none; } body.page-condominios button{ font: inherit; } body.page-condominios .container{ width: min( calc( 100% - 40px ), var( --container ) ); margin-inline: auto; } body.page-condominios .topbar{ color: rgba( 255, 255, 255, 0.82 ); background: var( --primary-dark ); font-size: 0.87rem; } body.page-condominios .topbar__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 24px; } body.page-condominios .topbar__links{ display: flex; align-items: center; gap: 24px; } body.page-condominios .topbar a:hover{ color: white; } body.page-condominios .header{ position: sticky; z-index: 100; top: 0; background: rgba( 255, 255, 255, 0.96 ); border-bottom: 1px solid rgba( 220, 228, 233, 0.95 ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); } body.page-condominios .header__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 30px; } body.page-condominios .brand{ display: flex; align-items: center; gap: 13px; flex-shrink: 0; } body.page-condominios .brand__icon{ display: grid; place-items: center; width: 48px; height: 48px; color: white; background: linear-gradient( 145deg, var( --primary-light ), var( --primary-dark ) ); border-radius: 14px; box-shadow: 0 12px 25px rgba( 23, 63, 95, 0.2 ); } body.page-condominios .brand__icon svg{ width: 27px; height: 27px; } body.page-condominios .brand__name{ display: block; color: var( --primary-dark ); font-size: 1.04rem; font-weight: 800; line-height: 1.2; } body.page-condominios .brand__tagline{ display: block; margin-top: 3px; color: var( --text-muted ); font-size: 0.73rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } body.page-condominios .navigation{ display: flex; align-items: center; gap: 10px; } body.page-condominios .navigation__list{ display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } body.page-condominios .navigation__link{ display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: #394854; border-radius: 9px; font-size: 0.91rem; font-weight: 650; transition: color 0.2s ease, background 0.2s ease; } body.page-condominios .navigation__link:hover, body.page-condominios .navigation__link--active{ color: var( --primary ); background: var( --surface-muted ); } body.page-condominios .navigation__button{ display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-left: 8px; padding: 0 20px; color: white; background: var( --primary ); border-radius: var( --radius-small ); font-size: 0.89rem; font-weight: 750; transition: background 0.2s ease, transform 0.2s ease; } body.page-condominios .navigation__button:hover{ background: var( --primary-dark ); transform: translateY( -2px ); } body.page-condominios .menu-toggle{ display: none; place-items: center; width: 46px; height: 46px; padding: 0; color: var( --primary-dark ); background: var( --surface-muted ); border: 0; border-radius: 12px; cursor: pointer; } body.page-condominios .menu-toggle svg{ width: 24px; height: 24px; } body.page-condominios .page-header{ position: relative; overflow: hidden; padding: 92px 0; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); } body.page-condominios .page-header::before{ content: ""; position: absolute; top: -210px; right: -100px; width: 500px; height: 500px; border: 75px solid rgba( 214, 168, 75, 0.09 ); border-radius: 50%; } body.page-condominios .page-header::after{ content: ""; position: absolute; right: 18%; bottom: -250px; width: 480px; height: 480px; border: 1px solid rgba( 255, 255, 255, 0.08 ); border-radius: 50%; } body.page-condominios .page-header__content{ position: relative; z-index: 2; max-width: 820px; } body.page-condominios .eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var( --secondary ); font-size: 0.79rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } body.page-condominios .eyebrow::before{ content: ""; width: 28px; height: 2px; background: currentColor; } body.page-condominios .page-header h1{ margin: 0; font-size: clamp( 2.7rem, 6vw, 4.8rem ); line-height: 1.04; letter-spacing: -0.055em; } body.page-condominios .page-header p{ max-width: 720px; margin: 22px 0 0; color: rgba( 255, 255, 255, 0.74 ); font-size: 1.08rem; line-height: 1.8; } body.page-condominios .section{ padding: 95px 0; } body.page-condominios .section--white{ background: white; } body.page-condominios .section--muted{ background: var( --surface-muted ); } body.page-condominios .section-header{ max-width: 760px; margin: 0 auto 50px; text-align: center; } body.page-condominios .section-header .eyebrow{ justify-content: center; } body.page-condominios .section-title{ margin: 0; color: var( --primary-dark ); font-size: clamp( 2.1rem, 4.4vw, 3.5rem ); line-height: 1.12; letter-spacing: -0.045em; } body.page-condominios .section-description{ margin: 18px 0 0; color: var( --text-muted ); font-size: 1.03rem; line-height: 1.8; } body.page-condominios .condominiums-grid{ display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 22px; } body.page-condominios .condominium-card{ position: relative; overflow: hidden; min-height: 340px; padding: 32px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.page-condominios .condominium-card::after{ content: ""; position: absolute; right: -65px; bottom: -65px; width: 150px; height: 150px; background: rgba( 214, 168, 75, 0.09 ); border-radius: 50%; transition: transform 0.25s ease; } body.page-condominios .condominium-card:hover{ border-color: rgba( 214, 168, 75, 0.55 ); box-shadow: var( --shadow-medium ); transform: translateY( -6px ); } body.page-condominios .condominium-card:hover::after{ transform: scale( 1.25 ); } body.page-condominios .condominium-card__icon{ display: grid; place-items: center; width: 58px; height: 58px; color: white; background: var( --primary ); border-radius: 17px; box-shadow: 0 12px 24px rgba( 23, 63, 95, 0.17 ); } body.page-condominios .condominium-card__icon svg{ width: 29px; height: 29px; } body.page-condominios .condominium-card h2{ position: relative; z-index: 2; margin: 24px 0 12px; color: var( --primary-dark ); font-size: 1.27rem; line-height: 1.3; } body.page-condominios .condominium-card p{ position: relative; z-index: 2; margin: 0; color: var( --text-muted ); font-size: 0.94rem; } body.page-condominios .condominium-card ul{ position: relative; z-index: 2; display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; } body.page-condominios .condominium-card li{ display: flex; align-items: flex-start; gap: 10px; color: #45545f; font-size: 0.88rem; } body.page-condominios .condominium-card li::before{ content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-top: 8px; background: var( --secondary ); border-radius: 50%; } body.page-condominios .approach-layout{ display: grid; grid-template-columns: minmax( 0, 0.88fr ) minmax( 0, 1.12fr ); align-items: center; gap: clamp( 55px, 8vw, 100px ); } body.page-condominios .approach-content p{ margin: 20px 0 0; color: var( --text-muted ); font-size: 1rem; line-height: 1.85; } body.page-condominios .approach-panel{ display: grid; gap: 16px; } body.page-condominios .approach-item{ display: grid; grid-template-columns: 58px minmax( 0, 1fr ); gap: 18px; padding: 24px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); } body.page-condominios .approach-item__icon{ display: grid; place-items: center; width: 52px; height: 52px; color: white; background: var( --primary ); border-radius: 15px; } body.page-condominios .approach-item__icon svg{ width: 25px; height: 25px; } body.page-condominios .approach-item h3{ margin: 1px 0 7px; color: var( --primary-dark ); font-size: 1.08rem; } body.page-condominios .approach-item p{ margin: 0; color: var( --text-muted ); font-size: 0.91rem; } body.page-condominios .benefits-layout{ display: grid; grid-template-columns: minmax( 0, 1.1fr ) minmax( 320px, 0.72fr ); align-items: center; gap: clamp( 50px, 8vw, 100px ); } body.page-condominios .benefits-content p{ margin: 20px 0 0; color: var( --text-muted ); font-size: 1rem; line-height: 1.85; } body.page-condominios .benefits-list{ display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; } body.page-condominios .benefits-list li{ display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var( --surface-muted ); border-radius: 12px; color: #3d4b55; font-size: 0.91rem; } body.page-condominios .benefits-list__icon{ display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; color: white; background: var( --success ); border-radius: 50%; } body.page-condominios .benefits-list__icon svg{ width: 13px; height: 13px; } body.page-condominios .benefits-card{ position: relative; overflow: hidden; padding: 38px; color: white; background: linear-gradient( 145deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-condominios .benefits-card::after{ content: ""; position: absolute; right: -120px; bottom: -120px; width: 300px; height: 300px; border: 55px solid rgba( 214, 168, 75, 0.1 ); border-radius: 50%; } body.page-condominios .benefits-card__content{ position: relative; z-index: 2; } body.page-condominios .benefits-card__icon{ display: grid; place-items: center; width: 62px; height: 62px; color: var( --primary-dark ); background: var( --secondary ); border-radius: 18px; } body.page-condominios .benefits-card__icon svg{ width: 31px; height: 31px; } body.page-condominios .benefits-card h3{ margin: 25px 0 12px; font-size: 1.55rem; line-height: 1.3; } body.page-condominios .benefits-card p{ margin: 0; color: rgba( 255, 255, 255, 0.72 ); } body.page-condominios .transition-grid{ display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 18px; counter-reset: transition; } body.page-condominios .transition-step{ position: relative; padding: 30px 24px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); counter-increment: transition; } body.page-condominios .transition-step::before{ content: "0" counter( transition ); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 21px; color: white; background: var( --primary ); border-radius: 14px; font-size: 0.95rem; font-weight: 850; } body.page-condominios .transition-step h3{ margin: 0 0 10px; color: var( --primary-dark ); font-size: 1.05rem; } body.page-condominios .transition-step p{ margin: 0; color: var( --text-muted ); font-size: 0.9rem; } body.page-condominios .cta-section{ padding: 0 0 100px; background: white; } body.page-condominios .cta{ position: relative; overflow: hidden; padding: 58px; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-condominios .cta::after{ content: ""; position: absolute; top: -130px; right: -130px; width: 390px; height: 390px; border: 65px solid rgba( 214, 168, 75, 0.1 ); border-radius: 50%; } body.page-condominios .cta__inner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; } body.page-condominios .cta__content{ max-width: 700px; } body.page-condominios .cta__label{ color: var( --secondary ); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } body.page-condominios .cta h2{ margin: 10px 0 0; font-size: clamp( 1.9rem, 4vw, 3rem ); line-height: 1.15; letter-spacing: -0.035em; } body.page-condominios .cta p{ margin: 15px 0 0; color: rgba( 255, 255, 255, 0.74 ); } body.page-condominios .button{ display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 25px; color: var( --primary-dark ); background: var( --secondary ); border: 1px solid var( --secondary ); border-radius: var( --radius-small ); font-size: 0.92rem; font-weight: 750; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } body.page-condominios .button:hover{ color: white; background: var( --secondary-dark ); transform: translateY( -2px ); } @media ( max-width: 1050px ){ body.page-condominios .navigation__list{ position: fixed; z-index: 200; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); height: calc( 100vh - 82px ); margin: 0; padding: 25px; overflow-y: auto; background: #ffffff; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.18 ); transform: translateX( 105% ); transition: transform 0.25s ease; } body.page-condominios .navigation__list.is-open{ transform: translateX( 0 ); } body.page-condominios .navigation__list li{ display: block; width: 100%; } body.page-condominios .navigation__link{ display: flex; justify-content: flex-start; width: 100%; min-height: 52px; padding-inline: 17px; } } @media ( max-width: 800px ){ body.page-condominios .topbar{ display: none; } body.page-condominios .header__inner{ min-height: 72px; } body.page-condominios .navigation__list{ top: 72px; } body.page-condominios .page-header{ padding: 68px 0; } body.page-condominios .section{ padding: 72px 0; } body.page-condominios .approach-layout, body.page-condominios .benefits-layout{ grid-template-columns: 1fr; } body.page-condominios .cta__inner{ display: block; } body.page-condominios .cta__actions{ margin-top: 28px; } } @media ( max-width: 620px ){ body.page-condominios .container{ width: min( calc( 100% - 28px ), var( --container ) ); } body.page-condominios .brand__tagline{ display: none; } body.page-condominios .condominiums-grid, body.page-condominios .benefits-list, body.page-condominios .transition-grid{ grid-template-columns: 1fr; } body.page-condominios .condominium-card{ min-height: 0; padding: 27px; } body.page-condominios .approach-item{ grid-template-columns: 48px minmax( 0, 1fr ); padding: 20px; } body.page-condominios .approach-item__icon{ width: 44px; height: 44px; } body.page-condominios .cta{ padding: 38px 28px; } body.page-condominios .button{ width: 100%; } } body.page-condominios .footer{ color: rgba( 255, 255, 255, 0.72 ); background: #091f30; } body.page-condominios .footer__main{ display: grid; grid-template-columns: 1.35fr repeat( 3, 0.75fr ); gap: 55px; padding-block: 68px; } body.page-condominios .footer__brand{ max-width: 360px; } body.page-condominios .footer .brand__name{ color: white; } body.page-condominios .footer .brand__tagline{ color: rgba( 255, 255, 255, 0.55 ); } body.page-condominios .footer__description{ margin: 22px 0 0; color: rgba( 255, 255, 255, 0.62 ); font-size: 0.91rem; line-height: 1.75; } body.page-condominios .footer__column h3{ margin: 0 0 20px; color: white; font-size: 0.95rem; } body.page-condominios .footer__links{ display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; } body.page-condominios .footer__links a{ transition: color 0.2s ease, padding-left 0.2s ease; } body.page-condominios .footer__links a:hover{ padding-left: 4px; color: var( --secondary ); } body.page-condominios .footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 74px; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); font-size: 0.8rem; } body.page-condominios .footer__legal{ display: flex; flex-wrap: wrap; gap: 20px; } body.page-condominios .footer__legal a:hover{ color: white; } body.page-condominios .whatsapp{ position: fixed; z-index: 90; right: 22px; bottom: 22px; display: grid; place-items: center; width: 58px; height: 58px; color: white; background: #25d366; border-radius: 50%; box-shadow: 0 15px 35px rgba( 37, 211, 102, 0.32 ); transition: transform 0.2s ease; } body.page-condominios .whatsapp:hover{ transform: translateY( -3px ) scale( 1.03 ); } body.page-condominios .whatsapp svg{ width: 29px; height: 29px; } @media ( max-width: 1050px ){ body.page-condominios .footer__main{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 800px ){ body.page-condominios .footer__main{ grid-template-columns: 1fr; gap: 38px; } body.page-condominios .footer__bottom{ align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; } } /* ========================================================= contato.php ========================================================= */ body.page-contato{ --primary: #173f5f; --primary-dark: #0b293f; --primary-light: #2a658e; --secondary: #d6a84b; --secondary-dark: #b8892e; --background: #f4f7f9; --surface: #ffffff; --surface-muted: #edf2f5; --text: #1e2933; --text-muted: #65717c; --border: #dce4e9; --success: #176b45; --success-background: #e8f7ef; --success-border: #b7e3cb; --danger: #92251c; --danger-background: #fff0ee; --danger-border: #efc3bd; --container: 1180px; --radius-small: 10px; --radius-medium: 18px; --radius-large: 28px; --shadow-small: 0 10px 35px rgba( 11, 41, 63, 0.08 ); --shadow-medium: 0 28px 70px rgba( 11, 41, 63, 0.15 ); } body.page-contato, body.page-contato *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body.page-contato{ margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var( --text ); background: var( --background ); line-height: 1.6; } body.page-contato.menu-open{ overflow: hidden; } body.page-contato a{ color: inherit; text-decoration: none; } body.page-contato button, body.page-contato input, body.page-contato select, body.page-contato textarea{ font: inherit; } body.page-contato .container{ width: min( calc( 100% - 40px ), var( --container ) ); margin-inline: auto; } body.page-contato .topbar{ color: rgba( 255, 255, 255, 0.82 ); background: var( --primary-dark ); font-size: 0.87rem; } body.page-contato .topbar__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 24px; } body.page-contato .topbar__links{ display: flex; align-items: center; gap: 24px; } body.page-contato .topbar a:hover{ color: white; } body.page-contato .header{ position: sticky; z-index: 100; top: 0; background: rgba( 255, 255, 255, 0.96 ); border-bottom: 1px solid rgba( 220, 228, 233, 0.95 ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); } body.page-contato .header__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 30px; } body.page-contato .brand{ display: flex; align-items: center; gap: 13px; flex-shrink: 0; } body.page-contato .brand__icon{ display: grid; place-items: center; width: 48px; height: 48px; color: white; background: linear-gradient( 145deg, var( --primary-light ), var( --primary-dark ) ); border-radius: 14px; box-shadow: 0 12px 25px rgba( 23, 63, 95, 0.2 ); } body.page-contato .brand__icon svg{ width: 27px; height: 27px; } body.page-contato .brand__name{ display: block; color: var( --primary-dark ); font-size: 1.04rem; font-weight: 800; line-height: 1.2; } body.page-contato .brand__tagline{ display: block; margin-top: 3px; color: var( --text-muted ); font-size: 0.73rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } body.page-contato .navigation{ display: flex; align-items: center; gap: 10px; } body.page-contato .navigation__list{ display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } body.page-contato .navigation__link{ display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: #394854; border-radius: 9px; font-size: 0.91rem; font-weight: 650; transition: color 0.2s ease, background 0.2s ease; } body.page-contato .navigation__link:hover, body.page-contato .navigation__link--active{ color: var( --primary ); background: var( --surface-muted ); } body.page-contato .menu-toggle{ display: none; place-items: center; width: 46px; height: 46px; padding: 0; color: var( --primary-dark ); background: var( --surface-muted ); border: 0; border-radius: 12px; cursor: pointer; } body.page-contato .menu-toggle svg{ width: 24px; height: 24px; } body.page-contato .page-header{ position: relative; overflow: hidden; padding: 90px 0; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); } body.page-contato .page-header::before{ content: ""; position: absolute; top: -210px; right: -100px; width: 500px; height: 500px; border: 75px solid rgba( 214, 168, 75, 0.09 ); border-radius: 50%; } body.page-contato .page-header::after{ content: ""; position: absolute; right: 20%; bottom: -250px; width: 480px; height: 480px; border: 1px solid rgba( 255, 255, 255, 0.08 ); border-radius: 50%; } body.page-contato .page-header__content{ position: relative; z-index: 2; max-width: 760px; } body.page-contato .eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var( --secondary ); font-size: 0.79rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } body.page-contato .eyebrow::before{ content: ""; width: 28px; height: 2px; background: currentColor; } body.page-contato .page-header h1{ margin: 0; font-size: clamp( 2.7rem, 6vw, 4.8rem ); line-height: 1.04; letter-spacing: -0.055em; } body.page-contato .page-header p{ max-width: 680px; margin: 22px 0 0; color: rgba( 255, 255, 255, 0.74 ); font-size: 1.08rem; line-height: 1.8; } body.page-contato .contact-section{ padding: 90px 0 110px; } body.page-contato .contact-layout{ display: grid; grid-template-columns: minmax( 320px, 0.78fr ) minmax( 0, 1.22fr ); align-items: start; gap: 34px; } body.page-contato .contact-info{ position: sticky; top: 112px; overflow: hidden; padding: 38px; color: white; background: linear-gradient( 145deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-contato .contact-info::after{ content: ""; position: absolute; right: -100px; bottom: -120px; width: 280px; height: 280px; border: 48px solid rgba( 255, 255, 255, 0.045 ); border-radius: 50%; } body.page-contato .contact-info__content{ position: relative; z-index: 2; } body.page-contato .contact-info h2{ margin: 0; font-size: 1.9rem; line-height: 1.22; letter-spacing: -0.025em; } body.page-contato .contact-info__description{ margin: 15px 0 0; color: rgba( 255, 255, 255, 0.72 ); } body.page-contato .contact-list{ display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; } body.page-contato .contact-item{ display: flex; align-items: flex-start; gap: 15px; padding: 17px; background: rgba( 255, 255, 255, 0.07 ); border: 1px solid rgba( 255, 255, 255, 0.1 ); border-radius: 14px; } body.page-contato .contact-item__icon{ display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; color: var( --primary-dark ); background: var( --secondary ); border-radius: 12px; } body.page-contato .contact-item__icon svg{ width: 21px; height: 21px; } body.page-contato .contact-item strong{ display: block; font-size: 0.91rem; } body.page-contato .contact-item span{ display: block; margin-top: 3px; color: rgba( 255, 255, 255, 0.68 ); font-size: 0.87rem; word-break: break-word; } body.page-contato .contact-item a:hover{ color: var( --secondary ); } body.page-contato .contact-info__note{ margin: 26px 0 0; padding-top: 22px; color: rgba( 255, 255, 255, 0.59 ); border-top: 1px solid rgba( 255, 255, 255, 0.1 ); font-size: 0.82rem; } body.page-contato .contact-form{ padding: clamp( 30px, 5vw, 48px ); background: var( --surface ); border: 1px solid var( --border ); border-radius: var( --radius-large ); box-shadow: var( --shadow-small ); } body.page-contato .contact-form h2{ margin: 0; color: var( --primary-dark ); font-size: 1.95rem; line-height: 1.2; } body.page-contato .contact-form__description{ margin: 11px 0 30px; color: var( --text-muted ); } body.page-contato .form-message{ margin-bottom: 26px; padding: 16px 18px; border-radius: 12px; font-size: 0.91rem; font-weight: 650; } body.page-contato .form-message--success{ color: var( --success ); background: var( --success-background ); border: 1px solid var( --success-border ); } body.page-contato .form-message--error{ color: var( --danger ); background: var( --danger-background ); border: 1px solid var( --danger-border ); } body.page-contato .form-grid{ display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 20px; } body.page-contato .form-field{ display: grid; gap: 8px; } body.page-contato .form-field--full{ grid-column: 1 / -1; } body.page-contato .form-field--hidden{ position: absolute; left: -9999px; visibility: hidden; } body.page-contato .form-field label{ color: #33434f; font-size: 0.88rem; font-weight: 700; } body.page-contato .form-field label span{ color: var( --danger ); } body.page-contato .form-field input, body.page-contato .form-field select, body.page-contato .form-field textarea{ width: 100%; color: var( --text ); background: #fbfcfd; border: 1px solid var( --border ); border-radius: var( --radius-small ); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } body.page-contato .form-field input, body.page-contato .form-field select{ height: 52px; padding: 0 15px; } body.page-contato .form-field textarea{ min-height: 170px; padding: 14px 15px; resize: vertical; } body.page-contato .form-field input:focus, body.page-contato .form-field select:focus, body.page-contato .form-field textarea:focus{ background: white; border-color: var( --primary ); box-shadow: 0 0 0 4px rgba( 23, 63, 95, 0.1 ); } body.page-contato .form-field input::placeholder, body.page-contato .form-field textarea::placeholder{ color: #98a2aa; } body.page-contato .form-consent{ display: flex; align-items: flex-start; gap: 11px; margin-top: 23px; color: var( --text-muted ); font-size: 0.82rem; } body.page-contato .form-consent input{ flex: 0 0 auto; width: 17px; height: 17px; margin: 3px 0 0; accent-color: var( --primary ); } body.page-contato .form-actions{ display: flex; align-items: center; gap: 18px; margin-top: 28px; } body.page-contato .button{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 51px; padding: 0 25px; color: white; background: var( --primary ); border: 1px solid var( --primary ); border-radius: var( --radius-small ); font-size: 0.92rem; font-weight: 750; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.page-contato .button:hover{ background: var( --primary-dark ); border-color: var( --primary-dark ); box-shadow: 0 14px 30px rgba( 13, 42, 64, 0.17 ); transform: translateY( -2px ); } body.page-contato .button svg{ width: 18px; height: 18px; } body.page-contato .form-required{ color: var( --text-muted ); font-size: 0.79rem; } body.page-contato .footer{ color: rgba( 255, 255, 255, 0.72 ); background: #091f30; } body.page-contato .footer__main{ display: grid; grid-template-columns: 1.35fr repeat( 3, 0.75fr ); gap: 55px; padding-block: 68px; } body.page-contato .footer__brand{ max-width: 360px; } body.page-contato .footer .brand__name{ color: white; } body.page-contato .footer .brand__tagline{ color: rgba( 255, 255, 255, 0.55 ); } body.page-contato .footer__description{ margin: 22px 0 0; color: rgba( 255, 255, 255, 0.62 ); font-size: 0.91rem; line-height: 1.75; } body.page-contato .footer__column h3{ margin: 0 0 20px; color: white; font-size: 0.95rem; } body.page-contato .footer__links{ display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; } body.page-contato .footer__links a{ transition: color 0.2s ease, padding-left 0.2s ease; } body.page-contato .footer__links a:hover{ padding-left: 4px; color: var( --secondary ); } body.page-contato .footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 74px; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); font-size: 0.8rem; } body.page-contato .footer__legal{ display: flex; flex-wrap: wrap; gap: 20px; } body.page-contato .footer__legal a:hover{ color: white; } body.page-contato .whatsapp{ position: fixed; z-index: 90; right: 22px; bottom: 22px; display: grid; place-items: center; width: 58px; height: 58px; color: white; background: #25d366; border-radius: 50%; box-shadow: 0 15px 35px rgba( 37, 211, 102, 0.32 ); transition: transform 0.2s ease; } body.page-contato .whatsapp:hover{ transform: translateY( -3px ) scale( 1.03 ); } body.page-contato .whatsapp svg{ width: 29px; height: 29px; } @media ( max-width: 1050px ){ body.page-contato .navigation__list{ position: fixed; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); padding: 25px; background: white; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.15 ); transform: translateX( 105% ); transition: transform 0.25s ease; } body.page-contato .navigation__list.is-open{ transform: translateX( 0 ); } body.page-contato .navigation__link{ justify-content: flex-start; min-height: 52px; padding-inline: 17px; } body.page-contato .menu-toggle{ display: grid; } body.page-contato .footer__main{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 800px ){ body.page-contato .topbar{ display: none; } body.page-contato .header__inner{ min-height: 72px; } body.page-contato .navigation__list{ top: 72px; } body.page-contato .page-header{ padding: 68px 0; } body.page-contato .contact-section{ padding: 68px 0 85px; } body.page-contato .contact-layout{ grid-template-columns: 1fr; } body.page-contato .contact-info{ position: static; } body.page-contato .footer__main{ grid-template-columns: 1fr; gap: 38px; } body.page-contato .footer__bottom{ align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; } } @media ( max-width: 560px ){ body.page-contato .container{ width: min( calc( 100% - 28px ), var( --container ) ); } body.page-contato .brand__tagline{ display: none; } body.page-contato .form-grid{ grid-template-columns: 1fr; } body.page-contato .form-field--full{ grid-column: auto; } body.page-contato .form-actions{ align-items: stretch; flex-direction: column; } body.page-contato .button{ width: 100%; } body.page-contato .contact-info, body.page-contato .contact-form{ padding: 27px; border-radius: 22px; } } /* ========================================================= conteudos.php ========================================================= */ body.page-conteudos{margin:0;font-family:Arial,sans-serif;background:#f5f7fa;color:#24323f} body.page-conteudos header{background:#173f5f;color:#fff;padding:18px} body.page-conteudos nav a{color:#fff;text-decoration:none;margin-right:18px} body.page-conteudos .hero{background:#214f72;color:#fff;padding:70px 20px;text-align:center} body.page-conteudos .container{max-width:1100px;margin:auto;padding:50px 20px} body.page-conteudos .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} body.page-conteudos .card{background:#fff;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,.08);overflow:hidden} body.page-conteudos .thumb{height:170px;background:#d8e2ea} body.page-conteudos .card h2{padding:20px 20px 10px;margin:0;font-size:22px} body.page-conteudos .card p{padding:0 20px 20px;color:#666} body.page-conteudos .card a{display:inline-block;margin:0 20px 20px;background:#173f5f;color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none} body.page-conteudos .cta{background:#173f5f;color:#fff;padding:60px 20px;text-align:center} body.page-conteudos .cta a{display:inline-block;background:#d6a84b;color:#173f5f;text-decoration:none;padding:14px 24px;border-radius:8px;font-weight:bold} /* ========================================================= index.php ========================================================= */ body.page-index{ --primary: #173f5f; --primary-dark: #0d2a40; --secondary: #d6a84b; --secondary-dark: #b8892e; --background: #f5f7f9; --surface: #ffffff; --surface-muted: #edf2f5; --text: #1e2933; --text-muted: #65717c; --border: #dfe5e9; --success: #2d8a60; --container: 1180px; --radius-small: 10px; --radius-medium: 18px; --radius-large: 28px; --shadow-small: 0 8px 30px rgba( 13, 42, 64, 0.07 ); --shadow-medium: 0 24px 60px rgba( 13, 42, 64, 0.12 ); } body.page-index, body.page-index *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body.page-index{ margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var( --text ); background: var( --background ); line-height: 1.6; } body.page-index.menu-open{ overflow: hidden; } body.page-index img{ display: block; max-width: 100%; } body.page-index a{ color: inherit; text-decoration: none; } body.page-index button, body.page-index input, body.page-index textarea, body.page-index select{ font: inherit; } body.page-index .container{ width: min( calc( 100% - 40px ), var( --container ) ); margin-inline: auto; } body.page-index .skip-link{ position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; color: white; background: var( --primary ); border-radius: var( --radius-small ); transform: translateY( -150% ); } body.page-index .skip-link:focus{ transform: translateY( 0 ); } body.page-index .topbar{ color: rgba( 255, 255, 255, 0.82 ); background: var( --primary-dark ); font-size: 0.88rem; } body.page-index .topbar__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 20px; } body.page-index .topbar__contact{ display: flex; align-items: center; gap: 24px; } body.page-index .topbar a:hover{ color: white; } body.page-index .header{ position: sticky; z-index: 100; top: 0; background: rgba( 255, 255, 255, 0.96 ); border-bottom: 1px solid rgba( 223, 229, 233, 0.9 ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); } body.page-index .header__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 32px; } body.page-index .brand{ display: flex; align-items: center; gap: 13px; flex-shrink: 0; } body.page-index .brand__icon{ display: grid; place-items: center; width: 48px; height: 48px; color: white; background: linear-gradient( 145deg, var( --primary ), var( --primary-dark ) ); border-radius: 14px; box-shadow: 0 10px 24px rgba( 23, 63, 95, 0.2 ); } body.page-index .brand__icon svg{ width: 27px; height: 27px; } body.page-index .brand__name{ display: block; color: var( --primary-dark ); font-size: 1.04rem; font-weight: 800; line-height: 1.2; } body.page-index .brand__tagline{ display: block; margin-top: 3px; color: var( --text-muted ); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } body.page-index .navigation{ display: flex; align-items: center; gap: 7px; } body.page-index .navigation__list{ display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } body.page-index .navigation__link{ display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: #394854; border-radius: 9px; font-size: 0.92rem; font-weight: 650; transition: color 0.2s ease, background 0.2s ease; } body.page-index .navigation__link:hover, body.page-index .navigation__link--active{ color: var( --primary ); background: var( --surface-muted ); } body.page-index .navigation__button{ margin-left: 10px; } body.page-index .menu-toggle{ display: none; place-items: center; width: 46px; height: 46px; padding: 0; color: var( --primary-dark ); background: var( --surface-muted ); border: 0; border-radius: 12px; cursor: pointer; } body.page-index .menu-toggle svg{ width: 24px; height: 24px; } body.page-index .button{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; color: white; background: var( --primary ); border: 1px solid var( --primary ); border-radius: var( --radius-small ); font-size: 0.92rem; font-weight: 750; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } body.page-index .button:hover{ background: var( --primary-dark ); border-color: var( --primary-dark ); box-shadow: 0 14px 30px rgba( 13, 42, 64, 0.17 ); transform: translateY( -2px ); } body.page-index .button--secondary{ color: var( --primary-dark ); background: var( --secondary ); border-color: var( --secondary ); } body.page-index .button--secondary:hover{ color: white; background: var( --secondary-dark ); border-color: var( --secondary-dark ); } body.page-index .button--outline{ color: white; background: transparent; border-color: rgba( 255, 255, 255, 0.5 ); } body.page-index .button--outline:hover{ background: rgba( 255, 255, 255, 0.1 ); border-color: white; } body.page-index .hero{ position: relative; overflow: hidden; color: white; background: linear-gradient( 120deg, rgba( 13, 42, 64, 0.98 ), rgba( 23, 63, 95, 0.9 ) ); } body.page-index .hero::before{ content: ""; position: absolute; top: -180px; right: -110px; width: 520px; height: 520px; border: 1px solid rgba( 255, 255, 255, 0.08 ); border-radius: 50%; } body.page-index .hero::after{ content: ""; position: absolute; right: 60px; bottom: -260px; width: 600px; height: 600px; border: 90px solid rgba( 214, 168, 75, 0.07 ); border-radius: 50%; } body.page-index .hero__inner{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax( 0, 1.15fr ) minmax( 350px, 0.85fr ); align-items: center; min-height: 680px; gap: clamp( 50px, 8vw, 100px ); padding-block: 90px; } body.page-index .eyebrow{ display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var( --secondary ); font-size: 0.79rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } body.page-index .eyebrow::before{ content: ""; width: 28px; height: 2px; background: currentColor; } body.page-index .hero h1{ max-width: 750px; margin: 0; font-size: clamp( 2.8rem, 5.8vw, 5.2rem ); line-height: 1.04; letter-spacing: -0.055em; } body.page-index .hero h1 span{ color: var( --secondary ); } body.page-index .hero__description{ max-width: 670px; margin: 26px 0 0; color: rgba( 255, 255, 255, 0.74 ); font-size: clamp( 1.03rem, 1.8vw, 1.18rem ); line-height: 1.8; } body.page-index .hero__actions{ display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; } body.page-index .hero__features{ display: flex; flex-wrap: wrap; gap: 22px; margin: 36px 0 0; padding: 0; list-style: none; color: rgba( 255, 255, 255, 0.85 ); font-size: 0.9rem; font-weight: 650; } body.page-index .hero__features li{ display: flex; align-items: center; gap: 9px; } body.page-index .hero__features svg{ width: 18px; height: 18px; color: var( --secondary ); } body.page-index .hero-card{ position: relative; padding: 34px; color: var( --text ); background: rgba( 255, 255, 255, 0.97 ); border: 1px solid rgba( 255, 255, 255, 0.4 ); border-radius: var( --radius-large ); box-shadow: 0 35px 80px rgba( 0, 0, 0, 0.24 ); } body.page-index .hero-card__label{ color: var( --secondary-dark ); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } body.page-index .hero-card h2{ margin: 10px 0 8px; color: var( --primary-dark ); font-size: 1.55rem; line-height: 1.25; } body.page-index .hero-card > p{ margin: 0; color: var( --text-muted ); font-size: 0.94rem; } body.page-index .hero-card__items{ display: grid; gap: 12px; margin-top: 25px; } body.page-index .hero-card__item{ display: flex; align-items: flex-start; gap: 14px; padding: 15px; background: var( --surface-muted ); border-radius: 13px; } body.page-index .hero-card__item-icon{ display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; color: white; background: var( --primary ); border-radius: 11px; } body.page-index .hero-card__item-icon svg{ width: 20px; height: 20px; } body.page-index .hero-card__item strong{ display: block; color: var( --primary-dark ); font-size: 0.94rem; } body.page-index .hero-card__item span{ display: block; margin-top: 2px; color: var( --text-muted ); font-size: 0.82rem; } body.page-index .section{ padding-block: 100px; } body.page-index .section--white{ background: var( --surface ); } body.page-index .section--muted{ background: var( --surface-muted ); } body.page-index .section__header{ max-width: 700px; margin-bottom: 48px; } body.page-index .section__header--center{ margin-inline: auto; text-align: center; } body.page-index .section__header--center .eyebrow{ justify-content: center; } body.page-index .section__title{ margin: 0; color: var( --primary-dark ); font-size: clamp( 2rem, 4vw, 3.25rem ); line-height: 1.12; letter-spacing: -0.04em; } body.page-index .section__description{ margin: 18px 0 0; color: var( --text-muted ); font-size: 1.04rem; line-height: 1.8; } body.page-index .services{ display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 22px; } body.page-index .service-card{ position: relative; overflow: hidden; padding: 30px; background: var( --surface ); border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.page-index .service-card::after{ content: ""; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px; background: rgba( 214, 168, 75, 0.08 ); border-radius: 50%; transition: transform 0.25s ease; } body.page-index .service-card:hover{ border-color: rgba( 214, 168, 75, 0.55 ); box-shadow: var( --shadow-medium ); transform: translateY( -7px ); } body.page-index .service-card:hover::after{ transform: scale( 1.3 ); } body.page-index .service-card__icon{ display: grid; place-items: center; width: 55px; height: 55px; color: white; background: var( --primary ); border-radius: 15px; box-shadow: 0 12px 24px rgba( 23, 63, 95, 0.17 ); } body.page-index .service-card__icon svg{ width: 26px; height: 26px; } body.page-index .service-card h3{ margin: 24px 0 10px; color: var( --primary-dark ); font-size: 1.18rem; } body.page-index .service-card p{ margin: 0; color: var( --text-muted ); font-size: 0.94rem; } body.page-index .service-card a{ position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; color: var( --primary ); font-size: 0.88rem; font-weight: 750; } body.page-index .service-card a:hover{ color: var( --secondary-dark ); } body.page-index .about{ display: grid; grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr ); align-items: center; gap: clamp( 50px, 8vw, 100px ); } body.page-index .about__visual{ position: relative; min-height: 500px; } body.page-index .about__main-card{ position: absolute; inset: 0 70px 60px 0; overflow: hidden; padding: 42px; color: white; background: linear-gradient( 145deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-index .about__main-card::before{ content: ""; position: absolute; right: -100px; bottom: -100px; width: 280px; height: 280px; border: 55px solid rgba( 255, 255, 255, 0.05 ); border-radius: 50%; } body.page-index .about__building{ position: relative; z-index: 2; display: grid; place-items: center; min-height: 300px; } body.page-index .about__building svg{ width: min( 100%, 250px ); color: rgba( 255, 255, 255, 0.9 ); } body.page-index .about__badge{ position: absolute; z-index: 3; right: 0; bottom: 0; width: 210px; padding: 25px; background: var( --surface ); border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-medium ); } body.page-index .about__badge strong{ display: block; color: var( --primary ); font-size: 2.4rem; line-height: 1; } body.page-index .about__badge span{ display: block; margin-top: 9px; color: var( --text-muted ); font-size: 0.86rem; font-weight: 650; } body.page-index .check-list{ display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; } body.page-index .check-list li{ display: flex; align-items: flex-start; gap: 13px; color: #3d4b55; } body.page-index .check-list__icon{ display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; margin-top: 1px; color: white; background: var( --success ); border-radius: 50%; } body.page-index .check-list__icon svg{ width: 14px; height: 14px; } body.page-index .types{ display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 24px; } body.page-index .type-card{ position: relative; display: flex; align-items: flex-end; min-height: 400px; overflow: hidden; padding: 34px; color: white; background: var( --primary-dark ); border-radius: var( --radius-large ); } body.page-index .type-card::before{ content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba( 7, 28, 43, 0.98 ), rgba( 23, 63, 95, 0.3 ) ); } body.page-index .type-card--vertical{ background: linear-gradient( 135deg, #102f47, #32678d ); } body.page-index .type-card--horizontal{ background: linear-gradient( 135deg, #234238, #4f7967 ); } body.page-index .type-card__art{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.25; transform: translate( 70px, -20px ); } body.page-index .type-card__art svg{ width: 310px; height: 310px; } body.page-index .type-card__content{ position: relative; z-index: 2; max-width: 440px; } body.page-index .type-card__tag{ display: inline-flex; padding: 6px 11px; color: var( --secondary ); background: rgba( 255, 255, 255, 0.09 ); border: 1px solid rgba( 255, 255, 255, 0.15 ); border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.page-index .type-card h3{ margin: 16px 0 10px; font-size: 1.75rem; } body.page-index .type-card p{ margin: 0; color: rgba( 255, 255, 255, 0.75 ); font-size: 0.94rem; } body.page-index .process{ display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 20px; counter-reset: process; } body.page-index .process__item{ position: relative; padding: 28px; background: var( --surface ); border: 1px solid var( --border ); border-radius: var( --radius-medium ); counter-increment: process; } body.page-index .process__item::before{ content: "0" counter( process ); display: block; margin-bottom: 22px; color: var( --secondary-dark ); font-size: 0.83rem; font-weight: 850; letter-spacing: 0.1em; } body.page-index .process__item h3{ margin: 0 0 10px; color: var( --primary-dark ); font-size: 1.08rem; } body.page-index .process__item p{ margin: 0; color: var( --text-muted ); font-size: 0.89rem; } body.page-index .cta{ position: relative; overflow: hidden; padding: 58px; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-index .cta::after{ content: ""; position: absolute; top: -130px; right: -130px; width: 390px; height: 390px; border: 65px solid rgba( 214, 168, 75, 0.1 ); border-radius: 50%; } body.page-index .cta__inner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; } body.page-index .cta__content{ max-width: 690px; } body.page-index .cta__content span{ color: var( --secondary ); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } body.page-index .cta h2{ margin: 10px 0 0; font-size: clamp( 1.8rem, 4vw, 3rem ); line-height: 1.15; letter-spacing: -0.035em; } body.page-index .cta p{ margin: 15px 0 0; color: rgba( 255, 255, 255, 0.74 ); } body.page-index .footer{ margin-top: 100px; color: rgba( 255, 255, 255, 0.72 ); background: #091f30; } body.page-index .footer__main{ display: grid; grid-template-columns: 1.35fr repeat( 3, 0.75fr ); gap: 55px; padding-block: 68px; } body.page-index .footer__brand{ max-width: 360px; } body.page-index .footer .brand__name{ color: white; } body.page-index .footer .brand__tagline{ color: rgba( 255, 255, 255, 0.55 ); } body.page-index .footer__description{ margin: 22px 0 0; color: rgba( 255, 255, 255, 0.62 ); font-size: 0.91rem; line-height: 1.75; } body.page-index .footer__social{ display: flex; gap: 10px; margin-top: 24px; } body.page-index .footer__social a{ display: grid; place-items: center; width: 41px; height: 41px; color: white; background: rgba( 255, 255, 255, 0.07 ); border: 1px solid rgba( 255, 255, 255, 0.1 ); border-radius: 11px; transition: background 0.2s ease, transform 0.2s ease; } body.page-index .footer__social a:hover{ background: var( --secondary-dark ); transform: translateY( -2px ); } body.page-index .footer__social svg{ width: 18px; height: 18px; } body.page-index .footer__column h3{ margin: 0 0 20px; color: white; font-size: 0.95rem; } body.page-index .footer__links{ display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; } body.page-index .footer__links a{ transition: color 0.2s ease, padding-left 0.2s ease; } body.page-index .footer__links a:hover{ padding-left: 4px; color: var( --secondary ); } body.page-index .footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 74px; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); font-size: 0.8rem; } body.page-index .footer__legal{ display: flex; flex-wrap: wrap; gap: 20px; } body.page-index .footer__legal a:hover{ color: white; } body.page-index .whatsapp{ position: fixed; z-index: 90; right: 22px; bottom: 22px; display: grid; place-items: center; width: 58px; height: 58px; color: white; background: #25d366; border-radius: 50%; box-shadow: 0 15px 35px rgba( 37, 211, 102, 0.32 ); transition: transform 0.2s ease; } body.page-index .whatsapp:hover{ transform: translateY( -3px ) scale( 1.03 ); } body.page-index .whatsapp svg{ width: 29px; height: 29px; } @media ( max-width: 1050px ){ body.page-index .navigation__list{ position: fixed; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); padding: 25px; background: white; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.15 ); transform: translateX( 105% ); transition: transform 0.25s ease; } body.page-index .navigation__list.is-open{ transform: translateX( 0 ); } body.page-index .navigation__link{ justify-content: flex-start; min-height: 52px; padding-inline: 17px; } body.page-index .navigation__button{ display: none; } body.page-index .menu-toggle{ display: grid; } body.page-index .hero__inner{ grid-template-columns: 1fr; min-height: auto; } body.page-index .hero-card{ max-width: 650px; } body.page-index .services{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } body.page-index .process{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } body.page-index .footer__main{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 760px ){ body.page-index .topbar{ display: none; } body.page-index .header__inner{ min-height: 72px; } body.page-index .navigation__list{ top: 72px; } body.page-index .hero__inner{ padding-block: 70px; } body.page-index .hero h1{ font-size: clamp( 2.5rem, 12vw, 4rem ); } body.page-index .section{ padding-block: 75px; } body.page-index .services, body.page-index .types, body.page-index .process{ grid-template-columns: 1fr; } body.page-index .about{ grid-template-columns: 1fr; } body.page-index .about__visual{ min-height: 430px; } body.page-index .about__main-card{ inset: 0 45px 50px 0; } body.page-index .cta{ padding: 38px 28px; } body.page-index .cta__inner{ display: block; } body.page-index .cta__actions{ margin-top: 28px; } body.page-index .footer{ margin-top: 75px; } body.page-index .footer__main{ grid-template-columns: 1fr; gap: 38px; } body.page-index .footer__bottom{ align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; } } @media ( max-width: 480px ){ body.page-index .container{ width: min( calc( 100% - 28px ), var( --container ) ); } body.page-index .brand__tagline{ display: none; } body.page-index .brand__icon{ width: 43px; height: 43px; } body.page-index .hero__actions{ display: grid; } body.page-index .button{ width: 100%; } body.page-index .hero-card{ padding: 25px; border-radius: 22px; } body.page-index .service-card{ padding: 25px; } body.page-index .about__visual{ min-height: 390px; } body.page-index .about__main-card{ inset: 0 25px 60px 0; padding: 25px; } body.page-index .about__badge{ width: 175px; padding: 20px; } body.page-index .type-card{ min-height: 360px; padding: 27px; } } @media ( prefers-reduced-motion: reduce ){ body.page-index, body.page-index *, body.page-index *::before, body.page-index *::after{ scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= servicos.php ========================================================= */ body.page-servicos{ --primary: #173f5f; --primary-dark: #0b293f; --primary-light: #2a658e; --secondary: #d6a84b; --secondary-dark: #b8892e; --background: #f4f7f9; --surface: #ffffff; --surface-muted: #edf2f5; --text: #1e2933; --text-muted: #65717c; --border: #dce4e9; --success: #2d8a60; --container: 1180px; --radius-small: 10px; --radius-medium: 18px; --radius-large: 28px; --shadow-small: 0 10px 35px rgba( 11, 41, 63, 0.08 ); --shadow-medium: 0 28px 70px rgba( 11, 41, 63, 0.15 ); } body.page-servicos, body.page-servicos *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body.page-servicos{ margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var( --text ); background: var( --background ); line-height: 1.6; } body.page-servicos.menu-open{ overflow: hidden; } body.page-servicos a{ color: inherit; text-decoration: none; } body.page-servicos button{ font: inherit; } body.page-servicos .container{ width: min( calc( 100% - 40px ), var( --container ) ); margin-inline: auto; } body.page-servicos .topbar{ color: rgba( 255, 255, 255, 0.82 ); background: var( --primary-dark ); font-size: 0.87rem; } body.page-servicos .topbar__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 24px; } body.page-servicos .topbar__links{ display: flex; align-items: center; gap: 24px; } body.page-servicos .topbar a:hover{ color: white; } body.page-servicos .header{ position: sticky; z-index: 100; top: 0; background: rgba( 255, 255, 255, 0.96 ); border-bottom: 1px solid rgba( 220, 228, 233, 0.95 ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); } body.page-servicos .header__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 30px; } body.page-servicos .brand{ display: flex; align-items: center; gap: 13px; flex-shrink: 0; } body.page-servicos .brand__icon{ display: grid; place-items: center; width: 48px; height: 48px; color: white; background: linear-gradient( 145deg, var( --primary-light ), var( --primary-dark ) ); border-radius: 14px; box-shadow: 0 12px 25px rgba( 23, 63, 95, 0.2 ); } body.page-servicos .brand__icon svg{ width: 27px; height: 27px; } body.page-servicos .brand__name{ display: block; color: var( --primary-dark ); font-size: 1.04rem; font-weight: 800; line-height: 1.2; } body.page-servicos .brand__tagline{ display: block; margin-top: 3px; color: var( --text-muted ); font-size: 0.73rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } body.page-servicos .navigation{ display: flex; align-items: center; gap: 10px; } body.page-servicos .navigation__list{ display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } body.page-servicos .navigation__link{ display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: #394854; border-radius: 9px; font-size: 0.91rem; font-weight: 650; transition: color 0.2s ease, background 0.2s ease; } body.page-servicos .navigation__link:hover, body.page-servicos .navigation__link--active{ color: var( --primary ); background: var( --surface-muted ); } body.page-servicos .navigation__button{ display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-left: 8px; padding: 0 20px; color: white; background: var( --primary ); border-radius: var( --radius-small ); font-size: 0.89rem; font-weight: 750; transition: background 0.2s ease, transform 0.2s ease; } body.page-servicos .navigation__button:hover{ background: var( --primary-dark ); transform: translateY( -2px ); } body.page-servicos .menu-toggle{ display: none; place-items: center; width: 46px; height: 46px; padding: 0; color: var( --primary-dark ); background: var( --surface-muted ); border: 0; border-radius: 12px; cursor: pointer; } body.page-servicos .menu-toggle svg{ width: 24px; height: 24px; } body.page-servicos .page-header{ position: relative; overflow: hidden; padding: 92px 0; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); } body.page-servicos .page-header::before{ content: ""; position: absolute; top: -210px; right: -100px; width: 500px; height: 500px; border: 75px solid rgba( 214, 168, 75, 0.09 ); border-radius: 50%; } body.page-servicos .page-header::after{ content: ""; position: absolute; right: 18%; bottom: -250px; width: 480px; height: 480px; border: 1px solid rgba( 255, 255, 255, 0.08 ); border-radius: 50%; } body.page-servicos .page-header__content{ position: relative; z-index: 2; max-width: 800px; } body.page-servicos .eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var( --secondary ); font-size: 0.79rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } body.page-servicos .eyebrow::before{ content: ""; width: 28px; height: 2px; background: currentColor; } body.page-servicos .page-header h1{ margin: 0; font-size: clamp( 2.7rem, 6vw, 4.8rem ); line-height: 1.04; letter-spacing: -0.055em; } body.page-servicos .page-header p{ max-width: 720px; margin: 22px 0 0; color: rgba( 255, 255, 255, 0.74 ); font-size: 1.08rem; line-height: 1.8; } body.page-servicos .services-section{ padding: 95px 0; background: var( --surface ); } body.page-servicos .section-header{ max-width: 760px; margin: 0 auto 50px; text-align: center; } body.page-servicos .section-header .eyebrow{ justify-content: center; } body.page-servicos .section-title{ margin: 0; color: var( --primary-dark ); font-size: clamp( 2.1rem, 4.4vw, 3.5rem ); line-height: 1.12; letter-spacing: -0.045em; } body.page-servicos .section-description{ margin: 18px 0 0; color: var( --text-muted ); font-size: 1.03rem; line-height: 1.8; } body.page-servicos .services-grid{ display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 22px; } body.page-servicos .service-card{ position: relative; overflow: hidden; padding: 32px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.page-servicos .service-card::after{ content: ""; position: absolute; right: -55px; bottom: -55px; width: 120px; height: 120px; background: rgba( 214, 168, 75, 0.08 ); border-radius: 50%; transition: transform 0.25s ease; } body.page-servicos .service-card:hover{ border-color: rgba( 214, 168, 75, 0.55 ); box-shadow: var( --shadow-medium ); transform: translateY( -6px ); } body.page-servicos .service-card:hover::after{ transform: scale( 1.25 ); } body.page-servicos .service-card__icon{ display: grid; place-items: center; width: 56px; height: 56px; color: white; background: var( --primary ); border-radius: 16px; box-shadow: 0 12px 24px rgba( 23, 63, 95, 0.17 ); } body.page-servicos .service-card__icon svg{ width: 27px; height: 27px; } body.page-servicos .service-card h2{ position: relative; z-index: 2; margin: 23px 0 11px; color: var( --primary-dark ); font-size: 1.22rem; line-height: 1.3; } body.page-servicos .service-card p{ position: relative; z-index: 2; margin: 0; color: var( --text-muted ); font-size: 0.94rem; } body.page-servicos .service-card ul{ position: relative; z-index: 2; display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; } body.page-servicos .service-card li{ display: flex; align-items: flex-start; gap: 10px; color: #45545f; font-size: 0.88rem; } body.page-servicos .service-card li::before{ content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-top: 8px; background: var( --secondary ); border-radius: 50%; } body.page-servicos .process-section{ padding: 95px 0; background: var( --surface-muted ); } body.page-servicos .process-layout{ display: grid; grid-template-columns: minmax( 0, 0.86fr ) minmax( 0, 1.14fr ); align-items: center; gap: clamp( 55px, 8vw, 100px ); } body.page-servicos .process-content p{ margin: 20px 0 0; color: var( --text-muted ); font-size: 1rem; line-height: 1.85; } body.page-servicos .process-steps{ display: grid; gap: 17px; } body.page-servicos .process-step{ display: grid; grid-template-columns: 58px minmax( 0, 1fr ); gap: 18px; padding: 24px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); } body.page-servicos .process-step__number{ display: grid; place-items: center; width: 52px; height: 52px; color: white; background: var( --primary ); border-radius: 15px; font-size: 1.05rem; font-weight: 850; } body.page-servicos .process-step h3{ margin: 1px 0 7px; color: var( --primary-dark ); font-size: 1.08rem; } body.page-servicos .process-step p{ margin: 0; color: var( --text-muted ); font-size: 0.91rem; } body.page-servicos .differentials-section{ padding: 95px 0; background: white; } body.page-servicos .differentials-layout{ display: grid; grid-template-columns: minmax( 0, 1.12fr ) minmax( 320px, 0.72fr ); align-items: center; gap: clamp( 50px, 8vw, 100px ); } body.page-servicos .differentials-content p{ margin: 20px 0 0; color: var( --text-muted ); font-size: 1rem; line-height: 1.85; } body.page-servicos .differentials-list{ display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; } body.page-servicos .differentials-list li{ display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var( --surface-muted ); border-radius: 12px; color: #3d4b55; font-size: 0.91rem; } body.page-servicos .differentials-list__icon{ display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; color: white; background: var( --success ); border-radius: 50%; } body.page-servicos .differentials-list__icon svg{ width: 13px; height: 13px; } body.page-servicos .differentials-card{ position: relative; overflow: hidden; padding: 38px; color: white; background: linear-gradient( 145deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-servicos .differentials-card::after{ content: ""; position: absolute; right: -120px; bottom: -120px; width: 300px; height: 300px; border: 55px solid rgba( 214, 168, 75, 0.1 ); border-radius: 50%; } body.page-servicos .differentials-card__content{ position: relative; z-index: 2; } body.page-servicos .differentials-card__icon{ display: grid; place-items: center; width: 62px; height: 62px; color: var( --primary-dark ); background: var( --secondary ); border-radius: 18px; } body.page-servicos .differentials-card__icon svg{ width: 31px; height: 31px; } body.page-servicos .differentials-card h3{ margin: 25px 0 12px; font-size: 1.55rem; line-height: 1.3; } body.page-servicos .differentials-card p{ margin: 0; color: rgba( 255, 255, 255, 0.72 ); } body.page-servicos .differentials-card a{ display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 27px; padding: 0 22px; color: var( --primary-dark ); background: var( --secondary ); border-radius: var( --radius-small ); font-size: 0.91rem; font-weight: 800; transition: background 0.2s ease, transform 0.2s ease; } body.page-servicos .differentials-card a:hover{ background: white; transform: translateY( -2px ); } body.page-servicos .cta-section{ padding: 0 0 100px; background: white; } body.page-servicos .cta{ position: relative; overflow: hidden; padding: 58px; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-servicos .cta::after{ content: ""; position: absolute; top: -130px; right: -130px; width: 390px; height: 390px; border: 65px solid rgba( 214, 168, 75, 0.1 ); border-radius: 50%; } body.page-servicos .cta__inner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; } body.page-servicos .cta__content{ max-width: 700px; } body.page-servicos .cta__label{ color: var( --secondary ); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } body.page-servicos .cta h2{ margin: 10px 0 0; font-size: clamp( 1.9rem, 4vw, 3rem ); line-height: 1.15; letter-spacing: -0.035em; } body.page-servicos .cta p{ margin: 15px 0 0; color: rgba( 255, 255, 255, 0.74 ); } body.page-servicos .button{ display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 25px; color: var( --primary-dark ); background: var( --secondary ); border: 1px solid var( --secondary ); border-radius: var( --radius-small ); font-size: 0.92rem; font-weight: 750; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } body.page-servicos .button:hover{ color: white; background: var( --secondary-dark ); transform: translateY( -2px ); } body.page-servicos .footer{ color: rgba( 255, 255, 255, 0.72 ); background: #091f30; } body.page-servicos .footer__main{ display: grid; grid-template-columns: 1.35fr repeat( 3, 0.75fr ); gap: 55px; padding-block: 68px; } body.page-servicos .footer__brand{ max-width: 360px; } body.page-servicos .footer .brand__name{ color: white; } body.page-servicos .footer .brand__tagline{ color: rgba( 255, 255, 255, 0.55 ); } body.page-servicos .footer__description{ margin: 22px 0 0; color: rgba( 255, 255, 255, 0.62 ); font-size: 0.91rem; line-height: 1.75; } body.page-servicos .footer__column h3{ margin: 0 0 20px; color: white; font-size: 0.95rem; } body.page-servicos .footer__links{ display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; } body.page-servicos .footer__links a{ transition: color 0.2s ease, padding-left 0.2s ease; } body.page-servicos .footer__links a:hover{ padding-left: 4px; color: var( --secondary ); } body.page-servicos .footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 74px; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); font-size: 0.8rem; } body.page-servicos .footer__legal{ display: flex; flex-wrap: wrap; gap: 20px; } body.page-servicos .footer__legal a:hover{ color: white; } body.page-servicos .whatsapp{ position: fixed; z-index: 90; right: 22px; bottom: 22px; display: grid; place-items: center; width: 58px; height: 58px; color: white; background: #25d366; border-radius: 50%; box-shadow: 0 15px 35px rgba( 37, 211, 102, 0.32 ); transition: transform 0.2s ease; } body.page-servicos .whatsapp:hover{ transform: translateY( -3px ) scale( 1.03 ); } body.page-servicos .whatsapp svg{ width: 29px; height: 29px; } @media ( max-width: 1050px ){ body.page-servicos .navigation__list{ position: fixed; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); padding: 25px; background: white; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.15 ); transform: translateX( 105% ); transition: transform 0.25s ease; } body.page-servicos .navigation__list.is-open{ transform: translateX( 0 ); } body.page-servicos .navigation__link{ justify-content: flex-start; min-height: 52px; padding-inline: 17px; } body.page-servicos .navigation__button{ display: none; } body.page-servicos .menu-toggle{ display: grid; } body.page-servicos .services-grid{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } body.page-servicos .footer__main{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 800px ){ body.page-servicos .topbar{ display: none; } body.page-servicos .header__inner{ min-height: 72px; } body.page-servicos .navigation__list{ top: 72px; } body.page-servicos .page-header{ padding: 68px 0; } body.page-servicos .services-section, body.page-servicos .process-section, body.page-servicos .differentials-section{ padding: 72px 0; } body.page-servicos .process-layout, body.page-servicos .differentials-layout{ grid-template-columns: 1fr; } body.page-servicos .cta__inner{ display: block; } body.page-servicos .cta__actions{ margin-top: 28px; } body.page-servicos .footer__main{ grid-template-columns: 1fr; gap: 38px; } body.page-servicos .footer__bottom{ align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; } } @media ( max-width: 620px ){ body.page-servicos .container{ width: min( calc( 100% - 28px ), var( --container ) ); } body.page-servicos .brand__tagline{ display: none; } body.page-servicos .services-grid, body.page-servicos .differentials-list{ grid-template-columns: 1fr; } body.page-servicos .service-card{ padding: 27px; } body.page-servicos .process-step{ grid-template-columns: 48px minmax( 0, 1fr ); padding: 20px; } body.page-servicos .process-step__number{ width: 44px; height: 44px; } body.page-servicos .cta{ padding: 38px 28px; } body.page-servicos .button{ width: 100%; } } /* ========================================================= sobre.php ========================================================= */ body.page-sobre{ --primary: #173f5f; --primary-dark: #0b293f; --primary-light: #2a658e; --secondary: #d6a84b; --secondary-dark: #b8892e; --background: #f4f7f9; --surface: #ffffff; --surface-muted: #edf2f5; --text: #1e2933; --text-muted: #65717c; --border: #dce4e9; --success: #2d8a60; --container: 1180px; --radius-small: 10px; --radius-medium: 18px; --radius-large: 28px; --shadow-small: 0 10px 35px rgba( 11, 41, 63, 0.08 ); --shadow-medium: 0 28px 70px rgba( 11, 41, 63, 0.15 ); } body.page-sobre, body.page-sobre *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body.page-sobre{ margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var( --text ); background: var( --background ); line-height: 1.6; } body.page-sobre.menu-open{ overflow: hidden; } body.page-sobre a{ color: inherit; text-decoration: none; } body.page-sobre button{ font: inherit; } body.page-sobre .container{ width: min( calc( 100% - 40px ), var( --container ) ); margin-inline: auto; } body.page-sobre .topbar{ color: rgba( 255, 255, 255, 0.82 ); background: var( --primary-dark ); font-size: 0.87rem; } body.page-sobre .topbar__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 24px; } body.page-sobre .topbar__links{ display: flex; align-items: center; gap: 24px; } body.page-sobre .topbar a:hover{ color: white; } body.page-sobre .header{ position: sticky; z-index: 100; top: 0; background: rgba( 255, 255, 255, 0.96 ); border-bottom: 1px solid rgba( 220, 228, 233, 0.95 ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); } body.page-sobre .header__inner{ display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 30px; } body.page-sobre .brand{ display: flex; align-items: center; gap: 13px; flex-shrink: 0; } body.page-sobre .brand__icon{ display: grid; place-items: center; width: 48px; height: 48px; color: white; background: linear-gradient( 145deg, var( --primary-light ), var( --primary-dark ) ); border-radius: 14px; box-shadow: 0 12px 25px rgba( 23, 63, 95, 0.2 ); } body.page-sobre .brand__icon svg{ width: 27px; height: 27px; } body.page-sobre .brand__name{ display: block; color: var( --primary-dark ); font-size: 1.04rem; font-weight: 800; line-height: 1.2; } body.page-sobre .brand__tagline{ display: block; margin-top: 3px; color: var( --text-muted ); font-size: 0.73rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; } body.page-sobre .navigation{ display: flex; align-items: center; gap: 10px; } body.page-sobre .navigation__list{ display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } body.page-sobre .navigation__link{ display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: #394854; border-radius: 9px; font-size: 0.91rem; font-weight: 650; transition: color 0.2s ease, background 0.2s ease; } body.page-sobre .navigation__link:hover, body.page-sobre .navigation__link--active{ color: var( --primary ); background: var( --surface-muted ); } body.page-sobre .navigation__button{ display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-left: 8px; padding: 0 20px; color: white; background: var( --primary ); border-radius: var( --radius-small ); font-size: 0.89rem; font-weight: 750; transition: background 0.2s ease, transform 0.2s ease; } body.page-sobre .navigation__button:hover{ background: var( --primary-dark ); transform: translateY( -2px ); } body.page-sobre .menu-toggle{ display: none; place-items: center; width: 46px; height: 46px; padding: 0; color: var( --primary-dark ); background: var( --surface-muted ); border: 0; border-radius: 12px; cursor: pointer; } body.page-sobre .menu-toggle svg{ width: 24px; height: 24px; } body.page-sobre .page-header{ position: relative; overflow: hidden; padding: 90px 0; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); } body.page-sobre .page-header::before{ content: ""; position: absolute; top: -210px; right: -100px; width: 500px; height: 500px; border: 75px solid rgba( 214, 168, 75, 0.09 ); border-radius: 50%; } body.page-sobre .page-header::after{ content: ""; position: absolute; right: 20%; bottom: -250px; width: 480px; height: 480px; border: 1px solid rgba( 255, 255, 255, 0.08 ); border-radius: 50%; } body.page-sobre .page-header__content{ position: relative; z-index: 2; max-width: 760px; } body.page-sobre .eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var( --secondary ); font-size: 0.79rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } body.page-sobre .eyebrow::before{ content: ""; width: 28px; height: 2px; background: currentColor; } body.page-sobre .page-header h1{ margin: 0; font-size: clamp( 2.7rem, 6vw, 4.8rem ); line-height: 1.04; letter-spacing: -0.055em; } body.page-sobre .page-header p{ max-width: 680px; margin: 22px 0 0; color: rgba( 255, 255, 255, 0.74 ); font-size: 1.08rem; line-height: 1.8; } body.page-sobre .about-section{ padding: 95px 0; background: var( --surface ); } body.page-sobre .about-layout{ display: grid; grid-template-columns: minmax( 0, 0.88fr ) minmax( 0, 1.12fr ); align-items: center; gap: clamp( 55px, 8vw, 100px ); } body.page-sobre .about-visual{ position: relative; min-height: 540px; } body.page-sobre .about-visual__main{ position: absolute; inset: 0 70px 70px 0; display: grid; place-items: center; overflow: hidden; color: white; background: linear-gradient( 145deg, var( --primary-dark ), var( --primary-light ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-sobre .about-visual__main::before{ content: ""; position: absolute; right: -120px; bottom: -130px; width: 350px; height: 350px; border: 60px solid rgba( 255, 255, 255, 0.05 ); border-radius: 50%; } body.page-sobre .about-visual__main svg{ position: relative; z-index: 2; width: min( 68%, 290px ); opacity: 0.95; } body.page-sobre .about-visual__badge{ position: absolute; z-index: 3; right: 0; bottom: 0; width: 220px; padding: 27px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-medium ); } body.page-sobre .about-visual__badge strong{ display: block; color: var( --primary ); font-size: 2.5rem; line-height: 1; } body.page-sobre .about-visual__badge span{ display: block; margin-top: 10px; color: var( --text-muted ); font-size: 0.86rem; font-weight: 650; } body.page-sobre .section-title{ margin: 0; color: var( --primary-dark ); font-size: clamp( 2.1rem, 4.4vw, 3.5rem ); line-height: 1.12; letter-spacing: -0.045em; } body.page-sobre .about-content p{ margin: 20px 0 0; color: var( --text-muted ); font-size: 1rem; line-height: 1.85; } body.page-sobre .check-list{ display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; } body.page-sobre .check-list li{ display: flex; align-items: flex-start; gap: 13px; color: #3d4b55; } body.page-sobre .check-list__icon{ display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; margin-top: 1px; color: white; background: var( --success ); border-radius: 50%; } body.page-sobre .check-list__icon svg{ width: 14px; height: 14px; } body.page-sobre .values-section{ padding: 95px 0; background: var( --surface-muted ); } body.page-sobre .section-header{ max-width: 740px; margin: 0 auto 48px; text-align: center; } body.page-sobre .section-header .eyebrow{ justify-content: center; } body.page-sobre .section-description{ margin: 18px 0 0; color: var( --text-muted ); font-size: 1.03rem; line-height: 1.8; } body.page-sobre .values-grid{ display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 22px; } body.page-sobre .value-card{ padding: 31px; background: white; border: 1px solid var( --border ); border-radius: var( --radius-medium ); box-shadow: var( --shadow-small ); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } body.page-sobre .value-card:hover{ border-color: rgba( 214, 168, 75, 0.55 ); box-shadow: var( --shadow-medium ); transform: translateY( -6px ); } body.page-sobre .value-card__icon{ display: grid; place-items: center; width: 54px; height: 54px; color: white; background: var( --primary ); border-radius: 15px; box-shadow: 0 12px 24px rgba( 23, 63, 95, 0.17 ); } body.page-sobre .value-card__icon svg{ width: 26px; height: 26px; } body.page-sobre .value-card h3{ margin: 23px 0 10px; color: var( --primary-dark ); font-size: 1.18rem; } body.page-sobre .value-card p{ margin: 0; color: var( --text-muted ); font-size: 0.93rem; } body.page-sobre .experience-section{ padding: 95px 0; background: white; } body.page-sobre .experience-layout{ display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 320px, 0.75fr ); align-items: center; gap: clamp( 50px, 8vw, 100px ); } body.page-sobre .experience-content p{ margin: 20px 0 0; color: var( --text-muted ); font-size: 1rem; line-height: 1.85; } body.page-sobre .experience-card{ padding: 35px; color: white; background: linear-gradient( 145deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-sobre .experience-card h3{ margin: 0; font-size: 1.55rem; } body.page-sobre .experience-card p{ margin: 12px 0 0; color: rgba( 255, 255, 255, 0.7 ); } body.page-sobre .experience-list{ display: grid; gap: 14px; margin: 27px 0 0; padding: 0; list-style: none; } body.page-sobre .experience-list li{ display: flex; align-items: flex-start; gap: 12px; padding: 15px; background: rgba( 255, 255, 255, 0.07 ); border: 1px solid rgba( 255, 255, 255, 0.1 ); border-radius: 12px; font-size: 0.9rem; } body.page-sobre .experience-list svg{ flex: 0 0 19px; width: 19px; height: 19px; margin-top: 2px; color: var( --secondary ); } body.page-sobre .cta-section{ padding: 0 0 100px; background: white; } body.page-sobre .cta{ position: relative; overflow: hidden; padding: 58px; color: white; background: linear-gradient( 120deg, var( --primary-dark ), var( --primary ) ); border-radius: var( --radius-large ); box-shadow: var( --shadow-medium ); } body.page-sobre .cta::after{ content: ""; position: absolute; top: -130px; right: -130px; width: 390px; height: 390px; border: 65px solid rgba( 214, 168, 75, 0.1 ); border-radius: 50%; } body.page-sobre .cta__inner{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; } body.page-sobre .cta__content{ max-width: 700px; } body.page-sobre .cta__label{ color: var( --secondary ); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; } body.page-sobre .cta h2{ margin: 10px 0 0; font-size: clamp( 1.9rem, 4vw, 3rem ); line-height: 1.15; letter-spacing: -0.035em; } body.page-sobre .cta p{ margin: 15px 0 0; color: rgba( 255, 255, 255, 0.74 ); } body.page-sobre .button{ display: inline-flex; align-items: center; justify-content: center; min-height: 51px; padding: 0 25px; color: var( --primary-dark ); background: var( --secondary ); border: 1px solid var( --secondary ); border-radius: var( --radius-small ); font-size: 0.92rem; font-weight: 750; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } body.page-sobre .button:hover{ color: white; background: var( --secondary-dark ); transform: translateY( -2px ); } body.page-sobre .footer{ color: rgba( 255, 255, 255, 0.72 ); background: #091f30; } body.page-sobre .footer__main{ display: grid; grid-template-columns: 1.35fr repeat( 3, 0.75fr ); gap: 55px; padding-block: 68px; } body.page-sobre .footer__brand{ max-width: 360px; } body.page-sobre .footer .brand__name{ color: white; } body.page-sobre .footer .brand__tagline{ color: rgba( 255, 255, 255, 0.55 ); } body.page-sobre .footer__description{ margin: 22px 0 0; color: rgba( 255, 255, 255, 0.62 ); font-size: 0.91rem; line-height: 1.75; } body.page-sobre .footer__column h3{ margin: 0 0 20px; color: white; font-size: 0.95rem; } body.page-sobre .footer__links{ display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; } body.page-sobre .footer__links a{ transition: color 0.2s ease, padding-left 0.2s ease; } body.page-sobre .footer__links a:hover{ padding-left: 4px; color: var( --secondary ); } body.page-sobre .footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 74px; border-top: 1px solid rgba( 255, 255, 255, 0.08 ); font-size: 0.8rem; } body.page-sobre .footer__legal{ display: flex; flex-wrap: wrap; gap: 20px; } body.page-sobre .footer__legal a:hover{ color: white; } body.page-sobre .whatsapp{ position: fixed; z-index: 90; right: 22px; bottom: 22px; display: grid; place-items: center; width: 58px; height: 58px; color: white; background: #25d366; border-radius: 50%; box-shadow: 0 15px 35px rgba( 37, 211, 102, 0.32 ); transition: transform 0.2s ease; } body.page-sobre .whatsapp:hover{ transform: translateY( -3px ) scale( 1.03 ); } body.page-sobre .whatsapp svg{ width: 29px; height: 29px; } @media ( max-width: 1050px ){ body.page-sobre .navigation__list{ position: fixed; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); padding: 25px; background: white; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.15 ); transform: translateX( 105% ); transition: transform 0.25s ease; } body.page-sobre .navigation__list.is-open{ transform: translateX( 0 ); } body.page-sobre .navigation__link{ justify-content: flex-start; min-height: 52px; padding-inline: 17px; } body.page-sobre .navigation__button{ display: none; } body.page-sobre .menu-toggle{ display: grid; } body.page-sobre .values-grid{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } body.page-sobre .footer__main{ grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 800px ){ body.page-sobre .topbar{ display: none; } body.page-sobre .header__inner{ min-height: 72px; } body.page-sobre .navigation__list{ top: 72px; } body.page-sobre .page-header{ padding: 68px 0; } body.page-sobre .about-section, body.page-sobre .values-section, body.page-sobre .experience-section{ padding: 72px 0; } body.page-sobre .about-layout, body.page-sobre .experience-layout{ grid-template-columns: 1fr; } body.page-sobre .about-visual{ min-height: 470px; } body.page-sobre .footer__main{ grid-template-columns: 1fr; gap: 38px; } body.page-sobre .footer__bottom{ align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; } body.page-sobre .cta__inner{ display: block; } body.page-sobre .cta__actions{ margin-top: 28px; } } @media ( max-width: 600px ){ body.page-sobre .container{ width: min( calc( 100% - 28px ), var( --container ) ); } body.page-sobre .brand__tagline{ display: none; } body.page-sobre .values-grid{ grid-template-columns: 1fr; } body.page-sobre .about-visual{ min-height: 420px; } body.page-sobre .about-visual__main{ inset: 0 35px 65px 0; } body.page-sobre .about-visual__badge{ width: 185px; padding: 22px; } body.page-sobre .cta{ padding: 38px 28px; } body.page-sobre .button{ width: 100%; } } /* ========================================================= Correção comum do menu móvel ========================================================= */ @media ( max-width: 1050px ) { body:not( .page-conteudos ) .header { -webkit-backdrop-filter: none; backdrop-filter: none; } body:not( .page-conteudos ) .navigation__list { position: fixed; z-index: 200; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); height: calc( 100dvh - 82px ); margin: 0; padding: 25px; overflow-y: auto; background: #ffffff; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.18 ); transform: translateX( 105% ); transition: transform 0.25s ease; } body:not( .page-conteudos ) .navigation__list.is-open { transform: translateX( 0 ); } body:not( .page-conteudos ) .navigation__list > li, body:not( .page-conteudos ) .navigation__link { width: 100%; } } @media ( max-width: 800px ) { body:not( .page-conteudos ) .navigation__list { top: 72px; height: calc( 100dvh - 72px ); } } /* Correção do cabeçalho móvel da página Condomínios */ @media ( max-width: 1050px ) { body.page-condominios .navigation__button { display: none; } body.page-condominios .menu-toggle { display: grid; } } /* ========================================================= Cabeçalho e menu móvel — regra global Aplica-se a todas as páginas, inclusive Condomínios. ========================================================= */ @media ( max-width: 1050px ) { .header { -webkit-backdrop-filter: none; backdrop-filter: none; } .navigation__button { display: none !important; } .menu-toggle { display: grid !important; } .navigation__list { position: fixed; z-index: 200; top: 82px; right: 0; bottom: 0; display: block; width: min( 360px, 88vw ); height: calc( 100dvh - 82px ); margin: 0; padding: 25px; overflow-y: auto; background: #ffffff; border-left: 1px solid var( --border ); box-shadow: -20px 25px 60px rgba( 13, 42, 64, 0.18 ); transform: translateX( 105% ); transition: transform 0.25s ease; } .navigation__list.is-open { transform: translateX( 0 ); } .navigation__list > li, .navigation__link { width: 100%; } } @media ( max-width: 800px ) { .navigation__list { top: 72px; height: calc( 100dvh - 72px ); } }