/* ========================================
   RESPONSIVIDADE TABLET - SEÇÕES INDEX
   Tablets (769px até 1024px)
   Compatível com iPad e Android Tablets
   ======================================== */

/* ===================================
   SEÇÃO: IMPACTO
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .impacto {
        height: auto;
        min-height: 45vh;
        padding: 70px 30px;
    }
    
    .bloco .principal {
        font-size: 32px;
        line-height: 1.3;
    }
    
    .bloco .sub {
        font-size: 16px;
        top: -22px;
    }
    
    .bg-img.img2 {
        bottom: -50% !important;
        width: 140px;
        right: 250px;
    }
    
    .bg-img.img3 {
        width: 200px;
        right: 25px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .bloco .principal {
        font-size: 30px;
    }
    
    .bg-img.img2 {
        bottom: -49% !important;
        width: 120px;
        right: 200px;
    }
    
    .bg-img.img3 {
        bottom: -49% !important;

        width: 180px;
    }
}

/* ===================================
   SEÇÃO: PARA QUEM
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .paraquem {
        height: auto;
        padding: 70px 30px;
    }
    
    .segments-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .segment-card {
        padding: 30px 25px;
    }
    
    .segment-card h3 {
        font-size: 24px;
    }
    
    .segment-card p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .segment-card .btn {
        padding: 12px 24px;
        font-size: 15px;
    }
    
    /* Terceiro card ocupa duas colunas */
    .segment-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .segments-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .segment-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
}

/* ===================================
   SEÇÃO: BENEFÍCIOS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .beneficios {
        padding: 70px 30px;
    }
    
    .beneficios h2 {
        font-size: 36px;
        margin-bottom: 50px;
    }
    
    .beneficios .columns {
        gap: 20px;
    }
    
    .beneficios .box {
        width: 48%;
        padding: 35px 25px;
    }
    
    .beneficios .box.left {
        padding-left: 25%;
    }
    
    .beneficios .box.left img {
        left: -25px;
        width: 180px;
    }
    
    .beneficios .box.right img {
        right: -25px;
        width: 180px;
    }
    
    .beneficios strong {
        font-size: 26px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .beneficios .box {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .beneficios .columns {
        flex-direction: column;
    }
    
    .beneficios .box.left {
        padding-left: 30%;
    }
}

/* ===================================
   SEÇÃO: JORNADA
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .jornada {
        height: auto;
        min-height: 38vh;
        padding: 70px 30px;
    }
    
    .jornada .bloco .principal {
        font-size: 32px;
    }
    
    .jornada .bloco .sub {
        font-size: 16px;
        top: -25px;
    }
    
    .bg-img.jornada {
        width: 150px; 
        height: auto !important;
        right: 15px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .jornada .bloco .principal {
        font-size: 30px;
    }
    
    .bg-img.jornada {
        margin-top: 0;
        width: 150px;
        height: auto;
        max-width: 150px;  /* Limita largura máxima */
        object-fit: contain;  /* Mantém proporção sem distorcer */
    }
}

/* iPad específico - força proporção correta */
@media (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .bg-img.jornada {
        width: auto !important;
        height: 200px !important;  /* Controla pela altura */
        max-width: 250px !important;
        object-fit: contain !important;
    }
}


