/* ===================================
   OTIMIZAÇÕES MOBILE - ENERGIA CERTA DIGITAL
   =================================== */

/* ===== MOBILE GERAL (max-width: 768px) ===== */
@media (max-width: 768px) {
    
    /* Container */
    .container {
        padding: 0 var(--space-md);
    }
    
    /* Tipografia Mobile */
    h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
    h4 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 1rem; }
    
    p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* Seções */
    .section {
        padding: var(--space-2xl) 0;
    }
    
    .section__header {
        margin-bottom: var(--space-xl);
    }
    
    .section__title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .section__subtitle {
        font-size: 0.95rem;
    }
    
    /* Botões */
    .btn {
        font-size: 0.9rem;
        padding: var(--space-sm) var(--space-md);
        width: 100%;
        justify-content: center;
    }
    
    .btn-lg {
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
    }
    
    /* Cards */
    .card {
        padding: var(--space-md);
    }
    
    /* Grids para 1 coluna */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="display: grid"] {
        gap: var(--space-md) !important;
    }
    
    /* Flex para coluna */
    [style*="display: flex"][style*="gap"] {
        flex-direction: column;
        gap: var(--space-md) !important;
    }
    
    /* Tabelas responsivas */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .data-table {
        min-width: 600px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--space-sm);
        font-size: 0.85rem;
    }
}

/* ===== MOBILE PEQUENO (max-width: 480px) ===== */
@media (max-width: 480px) {
    
    .container {
        padding: 0 var(--space-sm);
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    
    p, li {
        font-size: 0.9rem;
    }
    
    .section {
        padding: var(--space-xl) 0;
    }
    
    .btn {
        padding: var(--space-sm);
        font-size: 0.85rem;
    }
    
    .card {
        padding: var(--space-sm);
        border-radius: var(--radius-md);
    }
}

/* ===== HERO MOBILE ===== */
@media (max-width: 768px) {
    
    .hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--space-2xl);
    }
    
    .hero__main {
        margin-bottom: var(--space-2xl);
    }
    
    .hero__title {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 1.2;
    }
    
    .hero__subtitle {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
        margin-bottom: var(--space-md);
    }
    
    .hero__description {
        font-size: 1rem;
        margin-bottom: var(--space-xl);
    }
    
    /* Hero Cards - 1 coluna */
    .hero__cards {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .hero-card {
        padding: var(--space-lg);
    }
    
    .hero-card__icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .hero-card__number {
        font-size: 2rem;
    }
    
    .hero-card__label {
        font-size: 0.9rem;
    }
    
    /* Hero Benefits - 1 coluna */
    .hero__benefits {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .benefit-card {
        padding: var(--space-lg);
    }
    
    .benefit-card__icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .benefit-card h4 {
        font-size: 1.1rem;
    }
    
    .benefit-card p {
        font-size: 0.9rem;
    }
}

/* ===== COMO FUNCIONA PRÁTICA MOBILE ===== */
@media (max-width: 768px) {
    
    /* Infográfico 4 passos - 2 colunas */
    .section [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-lg) var(--space-md) !important;
    }
    
    /* Remover linha conectora no mobile */
    .section [style*="position: absolute"][style*="top: 50px"],
    .section [style*="position: absolute"][style*="top: 60px"] {
        display: none !important;
    }
    
    /* Círculos dos passos menores */
    [style*="width: 100px; height: 100px"] {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.5rem !important;
    }
    
    [style*="width: 80px; height: 80px"] {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.3rem !important;
    }
    
    /* Exemplo do cooperado - ajustes */
    .section [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="border-left: 2px solid"][style*="padding-left"] {
        border-left: none !important;
        border-top: 2px solid var(--border-color) !important;
        padding-left: 0 !important;
        padding-top: var(--space-lg) !important;
        margin-top: var(--space-lg) !important;
    }
}

