.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-sm);
letter-spacing: -0.005em;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
position: relative;
text-decoration: none;
white-space: nowrap;
border: 1.5px solid transparent;
line-height: 1.2;
}
.btn--primary {
background: var(--brand-purple-deep);
color: var(--white);
}
.btn--primary:hover {
background: var(--brand-purple);
color: var(--white);
transform: translateY(-1px);
}
.btn--secondary {
background: var(--white);
color: var(--brand-purple-deep);
border-color: var(--gray-200);
}
.btn--secondary:hover {
border-color: var(--brand-purple-deep);
color: var(--brand-purple-deep);
}
.btn--ghost {
background: transparent;
color: var(--text);
padding: var(--space-3) var(--space-2);
}
.btn--ghost:hover {
color: var(--brand-magenta);
gap: var(--space-3);
}
.btn--whatsapp {
background: #25d366;
color: var(--white);
}
.btn--whatsapp:hover {
background: #1ea855;
color: var(--white);
transform: translateY(-1px);
} .btn--white {
background: var(--white);
color: var(--brand-purple-deep);
}
.btn--white:hover {
background: var(--brand-yellow);
color: var(--brand-purple-deep);
transform: translateY(-1px);
} .btn--outline-light {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, 0.3);
}
.btn--outline-light:hover {
background: var(--white);
color: var(--brand-purple-deep);
border-color: var(--white);
}
.btn--lg {
padding: var(--space-4) var(--space-8);
font-size: var(--fs-base);
}
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
.btn .icon, .btn i { font-size: 1.05em; } .header {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--header-h);
z-index: var(--z-header);
transition: background var(--transition-base), border-color var(--transition-base);
background: transparent;
border-bottom: 1px solid transparent;
} .header--over-dark .header__nav a,
.header--over-dark .header__logo {
color: var(--white);
}
.header--over-dark .header__nav a:hover { color: var(--brand-yellow); }
.header--over-dark .menu-toggle {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.15);
} .header.is-scrolled {
background: var(--white);
border-bottom-color: var(--gray-100);
}
.header.is-scrolled .header__nav a,
.header.is-scrolled .header__logo { color: var(--text); }
.header.is-scrolled .header__nav a:hover { color: var(--brand-purple); }
.header.is-scrolled .menu-toggle { background: var(--gray-50); color: var(--brand-purple); border-color: transparent; }
.header__inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
}
.header__logo img { height: 30px; width: auto; transition: filter var(--transition-base); }
.header__logo .logo-white { display: none; }
.header__logo .logo-color { display: block; }
.header--over-dark:not(.is-scrolled) .header__logo .logo-white { display: block; }
.header--over-dark:not(.is-scrolled) .header__logo .logo-color { display: none; }
.header__nav {
display: flex;
align-items: center;
gap: var(--space-1);
}
.header__nav a {
padding: var(--space-2) var(--space-4);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-sm);
border-radius: var(--radius-md);
transition: color var(--transition-fast);
position: relative;
}
.header__nav a.is-active { color: var(--brand-purple); font-weight: 600; }
.header--over-dark .header__nav a.is-active { color: var(--brand-yellow); }
.header.is-scrolled .header__nav a.is-active { color: var(--brand-purple); }
.header__cta { display: flex; align-items: center; gap: var(--space-3); }
.header--over-dark .btn--primary {
background: var(--white);
color: var(--brand-purple-deep);
}
.header--over-dark .btn--primary:hover {
background: var(--brand-yellow);
color: var(--brand-purple-deep);
}
.menu-toggle {
display: none;
width: 42px; height: 42px;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--gray-50);
color: var(--brand-purple);
font-size: 1.25rem;
transition: all var(--transition-fast);
} .mobile-menu {
position: fixed;
inset: 0;
background: var(--white); z-index: calc(var(--z-header) - 1);
display: none;
flex-direction: column;
padding: calc(var(--header-h) + var(--space-8)) var(--space-6) var(--space-8);
overflow-y: auto;
}
.mobile-menu.is-open { display: flex; } body.menu-open .header { background: var(--white); border-bottom-color: var(--gray-100); }
body.menu-open .header .header__logo .logo-white { display: none; }
body.menu-open .header .header__logo .logo-color { display: block; }
body.menu-open .menu-toggle { background: var(--gray-50); color: var(--brand-purple); border-color: transparent; } .menu-toggle .fa-xmark,
.menu-toggle[aria-expanded="true"] .fa-bars { display: none; }
.menu-toggle[aria-expanded="true"] .fa-xmark { display: inline-block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-menu nav a {
padding: var(--space-4) var(--space-2);
font-size: var(--fs-2xl);
font-family: var(--font-display);
font-weight: 500;
color: var(--text);
border-bottom: 1px solid var(--gray-100);
letter-spacing: -0.02em;
}
.mobile-menu nav a:hover, .mobile-menu nav a.is-active { color: var(--brand-purple); }
.mobile-menu__cta { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 960px) {
.header__nav, .header__cta .btn:not(.btn--whatsapp) { display: none; }
.menu-toggle { display: inline-flex; }
} .wa-float {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
z-index: var(--z-modal);
transition: transform var(--transition-base);
}
.wa-float:hover { transform: scale(1.08); color: var(--white); }
.wa-float::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: #25d366;
opacity: 0.35;
z-index: -1;
animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
0% { transform: scale(0.95); opacity: 0.55; }
100% { transform: scale(1.45); opacity: 0; }
}
@media (max-width: 640px) {
.wa-float {
width: 46px; height: 46px;
font-size: 1.15rem;
bottom: var(--space-4);
right: var(--space-4);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.wa-float::before { inset: -4px; }
} .badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
color: var(--brand-purple);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.badge::before { content: '—'; opacity: 0.6; }
.badge i { color: var(--brand-yellow); }
.badge--light {
color: rgba(255, 255, 255, 0.7);
}
.badge--light i { color: var(--brand-yellow); } .card {
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-7);
border: 1px solid var(--gray-100);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
display: block;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
} .card--accent {
--card-accent: var(--brand-purple);
}
.card--accent::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--card-accent);
} .card__number {
display: block;
font-family: var(--font-display);
font-size: 2rem;
font-weight: 600;
color: var(--card-accent, var(--brand-purple));
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: var(--space-6);
} .card__icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: transparent;
border: 1.5px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--card-accent, var(--brand-purple));
font-size: 1.25rem;
margin-bottom: var(--space-5);
transition: all var(--transition-base);
}
.card:hover .card__icon {
border-color: var(--card-accent, var(--brand-purple));
}
.card__title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-xl);
margin-bottom: var(--space-3);
letter-spacing: -0.02em;
color: var(--text);
}
.card__text {
color: var(--text-soft);
font-size: var(--fs-sm);
line-height: 1.6;
margin-bottom: var(--space-5);
}
.card__list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-6);
}
.card__list li {
font-size: var(--fs-sm);
color: var(--text-soft);
padding: var(--space-2) 0 var(--space-2) var(--space-5);
position: relative;
}
.card__list li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px; height: 1.5px;
background: var(--card-accent, var(--brand-magenta));
}
.card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-sm);
color: var(--card-accent, var(--brand-purple));
transition: gap var(--transition-base);
}
.card:hover .card__link { gap: var(--space-3); } .card--highlight {
background: var(--brand-purple-deep);
color: var(--white);
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
border-color: transparent;
min-height: 280px;
background-image: var(--pattern-grid-light);
background-size: var(--pattern-grid-size);
}
.card--highlight::before { display: none; }
.card--highlight .card__title { color: var(--white); }
.card--highlight p { color: rgba(255, 255, 255, 0.75); }
.card--highlight .card__link { color: var(--brand-yellow); }
.card--highlight:hover {
background-color: var(--brand-purple-dark);
transform: translateY(-2px);
} .footer {
background: var(--brand-purple-deep);
background-image: var(--pattern-grid-light);
background-size: var(--pattern-grid-size);
color: rgba(255, 255, 255, 0.65);
padding: var(--space-20) 0 var(--space-8);
position: relative;
overflow: hidden;
border-top: 4px solid var(--brand-magenta);
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--space-12);
position: relative;
z-index: 1;
margin-bottom: var(--space-12);
}
.footer__brand img { height: 42px; margin-bottom: var(--space-5); }
.footer__brand p { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-sm); margin-bottom: var(--space-6); max-width: 380px; }
.footer__heading {
color: var(--white);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: var(--space-5);
}
.footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-sm); transition: color var(--transition-fast); }
.footer__links a:hover { color: var(--white); }
.footer__contact { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); }
.footer__contact a { color: rgba(255, 255, 255, 0.7); display: inline-flex; align-items: center; gap: var(--space-3); }
.footer__contact a:hover { color: var(--white); }
.footer__contact .icon { color: var(--brand-yellow); width: 18px; text-align: center; }
.footer__contact > span { display: flex; align-items: flex-start; gap: var(--space-3); }
.footer__contact > span .icon { margin-top: 4px; }
.footer__contact .addr { align-items: flex-start; }
.footer__contact .addr .icon { margin-top: 4px; }
.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer__social a {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border-radius: 50%;
color: var(--white);
transition: all var(--transition-base);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.footer__social a:hover { background: var(--brand-yellow); color: var(--brand-purple-deep); border-color: var(--brand-yellow); }
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: var(--space-5);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
font-size: var(--fs-xs);
font-family: var(--font-mono);
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.45);
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.footer { padding-top: var(--space-16); }
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-10); }
}
@media (max-width: 540px) {
.footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
.footer__bottom { flex-direction: column; text-align: center; }
} .form-group { margin-bottom: var(--space-5); }
.form-label {
display: block;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text);
margin-bottom: var(--space-2);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: var(--space-4) var(--space-4);
border: 1.5px solid var(--gray-100);
border-radius: var(--radius-md);
background: var(--white);
color: var(--text);
transition: border-color var(--transition-fast);
font-size: var(--fs-base);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--brand-purple);
}
.form-textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.form-error {
display: none;
margin-top: var(--space-2);
font-size: var(--fs-xs);
color: var(--brand-magenta);
}
.form-group.has-error .form-input,
.form-group.has-error .form-textarea,
.form-group.has-error .form-select { border-color: var(--brand-magenta); }
.form-group.has-error .form-error { display: block; }