/* ============================================================
   RESPONSIVE.CSS
   ============================================================ */

/* ── TABLET LARGE (≤1100px) ──────────────────────────────── */
@media (max-width: 1100px) {
    .about-grid {
        grid-template-columns: 360px 1fr;
    }

    /* Process em 2 filas de 2 */
    .process-steps {
        grid-template-columns: 1fr 40px 1fr;
        grid-template-rows: auto auto;
        row-gap: 20px;
    }

    .process-connector:nth-child(4) {
        display: none;
    }

    .process-step:nth-child(5) {
        grid-column: 1;
        grid-row: 2;
    }

    .process-connector:nth-child(6) {
        grid-column: 2;
        grid-row: 2;
    }

    .process-step:nth-child(7) {
        grid-column: 3;
        grid-row: 2;
    }

    /* Footer CTA */
    .footer-cta-title {
        font-size: clamp(44px, 7vw, 80px);
    }
}

/* ── TABLET (≤1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
    .nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .stamp {
        width: 52px;
        height: 52px;
    }

    .stamp-ring {
        display: none;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr 1fr;
    }

    .diff-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .footer-cta-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-cta-action {
        align-items: flex-start;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── HERO: todos os breakpoints ──────────────────────────── */

/* Tablet: reduzir tamanho do nome e ajustar espaçamentos */
@media (max-width: 900px) {
    .hero-headline {
        font-size: clamp(22px, 5vw, 38px);
    }

    .hero-top {
        gap: clamp(12px, 2vh, 20px);
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .hero-band-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ── TABLET PEQUENO (≤768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
    }

    /* Hero: permitir nome em 2 linhas no mobile */
    .hero-name {
        white-space: normal !important;
        word-break: break-word;
        font-size: clamp(52px, 15vw, 120px) !important;
        line-height: 0.9 !important;
        letter-spacing: -0.04em;
    }

    .hero-name-wrap {
        padding: 0 var(--gutter);
    }

    .hero-top {
        min-height: 50vh;
    }

    .hero-ctas-top {
        flex-direction: row;
    }

    .hero-ctas-band {
        flex-direction: row;
    }

    /* Serviços: 1 coluna */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Portfolio: scroll horizontal */
    .portfolio-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .portfolio-grid::-webkit-scrollbar {
        display: none;
    }

    .portfolio-item {
        scroll-snap-align: start;
        flex: 0 0 72vw;
        max-width: 300px;
    }

    /* No mobile, mostrar todos os projetos (scroll os exibe) */
    .portfolio-item.hidden {
        display: flex;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image-col {
        max-width: 320px;
        margin: 0 auto;
        width: 100%;
    }

    .about-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Process: vertical */
    .process-steps {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .process-connector {
        display: none;
    }

    /* Differentials: 1 coluna */
    .diff-grid {
        grid-template-columns: 1fr;
    }

    .diff-item {
        padding: 32px 28px;
    }

    /* Footer CTA */
    .footer-cta {
        padding: 64px var(--gutter);
    }

    .footer-cta-title {
        font-size: clamp(42px, 10vw, 64px);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Back to top */
    .back-top {
        bottom: 24px;
        right: 20px;
        width: 46px;
        height: 46px;
    }

    .email-pill {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── MOBILE (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {

    /* Hero */
    .hero-name {
        font-size: clamp(44px, 14vw, 96px) !important;
    }

    .hero-name-wrap {
        padding: 0 16px;
    }

    .hero-band-footer {
        padding: 0 16px clamp(24px, 5vh, 40px);
    }

    .hero-ctas-top {
        flex-direction: column;
        width: 100%;
    }

    .hero-ctas-band {
        flex-direction: column;
        width: 100%;
    }

    .hero-ctas-top .btn,
    .hero-ctas-band .btn {
        justify-content: center;
    }

    .hero-eyebrow {
        flex-direction: column;
        gap: 4px;
    }

    .hero-eyebrow .dot {
        display: none;
    }

    /* Portfolio cards */
    .portfolio-item {
        flex: 0 0 82vw;
    }

    /* CTA box */
    .cta-box {
        padding: 32px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-cta-title {
        font-size: clamp(40px, 11vw, 56px);
    }

    .email-pill {
        width: 100%;
        justify-content: space-between;
    }

    /* Intl */
    .intl-title {
        font-size: clamp(38px, 11vw, 60px);
    }

    /* Differentials */
    .diff-item {
        padding: 28px 22px;
    }
}

/* ── SEM HOVER (touch) ───────────────────────────────────── */
@media (hover: none) {
    .service-card:hover {
        transform: none;
        box-shadow: none;
    }

    .portfolio-img:hover .portfolio-overlay {
        opacity: 0;
    }

    .btn:hover {
        transform: none;
        box-shadow: none;
    }

    .process-step:hover {
        transform: none;
        box-shadow: none;
    }

    .tool-tag:hover {
        background: var(--surface);
        color: var(--dark-soft);
        border-color: var(--border);
    }

    .mobile-link:hover {
        transform: none;
    }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {

    .header,
    .ticker-dark,
    .ticker-primary,
    .stamp,
    .hamburger,
    .mobile-nav,
    .back-top,
    .footer {
        display: none;
    }

    .section {
        padding: 40px 0;
    }

    .hero {
        min-height: auto;
    }

    .hero-band {
        padding: 20px 0;
    }
}