/* ========================================
      PAINEL DE CONTROLE (VARIÝVEIS GLOBAIS)
   ======================================== */

:root {
    /* --- 0. Layout e Espaçamento --- */
    --header-height: 70px; /* Altura aproximada do header fixo (padding 1rem * 2 + conteúdo) */
    --header-height-mobile: 60px; /* Altura do header em mobile */

    /* --- 1. Famílias de Fonte --- */
    --font-title: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
    /* --- 2. Pesos de Fonte --- */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* --- 3. Cores de Texto --- */
    /* Cores de Texto */
    --color-text-light-primary: #ffffff;
    --color-text-light-secondary: #e2e8f0;
    --color-text-light-tertiary: #cbd5e1;
    --color-text-dark-primary: #1e293b;
    --color-text-dark-secondary: #64748b;
    --color-text-black: #000000;
    /* Cores de Destaque (Accent) */
    --color-accent-primary: #1d4ed8;
    --color-accent-secondary: #2563eb;
    --color-accent-tqs: #215F9A;
    --color-accent-apple: #0071E3;
    --color-accent-green: #22c55e;
    --color-accent-orange: #EA580C;
    --color-accent-lavander: #8B5CF6;
    --color-accent-esmeralda: #059669;
    --color-highlight-yellow: #ffff00;
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-dark: rgba(0, 0, 0, 0.1);
    --color-gradient-blue-start: #215f9a;
    --color-gradient-blue-end: #215f9a;
    /* Cores de Fundo */
    --bg-light: #ffffff;
    --bg-soft-gray: #f8fafc;
    --bg-medium-gray: #e8e8ed;
    --bg-dark-blue: #1e293b;
    --bg-dark-section: #000000;
    --bg-dark-hero: #080A0F;
    --bg-dark-card: #334155;
    /* --- 4. Gradientes --- */
    --gradient-button-primary: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    --gradient-button-primary-hover: linear-gradient(135deg, var(--color-accent-primary), #1e40af); /* Cor de hover adicionada */
    --gradient-hero-title: linear-gradient(135deg, var(--color-text-light-primary), var(--color-text-light-secondary));
    --gradient-multicolor: linear-gradient(to right, #007bff, #28a745, #ffc107, #dc3545);
    /* --- 5. Sombras (Shadows) --- */
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    /* --- 4. Escala de Tipografia Fluida --- */
    --font-size-small: clamp(0.8rem, 0.17vw + 0.76rem, 0.94rem);
    --font-size-body: clamp(1.1rem, 0.25vw + 1rem, 1.25rem);
    --font-size-item-title: clamp(1.8rem, 1vw + 1.5rem, 2.2rem);
    --font-size-section-subtitle: clamp(1.2rem, 0.3vw + 1.1rem, 1.3rem);
    --font-size-subgroup-title: clamp(2rem, 1vw + 1.8rem, 2.5rem);
    --font-size-group-title: clamp(2rem, 1vw + 1.7rem, 3rem);
    --font-size-section-title: clamp(2.5rem, 3vw + 2rem, 5.5rem);
    --font-size-hero-title: clamp(2rem, 2.5vw + 1.5rem, 4rem);
    --font-size-highlight-title: clamp(1.8rem, 1vw + 1.5rem, 2.2rem);
}

/* ========================================
      RESET E ESTILOS DE BASE
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    overflow-x: hidden;
    /* Previne bounce horizontal no Safari iOS sem afetar getBoundingClientRect */
    overscroll-behavior-x: none;
}

body {
    font-family: var(--font-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    line-height: 1.6;
    color: var(--color-text-dark-primary);
    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 80px; /* Compensar altura do header fixed */
    width: 100%;
    max-width: 100vw;
    position: relative;
    /* overflow-x: clip esconde overflow mas não afeta getBoundingClientRect */
    overflow-x: clip;
    /* Previne bounce horizontal no Safari iOS */
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
      LAYOUT E CLASSES UTILITÝRIAS
   ======================================== */

.container {
    width: 95%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
      ESTILOS DE TIPOGRAFIA BASE
   ======================================== */

/* Títulos de Seção (h1, h2, h3) */
h1, h2, h3 {
    font-family: var(--font-title);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
    color: var(--color-text-dark-primary);
}

/* Títulos de Itens (h4, h5, h6) */
h4, h5, h6 {
    font-family: var(--font-title);
    font-size: var(--font-size-item-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
    margin-bottom: 0.75rem;
    color: var(--color-text-dark-primary);
}

/* Texto Normal (Parágrafos) */
p {
    font-family: var(--font-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Texto Destacado (Negrito) */
strong {
    font-weight: var(--font-weight-bold);
}

/* Linha Horizontal */
hr {
    border: none;
    border-top: 1px solid #555555;
    height: 0;
    margin: 3rem 0;
    width: 100%;
    min-width: 100%;
    align-self: stretch;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* --- CLASSES UTILITÝRIAS (PARA FLEXIBILIDADE) --- */

/* Para aplicar o estilo de Título de Seção em qualquer elemento */
.text-section-title {
    font-family: var(--font-title);
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
}

/* Para aplicar o estilo de Subtítulo de Seção em qualquer elemento */
.text-section-subtitle {
    font-family: var(--font-text);
    font-size: var(--font-size-section-subtitle);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

/* Para aplicar o estilo de título de grupo em qualquer elemento */
.text-group-title {
    font-family: var(--font-text);
    font-size: var(--font-size-group-title);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

/* Para aplicar o estilo de Título de Item em qualquer elemento */
.text-item-title {
    font-family: var(--font-title);
    font-size: var(--font-size-item-title);
    font-weight: var(--font-weight-bold);
}

/* Para aplicar o estilo de Texto Destacado (Negrito) em qualquer elemento */
.text-bold {
    font-weight: var(--font-weight-bold);
}

/* --- CLASSES DE COR (PARA "CORES DIVERSAS") --- */

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-accent {
    color: var(--color-text-accent);
}

.text-accent-secondary {
    color: var(--color-accent-secondary); /* Usa a variável que já definimos no :root */
}

.text-accent-lavander {
    color: var(--color-accent-lavander); /* Usa a variável que já definimos no :root */
}

.text-accent-orange {
    color: var(--color-accent-orange); /* Usa a variável que já definimos no :root */
}

.text-accent-bluestart {
    color: var(--color-gradient-blue-start); /* Usa a variável que já definimos no :root */
    font-size: var(--font-size-section-subtitle);
}

.text-accent-esmeralda {
    color: var(--color-accent-esmeralda); /* Usa a variável que já definimos no :root */
}

.text-white {
    color: var(--color-text-light-primary);
}

.text-black {
    color: var(--color-text-black);
}

/* ========================================
   EFEITO DE TEXTO GLOW 
   ======================================== */

.apple-glow-text {
    /* ADICIONE ESTA LINHA PARA CONTER O BRILHO */
    display: inline-block;
    /* O resto do código continua igual */
    position: relative;
    z-index: 1;
    color: white;
    font-family: var(--font-text);
    font-size: var(--font-size-highlight-title);
    font-weight: 700;
}

    .apple-glow-text::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        width: 75%;
        height: 150%;
        background: linear-gradient(90deg, #007aff, #ff3b30);
        filter: blur(40px);
        opacity: 0.9;
    }

/* =================================================================== */
/* EFEITO DE TEXTO COM CORES INTERCALADAS                */
/* =================================================================== */

/* --- 1. ESTRUTURA BASE --- */
/* Esta é a classe principal que aplica a lógica do efeito. */
.texto-intercalado {
    /* Define as variáveis de cor com valores padrão (opcional, mas bom ter) */
    --cor-impar: black;
    --cor-par: grey;
}

    /* O comportamento do span é o mesmo para todas as variações */
    .texto-intercalado span {
        display: inline-block;
    }

        /* A lógica de pintura usa as variáveis */
        .texto-intercalado span:nth-child(odd) {
            color: var(--cor-impar); /* Pinta letras ímpares */
        }

        .texto-intercalado span:nth-child(even) {
            color: var(--cor-par); /* Pinta letras pares */
        }


/* --- 2. MODIFICADORES DE COR (TEMAS) --- */
/* Estas classes apenas definem as cores a serem usadas. */

/* Tema Azul TQS / Branco */
.texto-intercalado--azul {
    --cor-impar: #0724DC; /* Mantido como cor especial */
    --cor-par: var(--color-text-light-primary);
}

/* Tema "Earth" (Vermelho / Amarelo) */
.texto-intercalado--earth {
    --cor-impar: #FF5026; /* Mantido como cor especial */
    --cor-par: #FFC113; /* Mantido como cor especial */
}



/* =================================================================== */
/* EFEITOS DE TEXTO 3D (AUTORRELEVO)                                 */
/* =================================================================== */

/* Efeito 1: Texto "Gravado" / Pressionado para dentro */
.text-engraved {
    /* A cor do texto deve ser um pouco mais escura que o fundo */
    color: #d1d1d1;
    /* A mágica: uma sombra clara embaixo e uma escura em cima */
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), /* Sombra clara (luz) */
    -1px -1px 1px rgba(0, 0, 0, 0.2); /* Sombra escura (profundidade) */
}

/* Efeito 2: Texto "Elevado" / Saltado para fora */
.text-embossed {
    /* A cor do texto deve ser a mesma do fundo para um efeito suave */
    color: white;
    /* O inverso do anterior: luz em cima, sombra embaixo */
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.8), /* Sombra clara (luz) */
    1px 1px 1px rgba(0, 0, 0, 0.2); /* Sombra escura (profundidade) */
}

/* Efeito "Gravado" para fundos escuros */
.text-engraved-dark {
    /* Cor do texto um pouco mais clara que o fundo escuro */
    color: #444;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), /* Sombra escura */
    -1px -1px 1px rgba(255, 255, 255, 0.1); /* Luz sutil */
}

/* Efeito "Elevado" para fundos escuros */
.text-embossed-dark {
    /* 1. Cor do texto é um cinza-médio, não mais a cor do fundo */
    color: #888;
    /* 2. A luz (sombra clara) é mais forte e a sombra escura contrasta com o texto cinza */
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.3), /* Luz de cima/esquerda (mais forte) */
    1px 1px 1px rgba(0, 0, 0, 0.8); /* Sombra de baixo/direita (bem escura) */
}

/* VERSÃO ALTERNATIVA: Efeito mais suave com mais profundidade */
.text-embossed-dark-soft {
    color: #888;
    text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2), /* Luz de cima/esquerda, mais suave */
    1px 1px 2px rgba(0, 0, 0, 0.9), /* Sombra principal, mais escura e suave */
    2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra secundária para mais profundidade */
}

.text-accent-blue {
    color: var(--color-accent-apple);
    font-size: var(--font-size-item-title);
}
/* azul estilo Apple (links/badges) */


/* Botões */
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
}

img {
    max-width: 100%;
    height: auto;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    color: var(--color-text-light-primary);
}

    .btn-primary:hover {
        background: var(--gradient-button-primary-hover);
        transform: translateY(-2px);
    }

.btn-secondary {
    background: transparent;
    color: var(--color-accent-secondary);
    border: 2px solid var(--color-accent-secondary);
}

    .btn-secondary:hover {
        background: var(--color-accent-secondary);
        color: var(--color-text-light-primary);
    }

.btn-large {
    padding: 12px 24px;
    font-size: var(--font-size-body);
}

.btn-video {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light-primary);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

    .btn-video:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .btn-video span {
        margin-right: 8px;
    }

/* Classe base para todos os cards */
.card {
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

    .card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-4px);
    }

/* Modificadores de Layout */
.card--horizontal {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    width: 100%; /* Ocupa toda a largura disponível */
}

    .card--horizontal .card__media {
        width: 50%; /* 50% da largura para a imagem */
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end; /* Alinha imagem à direita dentro dos 50% */
    }

    .card--horizontal .card__content {
        width: 50%; /* 50% da largura para o texto */
        text-align: right; /* Alinha texto à direita */
        flex-shrink: 0;
    }

.card--horizontal-reverse {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    flex-direction: row-reverse;
    width: 100%; /* Ocupa toda a largura disponível */
}

    .card--horizontal-reverse .card__media {
        width: 50%; /* 50% da largura para a imagem */
        flex-shrink: 0;
        display: flex;
        justify-content: flex-start; /* Alinha imagem à esquerda dentro dos 50% */
    }

    .card--horizontal-reverse .card__content {
        width: 50%; /* 50% da largura para o texto */
        text-align: left; /* Alinha texto à esquerda */
        flex-shrink: 0;
    }

.card--vertical {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%; /* Ocupa toda a largura disponível */
    max-width: 100%; /* Não excede container pai */
}

    /* Modificador para adicionar imagem lateral em cards verticais */
    .card--vertical.card--sidebar-image {
        flex-direction: row;
        gap: 1.5rem;
    }

        .card--vertical.card--sidebar-image .card__content {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0; /* Permite shrink */
        }

        .card--vertical.card--sidebar-image .card__sidebar {
            flex-shrink: 0;
            width: 300px; /* Largura fixa da sidebar */
            display: flex;
            align-items: center; /* Centraliza verticalmente */
            justify-content: center;
        }

            .card--vertical.card--sidebar-image .card__sidebar img {
                max-width: 100%; /* Limita ao container */
                height: auto;
                object-fit: contain; /* Mantém proporção sem distorcer */
                border-radius: 8px;
                margin: 0 2rem 0 0; /* top right bottom left */
            }

        /* Imagem inferior continua dentro do content */
        .card--vertical.card--sidebar-image .card__media {
            margin-top: auto; /* Empurra para baixo */
        }

/* Responsivo: em mobile volta para vertical */
@media (max-width: 768px) {
    .card--vertical.card--sidebar-image {
        flex-direction: column;
    }

        .card--vertical.card--sidebar-image .card__sidebar {
            width: 100%;
        }

            .card--vertical.card--sidebar-image .card__sidebar img {
                margin: 0 2rem 0 2rem; /* top right bottom left */
            }
}

.card--text-center {
    text-align: center;
}

.card--overlay {
    position: relative;
    display: inline-block;
    text-align: center;
    color: #1d1d1f; /* Texto preto por padrão */
    width: fit-content; /* Card se ajusta ao tamanho da imagem */
    height: auto; /* Altura baseada na imagem */
    max-width: 100%; /* Não excede container pai */
    flex-shrink: 0; /* Não encolhe no flexbox - mantém tamanho natural */
}

.card--compact {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-left: 4px solid #2563eb;
}

.card--grid4 {
    display: grid;
    grid-template-areas:
        "title title"
        "topleft topright"
        "media media"
        "bottomleft bottomright";
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 2rem;
    position: relative;
    min-height: 400px;
}

    .card--grid4 .card__title {
        grid-area: title;
        text-align: left;
        margin-bottom: 1rem;
    }

    .card--grid4 .card__media {
        grid-area: media;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem 0;
    }

    .card--grid4 .card__image {
        width: auto; /* Largura natural */
        max-width: 100%; /* Nunca maior que tamanho original */
        height: auto;
    }

    .card--grid4 .card__description.topleft {
        grid-area: topleft !important;
        text-align: left;
        align-self: start;
    }

    .card--grid4 .card__description.topright {
        grid-area: topright !important;
        text-align: right;
        align-self: start;
    }

    .card--grid4 .card__description.bottomleft {
        grid-area: bottomleft !important;
        text-align: left;
        align-self: start;
    }

    .card--grid4 .card__description.bottomright {
        grid-area: bottomright !important;
        text-align: right;
        align-self: start;
    }

/* Responsividade para card--grid4 em mobile */
@media (max-width: 768px) {
    .card--grid4 {
        grid-template-areas:
            "title"
            "topleft"
            "topright"
            "media"
            "bottomleft"
            "bottomright";
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
        min-height: auto;
    }

    .card--grid4 .card__description.topleft,
    .card--grid4 .card__description.topright,
    .card--grid4 .card__description.bottomleft,
    .card--grid4 .card__description.bottomright {
        text-align: left !important;
    }
}

/* Modificadores de Aparência */
.card--dark {
    background: linear-gradient(135deg, var(--bg-dark-blue) 0%, var(--bg-dark-card) 100%);
    color: var(--color-text-light-primary);
}

.card--blue {
    background: linear-gradient(135deg, var(--color-gradient-blue-start) 0%, var(--color-gradient-blue-end) 100%);
    color: var(--color-text-light-primary);
}

.card--blue-alt {
    background: #003366;
    color: var(--color-text-light-primary);
}

.card--black {
    background: var(--bg-dark-section);
    color: var(--color-text-light-primary);
}

.card--dark-blue {
    background: #013364;
    color: var(--color-text-light-primary);
}

.card--white {
    background: white;
    color: #333;
}

.card.card--white strong {
    color: black !important;
}

/* Overlay com fundo preto - texto branco */
.card--overlay.card--black {
    color: white;
}

    .card--overlay.card--black::before {
        background: rgba(0, 0, 0, 0.8);
    }

/* Overlay com fundo branco - texto escuro */
.card--overlay.card--white {
    color: #333;
}

    .card--overlay.card--white::before {
        background: rgba(255, 255, 255, 0.9);
    }

.card--transparent {
    background: transparent;
    box-shadow: none;
    border: none;
}

    .card--transparent:hover {
        box-shadow: none;
        transform: none;
    }

/* Modificador: Card com fundo salmão */
.card--salmon {
    background: #C7BEB5;
    box-shadow: none;
    border: none;
    color: #1d1d1f; /* Texto escuro para contraste */
}

    .card--salmon:hover {
        box-shadow: 0 8px 24px rgba(199, 190, 181, 0.3); /* Sombra suave na cor salmão */
        transform: translateY(-4px);
    }

    /* Títulos em cards salmão */
    .card--salmon .card__title {
        color: #1d1d1f;
    }

    /* Descrições em cards salmão */
    .card--salmon .card__description {
        color: #3d3d3f;
    }

/* Overlay com fundo salmão */
.card--overlay.card--salmon::before {
    background: rgba(199, 190, 181, 0.9);
}

/* Overlay específico */
.card--overlay .card__media {
    position: relative;
    z-index: 0;
    display: block;
}

.card--overlay .card__image {
    display: block;
    width: 100%;
    max-width: 100%; /* Nunca maior que tamanho original */
    height: auto;
    max-height: none;
    border-radius: 12px;
    object-fit: contain; /* Preserva proporções */
    object-position: center;
}

.card--overlay .card__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1.5rem;
    text-align: left;
}

.card--overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    border-radius: 12px;
}

.card--overlay-dark::before {
    background: rgba(0, 0, 0, 0.7);
}

.card--overlay-blue::before {
    background: rgba(30, 64, 175, 0.7);
}

/* Modificador overlay com texto à direita - ajustado 3% mais à direita */
.card--overlay-right .card__content {
    position: absolute;
    top: 5rem;
    right: 1rem;
    left: 60%; /* Aumentado para posicionar mais à direita */
    bottom: 2rem;
    z-index: 2;
    padding: 3rem 0.1rem 3rem 3rem; /* top right bottom left */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Modificador para centralizar verticalmente o conteúdo do card */
.card--center-content .card__content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    top: 0 !important;
    bottom: 0 !important;
    height: 100%;
}

/* Título do card overlay-right posicionado no topo centralizado em todo o card */
.card--overlay-right > .card__title {
    position: absolute;
    top: clamp(0.5rem, 1vw, 1rem) !important;
    left: 1.5rem;
    right: 1.5rem;
    text-align: center;
    z-index: 3;
    color: inherit;
}

    /* H4 dentro do div card__title - usando tamanho padrão dos cards */
    .card--overlay-right > .card__title h4 {
        font-size: var(--font-size-item-title);
        font-weight: 600;
        color: inherit;
        margin-bottom: 0.3rem;
        line-height: 1.2;
    }

    /* Parágrafo dentro do div card__title com estilo de description - usando tamanho padrão */
    .card--overlay-right > .card__title p {
        font-size: var(--font-size-body);
        color: var(--color-text-black);
        opacity: 1;
        line-height: 1.5;
        margin: 0;
        font-weight: normal;
    }

/* Descrição do card overlay-right com cor preta e tamanho padrão */
.card--overlay-right .card__description {
    color: #000000;
    opacity: 1;
    font-size: var(--font-size-body);
}

    .card--overlay-right .card__description p {
        color: #000000;
        font-size: inherit;
    }

/* Componentes internos do card */
.card__content {
    flex: 1;
    min-width: 0;
    z-index: 2;
    position: relative;
}

.card__media {
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    width: 100%; /* Largura definida */
    height: auto; /* Altura baseada no conteúdo */
    min-height: 0; /* Remove altura mínima forçada */
    overflow: visible; /* Permite que imagem determine altura */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__title {
    font-size: var(--font-size-item-title); /* Usando a escala */
    font-weight: var(--font-weight-semibold); /* Usando o peso de fonte */
    color: inherit;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card__description {
    font-size: var(--font-size-body);
    color: inherit;
    opacity: 0.9;
    line-height: 1.6;
    margin: 0;
}

/* Estilo para div com bordas apenas nos cantos */
.corner-border {
    position: relative;
    margin: 8rem 1.25rem 1.25rem 1.25rem; /* top right bottom left */
    padding: 2.5rem;
}

    .corner-border::before,
    .corner-border::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border-color: #4E95D9;
        border-style: solid;
    }

    /* Canto superior esquerdo */
    .corner-border::before {
        top: 0;
        left: 0;
        border-width: 8px 0 0 8px;
    }

    /* Canto superior direito */
    .corner-border::after {
        top: 0;
        right: 0;
        border-width: 8px 8px 0 0;
    }

    /* Cantos inferiores usando pseudo-elementos do primeiro filho */
    .corner-border > :first-child::before,
    .corner-border > :first-child::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border-color: #4E95D9;
        border-style: solid;
        pointer-events: none;
    }

    /* Canto inferior esquerdo */
    .corner-border > :first-child::before {
        bottom: 0;
        left: 0;
        border-width: 0 0 8px 8px;
    }

    /* Canto inferior direito */
    .corner-border > :first-child::after {
        bottom: 0;
        right: 0;
        border-width: 0 8px 8px 0;
    }

/* Responsive: reduz margin e padding em mobile */
@media (max-width: 768px) {
    .corner-border {
        margin: 0;
        padding: 1.5rem;
    }
}

/* Aumenta altura do texto */
.text-taller {
    display: inline-block;
    font-size: 1.2em;
    line-height: 1.1;
}

.card__image {
    width: 100%;
    max-width: 100%; /* Nunca maior que tamanho original */
    height: auto; /* Mantém proporção natural */
    max-height: none; /* Remove limite de altura para permitir imagens altas */
    border-radius: 8px;
    object-fit: contain; /* Preserva proporções originais, sem corte ou esticamento */
    object-position: center;
    image-rendering: high-quality;
}

/* Classe para escurecer vídeos/imagens específicos */
.card__image--darken {
    filter: brightness(0.50);
}

/* ========================================
   CARD TIPO "TILE" (ESTILO APPLE)
   - Imagem dentro de um bloco arredondado escuro
   - Texto fora e abaixo do bloco (legenda)
   - Usar com markup: .card.card--tile > .card__media + .card__caption
   ======================================== */
.card--tile {
    /* Reseta estilo base do .card para um wrapper neutro */
    background: transparent;
    box-shadow: none;
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    /* Largura responsiva padrão */
    width: clamp(280px, 30vw, 420px);
}

/* Variáveis para customização rápida por classe */
.card--tile {
    --tile-bg: #1f1f1f;
    --tile-border: rgba(255, 255, 255, 0.08);
    --tile-radius: 24px;
    --tile-padding: 16px;
    --tile-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

    /* Não permitir que o item flex cresça além do conteúdo */
    .card--tile,

    .card--tile .card__media {
        background: var(--tile-bg);
        border: 1px solid var(--tile-border);
        border-radius: var(--tile-radius);
        padding: var(--tile-padding);
        box-shadow: var(--tile-shadow);
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .card--tile .card__image {
            /* Imagem centralizada, preservando proporção, sem cortar */
            width: 100%;
            height: auto;
            max-height: 560px; /* razoável para vitrines altas */
            object-fit: contain;
            border-radius: calc(var(--tile-radius) - 8px);
            background: var(--bg-light);
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            display: block; /* evita gaps em imagens inline */
        }

        /* Variante NATURAL: faz o card seguir a largura intrínseca da imagem
   e o texto quebra dentro dessa largura */
.card--tile.card--tile-natural {
    width: auto;                 /* remove o clamp padrão do tile */
    display: inline-flex;        /* encolhe ao conteúdo */
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;              /* não cresce dentro do grid flex */
}

.card--tile-natural .card__media {
    width: auto;                 /* mede pela imagem */
    max-width: 100%;
    display: inline-block;
}

.card--tile-natural .card__image {
    display: block;
    width: auto;                 /* usa largura intrínseca */
    height: auto;                /* usa altura intrínseca */
    max-width: 100%;             /* pode reduzir em telas menores */
    max-height: none;            /* sem teto de altura */
    object-fit: initial;
}



/* Garanta que o texto não force a largura do card */
.card--tile .card__caption,
.card--tile .card__title,
.card--tile .card__description {
    overflow-wrap: anywhere; /* quebra palavras longas */
    word-break: break-word;
    white-space: normal;
}

/* A legenda não define a largura do card; segue a da imagem */
.card--tile .card__content {
    flex: 0 0 auto; /* não expande a largura do card */
    width: 100%;
    contain: inline-size; /* o texto não influencia a largura do card */
}

.card__caption {
    width: 100%;
}

.card--tile .card__caption {
    text-align: left; /* Apple-style: legenda à esquerda */
}

.card--tile .card__title {
    font-size: 1.0625rem; /* ~17px */
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem 0;
    color: inherit;
}

.card--tile .card__description {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    margin: 0;
}

/* Opções rápidas de superfície */
.card--tile-light {
    --tile-bg: white;
    --tile-border: rgba(0, 0, 0, 0.06);
    --tile-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.card--tile-dark {
    --tile-bg: #1f1f1f;
    --tile-border: rgba(255, 255, 255, 0.08);
    --tile-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Variante: mídia totalmente transparente (sem bloco de fundo) */
.card--tile-ghost {
    --tile-bg: transparent;
    --tile-border: transparent;
    --tile-shadow: none;
    --tile-padding: 0; /* remove respiro ao redor da imagem */
}

/* Desativa todos os efeitos de hover para o tile "ghost" */
.card.card--tile-ghost:hover {
    box-shadow: none;
    transform: none;
}

.card--tile-ghost .card__media,
.card--tile-ghost .card__media:hover {
    transform: none;
    transition: none;
    background: transparent;
    box-shadow: none;
}

.card--tile .card__media:hover {
    transform: translateY(-2px);
    transition: transform 160ms ease;
}

/* Regra específica para imagens em cards verticais */
.card--vertical .card__image {
    width: auto; /* Largura natural da imagem */
    max-width: 100%; /* Nunca maior que tamanho original */
    height: auto; /* Altura natural da imagem */
}

/* Tamanhos específicos para media - proporções naturais */
.card--horizontal .card__media,
.card--horizontal-reverse .card__media {
    flex: 0 0 auto; /* Não cresce nem encolhe, mantém tamanho natural */
    width: auto; /* Largura baseada na proporção da imagem */
    max-width: 50%; /* Máximo de 50% da largura do card */
    min-width: 200px; /* Mínimo para legibilidade */
    min-height: 0; /* Remove altura mínima forçada */
    height: auto;
}

.card--vertical .card__content {
    padding: 2rem;
}

.card--vertical .card__media {
    width: auto; /* Largura baseada na imagem */
    max-width: 100%; /* Não excede largura máxima */
    height: auto; /* Altura determinada pela imagem */
    min-height: 0; /* Remove altura mínima forçada */
    margin: 0 1.5rem 1.5rem 1.5rem; /* Margem horizontal para não colar nas bordas */
    align-self: center; /* Centraliza a mídia no card */
}

.card--compact .card__title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.card--compact .card__description {
    font-size: 1rem;
    opacity: 0.8;
}

/* Classe utilitária para cor TQS Blue */
.text-tqs-blue {
    color: var(--color-accent-tqs) !important;
}

/* Cores específicas para texto em cards escuros */
.card--dark .card__description,
.card--blue .card__description {
    opacity: 0.9;
}

/* Responsividade do sistema modular */
@media (max-width: 768px) {
    .card--horizontal,
    .card--horizontal-reverse {
        flex-direction: column !important;
        gap: 1.5rem;
        padding: 1.5rem 0.5rem;
    }

        .card--horizontal .card__media,
        .card--horizontal-reverse .card__media {
            max-width: 100%;
        }

        .card--horizontal .card__content,
        .card--horizontal-reverse .card__content {
            width: 100% !important;
            text-align: center;
        }

    .card--vertical .card__content {
        padding: 2rem 0.5rem;
    }

    .card--vertical .card__media {
        margin: 0 0.5rem 1.5rem 0.5rem;
    }

    .card__title {
        font-size: 1.5rem;
    }

    .card__description {
        font-size: 1rem;
    }
}

/* ========================================
   SISTEMA DE GRID AUTOMÝTICO 
   ======================================== */

/* Grid principal que se adapta ao conteúdo automaticamente */
.resources-grid {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
    /* Grid padrão flexível */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* ========================================
   RESOURCE SECTION - AGRUPAMENTO TEMÝTICO
   ======================================== */

/* Wrapper para agrupar múltiplos resources-grid com tema comum */
.resource-section {
    margin: 3rem 0;
}

    /* Modificador para remover margem inferior */
    .resource-section.bottom-aligned {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Modificadores de cor de fundo para resource-section */
    .resource-section.blue {
        background-color: #184772;
        border: 2px solid #4472c4;
        border-radius: 20px;
        padding: 2rem;
    }

    .resource-section.dark-blue {
        background-color: #013365;
        border-radius: 20px;
        padding: 2rem;
    }

    .resource-section.black {
        background-color: #000000;
        border-radius: 20px;
        padding: 2rem;
    }

    .resource-section.darkgray {
        background-color: #0D1117;
        border-radius: 20px;
        padding: 2rem;
    }

    .resource-section.grafite {
        background-color: #242A31;
        border-radius: 20px;
        padding: 2rem;
    }

    .resource-section.white {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 2rem;
        color: #000000 !important;
    }

        /* Força texto preto em todos os elementos dentro de resource-section white */
        .resource-section.white * {
            color: #000000 !important;
        }

        /* Títulos dentro de resource-section white */
        .resource-section.white .resource-subgroup-title {
            color: #4E95D9 !important;
        }

            .resource-section.white .resource-subgroup-title::after {
                display: none;
            }

    /* Ajusta margem dos grids dentro de seções temáticas */
    .resource-section .resources-grid {
        margin-top: 2rem;
    }

        .resource-section .resources-grid:first-child {
            margin-top: 0;
        }

/* Detecção automática baseada no conteúdo dos cards */
/* Para cards overlay - WrapPanel centralizado */
.resources-grid:has(.card--overlay) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza os cards */
    align-items: flex-start; /* Alinha no topo */
    gap: 1rem;
    /* Remove grid - usa flexbox para comportamento WrapPanel */
}

/* Para cards compactos - grid pequeno */
.resources-grid:has(.card--compact) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

/* Para cards grid4 - grid flexível com largura mínima maior */
.resources-grid:has(.card--grid4) {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
}

/* Para cards grandes - stack vertical */
.resources-grid:has(.card--horizontal),
.resources-grid:has(.card--horizontal-reverse),
.resources-grid:has(.card--vertical) {
    display: flex;
    flex-direction: column;
    gap: 0.0rem;
    align-items: center; /* Centraliza cards verticais */
}

/* Para cards estilo Apple (tile) - layout lado a lado com wrap */
.resources-grid:has(.card--tile) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Modificadores específicos - REMOVIDOS: sistema automático detecta automaticamente */

/* Responsividade */
@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

        .resources-grid:has(.card--overlay) {
            gap: 0.5rem;
            /* Mantém flexbox em mobile também */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .resources-grid:has(.card--horizontal),
        .resources-grid:has(.card--horizontal-reverse),
        .resources-grid:has(.card--vertical) {
            gap: 2rem;
        }

        .resources-grid:has(.card--tile) {
            gap: 0.75rem;
        }

}

/* ========================================
   VARIAÇÃO HORIZONTAL DO GRID
   ======================================== */

/* Grid horizontal que distribui itens em larguras iguais */
.resources-grid-horizontal {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: stretch; /* Faz todos os itens terem a mesma altura */
    flex-wrap: nowrap; /* Mantém em linha horizontal */
}

    /* Todos os filhos diretos recebem largura igual */
    .resources-grid-horizontal > * {
        flex: 1; /* Distribui largura igualmente */
        min-width: 0; /* Permite que o conteúdo encolha se necessário */
    }

/* Modificadores de cor são aplicados via resource-section pai */

/* Responsividade - quebra para vertical em telas pequenas */
@media (max-width: 768px) {
    .resources-grid-horizontal {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center; /* Centraliza itens verticais */
    }

        .resources-grid-horizontal > * {
            flex: none; /* Remove distribuição igual em vertical */
            width: 100%; /* Ocupa largura total */
        }
}

/* Header */
.header {
    background: var(--bg-dark-blue);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.logo {
    height: 40px;
    display: block;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: -200px;
    background: white;
    min-width: 600px;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    list-style: none;
    padding: 1rem;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-dark-primary) !important;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
}

    .dropdown-menu a:hover {
        background-color: var(--bg-soft-gray);
        color: var(--color-text-dark-primary) !important;
    }

.nav-menu a {
    text-decoration: none;
    color: var(--color-text-light-primary);
    font-weight: var(--font-weight-medium);
    transition: color 0.3s ease;
}

    .nav-menu a:hover {
        color: var(--color-text-light-tertiary);
    }

/* Hamburger Button */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1002;
}

.hamburger-line {
    display: block;
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger Animation */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Overlay para menu mobile */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* Hero Section */
.hero {
    background: var(--bg-dark-hero);
    color: var(--color-text-light-primary);
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse"><path d="M 5 0 L 0 0 0 5" fill="none" stroke="%231F2126" stroke-width="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
    }

.hero-container {
    width: 95%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-logo {
    width: 120px;
    margin-bottom: 2rem;
}

.hero-title {
    font-family: var(--font-text);
    font-size: clamp(1.8rem, 2vw + 1.3rem, 3rem);
    font-weight: 200 !important;
    margin-bottom: 0.2rem;
    color: #4e95d9;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.2rem, 1.5vw + 1rem, 2rem);
    font-weight: 300;
    color: #e2e8f0;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.4);
}

.hero-description {
    font-size: var(--font-size-body); /* Usando a escala */
    color: var(--color-text-light-tertiary);
    margin-bottom: 3rem;
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: -0.5rem;
}

    .hero-image::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150%;
        height: 150%;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.05) 40%, transparent 60%);
        pointer-events: none;
        z-index: 1;
    }

.hero-screenshot {
    width: 100%;
    max-width: 750px;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

/* Carousel Styles */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .carousel-image.active {
        opacity: 1;
    }

.carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 0.5rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.3);
    cursor: pointer;
    transition: background 0.3s ease;
}

    .dot.active {
        background: var(--color-accent-secondary);
    }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-text-light-primary);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 10;
}

    .carousel-btn:hover {
        background: rgba(0, 0, 0, 0.7);
    }

    .carousel-btn.prev {
        left: -50px;
    }

    .carousel-btn.next {
        right: -50px;
    }

/* Mini Carousel for Cards */
.mini-carousel {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    display: block;
    /* CRÝTICO: Mini-carousel deve se comportar exatamente como uma imagem normal */
}

/* Mini Carousel Minimalista - Sem Controles */
.mini-carousel--clean {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    display: block;
}

    .mini-carousel--clean .mini-carousel-track {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        cursor: default;
        user-select: none;
        transition: none;
    }

    .mini-carousel--clean .mini-carousel-image {
        position: static;
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        border-radius: 8px;
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 1;
        display: block;
    }

        .mini-carousel--clean .mini-carousel-image.active {
            opacity: 1;
            z-index: 2;
        }

        .mini-carousel--clean .mini-carousel-image:not(.active) {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
        }

    /* Esconder todos os controles no carousel minimalista */
    .mini-carousel--clean .mini-carousel-dots,
    .mini-carousel--clean .mini-carousel-btn,
    .mini-carousel--clean .mini-dot,
    .mini-carousel--clean .carousel-btn {
        display: none !important;
    }

    /* Remover efeitos hover no carousel clean */
    .mini-carousel--clean .mini-carousel-track:hover {
        box-shadow: none;
        transform: none;
    }

.mini-carousel:hover .mini-carousel-btn {
    opacity: 1;
}

.mini-carousel-track {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 8px; /* Mesmo border-radius que card__image */
    background: transparent; /* Sem fundo branco */
    box-shadow: none; /* Sem sombra própria */
    cursor: default;
    user-select: none;
    transition: none;
}

    /* Mini carrossel em telas grandes */

    .mini-carousel-track:hover {
        box-shadow: none;
        transform: none;
    }

.mini-carousel-image {
    /* REFORMULAÇÃO TOTAL: Comportar-se como imagem normal */
    position: static; /* MUDANÇA CRÝTICA: Não mais absoluto */
    width: 100%;
    height: auto; /* Altura natural da imagem */
    max-width: 100%; /* Nunca maior que tamanho original */
    object-fit: contain; /* Preserva proporções */
    object-position: center;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    display: block; /* Comportamento de imagem normal */
}

    .mini-carousel-image.active {
        opacity: 1;
        z-index: 2;
    }

    /* Todas as imagens inativas ficam ocultas e não ocupam espaço */
    .mini-carousel-image:not(.active) {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

.mini-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mini-dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .mini-dot:hover {
        background: rgba(37, 99, 235, 0.5);
        transform: scale(1.1);
    }

    .mini-dot.active {
        width: 36px;
        height: 12px;
        border-radius: 6px;
        background: #2563eb;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
    }

/* Mini Carousel Navigation Arrows - REMOVIDAS */
.mini-carousel-btn {
    display: none !important;
}

/* Carrossel de Cards */
.resources-grid--carousel {
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Modificador: Carousel com destaque (cards inativos ficam esmaecidos) */
.resources-grid--carousel--highlight {
    /* Herda comportamento base */
}

    .resources-grid--carousel--highlight .card {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .resources-grid--carousel--highlight .card:not(.active) {
            opacity: 0.4;
            transform: scale(0.95);
        }

        .resources-grid--carousel--highlight .card.active {
            opacity: 1;
            transform: scale(1);
            z-index: 10;
        }

.resources-grid--carousel .resources-grid-track {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    transition: transform 0.5s ease-in-out;
    padding: 0 2rem;
    box-sizing: border-box;
}

/* =================================================================== */
/* COMPONENTE DE FEATURES INTERATIVAS (REATORADO COM VARIÝVEIS CSS)    */
/* =================================================================== */

/* --- O Container Principal com as variáveis do tema padrão (escuro) --- */
.resources-grid--carousel--interactive {
    /* Variáveis de Cor do Tema */
    --bg-main: #000;
    --color-text-primary: #f5f5f7;
    --bg-button: rgba(44, 44, 46, 0.7);
    --border-button: rgba(84, 84, 88, 0.65);
    --bg-button-hover: rgba(58, 58, 60, 0.7);
    --bg-icon: #2c2c2e;
    --border-icon: #4c4c4e;
    --bg-card-active: rgba(28, 28, 30, 0.7);
    --border-card-active: rgba(84, 84, 88, 0.65);
    --bg-arrow: #1d1d1f;
    --border-arrow: #3c3c3e;
    --bg-arrow-hover: #2c2c2e;
    --color-arrow-icon: white;
    --color-plus-icon: white;
    /* Estilos do Container */
    background-color: var(--bg-main);
    color: var(--color-text-primary);
    border-radius: 24px;
    padding: 40px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-areas: "controls media";
    align-items: center;
    gap: 40px;
    height: 520px;
    width: 95%;
    max-width: 2000px;
    position: relative;
}

    /* Ocultamos os cards originais */
    .resources-grid--carousel--interactive > .card {
        display: none;
    }

    /* --- Painéis --- */
    .resources-grid--carousel--interactive .controls-panel {
        grid-area: controls;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: relative;
    }

    .resources-grid--carousel--interactive .media-panel {
        grid-area: media;
        height: 100%;
        width: 100%;
        position: relative;
    }

    /* --- Lista de Features --- */
    .resources-grid--carousel--interactive .feature-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-left: 60px;
    }

    /* Botão de Controle */
    .resources-grid--carousel--interactive .feature-button {
        background-color: var(--bg-button);
        border: 1px solid var(--border-button);
        color: var(--color-text-primary);
        width: 100%;
        padding: 12px 18px;
        border-radius: 99px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        text-align: left;
        font-size: 16px;
        font-family: inherit;
        font-weight: 500;
        backdrop-filter: blur(10px);
    }

        .resources-grid--carousel--interactive .feature-button:hover {
            background-color: var(--bg-button-hover);
        }

    .resources-grid--carousel--interactive .feature-list-item.active .feature-button {
        display: none;
    }

    /* Card Ativo */
    .resources-grid--carousel--interactive .card {
        background-color: var(--bg-card-active);
        border: 1px solid var(--border-card-active);
        color: var(--color-text-primary);
        border-radius: 24px;
        padding: 24px;
        backdrop-filter: blur(20px);
        display: none;
        margin: 0 !important;
        width: 100% !important;
    }

    .resources-grid--carousel--interactive .feature-list-item.active .card {
        display: block;
    }

    /* --- Mídia no Painel Direito --- */
    .resources-grid--carousel--interactive .media-panel .card__media {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

        .resources-grid--carousel--interactive .media-panel .card__media.active {
            opacity: 1;
            pointer-events: auto;
        }

    /* Imagens */
    .resources-grid--carousel--interactive .media-panel .card__image,
    .resources-grid--carousel--interactive .media-panel .mini-carousel-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        border-radius: 18px;
        flex-shrink: 0;
    }

    /* Correção para o Mini-Carrossel */
    .resources-grid--carousel--interactive .media-panel .mini-carousel {
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

/* =================================================================== */
/* LAYOUT RESPONSIVO UNIFICADO E FINAL (TABLET E CELULAR)              */
/* =================================================================== */

@media (max-width: 1024px) {
    .resources-grid--carousel--interactive {
        grid-template-columns: 1fr;
        grid-template-areas: "stage";
        height: 80vh;
        min-height: 500px;
        padding: 0;
        border-radius: 0;
        gap: 0;
    }

        /* Painel de mídia vira o fundo */
        .resources-grid--carousel--interactive .media-panel {
            position: absolute;
            inset: 0;
        }

        /* Painel de controle é a camada de sobreposição */
        .resources-grid--carousel--interactive .controls-panel {
            position: absolute;
            inset: 0;
            pointer-events: none; /* O painel em si não é clicável */
        }

        /* Feature list invisivel no mobile, mas mantendo o card ativo sobre a imagem */
        .resources-grid--carousel--interactive .feature-list {
            position: absolute;
            inset: 0;
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .resources-grid--carousel--interactive .feature-list-item {
            display: none;
        }

            .resources-grid--carousel--interactive .feature-list-item .feature-button {
                display: none;
            }

            .resources-grid--carousel--interactive .feature-list-item.active {
                display: block;
            }

                /* O texto ativo fica na base, sobre a imagem */
                .resources-grid--carousel--interactive .feature-list-item.active .card {
                    position: absolute;
                    bottom: 24px;
                    z-index: 20;
                    pointer-events: all;
                    background: var(--bg-card-active);
                    border: 1px solid var(--border-card-active);
                    backdrop-filter: blur(26px);
                    border-radius: 26px;
                    padding: 20px 28px;
                    text-align: left;
                    line-height: 1.5;
                    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
                    left: 50%;
                    transform: translateX(-50%); /* Centraliza */
                    width: auto; /* Deixa o conteúdo definir a largura inicial */
                    /* GARANTE A MARGEM MÍNIMA DE 10px em cada lado */
                    max-width: calc(100% - 90px);
                    /* Limita a largura máxima em telas maiores (opcional, mas bom ter) */
                    /* Você pode ajustar este valor se 800px for muito grande */
                    max-width: min(800px, calc(100% - 90px));
                }

        /* Navegacao reposicionada ao redor do card ativo */
        .resources-grid--carousel--interactive .feature-nav {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translate(-50%, 0);
            width: calc(100% - 48px);
            padding: 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: none;
            z-index: 22;
            gap: 0;
            height: 48px;
        }

            .resources-grid--carousel--interactive .feature-nav .nav-arrow {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                pointer-events: all;
                background: var(--bg-arrow);
                border: 1px solid var(--border-arrow);
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                transition: background-color 0.2s ease;
            }

                .resources-grid--carousel--interactive .feature-nav .nav-arrow:hover {
                    background-color: var(--bg-arrow-hover);
                }
                .resources-grid--carousel--interactive .feature-nav .nav-arrow.prev {
                    transform: translateX(-60%);
                }

                .resources-grid--carousel--interactive .feature-nav .nav-arrow.next {
                    transform: translateX(60%);
                }

                .resources-grid--carousel--interactive .feature-nav .nav-arrow::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    border: solid var(--color-arrow-icon);
                    border-width: 0 2px 2px 0;
                    display: inline-block;
                    padding: 4px;
                    transform-origin: center;
                }

        /* Seta para ESQUERDA */
        .resources-grid--carousel--interactive .nav-arrow.prev::before {
            transform: translate(-55%, -50%) rotate(135deg);
        }

        /* Seta para DIREITA */
        .resources-grid--carousel--interactive .nav-arrow.next::before {
            transform: translate(-45%, -50%) rotate(-45deg);
        }
}

/* --- ESTILOS DAS SETAS PARA DESKTOP --- */
@media (min-width: 1025px) {
    /* Seta para CIMA no desktop */
    .resources-grid--carousel--interactive .nav-arrow.prev::before {
        transform: translate(-50%, -60%) rotate(-135deg);
    }

    /* Seta para BAIXO no desktop */
    .resources-grid--carousel--interactive .nav-arrow.next::before {
        transform: translate(-50%, -40%) rotate(45deg);
    }
}


/* --- ESTÝGIO 1: DESKTOP (acima de 1024px) --- */
/* Garante que as setas sejam Cima/Baixo apenas no desktop. */
@media (min-width: 1025px) {
    /* Rota??o para criar a seta para CIMA no desktop */
    .resources-grid--carousel--interactive .nav-arrow.prev::before {
        transform: translate(-50%, -60%) rotate(-135deg);
    }

    /* Rotação para criar a seta para BAIXO no desktop */
    .resources-grid--carousel--interactive .nav-arrow.next::before {
        transform: translate(-50%, -40%) rotate(45deg);
    }
}

/* --- Ýcones e Navegação --- */
@media (min-width: 1025px) {
    .resources-grid--carousel--interactive .feature-nav {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 10;
    }

    .resources-grid--carousel--interactive .nav-arrow {
        background-color: var(--bg-arrow);
        border: 1px solid var(--border-arrow);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        transition: background-color 0.2s ease;
    }

        .resources-grid--carousel--interactive .nav-arrow:hover {
            background-color: var(--bg-arrow-hover);
        }

        .resources-grid--carousel--interactive .nav-arrow::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            border: solid var(--color-arrow-icon);
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform-origin: center;
        }

        .resources-grid--carousel--interactive .nav-arrow.prev::before {
            transform: translate(-50%, -60%) rotate(-135deg);
        }

        .resources-grid--carousel--interactive .nav-arrow.next::before {
            transform: translate(-50%, -40%) rotate(45deg);
        }

        .resources-grid--carousel--interactive .nav-arrow.up::before {
            transform: translate(-50%, -60%) rotate(-135deg);
        }

        .resources-grid--carousel--interactive .nav-arrow.down::before {
            transform: translate(-50%, -40%) rotate(45deg);
        }
}
.resources-grid--carousel--interactive .feature-button-icon {
    background-color: var(--bg-icon);
    border: 1px solid var(--border-icon);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

    .resources-grid--carousel--interactive .feature-button-icon::before,
    .resources-grid--carousel--interactive .feature-button-icon::after {
        content: '';
        position: absolute;
        background-color: var(--color-plus-icon);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .resources-grid--carousel--interactive .feature-button-icon::before {
        width: 10px;
        height: 2px;
    }

    .resources-grid--carousel--interactive .feature-button-icon::after {
        width: 2px;
        height: 10px;
    }

.resources-grid--carousel--interactive .card__description strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* =================================================================== */
/* MODIFICADORES DE COR PARA O COMPONENTE INTERATIVO                   */
/* =================================================================== */

/* --- TEMA AZUL --- */
.resources-grid--carousel--interactive.theme-blue {
    --bg-main: #0D182E; /* Azul-noite bem escuro para o fundo */
    --color-text-primary: #EAEFFC; /* Texto branco com um leve tom azulado */
    --bg-button: rgba(31, 84, 221, 0.6); /* O seu azul com 60% de opacidade */
    --border-button: rgba(60, 110, 230, 0.6); /* Borda um pouco mais clara */
    --bg-button-hover: rgba(31, 84, 221, 0.8); /* Azul com mais opacidade no hover */
    --bg-icon: #1A46B8; /* Um tom sólido um pouco mais escuro que o seu azul */
    --border-icon: #1F54DD; /* A borda do ícone com a sua cor exata */
    --bg-card-active: rgba(15, 30, 60, 0.75); /* Fundo do card ativo bem escuro e translúcido */
    --border-card-active: rgba(60, 110, 230, 0.6);
    --bg-arrow: #102244; /* Fundo das setas sólido e escuro */
    --border-arrow: #1F54DD;
    --bg-arrow-hover: #1A46B8;
}

/* --- TEMA CLARO --- */
.resources-grid--carousel--interactive.theme-light {
    --bg-main: #f5f5f7;
    --color-text-primary: #1d1d1f;
    --bg-button: rgba(229, 231, 235, 0.9);
    --border-button: rgba(209, 213, 219, 1);
    --bg-button-hover: rgba(209, 213, 219, 1);
    --bg-icon: #d1d5db;
    --border-icon: #9ca3af;
    --bg-card-active: rgba(255, 255, 255, 0.9);
    --border-card-active: rgba(209, 213, 219, 1);
    --bg-arrow: #e5e7eb;
    --border-arrow: #d1d5db;
    --bg-arrow-hover: #d1d5db;
    --color-arrow-icon: #4b5563;
    --color-plus-icon: #4b5563;
}
    .resources-grid--carousel--interactive.theme-light .feature-list-item.active .card .card__description strong {
        color: var(--color-text-primary); /* Garante que o texto seja #1d1d1f */
    }

/* Cards clonados para navegação circular - invisíveis para o usuário */
.card-clone {
    flex-shrink: 0;
    /* Remover qualquer estilo visual diferente dos originais */
}

/* Remover regras que sobrescrevem o comportamento padrão dos cards */

/* Cards horizontais herdam comportamento padrão */

/* Cards verticais herdam comportamento padrão */

/* Cards overlay e compact herdam comportamento padrão */

/* Cards no carrossel - altura determinada pelo conteúdo/imagem */
.resources-grid--carousel .card {
    flex: none;
    height: auto; /* Altura automática baseada no conteúdo */
    min-height: 0; /* Remove altura mínima forçada */
    max-height: none; /* Remove altura máxima forçada */
}

/* Cards no carousel mantêm tamanho natural mas com larguras controladas */
.resources-grid--carousel .card--horizontal,
.resources-grid--carousel .card--horizontal-reverse {
    width: fit-content; /* Largura baseada no conteúdo */
    min-width: 700px; /* Mínimo menor para permitir tamanho natural */
    max-width: 95vw; /* Máximo baseado na viewport */
}

.resources-grid--carousel .card--vertical {
    width: fit-content; /* Largura baseada no conteúdo */
    min-width: 500px; /* Mínimo menor para permitir tamanho natural */
    max-width: 90vw; /* Máximo baseado na viewport */
}

.resources-grid--carousel .card--overlay {
    width: fit-content; /* Largura baseada na imagem */
    min-width: 450px; /* Mínimo menor */
    max-width: 95vw; /* Máximo baseado na viewport */
}

.resources-grid--carousel .card--compact {
    width: fit-content; /* Largura baseada no conteúdo */
    min-width: 350px; /* Mínimo menor */
    max-width: 85vw; /* Máximo baseado na viewport */
}

/* Botões do carrossel de cards */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #2563eb;
    border: 2px solid #2563eb;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.resources-grid--carousel:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.carousel-btn.prev {
    left: 20px;
}

.carousel-btn.next {
    right: 20px;
}

/* Dots do carrossel de cards */
.carousel-dots {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0 0;
    gap: 0.5rem;
}

.carousel-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .carousel-dot:hover {
        background: rgba(37, 99, 235, 0.5);
        transform: scale(1.2);
    }

    .carousel-dot.active {
        background: #2563eb;
        border: 2px solid rgba(255, 255, 255, 0.8);
        transform: scale(1.2);
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
    }

/* Sistema de Abas com Texto */
.carousel-tabs {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 0 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.carousel-tab {
    padding: 0.5rem 0.75rem;
    background: transparent;
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    position: relative;
}

    .carousel-tab:hover {
        color: #2563eb;
        border-bottom-color: rgba(37, 99, 235, 0.3);
    }

    .carousel-tab.active {
        color: #2563eb;
        font-weight: 600;
        border-bottom-color: #2563eb;
    }

/* Modificador: Carousel com abas (substitui dots por texto) */
.resources-grid--carousel--tabs .carousel-dots {
    display: none; /* Esconde dots quando usar abas */
}

/* Responsivo - mobile com tamanhos mais naturais */
@media (max-width: 768px) {
    .resources-grid--carousel .card--horizontal,
    .resources-grid--carousel .card--horizontal-reverse {
        width: fit-content;
        min-width: 320px; /* Mínimo menor para mobile */
        max-width: 95vw;
    }

    .resources-grid--carousel .card--vertical {
        width: fit-content;
        min-width: 280px; /* Mínimo menor para mobile */
        max-width: 90vw;
    }

    .resources-grid--carousel .card--overlay {
        width: fit-content;
        min-width: 260px; /* Mínimo menor para mobile */
        max-width: 95vw;
    }

    .resources-grid--carousel .card--compact {
        width: fit-content;
        min-width: 240px; /* Mínimo menor para mobile */
        max-width: 85vw;
    }

    .mini-carousel {
        height: auto; /* Altura automática em mobile */
    }

    .mini-carousel-track {
        height: auto; /* JavaScript definirá a altura */
    }

    .resources-grid--carousel .resources-grid-track {
        gap: 1.5rem;
        padding: 0 8px;
    }

    /* Forçar padding menor nos carousels em geral */
    .resources-grid-track {
        padding: 0 8px !important;
        margin: 0 auto !important;
        transform-origin: center !important;
    }

    /* Ajustar padding dos resource-groups */
    .resource-group {
        padding: 0 0;
    }

    /* Ajustar centralização do carousel em mobile */
    .resources-grid--carousel {
        margin: 0 -10px !important;
        width: calc(100% + 20px) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

        .carousel-btn.prev {
            left: 10px;
        }

        .carousel-btn.next {
            right: 10px;
        }
}

/* Before & After Image Slider (Apple Style) */
/* =================================================================== */

/* 1. O CONTAINER PRINCIPAL */
.before-after-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

    .before-after-slider:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* 2. A IMAGEM DEPOIS (A BASE ESTRUTURAL) */
.before-after-slider__image--after {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* 3. O WRAPPER DA IMAGEM "ANTES" (A MÝSCARA DE CORTE) */
.before-after-slider__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    transition: width 0.1s ease-out;
}

/* 4. A IMAGEM ANTES */
.before-after-slider__image--before {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    max-width: none;
    min-width: 320px; /* Mínimo para mobile */
    pointer-events: none;
}

.before-after-slider {
    --slider-width: 100%;
}

.before-after-slider__image--before {
    width: var(--slider-width);
}

/* 5. A ALÇA DO SLIDER  */
.before-after-slider__handle {
    position: absolute;
    top: 0;
    left: 40%;
    width: 3px;
    height: 100%;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100% );
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
}

.before-after-slider:hover .before-after-slider__handle {
    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100% );
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7), 0 0 50px rgba(255, 255, 255, 0.4);
    width: 4px;
}

/* 6. O PEGADOR  */
.before-after-slider__handle-grabber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Regras de @keyframes permanecem as mesmas */
@keyframes nudge {
    0%, 100% {
        transform: translateX(-50%);
    }

    50% {
        transform: translateX(calc(-50% - 10px));
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}


.before-after-slider:hover .before-after-slider__handle-grabber {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
}

/* 7. ÝCONE DE SETAS DUPLAS */
.handle-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.before-after-slider:hover .handle-icon {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* 8. NÚMEROS DAS VERSÕES */
.version-label {
    position: absolute;
    top: 50%;
    font-size: 14px;
    font-weight: 600; /* Um pouco mais forte para legibilidade */
    color: #FFF; /* Branco puro */
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    /* Borda e sombra que criam um efeito de "brilho" */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-50%);
    text-shadow: none;
}

.version-label--left {
    right: 80px;
}

.version-label--right {
    left: 80px;
}

/* Estilo para quando o slider está sendo arrastado */
.before-after-slider.dragging .version-label {
    transform: translateY(-50%) scale(1.05);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

.before-after-slider:hover .version-label {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Responsividade */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .before-after-slider {
        border-radius: 16px;
    }

    .before-after-slider__handle-grabber {
        width: 48px;
        height: 48px;
    }

    .version-label {
        font-size: 12px;
        padding: 4px 8px;
    }

    .version-label--left {
        right: 60px;
    }

    .version-label--right {
        left: 60px;
    }

    .before-after-slider__image--before {
        width: calc(100vw - 40px); /* Ajuste para mobile */
        max-width: 768px;
    }
}

@media (max-width: 480px) {
    .version-label--left {
        right: 50px;
    }

    .version-label--right {
        left: 50px;
    }

    .before-after-slider__image--before {
        width: calc(100vw - 40px);
        max-width: 480px;
    }
}

/* ===== COMPONENTE BEFORE-AFTER REUTILIZÝVEL ===== */
/*
COMO USAR:
1. Uso básico: <div class="before-after" data-before="img1.png" data-after="img2.png"></div>

2. Dentro de card__media: 
   <div class="card__media">
       <div class="before-after" data-before="antes.png" data-after="depois.png"></div>
   </div>

3. Dentro de mini-carousel:
   <div class="mini-carousel">
       <div class="mini-carousel-track">
           <div class="before-after mini-carousel-image active" data-before="antes.png" data-after="depois.png"></div>
           <img src="img2.png" class="mini-carousel-image">
       </div>
   </div>

4. Auto-inicialização: O componente é inicializado automaticamente via JavaScript
   - Detecta mudanças no DOM (carousel, lazy loading, etc.)
   - Suporta múltiplas instâncias na mesma página
   - Labels TQS25/TQS26 são fixos e automáticos

5. Tamanho: Segue automaticamente a maior das duas imagens
6. Performance: CSS otimizado, JavaScript leve, sem redundâncias
*/

.before-after {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    /* Reset completo para evitar herança */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    .before-after:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* Reset universal para todas as imagens do componente */
    .before-after img,
    .before-after__image--after,
    .before-after__image--before {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }

/* Imagem depois (estrutural - define o tamanho) */
.before-after__image--after {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
}

/* Wrapper da imagem antes (máscara de corte) */
.before-after__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    transition: width 0.1s ease-out;
}

/* Imagem antes - CRITICAL: deve manter tamanho FIXO independente do wrapper */
.before-after__image--before {
    /* Posicionamento absoluto dentro do wrapper */
    position: absolute;
    top: 0;
    left: 0;

    /* CRUCIAL: Dimensões FIXAS baseadas no container pai, não no wrapper */
    width: var(--container-width, 100%);
    height: 100%;
    object-fit: contain;
    object-position: center center;

    /* Configurações específicas */
    pointer-events: none;
    max-width: none;
    min-width: unset;

    /* Previne redimensionamento baseado no wrapper */
    flex-shrink: 0;
}

/* Variáveis CSS removidas - dimensões agora controladas via JavaScript para precisão */

/* CÓDIGO NOVO E CORRETO */
.before-after__handle.is-animating {
    animation: nudge 2.5s ease-in-out infinite;
    animation-delay: 1s;
}

.before-after__handle-grabber.is-animating {
    animation: pulse 2.5s ease-in-out infinite;
    animation-delay: 1s;
}

/* Garanta que a animação pare no hover */
.before-after:hover .before-after__handle.is-animating,
.before-after:hover .before-after__handle-grabber.is-animating {
    animation: none;
}

/* Handle do slider */
.before-after__handle {
    position: absolute;
    top: 0;
    left: 40%;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
}

.before-after:hover .before-after__handle {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7), 0 0 50px rgba(255, 255, 255, 0.4);
    width: 4px;
}

/* Pegador do handle */
.before-after__handle-grabber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.before-after:hover .before-after__handle-grabber {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Ýcone de setas duplas */
.before-after__handle-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.before-after:hover .before-after__handle-icon {
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Labels das versões */
.before-after__version-label {
    position: absolute;
    top: 50%;
    font-size: 14px;
    font-weight: 600;
    color: #FFF;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-50%);
    text-shadow: none;
}

.before-after__version-label--left {
    right: 80px;
}

.before-after__version-label--right {
    left: 80px;
}

/* Estados de interação */
.before-after.dragging .before-after__version-label {
    transform: translateY(-50%) scale(1.05);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

.before-after:hover .before-after__version-label {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Estados de arraste */
.before-after.dragging {
    cursor: ew-resize;
}

    .before-after.dragging .before-after__handle-grabber {
        transform: translate(-50%, -50%) scale(1.2);
        background: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.5),
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 40px rgba(255, 255, 255, 0.4);
}

.before-after.dragging .before-after__handle {
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 60px rgba(255, 255, 255, 0.5);
}

/* Responsividade */
@media (max-width: 768px) {
    .before-after {
        border-radius: 16px;
    }

    .before-after__handle-grabber {
        width: 48px;
        height: 48px;
    }

    .before-after__version-label {
        font-size: 12px;
        padding: 4px 8px;
    }

    .before-after__version-label--left {
        right: 60px;
    }

    .before-after__version-label--right {
        left: 60px;
    }

    /* Dimensões responsivas agora controladas via JavaScript */
}

@media (max-width: 480px) {
    .before-after__version-label--left {
        right: 50px;
    }

    .before-after__version-label--right {
        left: 50px;
    }

    /* Dimensões responsivas agora controladas via JavaScript */
}

/* Resources Section */
.resources {
    padding: 0;
    background: #f8fafc;
}

    .resources .container {
        padding-bottom: 0;
    }

.section-header-intro {
    text-align: center;
    margin: 0;
    margin-bottom: -4rem;
        background: linear-gradient(to bottom,
        #000000 0%,
        #536682 45%,
        #536682 84%,
        #364254 100%
    );
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 0 7rem 0;
    color: white;
    position: relative;
}

.section-header-intro__hero {
    margin-bottom: 2rem;
}

.section-header-intro__logo {
    width: 25%;
    height: auto;
    max-width: 300px;
}

.section-header-intro__intro {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    margin-bottom: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

    .section-header-intro__intro b {
        font-weight: 400;
    }

.section-header-intro__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1500px;
    margin: 0 auto 3rem auto;
    padding: 0 2rem;
}

.section-header-intro__column {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: white;
}

    .section-header-intro__column p {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-weight: 300;
    }


.section-header-intro__column--left {
    text-align: left;
}

.section-header-intro__column--right {
    text-align: right;
}

.section-header-intro__outro {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    max-width: 1200px;
    margin: 0 auto;
    color: white;
}

    .section-header-intro__outro b {
        font-weight: 400;
    }

/* Responsive adjustments for section-header-intro */
@media (max-width: 768px) {
    .section-header-intro {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .section-header-intro__columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-header-intro__column--left,
    .section-header-intro__column--right {
        text-align: center;
    }

    .section-header-intro__logo {
        width: 40%;
    }
}

.section-title {
    color: var(--color-text-dark-primary);
    font-size: var(--font-size-section-title);
    margin-bottom: 1rem;
    text-align: center;
}

.section-subtitle {
    font-size: var(--font-size-section-subtitle);
    color: var(--color-text-dark-secondary);
    max-width: 600px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

/* Resource Highlight */
.resource-highlight {
    background: var(--bg-light);
    box-shadow: var(--shadow-card);
    border-radius: 16px;
    padding: 3rem;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.resource-title {
    color: var(--color-text-dark-primary);
    font-size: var(--font-size-highlight-title);
    margin-bottom: 1.5rem;
}

.resource-description {
    font-size: var(--font-size-body); /* Alinhado com o corpo de texto padrão */
    color: var(--color-text-dark-secondary); /* Unificando com a cor secundária */
    margin-bottom: 2rem;
    line-height: 1.7;
}

.resource-benefits {
    list-style: none;
}

    .resource-benefits li {
        padding: 0.5rem 0;
        position: relative;
        padding-left: 2rem;
        color: var(--color-text-dark-primary)
    }

        .resource-benefits li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--color-accent-green);
            font-weight: bold;
        }

.resource-image {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--shadow-card-hover);
}

/* Resource Groups */
.resource-group {
    margin-bottom: 6rem;
    padding: 0;
}

    .resource-group:last-child {
        margin-bottom: 0;
    }

    .resource-group:first-child {
        margin-top: -4rem !important;
        position: relative;
        z-index: 10;
    }

    /* Resource Group Dark - Fundo totalmente preto */
    .resource-group.dark {
        background: var(--bg-dark-section);
        color: var(--color-text-light-primary);
        border-radius: 0;
        padding: 4rem 0;
        margin: 4rem 0 0 0;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    /* Resource Group Dark Blue - Fundo azul escuro */
    .resource-group.dark-blue {
        background: #163E64;
        color: var(--color-text-light-primary);
        border-radius: 0;
        padding: 4rem 0;
        margin: 4rem 0 0 0;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    /* Resource Group Darker Blue - Fundo azul mais saturado */
    .resource-group.darker-blue {
        background: #002142;
        color: var(--color-text-light-primary);
        border-radius: 0;
        padding: 4rem 0;
        margin: 4rem 0 0 0;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }

    .resource-group h2 {
        margin-top: 3rem;
        margin-bottom: 0;
    }

    .resource-group.dark-blue h2 {
        color: #ffffff;
    }

    .resource-group.darker-blue h2 {
        color: #ffffff;
    }

/* Footnotes - Notas de rodapé que ficam no final dos cards */
.footnotes {
    font-size: 0.875rem;
    color: #888888;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

/* Resource Group Light Ice - Azul mais frio que vai ao branco mais rápido */
.resource-group.light-ice {
    background: linear-gradient(180deg, #DCEEFF 0%, #F2F8FF 40%, #FFFFFF 100%);
    color: #1d1d1f;
    border-radius: 0;
    padding: 4rem 0;
    margin: 4rem 0 0 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Resource Group Salmon - Fundo salmão/bege suave */
.resource-group.salmon {
    background: #C7BEB5;
    color: #1d1d1f;
    border-radius: 0;
    padding: 4rem 0;
    margin: 4rem 0 6rem 0; /* margin-bottom padrão de 6rem */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

    /* Remove margin-bottom quando salmon contém scroll-fade */
    .resource-group.salmon:has(.resources-grid--scroll-fade) {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .resource-group.salmon h2 {
        color: #1d1d1f;
    }

    .resource-group.salmon .resource-group-title {
        color: #1d1d1f;
    }

    .resource-group.salmon .resource-group-description {
        color: #3d3d3f;
    }

    .resource-group.salmon .resource-subgroup-title {
        color: #8B7355; /* Tom mais escuro de salmão para contraste */
    }

        /* Linha decorativa dos títulos em salmon */
        .resource-group.salmon .resource-group-title::after,
        .resource-group.salmon .resource-subgroup-title::after {
            background: linear-gradient(135deg, #8B7355, #A89080);
        }

    /* Ajustar cores dos cards dentro do salmon */
    .resource-group.salmon .card--transparent .card__title,
    .resource-group.salmon .card--salmon .card__title {
        color: #1d1d1f;
    }

    .resource-group.salmon .card--transparent .card__description,
    .resource-group.salmon .card--salmon .card__description {
        color: #3d3d3f;
    }

    /* Strong tags em salmon */
    .resource-group.salmon strong {
        color: #6B5345; /* Tom escuro para destaque */
        font-weight: 700;
    }



    /* Eliminar margem entre seções adjacentes com fundo */
    .resource-group.dark + .resource-group.dark,
    .resource-group.dark-blue + .resource-group.dark,
    .resource-group.darker-blue + .resource-group.dark,
    .resource-group.dark + .resource-group.dark-blue,
    .resource-group.dark + .resource-group.darker-blue,
    .resource-group.dark-blue + .resource-group.dark-blue,
    .resource-group.dark-blue + .resource-group.darker-blue,
    .resource-group.darker-blue + .resource-group.dark-blue,
    .resource-group.darker-blue + .resource-group.darker-blue,
    .resource-group.light-ice + .resource-group.dark,
    .resource-group.light-ice + .resource-group.dark-blue,
    .resource-group.light-ice + .resource-group.darker-blue,
    .resource-group.light-lavander + .resource-group.dark,
    .resource-group.light-lavander + .resource-group.dark-blue,
    .resource-group.light-lavander + .resource-group.darker-blue,
    .resource-group.dark + .resource-group.light-ice,
    .resource-group.dark-blue + .resource-group.light-ice,
    .resource-group.darker-blue + .resource-group.light-ice,
    .resource-group.light-ice + .resource-group.light-ice,
    .resource-group.dark + .resource-group.light-lavander,
    .resource-group.dark-blue + .resource-group.light-lavander,
    .resource-group.darker-blue + .resource-group.light-lavander,
    .resource-group.light-lavander + .resource-group.light-lavander,
    .resource-group.salmon + .resource-group.salmon,
    .resource-group.salmon + .resource-group.dark,
    .resource-group.salmon + .resource-group.dark-blue,
    .resource-group.dark + .resource-group.salmon,
    .resource-group.dark-blue + .resource-group.salmon {
        margin-top: 0;
    }

    /* Container interno para manter o conteúdo centralizado */
    .resource-group > *:not(.theme-background),
    .resource-group.dark > *:not(.theme-background),
    .resource-group.dark-blue > *:not(.theme-background),
    .resource-group.darker-blue > *:not(.theme-background),
    .resource-group.light-ice > *:not(.theme-background),
    .resource-group.light-lavander > *:not(.theme-background),
    .resource-group.salmon > *:not(.theme-background),
    .resource-group.theme-ai > *:not(.theme-background) {
        width: 95%;
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }


/* Ajustar cores dos títulos dentro do resource-group dark, dark-blue e darker-blue */
.resource-group.dark .resource-group-title,
.resource-group.dark-blue .resource-group-title,
.resource-group.darker-blue .resource-group-title {
    color: var(--color-text-light-primary);
}

.resource-group.dark .resource-group-description,
.resource-group.dark-blue .resource-group-description,
.resource-group.darker-blue .resource-group-description {
    color: var(--color-text-light-secondary);
}

.resource-group.dark .resource-subgroup-title,
.resource-group.dark-blue .resource-subgroup-title,
.resource-group.darker-blue .resource-subgroup-title {
    color: var(--color-highlight-yellow);
}

    /* Ajustar linha decorativa dos títulos */
    .resource-group.dark .resource-group-title::after,
    .resource-group.dark .resource-subgroup-title::after,
    .resource-group.dark-blue .resource-group-title::after,
    .resource-group.dark-blue .resource-subgroup-title::after,
    .resource-group.darker-blue .resource-group-title::after,
    .resource-group.darker-blue .resource-subgroup-title::after {
        background: linear-gradient(135deg, #3b82f6, #60a5fa);
    }

/* Ajustar cores dos cards transparentes dentro do dark, dark-blue e darker-blue */
.resource-group.dark .card--transparent .card__title,
.resource-group.dark-blue .card--transparent .card__title,
.resource-group.darker-blue .card--transparent .card__title {
    color: #ffffff;
}

.resource-group.dark .card--transparent .card__description,
.resource-group.dark-blue .card--transparent .card__description,
.resource-group.darker-blue .card--transparent .card__description {
    color: #e2e8f0;
}

.resource-group-title {
    text-align: center;
    color: var(--color-text-dark-primary);
    font-size: var(--font-size-section-title);
    margin-bottom: 1rem;
    padding-top: 3rem;
    position: relative;
}

.resource-group:first-child .resource-group-title {
    padding-top: 0 !important;
}

.resource-group-title::after {
    content: '';
    display: none;
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.resource-group-description {
    text-align: center;
    font-size: var(--font-size-section-subtitle);
    color: var(--color-text-dark-secondary);
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

.resource-subgroup-title {
    color: var(--color-text-dark-secondary);
    font-size: var(--font-size-subgroup-title);
    font-weight: var(--font-weight-semibold);
    margin: 2.5rem 0 1.5rem 0;
    text-align: center;
    position: relative;
    padding: 0;
}

    .resource-subgroup-title::after {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        margin: 0.75rem auto 0;
        border-radius: 2px;
    }

.resource-subgroup-title--left {
    text-align: left !important;
}

    .resource-subgroup-title--left::after {
        margin: 0.75rem 0 0 0 !important;
    }

/* =================================================================== */
/* ESTILOS PARA O SUBGRUPO DE RECURSOS COM FUNDO ESCURO                */
/* =================================================================== */

.resource-subgroup-wrapper {
    /* Espaçamento para separar visualmente os subgrupos */
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.resource-subgroup--dark {
    background: #000; /* Fundo preto sólido, como pedido */
    color: #e2e8f0; /* Cor de texto padrão clara */
    border-radius: 24px; /* Bordas arredondadas para um visual suave */
    padding: 4rem 0; /* Espaçamento interno vertical */
}

    /* Ajusta as cores dos títulos e textos dentro do subgrupo escuro */
    .resource-subgroup--dark .resource-subgroup-title,
    .resource-subgroup--dark .resource-group-description,
    .resource-subgroup--dark .card__description,
    .resource-subgroup--dark .card--transparent .card__description p {
        color: white;
    }

    .resource-subgroup--dark .card--transparent strong {
        filter: brightness(1.2);
    }

/* Strong tags in dark resource groups */
.resource-group.dark strong,
.resource-group.dark-blue strong,
.resource-group.darker-blue strong {
    color: #ffff00;
}


/* Classe para destaque azul */
.highlight-blue {
    color: #46b1e1;
    font-size: 1.1em;
    font-weight: 600;
}

.resource-subgroup--dark .resource-subgroup-title::after {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .resource-subgroup--dark {
        padding: 3rem 1rem;
        border-radius: 16px;
    }
}


/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Sistema de grid automático - não precisa de fallbacks específicos */

/* Variação vertical do card intermediário */

.feature-tag {
    background: #2563eb;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.resource-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .resource-icon img {
        width: 32px;
        height: 32px;
        filter: brightness(0) invert(1);
    }

/* Acquisition Section */
.acquisition {
    padding: 3rem 0 6rem 0;
    background: linear-gradient(135deg, var(--bg-dark-blue) 0%, var(--bg-dark-card) 100%);
    color: var(--color-text-light-primary);
}

    .acquisition .section-title,
    .acquisition .section-subtitle {
        color: white;
    }

.pricing-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Variação com fundo claro */
.pricing-card-light {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

    .pricing-card-light .pricing-title {
        color: #1e293b;
    }

    .pricing-card-light .pricing-subtitle {
        color: #64748b;
    }

    .pricing-card-light .pricing-features li {
        color: #374151;
    }

        .pricing-card-light .pricing-features li::before {
            color: #22c55e;
        }

.pricing-recommended {
    border: 2px solid var(--color-accent-secondary);
    transform: scale(1.05);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent-secondary);
    color: var(--color-text-light-primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.pricing-subtitle {
    color: #cbd5e1;
}

.pricing-features {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

    .pricing-features ul {
        list-style: none;
        margin-bottom: 2rem;
        flex-grow: 1;
    }

    .pricing-features li {
        padding: 0.75rem 0;
        position: relative;
        padding-left: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

        .pricing-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #22c55e;
            font-weight: bold;
        }

.pricing-cta {
    text-align: center;
}

.contact-info {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 2rem;
}

    .contact-info h3 {
        margin-bottom: 1.5rem;
    }

.contact-options {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.contact-item {
    color: #e2e8f0;
}

/* Updates Section */
.updates {
    padding: 6rem 0;
    background: var(--bg-soft-gray);
}

.updates-timeline {
    max-width: 800px;
    margin: 0 auto;
}

.update-group {
    margin-bottom: 3rem;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.update-version {
    color: var(--color-accent-secondary);
    border-bottom: 2px solid var(--color-text-light-secondary);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
}

.update-list {
    display: grid;
    gap: 1rem;
}

.update-item {
    padding: 1rem;
    border-left: 4px solid var(--color-accent-secondary);
    background: var(--bg-soft-gray);
    border-radius: 0 8px 8px 0;
}

    .update-item h4 {
        color: #1e293b;
        margin-bottom: 0.5rem;
    }

    .update-item p {
        color: #64748b;
        margin: 0;
    }

/* Footer */
.footer {
    background: #1e293b;
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.footer-logo {
    height: 32px;
}

.footer-info p {
    margin: 0.5rem 0 0 0;
    color: #cbd5e1;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

    .footer-links a {
        color: #cbd5e1;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: white;
        }

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    color: #94a3b8;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    position: relative;
    margin: 5% auto;
    width: 90%;
    max-width: 800px;
}

.modal-close {
    position: absolute;
    right: -40px;
    top: -40px;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Scroll Animations - Faster */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .fade-in-left.visible {
        opacity: 1;
        transform: translateX(0);
    }

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .fade-in-right.visible {
        opacity: 1;
        transform: translateX(0);
    }

/* Scroll-triggered Fade - Controle Preciso */
.resources-grid--scroll-fade {
    position: relative;
    margin-bottom: -4rem; /* ADICIONE ESTA LINHA */
    /* Altura proporcional: base de 200vh + 50vh por card adicional */
    /* Calculado dinamicamente via JS */
}

/* Remove margem de QUALQUER resource-group que contém scroll-fade */
.resource-group:has(.resources-grid--scroll-fade),
.resource-group.dark:has(.resources-grid--scroll-fade),
.resource-group.dark-blue:has(.resources-grid--scroll-fade),
.resource-group.darker-blue:has(.resources-grid--scroll-fade),
.resource-group.light-ice:has(.resources-grid--scroll-fade),
.resource-group.light-lavander:has(.resources-grid--scroll-fade),
.resource-group.theme-ai:has(.resources-grid--scroll-fade),
.resource-group.salmon:has(.resources-grid--scroll-fade) {
    margin-bottom: 0 !important; /* ✅ Remove margem inferior do grupo */
}

/* Garante que não há padding inferior também */
.resources-grid--scroll-fade {
    padding-bottom: 0 !important;
}

    /* Remove qualquer margem do último elemento dentro do scroll-fade */
    .resources-grid--scroll-fade > *:last-child {
        margin-bottom: 0 !important;
    }

/* Remove margem do resource-group seguinte quando precedido por scroll-fade */
.resource-group:has(.resources-grid--scroll-fade) + .resource-group,
.resource-group:has(.resources-grid--scroll-fade) + .resource-group.dark,
.resource-group:has(.resources-grid--scroll-fade) + .resource-group.dark-blue,
.resource-group:has(.resources-grid--scroll-fade) + .resource-group.theme-ai,
.resource-group:has(.resources-grid--scroll-fade) + .resource-group.salmon {
    margin-top: 0 !important;
}

/* Container fixo no centro da tela */
.scroll-fade-sticky {
    position: sticky;
    top: 0;
    height: auto; /* Altura dinâmica definida via JS */
    min-height: 200px; /* Altura mínima para evitar colapso */
    width: 100%;
    max-width: none; /* Remove limitação de largura para cards overlay */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Sem padding para cards overlay ocuparem 100% */
    z-index: 10;
    transition: height 0.3s ease-out; /* Transição suave entre alturas */
}

    /* Padding apenas para cards não-overlay */
    .scroll-fade-sticky:not(:has(.card--overlay)) {
        padding: 0 20px;
    }

    /* Limitação apenas para cards não-overlay */
    .scroll-fade-sticky:not(:has(.card--overlay)) {
        max-width: 1200px;
    }

/* Ýrea do conteúdo */
.scroll-fade-content {
    position: relative;
    width: 100%;
    min-height: 200px; /* Altura mínima para evitar colapso */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease-out; /* Transição suave entre alturas */
    /* Altura será definida dinamicamente via JS */
}

.has-blur-effect .blur-pane {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

/* Anula o efeito de blur e fundo APENAS nos cards de texto do scroll-fade com blur */
.has-blur-effect .scroll-fade-content .card:not(:first-of-type) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

    /* Garante que o texto seja branco APENAS nos cards que rolam sobre o blur */
    .has-blur-effect .scroll-fade-content .card:not(:first-of-type) .card__content {
        color: white;
    }

.scroll-fade-content .card:not(:first-of-type) {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50px);
}

    /* Cards do scroll fade - Sistema de cross-fade alinhado */
.scroll-fade-content .card {
    opacity: 1;
    pointer-events: none;
    transform: translateY(0);
    transition: none;
    z-index: 1;
    margin-bottom: 0; /* ✅ Remove margem inferior */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

        /* Primeiro card fixo como fundo (paralax) */
        .scroll-fade-content .card:first-child {
            position: absolute;
            opacity: 1 !important;
            z-index: 1 !important;
            pointer-events: none;
        }

        /* Cards que rolam por cima (não o primeiro) precisam de transition suave */
        .scroll-fade-content .card:not(:first-child) {
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        }

    /* Cards overlay no scroll-fade ocupam 100% da largura */
    .scroll-fade-content .card--overlay {
        width: 100vw !important; /* Largura total da viewport */
        height: fit-content; /* Altura se ajusta ao conteúdo */
        max-height: calc(100vh - var(--header-height)); /* ✅ Limita altura máxima */
        min-width: unset !important; /* Remove min-width do carousel */
        max-width: none !important; /* Remove limitações de max-width */
        flex-shrink: 0; /* Não encolhe */
        display: flex; /* ✅ Flex para centralizar imagem */
        align-items: center; /* Centraliza verticalmente */
        justify-content: center; /* Centraliza horizontalmente */
        margin: 0; /* Remove margens */
        padding: 0; /* Remove padding */
        overflow: hidden; /* ✅ Esconde partes que excedem os limites */
        position: relative; /* Para posicionamento da imagem */
    }

        /* Imagem adapta-se: largura 100% OU altura limitada (o que couber melhor) */
        .scroll-fade-content .card--overlay .card__image {
            width: 100%; /* Largura total do container */
            min-width: 120%; /* Força recorte horizontal mais agressivo */
            max-width: none; /* Remove limitação */
            height: auto; /* ✅ Altura automática */
            max-height: calc(100vh - var(--header-height)); /* ✅ Limita pela altura disponível */
            min-height: 50vh; /* Altura mínima para garantir boa visualização */
            flex-shrink: 0; /* Não encolhe */
            object-fit: cover; /* ✅ Cobre área permitindo recorte horizontal controlado */
            object-position: center; /* Centraliza - permite recorte uniforme nas laterais */
            display: block; /* Remove espaçamento inline */
            border-radius: 0; /* Remove border-radius para efeito imersivo */
            margin-left: -10%; /* Centraliza a imagem recortada */
        }

    /* Correção específica para card--overlay-right no scroll-fade */
    .scroll-fade-content .card--overlay-right .card__content {
        left: 55%; /* Posiciona mais à direita */
        right: 1.5rem; /* Margem direita reduzida */
        width: auto; /* Largura automática baseada no conteúdo */
        max-width: 36%; /* Limita largura para não sobrepor muito a imagem */
    }

    /* Título mais alto no scroll-fade para evitar sobreposição */
    .scroll-fade-content .card--overlay-right > .card__title {
        top: clamp(0.5rem, 2vw, 1.5rem);
    }

    /* Cards não-overlay mantêm comportamento original */
    .scroll-fade-content .card:not(.card--overlay) {
        width: 100%;
    }

    .scroll-fade-content .card.active {
        pointer-events: all;
        position: relative;
        opacity: 1;
        z-index: 2;
    }

    .scroll-fade-content .card:not(.active) {
        position: absolute;
        opacity: 1;
        z-index: 1;
    }

    .scroll-fade-content .card.fade-out {
        opacity: 0 !important;
        transition: opacity 0.25s ease-out; /* Transição balanceada */
        z-index: 3 !important;
    }


/* Indicador sutil de progresso - REMOVIDO (mantido apenas em carousels tradicionais) */
/* .scroll-fade-progress {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.scroll-fade-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

    .scroll-fade-dot.active {
        background: #3b82f6;
        transform: scale(1.3);
    } */

@media (max-width: 480px) {
    .scroll-fade-content .card--overlay {
        max-height: calc(100vh - var(--header-height-mobile)); /* Header mobile pequeno */
    }

        .scroll-fade-content .card--overlay .card__image {
            width: 100%; /* Largura total */
            max-width: none; /* Remove limitação */
            height: auto; /* ✅ Altura automática */
            max-height: calc(100vh - var(--header-height-mobile)); /* Limita altura */
            min-height: 35vh; /* Altura mínima mobile pequeno */
            object-fit: cover; /* Permite recorte horizontal */
            object-position: center; /* Centraliza recorte */
        }

    .scroll-fade-content .card--overlay-right .card__content {
        left: 50%; /* Ajusta para mobile pequeno */
        right: 0.5rem;
        max-width: 50%;
        padding: 1.5rem;
    }

    /* Ocultar versão desktop em mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Mostrar versão mobile apenas em mobile */
    .show-on-mobile {
        display: block !important;
    }

    /* Suporte para resources-grid com show-on-mobile */
    .resources-grid.show-on-mobile {
        display: grid !important;
    }

    /* Exceção: se contém cards overlay, mantém flexbox centralizado */
    .resources-grid.show-on-mobile:has(.card--overlay) {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Ocultar versão mobile em desktop/tablet */
@media (min-width: 481px) {
    .show-on-mobile {
        display: none !important;
    }

    /* Suporte para resources-grid com show-on-mobile */
    .resources-grid.show-on-mobile {
        display: none !important;
    }
}

/* Modificador para imagem ocupar 100% da largura da tela */
.card--full-width-image {
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
}

    .card--full-width-image .card__media {
        width: 100vw !important;
        max-width: none !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 0 !important;
    }

    .card--full-width-image .card__image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        object-fit: contain;
        object-position: center;
        border-radius: 0 !important;
    }

/* Exceção para resources-grid que contém card full-width */
.resource-group.salmon .resources-grid:has(.card--full-width-image),
.resource-group .resources-grid:has(.card--full-width-image) {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

/* Carousel com Efeito Fade - Original (manter para outros usos) */
.resources-grid--carousel-fade {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    transition: height 0.6s ease-in-out;
}

    .resources-grid--carousel-fade .card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transition: opacity 0.6s ease-in-out;
        pointer-events: none;
    }

        .resources-grid--carousel-fade .card.active {
            opacity: 1;
            pointer-events: all;
        }

        .resources-grid--carousel-fade .card.fade-out {
            opacity: 0;
        }

/* Controles do Carousel Fade */
.carousel-fade-controls {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    align-items: center;
    z-index: 10;
}

.carousel-fade-btn {
    background: rgba(59, 130, 246, 0.8);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

    .carousel-fade-btn:hover {
        background: rgba(59, 130, 246, 1);
        transform: scale(1.1);
    }

.carousel-fade-dots {
    display: flex;
    gap: 0.5rem;
}

.carousel-fade-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .carousel-fade-dot.active {
        background: #3b82f6;
        transform: scale(1.2);
    }

/* Auto-play indicator */
.carousel-fade-progress {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    overflow: hidden;
}

.carousel-fade-progress-bar {
    height: 100%;
    background: #3b82f6;
    width: 0%;
    transition: width linear;
    border-radius: 1px;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .fade-in-up.visible {
        opacity: 1;
        transform: translateY(0);
    }

.fade-in-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .fade-in-scale.visible {
        opacity: 1;
        transform: scale(1);
    }

/* Staggered animations for groups */
.stagger-delay-1 {
    transition-delay: 0.05s;
}

.stagger-delay-2 {
    transition-delay: 0.1s;
}

.stagger-delay-3 {
    transition-delay: 0.15s;
}

.stagger-delay-4 {
    transition-delay: 0.2s;
}

.stagger-delay-5 {
    transition-delay: 0.25s;
}

.stagger-delay-6 {
    transition-delay: 0.3s;
}

/* Smooth transitions for better performance */
.fade-in, .fade-in-left, .fade-in-right, .fade-in-up, .fade-in-scale {
    will-change: opacity, transform;
}

/* Responsive */
@media (max-width: 768px) {
    /* Ajusta padding do body para compensar header fixo (40px logo + 32px padding) */
    body {
        padding-top: 72px;
    }

    /* Reduzir margens horizontais em mobile - abordagem radical */
    .container {
        padding: 0 2px !important;
        margin: 0 -10px !important;
        width: calc(100% + 20px) !important;
    }

    .nav-container {
        padding: 1rem 2px !important;
        margin: 0 -10px !important;
        width: calc(100% + 20px) !important;
    }

    /* Reduzir padding horizontal dos resource-groups em mobile */
    .resource-group > *:not(.theme-background),
    .resource-group.dark > *:not(.theme-background),
    .resource-group.dark-blue > *:not(.theme-background),
    .resource-group.darker-blue > *:not(.theme-background),
    .resource-group.light-ice > *:not(.theme-background),
    .resource-group.light-lavander > *:not(.theme-background),
    .resource-group.salmon > *:not(.theme-background),
    .resource-group.theme-ai > *:not(.theme-background) {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .resource-group:is(.dark, .dark-blue, .darker-blue, .terra-batida, .salmon, .aco-escovado, .light-lavander, .theme-ai, .azul-tqs-profundo, .azul-profundo-apple, .azul-vibrante, .grafite, .azul-meia-noite, .purpura-profundo, .entardecer-dourado, .cinza-espacial, .amarelo-manteiga, .cor-gelo, .laranja-discreto, .verde-menta, .rosa-quartzo, .prata-suave, .ceu-claro, .luz-estelar, .aurora-boreal, .iridescente, .supernova, .sonho-verao, .oceano-calmo) > *:not(.theme-background) {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Ajustar botão Adquirir em mobile */
    .nav-container .btn {
        margin-right: 12px !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        min-width: auto !important;
    }

    /* Cards devem ocupar mais espaço */
    .card {
        margin-left: -8px !important;
        margin-right: -8px !important;
        width: calc(100% + 16px) !important;
    }

    .hero-container {
        gap: 0.3rem;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-title {
        font-size: clamp(1.8rem, 2vw + 1.3rem, 3rem);
        font-weight: 200;
    }

    .resource-highlight {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    /* Força a ordem: conteúdo primeiro, mídia depois - com alta especificidade */

    .pricing-options {
        grid-template-columns: 1fr;
    }

    .pricing-recommended {
        transform: none;
    }

    .contact-options {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    /* Mostrar hamburger e esconder menu desktop */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 320px;
        height: 100vh;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        flex-direction: column;
        padding: 80px 1.5rem 2rem;
        transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1001;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

        .nav-menu.active {
            left: 0;
        }

        .nav-menu li {
            margin-bottom: 1rem;
        }

        .nav-menu .dropdown {
            width: 100%;
        }

        .nav-menu .dropdown-toggle {
            width: 100%;
            padding: 1rem 0.75rem 0.5rem;
            justify-content: flex-start;
            border-radius: 0;
            transition: none;
            cursor: default;
            pointer-events: none;
            font-weight: 700;
            font-size: 1.2rem;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 0.5rem;
        }

        /* Esconder a seta no mobile */
        .nav-menu .dropdown-arrow {
            display: none;
        }

        /* Links simples no menu mobile */
        .nav-menu > li > a:not(.dropdown-toggle) {
            display: block;
            width: 100%;
            padding: 0.75rem;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            text-decoration: none;
            color: white;
        }

            .nav-menu > li > a:not(.dropdown-toggle):hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

        /* Dropdown responsivo em mobile - sempre expandido */
        .nav-menu .dropdown-menu {
            position: static;
            min-width: auto;
            max-width: none;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            margin-top: 0.5rem;
            margin-bottom: 2rem;
            padding: 0.4rem;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-auto-flow: row;
            gap: 0.1rem;
        }

            .nav-menu .dropdown-menu a {
                color: rgba(255, 255, 255, 0.9) !important;
                padding: 0.4rem 0.75rem;
                border-radius: 6px;
                font-size: 0.9rem;
                line-height: 1.3;
                transition: all 0.2s ease;
            }

                .nav-menu .dropdown-menu a:hover {
                    background-color: rgba(255, 255, 255, 0.2) !important;
                    color: white !important;
                    transform: translateX(4px);
                }

    /* Carousel responsive - esconder setas em mobile */
    .carousel-btn {
        display: none;
    }

    .mini-carousel-btn {
        display: none;
    }

    .carousel-track {
        height: 200px;
    }

    /* Ajustes para mini-carrossel em mobile - aproveitando melhor o espaço */
    .mini-carousel {
        height: auto; /* Altura baseada no conteúdo */
        flex: none;
    }

    .mini-carousel-track {
        height: auto; /* JavaScript definirá a altura */
    }

    /* Ajuste das imagens dentro do carrossel em mobile - ocupar mais espaço */

    /* Garantir que o container do carrossel use todo espaço disponível */

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

/* ALTERNÂNCIA DEFINITIVA - ÚLTIMA PALAVRA - apenas em desktop */
@media (min-width: 769px) {

    /* Manter layout vertical mesmo em desktop */

}

/* Estilo para teclas de atalho */
kbd {
    background-color: var(--bg-medium-gray);
    border: 1px solid #d1d1d6; /* Mantido por ser um cinza específico */
    color: var(--color-text-dark-primary);
    border-radius: 6px; /* Bordas um pouco mais arredondadas */
    padding: 4px 8px; /* Mais espaçamento interno */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Usa a fonte do sistema */
    font-weight: 500; /* Peso médio, não totalmente negrito */
}

.gradient-text {
    font-size: 1.5rem;
    background: var(--gradient-multicolor);
    /* Ordem: Azul -> Verde -> Amarelo -> Vermelho */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CLASSE AUXILIAR PARA FORÇAR LAYOUT EM LINHA */
.resources-grid--row {
    flex-direction: row !important; /* Garante que os itens fiquem em linha */
    flex-wrap: wrap; /* Permite que quebrem para a próxima linha */
    justify-content: center; /* Centraliza o conjunto de cards */
    align-items: stretch; /* Faz os cards terem a mesma altura */
}

/* =================================================================== */
/* ESTILOS PARA CARDS COM BORDA EM GRADIENTE E CENTRO BRANCO         */
/* =================================================================== */

.card--aura-azul {
    background-color: white;
    box-shadow: inset 0 0 20px 5px #0095E1;
    color: #1d1d1f;
}

.card--aura-verde {
    background-color: white;
    box-shadow: inset 0 0 20px 5px #73C578;
    color: #1d1d1f;
}

.card--aura-rosa {
    background-color: white;
    box-shadow: inset 0 0 20px 5px #FF80FF;
    color: #1d1d1f;
}

/* Spacing div responsivo - só aplica altura em telas largas */
.spacing-div {
    height: 0; /* Por padrão, sem altura */
}

/* Apenas em telas largas o suficiente para layout horizontal */
@media (min-width: 769px) {
    .spacing-div {
        height: 150px;
    }
}

/* Card com imagem alinhada na base - modificador específico */
.card.bottom-aligned {
    margin-bottom: 0 !important;
}

/* Remove padding-bottom dos cards horizontais quando bottom-aligned */
.card--horizontal.bottom-aligned,
.card--horizontal-reverse.bottom-aligned {
    padding-bottom: 0 !important;
}

/* Remove todas as margens verticais do card */
.card.no-vertical-margin {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove padding vertical dos cards horizontais quando no-vertical-margin */
.card--horizontal.no-vertical-margin,
.card--horizontal-reverse.no-vertical-margin {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.card.bottom-aligned .card__media {
    margin-top: auto;
    margin-bottom: 0;
}

.card.bottom-aligned .card__image {
    margin-bottom: 0;
    display: block;
}



/* Scroll Fade Variant - Before/After Compare */
.resources-grid--scroll-fade[data-scroll-variant="before-after"] {
    position: relative;
    min-height: 200vh;
}

.scroll-compare-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    z-index: 1;
}

.scroll-compare__frame {
    position: relative;
    width: min(90vw, 1000px);
    border-radius: 24px;
    max-height: 90vh;
    overflow: hidden;
    background: #1d1d1f;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.scroll-compare__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #111;
    transition: clip-path 0.35s ease-out;
    will-change: clip-path;
}

.scroll-compare__image--after {
    clip-path: inset(var(--reveal, 100%) 0 0 0);
}

.scroll-compare__label {
    position: absolute;
    top: 24px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f5f5f7;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.scroll-compare__label--before {
    left: 24px;
}

.scroll-compare__label--after {
    right: 24px;
}

@media (max-width: 1024px) {
    .scroll-compare__frame {
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .resources-grid--scroll-fade[data-scroll-variant="before-after"] {
        min-height: 180vh;
    }

    .scroll-compare__frame {
        aspect-ratio: 3 / 4;
        border-radius: 16px;
    }

    .scroll-compare__label {
        top: 16px;
        font-size: 0.75rem;
        padding: 4px 12px;
    }
}


/* ========================================
      SEÇÃO DE INTRODUÇÃO
   ======================================== */

.intro-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.intro-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.intro-text {
    position: absolute;
    color: var(--color-text-light-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--font-size-body);
    font-weight: 300;
    line-height: 1.6;
    text-align: left;
    background: rgba(0, 0, 0, 0.7);
    padding: 3rem 1.5rem;
    backdrop-filter: blur(10px);
}

.intro-text-top {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    transform: none;
    padding: 4rem 1.5rem;
    background: rgba(21, 48, 65, 0.8);
}

.intro-text-left {
    top: 0;
    left: 0;
    width: 50%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.intro-text-right {
    top: 0;
    right: 0;
    width: 50%;
    text-align: right;
    height: 200px;
    display: flex;
    align-items: center;
    padding-top: 100px;
    justify-content: flex-end;
}

.intro-text-center {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;
    font-size: calc(var(--font-size-body) * 1.6);
    transform: none;
    padding: 4rem 1.5rem;
    background: rgba(41, 68, 85, 0.50);
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    .intro-container {
        height: 80vh;
        min-height: 500px;
    }

    .intro-text {
        font-size: var(--font-size-small);
        padding: 2rem 1rem;
    }

    .intro-text-top {
        top: 0;
        left: 0;
        width: 100%;
    }

    .intro-text-left {
        top: 0;
        left: 0;
        width: 50%;
    }

    .intro-text-right {
        top: 0;
        right: 0;
        width: 50%;
        text-align: right;
    }

    .intro-text-center {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        font-size: var(--font-size-body);
        padding: 3rem 1rem;
    }
}

/* ===================================================================
   ESTILOS PARA A SEÇÃO DE IA (VERSÃO FINAL COM SCROLL-FADE IMERSIVO)
   =================================================================== */

.resource-group.theme-ai {
    --bg: #0b1220;
    --muted: #8aa0bf;
    --brand: #2f7de1;
    --brand-2: #41a5ff;
    background: var(--bg);
    color: #e6eefb;
    position: relative;
    min-height: 100vh;
    padding: 0 !important;
    margin-top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
}

    /* Remove padding do container scroll-fade dentro da seção AI */
    .resource-group.theme-ai .resources-grid--scroll-fade {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

/* --- Cards de Conteúdo --- */
.theme-ai__hero-card {
    position: relative;
    width: 100% !important; /* Sobrescreve width: fit-content do card--overlay */
    max-width: 100% !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}


.theme-ai__hero-card--content {
    background: rgba(0, 0, 0, 0.25); /* Fundo escuro com 40% de opacidade */
    backdrop-filter: blur(10px); /* Efeito de blur no conteúdo atrás */
    -webkit-backdrop-filter: blur(10px); /* Suporte para Safari */
    z-index: 1;
    position: relative;
}

    /* Força a cor do texto para branco nos cards de sobreposição (efeito de vidro) */
    .theme-ai__hero-card--content .card__description {
        color: var(--color-text-light-primary); /* Usa sua variável global para branco puro */
    }

    .theme-ai__hero-card--content .card__media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }

    .theme-ai__hero-card--content .card__image__fill {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.1);
    }

    .theme-ai__hero-card--content .card__image__blur {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: blur(20px) brightness(60%) saturate(120%);
        transform: scale(1.1);
    }

    .theme-ai__hero-card--content .card__content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 4rem; /* Alinha título ao topo igual Card 1 */
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 4rem;
        display: flex;
        flex-direction: column;
        gap: 5rem;
        text-align: center;
        justify-content: flex-start;
        min-height: 100vh;
    }

.theme-ai__hero-card .ia-lead {
    font-size: clamp(1.1rem, 1vw + 1rem, 1.35rem);
    color: #e6eefb;
    font-weight: 300; /* Deixa a fonte um pouco mais leve e elegante */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.theme-ai .resource-group-title {
    color: #00d4ff; /* Um ciano sólido e vibrante que tem mais força que o gradiente */
    background: none;
    /* Sombra escura para criar separação */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    /* -webkit-background-clip: text; */
    /* background-clip: text; */
}

/* Um azul-acinzentado, que recua para o fundo, indicando baixa prioridade */
.theme-ai .footnotes {
    color: #a8b2d1;
}

.theme-ai strong {
    color: var(--brand-2); /* Usa a variável #41a5ff */
    font-weight: 500;
}

/* --- Estilos para os cards de conteúdo (Pillars, Timeline, etc.) --- */
.theme-ai .pillars {
    width: 100%;
}

.theme-ai .pillars-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #fff;
}

.theme-ai .pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.theme-ai .pillar-card {
    text-align: left;
    /* FUNDO: Um preto translúcido para o efeito de vidro */
    background: rgba(28, 37, 54, 0.5);
    /* A MÁGICA: Desfoca o fundo da imagem que está atrás do card */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.5rem; /* Um pouco mais de respiro interno */
    border: 1px solid rgba(148, 163, 184, 0.2); /* Borda externa sutil */
    /* EFEITO EXTRA: Uma "borda interna" que simula um brilho suave na borda */
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
    transition: background 0.3s ease; /* Transição suave para o hover */
    pointer-events: auto;
}

    /* Efeito suave ao passar o mouse */
    .theme-ai .pillar-card:hover {
        background: rgba(41, 52, 72, 0.6);
        border-color: rgba(148, 163, 184, 0.3);
    }

    .theme-ai .pillar-card h3 {
        margin: 0 0 8px;
        font-size: 1rem;
        color: #e8f0ff;
    }

    .theme-ai .pillar-card p {
        margin: 0;
        color: #cbd5e1;
        font-size: 0.9rem;
        line-height: 1.6;
    }

.theme-ai .timeline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
    width: 100%;
    margin: 2rem 0;
}

    .theme-ai .timeline::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, var(--brand), var(--brand-2));
    }

.theme-ai .step {
    position: relative;
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 0 0.5rem;
    transition: transform 0.3s ease;
    pointer-events: auto;
}

    .c.step, .theme-ai .step * {
        cursor: default !important;
    }

.theme-ai .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand);
    margin: 0 auto;
    box-shadow: 0 0 12px rgba(47, 125, 225, .7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-ai .label {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #cbd5e1;
    transition: color 0.3s ease;
}

.theme-ai .highlight {
    margin-top: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    transition: color 0.3s ease;
}

.theme-ai .footnotes {
    text-align: center;
    color: var(--muted);
    max-width: 700px;
    margin: 2rem auto;
}

/* Eleva o conjunto inteiro */
.theme-ai .step:hover {
    transform: translateY(-4px);
}

    /* Aumenta o círculo e intensifica o brilho */
    .theme-ai .step:hover .dot {
        transform: scale(1.3);
        box-shadow: 0 0 20px rgba(65, 165, 255, 0.7); /* Brilho mais forte com a cor --brand-2 */
    }

    /* Deixa os textos com branco total para máximo destaque */
    .theme-ai .step:hover .label,
    .theme-ai .step:hover .highlight {
        color: #ffffff;
    }

.theme-ai .footnotes {
    color: #a8b2d1; /* Um tom de azul-cinza claro e sutil */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Responsividade --- */
@media (max-width: 800px) {
    .theme-ai__hero-card--title .card__media {
        top: 0;
        height: 100vh;
    }

    .theme-ai__hero-card--title .card__content {
        min-height: calc(100vh - 60px);
        padding: 2rem 1rem;
    }

    .theme-ai__hero-card--content .card__content,
    .theme-ai__hero-card--pillars .card__content {
        padding: 3rem 2rem;
    }

    .theme-ai .pillars-grid {
        grid-template-columns: 1fr;
    }

    .theme-ai .timeline {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

        .theme-ai .timeline::before {
            display: none;
        }

    .theme-ai .step {
        display: flex;
        align-items: center;
        gap: 1rem;
        text-align: left;
    }

    .theme-ai .dot {
        margin: 0;
        flex-shrink: 0;
    }

    .theme-ai .label, .theme-ai .highlight {
        margin: 0;
        display: inline;
        line-height: 1.3;
    }

        .theme-ai .label::after {
            content: ': ';
        }
}

/* ========================================
   EFEITO DE FUNDO PYTHON
   ======================================== */

/* Fundo de código estilo Apple */
.code-background-python {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* degrade azul por trás do texto */
    background: radial-gradient(circle at 20% 20%, rgba(0, 122, 255, 0.12), transparent 60%), radial-gradient(circle at 80% 80%, rgba(56, 139, 255, 0.12), transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

    /* texto Python */
    .code-background-python pre,
    .code-background-python code {
        margin: 0;
        padding: 60px 24px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 13px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.12);
        background: transparent !important;
        white-space: pre;
        animation: codeDrift 40s linear infinite;
    }

/* movimento diagonal suave */
@keyframes codeDrift {
    0% {
        transform: translate(-5%, -5%);
    }

    50% {
        transform: translate(5%, 5%);
    }

    100% {
        transform: translate(-5%, -5%);
    }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .code-background-python pre {
        animation: none;
    }
}



/* ========================================
   COMPONENTE CARD--CONSOLE (MODIFICADOR)
   ======================================== */

/* 1) Grid para os consoles */
.resources-grid--python-console {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: stretch;
    width: 100%; /* usa toda a largura */
    max-width: 1600px; /* limite elegante para telas muito largas */
    margin: 0 auto; /* centraliza o grid */
}

@media (max-width:768px) {
    .resources-grid--python-console {
        grid-template-columns: 1fr;
    }
}

/* 2) Card base tipo console (janela) */
.card--console {
    position: relative; /* necessário para barra/botões */
    background: #161b22;
    border: 1px solid var(--color-border-light);
    color: #c9d1d9;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 0; /* padding fica no content */
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

    .card--console:hover {
        border-color: rgba(255,255,255,.2);
    }

    /* 3) Barra superior */
    .card--console::before {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        right: 0;
        height: 32px;
        background: #0d1117;
        border-bottom: 1px solid var(--color-border-light);
        border-radius: 12px 12px 0 0;
    }

    /* 4) Botões da janela */
    .card--console::after {
        content: "";
        position: absolute;
        top: 10px;
        left: 12px;
        width: 54px;
        height: 16px;
        background-image: radial-gradient(circle, #ff5f56 50%, transparent 51%), radial-gradient(circle, #ffbd2e 50%, transparent 51%), radial-gradient(circle, #27c93f 50%, transparent 51%);
        background-size: 16px 16px;
        background-position: 0 0, 20px 0, 40px 0;
        background-repeat: no-repeat;
    }

    /* 5) Conteúdo do console */
    .card--console .card__content {
        /* 32px da barra + 16px de respiro + 16px laterais */
        padding: 48px 16px 16px 0;
        font-family: "Fira Code","Source Code Pro",Consolas,monospace;
        font-size: clamp(1.1rem, 0.25vw + 1rem, 1.25rem);
        line-height: 1.6;
        flex-grow: 1;
        /* Numeração de linhas / cursor */
        white-space: normal; /* cada span vira uma linha */
        line-height: 1.35;
        counter-reset: line;
        position: relative;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0,0,0,.4);
    }

        /* 6) “Sintaxe” e linhas */
        .card--console .card__content > span {
            display: block;
            position: relative;
            margin: 0;
            padding-left: 3.2rem; /* gutter p/ número da linha */
            counter-increment: line;
        }

            .card--console .card__content > span::before {
                content: counter(line);
                position: absolute;
                left: .8rem;
                top: 0;
                color: #6b7684;
                min-width: 2rem;
                text-align: right;
            }

            /* indentação para strings/comentários */
            .card--console .card__content > span.s,
            .card--console .card__content > span.c {
                padding-left: 4.6rem; /* gutter + recuo leve */
                line-height: 1.3;
            }

    /* cores por papel */
    .card--console .f {
        color: #d2a8ff;
        font-weight: 500;
    }
    /* function/title */
    .card--console .s {
        color: #a5d6ff;
    }
    /* string */
    .card--console .c {
        color: #CE8C5E;
    }
    /* comment/docstring */
    .card--console .n {
        color: #6A9955;
    }
    /* note/hash etc. */

    /* 7) Cursor piscando na linha marcada */
    .card--console .card__content > span.cursor::after {
        content: "▮";
        margin-left: 6px;
        color: #9cdcfe;
        animation: blink 1s steps(1,end) infinite;
    }

@keyframes blink {
    50% {
        opacity: 0
    }
}




/* ========================================
   SISTEMA DE TEMAS PARA RESOURCE-GROUP
   ======================================== */

/* 1. LÓGICA DE LAYOUT (LARGURA TOTAL E MARGENS) 
   Aplica-se a todos os temas listados abaixo. */
.resource-group:is( .dark, .dark-blue, .terra-batida, .darker-blue, .aco-escovado, .salmon, .light-lavander, .theme-ai, .azul-tqs-profundo, .azul-profundo-apple, .azul-vibrante, .grafite, .azul-meia-noite, .purpura-profundo, .entardecer-dourado, .cinza-espacial, .amarelo-manteiga, .cor-gelo, .laranja-discreto, .verde-menta, .rosa-quartzo, .prata-suave, .ceu-claro, .luz-estelar, .aurora-boreal, .iridescente, .meia-noite, .supernova, .sonho-verao, .oceano-calmo ) {
    border-radius: 0;
    padding: 4rem 0 2rem 0;
    margin: 4rem 0 0 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* 2. REMOVE A MARGEM ENTRE QUAISQUER DOIS TEMAS DA LISTA */
.resource-group:is(.dark, .dark-blue, .darker-blue, .terra-batida, .salmon, .aco-escovado, .light-lavander, .theme-ai, .azul-tqs-profundo, .azul-profundo-apple, .azul-vibrante, .grafite, .azul-meia-noite, .purpura-profundo, .entardecer-dourado, .cinza-espacial, .amarelo-manteiga, .cor-gelo, .laranja-discreto, .verde-menta, .rosa-quartzo, .prata-suave, .ceu-claro, .luz-estelar, .aurora-boreal, .iridescente, .meia-noite, .supernova, .sonho-verao, .oceano-calmo) +
.resource-group:is(.dark, .dark-blue, .darker-blue, .terra-batida, .salmon, .aco-escovado, .light-lavander, .theme-ai, .azul-tqs-profundo, .azul-profundo-apple, .azul-vibrante, .grafite, .azul-meia-noite, .purpura-profundo, .entardecer-dourado, .cinza-espacial, .amarelo-manteiga, .cor-gelo, .laranja-discreto, .verde-menta, .rosa-quartzo, .prata-suave, .ceu-claro, .luz-estelar, .aurora-boreal, .iridescente, .meia-noite, .supernova, .sonho-verao, .oceano-calmo) {
    margin-top: 0;
}

/* 3. CENTRALIZA O CONTEÚDO EM TODOS OS TEMAS DA LISTA */
.resource-group:is( .dark, .dark-blue, .darker-blue, .terra-batida, .salmon, .aco-escovado, .light-lavander, .theme-ai, .azul-tqs-profundo, .azul-profundo-apple, .azul-vibrante, .grafite, .azul-meia-noite, .purpura-profundo, .entardecer-dourado, .cinza-espacial, .amarelo-manteiga, .cor-gelo, .laranja-discreto, .verde-menta, .rosa-quartzo, .prata-suave, .ceu-claro, .luz-estelar, .aurora-boreal, .iridescente, .meia-noite, .supernova, .sonho-verao, .oceano-calmo) > *:not(.theme-background) {
    width: 95%;
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* EXCEÇÃO: Theme AI tem comportamento especial (imagem fixa de fundo) */
.resource-group.theme-ai {
    padding: 0 !important;
    margin-top: 0 !important;
    width: 100% !important; /* Sobrescreve o width: 100vw herdado */
}

    .resource-group.theme-ai > *:not(.theme-background) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* ========================================
   2. DEFINIÇÃO DE TODAS AS PALETAS DE CORES
   ======================================== */

/* --- TEMAS ESCUROS SIMPLES --- */

.resource-group.azul-tqs-profundo {
    background: #102C4A;
    color: var(--color-text-light-secondary);
}

    .resource-group.azul-tqs-profundo .resource-group-title, .resource-group.azul-tqs-profundo .card--transparent .card__title {
        color: var(--color-text-light-primary);
    }

        .resource-group.azul-tqs-profundo .resource-group-title::after {
            background: linear-gradient(90deg, #38bdf8, #a5d6ff);
        }

    .resource-group.azul-tqs-profundo strong {
        color: #60a5fa;
    }

.resource-group.azul-vibrante {
    background: linear-gradient(160deg, #3b82f6 0%, #0891b2 100%);
    color: #e0f2fe;
}

    .resource-group.azul-vibrante .resource-group-title, .resource-group.azul-vibrante .card--transparent .card__title {
        color: #ffffff;
    }

        .resource-group.azul-vibrante .resource-group-title::after {
            background: linear-gradient(90deg, #bae6fd, #ffffff);
        }

    .resource-group.azul-vibrante strong {
        color: #7dd3fc;
    }

.resource-group.grafite {
    background: #1d1d1f;
    color: #a0a0a5;
}

    .resource-group.grafite .resource-group-title, .resource-group.grafite .card--transparent .card__title {
        color: #f5f5f7;
    }

        .resource-group.grafite .resource-group-title::after {
            background: linear-gradient(90deg, #888, #ccc);
        }

    .resource-group.grafite strong {
        color: #ffffff;
    }

.resource-group.azul-meia-noite {
    background: radial-gradient(ellipse at bottom, #192841 0%, #000000 70%);
    color: var(--color-text-light-secondary);
}

    .resource-group.azul-meia-noite .resource-group-title, .resource-group.azul-meia-noite .card--transparent .card__title {
        color: var(--color-text-light-primary);
    }

        .resource-group.azul-meia-noite .resource-group-title::after {
            background: linear-gradient(90deg, #38bdf8, #60a5fa);
        }

    .resource-group.azul-meia-noite strong {
        color: #60a5fa;
    }

/* --- TEMA: PÚRPURA PROFUNDO (REFINADO COM ESTÉTICA APPLE) --- */
.resource-group.purpura-profundo {
    /* O gradiente original, que é ótimo, foi mantido */
    background: linear-gradient(160deg, #3b0764 0%, #1a1a3b 70%, #1e1e1e 100%);
    color: #eadef7; /* Cor base para texto geral */
    position: relative;
    overflow: hidden;
}

    /* Textura de ruído sutil para dar materialidade */
    .resource-group.purpura-profundo::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 ' xmlns='http://www.w.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.05; /* Opacidade bem baixa */
        z-index: 0;
        pointer-events: none;
    }

    /* Aurora de luz suave para dar profundidade e dinamismo */
    .resource-group.purpura-profundo .theme-background::before {
        content: '';
        position: absolute;
        width: 1000px;
        height: 1000px;
        top: -25%;
        left: -25%;
        background: linear-gradient(135deg, #a855f7, #4c1d95);
        opacity: 0.15; /* Opacidade muito baixa para ser sutil */
        filter: blur(150px);
        animation: aurora-float-1 30s infinite linear alternate; /* Animação lenta */
    }


    .resource-group.purpura-profundo .resource-group-title,
    .resource-group.purpura-profundo .card--transparent .card__title {
        color: #f3e8ff; /* Mantida a cor original do título, que é ótima */
    }

    /* SUA SOLICITAÇÃO: Cor ajustada para a descrição do grupo */
    .resource-group.purpura-profundo .resource-group-description {
        color: #c7b8e0; /* Roxo acinzentado, menos vibrante para criar hierarquia */
    }

    .resource-group.purpura-profundo .resource-group-title::after {
        background: linear-gradient(90deg, #c084fc, #e9d5ff);
    }

    /* Refinamento no destaque do 'strong' com um brilho sutil */
    .resource-group.purpura-profundo strong {
        color: #d8b4fe;
        text-shadow: 0 0 10px rgba(216, 180, 254, 0.2);
    }

.resource-group.entardecer-dourado {
    background: linear-gradient(160deg, #4c1d95 0%, #c2410c 70%, #facc15 100%);
    color: #fff7ed;
}

    .resource-group.entardecer-dourado .resource-group-title, .resource-group.entardecer-dourado .card--transparent .card__title {
        color: #ffffff;
    }

        .resource-group.entardecer-dourado .resource-group-title::after {
            background: linear-gradient(90deg, #fb923c, #fde047);
        }

    .resource-group.entardecer-dourado strong {
        color: #fde047;
    }

.resource-group.cinza-espacial {
    background: linear-gradient(180deg, #2d333b 0%, #1c2128 100%);
    color: #c9d1d9;
}

    .resource-group.cinza-espacial .resource-group-title, .resource-group.cinza-espacial .card--transparent .card__title {
        color: #f0f6fc;
    }

        .resource-group.cinza-espacial .resource-group-title::after {
            background: linear-gradient(90deg, #8b949e, #f0f6fc);
        }

    .resource-group.cinza-espacial strong {
        color: #ffffff;
    }

/* --- TEMAS CLAROS SIMPLES --- */

.resource-group.amarelo-manteiga {
    background: radial-gradient(ellipse at top, #FFFBEB 20%, #FFFFFF 80%);
    color: #44403c;
}

    .resource-group.amarelo-manteiga .resource-group-title, .resource-group.amarelo-manteiga .card--transparent .card__title {
        color: #1c1917;
    }

        .resource-group.amarelo-manteiga .resource-group-title::after {
            background: linear-gradient(90deg, #f59e0b, #fcd34d);
        }

    .resource-group.amarelo-manteiga strong {
        color: #b45309;
    }

.resource-group.cor-gelo {
    background: radial-gradient(ellipse at top, #F7FAFC 20%, #FFFFFF 80%);
    color: var(--color-text-dark-secondary);
}

    .resource-group.cor-gelo .resource-group-title, .resource-group.cor-gelo .card--transparent .card__title {
        color: var(--color-text-dark-primary);
    }

        .resource-group.cor-gelo .resource-group-title::after {
            background: linear-gradient(90deg, #d1d5db, #f9fafb);
        }

    .resource-group.cor-gelo strong {
        color: var(--color-accent-primary);
    }

.resource-group.laranja-discreto {
    background: radial-gradient(ellipse at top, #FFF7F2 20%, #FFFFFF 80%);
    color: #4C4A48;
}

    .resource-group.laranja-discreto .resource-group-title, .resource-group.laranja-discreto .card--transparent .card__title {
        color: #2b2927;
    }

        .resource-group.laranja-discreto .resource-group-title::after {
            background: linear-gradient(90deg, #fb923c, #fed7aa);
        }

    .resource-group.laranja-discreto strong {
        color: var(--color-accent-orange);
    }

.resource-group.verde-menta {
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 70%);
    color: var(--color-text-dark-secondary);
}

    .resource-group.verde-menta .resource-group-title, .resource-group.verde-menta .card--transparent .card__title {
        color: var(--color-text-dark-primary);
    }

        .resource-group.verde-menta .resource-group-title::after {
            background: linear-gradient(90deg, var(--color-accent-esmeralda), #6ee7b7);
        }

    .resource-group.verde-menta strong {
        color: var(--color-accent-esmeralda);
    }

.resource-group.rosa-quartzo {
    background: linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 70%);
    color: #57534e;
}

    .resource-group.rosa-quartzo .resource-group-title, .resource-group.rosa-quartzo .card--transparent .card__title {
        color: #44403c;
    }

        .resource-group.rosa-quartzo .resource-group-title::after {
            background: linear-gradient(90deg, #f43f5e, #fb7185);
        }

    .resource-group.rosa-quartzo strong {
        color: #f43f5e;
    }

.resource-group.prata-suave {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    color: var(--color-text-dark-secondary);
}

    .resource-group.prata-suave .resource-group-title, .resource-group.prata-suave .card--transparent .card__title {
        color: var(--color-text-dark-primary);
    }

        .resource-group.prata-suave .resource-group-title::after {
            background: linear-gradient(90deg, #94a3b8, #cbd5e1);
        }

    .resource-group.prata-suave strong {
        color: #475569;
    }

.resource-group.ceu-claro {
    background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 70%);
    color: var(--color-text-dark-secondary);
}

    .resource-group.ceu-claro .resource-group-title, .resource-group.ceu-claro .card--transparent .card__title {
        color: var(--color-text-dark-primary);
    }

        .resource-group.ceu-claro .resource-group-title::after {
            background: var(--gradient-button-primary);
        }

    .resource-group.ceu-claro strong {
        color: var(--color-accent-primary);
    }

/* --- TEMA: LUZ ESTELAR (REFINADO COM ESTÉTICA DE PAREDE APPLE) --- */
.resource-group.luz-estelar {
    /* FUNDO: Um gradiente off-white muito suave que simula luz ambiente na "parede" */
    background: radial-gradient(ellipse at top, #FDFCF7 0%, #F4F3ED 100%);
    /* Cor base para parágrafos: um cinza quente e suave */
    color: #6F6F74;
    /* Essencial para conter o efeito de textura */
    position: relative;
    overflow: hidden;
}

    /* TEXTURA: A "parede". Um ruído sutil que dá a sensação de material. */
    .resource-group.luz-estelar::before {
        content: "";
        position: absolute;
        inset: 0;
        /* Textura de ruído SVG */
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.15; /* Opacidade baixa para um efeito delicado */
        z-index: 0;
        pointer-events: none;
    }

    /* TÍTULO: Um tom de bronze escuro, mais sofisticado que o preto, para texto principal */
    .resource-group.luz-estelar .resource-group-title,
    .resource-group.luz-estelar .card--transparent .card__title {
        color: #6E5F4D;
    }

        /* LINHA DO TÍTULO: Gradiente metálico suave que complementa os novos tons */
        .resource-group.luz-estelar .resource-group-title::after {
            background: linear-gradient(90deg, #A17D48, #D1BFA1);
        }

    /* TEXTO DE DESTAQUE (strong): Um bronze metálico, inspirado no acabamento "Starlight" */
    .resource-group.luz-estelar strong {
        color: #A17D48;
    }

/* ===================================================================
   TEMA: AÇO ESCOVADO v2 (Texturizado e com Brilho)
   =================================================================== */

.resource-group.aco-escovado {
    /* FUNDO EM CAMADAS PARA EFEITO METÁLICO REALISTA */
    background-color: #dde1e5; /* 1. Cor base: um cinza-aço claro e frio */
    background-image:
    /* 4. Iluminação superior para um brilho suave */
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.6) 0%, transparent 70%),
    /* 3. Brilho direcional para simular o "escovado" */
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100% );
    color: #434D5A; /* Cor do texto principal: um cinza-azulado escuro */
    position: relative;
    overflow: hidden;
}

    /* 2. Textura de ruído para dar a sensação de material */
    .resource-group.aco-escovado::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.12;
        z-index: 0;
    }

    /* TÍTULO: Um azul-marinho muito escuro para um contraste forte e técnico */
    .resource-group.aco-escovado .resource-group-title,
    .resource-group.aco-escovado .card--transparent .card__title {
        color: #252E3D;
    }

        /* LINHA DO TÍTULO: Mantém o azul vibrante da Apple */
        .resource-group.aco-escovado .resource-group-title::after {
            background: linear-gradient(90deg, #0071E3, #409CFF);
        }

    /* TEXTO DE DESTAQUE (strong): O azul clássico da Apple se destaca ainda mais */
    .resource-group.aco-escovado strong {
        color: #0071E3;
    }

    /* DESCRIÇÃO: Usa a mesma cor do texto principal para consistência */
    .resource-group.aco-escovado .resource-group-description,
    .resource-group.aco-escovado .card--transparent .card__description {
        color: #434D5A;
    }

/* ===================================================================
   TEMA: TERRA BATIDA (PARA ALVENARIA / ALVEST)
   =================================================================== */

.resource-group.terra-batida {
    /* FUNDO: Um gradiente de marrons escuros e dessaturados */
    background: linear-gradient(160deg, #4E443A 0%, #2A241F 100%);
    /* Cor base para parágrafos: um tom de "osso" ou creme suave */
    color: #DCD1C2;
    position: relative;
    overflow: hidden;
}

    /* Textura de ruído para dar a sensação de material granulado */
    .resource-group.terra-batida::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.1;
        z-index: 0;
    }

    /* Aurora de luz quente e sutil para dar profundidade */
    .resource-group.terra-batida .theme-background::before {
        content: '';
        position: absolute;
        width: 1200px;
        height: 1200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(251, 146, 60, 0.1) 0%, transparent 70%);
        animation: aurora-pulse 15s infinite ease-in-out; /* Uma animação de pulso lenta */
    }


    .resource-group.terra-batida .card--black {
        /* 1. Suaviza o fundo de preto puro para um tom café-escuro */
        background: #211d1a;
        /* 2. Adiciona uma borda sutil com a cor de destaque do tema */
        border: 1px solid rgba(251, 169, 92, 0.2); /* Borda âmbar com 20% de opacidade */
        /* BÔNUS: Uma sombra externa para dar profundidade e destacar o card */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

        /* Ajusta o efeito hover para ser mais sutil */
        .resource-group.terra-batida .card--black:hover {
            border-color: rgba(251, 169, 92, 0.4); /* Apenas a borda fica mais visível */
            transform: translateY(-4px); /* Mantém o efeito de elevação */
        }

    /* TÍTULO: Um tom de creme claro para contraste suave */
    .resource-group.terra-batida .resource-group-title,
    .resource-group.terra-batida .card--transparent .card__title {
        color: #F5EFE6;
    }

        /* LINHA DO TÍTULO: Gradiente de tons quentes e terrosos */
        .resource-group.terra-batida .resource-group-title::after {
            background: linear-gradient(90deg, #FBA95C, #F5EFE6);
        }

    /* TEXTO DE DESTAQUE (strong): Um tom de âmbar/terracota */
    .resource-group.terra-batida strong {
        color: #FBA95C;
    }

@keyframes aurora-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.2;
    }
}
/* --- TEMAS COM EFEITO DE BRILHO E ANIMAÇÃO --- */

/* Estrutura Base */
.resource-group.aurora-boreal, .resource-group.iridescente, .resource-group.supernova, .resource-group.sonho-verao, .resource-group.oceano-calmo {
    position: relative;
    overflow: hidden;
}

.theme-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .theme-background::before, .theme-background::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        filter: blur(150px);
        will-change: transform;
    }

/* TEMA: AURORA BOREAL */
.resource-group.aurora-boreal {
    background: #0a0a0a;
    color: #d1fae5;
}

    .resource-group.aurora-boreal .theme-background::before {
        width: 600px;
        height: 600px;
        top: -20%;
        left: -20%;
        background: linear-gradient(135deg, #059669, #34d399);
        opacity: 0.3;
        animation: aurora-float-1 20s infinite linear alternate;
    }

    .resource-group.aurora-boreal .theme-background::after {
        width: 500px;
        height: 500px;
        top: 60%;
        left: 70%;
        background: linear-gradient(135deg, #2563eb, #60a5fa);
        opacity: 0.25;
        animation: aurora-float-2 24s infinite linear alternate;
    }

    .resource-group.aurora-boreal strong {
        color: #6ee7b7;
    }

    .resource-group.aurora-boreal .resource-group-title::after {
        background: linear-gradient(90deg, #34d399, #a7f3d0);
    }

/* TEMA: IRIDESCENTE (REFINADO COM ESTÉTICA APPLE) */
.resource-group.iridescente {
    /* FUNDO: Trocamos o quase-preto por um azul-noite profundo e um gradiente sutil de cima para baixo. */
    background: radial-gradient(ellipse at 50% 0%, #1a2035 0%, #101525 70%);
    color: #c7d2fe; /* Texto principal um branco-azulado suave */
    position: relative;
    overflow: hidden; /* Essencial para conter os efeitos */
}

    /* TEXTURA SUTIL: Adiciona um "ruído" granulado muito leve sobre o fundo, dando um toque premium. */
    .resource-group.iridescente::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.04;
        z-index: 0;
        pointer-events: none;
    }

    /* TÍTULO: Gradiente refinado para combinar com a nova paleta, mais suave. */
    .resource-group.iridescente .resource-group-title {
        background: linear-gradient(90deg, #c7d2fe, #a5b4fc);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 30px rgba(199, 210, 254, 0.2); /* Sombra de texto mais suave */
    }

    /* AURORAS: Cores mais suaves, menos opacidade e mais desfocadas para um efeito etéreo. */
    .resource-group.iridescente .theme-background::before {
        width: 700px;
        height: 700px;
        top: -20%;
        left: 50%;
        /* Roxo e rosa mais "empoeirados", menos saturados */
        background: linear-gradient(135deg, #7c3aed, #c13e87);
        opacity: 0.25; /* MENOS OPACIDADE */
        filter: blur(200px); /* MAIS DESFOQUE */
        animation: aurora-float-2 24s infinite linear alternate;
    }

    .resource-group.iridescente .theme-background::after {
        width: 600px;
        height: 600px;
        top: 50%;
        left: -10%;
        /* Ciano e azul mais suaves */
        background: linear-gradient(135deg, #0e7490, #3b82f6);
        opacity: 0.15; /* MENOS OPACIDADE */
        filter: blur(200px); /* MAIS DESFOQUE */
        animation: aurora-float-1 28s infinite linear alternate;
    }

    /* DESTAQUES: Um lavanda claro e elegante para o negrito. */
    .resource-group.iridescente strong {
        color: #d8b4fe;
        text-shadow: none; /* Remove a sombra do strong para um look mais limpo */
    }

    /* LINHA DO TÍTULO: Um gradiente sutil que complementa o título. */
    .resource-group.iridescente .resource-group-title::after {
        background: linear-gradient(90deg, #a5b4fc, #7c3aed);
        opacity: 0.8;
    }
/* TEMA: SUPERNOVA */
.resource-group.supernova {
    background: #100f21;
    color: #ffedd5;
}

    .resource-group.supernova .theme-background::before {
        width: 700px;
        height: 700px;
        top: 40%;
        left: 40%;
        background: linear-gradient(135deg, #f43f5e, #fb923c);
        opacity: 0.35;
        animation: aurora-float-1 25s infinite linear alternate;
    }

    .resource-group.supernova .theme-background::after {
        width: 300px;
        height: 300px;
        top: 10%;
        left: 10%;
        background: radial-gradient(ellipse at center, #fde047 0%, transparent 70%);
        opacity: 0.4;
        animation: supernova-pulse 8s infinite ease-in-out;
    }

    .resource-group.supernova strong {
        color: #fde047;
    }

    .resource-group.supernova .resource-group-title::after {
        background: linear-gradient(90deg, #fb923c, #fde047);
    }

/* --- TEMA: SONHO DE VERÃO (VERSÃO VIBRANTE E MODERNA) --- */
.resource-group.sonho-verao {
    /* FUNDO: Um gradiente vibrante de amarelo, pêssego e rosa, como um céu de verão */
    background: linear-gradient(160deg, #FFF7E0 0%, #FFE9D2 50%, #FFDDE8 100%);
    /* Cor base para parágrafos: um cinza-escuro para boa legibilidade */
    color: #5a5a5d;
    position: relative;
    overflow: hidden;
}

    /* AURORAS: Removidas para um visual mais limpo e focado no gradiente do fundo */
    .resource-group.sonho-verao .theme-background::before,
    .resource-group.sonho-verao .theme-background::after {
        display: none;
    }

    .resource-group.sonho-verao .resource-group-title,
    .resource-group.sonho-verao .card--transparent .card__title {
        color: #A13D6F; /* Tom de ameixa / magenta profundo */
    }

    /* DESTAQUE (strong): Voltamos para o laranja vibrante e energético original */
    .resource-group.sonho-verao strong {
        color: #f97316;
    }

    /* DESCRIÇÃO: Cor mantida, pois já tem bom contraste com o novo fundo */
    .resource-group.sonho-verao .resource-group-description,
    .resource-group.sonho-verao .card--transparent .card__description {
        color: #44403c;
    }

    /* LINHA DO TÍTULO: Um gradiente quente que vai do laranja ao amarelo */
    .resource-group.sonho-verao .resource-group-title::after {
        /* Um novo gradiente que vai da nova cor ameixa para o laranja vibrante */
        background: linear-gradient(90deg, #A13D6F, #f97316);
    }
/* --- TEMA: OCEANO CALMO */
.resource-group.oceano-calmo {
    /* FUNDO: Um gradiente sutil de branco-gelo para branco puro */
    background: linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 100%);
    color: var(--color-text-dark-secondary);
    position: relative;
    overflow: hidden;
}

    /* Textura de ruído sutil para dar materialidade */
    .resource-group.oceano-calmo::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.1;
        z-index: 0;
    }

    /* AURORAS DE LUZ: Cores mais suaves, menos opacidade e mais desfoque */
    .resource-group.oceano-calmo .theme-background::before {
        width: 900px;
        height: 900px;
        top: 40%;
        left: -30%;
        /* Gradiente de ciano para um azul-céu bem pálido */
        background: linear-gradient(135deg, #a5f3fc, #dbeafe);
        opacity: 0.3; /* Menos opacidade */
        filter: blur(180px); /* Mais desfoque */
        animation: aurora-float-1 28s infinite linear alternate;
    }

    .resource-group.oceano-calmo .theme-background::after {
        width: 800px;
        height: 800px;
        top: -30%;
        left: 40%;
        /* Gradiente de menta pálido para um verde quase branco */
        background: linear-gradient(135deg, #d1fae5, #f0fdf4);
        opacity: 0.35; /* Menos opacidade */
        filter: blur(180px); /* Mais desfoque */
        animation: aurora-float-2 32s infinite linear alternate;
    }

    /* TIPOGRAFIA: Cores escuras mantidas para legibilidade */
    .resource-group.oceano-calmo .resource-group-title,
    .resource-group.oceano-calmo .card--transparent .card__title {
        color: var(--color-text-dark-primary);
    }

    .resource-group.oceano-calmo .resource-group-description,
    .resource-group.oceano-calmo .card--transparent .card__description {
        color: var(--color-text-dark-secondary);
    }

    /* ACENTO DE COR: Trocamos o azul padrão por um verde-mar profundo */
    .resource-group.oceano-calmo strong {
        color: #047857; /* Verde-esmeralda/Teal profundo */
    }

    /* LINHA DO TÍTULO: Usa o novo acento de cor temático */
    .resource-group.oceano-calmo .resource-group-title::after {
        background: linear-gradient(90deg, #047857, #0d9488);
    }

/* --- TEMA: AZUL PROFUNDO (Estilo Apple AirPods) --- */
.resource-group.azul-profundo-apple {
    /* FUNDO: Gradiente mais sutil com azuis profundos e dessaturados */
    background: radial-gradient(ellipse at center, #102a43 0%, #0d1e30 70%);
    color: #c7d2fe; /* Cor base do texto: um azul-claro suave */
    position: relative;
    overflow: hidden;
}

    /* Textura de ruído para materialidade */
    .resource-group.azul-profundo-apple::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.05;
        z-index: 0;
    }

    /* TÍTULO: Um branco suave (off-white), menos "duro" que o branco puro */
    .resource-group.azul-profundo-apple .resource-group-title,
    .resource-group.azul-profundo-apple .card--transparent .card__title {
        color: #f0f6fc;
    }

    /* DESCRIÇÃO: Mantém o tom azulado, mas distinto do título */
    .resource-group.azul-profundo-apple .resource-group-description,
    .resource-group.azul-profundo-apple .card--transparent .card__description {
        color: #c7d2fe;
    }

    /* LINHA DO TÍTULO: Gradiente suave para combinar */
    .resource-group.azul-profundo-apple .resource-group-title::after {
        background: linear-gradient(90deg, #93c5fd, #c7d2fe);
    }

    /* DESTAQUE (strong): O ponto de cor mais vibrante, com um brilho sutil */
    .resource-group.azul-profundo-apple strong {
        color: #93c5fd;
        text-shadow: 0 0 8px rgba(147, 197, 253, 0.3);
    }

/* --- TEMA: LAVANDA CLARO (Light Lavander - Versão Revisada) --- */

.resource-group.light-lavander {
    background: linear-gradient(180deg, #F5F3FF 0%, #FAF9FF 50%, #FFFFFF 100%);
    color: var(--color-text-dark-secondary); /* Cor padrão para texto secundário */
}

    .resource-group.light-lavander .resource-group-title,
    .resource-group.light-lavander .card--transparent .card__title {
        color: #4C3B69; /* Roxo-ardósia escuro para títulos */
    }

    .resource-group.light-lavander .resource-group-description,
    .resource-group.light-lavander .card--transparent .card__description {
        color: var(--color-text-dark-secondary);
    }
    /* AQUI ESTÁ A CORREÇÃO: Adiciona a regra para o tracinho */
    .resource-group.light-lavander .resource-group-title::after {
        background: linear-gradient(90deg, #a78bfa, #ddd6fe); /* Gradiente de lavanda para lilás */
    }

    .resource-group.light-lavander strong {
        color: var(--color-accent-lavander); /* Roxo vibrante para destaque */
    }


/* ===================================================================
   TEMA: MEIA-NOITE
   =================================================================== */

.resource-group.meia-noite {
    /* FUNDO: Gradiente sutil de azul-noite com textura */
    background: radial-gradient(ellipse at 50% 0%, #1a2035 0%, #101525 70%);
    color: #E8E8ED; /* Cor do texto principal: um branco suave */
    position: relative;
    overflow: hidden;
}

    /* Textura de ruído para dar a sensação de material */
    .resource-group.meia-noite::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        opacity: 0.05;
        z-index: 0;
    }

    /* ILUMINAÇÃO: Uma única aurora grande, suave e com cores profundas */
    .resource-group.meia-noite .theme-background::before {
        content: '';
        position: absolute;
        width: 1200px;
        height: 1200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, #3B306A, #1E3A5F); /* Roxo e Azul profundos e dessaturados */
        opacity: 0.15; /* Opacidade muito baixa */
        filter: blur(200px);
        animation: aurora-float-1 30s infinite linear alternate;
    }

    /* Esconde a segunda aurora desnecessária */
    .resource-group.meia-noite .theme-background::after {
        display: none;
    }


    /* --- TIPOGRAFIA NÍTIDA E ELEGANTE --- */

    /* TÍTULO: Branco puro e nítido, sem gradiente, para máxima clareza */
    .resource-group.meia-noite .resource-group-title,
    .resource-group.meia-noite .card--transparent .card__title {
        color: #F5F5F7;
        text-shadow: 0 0 20px rgba(245, 245, 247, 0.1); /* Brilho quase imperceptível */
    }

    /* DESCRIÇÃO: Um branco um pouco mais suave para hierarquia */
    .resource-group.meia-noite .resource-group-description {
        color: #E8E8ED;
    }

    /* LINHA DO TÍTULO: Um gradiente azul sutil */
    .resource-group.meia-noite .resource-group-title::after {
        background: linear-gradient(90deg, #5E9DFF, #C7D2FE);
    }

    /* DESTAQUE (strong): Um único tom de azul claro e limpo */
    .resource-group.meia-noite strong {
        color: #5E9DFF;
    }

/* Acquisition Modal Styles */
.acquisition-modal-content {
    max-width: 700px;
    width: 90%;
    padding: 40px;
    background: white;
    margin: auto;
    position: relative;
    border-radius: 12px;
}

#acquisitionModal {
    align-items: center;
    justify-content: center;
}

    #acquisitionModal.modal {
        display: none;
    }

        #acquisitionModal.modal[style*="display: flex"] {
            display: flex;
        }

    #acquisitionModal .modal-close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: #666;
        font-size: 32px;
        font-weight: 300;
        cursor: pointer;
        z-index: 10;
        transition: color 0.2s ease;
    }

        #acquisitionModal .modal-close:hover {
            color: #1a1a1a;
        }

.acquisition-modal-content h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: #1a1a1a;
    font-weight: 600;
    text-align: center;
}

.acquisition-modal-content > p {
    color: #4a5568;
    margin-bottom: 35px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
}

.acquisition-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px;
}

.acquisition-option {
    padding: 30px 25px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s ease;
}

    .acquisition-option:hover {
        border-color: #0066cc;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
        transform: translateY(-2px);
    }

    .acquisition-option h3 {
        font-size: 1.4rem;
        margin-bottom: 10px;
        color: #1a1a1a;
        font-weight: 600;
    }

    .acquisition-option > p {
        font-size: 1rem;
        color: #64748b;
        margin-bottom: 20px;
        line-height: 1.5;
    }

.acquisition-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .acquisition-buttons .btn {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

.btn-secondary {
    background-color: #0066cc;
    color: white;
    border: none;
    cursor: pointer;
}

    .btn-secondary:hover {
        background-color: #0052a3;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
    }

@media (max-width: 768px) {
    .acquisition-modal-content {
        padding: 30px 20px;
    }

        .acquisition-modal-content h2 {
            font-size: 1.8rem;
        }

        .acquisition-modal-content > p {
            font-size: 1rem;
        }
}

@media (max-width: 600px) {
    .acquisition-options {
        grid-template-columns: 1fr;
    }

    .acquisition-option {
        padding: 25px 20px;
    }
}
/* ===================================================
   CÓDIGO COMPLETO E FINAL DO COMPONENTE VIEWPORT ANIMADO
   =================================================== */

.animated-viewport-wrapper {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.animated-viewport-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
}

.animated-viewport {
    position: relative;
    background-color: #000;
    -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(0,0,0,0.4));
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out, background-color 0.4s ease;
}

/* --- A animação é acionada pela classe .visible no .card pai --- */
.card.visible .animated-viewport {
    opacity: 1;
    transform: translateY(0);
}

.animated-viewport:nth-child(3) {
    width: 200px;
    height: 200px;
}

.animated-viewport:nth-child(2), .animated-viewport:nth-child(4) {
    width: 150px;
    height: 150px;
}

.animated-viewport:nth-child(1), .animated-viewport:nth-child(5) {
    width: 100px;
    height: 100px;
}

/* --- CORREÇÃO: Mantém o efeito de cascata (stagger) usando transition-delay --- */
.card.visible .animated-viewport:nth-child(3) {
    transition-delay: 0.2s;
}

.card.visible .animated-viewport:nth-child(2),
.card.visible .animated-viewport:nth-child(4) {
    transition-delay: 0.4s;
}

.card.visible .animated-viewport:nth-child(1),
.card.visible .animated-viewport:nth-child(5) {
    transition-delay: 0.6s;
}


/* Efeito de revelação do texto (Opção 2) */
.animated-viewport .context-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-text);
    color: var(--color-accent-apple);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}

.animated-viewport:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

    .animated-viewport:hover .context-text {
        opacity: 1;
    }

/* Tagline/Título abaixo da animação */
.animated-viewport-tagline {
    font-family: var(--font-text);
    text-align: center;
    font-weight: var(--font-weight-light);
    letter-spacing: 1px;
    margin-top: 50px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out 1s, transform 1.5s ease-out 1s;
}

.card.visible .animated-viewport-tagline {
    opacity: 1;
    transform: translateY(0);
}

/* --- ESTILO CORRETO DAS CANTONEIRAS  --- */
.animated-viewport .corner {
    position: absolute;
    width: 20%;
    height: 20%;
    background: transparent !important;
    border: none !important;
    animation: viewportSubtlePulse 6s ease-in-out infinite;
}

    /* Regra que "desenha" as linhas azuladas */
    .animated-viewport .corner::before,
    .animated-viewport .corner::after {
        content: '';
        position: absolute;
        background-color: var(--color-accent-apple);
    }

/* Posicionamento e tamanho de cada cantoneira com classes específicas */
.animated-viewport .corner--top-left {
    top: 15px;
    left: 15px;
    transform-origin: top left;
}

    .animated-viewport .corner--top-left::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
    }

    .animated-viewport .corner--top-left::after {
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
    }

.animated-viewport .corner--top-right {
    top: 15px;
    right: 15px;
    transform-origin: top right;
}

    .animated-viewport .corner--top-right::before {
        top: 0;
        right: 0;
        width: 100%;
        height: 5px;
    }

    .animated-viewport .corner--top-right::after {
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
    }

.animated-viewport .corner--bottom-left {
    bottom: 15px;
    left: 15px;
    transform-origin: bottom left;
}

    .animated-viewport .corner--bottom-left::before {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
    }

    .animated-viewport .corner--bottom-left::after {
        bottom: 0;
        left: 0;
        width: 5px;
        height: 100%;
    }

.animated-viewport .corner--bottom-right {
    bottom: 15px;
    right: 15px;
    transform-origin: bottom right;
}

    .animated-viewport .corner--bottom-right::before {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 5px;
    }

    .animated-viewport .corner--bottom-right::after {
        bottom: 0;
        right: 0;
        width: 5px;
        height: 100%;
    }


/* --- Animações Keyframes --- */


@keyframes viewportSubtlePulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .animated-viewport-container {
        gap: 15px;
        transform: scale(0.8);
    }

    .animated-viewport-tagline {
        margin-top: 10px;
        font-size: var(--font-size-body);
    }
}

/* =================================================================
   ESTILO FINAL PARA IMAGEM CENTRALIZADA NO CARD DE IA
   ================================================================= */

.ia-card__image {
    display: block; /* Garante que a imagem se comporte como um bloco */
    position: relative; /* Tira a imagem do fundo e a coloca no fluxo normal */
    z-index: 5; /* Garante que fique sobre outros elementos */
    /* Dimensionamento e centralização */
    width: auto; /* Usa a largura natural da imagem */
    max-width: 100%; /* Garante que não ultrapasse a largura do container */
    max-height: 400px; /* Limita a altura máxima para não ficar muito grande */
    margin: 2rem auto; /* Adiciona espaçamento vertical e centraliza na horizontal */
    /* Estilos Visuais */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}


/* =================================================================
   AJUSTE FINAL E DEFINITIVO: Layout da Seção IA no Mobile
   ================================================================= */

@media (max-width: 768px) {

    /* 1. "Puxa" a seção de IA para cima, eliminando o espaço com a seção Python. */
    .resource-group.theme-ai {
        margin-top: -4rem !important; /* Margem negativa para forçar a junção */
        padding-top: 0 !important; /* Remove qualquer espaçamento interno no topo */
    }

        /* 2. Aplica o estilo de "capa" APENAS ao primeiro card da seção. */
        .resource-group.theme-ai .show-on-mobile .card:first-of-type {
            min-height: 80vh; /* Garante a altura de destaque, como uma capa */
            display: flex;
            align-items: center; /* Centraliza na vertical */
            justify-content: center; /* Centraliza na horizontal */
            text-align: center; /* Centraliza o texto */
            padding: 2rem; /* Adiciona um respiro interno para o texto */
        }


        /* 5. Centraliza o texto em TODOS os outros cards da seção de IA no mobile. */
        .resource-group.theme-ai .show-on-mobile .card:not(:first-of-type) {
            text-align: center;
        }
}