/* PQSR2 — "Grid Técnico"
   Hard-ruled grid, no radii, monospace body, Chakra Petch display, orange blocks.
   Breakpoints: 1080px (tighten desktop), 768px (stack to the mobile layout). */

:root {
    --ink: #0A0A0A;
    --accent: #ED6E2E;
    --paper: #FFFFFF;
    --muted: #6B6B6B;
    --body: #4A4A4A;
    --panel: #F4F4F4;
    --gutter: 32px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--ink);
    font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

h1, h2, h3 {
    margin: 0;
    font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
    font-weight: 700;
}

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover { color: var(--accent); }

img { max-width: 100%; }

/* The page sits on a white sheet; body stays black so any overscroll
   past the footer reads as an extension of it, not a white band. */
.sheet {
    background: var(--paper);
    overflow: hidden;
}

/* Skip link — the nav is a long run of links before the content. */
.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 0;
    top: 0;
    z-index: 10;
    background: var(--accent);
    color: var(--ink);
    padding: 12px 20px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*--------------------------------------------------------------*/
/* Top strip + navigation                                        */
/*--------------------------------------------------------------*/

.strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--ink);
    color: var(--paper);
    padding: 9px var(--gutter);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.strip__cta { color: var(--accent); }

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--gutter);
    border-bottom: 2px solid var(--ink);
    /* Anchors the collapsed mobile menu below the bar. */
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The mark: the three orange blocks from the logotype, drawn rather than
   loaded — images/logo.jpg is a dark card with padding, not a usable mark. */
.logo__mark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.logo__block {
    width: 26px;
    height: 13px;
    background: var(--accent);
}

.logo__stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.logo__bar {
    width: 13px;
    height: 5px;
    background: var(--accent);
}

.logo__word {
    font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.nav__links {
    display: flex;
    align-items: stretch;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nav__links a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-left: 1px solid var(--ink);
}

.nav__links a:last-of-type { border-right: 1px solid var(--ink); }

.nav__cta {
    padding: 12px 24px;
    margin-left: 16px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

/* Burger — hidden until the layout stacks. 48px hit target. */
.nav__burger {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--paper);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.nav__burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav__burger[aria-expanded='true'] span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.nav__burger[aria-expanded='true'] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/*--------------------------------------------------------------*/
/* Hero                                                          */
/*--------------------------------------------------------------*/

.hero { border-bottom: 2px solid var(--ink); }

.hero__index {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--ink);
}

.hero__index span {
    padding: 14px var(--gutter);
    border-right: 1px solid var(--ink);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.hero__index span:last-child { border-right: 0; }

.hero__headline { padding: 68px var(--gutter) 56px; }

.hero__headline h1 {
    font-size: clamp(62px, 10.5vw, 152px);
    line-height: 0.86;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.hero__headline h1 span { display: block; }

.hero__headline h1 .mark {
    background: var(--accent);
    padding: 0 14px;
    margin-left: -14px;
    width: -moz-fit-content;
    width: fit-content;
}

.hero__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
}

.hero__lede {
    padding: var(--gutter);
    border-right: 1px solid var(--ink);
}

.hero__lede p {
    font-size: 17px;
    line-height: 1.62;
    text-wrap: pretty;
}

.block-cta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: var(--gutter);
    background: var(--accent);
    color: var(--ink);
}

.block-cta:hover { color: var(--ink); }

.block-cta strong {
    font-family: 'Chakra Petch', 'Arial Narrow', sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.block-cta small {
    font-size: 12px;
    letter-spacing: 0.08em;
}

/*--------------------------------------------------------------*/
/* Section headers                                               */
/*--------------------------------------------------------------*/

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 24px var(--gutter);
    border-bottom: 1px solid var(--ink);
}

.section-head h2 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-head span {
    font-size: 12px;
    color: var(--muted);
}

/*--------------------------------------------------------------*/
/* Serviços                                                      */
/*--------------------------------------------------------------*/

.services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 2px solid var(--ink);
}

.service {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 36px 28px 44px;
    border-right: 1px solid var(--ink);
}

.service:last-child { border-right: 0; }

.service__icon { color: var(--accent); }

.service h3 {
    font-size: 25px;
    line-height: 1.1;
    text-transform: uppercase;
}

.service p {
    font-size: 14px;
    line-height: 1.66;
    color: var(--body);
    text-wrap: pretty;
}

/*--------------------------------------------------------------*/
/* Método                                                        */
/*--------------------------------------------------------------*/

.method {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    border-bottom: 2px solid var(--ink);
}

.method__intro {
    padding: 48px var(--gutter);
    border-right: 1px solid var(--ink);
    background: var(--panel);
}

