/* --- RESPONSIVIDADE IPHONE 16 PRO MAX & ULTRA (Até 440px) --- */
@media (max-width: 440px) {

    /* 1. GERAL */
    .container { width: 88%; }
    
    h1 { 
        font-size: 2.15rem; /* Fonte generosa */
        line-height: 1.1;
        margin-bottom: 22px;
    }
    
    .tech-title { font-size: 2rem; }

    /* 2. HERO SECTION */
    .glass-cards-container {
        display: flex;
        flex-direction: row !important; /* Força lado a lado */
        justify-content: center;
        align-items: center;
        gap: 0; /* Sem gap, vamos usar sobreposição */
        
        /* O TRUQUE DE MESTRE: */
        /* Encolhemos o container inteiro para 60% do tamanho original */
        transform: scale(0.55); 
        transform-origin: top center; /* Encolhe a partir do topo */
        
        /* Ajustes para compensar o encolhimento */
        width: 180%; /* Container precisa ser mais largo para compensar o scale */
        margin-left: -40%; /* Centraliza o container alargado */
        margin-top: 30px;
        margin-bottom: -100px; /* Remove o espaço vazio que fica embaixo após encolher */
        
        perspective: 1000px; /* Traz de volta o 3D */
        overflow: visible; /* Deixa as sombras vazarem */
    }
    
    /* Mantém o layout lado a lado (Miniatura Desktop) automático */

    /* 3. PROJETOS (BENTO GRID PREMIUM) */
    .projects-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 Colunas */
        gap: 18px; 
    }
    
    .card-large {
        grid-column: span 2; 
        height: 310px !important; /* Destaque imponente */
    }
    
    /* AQUI O GANHO MÁXIMO: */
    /* Com 440px de largura, podemos ter cards de 200px de altura */
    .project-card {
        height: 200px; 
    }

    .project-card .project-info h3 {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
    }
    
    .card-large .project-info h3 {
        font-size: 1.5rem;
    }

    /* 4. SOBRE MIM */
    .about-container { 
        flex-direction: column; 
        gap: 70px; 
    }
    
    .about-text { width: 100%; }
    
    .tech-frame {
        width: 100%;
        height: 430px; /* Frame de vídeo bem alto */
    }

    /* Fundo decorativo visível */
    .floating-code-bg {
        font-size: 4rem;
        right: -15px;
        opacity: 0.35;
    }

    /* 5. TECH STACK & GARANTIA */
    .stack-grid { grid-template-columns: 1fr; }

    .guarantee-banner {
        flex-direction: column-reverse;
        padding: 55px 30px;
        gap: 45px;
    }
    .seal-wrapper { transform: scale(1.1); } /* Selo grande */

    /* 6. PREÇO */
    .pricing-card-wrapper { margin-top: 80px; }
    .pricing-card { padding: 55px 30px; }
    
    .main-price .value { 
        font-size: 5rem; /* Preço enorme (Impacto total) */
    }
    
    .btn-whatsapp {
        font-size: 0.9rem;
        padding: 12px;
    }

    /* 7. FOOTER */
    .main-footer { padding-bottom: 110px; }
}



