: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);
} .bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2); }
.ring-ring { --tw-ring-color: hsl(var(--ring)); } .bg-background\/80 { background-color: hsl(var(--background) / 0.8); }
.bg-background\/95 { background-color: hsl(var(--background) / 0.95); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-primary\/20 { background-color: hsl(var(--primary) / 0.2); }
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }
.bg-muted\/50 { background-color: hsl(var(--muted) / 0.5); }
.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); } .shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-strong { box-shadow: var(--shadow-strong); } .font-display {
font-family: 'Cormorant Garamond', Georgia, serif;
}
.font-body {
font-family: 'Jost', system-ui, sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Jost', sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
}
h4, h5, h6 {
font-family: 'Jost', sans-serif;
font-weight: 500;
} .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));
} .teal-line::before {
content: '';
display: block;
width: 48px;
height: 2px;
background: hsl(var(--primary));
margin-bottom: 1rem;
} .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;
} .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);
} @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); }
} .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;
}
@keyframes shine {
0%, 83% { left: -100%; }
90% { left: 100%; }
100% { left: 100%; }
} .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%
);
}
} .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;
} blockquote.border-l-2 {
border-left: 2px solid hsl(var(--primary));
padding-left: 1.25rem;
margin-top: 2rem;
margin-bottom: 2rem;
} .prose-caricias { font-family: 'Jost', sans-serif; font-weight: 300; color: #6b7280; line-height: 1.8; }
.prose-caricias h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; color: #111827; margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.3; }
.prose-caricias h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: #111827; margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.3; }
.prose-caricias p { margin-bottom: 1.25rem; font-size: 1rem; }
.prose-caricias strong { font-weight: 700; color: #111827; }
.prose-caricias em { font-style: italic; }
.prose-caricias ul, .prose-caricias ol { margin-left: 1.5rem; margin-bottom: 1.25rem; }
.prose-caricias li { margin-bottom: 0.5rem; }
.prose-caricias a { color: hsl(var(--primary)); text-decoration: underline; }
.prose-caricias blockquote { border-left: 2px solid hsl(var(--primary)); padding-left: 1.25rem; margin: 2rem 0; font-style: italic; }
.prose-caricias img { border-radius: 1rem; margin: 2rem 0; } .nav-links { display: flex; gap: 0.5rem; justify-content: center; }
.nav-links a, .nav-links span { padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-family: 'Jost', sans-serif; transition: all 0.2s; }
.nav-links a { background: #f3f4f6; color: #6b7280; }
.nav-links a:hover { background: hsl(var(--primary)); color: white; }
.nav-links .current { background: hsl(var(--primary)); color: white; }
.container { max-width: 1250px !important; }.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-12 { height: 3rem; }
.h-\[48px\] { height: 48px; } #header-inner { height: 64px; }
#header-logo { height: 48px; width: auto; }
#header-inner.scrolled { height: 48px; }
#header-inner.scrolled #header-logo { height: 32px; } #mobile-toggle { display: block !important; }
@media (min-width: 1024px) { #mobile-toggle { display: none !important; } }