/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0 solid hsl(var(--border));
}

/* VARIÁVEIS DE CORES E ESTILOS (Traduzido de index.css) */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 270 95% 75%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 217 91% 60%;
    --radius: 0.5rem;

    /* TCC Lab Design System */
    --tcc-primary: 217 91% 60%;
    --tcc-primary-light: 217 91% 70%;
    --tcc-secondary: 270 95% 75%;
    --tcc-secondary-light: 270 95% 85%;
    --tcc-dark: 222.2 47.4% 11.2%;
    --tcc-gray: 215.4 16.3% 46.9%;
    --tcc-light-bg: 210 40% 98%;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(var(--tcc-primary)) 0%, hsl(var(--tcc-secondary)) 100%);

    /* Shadows */
    --shadow-soft: 0 4px 20px -2px hsl(var(--tcc-primary) / 0.1);
    --shadow-medium: 0 8px 30px -4px hsl(var(--tcc-primary) / 0.15);
    --shadow-strong: 0 20px 40px -8px hsl(var(--tcc-primary) / 0.2);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ESTILOS GERAIS E UTILITÁRIOS */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mb-16 { margin-bottom: 4rem; }
.text-center { text-align: center; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.font-bold { font-weight: 700; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.grid { display: grid; }
.gap-6 { gap: 1.5rem; }

@media (min-width: 768px) {
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* COMPONENTES CUSTOMIZADOS */
.btn-gradient {
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    transition: all 0.3s ease;
}
.btn-gradient:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    transform: scale(1.05);
}

.card-floating {
    background-image: linear-gradient(145deg, hsl(var(--background)) 0%, hsl(var(--tcc-light-bg)) 100%);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    border: 1px solid hsla(var(--border) / 0.5);
}
.card-floating:hover {
    box-shadow: var(--shadow-medium);
}

.text-gradient {
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.feature-card {
    padding: 1.5rem;
    border-radius: 0.75rem; /* rounded-xl */
    transition: var(--transition-smooth);
}
.feature-card:hover {
    transform: scale(1.05);
}

/* ESTILOS ESPECÍFICOS DAS SEÇÕES */
/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    border-bottom: 1px solid hsl(var(--border));
    background-color: hsla(var(--background) / 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.header .container {
    display: flex;
    height: 4rem; /* h-16 */
    align-items: center;
    justify-content: space-between;
}
.header nav {
    display: none; /* hidden */
}
@media (min-width: 768px) {
    .header nav {
        display: flex;
        align-items: center;
        gap: 1.5rem; /* space-x-6 */
    }
}
.header nav a {
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: hsl(var(--foreground));
    transition: color 0.2s;
}
.header nav a:hover {
    color: hsl(var(--primary));
}
.header .buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botões Genéricos */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.button-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    height: 2.25rem;
}
.button-lg {
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    height: 3.5rem;
}
.button-ghost {
    background-color: transparent;
}
.button-ghost:hover {
    background-color: hsl(var(--secondary));
}
.button-outline {
    border: 1px solid hsl(var(--border));
    background-color: transparent;
}
.button-outline:hover {
    background-color: hsl(var(--secondary));
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-secondary {
    background-color: hsla(var(--primary) / 0.1);
    color: hsl(var(--primary));
}
.badge-outline {
    border: 1px solid hsl(var(--border));
    font-size: 0.75rem;
}
.badge-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Hero Section */
#hero {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(to bottom right, hsl(var(--background)), hsl(var(--tcc-light-bg)), hsl(var(--background)));
}
#hero .container {
    position: relative;
    min-height: 600px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#hero .grid {
    max-width: 76rem; /* max-w-6xl */
    margin: 0 auto;
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    #hero .grid { grid-template-columns: repeat(2, 1fr); }
    #hero .content { text-align: left; }
}
#hero .content {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#hero h1 {
    font-size: 2.25rem; /* 4xl */
    font-weight: 800;
    line-height: 1.2;
}
@media (min-width: 768px) { #hero h1 { font-size: 3rem; } } /* md:text-5xl */
@media (min-width: 1024px) { #hero h1 { font-size: 3.75rem; } } /* lg:text-6xl */
#hero h1 .text-gradient { display: block; }

#hero .buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
@media (min-width: 640px) {
    #hero .buttons { flex-direction: row; }
}
@media (min-width: 1024px) {
    #hero .buttons { justify-content: flex-start; }
}

#hero .hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}
#hero .hero-image {
    width: 30rem; /* w-80 */
    height: 30rem; /* h-80 */
    object-fit: contain;
   /* animation: bounce 3s infinite;*/
}
@media (max-width: 768px) {
    #hero .hero-image {
    width: 20rem; /* w-80 */
    height: 20rem; /* h-80 */
    object-fit: contain;
   /* animation: bounce 3s infinite;*/
    }
}

@keyframes bounce {
    0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* Features Section */
#recursos {
    background-color: hsla(var(--tcc-light-bg) / 0.3);
}
.feature-card .card-header {
    padding-bottom: 1rem;
}
.feature-card .icon-wrapper {
    padding: 0.5rem;
    background-color: hsla(var(--primary) / 0.1);
    border-radius: 0.5rem;
    transition: background-color 0.3s;
}
.feature-card:hover .icon-wrapper {
    background-color: hsla(var(--primary) / 0.2);
}
.feature-card .title {
    font-size: 1.125rem;
    font-weight: 700;
}
.feature-card .description {
    font-size: 0.875rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
}

/* How It Works Section */
#como-funciona .grid {
    align-items: center;
    gap: 3rem;
}
@media (min-width: 1024px) {
    #como-funciona .grid { grid-template-columns: repeat(2, 1fr); }
}
.step-item { display: flex; gap: 1.5rem; }
.step-item .icon-wrapper {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to bottom right, hsla(var(--primary)/0.1), hsla(var(--accent)/0.1));
    transition: all 0.3s;
}
.step-item:hover .icon-wrapper {
    background-image: linear-gradient(to bottom right, hsla(var(--primary)/0.2), hsla(var(--accent)/0.2));
}
.step-item .step-number {
    font-size: 1.875rem;
    font-weight: 700;
    color: hsla(var(--primary) / 0.3);
}
.step-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Pricing Section */
#precos {
    background-color: hsla(var(--tcc-light-bg) / 0.3);
}
.pricing-card {
    position: relative;
}
.pricing-card.popular {
    border: 2px solid hsl(var(--primary));
    box-shadow: var(--shadow-strong);
}
.pricing-card .popular-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
}
.pricing-card .icon-wrapper {
    padding: 0.75rem;
    border-radius: 0.75rem;
}
.pricing-card .icon-wrapper.popular {
    background-color: hsl(var(--primary));
    color: white;
}
.pricing-card .icon-wrapper.normal {
    background-color: hsla(var(--primary) / 0.1);
    color: hsl(var(--primary));
}
.pricing-card .price {
    font-size: 2.25rem;
    font-weight: 800;
}
.pricing-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.pricing-card ul .icon-check {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #16a34a; /* green-600 */
}

/* Footer */
.footer {
    background-color: hsl(var(--tcc-dark));
    color: white;
}
.footer .grid {
    gap: 2rem;
}
@media (min-width: 768px) {
    .footer .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.footer h3 {
    font-size: 1.125rem;
    font-weight: 600;
}
.footer p, .footer ul li, .footer a {
    font-size: 0.875rem;
    color: #d1d5db; /* gray-300 */
    text-decoration: none;
}
.footer a:hover {
    color: white;
}
.footer .button-outline {
    background-color: transparent;
    border-color: #4b5563; /* gray-600 */
    color: #d1d5db; /* gray-300 */
}
.footer .button-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.footer .separator {
    margin: 2rem 0;
    height: 1px;
    background-color: #374151; /* gray-700 */
}
.footer .bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 768px) {
    .footer .bottom-row { flex-direction: row; }
}