/* ====================================
   MOBILE STYLES - HOME PAGE (index.html)
   Before/After Slider, Cases, Testimonials
   ==================================== */

@media (max-width: 768px) {

    /* ==========================================
       BEFORE/AFTER COMPARISON SLIDER
       ========================================== */

    /* Slider Container - AUTO HEIGHT */
    .comparison-slider {
        height: auto !important;
        min-height: 550px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin-top: 0 !important;
    }

    /* Layers - PADDING COMPACTO */
    .comparison-before,
    .comparison-middle,
    .comparison-after {
        padding: 38px 16px 20px 16px !important;
        min-height: 550px !important;
    }

    /* Content Box */
    .comparison-content {
        max-width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Badge no topo */
    .comparison-badge {
        font-size: 10px !important;
        padding: 4px 12px !important;
        height: 24px !important;
        top: 10px !important;
    }

    .comparison-badge svg {
        width: 11px !important;
        height: 11px !important;
        margin-right: 3px !important;
    }

    /* Title H2 - SEM altura fixa */
    .comparison-content h2 {
        font-size: 17px !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 42px !important;
        margin-bottom: 8px !important;
        padding: 0 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Subtitle H3 - SEM altura fixa */
    .comparison-subtitle {
        font-size: 12px !important;
        height: auto !important;
        min-height: 18px !important;
        margin-bottom: 8px !important;
        padding: 0 8px !important;
    }

    /* Lista - SEM altura fixa! */
    .comparison-list {
        height: auto !important;
        min-height: auto !important;
        padding: 6px 0 !important;
        margin-bottom: 10px !important;
        overflow: visible !important;
    }

    .comparison-list li {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
        padding: 0 8px !important;
        text-align: left !important;
    }

    .comparison-list li strong {
        font-size: 11.5px !important;
        font-weight: 800 !important;
    }

    /* Result Box - SEM altura fixa! */
    .comparison-result {
        padding: 10px 12px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        border-left-width: 3px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .comparison-result strong {
        font-size: 10.5px !important;
    }

    /* ==========================================
       SLIDER HANDLE E CONTROLES
       ========================================== */

    /* Handle - Botão central */
    .comparison-handle {
        width: 46px !important;
        height: 46px !important;
    }

    .comparison-handle::before {
        width: 26px !important;
        height: 26px !important;
    }

    /* Labels laterais */
    .comparison-label {
        font-size: 9px !important;
        padding: 7px 12px !important;
        border-radius: 25px !important;
        gap: 4px !important;
    }

    .comparison-label svg {
        width: 11px !important;
        height: 11px !important;
    }

    .comparison-label-left {
        left: 12px !important;
    }

    .comparison-label-right {
        right: 12px !important;
    }

    /* Instrução de arrasto */
    .slider-instruction {
        font-size: 9px !important;
        padding: 6px 12px !important;
        top: calc(50% + 35px) !important;
        gap: 5px !important;
    }

    .slider-instruction svg {
        width: 13px !important;
        height: 13px !important;
    }

    /* ==========================================
       CLIENTS SECTION (Verticais)
       ========================================== */

    .clients {
        padding: 40px 0 !important;
    }

    .clients h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }

    .clients h2 br {
        display: none;
    }

    .clients .subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    /* Box branco das verticais */
    .clients > .container > div[style*="background: #f8f9fa"] {
        padding: 28px 16px !important;
        margin: 24px 0 !important;
        border-radius: 10px !important;
    }

    .clients h3 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .clients h3 + p {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

    /* Verticais Grid - 3 colunas → 1 coluna */
    .verticals-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .vertical-card-corp {
        padding: 24px 20px !important;
        min-height: auto !important;
    }

    .vertical-card-corp > div[style*="display: flex"] > span {
        width: 36px !important;
        height: 36px !important;
    }

    .vertical-card-corp svg {
        width: 18px !important;
        height: 18px !important;
    }

    .vertical-card-corp strong {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    .vertical-card-corp span {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Texto final da seção clients */
    .clients > .container > p:last-child {
        font-size: 13px !important;
        margin-top: 24px !important;
        padding: 0 10px !important;
    }

    .clients > .container > p:last-child strong {
        font-size: 13px !important;
    }

    /* ==========================================
       RESULTS SECTION (Cases Carousel)
       ========================================== */

    /* Section padding */
    section:has(.results-carousel-container) {
        padding: 40px 0 !important;
    }

    section:has(.results-carousel-container) h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 28px !important;
    }

    section:has(.results-carousel-container) h2 br {
        display: none;
    }

    /* Carousel Container */
    .results-carousel-container {
        padding: 0 20px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Setas de navegação - OCULTAR no mobile */
    .carousel-nav {
        display: none !important;
    }

    /* Grid - NÃO MEXER NO DISPLAY! JS controla */
    .results-grid {
        /* NÃO colocar display: grid ou flex aqui! */
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    /* Cards - só ajustar tamanhos */
    .result-card {
        padding: 24px 20px !important;
        min-height: auto !important;
        margin-bottom: 20px !important;
    }

    .result-card h4 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    .result-card p {
        font-size: 13px !important;
        margin-bottom: 14px !important;
        line-height: 1.5 !important;
    }

    .result-card ul {
        margin: 0 !important;
    }

    .result-card ul li {
        font-size: 13px !important;
        padding: 8px 0 !important;
        line-height: 1.5 !important;
    }

    .result-card ul li strong {
        font-size: 13px !important;
    }

    /* Dots - Aumentar para touch */
    .carousel-dots {
        margin-top: 24px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .carousel-dot {
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

    /* ==========================================
       TESTIMONIALS SECTION
       ========================================== */

    /* Section padding */
    section:has(.testimonials-grid) {
        padding: 40px 0 !important;
    }

    section:has(.testimonials-grid) h2 {
        font-size: 22px !important;
        margin-bottom: 14px !important;
    }

    section:has(.testimonials-grid) .subtitle {
        font-size: 14px !important;
        margin-bottom: 28px !important;
    }

    /* Testimonials Grid - 2 colunas → 1 coluna */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 28px !important;
    }

    .testimonials-grid > div {
        padding: 24px 20px !important;
        border-radius: 10px !important;
    }

    .testimonials-grid svg {
        width: 32px !important;
        height: 24px !important;
        margin-bottom: 16px !important;
    }

    .testimonials-grid p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 22px !important;
    }

    .testimonials-grid p strong {
        font-size: 15px !important;
    }

    .testimonials-grid strong {
        font-size: 14px !important;
    }

    .testimonials-grid span {
        font-size: 12px !important;
    }

    /* CTA integrado nos testimonials */
    section:has(.testimonials-grid) > .container > div[style*="background: #000000"][style*="padding: 30px"] {
        padding: 28px 20px !important;
        margin-top: 32px !important;
        border-radius: 10px !important;
    }

    section:has(.testimonials-grid) > .container > div[style*="background: #000000"] h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    section:has(.testimonials-grid) > .container > div[style*="background: #000000"] p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    section:has(.testimonials-grid) > .container > div[style*="background: #000000"] a.cta-button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    section:has(.testimonials-grid) > .container > div[style*="background: #000000"] p:last-child {
        margin-top: 12px !important;
        font-size: 11px !important;
    }

    /* ==========================================
       PROFILE SECTION (Perfil Cliente Ideal)
       ========================================== */

    /* Section geral */
    section:has([style*="grid-template-columns: 1fr 1fr 1fr"]) {
        padding: 40px 0 !important;
    }

    section:has([style*="grid-template-columns: 1fr 1fr 1fr"]) h2 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    section:has([style*="grid-template-columns: 1fr 1fr 1fr"]) .subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    /* Card unificado branco */
    section:has([style*="grid-template-columns: 1fr 1fr 1fr"]) > .container > div[style*="background: linear-gradient"] {
        padding: 28px 20px !important;
        border-radius: 12px !important;
        margin-top: 28px !important;
    }

    /* Grid 3 colunas → 1 coluna */
    section [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Números dos perfis */
    section [style*="width: 60px; height: 60px"] {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        margin-bottom: 16px !important;
    }

    /* Listas dos perfis */
    section ul li {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        line-height: 1.5 !important;
    }

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

    /* CTAs com background preto */
    [style*="background: #000000"][style*="padding: 30px"] {
        padding: 28px 20px !important;
        border-radius: 10px !important;
    }

    [style*="background: #000000"] h3 {
        font-size: 20px !important;
    }

    [style*="background: #000000"] p {
        font-size: 14px !important;
    }

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

}

/* Extra small devices (< 400px) */
@media (max-width: 400px) {
    .comparison-slider {
        min-height: 520px !important;
    }

    .comparison-before,
    .comparison-middle,
    .comparison-after {
        padding: 36px 14px 18px 14px !important;
        min-height: 520px !important;
    }

    .comparison-content h2 {
        font-size: 16px !important;
        min-height: 38px !important;
    }

    .comparison-subtitle {
        font-size: 11.5px !important;
        min-height: 16px !important;
    }

    .comparison-list li {
        font-size: 11px !important;
        padding: 0 6px !important;
        margin-bottom: 7px !important;
    }

    .comparison-result {
        font-size: 10px !important;
    }

    .comparison-badge {
        font-size: 9px !important;
        padding: 4px 10px !important;
    }

    .comparison-label {
        font-size: 8px !important;
        padding: 6px 10px !important;
    }

    .slider-instruction {
        font-size: 8px !important;
        padding: 5px 10px !important;
    }
}