.method__intro h2 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.method__intro p {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}

.method__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step {
    padding: 48px var(--gutter);
    border-right: 1px solid var(--ink);
}

.step:last-child { border-right: 0; }

.step__num {
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.1em;
}

.step h3 {
    margin-top: 14px;
    font-size: 22px;
    text-transform: uppercase;
}

.step p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.66;
    color: var(--body);
}

/*--------------------------------------------------------------*/
/* CTA + footer                                                  */
/*--------------------------------------------------------------*/

.closing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 64px;
    padding: 88px var(--gutter);
    background: var(--accent);
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
}

.closing h2 {
    font-size: clamp(40px, 5vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 820px;
    text-wrap: balance;
}

.closing a {
    background: var(--ink);
    color: var(--paper);
    padding: 22px 34px;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.closing a:hover { color: var(--accent); }

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px var(--gutter);
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer a { color: var(--paper); }

.footer a:hover { color: var(--accent); }

.footer__social {
    display: flex;
    gap: 28px;
}

.footer__legal { color: #7A7A7A; }

/*--------------------------------------------------------------*/
/* 1080px — tighten before anything has to stack                 */
/*--------------------------------------------------------------*/

@media (max-width: 1080px) {
    :root { --gutter: 24px; }

    .nav__links a { padding: 12px 14px; }

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

    /* Two columns: every second card loses its right rule, and the top
       row needs a rule under it. */
    .service:nth-child(2n) { border-right: 0; }
    .service:nth-child(-n + 2) { border-bottom: 1px solid var(--ink); }

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

    .method__intro {
        border-right: 0;
        border-bottom: 1px solid var(--ink);
    }
}

/*--------------------------------------------------------------*/
/* 768px — the mobile layout                                     */
/*--------------------------------------------------------------*/

@media (max-width: 768px) {
    :root { --gutter: 20px; }

    .strip {
        justify-content: center;
        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .strip__about { display: none; }

    .nav { padding: 14px var(--gutter); }

    .logo__word { font-size: 20px; }

    .nav__burger { display: flex; }

    /* Collapsed menu: full-width stack under the nav bar, each row a
       48px hit target with a hairline between. */
    .nav__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 5;
        flex-direction: column;
        background: var(--paper);
        border-bottom: 2px solid var(--ink);
    }

    .nav__links.is-open { display: flex; }

    .nav__links a {
        min-height: 48px;
        padding: 14px var(--gutter);
        border-left: 0;
        border-bottom: 1px solid var(--ink);
    }

    .nav__links a:last-of-type { border-right: 0; }

    .nav__cta {
        margin-left: 0;
        border-bottom: 0;
    }

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

    .hero__index span {
        padding: 11px var(--gutter);
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .hero__index span:nth-child(2n) { border-right: 0; }
    .hero__index span:nth-child(-n + 2) { border-bottom: 1px solid var(--ink); }

    .hero__headline { padding: 36px var(--gutter) 32px; }

    .hero__headline h1 .mark {
        padding: 0 8px;
        margin-left: -8px;
    }

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

    .hero__lede {
        padding: 24px var(--gutter);
        border-right: 0;
    }

    .hero__lede p { font-size: 15px; line-height: 1.6; }

    .block-cta {
        gap: 16px;
        padding: 24px var(--gutter);
        border-top: 1px solid var(--ink);
    }

    .block-cta strong { font-size: 30px; }

    .block-cta small { font-size: 11px; }

    .section-head { padding: 18px var(--gutter); }

    .section-head h2 { font-size: 13px; letter-spacing: 0.14em; }

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

    .service {
        gap: 14px;
        padding: 26px var(--gutter) 30px;
        border-right: 0;
        border-bottom: 1px solid var(--ink);
    }

    .service:nth-child(-n + 2) { border-bottom: 1px solid var(--ink); }

    .service:last-child { border-bottom: 0; }

    .service h3 { font-size: 22px; }

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

    .method__intro { padding: 24px var(--gutter); }

    .method__intro p { margin-top: 10px; font-size: 12px; }

    .step {
        padding: 26px var(--gutter);
        border-right: 0;
        border-bottom: 1px solid var(--ink);
    }

    .step:last-child { border-bottom: 0; }

    .step h3 { margin-top: 10px; font-size: 20px; }

    .closing {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 44px var(--gutter);
    }

    .closing a {
        padding: 18px var(--gutter);
        font-size: 13px;
        text-align: center;
    }

    .footer {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 16px;
        padding: 24px var(--gutter) 32px;
        font-size: 11px;
    }

    .footer__social { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav__burger span { transition: none; }
}