/* ===================================
   SEÇÃO: FUNCIONALIDADES
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .funcionalidades {
        height: auto;
        padding: 70px 30px;
    }
    
    .funcionalidades h2 {
        font-size: 36px;
    }
    
    .funcionalidades .columns {
        gap: 20px;
    }
    
    .funcionalidades .box {
        width: 48%;
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .funcionalidades .box .icone {
        width: 25%;
    }
    
    .funcionalidades .box .icone img {
        width: 100%;
        max-width: 80px;
    }
    
    .funcionalidades .box .texto {
        width: 75%;
    }
    
    .funcionalidades .box strong {
        font-size: 22px;
    }
    
    .funcionalidades .box p {
        font-size: 16px;
        padding-right: 20px;
    }
    
    .funcionalidades .columns-center .box {
        width: 48%;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .funcionalidades .box {
        width: 100%;
    }
    
    .funcionalidades .columns {
        flex-direction: column;
    }
    
    .funcionalidades .columns-center .box {
        width: 100%;
    }
}

/* ===================================
   SEÇÃO: COMO FUNCIONA (DNA)
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .como_funciona {
        height: auto;
        min-height: 45vh;
        padding: 70px 30px;
    }
    
    .como_funciona .section-title {
        font-size: 56px;
    }
    
    .como_funciona .subtitle {
        font-size: 32px;
        margin-top: 50px;
    }
    
    .como_funciona .subtitle-mobile{
        display: none;
    }
    .como_funciona .align-center p {
        font-size: 18px;
        max-width: 700px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .como_funciona .section-title {
        font-size: 48px;
    }
    
    .como_funciona .subtitle {
        font-size: 28px;
    }

    .como_funciona .subtitle-mobile{
        display: none;
    }
    
    .como_funciona .align-center p {
        font-size: 17px;
        max-width: 650px;
    }
}

/* ===================================
   SEÇÃO: TECNOLOGIA
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .tecnologia {
        padding: 70px 30px;
    }
    
    .tecnologia .columns {
        gap: 30px;
    }
    
    .tecnologia .image {
        width: 45%;
    }
    
    .tecnologia .image img {
        width: 100%;
        max-width: 400px;
    }
    
    .tecnologia .text {
        width: 55%;
    }
    
    .tecnologia h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }
    
    .tecnologia p {
        font-size: 17px;
        line-height: 1.6;
    }
    
    .tecnologia ul li {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 15px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .tecnologia .columns {
        flex-direction: column;
    }
    
    .tecnologia .image,
    .tecnologia .text {
        width: 100%;
    }
    
    .tecnologia .image {
        text-align: center;
    }
    
    .tecnologia .image img {
        max-width: 350px;
    }
}

/* ===================================
   SEÇÃO: MISSÃO
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .missao {
        padding: 70px 30px;
    }
    
    .missao .container {
        gap: 40px;
    }
    
    .missao .box {
        width: 55%;
        gap: 25px;
    }
    
    .missao .item {
        padding: 25px;
    }
    
    .missao .imagem img {
        width: 90px;
    }
    
    .missao .texto strong {
        font-size: 24px;
    }
    
    .missao .texto p {
        font-size: 17px;
    }
    
    .missao .float {
        width: 45%;
        max-width: 350px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .missao .container {
        flex-direction: column;
    }
    
    .missao .box,
    .missao .float {
        width: 100%;
    }
    
    .missao .float {
        max-width: 300px;
        margin: 0 auto;
    }
}

/* ===================================
   MELHORIAS GERAIS TABLET
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Containers */
    section .container {
        max-width: 95%;
        padding: 0 30px;
    }
    
    /* Títulos gerais */
    h2, .h2 {
        font-size: 36px;
        line-height: 1.3;
    }
    
    h3, .h3 {
        font-size: 24px;
        line-height: 1.3;
    }
    
    /* Parágrafos */
    p {
        font-size: 17px;
        line-height: 1.6;
    }
    
    /* Botões */
    .btn {
        padding: 12px 24px;
        font-size: 16px;
        min-height: 48px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    h2, .h2 {
        font-size: 34px;
    }
    
    h3, .h3 {
        font-size: 22px;
    }
    
    p {
        font-size: 16px;
    }
}

/* ===================================
   ORIENTAÇÃO PORTRAIT EM TABLETS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .segments-grid {
        grid-template-columns: 1fr;
    }
    
    .segment-card:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
    
    .beneficios .columns {
        flex-direction: column;
    }
    
    .beneficios .box {
        width: 100%;
    }
    
    .funcionalidades .columns {
        flex-direction: column;
    }
    
    .funcionalidades .box {
        width: 100%;
    }
    
    .tecnologia .columns {
        flex-direction: column;
    }
    
    .tecnologia .image,
    .tecnologia .text {
        width: 100%;
    }
    
    .missao .container {
        flex-direction: column;
    }
    
    .missao .box,
    .missao .float {
        width: 100%;
    }
}

/* ===================================
   ORIENTAÇÃO LANDSCAPE EM TABLETS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .impacto,
    .jornada,
    .como_funciona {
        padding: 60px 30px;
    }
    
    .paraquem,
    .beneficios,
    .funcionalidades,
    .tecnologia,
    .missao {
        padding: 60px 30px;
    }
}

/* ===================================
   IPAD ESPECÍFICO
   =================================== */

