/* ====================================
   MOBILE STYLES - TECNOLOGIA PAGE (tecnologia.html)
   Stack Cards, Diferenciais, CTA
   ==================================== */

@media (max-width: 768px) {

    /* ==========================================
       HERO SECTION
       ========================================== */

    .hero h1 {
        font-size: 24px !important;
        line-height: 1.35 !important;
        margin-bottom: 24px !important;
    }

    .hero p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 28px !important;
    }

    /* ==========================================
       STACK CARDS SECTION (Primeira grid 3 cols)
       ========================================== */

    /* Grid 3 colunas → 1 coluna */
    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Stack Cards - Ajustar padding e heights */
    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div {
        padding: 28px 24px !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    /* Icon containers */
    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > span[style*="width: 70px"] {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 20px !important;
    }

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > span[style*="width: 70px"] svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Card titles */
    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > strong {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Card descriptions */
    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > span {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ==========================================
       DIFERENCIAIS DA STACK (Segunda grid 3 cols)
       ========================================== */

    /* Container geral */
    .container > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .container > div[style*="grid-template-columns: repeat(3, 1fr)"] > div {
        padding: 32px 24px !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    /* ==========================================
       GRIDS 2 COLUNAS → 1 COLUNA
       ========================================== */

    /* Grid 2 colunas */
    [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ==========================================
       SECTIONS GERAIS
       ========================================== */

    section h2 {
        font-size: 22px !important;
        margin-bottom: 14px !important;
    }

    section .subtitle,
    section p.subtitle {
        font-size: 14px !important;
        margin-bottom: 28px !important;
        padding: 0 10px !important;
    }

    /* ==========================================
       CTA SECTIONS
       ========================================== */

    /* CTA com gradiente preto */
    section > .container > div[style*="background: linear-gradient"][style*="padding: 60px"],
    section > .container > div[style*="background: linear-gradient"][style*="padding: 80px"] {
        padding: 40px 24px !important;
        border-radius: 12px !important;
    }

    section > .container > div[style*="background: linear-gradient"] h3 {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    section > .container > div[style*="background: linear-gradient"] p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }

    section > .container > div[style*="background: linear-gradient"] a.cta-button {
        padding: 14px 28px !important;
        font-size: 14px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    section > .container > div[style*="background: linear-gradient"] p[style*="margin-top: 18px"] {
        font-size: 12px !important;
        margin-top: 14px !important;
    }

    /* ==========================================
       HOVER EFFECTS - DESABILITAR EM MOBILE
       ========================================== */

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div:hover,
    .container > div[style*="grid-template-columns: repeat(3, 1fr)"] > div:hover {
        transform: none !important;
    }

}

/* ==========================================
   EXTRA SMALL DEVICES (< 400px)
   ========================================== */

@media (max-width: 400px) {
    .hero h1 {
        font-size: 22px !important;
    }

    section h2 {
        font-size: 20px !important;
    }

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div,
    .container > div[style*="grid-template-columns: repeat(3, 1fr)"] > div {
        padding: 24px 20px !important;
    }

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > span[style*="width: 70px"] {
        width: 54px !important;
        height: 54px !important;
    }

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > span[style*="width: 70px"] svg {
        width: 26px !important;
        height: 26px !important;
    }

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > strong {
        font-size: 17px !important;
    }

    section > div > div[style*="grid-template-columns: repeat(3, 1fr)"] > div > span {
        font-size: 13px !important;
    }
}