:root { --teal: 196 57% 47%;
--teal-light: 196 57% 95%;
--teal-mid: 196 57% 88%;
--carbon: 0 1% 37%; --background: 0 0% 100%;
--foreground: 0 1% 37%;
--card: 0 0% 100%;
--card-foreground: 0 1% 37%;
--popover: 0 0% 100%;
--popover-foreground: 0 1% 37%;
--primary: 196 57% 47%;
--primary-foreground: 0 0% 100%;
--secondary: 196 57% 95%;
--secondary-foreground: 196 57% 35%;
--muted: 0 0% 97%;
--muted-foreground: 0 1% 50%;
--accent: 196 57% 92%;
--accent-foreground: 196 57% 35%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 196 20% 88%;
--input: 196 20% 88%;
--ring: 196 57% 47%;
--radius: 0.75rem; --shadow-soft: 0 4px 30px hsl(196 57% 47% / 0.12);
--shadow-card: 0 2px 20px hsl(0 0% 0% / 0.06);
--shadow-strong: 0 8px 40px hsl(196 57% 47% / 0.2); --gradient-hero: linear-gradient(135deg, hsl(196 57% 97%) 0%, hsl(0 0% 100%) 60%);
--gradient-teal: linear-gradient(135deg, hsl(196 57% 47%), hsl(196 57% 38%));
--gradient-soft: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(196 57% 97%) 100%);
} *, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border-color: hsl(var(--border));
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Jost', sans-serif;
font-weight: 300;
color: hsl(var(--foreground));
background-color: hsl(var(--background));
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
}
h4, h5, h6 {
font-family: 'Jost', sans-serif;
font-weight: 500;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
strong {
font-weight: 600;
} .font-display {
font-family: 'Cormorant Garamond', serif;
}
.font-body {
font-family: 'Jost', sans-serif;
} .bg-background           { background-color: hsl(var(--background)); }
.bg-primary              { background-color: hsl(var(--primary)); }
.bg-primary-foreground   { background-color: hsl(var(--primary-foreground)); }
.bg-secondary            { background-color: hsl(var(--secondary)); }
.bg-card                 { background-color: hsl(var(--card)); }
.bg-muted                { background-color: hsl(var(--muted)); }
.bg-accent               { background-color: hsl(var(--accent)); } .bg-background\/80       { background-color: hsl(var(--background) / 0.8); }
.bg-background\/95       { background-color: hsl(var(--background) / 0.95); }
.bg-muted\/30            { background-color: hsl(var(--muted) / 0.3); }
.bg-muted\/40            { background-color: hsl(var(--muted) / 0.4); } .text-foreground         { color: hsl(var(--foreground)); }
.text-primary            { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-muted-foreground   { color: hsl(var(--muted-foreground)); }
.text-card-foreground    { color: hsl(var(--card-foreground)); } .text-foreground\/80     { color: hsl(var(--foreground) / 0.8); }
.text-foreground\/70     { color: hsl(var(--foreground) / 0.7); }
.text-foreground\/60     { color: hsl(var(--foreground) / 0.6); }
.text-primary-foreground\/80 { color: hsl(var(--primary-foreground) / 0.8); }
.text-primary-foreground\/90 { color: hsl(var(--primary-foreground) / 0.9); } .text-gradient {
background: linear-gradient(135deg, hsl(196 57% 40%), hsl(196 57% 60%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} .border-border           { border-color: hsl(var(--border)); }
.border-primary          { border-color: hsl(var(--primary)); }
.border-primary\/20      { border-color: hsl(var(--primary) / 0.2); }
.border-white\/10        { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20        { border-color: rgba(255, 255, 255, 0.2); } .shadow-card   { box-shadow: var(--shadow-card); }
.shadow-soft   { box-shadow: var(--shadow-soft); }
.shadow-strong { box-shadow: var(--shadow-strong); } .container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 1400px) {
.container {
max-width: 1400px;
}
}
@media (max-width: 1399px) {
.container {
max-width: 100%;
}
} .section-label {
font-family: 'Jost', sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: hsl(var(--primary));
display: inline-block;
} .hero-overlay {
background: linear-gradient(
to right,
hsl(0 0% 100% / 0.97) 0%,
hsl(0 0% 100% / 0.90) 50%,
hsl(0 0% 100% / 0.3) 100%
);
}
@media (max-width: 768px) {
.hero-overlay {
background: linear-gradient(
to bottom,
hsl(0 0% 100% / 0.9) 0%,
hsl(0 0% 100% / 0.85) 100%
);
}
} .teal-line::before {
content: '';
display: block;
width: 48px;
height: 2px;
background: hsl(var(--primary));
margin-bottom: 1rem;
} @keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes slideRight {
from { opacity: 0; transform: translateX(-24px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
from { opacity: 0; transform: translateX(24px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50%      { transform: translateY(-8px); }
}
@keyframes pulseSoft {
0%, 100% { opacity: 1; }
50%      { opacity: 0.7; }
}
@keyframes shine {
0%, 83% { left: -100%; }
90%     { left: 100%; }
100%    { left: 100%; }
} .animate-fade-up {
animation: fadeUp 0.7s ease-out forwards;
opacity: 0;
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
opacity: 0;
}
.animate-slide-right {
animation: slideRight 0.7s ease-out forwards;
opacity: 0;
}
.animate-slide-left {
animation: slideLeft 0.7s ease-out forwards;
opacity: 0;
}
.animate-float {
animation: float 4s ease-in-out infinite;
}
.animate-pulse-soft {
animation: pulseSoft 3s ease-in-out infinite;
} .delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; } .reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-right.visible {
opacity: 1;
transform: translateX(0);
} .whatsapp-shine::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
transparent 30%,
hsla(0, 0%, 100%, 0.4) 50%,
transparent 70%,
transparent 100%
);
border-radius: 9999px;
animation: shine 6s ease-in-out infinite;
} details summary::-webkit-details-marker,
details summary::marker {
display: none;
content: '';
}
.faq-item[open] summary {
color: hsl(var(--primary));
} .hover\:text-primary:hover         { color: hsl(var(--primary)); }
.hover\:bg-secondary:hover         { background-color: hsl(var(--secondary)); }
.hover\:bg-primary:hover           { background-color: hsl(var(--primary)); }
.hover\:border-primary:hover       { border-color: hsl(var(--primary)); }
.hover\:shadow-soft:hover          { box-shadow: var(--shadow-soft); }
.hover\:shadow-strong:hover        { box-shadow: var(--shadow-strong); }
.hover\:opacity-100:hover          { opacity: 1; }
.hover\:scale-105:hover            { transform: scale(1.05); }
.hover\:scale-110:hover            { transform: scale(1.1); }
.hover\:-translate-y-1:hover       { transform: translateY(-0.25rem); } .active\:scale-100:active          { transform: scale(1); } .group:hover .group-hover\:text-primary  { color: hsl(var(--primary)); }
.group:hover .group-hover\:gap-2         { gap: 0.5rem; }
.group:hover .group-hover\:gap-3         { gap: 0.75rem; }
.group:hover .group-hover\:scale-150     { transform: scale(1.5); }
.group:hover .group-hover\:rotate-180    { transform: rotate(180deg); }
.group:hover .group-hover\:block         { display: block; } .group[open] .group-open\:rotate-180     { transform: rotate(180deg); } .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brightness-0    { filter: brightness(0); }
.invert          { filter: invert(1); } ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: hsl(var(--muted));
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--primary));
} .font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.tracking-widest { letter-spacing: 0.1em; }
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fill-white { fill: #ffffff; }
.list-none { list-style: none; }  .bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-background\/95 {
--tw-gradient-from: hsl(var(--background) / 0.95);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--background) / 0));
}
.via-background\/80 {
--tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background) / 0.8), var(--tw-gradient-to, hsl(var(--background) / 0));
}
.to-background\/20 {
--tw-gradient-to: hsl(var(--background) / 0.2);
} .saturate-\[\.70\]    { filter: saturate(0.70); }
.contrast-\[\.92\]    { filter: contrast(0.92); }
.brightness-\[1\.05\] { filter: brightness(1.05); } .saturate-\[\.70\].contrast-\[\.92\].brightness-\[1\.05\] {
filter: saturate(0.70) contrast(0.92) brightness(1.05);
} .aspect-square { aspect-ratio: 1 / 1; } .mix-blend-overlay   { mix-blend-mode: overlay; }
.pointer-events-none { pointer-events: none; } .bg-\[hsl\(var\(--primary\)\/0\.15\)\] {
background-color: hsl(var(--primary) / 0.15);
} .hover\:shadow-lg:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
} .opacity-65 { opacity: 0.65; }