/* responsivo.css — TODAS as media queries do site, na ordem original (carregar por último)
   Extraído do build original (assets/index-C_bOfxLt.css) preservando a ordem da cascata. */

@media (width>=1100px) and (height>=760px) {
    html {
        scroll-snap-type: y proximity
    }
    .chapter {
        scroll-snap-align: start
    }
}

@media (width<=1220px) {
    .desktop-nav {
        gap: 15px
    }
    .desktop-nav a {
        font-size: 9px
    }
    .header-cta {
        padding-inline: 17px;
        font-size: 10px
    }
    .audience-layout {
        grid-template-columns: minmax(500px, 1.15fr) .85fr
    }
    .orbit-stage {
        width: 540px;
        height: 540px
    }
    .orbit-track {
        inset: 50px
    }
    .orbit-lines {
        inset: 66px
    }
    .center-sphere {
        width: 190px;
        height: 190px
    }
    .orbit-node {
        min-width: 122px;
        max-width: 170px;
        font-size: 11px;
        right: -52px
    }
}

@media (width<=1080px) {
    :root {
        --header-height: 70px
    }
    .shell {
        width: min(100% - 56px, 900px)
    }
    .site-header {
        grid-template-columns: 1fr auto;
        padding-inline: 28px
    }
    .desktop-nav,
    .header-cta {
        display: none
    }
    .brand {
        width: 140px;
        height: 40px
    }
    .menu-button {
        z-index: 110;
        cursor: pointer;
        background: 0 0;
        border: 0;
        align-content: center;
        gap: 7px;
        width: 44px;
        height: 44px;
        padding: 0 8px;
        display: grid
    }
    .menu-button span {
        background: var(--white);
        width: 100%;
        height: 1px;
        transition: transform .2s;
        display: block
    }
    .menu-button[aria-expanded=true] span:first-child {
        transform: translateY(4px)rotate(45deg)
    }
    .menu-button[aria-expanded=true] span:last-child {
        transform: translateY(-4px)rotate(-45deg)
    }
    .mobile-nav {
        z-index: 105;
        background: var(--navy-950);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        flex-direction: column;
        justify-content: center;
        padding: 92px 30px 38px;
        transition: opacity .2s, visibility .2s;
        display: flex;
        position: fixed;
        inset: 0;
        /* O backdrop-filter do .site-header vira containing block do fixed,
           então o bottom:0 do inset para na borda do header (70px) em vez da
           tela toda — bug herdado do build original. A altura explícita força
           o overlay a cobrir o viewport inteiro. */
        height: 100vh;
        height: 100dvh;
        overflow-y: auto
    }
    .mobile-nav.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto
    }
    .mobile-nav>a:not(.mobile-contact) {
        min-height: 66px;
        color: var(--white);
        font-family: var(--serif);
        border-bottom: 1px solid #ffffff24;
        grid-template-columns: 42px 1fr;
        align-items: center;
        font-size: 25px;
        display: grid
    }
    .mobile-nav>a>span:first-child {
        color: var(--blue-500);
        font-family: var(--sans);
        letter-spacing: .14em;
        font-size: 9px;
        font-weight: 600
    }
    .mobile-contact {
        background: var(--blue-500);
        min-height: 56px;
        color: var(--navy-950);
        letter-spacing: .06em;
        text-transform: uppercase;
        justify-content: space-between;
        align-items: center;
        margin-top: 26px;
        padding-inline: 18px;
        font-size: 11px;
        font-weight: 600;
        display: flex
    }
    .hero-reference {
        width: 52vw;
        right: -4%
    }
    .change-heading-grid,
    .solutions-intro,
    .about-grid,
    .audience-intro {
        grid-template-columns: 1fr
    }
    .change-heading-grid h2,
    .about-copy h2,
    .about-copy h1,
    .solutions-intro h2,
    .audience-intro h2 {
        margin-top: 22px
    }
    .change-content-grid,
    .masterplan-heading,
    .journey-quality {
        grid-template-columns: 1fr
    }
    .masterplan-scopes {
        max-width: 620px
    }
    .journey-orbital,
    .purpose-case {
        grid-template-columns: 1fr
    }
    .purpose-case-close {
        grid-column: 1
    }
    .care-statement {
        grid-template-columns: 1fr
    }
    .change-creative {
        order: -1;
        width: min(100%, 650px)
    }
    .audience-layout {
        grid-template-columns: 1fr
    }
    .orbit-stage {
        width: 560px;
        height: 560px
    }
    .profile-panel {
        width: min(100%, 720px);
        min-height: 0;
        margin-inline: auto
    }
    .diagnostic-grid {
        grid-template-columns: 1fr
    }
    .diagnostic-action {
        max-width: 560px;
        margin-top: 42px
    }
    .footer-top {
        grid-template-columns: 190px 1fr
    }
    .social-links {
        grid-column: 1/-1;
        padding-bottom: 34px
    }
}

