/* ====================================
   MOBILE STYLES - COMO FAZEMOS PAGE (como-fazemos.html)
   Product Selector, Phase Timeline, Dynamic Content
   ==================================== */

@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;
    }

    /* Product Title and Subtitle */
    #productTitle {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

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

    /* Product Selector Buttons Container - GRID 2 COLUNAS */
    section > .container > div[style*="max-width: 1000px"] > div[style*="display: flex"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }

    /* Product Selector Cards - ALTURA E LARGURA FIXAS */
    .product-selector-card {
        padding: 0 !important;
        font-size: 11px !important;
        gap: 4px !important;
        width: 100% !important;
        height: 56px !important;
        min-width: auto !important;
        flex: none !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    /* Full-Stack - OCUPA 2 COLUNAS, MESMA ALTURA */
    .product-selector-card:last-child {
        grid-column: span 2 !important;
        height: 56px !important;
    }

    .product-selector-card svg {
        width: 12px !important;
        height: 12px !important;
        margin-bottom: 2px !important;
    }

    /* Phase Timeline Grid - 4 colunas para 2 */
    section > .container > div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }

    /* Phase Timeline Cards */
    .phase-timeline-card {
        padding: 16px 12px !important;
        border-radius: 8px !important;
    }

    .phase-timeline-card > div:first-child {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .phase-timeline-card h4 {
        font-size: 13px !important;
    }

    /* Stepper Content Container */
    .stepper-content {
        padding: 0 !important;
    }

    /* Phase Cards (gerados dinamicamente) */
    .phase-card {
        padding: 24px 20px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
    }

    .phase-card h3 {
        font-size: 18px !important;
        margin-bottom: 14px !important;
    }

    .phase-card h4 {
        font-size: 16px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }

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

    .phase-card ul {
        margin: 14px 0 !important;
    }

    .phase-card ul li {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
        padding-left: 24px !important;
    }

    .phase-card ul li::before {
        font-size: 14px !important;
    }

    .phase-card strong {
        font-size: 13px !important;
    }

    /* Deliverables boxes */
    .phase-card > div[style*="background: rgba"] {
        padding: 16px !important;
        border-radius: 10px !important;
        margin-top: 16px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Timeline badges */
    .phase-card > div[style*="display: inline-block"][style*="padding"] {
        padding: 6px 14px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
    }

    /* CTA Section */
    section > .container > div[style*="background: linear-gradient"][style*="padding: 60px"] {
        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 24px !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;
    }

    /* Ajustes específicos do JavaScript gerado */
    /* Números grandes nas fases */
    [style*="font-size: 48px"][style*="font-weight: 800"] {
        font-size: 32px !important;
    }

    /* Boxes de entregáveis */
    [style*="border-left: 4px solid"] {
        padding: 14px !important;
        border-left-width: 3px !important;
    }

    /* Stats/métricas */
    [style*="font-size: 32px"][style*="line-height: 1"] {
        font-size: 24px !important;
    }

    /* Badges e labels */
    [style*="font-size: 11px"][style*="text-transform: uppercase"] {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }

    /* Grids internos do conteúdo dinâmico */
    .stepper-content [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .stepper-content [style*="display: grid"][style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .stepper-content [style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Icons e SVGs nos cards de fase */
    .phase-card svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Checkmarks e bullets */
    .phase-card [style*="width: 20px; height: 20px"] {
        width: 18px !important;
        height: 18px !important;
    }

    /* Highlighted sections */
    .phase-card [style*="background: linear-gradient"][style*="padding: 24px"] {
        padding: 18px !important;
    }

    /* Process steps */
    .phase-card [style*="counter-increment"] {
        padding-left: 20px !important;
    }

    /* Tooltips e hints */
    .phase-card [style*="font-size: 12px"][style*="font-style: italic"] {
        font-size: 11px !important;
    }
}

/* Extra small devices (< 400px) */
@media (max-width: 400px) {
    .hero h1 {
        font-size: 22px !important;
    }

    #productTitle {
        font-size: 20px !important;
    }

    .product-selector-card {
        font-size: 11px !important;
        padding: 9px 10px !important;
        min-width: 80px !important;
    }

    .product-selector-card svg {
        width: 12px !important;
        height: 12px !important;
    }

    .phase-timeline-card {
        padding: 14px 10px !important;
    }

    .phase-timeline-card > div:first-child {
        font-size: 22px !important;
    }

    .phase-timeline-card h4 {
        font-size: 12px !important;
    }

    .phase-card {
        padding: 20px 16px !important;
    }

    .phase-card h3 {
        font-size: 17px !important;
    }

    .phase-card ul li {
        font-size: 12px !important;
    }
}