@media (max-width: 480px) {
    /* 1 coluna em telas muito pequenas */
    .section [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== PLANOS MOBILE ===== */
@media (max-width: 768px) {
    
    .pricing-card {
        padding: var(--space-xl);
    }
    
    .pricing-card__ribbon {
        font-size: 10px;
        padding: 4px 25px;
        right: -35px;
    }
    
    .pricing-card__badge {
        font-size: var(--text-sm);
        padding: var(--space-xs) var(--space-md);
    }
    
    .pricing-card__header h3 {
        font-size: 1.3rem;
    }
    
    .pricing-card__header p {
        font-size: 0.85rem;
    }
    
    .pricing-card__price .value {
        font-size: 2.5rem;
    }
    
    .pricing-card__price .currency,
    .pricing-card__price .period {
        font-size: 0.8rem;
    }
    
    .pricing-card__features .feature {
        padding: var(--space-sm) 0;
    }
    
    .pricing-card__features .feature strong {
        font-size: 0.95rem;
    }
    
    .pricing-card__features .feature span {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    
    .pricing-card {
        padding: var(--space-md);
    }
    
    .pricing-card__price .value {
        font-size: 2rem;
    }
}

/* ===== SEÇÃO MODELO MOBILE ===== */
@media (max-width: 768px) {
    
    .modelo__grid,
    .modelo__benefits ul {
        gap: var(--space-md);
    }
    
    .modelo__card {
        padding: var(--space-lg);
    }
    
    .card__icon {
        font-size: 2rem;
        margin-bottom: var(--space-md);
    }
    
    .card__title {
        font-size: 1.1rem;
    }
    
    .card__text {
        font-size: 0.9rem;
    }
}

/* ===== TIMELINE MOBILE ===== */
@media (max-width: 768px) {
    
    /* Timeline vertical em vez de horizontal */
    [style*="display: flex; flex-direction: column; gap"] {
        gap: var(--space-md) !important;
    }
    
    [style*="display: flex; gap: var(--space-lg)"] {
        flex-direction: column;
        gap: var(--space-md) !important;
    }
    
    /* Círculos da timeline menores */
    [style*="flex-shrink: 0; width: 80px; height: 80px"] {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.2rem !important;
    }
}

/* ===== TABELAS E COMPARADORES MOBILE ===== */
@media (max-width: 768px) {
    
    /* Price cards do Trivago */
    .price-card {
        padding: var(--space-lg);
    }
    
    .price-card__price {
        font-size: 2rem;
    }
    
    /* Simulador */
    .simulator-form {
        gap: var(--space-md);
    }
    
    .simulator-form input {
        font-size: 1rem;
        padding: var(--space-md);
    }
    
    .simulator-result {
        padding: var(--space-md);
    }
    
    .result__grid {
        gap: var(--space-md);
    }
    
    .result__item {
        padding: var(--space-md);
    }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 768px) {
    
    .footer__content {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl) !important;
        text-align: center;
    }
    
    .footer__section ul {
        text-align: center;
    }
    
    .footer__social {
        justify-content: center;
    }
    
    .footer__bottom {
        padding: var(--space-lg) 0;
    }
    
    .footer__bottom p {
        font-size: 0.85rem;
    }
}

/* ===== BOXES E CARDS INFORMATIVOS MOBILE ===== */
@media (max-width: 768px) {
    
    /* Boxes com ícones */
    [style*="display: flex; align-items: flex-start; gap: var(--space-xl)"],
    [style*="display: flex; align-items: flex-start; gap: var(--space-lg)"] {
        flex-direction: column;
        gap: var(--space-md) !important;
        text-align: center;
    }
    
    [style*="flex-shrink: 0"] {
        flex-shrink: 1 !important;
        margin: 0 auto;
    }
    
    /* Metric cards */
    .metric-card,
    .metric-item,
    .stat-box {
        padding: var(--space-md);
    }
    
    .metric-card__value,
    .metric-item__value,
    .stat-box__value {
        font-size: 2rem !important;
    }
    
    .metric-card__label,
    .metric-item__label,
    .stat-box__label {
        font-size: 0.85rem !important;
    }
}

/* ===== GRÁFICOS E CHARTS MOBILE ===== */
@media (max-width: 768px) {
    
    .chart-card {
        padding: var(--space-md);
    }
    
    canvas {
        max-height: 250px !important;
    }
    
    .projecoes__chart-container {
        padding: var(--space-md);
    }
}

/* ===== LISTAS E FEATURES MOBILE ===== */
@media (max-width: 768px) {
    
    ul[style*="list-style: none"] li {
        padding: var(--space-sm) 0;
        font-size: 0.9rem;
    }
    
    ul[style*="list-style: none"] li i {
        font-size: 1rem;
    }
    
    .feature-list li,
    .benefits__list li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* ===== CASOS DE SUCESSO / CASE CARDS MOBILE ===== */
@media (max-width: 768px) {
    
    .case-card {
        padding: var(--space-lg);
    }
    
    .case-card__flag {
        font-size: 2rem;
    }
    
    .case-card__header h3 {
        font-size: 1.2rem;
    }
    
    .case-card__description {
        font-size: 0.9rem;
    }
    
    .case-card__features {
        gap: var(--space-xs);
    }
    
    .case-card__features li {
        font-size: 0.85rem;
    }
}

/* ===== AJUSTES DE ESPAÇAMENTO INLINE MOBILE ===== */
@media (max-width: 768px) {
    
    [style*="padding: var(--space-3xl)"] {
        padding: var(--space-xl) !important;
    }
    
    [style*="padding: var(--space-2xl)"] {
        padding: var(--space-lg) !important;
    }
    
    [style*="margin: var(--space-3xl)"] {
        margin: var(--space-xl) !important;
    }
    
    [style*="margin: var(--space-2xl)"] {
        margin: var(--space-lg) !important;
    }
    
    [style*="gap: var(--space-xl)"] {
        gap: var(--space-md) !important;
    }
    
    [style*="gap: var(--space-2xl)"] {
        gap: var(--space-lg) !important;
    }
}

/* ===== TEXTOS E PARÁGRAFOS LONGOS MOBILE ===== */
@media (max-width: 768px) {
    
    [style*="max-width: 1000px"],
    [style*="max-width: 900px"],
    [style*="max-width: 800px"] {
        max-width: 100% !important;
    }
    
    [style*="font-size: var(--text-3xl)"] {
        font-size: 1.5rem !important;
    }
    
    [style*="font-size: var(--text-2xl)"] {
        font-size: 1.3rem !important;
    }
    
    [style*="font-size: var(--text-xl)"] {
        font-size: 1.1rem !important;
    }
}

/* ===== AJUSTES DE OVERFLOW MOBILE ===== */
@media (max-width: 768px) {
    
    /* Evitar overflow horizontal */
    body {
        overflow-x: hidden;
    }
    
    .container {
        overflow-x: hidden;
    }
    
    /* Ajustar imagens */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* SVG responsivos */
    svg {
        max-width: 100%;
        height: auto;
    }
}

/* ===== TOUCH TARGETS E ACESSIBILIDADE MOBILE ===== */
@media (max-width: 768px) {
    
    /* Touch targets maiores */
    a, button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Links em listas */
    li a {
        padding: var(--space-sm);
        display: block;
    }
    
    /* Espaçamento entre elementos interativos */
    .btn + .btn {
        margin-top: var(--space-sm);
    }
}

/* ===== ANIMAÇÕES REDUZIDAS NO MOBILE ===== */
@media (max-width: 768px) {
    
    /* Reduzir animações para melhor performance */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
    }
    
    /* Manter apenas transições essenciais */
    .btn,
    .card,
    .sidebar-menu,
    .sidebar-overlay {
        transition-duration: 0.3s !important;
    }
}