/* iPad Pro 12.9" */
@media (min-width: 1024px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
    .bloco .principal {
        font-size: 38px;
    }
    
    .segment-card h3 {
        font-size: 26px;
    }
    
    .beneficios strong {
        font-size: 28px;
    }
    
    .funcionalidades .box strong {
        font-size: 24px;
    }
}

/* iPad Pro 11", iPad Air */
@media (min-width: 820px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .bloco .principal {
        font-size: 32px;
    }
    
    .segment-card h3 {
        font-size: 24px;
    }
}

/* iPad Mini, iPad padrão */
@media (min-width: 768px) and (max-width: 820px) and (-webkit-min-device-pixel-ratio: 2) {
    /* Usa estilos mobile */
}

/* ===================================
   ANDROID TABLETS
   =================================== */

/* Tablets Android grandes (10" - 12") */
@media (min-width: 960px) and (max-width: 1024px) {
    .segments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .beneficios .box {
        width: 48%;
    }
    
    .funcionalidades .box {
        width: 48%;
    }
}

/* Tablets Android médios (8" - 10") */
@media (min-width: 800px) and (max-width: 960px) {
    .segments-grid {
        grid-template-columns: 1fr;
    }
    
    .beneficios .columns {
        flex-direction: column;
    }
    
    .beneficios .box {
        width: 100%;
    }
    
    .funcionalidades .columns {
        flex-direction: column;
    }
    
    .funcionalidades .box {
        width: 100%;
    }
}

/* Tablets Android pequenos (7") */
@media (min-width: 769px) and (max-width: 800px) {
    /* Usa estilos similares ao mobile */
    .impacto,
    .jornada,
    .como_funciona {
        padding: 60px 25px;
    }
    
    .paraquem,
    .beneficios,
    .funcionalidades,
    .tecnologia,
    .missao {
        padding: 60px 25px;
    }
}

/* ===================================
   MELHORIAS TOUCH PARA TABLETS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Área de toque adequada */
    .btn,
    .segment-card .btn,
    .beneficios .btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove highlight de toque */
    .btn,
    .segment-card,
    .funcionalidades .box {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Feedback visual no toque */
    .btn:active {
        transform: scale(0.98);
    }
    
    .segment-card:active {
        opacity: 0.95;
    }
    
    .funcionalidades .box:active {
        transform: translateY(-5px);
    }
}

/* ===================================
   PERFORMANCE EM TABLETS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Otimiza animações */
    .fade-in-element,
    .text-motion-right,
    .text-motion-left,
    .segment-card,
    .funcionalidades .box {
        will-change: transform, opacity;
    }
    
    /* Transições suaves */
    .segment-card,
    .funcionalidades .box {
        transition: all 0.3s ease;
    }
    
    /* Reduz animações em tablets mais antigos */
    @media (prefers-reduced-motion: reduce) {
        .fade-in-element,
        .text-motion-right,
        .text-motion-left,
        .segment-card,
        .funcionalidades .box,
        .bg-img {
            transition: none;
            animation: none;
        }
    }
}

/* ===================================
   ACESSIBILIDADE EM TABLETS
   =================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Contraste adequado */
    .tecnologia ul li,
    .missao .texto p {
        color: inherit;
    }
    
    /* Foco visível */
    .btn:focus,
    .segment-card .btn:focus,
    .beneficios .btn:focus {
        outline: 2px solid #0c4633;
        outline-offset: 2px;
    }
    
    /* Remove outline no toque */
    .btn:focus:not(:focus-visible),
    .segment-card .btn:focus:not(:focus-visible),
    .beneficios .btn:focus:not(:focus-visible) {
        outline: none;
    }
}