/* --- RESPONSIVIDADE PRO MAX (iPhone 12/13/14 Pro Max - Até 428px) --- */
@media (max-width: 430px) {

    /* 1. GERAL */
    .container { 
        width: 90%; 
    }
    
    h1 { 
        font-size: 2rem; /* Tamanho equilibrado */
        line-height: 1.1;
        margin-bottom: 20px;
    }
    
    .tech-title { font-size: 1.9rem; }

    /* 2. HERO SECTION */
    .glass-cards-container {
        display: flex;
        flex-direction: row !important; /* Força lado a lado */
        justify-content: center;
        align-items: center;
        gap: 0; /* Sem gap, vamos usar sobreposição */
        
        /* O TRUQUE DE MESTRE: */
        /* Encolhemos o container inteiro para 60% do tamanho original */
        transform: scale(0.60); 
        transform-origin: top center; /* Encolhe a partir do topo */
        
        /* Ajustes para compensar o encolhimento */
        width: 160%; /* Container precisa ser mais largo para compensar o scale */
        margin-left: -30%; /* Centraliza o container alargado */
        margin-top: 30px;
        margin-bottom: -100px; /* Remove o espaço vazio que fica embaixo após encolher */
        
        perspective: 1000px; /* Traz de volta o 3D */
        overflow: visible; /* Deixa as sombras vazarem */
    }

    .glass-card {
        /* Tamanhos originais do desktop */
        min-width: 280px; 
        width: 280px;
        height: 300px;
        position: relative;
        
        /* --- A CORREÇÃO DA CURVA --- */
        border-radius: 20px; /* Reforça o arredondamento */
        overflow: hidden;    /* Garante o corte */
        
        /* O "Hack" do WebKit para forçar o respeito às curvas durante o Scale */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
        transform: translateZ(0); /* Força renderização via GPU para limpar arestas */
    }

    /* REPLICANDO A POSIÇÃO DO DESKTOP */
    
    /* Card Esquerda */
    .card-side.left {
        transform: translateX(60px) scale(0.9) !important; /* Empurra pra direita (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Direita */
    .card-side.right {
        transform: translateX(-60px) scale(0.9) !important; /* Empurra pra esquerda (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Central (Destaque) */
    .card-center {
        transform: scale(1.1) translateZ(50px) !important; /* Traz pra frente e aumenta */
        z-index: 10; /* Fica por cima de todos */
        opacity: 1;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    
    /* Ajuste de Texto dentro da miniatura */
    .glass-card h3 {
        font-size: 1.4rem; /* Texto legível mesmo reduzido */
    }
    
    .card-icon {
        width: 70px; /* Ícone ajustado */
    }

    /* 3. PROJETOS (BENTO GRID - 2 COLUNAS) */
    .projects-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Força 2 colunas */
        gap: 16px; 
    }
    
    .card-large {
        grid-column: span 2; 
        height: 280px !important; /* Destaque alto */
    }
    
    /* Altura perfeita para o vídeo não cortar no Pro Max */
    .project-card {
        height: 180px; 
    }

    .project-card .project-info h3 {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    
    .card-large .project-info h3 {
        font-size: 1.4rem;
    }

    /* 4. SOBRE MIM */
    .about-container { 
        flex-direction: column; 
        gap: 60px; 
    }
    
    .about-text { width: 100%; }
    
    .tech-frame {
        width: 100%;
        height: 400px; /* Vídeo grande */
    }

    /* 5. TECH STACK & GARANTIA */
    .stack-grid { grid-template-columns: 1fr; } /* Empilhado */

    .guarantee-banner {
        flex-direction: column-reverse;
        padding: 50px 30px;
    }
    
    .seal-wrapper { transform: scale(1); } /* Selo tamanho normal */

    /* 6. PREÇO */
    .pricing-card-wrapper { margin-top: 70px; }
    .pricing-card { padding: 50px 30px; }
    
    .main-price .value { 
        font-size: 4.5rem; /* Preço impactante */
    }
    
    .btn-whatsapp {
        font-size: 0.9rem;
        padding: 12px;
    }

    /* 7. FOOTER */
    .main-footer { padding-bottom: 100px; }
}


/* --- RESPONSIVIDADE IPHONE PLUS/MAX & ANDROIDS GRANDES (Até 414px) --- */
@media (max-width: 414px) {

    /* 1. CORREÇÃO DA LINHA LARANJA */
    h1 { 
        font-size: 2.2rem; /* Reduzi de 2.5rem para 1.9rem */
        line-height: 1.1; /* Garante que as linhas não fiquem muito afastadas */
        margin-bottom: 15px; /* Ajuste fino na margem */
    }
    
    /* Aproveita e ajusta o título do "Não Diga Mostre" para acompanhar */
    .tech-title { 
        font-size: 1.8rem; 
    }

    .highlight-glitch {
        display: inline-block; /* Garante que o span tenha corpo para segurar a linha */
        position: relative;
    }
    
    .highlight-glitch::after {
        content: '';
        display: block !important; /* Força aparecer */
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 4px; /* Espessura da linha */
        background: var(--primary-orange);
        box-shadow: 0 0 10px var(--primary-orange);
        opacity: 1 !important;
    }
    /* 2. HERO CARDS: ESTRUTURA "DESKTOP NO MOBILE" */
    .glass-cards-container {
        display: flex;
        flex-direction: row !important; /* Força lado a lado */
        justify-content: center;
        align-items: center;
        gap: 0; /* Sem gap, vamos usar sobreposição */
        
        /* O TRUQUE DE MESTRE: */
        /* Encolhemos o container inteiro para 60% do tamanho original */
        transform: scale(0.60); 
        transform-origin: top center; /* Encolhe a partir do topo */
        
        /* Ajustes para compensar o encolhimento */
        width: 160%; /* Container precisa ser mais largo para compensar o scale */
        margin-left: -30%; /* Centraliza o container alargado */
        margin-top: 30px;
        margin-bottom: -100px; /* Remove o espaço vazio que fica embaixo após encolher */
        
        perspective: 1000px; /* Traz de volta o 3D */
        overflow: visible; /* Deixa as sombras vazarem */
    }

    .glass-card {
        /* Tamanhos originais do desktop, o scale do pai vai reduzir tudo proporcionalmente */
        min-width: 280px; 
        height: 300px;
        position: relative;
    }

    /* REPLICANDO A POSIÇÃO DO DESKTOP */
    
    /* Card Esquerda */
    .card-side.left {
        transform: translateX(60px) scale(0.9) !important; /* Empurra pra direita (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Direita */
    .card-side.right {
        transform: translateX(-60px) scale(0.9) !important; /* Empurra pra esquerda (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Central (Destaque) */
    .card-center {
        transform: scale(1.1) translateZ(50px) !important; /* Traz pra frente e aumenta */
        z-index: 10; /* Fica por cima de todos */
        opacity: 1;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    
    /* Ajuste de Texto dentro da miniatura */
    .glass-card h3 {
        font-size: 1.4rem; /* Texto legível mesmo reduzido */
    }
    
    .card-icon {
        width: 70px; /* Ícone ajustado */
    }


    /* 3. PROJETOS (BENTO GRID - VERSÃO MAX) */
    .projects-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 15px; 
    }
    
    .card-large {
        grid-column: span 2; 
        height: 280px !important; /* Destaque mais alto */
    }
    
    /* AQUI O AJUSTE FINO: */
    /* Com 414px de largura, a coluna fica larga o suficiente para subir a altura */
    .project-card {
        height: 180px; /* Subimos de 160px para 180px */
    }

    .project-card .project-info h3 {
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
    }
    
    .card-large .project-info h3 {
        font-size: 1.4rem;
    }

    /* 4. SOBRE MIM */
    .about-container { flex-direction: column; gap: 60px; }
    .about-text { width: 100%; }
    
    .tech-frame {
        width: 100%;
        height: 400px; /* Vídeo do perfil bem grande */
    }

    /* 5. TECH STACK */
    .stack-grid { grid-template-columns: 1fr; }

    /* 6. GARANTIA */
    .guarantee-banner {
        flex-direction: column-reverse;
        padding: 50px 30px;
        gap: 40px;
    }
    /* O selo pode ficar no tamanho original (scale 1) porque tem espaço */
    .seal-wrapper { transform: scale(1); } 

    /* 7. PREÇO */
    .pricing-card-wrapper { margin-top: 70px; }
    .pricing-card { padding: 50px 30px; }
    
    .main-price .value { font-size: 4.5rem; } /* Preço GIGANTE */
    
    .payment-dock {
        padding: 20px;
        gap: 20px;
    }
    
    .btn-whatsapp {
        font-size: 0.9rem;
        padding: 12px;
    }

    /* 8. FOOTER */
    .main-footer { padding-bottom: 100px; }
}



/* --- RESPONSIVIDADE IPHONE 12/13/14/PRO (Até 390px) --- */
@media (max-width: 390px) {

    /* 1. CORREÇÃO DA LINHA LARANJA */
    h1 { 
        font-size: 2.2rem; /* Reduzi de 2.5rem para 1.9rem */
        line-height: 1.1; /* Garante que as linhas não fiquem muito afastadas */
        margin-bottom: 15px; /* Ajuste fino na margem */
    }
    
    /* Aproveita e ajusta o título do "Não Diga Mostre" para acompanhar */
    .tech-title { 
        font-size: 1.8rem; 
    }


    .highlight-glitch {
        display: inline-block; /* Garante que o span tenha corpo para segurar a linha */
        position: relative;
    }
    
    .highlight-glitch::after {
        content: '';
        display: block !important; /* Força aparecer */
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 4px; /* Espessura da linha */
        background: var(--primary-orange);
        box-shadow: 0 0 10px var(--primary-orange);
        opacity: 1 !important;
    }

    /* 2. HERO CARDS: ESTRUTURA "DESKTOP NO MOBILE" */
    .glass-cards-container {
        display: flex;
        flex-direction: row !important; /* Força lado a lado */
        justify-content: center;
        align-items: center;
        gap: 0; /* Sem gap, vamos usar sobreposição */
        
        /* O TRUQUE DE MESTRE: */
        /* Encolhemos o container inteiro para 60% do tamanho original */
        transform: scale(0.60); 
        transform-origin: top center; /* Encolhe a partir do topo */
        
        /* Ajustes para compensar o encolhimento */
        width: 160%; /* Container precisa ser mais largo para compensar o scale */
        margin-left: -30%; /* Centraliza o container alargado */
        margin-top: 30px;
        margin-bottom: -100px; /* Remove o espaço vazio que fica embaixo após encolher */
        
        perspective: 1000px; /* Traz de volta o 3D */
        overflow: visible; /* Deixa as sombras vazarem */
    }

    .glass-card {
        /* Tamanhos originais do desktop, o scale do pai vai reduzir tudo proporcionalmente */
        min-width: 280px; 
        height: 300px;
        position: relative;
    }

    /* REPLICANDO A POSIÇÃO DO DESKTOP */
    
    /* Card Esquerda */
    .card-side.left {
        transform: translateX(60px) scale(0.9) !important; /* Empurra pra direita (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Direita */
    .card-side.right {
        transform: translateX(-60px) scale(0.9) !important; /* Empurra pra esquerda (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Central (Destaque) */
    .card-center {
        transform: scale(1.1) translateZ(50px) !important; /* Traz pra frente e aumenta */
        z-index: 10; /* Fica por cima de todos */
        opacity: 1;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    
    /* Ajuste de Texto dentro da miniatura */
    .glass-card h3 {
        font-size: 1.4rem; /* Texto legível mesmo reduzido */
    }
    
    .card-icon {
        width: 70px; /* Ícone ajustado */
    }


    /* 3. PROJETOS (BENTO GRID AJUSTADO) */
    .projects-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 15px; 
    }
    
    .card-large {
        grid-column: span 2; 
        height: 250px !important;
    }
    
    /* AQUI A MUDANÇA: Mais altura pois a coluna é mais larga */
    .project-card {
        height: 160px; /* Aumentei de 140px para 160px */
    }

    .project-card .project-info h3 {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    /* 4. SOBRE MIM */
    .about-container { flex-direction: column; gap: 50px; }
    .about-text { width: 100%; }
    
    .tech-frame {
        width: 100%;
        height: 380px; /* Vídeo maior */
    }

    /* 5. TECH STACK */
    .stack-grid { grid-template-columns: 1fr; } /* Um embaixo do outro */

    /* 6. GARANTIA */
    .guarantee-banner {
        flex-direction: column-reverse;
        padding: 40px 30px;
    }
    .seal-wrapper { transform: scale(0.9); } /* Selo quase full size */

    /* 7. PREÇO */
    .pricing-card-wrapper { margin-top: 60px; }
    .pricing-card { padding: 45px 30px; }
    
    .main-price .value { font-size: 4rem; } /* Preço grandão */
    
    .payment-dock {
        padding: 15px;
        gap: 15px;
    }
    
    .btn-whatsapp {
        font-size: 0.8rem;
        padding: 12px;
    }

    /* 8. FOOTER */
    .main-footer { padding-bottom: 90px; }
}



/* --- RESPONSIVIDADE MOBILE PADRÃO (iPhone 6/7/8/X/11/12 - Até 375px) --- */
@media (max-width: 375px) {

    /* 1. CORREÇÃO DA LINHA LARANJA */
    h1 { 
        font-size: 1.8rem; /* Reduzi de 2.5rem para 1.9rem */
        line-height: 1.1; /* Garante que as linhas não fiquem muito afastadas */
        margin-bottom: 15px; /* Ajuste fino na margem */
    }
    
    /* Aproveita e ajusta o título do "Não Diga Mostre" para acompanhar */
    .tech-title { 
        font-size: 1.8rem; 
    }


    .highlight-glitch {
        display: inline-block; /* Garante que o span tenha corpo para segurar a linha */
        position: relative;
    }
    
    .highlight-glitch::after {
        content: '';
        display: block !important; /* Força aparecer */
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 100%;
        height: 4px; /* Espessura da linha */
        background: var(--primary-orange);
        box-shadow: 0 0 10px var(--primary-orange);
        opacity: 1 !important;
    }

    /* 2. HERO CARDS: ESTRUTURA "DESKTOP NO MOBILE" */
    .glass-cards-container {
        display: flex;
        flex-direction: row !important; /* Força lado a lado */
        justify-content: center;
        align-items: center;
        gap: 0; /* Sem gap, vamos usar sobreposição */
        
        /* O TRUQUE DE MESTRE: */
        /* Encolhemos o container inteiro para 60% do tamanho original */
        transform: scale(0.60); 
        transform-origin: top center; /* Encolhe a partir do topo */
        
        /* Ajustes para compensar o encolhimento */
        width: 160%; /* Container precisa ser mais largo para compensar o scale */
        margin-left: -30%; /* Centraliza o container alargado */
        margin-top: 30px;
        margin-bottom: -100px; /* Remove o espaço vazio que fica embaixo após encolher */
        
        perspective: 1000px; /* Traz de volta o 3D */
        overflow: visible; /* Deixa as sombras vazarem */
    }

    .glass-card {
        /* Tamanhos originais do desktop, o scale do pai vai reduzir tudo proporcionalmente */
        min-width: 280px; 
        height: 300px;
        position: relative;
    }

    /* REPLICANDO A POSIÇÃO DO DESKTOP */
    
    /* Card Esquerda */
    .card-side.left {
        transform: translateX(60px) scale(0.9) !important; /* Empurra pra direita (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Direita */
    .card-side.right {
        transform: translateX(-60px) scale(0.9) !important; /* Empurra pra esquerda (baixo do central) */
        z-index: 1;
        opacity: 0.8;
    }

    /* Card Central (Destaque) */
    .card-center {
        transform: scale(1.1) translateZ(50px) !important; /* Traz pra frente e aumenta */
        z-index: 10; /* Fica por cima de todos */
        opacity: 1;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    
    /* Ajuste de Texto dentro da miniatura */
    .glass-card h3 {
        font-size: 1.4rem; /* Texto legível mesmo reduzido */
    }
    
    .card-icon {
        width: 70px; /* Ícone ajustado */
    }


    /* --- 3. PROJETOS (AJUSTE DE PROPORÇÃO VÍDEO) --- */
    .projects-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 15px; 
    }
    
    /* CARD DESTAQUE (Topo) */
    .card-large {
        grid-column: span 2; 
        height: 220px !important; /* Reduzi um pouco para manter proporção wide */
    }
    
    /* CARDS MENORES (Lado a lado) */
    .project-card {
        /* AQUI ESTÁ A SOLUÇÃO: */
        height: 140px; /* Antes estava 200px. Baixando para 140px, ele fica retangular deitado */
    }

    /* Ajuste de Texto para card mais baixo */
    .project-card .project-info {
        bottom: 15px; /* Sobe um pouco o texto */
        left: 15px;
    }

    .project-card .project-info h3 {
        font-size: 0.8rem; /* Fonte menor para não comer o vídeo */
        line-height: 1.1;
        
        /* Limita o texto a 2 linhas para não tapar o vídeo todo */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .card-large .project-info h3 {
        font-size: 1.2rem;
        -webkit-line-clamp: 3;
    }

    .project-tag {
        font-size: 0.65rem;
        margin-bottom: 2px;
    }

    /* 4. SOBRE MIM */
    .about-container {
        flex-direction: column;
        gap: 50px;
    }
    
    .about-text { width: 100%; }
    
    .tech-frame {
        width: 100%;
        height: 350px; /* Vídeo maior e mais vertical */
    }
    
    .floating-code-bg {
        font-size: 3rem;
        right: -10px;
        bottom: -20px;
        opacity: 0.5; /* Deixa visível mas discreto */
    }

    /* 5. TECH STACK */
    .stack-grid {
        grid-template-columns: 1fr;
    }
    
    /* Ajuste fino na luz ambiente para não estourar no mobile */
    .ambient-glow {
        width: 100%;
        height: 300px;
    }

    /* 6. GARANTIA */
    .guarantee-banner {
        flex-direction: column-reverse;
        padding: 40px 25px;
        text-align: center;
    }
    
    .seal-wrapper {
        transform: scale(0.85); /* Selo quase tamanho real */
        margin-bottom: 0;
    }
    
    .commitment-box {
        text-align: left; /* Texto interno continua alinhado à esquerda */
    }
    
    .risk-zero {
        justify-content: center;
    }

    /* 7. PREÇO */
    .pricing-card-wrapper {
        margin-top: 50px;
        width: 100%;
    }
    
    .pricing-card {
        padding: 40px 25px;
    }
    
    .main-price .value {
        font-size: 3.8rem; /* Preço grande e legível */
    }
    
    /* Badge cabe numa linha só no 375px geralmente, mas prevenimos */
    .no-rent-badge {
        font-size: 0.8rem;
        width: auto;
        padding: 8px 15px;
    }
    
    .btn-whatsapp {
        font-size: 0.8rem;
        padding: 12px;
    }

    /* 8. FOOTER */
    .main-footer {
        padding-bottom: 80px; /* Espaço extra se tiver barra de navegação do OS */
    }
}



/* --- RESPONSIVIDADE EXTREMA (IPHONE 5/SE - 320px) --- */
@media (max-width: 320px) {

    /* 1. AJUSTES GLOBAIS */
    /* Aproveitar cada pixel da tela */
    .container {
        width: 95%; /* Aumenta a largura útil */
        padding: 0 10px;
    }
    
    /* Reduzir fontes gigantes para caber na tela */
    h1 { font-size: 1.8rem !important; } 
    .tech-title { font-size: 1.8rem !important; }
    .section-subtitle { font-size: 0.9rem; }
    
    /* Espaçamento vertical menor entre seções */
    section { padding: 60px 0 !important; }

    /* --- 2. HEADER --- */
    .main-header {
        padding: 15px 10px;
        flex-direction: column;
        gap: 15px;
        height: auto;
    }
    
    .btn-nav {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%; /* Botão ocupa largura total para ser clicável */
        text-align: center;
    }

    /* --- 3. HERO SECTION (Cards de Vidro) --- */
    .hero-section {
        min-height: auto;
        padding-top: 100px; /* Espaço para o header fixo/empilhado */
        display: block; /* Remove flex centralizado verticalmente */
    }

    .glass-cards-container {
        flex-direction: column;
        gap: 40px; /* Mais espaço entre cards empilhados */
        transform: none; /* Remove perspectiva 3D para economizar processamento */
    }

    .glass-card {
        width: 100%;
        max-width: 280px; /* Garante que cabe na tela de 320px */
        height: 280px;
        margin: 0 auto; /* Centraliza */
    }

    /* Removemos os efeitos de posicionamento complexo (margens negativas) no mobile pequeno */
    .card-side.left, .card-side.right {
        margin: 0 auto; 
        transform: scale(1) !important;
        opacity: 1;
    }
    
    .card-center {
        transform: scale(1) !important; /* Remove o zoom do card central */
        margin: 0 auto;
    }

    .btn-large {
        font-size: 1.1rem;
        padding: 15px 30px;
        width: 100%;
        justify-content: center;
    }

    /* --- 4. PROJETOS (GRID) --- */
    .projects-grid {
        grid-template-columns: 1fr; /* 1 Coluna */
        gap: 20px;
    }

    .card-large, .project-card {
        height: 250px !important; /* Altura menor para caber no scroll */
    }
    
    .project-info h3 {
        font-size: 1.2rem;
    }

    /* --- 5. SOBRE MIM (OBSESSÃO) --- */
    .about-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .tech-frame {
        width: 100%;
        height: 250px; /* Ajusta altura do vídeo */
        max-width: 280px;
        margin: 0 auto;
    }
    
    /* Esconder o texto flutuante decorativo pois polui tela pequena */
    .floating-code-bg { display: none; }

    /* --- 6. TECH STACK (TRÍADE) --- */
    .stack-grid {
        grid-template-columns: 1fr; /* 1 Coluna */
        gap: 30px;
    }
    
    .stack-card {
        height: auto; /* Altura flexível baseada no texto */
        padding: 30px 20px;
    }

    /* --- 7. GARANTIA (SELO) --- */
    .guarantee-banner {
        padding: 30px 15px;
        flex-direction: column-reverse; /* Selo em cima */
        gap: 30px;
    }

    .seal-wrapper {
        transform: scale(0.7); /* Diminui o selo */
        margin-bottom: -20px; /* Compensa o espaço extra */
    }
    
    .risk-zero {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* --- 8. PREÇO (CARD) --- */
    .pricing-card-wrapper {
        margin-top: 40px;
    }

    .no-rent-badge {
        font-size: 0.7rem; /* Texto menor no badge */
        width: 90%;
        justify-content: center;
    }

    .pricing-card {
        padding: 40px 15px 30px 15px; /* Bordas bem finas */
    }

    .main-price .value {
        font-size: 3rem; /* Reduz o tamanho gigante do preço */
    }
    
    .main-price .currency {
        font-size: 1.5rem;
    }

    .payment-dock {
        flex-direction: row; /* Mantém lado a lado se possível */
        gap: 10px;
        padding: 10px;
    }
    
    .css-credit-card { width: 40px; } /* Cartãozinho menor */
    .pix-icon { font-size: 0.8rem; }

    .btn-whatsapp {
        font-size: 0.9rem;
        padding: 15px;
        white-space: normal; /* Permite quebrar linha se precisar */
        text-align: center;
    }
    
    /* --- 9. FOOTER --- */
    .copyright-text { font-size: 0.8rem; }
}