@media (hover:none) {
    .orbit-spoke,
    .orbit-node {
        animation-play-state: paused
    }
}

@media (width<=720px) {
    body {
        padding-bottom: 62px
    }
    .shell {
        width: calc(100% - 36px)
    }
    .site-header {
        padding-inline: 18px
    }
    .hero {
        min-height: 840px
    }
    .hero-content {
        padding-top: calc(var(--header-height) + 66px);
        align-self: start;
        padding-bottom: 200px
    }
    .hero-scrim {
        background: linear-gradient(#020b16fa 0%, #020b16eb 66%, #020b16c2 100%)
    }
    .hero h1 {
        margin: 16px 0 23px;
        font-size: clamp(42px, 11vw, 53px);
        line-height: .98
    }
    .hero-purpose-title {
        max-width: 330px;
        font-size: clamp(27px, 8.4vw, 36px)
    }
    .hero-lead {
        font-size: 17px
    }
    .hero-purpose {
        max-width: 320px;
        font-size: 13px
    }
    .hero-actions {
        margin-top: 29px;
        display: grid
    }
    .hero-actions .button {
        width: 100%;
        padding-inline: 16px
    }
    .hero-reference {
        width: auto;
        height: 132px;
        padding: 20px;
        inset: auto 18px 24px
    }
    .hero-reference:before,
    .hero-reference:after {
        display: none
    }
    .hero-reference-flow {
        margin-bottom: 14px
    }
    .change-section,
    .solutions-section,
    .audience-section,
    .diagnostic-section {
        padding-top: 82px;
        padding-bottom: 86px
    }
    .about-section {
        padding-top: 86px
    }
    .about-page-section {
        min-height: 100svh;
        padding-top: calc(var(--header-height) + 70px);
        padding-bottom: 86px
    }
    .about-mobile-return {
        min-height: 42px;
        color: var(--white);
        letter-spacing: .07em;
        text-transform: uppercase;
        border: 1px solid #b7d1e480;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        font-size: 10px;
        font-weight: 600;
        display: inline-flex
    }
    .change-heading-grid h2,
    .about-copy h2,
    .about-copy h1,
    .solutions-intro h2,
    .audience-intro h2,
    .diagnostic-section h2 {
        font-size: clamp(42px, 11.8vw, 57px);
        line-height: 1.01
    }
    .change-subtitle,
    .solutions-intro>div>p,
    .about-copy>p,
    .diagnostic-action>p {
        font-size: 16px
    }
    .change-content-grid {
        gap: 38px;
        margin-top: 44px
    }
    .change-creative {
        width: 100%;
        min-height: 290px
    }
    .change-word {
        font-size: clamp(23px, 7.4vw, 31px)
    }
    .word-two {
        margin-left: 12%
    }
    .change-list article {
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: 0;
        padding: 24px 0
    }
    .change-pair {
        grid-template-columns: minmax(83px, auto) 26px 1fr
    }
    .change-pair del {
        font-size: 25px
    }
    .change-pair h3 {
        font-size: 31px
    }
    .change-list article>p {
        font-size: 15px
    }
    .principles {
        grid-template-columns: 1fr;
        margin-top: 56px
    }
    .principles span,
    .principles span:not(:first-child) {
        border-bottom: 1px solid #ffffff24;
        border-right: 0;
        min-height: 82px;
        padding: 22px 0;
        font-size: 25px
    }
    .journey-board {
        margin-top: 46px
    }
    .masterplan-heading {
        gap: 34px;
        padding: 30px 22px 32px
    }
    .masterplan-heading h3 {
        font-size: 39px
    }
    .masterplan-heading>div>p:last-child {
        margin-top: 20px;
        font-size: 14px
    }
    .masterplan-content {
        padding: 8px
    }
    .journey-track {
        grid-template-columns: 1fr
    }
    .journey-track article {
        min-height: 0;
        padding: 25px 22px 28px
    }
    .journey-step-top {
        margin-bottom: 23px
    }
    .journey-track h4 {
        font-size: 34px
    }
    .journey-orbital,
    .journey-quality {
        gap: 20px;
        padding: 24px 22px
    }
    .journey-layer-name strong,
    .quality-intro strong {
        font-size: 26px
    }
    .quality-intro {
        grid-template-columns: 1fr
    }
    .quality-seal {
        width: 76px;
        height: 76px
    }
    .quality-criteria {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .quality-criteria li {
        border-bottom: 1px solid #1558872e;
        min-height: 72px
    }
    .quality-criteria li:nth-child(2n) {
        border-right: 0
    }
    .quality-criteria li:last-child {
        border-bottom: 0;
        grid-column: 1/-1
    }
    .masterplan-summary {
        grid-template-columns: 1fr
    }
    .masterplan-summary>* {
        border-bottom: 1px solid #15588729;
        border-right: 0
    }
    .masterplan-summary>:last-child {
        border-bottom: 0
    }
    .systems-stage {
        margin-top: 82px;
        padding-top: 40px
    }
    .systems-heading {
        grid-template-columns: 1fr
    }
    .systems-heading h3 {
        font-size: 38px
    }
    .systems-subtitle {
        margin-top: 13px;
        font-size: 16px
    }
    .carousel-controls {
        justify-content: start
    }
    .carousel-progress {
        width: calc(100% - 36px)
    }
    .systems-carousel {
        grid-auto-columns: 84vw;
        padding-inline: 18px;
        scroll-padding-left: 18px
    }
    .system-card {
        min-height: 520px
    }
    .system-card-copy {
        padding: 25px 24px 30px
    }
    .system-card h4 {
        font-size: 34px
    }
    .purpose-case {
        gap: 38px;
        margin-top: 76px;
        padding: 31px 22px 33px
    }
    .purpose-case-intro h3 {
        font-size: 39px
    }
    .purpose-case-flow li {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0
    }
    .purpose-case-flow p {
        font-size: 20px
    }
    .purpose-case-close {
        font-size: 15px
    }
    .care-statement {
        gap: 18px;
        padding-top: 42px
    }
    .care-statement span {
        padding-top: 0
    }
    .care-statement strong {
        font-size: 39px
    }
    .audience-intro h2 {
        margin-top: 20px
    }
    .audience-layout {
        gap: 36px;
        margin-top: 48px
    }
    .orbit-stage {
        width: 100%;
        height: auto;
        min-height: 500px;
        padding-top: 246px;
        display: grid
    }
    .orbit-lines {
        width: 218px;
        height: 218px;
        inset: 12px auto auto 50%;
        transform: translate(-50%)
    }
    .center-sphere {
        width: 132px;
        height: 132px;
        top: 121px
    }
    .center-sphere span {
        font-size: 9px
    }
    .orbit-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        display: grid;
        position: relative;
        inset: auto
    }
    .orbit-spoke {
        animation: none;
        position: static
    }
    .orbit-node {
        border-radius: 2px;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 60px;
        animation: none;
        position: static;
        transform: none
    }
    .profile-panel {
        padding: 29px 24px
    }
    .profile-panel h3 {
        margin: 20px 0 28px;
        font-size: 44px
    }
    .profile-panel dl>div {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 19px 0
    }
    .diagnostic-action {
        margin-top: 32px
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 48px
    }
    .footer-brand {
        width: 170px
    }
    .footer-top>p {
        font-size: 21px
    }
    .social-links {
        grid-column: auto;
        grid-template-columns: repeat(3, 1fr);
        padding-bottom: 36px;
        display: grid
    }
    .social-item {
        padding-inline: 11px
    }
    .whatsapp-float {
        right: 14px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        width: 54px;
        min-height: 54px;
        padding: 6px
    }
    .whatsapp-symbol {
        width: 40px;
        height: 40px
    }
    .whatsapp-label {
        clip-path: inset(50%);
        white-space: nowrap;
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden
    }
    .footer-bottom {
        flex-direction: column;
        gap: 10px
    }
    .mobile-sticky-cta {
        z-index: 90;
        background: var(--blue-500);
        height: 62px;
        color: var(--navy-950);
        letter-spacing: .065em;
        text-transform: uppercase;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        font-size: 11px;
        font-weight: 600;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0
    }
}

@media (width<=1080px) and (height<=680px) {
    .mobile-nav {
        justify-content: flex-start
    }
}

@media (width<=390px) {
    .hero h1 {
        font-size: 40px
    }
    .change-word {
        font-size: 22px
    }
    .change-pair {
        grid-template-columns: 76px 20px 1fr
    }
    .change-pair del {
        font-size: 22px
    }
    .change-pair h3 {
        font-size: 27px
    }
    .orbit-node {
        padding-inline: 9px;
        font-size: 10px
    }
    .social-links {
        grid-template-columns: repeat(2, 1fr)
    }
    .social-item:last-child {
        grid-column: 1/-1
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
        scroll-snap-type: none
    }
    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
    .orbit-spoke {
        transform: rotate(calc(var(--i) * 90deg));
        animation: none !important
    }
    .orbit-node {
        transform: translateY(-50%) rotate(calc(var(--i) * -90deg));
        animation: none !important
    }
}

@media (prefers-reduced-motion:reduce) and (width<=720px) {
    .orbit-spoke,
    .orbit-node {
        transform: none
    }
}