/* Adicione estes links no do seu HTML ANTES deste CSS:
*/
:root {
/* Fontes globais - CONFIGURAÇÕES POPPINS */
--font-family-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-family-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Suas variáveis existentes */
--spacing-lg: 1.5rem;
--spacing-md: 1rem;
--spacing-sm: 0.75rem;
--spacing-xl: 2rem;
--spacing-xs: 0.5rem;
--color-scrim: color-mix(in oklab, #ffffff 70%, transparent);
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 4rem;
--color-accent: #c99a05;
--color-border: #262626;
--font-size-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
--font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 0.9375rem);
--font-size-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.5rem);
--font-size-xs: clamp(0.6875rem, 0.6rem + 0.2vw, 0.8125rem);
--color-neutral: #262626;
--color-outline: #1a1a1a;
--color-overlay: color-mix(in oklab, #ffffff 40%, transparent);
--color-primary: #14202a;
--color-surface: #0b0b0b;
--divider-value: 1px solid var(--color-outline);
--font-size-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 1.95rem);
--font-size-3xl: clamp(2.25rem, 1.9rem + 1.6vw, 2.6rem);
--font-size-4xl: clamp(3rem, 2.6rem + 2.2vw, 4rem);
--font-size-base: 1rem;
--shadow-level-1: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-level-2: 0 6px 20px rgba(0, 0, 0, 0.12);
--shadow-level-3: 0 18px 40px rgba(0, 0, 0, 0.18);
--color-backplate: color-mix(in oklab, #ffffff 60%, transparent);
--color-on-accent: #000000;
--color-secondary: #b08500;
--border-radius-lg: 16px;
--border-radius-md: 10px;
--border-radius-sm: 6px;
--border-radius-xl: 24px;
--color-on-primary: #ffffff;
--color-on-surface: #ffffff;
/* Ajustes de fonte para Poppins */
--font-weight-body: 400;
--line-height-body: 1.6;
--content-max-width: 76rem;
--border-radius-card: var(--border-radius-lg);
--border-radius-full: 9999px;
--border-radius-none: 0px;
--color-on-secondary: #000000;
--font-style-heading: normal;
--font-weight-medium: 500;
/* Ajustado para Poppins */
--font-weight-heading: 600;
/* Ajustado para Poppins */
--letter-spacing-body: 0.01em;
/* Ajustado para Poppins */
--line-height-heading: 1.25;
--letter-spacing-heading: 0.02em;
/* Adicionado para headings */
--dl-layout-size-large: 144px;
--dl-layout-size-small: 48px;
--dl-layout-space-unit: 16px;
--border-radius-control: var(--border-radius-sm);
--dl-layout-size-medium: 96px;
--dl-layout-size-xlarge: 192px;
--dl-layout-size-xsmall: 16px;
--color-surface-elevated: color-mix(in oklab, var(--color-surface) 92%, var(--color-secondary));
--dl-color-theme-accent1: #FFFFFF;
--dl-color-theme-accent2: #F5D1B0;
--dl-layout-radius-round: 50%;
--dl-layout-size-xxlarge: 288px;
--text-transform-heading: none;
--dl-color-theme-primary1: #BF4408;
--dl-color-theme-primary2: #E65103;
--dl-layout-size-maxwidth: 1400px;
--dl-layout-radius-radius2: 2px;
--dl-layout-radius-radius4: 4px;
--dl-layout-radius-radius8: 8px;
--dl-layout-space-halfunit: 8px;
--dl-layout-space-sixunits: 96px;
--dl-layout-space-twounits: 32px;
--dl-color-theme-secondary1: #FFFFFF;
--dl-color-theme-secondary2: #FBF1EB;
--dl-layout-space-fiveunits: 80px;
--dl-layout-space-fourunits: 64px;
--color-on-surface-secondary: #e8e8e8;
--dl-layout-space-threeunits: 48px;
--dl-color-theme-neutral-dark: #191818;
--dl-layout-radius-cardradius: 8px;
--dl-color-theme-neutral-light: #FBFAF9;
--dl-layout-radius-imageradius: 8px;
--dl-layout-radius-inputradius: 24px;
--dl-layout-radius-buttonradius: 24px;
--dl-layout-space-oneandhalfunits: 24px;
}
/* Ajusta o offset das âncoras para header fixo */
html {
scroll-behavior: smooth;
scroll-padding-top: var(--anchor-offset, 110px);
}
/* ajuste fino: normal vs header encolhido no scroll (se tiver) */
:root {
--anchor-offset: 110px;
/* troca o valor até ficar perfeito */
}
/* ============================================
APLICAÇÃO GLOBAL DA FONTE POPPINS
============================================ */
html, body {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
line-height: var(--line-height-body);
letter-spacing: var(--letter-spacing-body);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Títulos e headings */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-subtitle,
.stats-number,
.diferenciais-title,
.diferencial-title,
.feature-content h3,
.testimonials-title,
.step-card h3 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
}
/* Animações e efeitos globais */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Diferenciais Section */
.diferenciais-section {
width: 100%;
padding: var(--spacing-4xl) var(--spacing-xl);
background: var(--color-surface);
position: relative;
}
.diferenciais-container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.diferenciais-header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.diferenciais-title {
margin-bottom: var(--spacing-md);
}
.diferenciais-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-3xl);
}
.diferencial-card {
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.diferencial-card:hover {
transform: translateY(-5px);
border-color: var(--color-secondary);
box-shadow: var(--shadow-level-2);
}
.diferencial-icon {
color: var(--color-secondary);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
border-radius: var(--border-radius-full);
background: color-mix(in oklab, var(--color-secondary) 15%, transparent);
}
.diferencial-title {
margin-bottom: var(--spacing-sm);
color: var(--color-on-surface);
}
.diferencial-text {
color: var(--color-on-surface-secondary);
line-height: 1.6;
}
.diferenciais-cta {
margin-top: var(--spacing-3xl);
display: flex;
justify-content: center;
}
.diferenciais-cta-card {
background: linear-gradient(135deg, var(--color-primary), var(--color-neutral));
border: 2px solid var(--color-secondary);
border-radius: var(--border-radius-xl);
padding: var(--spacing-2xl);
text-align: center;
max-width: 600px;
width: 100%;
box-shadow: var(--shadow-level-3);
}
.diferenciais-cta-card .section-subtitle {
color: var(--color-on-surface);
margin-bottom: var(--spacing-sm);
}
.diferenciais-cta-card .section-content {
color: var(--color-on-surface-secondary);
margin-bottom: var(--spacing-xl);
}
.diferenciais-cta-btn {
display: inline-block;
background: var(--color-accent);
color: var(--color-on-accent);
padding: var(--spacing-md) var(--spacing-2xl);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
text-decoration: none;
border-radius: var(--border-radius-full);
transition: all 0.3s ease;
animation: pulse 2s infinite;
margin-bottom: var(--spacing-md);
}
.diferenciais-cta-btn:hover {
background: var(--color-secondary);
transform: scale(1.05);
animation-play-state: paused;
}
.diferenciais-cta-btn span {
letter-spacing: 0.05em;
text-transform: uppercase;
}
.diferenciais-cta-note {
color: var(--color-on-surface-secondary);
font-size: var(--font-size-sm);
opacity: 0.8;
}
.diferenciais-divider {
height: 1px;
background: var(--divider-value);
margin-top: var(--spacing-4xl);
opacity: 0.3;
}
/* Container principal */
.home-container1 {
width: 100%;
height: auto;
display: flex;
position: relative;
flex-direction: column;
background-color: var(--color-surface);
}
.home-container2,
.home-container3,
.home-container4,
.home-container5 {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
/* Gallery interactions */
.gallery-item {
overflow: hidden;
position: relative;
break-inside: avoid;
border-radius: var(--border-radius-md);
margin-bottom: var(--spacing-md);
}
.gallery-item img {
width: 100%;
display: block;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
/* Responsividade */
@media (max-width: 991px) {
.diferenciais-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.diferenciais-section {
padding: var(--spacing-3xl) var(--spacing-md);
}
.diferenciais-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.diferenciais-cta-card {
padding: var(--spacing-xl) var(--spacing-lg);
}
.diferenciais-cta-btn {
padding: var(--spacing-sm) var(--spacing-xl);
font-size: var(--font-size-base);
}
}
@media (max-width: 479px) {
.diferenciais-section {
padding: var(--spacing-2xl) var(--spacing-sm);
}
.diferenciais-cta-card {
padding: var(--spacing-lg) var(--spacing-md);
}
.diferenciais-cta-btn {
width: 100%;
padding: var(--spacing-md);
}
}
/* Resto dos estilos existentes... */
.button {
color: var(--dl-color-theme-neutral-dark);
display: inline-block;
padding: 0.5rem 1rem;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-theme-neutral-light);
}
.input {
color: var(--dl-color-theme-neutral-dark);
cursor: auto;
padding: 0.5rem 1rem;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-theme-neutral-light);
}
.textarea {
color: var(--dl-color-theme-neutral-dark);
cursor: auto;
padding: 0.5rem;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-theme-neutral-light);
}
.list {
width: 100%;
margin: 1em 0px 1em 0px;
display: block;
padding: 0px 0px 0px 1.5rem;
list-style-type: none;
list-style-position: outside;
}
.list-item {
display: list-item;
}
.teleport-show {
display: flex !important;
transform: none !important;
}
.thq-input {
color: var(--dl-color-theme-neutral-dark);
cursor: auto;
outline: none;
padding: 0.5rem 1rem;
align-self: stretch;
text-align: center;
border-color: var(--dl-color-theme-neutral-dark);
border-width: 1px;
border-radius: var(--dl-layout-radius-inputradius);
background-color: var(--dl-color-theme-neutral-light);
}
.thq-input:focus {
outline: 1px solid var(--dl-color-theme-primary1);
}
.thq-button-filled {
gap: var(--dl-layout-space-halfunit);
fill: var(--dl-color-theme-secondary1);
color: var(--dl-color-theme-secondary1);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
font-weight: bold;
padding-top: var(--dl-layout-space-halfunit);
white-space: nowrap;
border-color: var(--dl-color-theme-primary1);
border-width: 1px;
padding-left: var(--dl-layout-space-oneandhalfunits);
border-radius: var(--dl-layout-radius-buttonradius);
padding-right: var(--dl-layout-space-oneandhalfunits);
padding-bottom: var(--dl-layout-space-halfunit);
justify-content: center;
background-color: var(--dl-color-theme-primary1);
}
.thq-button-filled:hover {
fill: var(--dl-color-theme-secondary2);
color: var(--dl-color-theme-secondary2);
border-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2);
}
.thq-button-outline {
gap: var(--dl-layout-space-halfunit);
fill: var(--dl-color-theme-primary1);
color: var(--dl-color-theme-primary1);
border: 1px solid;
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
font-weight: bold;
padding-top: var(--dl-layout-space-halfunit);
white-space: nowrap;
border-color: var(--dl-color-theme-primary1);
padding-left: var(--dl-layout-space-oneandhalfunits);
border-radius: var(--dl-layout-radius-buttonradius);
padding-right: var(--dl-layout-space-oneandhalfunits);
padding-bottom: var(--dl-layout-space-halfunit);
justify-content: center;
}
.thq-button-outline:hover {
fill: var(--dl-color-theme-secondary2);
color: var(--dl-color-theme-secondary2);
border-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2);
}
.thq-button-flat {
gap: var(--dl-layout-space-halfunit);
fill: var(--dl-color-theme-primary1);
color: var(--dl-color-theme-primary1);
cursor: pointer;
display: flex;
transition: 0.3s;
align-items: center;
font-weight: bold;
padding-top: var(--dl-layout-space-halfunit);
white-space: nowrap;
border-color: transparent;
border-width: 1px;
padding-left: var(--dl-layout-space-oneandhalfunits);
border-radius: var(--dl-layout-radius-buttonradius);
padding-right: var(--dl-layout-space-oneandhalfunits);
padding-bottom: var(--dl-layout-space-halfunit);
justify-content: center;
}
.thq-button-flat:hover {
fill: var(--dl-color-theme-secondary1);
color: var(--dl-color-theme-secondary1);
border-color: var(--dl-color-theme-primary2);
background-color: var(--dl-color-theme-primary2);
}
.thq-heading-1 {
font-size: 48px;
font-family: STIX Two Text;
font-weight: 700;
line-height: 1.5;
}
.thq-heading-2 {
font-size: 35px;
font-family: STIX Two Text;
font-weight: 600;
line-height: 1.5;
}
.thq-heading-3 {
font-size: 26px;
font-family: STIX Two Text;
font-weight: 600;
line-height: 1.5;
}
.thq-body-large {
font-size: 18px;
font-family: Noto Sans;
line-height: 1.5;
}
.thq-body-small {
font-size: 16px;
font-family: Noto Sans;
line-height: 1.5;
}
.thq-team-image-round {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
}
.thq-section-padding {
width: 100%;
display: flex;
padding: var(--dl-layout-space-fiveunits);
position: relative;
align-items: center;
flex-direction: column;
}
.thq-section-max-width {
width: 100%;
max-width: var(--dl-layout-size-maxwidth);
}
.thq-img-ratio-1-1 {
width: 100%;
object-fit: cover;
aspect-ratio: 1/1;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-ratio-16-9 {
width: 100%;
object-fit: cover;
aspect-ratio: 16/9;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-ratio-4-3 {
width: 100%;
object-fit: cover;
aspect-ratio: 4/3;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-ratio-4-6 {
width: 100%;
object-fit: cover;
aspect-ratio: 4/6;
border-radius: var(--dl-layout-radius-imageradius);
}
.thq-img-round {
width: 100%;
border-radius: var(--dl-layout-radius-round);
}
.thq-flex-column {
gap: var(--dl-layout-space-twounits);
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.thq-flex-row {
gap: var(--dl-layout-space-twounits);
display: flex;
overflow: hidden;
position: relative;
align-items: center;
}
.thq-grid-6 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.thq-grid-5 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.thq-card {
gap: var(--dl-layout-space-oneandhalfunits);
display: flex;
padding: var(--dl-layout-space-twounits);
align-items: stretch;
border-radius: var(--dl-layout-radius-cardradius);
flex-direction: column;
}
.thq-box-shadow {
box-shadow: 0px 0px 5px -2px var(--dl-color-theme-neutral-dark);
}
.thq-grid-3 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-grid-4 {
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.thq-grid-2 {
width: 100%;
display: grid;
grid-gap: var(--dl-layout-space-twounits);
grid-template-columns: 1fr 1fr;
}
.thq-checkbox {
width: var(--dl-layout-size-xsmall);
height: var(--dl-layout-size-xsmall);
}
.thq-select {
cursor: pointer;
appearance: none;
padding-top: var(--dl-layout-space-halfunit);
padding-left: var(--dl-layout-space-unit);
border-radius: var(--dl-layout-radius-inputradius);
padding-right: var(--dl-layout-space-twounits);
padding-bottom: var(--dl-layout-space-halfunit);
background-color: var(--dl-color-theme-neutral-light);
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2220%22 height%3D%2220%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M4.293 7.293a1 1 0 011.414 0L10 11.586l4.293-4.293a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 8px center;
}
.thq-divider-horizontal {
width: 100%;
height: 1px;
background-color: var(--dl-color-theme-neutral-dark);
}
.thq-icon-small {
width: 24px;
height: 24px;
}
.thq-button-icon {
fill: var(--dl-color-theme-secondary1);
padding: 3px;
transition: 0.3s;
border-radius: var(--dl-layout-radius-round);
}
.thq-button-icon:hover {
fill: var(--dl-color-theme-secondary2);
}
.thq-icon-medium {
width: var(--dl-layout-size-small);
height: var(--dl-layout-size-small);
}
.thq-icon-x-small {
width: var(--dl-layout-size-xsmall);
height: var(--dl-layout-size-xsmall);
}
.thq-link {
cursor: pointer;
display: inline-block;
overflow: hidden;
background: linear-gradient(to right, var(--dl-color-theme-primary1) 50%, var(--dl-color-theme-neutral-dark) 50%);
transition: background-position 300ms ease;
font-weight: 600;
background-clip: text;
background-size: 200% 100%;
background-position: 100%;
-webkit-text-fill-color: transparent;
}
.thq-link:hover {
background-position: 0 100%;
}
.thq-grid-auto-300 {
display: grid;
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.thq-animated-group-vertical-reverse {
gap: var(--dl-layout-space-unit);
width: 100%;
display: flex;
animation: scroll-y 20s linear infinite;
align-items: flex-start;
flex-direction: column;
justify-content: space-around;
animation-direction: reverse;
}
.thq-animated-group-horizontal-reverse {
gap: var(--dl-layout-space-unit);
display: flex;
animation: scroll-x 20s linear infinite;
min-width: 100%;
align-items: center;
flex-shrink: 0;
justify-content: space-around;
animation-direction: reverse;
}
.thq-animated-group-vertical {
gap: var(--dl-layout-space-unit);
width: 100%;
display: flex;
animation: scroll-y 20s linear infinite;
align-items: flex-start;
flex-direction: column;
justify-content: space-around;
}
.thq-animated-group-horizontal {
gap: var(--dl-layout-space-unit);
display: flex;
animation: scroll-x 20s linear infinite;
min-width: 100%;
align-items: center;
flex-shrink: 0;
justify-content: space-around;
}
.thq-animated-group-container-vertical {
gap: var(--dl-layout-space-unit);
display: flex;
overflow: hidden;
flex-direction: column;
}
.thq-animated-group-container-horizontal {
gap: var(--dl-layout-space-unit);
display: flex;
overflow: hidden;
}
.thq-mask-image-vertical {
mask-image: linear-gradient(to bottom, transparent, black 1%, black 99%, transparent);
}
.thq-mask-image-horizontal {
mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent);
}
.thq-img-scale {
transition: 0.3s;
}
.thq-img-scale:hover {
scale: 1.05;
}
.thq-animated-card-bg-1 {
width: 100%;
height: 100%;
transition: transform 0.3s;
border-radius: var(--dl-layout-radius-cardradius);
background-color: var(--dl-color-theme-accent1);
}
.thq-animated-card-bg-2 {
transition: transform 0.3s;
border-radius: var(--dl-layout-radius-cardradius);
background-color: var(--dl-color-theme-accent2);
}
.thq-button-animated {
outline: none;
z-index: 1;
overflow: hidden;
position: relative;
border-width: 2px;
}
.thq-input::placeholder {
text-align: center;
vertical-align: middle;
}
.thq-animated-group-container-vertical:hover div {
animation-play-state: paused;
}
.thq-animated-group-container-horizontal:hover div {
animation-play-state: paused;
}
.thq-animated-card-bg-2:has([data-animated="true"]:hover) {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3deg) skew(0deg, 0deg);
}
.thq-animated-card-bg-1:has([data-animated="true"]:hover) {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-6deg) skew(0deg, 0deg);
}
.thq-button-animated:before {
top: 0;
left: -20%;
color: var(--dl-color-theme-neutral-light);
width: 200%;
height: 101%;
content: "";
z-index: 1;
position: absolute;
transform: scaleX(0);
transition: transform 0.5s;
border-radius: var(--dl-layout-radius-buttonradius);
background-color: var(--dl-color-theme-neutral-dark);
transform-origin: 0 0;
transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
}
.thq-button-animated:hover::before {
color: var(--dl-color-theme-neutral-light);
z-index: -1;
transform: scaleX(1);
}
.btn {
gap: var(--spacing-xs);
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-base);
box-shadow: var(--shadow-level-1);
text-align: center;
transition: all 0.2s ease-in-out;
align-items: center;
font-family: var(--font-family-body);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-body);
user-select: none;
white-space: nowrap;
border-radius: var(--border-radius-control);
justify-content: center;
text-decoration: none;
}
.btn-primary {
color: var(--color-on-primary);
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.btn-secondary {
color: var(--color-on-secondary);
border-color: var(--color-secondary);
background-color: var(--color-secondary);
}
.btn-accent {
color: var(--color-on-accent);
border-color: var(--color-accent);
background-color: var(--color-accent);
}
.btn-outline {
color: var(--color-primary);
border: 1px solid var(--color-primary);
background-color: var(--color-surface);
}
.btn-link {
color: var(--color-primary);
box-shadow: none;
border-color: transparent;
text-decoration: underline;
background-color: transparent;
}
.btn-sm {
padding: var(--spacing-sm) var(--spacing-md);
}
.btn-lg {
padding: var(--spacing-lg) var(--spacing-xl);
}
.btn-xl {
padding: var(--spacing-xl) var(--spacing-2xl);
}
.section-title {
font-size: var(--font-size-3xl);
font-style: var(--font-style-heading);
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
text-transform: var(--text-transform-heading);
}
.section-subtitle {
opacity: 0.85;
font-size: var(--font-size-lg);
font-style: var(--font-style-subheading);
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
}
.section-content {
font-size: var(--font-size-base);
font-family: var(--font-family-body);
font-weight: var(--font-weight-body);
line-height: var(--line-height-body);
letter-spacing: var(--letter-spacing-body);
}
.btn:focus-visible {
outline: 2px solid var(--color-outline);
outline-offset: 2px;
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.btn-primary:hover:not(:disabled) {
border-color: color-mix(in oklab, var(--color-primary) 90%, var(--color-surface));
background-color: color-mix(in oklab, var(--color-primary) 90%, var(--color-surface));
}
.btn-secondary:hover:not(:disabled) {
border-color: color-mix(in oklab, var(--color-secondary) 90%, var(--color-surface));
background-color: color-mix(in oklab, var(--color-secondary) 90%, var(--color-surface));
}
.btn-accent:hover:not(:disabled) {
border-color: color-mix(in oklab, var(--color-accent) 90%, var(--color-surface));
background-color: color-mix(in oklab, var(--color-accent) 90%, var(--color-surface));
}
.btn-outline:hover:not(:disabled) {
color: var(--color-on-primary);
border-color: var(--color-primary);
background-color: var(--color-primary);
}
.btn-link:hover:not(:disabled) {
color: color-mix(in oklab, var(--color-primary) 80%, black);
text-decoration: underline;
}
.stats-section {
padding: var(--spacing-4xl) var(--spacing-xl);
background: var(--color-surface-elevated);
border-top: 2px solid var(--color-secondary);
}
.stats-grid-container {
gap: var(--spacing-xl);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
max-width: var(--content-max-width);
justify-content: center;
}
.stats-card {
flex: 1 1 300px;
border: 1px solid var(--color-border);
padding: var(--spacing-2xl);
background: var(--color-surface);
text-align: center;
transition: transform 0.3s ease;
border-radius: var(--border-radius-lg);
}
.stats-icon-box {
color: var(--color-secondary);
display: flex;
margin-bottom: var(--spacing-md);
justify-content: center;
}
.stats-number {
color: var(--color-on-surface);
font-size: var(--font-size-3xl);
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
margin-bottom: var(--spacing-xs);
}
.stats-label {
color: var(--color-on-surface-secondary);
font-size: var(--font-size-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.features-section {
padding: var(--spacing-4xl) var(--spacing-xl);
background: var(--color-surface);
}
.features-header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.features-grid {
gap: var(--spacing-xl);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
max-width: var(--content-max-width);
}
.feature-item {
flex: 1 1 calc(33.333% - var(--spacing-xl));
display: flex;
overflow: hidden;
background: var(--color-surface-elevated);
border-radius: var(--border-radius-lg);
flex-direction: column;
}
.feature-visual {
height: 240px;
overflow: hidden;
}
.feature-content {
display: flex;
padding: var(--spacing-xl);
flex-grow: 1;
flex-direction: column;
}
.feature-cta {
width: 100%;
margin-top: auto;
}
.testimonials-section {
padding: var(--spacing-4xl) var(--spacing-xl);
background: var(--color-surface-elevated);
}
.testimonials-container {
margin: 0 auto;
max-width: var(--content-max-width);
}
.testimonials-title {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.testimonials-carousel {
gap: var(--spacing-xl);
display: flex;
overflow-x: auto;
padding-bottom: var(--spacing-2xl);
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.testimonial-card {
flex: 0 0 400px;
border: 1px solid var(--color-border);
overflow: hidden;
background: var(--color-surface);
border-radius: var(--border-radius-lg);
scroll-snap-align: center;
}
.testimonial-image {
height: 200px;
}
.testimonial-content {
padding: var(--spacing-xl);
}
.testimonial-stars {
gap: 2px;
display: flex;
margin-bottom: var(--spacing-sm);
}
.testimonial-author {
color: var(--color-secondary);
display: block;
margin-top: var(--spacing-md);
font-weight: var(--font-weight-medium);
}
.gallery-section {
padding: var(--spacing-4xl) var(--spacing-xl);
background: var(--color-surface);
}
.gallery-intro {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.gallery-masonry {
margin: 0 auto;
columns: 3;
max-width: var(--content-max-width);
column-gap: var(--spacing-md);
}
.gallery-overlay {
inset: 0;
display: flex;
opacity: 0;
position: absolute;
background: var(--color-scrim);
transition: opacity 0.3s ease;
align-items: center;
justify-content: center;
}
.process-section {
padding: var(--spacing-4xl) var(--spacing-xl);
background: var(--color-surface-elevated);
}
.process-container {
margin: 0 auto;
max-width: var(--content-max-width);
text-align: center;
}
.process-steps {
gap: var(--spacing-xl);
display: flex;
margin-top: var(--spacing-3xl);
}
.step-card {
flex: 1;
border: 1px solid var(--color-border);
padding: var(--spacing-2xl);
position: relative;
background: var(--color-surface);
border-radius: var(--border-radius-lg);
}
.step-number {
top: -20px;
left: 50%;
color: var(--color-on-secondary);
width: 50px;
height: 50px;
display: flex;
position: absolute;
font-size: var(--font-size-xl);
transform: translateX(-50%);
background: var(--color-secondary);
align-items: center;
font-weight: var(--font-weight-heading);
border-radius: var(--border-radius-full);
justify-content: center;
}
.cta-spotlight-section {
display: flex;
padding: var(--spacing-4xl) var(--spacing-xl);
position: relative;
background: url("https://images.pexels.com/photos/12169065/pexels-photo-12169065.jpeg?auto=compress&cs=tinysrgb&h=1000") center/cover no-repeat fixed;
min-height: 60vh;
align-items: center;
justify-content: center;
}
.cta-spotlight-overlay {
inset: 0;
z-index: 1;
position: absolute;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
}
.cta-spotlight-content {
width: 100%;
z-index: 2;
position: relative;
max-width: 800px;
}
.cta-main-card {
border: 2px solid var(--color-secondary);
padding: var(--spacing-3xl);
background: var(--color-surface);
box-shadow: 0 0 50px rgba(176, 133, 0, 0.2);
text-align: center;
border-radius: var(--border-radius-xl);
}
.cta-badge {
color: var(--color-secondary);
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-xs);
background: color-mix(in oklab, var(--color-secondary) 20%, transparent);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-full);
margin-bottom: var(--spacing-lg);
}
.cta-action-buttons {
gap: var(--spacing-md);
display: flex;
margin-top: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
justify-content: center;
}
.cta-social-proof {
gap: var(--spacing-md);
display: flex;
align-items: center;
flex-direction: column;
}
.social-proof-avatars {
display: flex;
margin-left: 10px;
}
.stats-card:hover {
transform: translateY(-10px);
border-color: var(--color-secondary);
}
.stats-icon-box svg {
width: 48px;
height: 48px;
}
.feature-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.feature-item:hover .feature-visual img {
transform: scale(1.1);
}
.feature-content h3 {
margin-bottom: var(--spacing-sm);
}
.feature-content p {
color: var(--color-on-surface-secondary);
margin-bottom: var(--spacing-lg);
}
.testimonials-carousel::-webkit-scrollbar {
height: 4px;
}
.testimonials-carousel::-webkit-scrollbar-thumb {
background: var(--color-secondary);
border-radius: 10px;
}
.testimonial-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-overlay span {
color: var(--color-surface);
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
text-transform: uppercase;
}
.step-card h3 {
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.step-card p {
color: var(--color-on-surface-secondary);
margin-bottom: var(--spacing-xl);
}
.social-proof-avatars img {
width: 40px;
border: 2px solid var(--color-surface);
height: 40px;
margin-left: -10px;
border-radius: var(--border-radius-full);
}
.BodyFont {
font-size: 1rem;
font-family: Roboto;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.02em;
}
.Headings {
font-size: 2em;
font-family: Playfair Display;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
}
.Content {
font-size: 16px;
font-family: Inter;
font-weight: 400;
line-height: 1.15;
text-transform: none;
text-decoration: none;
}
/* ============================================
FORÇA POPPINS EM TODAS AS CLASSES DO TELEPORT
============================================ */
.thq-heading-1,
.thq-heading-2,
.thq-heading-3,
.thq-body-large,
.thq-body-small,
.BodyFont,
.Headings,
.Content,
.thq-button-filled,
.thq-button-outline,
.thq-button-flat,
.thq-link,
.thq-input {
font-family: var(--font-family-body) !important;
}
/* Headings do Teleport usam a família heading */
.thq-heading-1,
.thq-heading-2,
.thq-heading-3,
.Headings {
font-family: var(--font-family-heading) !important;
font-weight: var(--font-weight-heading) !important;
}
/* Ajustes específicos para tamanhos */
.thq-heading-1 {
font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: var(--letter-spacing-heading) !important;
}
.thq-heading-2 {
font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem) !important;
letter-spacing: var(--letter-spacing-heading) !important;
}
.thq-heading-3 {
font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8rem) !important;
letter-spacing: var(--letter-spacing-heading) !important;
}
/* Corrige os botões do Teleport */
.thq-button-filled,
.thq-button-outline,
.thq-button-flat {
font-weight: 500 !important;
letter-spacing: 0.02em !important;
}
/* Ajuste para texto do BodyFont e Content */
.BodyFont,
.Content,
.thq-body-large,
.thq-body-small {
font-family: var(--font-family-body) !important;
font-weight: var(--font-weight-body) !important;
letter-spacing: var(--letter-spacing-body) !important;
line-height: var(--line-height-body) !important;
}
@media(max-width: 991px) {
.thq-grid-4 {
grid-template-columns: 1fr 1fr 1fr;
}
.feature-item {
flex: 1 1 calc(50% - var(--spacing-xl));
}
.gallery-masonry {
columns: 2;
}
}
@media(max-width: 767px) {
.thq-section-padding {
padding: var(--dl-layout-space-threeunits);
}
.thq-flex-column {
gap: var(--dl-layout-space-oneandhalfunits);
}
.thq-flex-row {
gap: var(--dl-layout-space-oneandhalfunits);
}
.thq-grid-6 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-grid-5 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr 1fr 1fr;
}
.thq-card {
padding: var(--dl-layout-space-oneandhalfunits);
}
.thq-grid-3 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr 1fr;
}
.thq-grid-4 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
flex-direction: row;
grid-template-columns: 1fr 1fr;
}
.thq-grid-2 {
grid-gap: var(--dl-layout-space-oneandhalfunits);
grid-template-columns: 1fr;
}
.thq-img-scale {
width: 100%;
}
.feature-item {
flex: 1 1 100%;
}
.process-steps {
gap: var(--spacing-3xl);
flex-direction: column;
}
.cta-action-buttons {
flex-direction: column;
}
}
@media(max-width: 479px) {
.thq-section-padding {
padding: var(--dl-layout-space-oneandhalfunits);
}
.thq-flex-column {
gap: var(--dl-layout-space-unit);
}
.thq-flex-row {
gap: var(--dl-layout-space-unit);
}
.thq-grid-6 {
grid-gap: var(--dl-layout-space-unit);
grid-template-columns: 1fr 1fr;
}
.thq-grid-5 {
grid-gap: var(--dl-layout-space-unit);
grid-template-columns: 1fr 1fr;
}
.thq-grid-3 {
grid-gap: var(--dl-layout-space-unit);
align-items: center;
grid-template-columns: 1fr;
}
.thq-grid-4 {
grid-gap: var(--dl-layout-space-unit);
align-items: center;
flex-direction: column;
grid-template-columns: 1fr;
}
.thq-grid-2 {
grid-gap: var(--dl-layout-space-unit);
}
.thq-grid-auto-300 {
grid-template-columns: 1fr;
}
.testimonial-card {
flex: 0 0 280px;
}
.gallery-masonry {
columns: 1;
}
}