/* ================================================================
   NOVA COMPOSIÇÃO MOBILE — 2026-08-06
   Arquivo isolado para impedir que correções antigas se sobreponham.
   O desktop permanece integralmente controlado por styles.css.
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --mobile-page: min(90vw, 23rem);
    --mobile-card: min(86vw, 21.75rem);
    --mobile-text: min(82vw, 20.75rem);
  }

  html,
  body,
  main,
  main > section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  main > section {
    height: auto;
    min-height: 0;
  }

  .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  .header-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)) !important;
  }

  .slot-guide,
  .slot-guide.compact {
    display: none !important;
  }

  .mobile-title-line {
    display: block;
  }

  /* HERO: composição compacta para caber na altura útil real do celular. */
  .hero-story {
    height: 138svh !important;
    min-height: 0 !important;
    overflow: clip !important;
  }

  .hero-sticky {
    top: var(--header-height) !important;
    height: calc(100svh - var(--header-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-mobile,
  .hero-mobile-reverse {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    width: 100% !important;
    height: clamp(13.8rem, 39svh, 16.2rem) !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  .hero-mobile-photo,
  .hero-mobile-photo-profile,
  .hero-state[data-hero-state="0"] .hero-mobile-photo,
  .hero-state[data-hero-state="1"] .hero-mobile-photo-profile {
    width: auto !important;
    height: 100% !important;
    max-width: 92vw !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    width: var(--mobile-page) !important;
    max-width: 23rem !important;
    min-height: 0 !important;
    margin: -1.35rem auto 0 !important;
    padding: 0.82rem 0.86rem 0.78rem !important;
    gap: 0.42rem !important;
    border-radius: 1.65rem !important;
    overflow: visible !important;
  }

  .hero-mobile-copy::before {
    inset: 0.28rem !important;
    border-radius: 1.4rem !important;
  }

  .hero-mobile-title,
  .hero-mobile-title-two-lines,
  .hero-mobile-reverse .hero-mobile-title {
    max-width: 19rem !important;
    margin: 0 auto !important;
    font-size: clamp(1.48rem, 7.2vw, 1.82rem) !important;
    line-height: 1.03 !important;
    text-align: center !important;
  }

  .hero-state[data-hero-state="1"] .hero-mobile-title,
  .hero-state[data-hero-state="1"] .hero-mobile-title-two-lines {
    font-size: clamp(1.38rem, 6.6vw, 1.7rem) !important;
    line-height: 1.06 !important;
  }

  .hero-mobile-eyebrow {
    margin: 0 !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.2em !important;
  }

  .hero-mobile-divider,
  .hero-mobile-reverse .hero-mobile-divider {
    width: 72% !important;
    margin: 0.05rem auto !important;
  }

  .hero-mobile-copy > p:not(.hero-mobile-signature, .hero-mobile-eyebrow),
  .hero-mobile-reverse .hero-mobile-copy > p:not(.hero-mobile-eyebrow) {
    max-width: 18rem !important;
    margin: 0 auto !important;
    font-size: clamp(0.72rem, 3.25vw, 0.84rem) !important;
    line-height: 1.36 !important;
    text-align: center !important;
  }

  .hero-mobile-cta,
  .hero-mobile-cta-simple,
  .hero-mobile-reverse .hero-mobile-cta-simple {
    width: 100% !important;
    max-width: 18rem !important;
    min-height: 2.55rem !important;
    margin: 0.05rem auto 0 !important;
    padding: 0.56rem 0.7rem !important;
    font-size: clamp(0.7rem, 3vw, 0.8rem) !important;
    line-height: 1.15 !important;
  }

  .hero-mobile-signature {
    margin: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }

  .story-progress,
  .scroll-cue {
    display: none !important;
  }

  /* ABORDAGEM: coluna editorial mais estreita, sem aspecto de banner. */
  .approach-section {
    padding: calc(var(--header-height) + 0.35rem) 0 2.3rem !important;
  }

  .approach-section > .site-shell,
  .approach-section .section-heading,
  .approach-copy {
    width: var(--mobile-page) !important;
    max-width: 23rem !important;
    margin-inline: auto !important;
  }

  .approach-section .section-heading .eyebrow,
  .approach-copy .eyebrow {
    margin-bottom: 0.65rem !important;
    justify-content: center !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }

  .approach-section .section-heading h2,
  .approach-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 0.8rem !important;
    font-size: clamp(2rem, 9.3vw, 2.65rem) !important;
    line-height: 1.01 !important;
    text-align: center !important;
    letter-spacing: -0.03em !important;
  }

  .approach-section .section-heading > p:last-child,
  .approach-copy > p:not(.eyebrow) {
    width: var(--mobile-text) !important;
    max-width: 20.75rem !important;
    margin: 0 auto !important;
    padding-left: 0.85rem !important;
    border-left: 2px solid rgba(210, 160, 91, 0.72) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  .pillar-carousel {
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    margin: 1.25rem auto 0 !important;
    overflow: visible !important;
  }

  .pillar-grid {
    width: 100% !important;
    padding: 0.35rem 0 0.65rem !important;
    scroll-padding-inline: 0 !important;
  }

  .pillar-card {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 19rem !important;
    padding: 1.3rem 1.15rem !important;
    border-radius: 1.55rem !important;
  }

  /* PROGRAMA: conteúdo central, imagem menos larga e leitura vertical. */
  .program-story {
    height: auto !important;
    min-height: 0 !important;
  }

  .program-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(var(--header-height) + 0.35rem) 0 2.4rem !important;
    overflow: hidden !important;
  }

  .program-layout {
    display: flex !important;
    width: var(--mobile-page) !important;
    max-width: 23rem !important;
    height: auto !important;
    margin-inline: auto !important;
    padding: 0 !important;
    flex-direction: column !important;
  }

  .program-copy {
    display: contents !important;
  }

  .program-copy > .eyebrow {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 0.45rem !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.18em !important;
  }

  .program-copy > h2 {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 0.35rem !important;
    font-size: clamp(2.65rem, 12vw, 3.45rem) !important;
    line-height: 0.94 !important;
    text-align: left !important;
  }

  .program-intro {
    order: 3 !important;
    width: var(--mobile-text) !important;
    max-width: 20.75rem !important;
    margin: 0 0 0.95rem !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .program-media {
    order: 4 !important;
    position: relative !important;
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 1rem !important;
    border-radius: 1.75rem !important;
    overflow: hidden !important;
  }

  .program-visual {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center !important;
    background-size: contain !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .program-stages {
    order: 5 !important;
    width: var(--mobile-text) !important;
    min-height: 11.75rem !important;
    margin: 0 auto !important;
  }

  .program-stage h3 {
    margin-bottom: 0.5rem !important;
    font-size: clamp(2rem, 9.5vw, 2.65rem) !important;
    line-height: 0.98 !important;
  }

  .program-stage p {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .program-pagination {
    order: 6 !important;
    position: relative !important;
    inset: auto !important;
    width: var(--mobile-card) !important;
    margin: 0.7rem auto 0 !important;
  }

  .program-pagination button {
    width: 2.8rem !important;
    height: 2.8rem !important;
    flex: 0 0 2.8rem !important;
  }

  /* QUEIXAS: card vertical estreito; imagem inteira em cima e texto abaixo. */
  .complaints-section {
    padding: calc(var(--header-height) + 0.35rem) 0 2.5rem !important;
  }

  .complaints-layout {
    display: flex !important;
    width: var(--mobile-page) !important;
    max-width: 23rem !important;
    margin-inline: auto !important;
    padding: 0 !important;
    flex-direction: column !important;
  }

  .complaints-copy {
    display: contents !important;
  }

  .complaints-copy > .eyebrow {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 0.55rem !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.18em !important;
  }

  .complaints-copy > h2 {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 0.8rem !important;
    color: var(--cream-100) !important;
    font-size: clamp(2.05rem, 9.6vw, 2.7rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }

  .complaints-copy > h2 em {
    color: #d5a66d !important;
    font-style: italic !important;
  }

  .complaints-lead {
    order: 3 !important;
    width: var(--mobile-text) !important;
    max-width: 20.75rem !important;
    margin: 0 0 1.15rem !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  .complaint-display {
    order: 4 !important;
    position: relative !important;
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    height: 31.5rem !important;
    min-height: 31.5rem !important;
    margin: 0 auto 1rem !important;
    overflow: visible !important;
    border-radius: 1.7rem !important;
  }

  .complaint-panel {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    grid-template-rows: auto 1fr !important;
    overflow: hidden !important;
    border: 1px solid rgba(214, 160, 87, 0.72) !important;
    border-radius: 1.7rem !important;
    background: linear-gradient(180deg, rgba(37, 18, 11, 0.95), rgba(13, 6, 4, 0.99)) !important;
    box-shadow: 0 0 0.75rem rgba(232, 166, 81, 0.2), 0 1rem 2.5rem rgba(0, 0, 0, 0.28) !important;
  }

  .complaint-photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: #100704 !important;
  }

  .complaint-photo::after {
    display: none !important;
  }

  .complaint-text {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: -1.15rem 0 0 !important;
    padding: 1.15rem 1.05rem 1.1rem !important;
    border-top: 1px solid rgba(215, 161, 89, 0.46) !important;
    border-radius: 1.35rem 1.35rem 0 0 !important;
    background: linear-gradient(180deg, rgba(56, 29, 17, 0.82), rgba(14, 7, 4, 0.99)) !important;
    box-shadow: 0 -0.55rem 1.25rem rgba(206, 127, 47, 0.13) !important;
    text-shadow: none !important;
  }

  .complaint-text p {
    margin-bottom: 0.4rem !important;
    color: #c99758 !important;
    font-size: 0.56rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.14em !important;
  }

  .complaint-text h3 {
    margin: 0 0 0.45rem !important;
    background: none !important;
    color: #e0bd86 !important;
    font-size: clamp(1.75rem, 8vw, 2.2rem) !important;
    line-height: 1 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .complaint-text > span {
    font-size: 0.82rem !important;
    line-height: 1.48 !important;
  }

  .complaint-tabs {
    order: 5 !important;
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    margin-inline: auto !important;
    gap: 0.6rem !important;
  }

  .complaint-tabs button {
    min-height: 4.35rem !important;
    padding: 0.6rem 0.8rem !important;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto !important;
    gap: 0.72rem !important;
    border-radius: 1.05rem !important;
  }

  .complaint-tab-icon {
    width: 2.65rem !important;
    height: 2.65rem !important;
  }

  .complaint-tabs button b {
    font-size: clamp(1rem, 4.9vw, 1.3rem) !important;
    line-height: 1.15 !important;
  }

  .complaints-cta {
    order: 6 !important;
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    margin: 0.9rem auto 0 !important;
  }

  /* SOBRE: foto central menor e box ainda mais estreita, translúcida e luminosa. */
  .about-section {
    padding: calc(var(--header-height) + 0.3rem) 0 2.5rem !important;
  }

  .about-layout {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 0 !important;
    flex-direction: column !important;
  }

  .about-mobile-eyebrow {
    position: relative !important;
    inset: auto !important;
    width: var(--mobile-page) !important;
    margin: 0 auto 0.75rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.16em !important;
    white-space: nowrap !important;
  }

  .about-media,
  .about-media.has-image {
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    height: auto !important;
    aspect-ratio: 0.88 / 1 !important;
    margin: 0 auto !important;
    border-radius: 1.7rem !important;
    background-position: center top !important;
    background-size: cover !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .about-copy {
    width: var(--mobile-text) !important;
    max-width: 20.75rem !important;
    margin: -2.25rem auto 0 !important;
    padding: 1.25rem 1.05rem 1.05rem !important;
    border-radius: 1.55rem !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(181, 111, 52, 0.12), transparent 38%),
      linear-gradient(145deg, rgba(47, 25, 15, 0.36), rgba(10, 5, 3, 0.62) 74%) !important;
    box-shadow:
      0 0 0 1px rgba(113, 62, 30, 0.72),
      0 0 0.5rem rgba(255, 214, 146, 0.58),
      0 0 1.3rem rgba(239, 170, 79, 0.42),
      0 1.4rem 3rem rgba(0, 0, 0, 0.34),
      inset 0 1px rgba(255, 239, 207, 0.3) !important;
    -webkit-backdrop-filter: blur(9px) saturate(1.08) !important;
    backdrop-filter: blur(9px) saturate(1.08) !important;
  }

  .about-copy h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem !important;
    font-size: clamp(1.95rem, 8.9vw, 2.5rem) !important;
    line-height: 1.02 !important;
  }

  .about-copy > p {
    font-size: 0.82rem !important;
    line-height: 1.52 !important;
  }

  .about-copy blockquote {
    padding: 0.8rem 0.85rem !important;
  }

  .about-copy blockquote p {
    font-size: 1.25rem !important;
  }

  /* DEMAIS SEÇÕES: mesma linguagem estreita para não voltar ao aspecto largo. */
  .reviews-layout,
  .locations-layout,
  .final-layout,
  .footer-layout {
    width: var(--mobile-page) !important;
    max-width: 23rem !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .reviews-section,
  .locations-section,
  .final-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .reviews-intro h2,
  .locations-copy h2,
  .final-copy h2 {
    font-size: clamp(2rem, 9.3vw, 2.7rem) !important;
    line-height: 1.02 !important;
  }

  .reviews-carousel,
  .location-cards,
  .locations-media,
  .final-media,
  .final-copy {
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
    margin-inline: auto !important;
  }

  .location-cards article {
    border-radius: 1.45rem !important;
  }
}

@media (max-width: 370px) {
  :root {
    --mobile-page: min(91vw, 20.5rem);
    --mobile-card: min(87vw, 19.6rem);
    --mobile-text: min(83vw, 18.8rem);
  }

  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(13rem, 37svh, 14.8rem) !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    padding: 0.72rem 0.75rem 0.7rem !important;
  }

  .hero-mobile-copy > p:not(.hero-mobile-signature, .hero-mobile-eyebrow),
  .hero-mobile-reverse .hero-mobile-copy > p:not(.hero-mobile-eyebrow) {
    font-size: 0.7rem !important;
  }

  .complaint-display {
    height: 30.5rem !important;
    min-height: 30.5rem !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  :root {
    --mobile-page: min(82vw, 30rem);
    --mobile-card: min(74vw, 26rem);
    --mobile-text: min(70vw, 24rem);
  }

  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(18rem, 43svh, 24rem) !important;
  }

  .complaint-display {
    height: 36rem !important;
    min-height: 36rem !important;
  }
}

@media (max-width: 900px) {
  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    width: var(--mobile-card) !important;
    max-width: 21.75rem !important;
  }
}

/* ================================================================
   CORREÇÃO DE PROPORÇÃO MOBILE — 2026-08-06
   Compacta a Hero sem reduzir a leitura e elimina o corte horizontal
   dos cards de localização. Escopo exclusivamente mobile.
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --mobile-page: min(94vw, 24.5rem);
    --mobile-card: min(91vw, 23.5rem);
    --mobile-text: min(87vw, 22.5rem);
  }

  /* HERO — altura natural, sem distribuição artificial de espaços. */
  .hero-mobile,
  .hero-mobile-reverse {
    display: flex !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(15.2rem, 42svh, 18.2rem) !important;
    flex: 0 0 auto !important;
  }

  .hero-mobile-photo,
  .hero-mobile-photo-profile,
  .hero-state[data-hero-state="0"] .hero-mobile-photo,
  .hero-state[data-hero-state="1"] .hero-mobile-photo-profile {
    max-width: 96vw !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    display: flex !important;
    width: var(--mobile-card) !important;
    max-width: 23.5rem !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin: -1.45rem auto 0 !important;
    padding: 1.05rem 1rem 0.95rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.72rem !important;
    border-radius: 1.7rem !important;
    overflow: hidden !important;
  }

  .hero-mobile-copy::before {
    inset: 0.3rem !important;
    border-radius: 1.42rem !important;
  }

  .hero-mobile-title,
  .hero-mobile-title-two-lines,
  .hero-mobile-reverse .hero-mobile-title {
    width: 100% !important;
    max-width: 20.5rem !important;
    margin: 0 auto !important;
    font-size: clamp(1.75rem, 8.1vw, 2.15rem) !important;
    line-height: 1.03 !important;
  }

  .hero-state[data-hero-state="1"] .hero-mobile-title,
  .hero-state[data-hero-state="1"] .hero-mobile-title-two-lines {
    font-size: clamp(1.62rem, 7.4vw, 2rem) !important;
    line-height: 1.07 !important;
  }

  .hero-mobile-eyebrow {
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
  }

  .hero-mobile-divider,
  .hero-mobile-reverse .hero-mobile-divider {
    width: 66% !important;
    margin: 0 !important;
  }

  .hero-mobile-copy > p:not(.hero-mobile-signature, .hero-mobile-eyebrow),
  .hero-mobile-reverse .hero-mobile-copy > p:not(.hero-mobile-eyebrow) {
    width: 100% !important;
    max-width: 20rem !important;
    margin: 0 auto !important;
    font-size: clamp(0.84rem, 3.7vw, 0.96rem) !important;
    line-height: 1.43 !important;
  }

  .hero-mobile-cta,
  .hero-mobile-cta-simple,
  .hero-mobile-reverse .hero-mobile-cta-simple {
    width: 100% !important;
    max-width: 20rem !important;
    min-height: 3rem !important;
    margin: 0 auto !important;
    padding: 0.7rem 0.85rem !important;
    font-size: clamp(0.78rem, 3.35vw, 0.88rem) !important;
    line-height: 1.18 !important;
  }

  .hero-mobile-signature {
    margin: 0.05rem 0 0 !important;
    font-size: clamp(1.22rem, 5vw, 1.5rem) !important;
  }

  /* LOCALIZAÇÕES — um card por linha e nenhuma largura oculta. */
  .locations-layout,
  .locations-copy,
  .location-cards,
  .location-cards article {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .locations-layout {
    width: var(--mobile-page) !important;
    max-width: 24.5rem !important;
  }

  .locations-media,
  .locations-copy,
  .location-cards,
  .location-main-cta {
    width: var(--mobile-card) !important;
    max-width: 23.5rem !important;
    margin-inline: auto !important;
  }

  .location-cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  .location-cards article {
    width: 100% !important;
    padding: 1rem !important;
    border-radius: 1.25rem !important;
  }

  .location-cards article h3 {
    display: flex !important;
    min-width: 0 !important;
    align-items: baseline !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .location-cards article h3 span,
  .location-cards article h3 small {
    white-space: normal !important;
  }

  .location-cards article p {
    max-width: 19rem !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
}

@media (max-width: 370px) {
  :root {
    --mobile-page: min(95vw, 21.5rem);
    --mobile-card: min(92vw, 20.8rem);
    --mobile-text: min(88vw, 19.8rem);
  }

  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(14.2rem, 39svh, 16rem) !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    padding: 0.9rem 0.82rem 0.82rem !important;
    gap: 0.58rem !important;
  }

  .hero-mobile-title,
  .hero-mobile-title-two-lines,
  .hero-mobile-reverse .hero-mobile-title {
    font-size: clamp(1.58rem, 7.8vw, 1.85rem) !important;
  }

  .hero-state[data-hero-state="1"] .hero-mobile-title,
  .hero-state[data-hero-state="1"] .hero-mobile-title-two-lines {
    font-size: clamp(1.48rem, 7vw, 1.72rem) !important;
  }

  .hero-mobile-copy > p:not(.hero-mobile-signature, .hero-mobile-eyebrow),
  .hero-mobile-reverse .hero-mobile-copy > p:not(.hero-mobile-eyebrow) {
    font-size: 0.8rem !important;
  }

  .hero-mobile-cta,
  .hero-mobile-cta-simple,
  .hero-mobile-reverse .hero-mobile-cta-simple {
    min-height: 2.75rem !important;
    font-size: 0.76rem !important;
  }
}

@media (max-width: 900px) and (max-height: 740px) and (orientation: portrait) {
  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(12.8rem, 36svh, 14.8rem) !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    margin-top: -1.2rem !important;
    padding-top: 0.78rem !important;
    padding-bottom: 0.72rem !important;
    gap: 0.46rem !important;
  }

  .hero-mobile-title,
  .hero-mobile-title-two-lines,
  .hero-mobile-reverse .hero-mobile-title {
    font-size: clamp(1.45rem, 6.9vw, 1.75rem) !important;
  }

  .hero-mobile-copy > p:not(.hero-mobile-signature, .hero-mobile-eyebrow),
  .hero-mobile-reverse .hero-mobile-copy > p:not(.hero-mobile-eyebrow) {
    font-size: 0.76rem !important;
    line-height: 1.34 !important;
  }

  .hero-mobile-cta,
  .hero-mobile-cta-simple,
  .hero-mobile-reverse .hero-mobile-cta-simple {
    min-height: 2.55rem !important;
    padding-block: 0.55rem !important;
  }

  .hero-mobile-signature {
    font-size: 1.15rem !important;
  }
}

/* Validação visual final: ampliar a fotografia da Hero e manter os cards
   de localização dentro da largura interna da box. */
@media (max-width: 900px) {
  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(18rem, 48svh, 24.5rem) !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    margin-top: -0.9rem !important;
  }

  .locations-copy .location-cards,
  .locations-copy .location-main-cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 370px) {
  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(16rem, 44svh, 19rem) !important;
  }
}

@media (max-width: 900px) and (max-height: 740px) and (orientation: portrait) {
  .hero-mobile-scene,
  .hero-state[data-hero-state="0"] .hero-mobile-scene,
  .hero-state[data-hero-state="1"] .hero-mobile-scene {
    height: clamp(13.5rem, 38svh, 16rem) !important;
  }

  .hero-mobile-copy,
  .hero-mobile-reverse .hero-mobile-copy {
    margin-top: -0.75rem !important;
  }
}

/* ================================================================
   CORREÇÃO HERO + LOCALIZAÇÕES — 2026-08-06
   Mantém o segundo estado da Hero até a saída da seção e restaura
   Localizações com dois cards lado a lado, como no layout aprovado.
   ================================================================ */
@media (max-width: 900px) {
  /* Duas etapas naturais de rolagem: primeira -> segunda -> próxima seção. */
  .hero-story {
    height: 165svh !important;
    min-height: 0 !important;
  }

  /* LOCALIZAÇÕES: volta ao arranjo compacto de duas colunas. */
  .locations-layout {
    width: min(94vw, 24.5rem) !important;
    max-width: 24.5rem !important;
  }

  .locations-media,
  .locations-copy {
    width: min(91vw, 23.5rem) !important;
    max-width: 23.5rem !important;
    margin-inline: auto !important;
  }

  .locations-copy .location-cards {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .locations-copy .location-cards article {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 5.55rem !important;
    padding: 0.72rem 0.38rem !important;
    border-radius: 1rem !important;
  }

  .locations-copy .location-cards article h3 {
    display: flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-items: baseline !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
    font-size: clamp(1rem, 4.45vw, 1.32rem) !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .locations-copy .location-cards article h3 span,
  .locations-copy .location-cards article h3 small {
    white-space: nowrap !important;
  }

  .locations-copy .location-cards article h3 small {
    font-size: 0.58em !important;
  }

  .locations-copy .location-main-cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 350px) {
  .locations-copy .location-cards {
    gap: 0.42rem !important;
  }

  .locations-copy .location-cards article {
    padding-inline: 0.25rem !important;
  }

  .locations-copy .location-cards article h3 {
    font-size: 0.98rem !important;
    gap: 0.14rem !important;
  }
}

/* 2026-08-06 — ajuste pontual do respiro no início da seção Sobre */
@media (max-width: 900px) {
  .about-section {
    padding-top: clamp(1.65rem, 6vw, 2rem) !important;
  }

  .about-mobile-eyebrow {
    margin-bottom: 0.5rem !important;
  }
}


/* ================================================================
   AJUSTES MOBILE FINAIS — 2026-08-07
   - Remove o 2º estado da Hero no celular.
   - Reduz os respiros no topo das seções.
   - Centraliza “Programa de acompanhamento”.
   - Melhora a distribuição tipográfica de Queixas e Experiências.
   ================================================================ */
@media (max-width: 900px) {
  /* HERO MOBILE: manter apenas o primeiro estado, sem etapa 02 no celular */
  .hero-story {
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-state[data-hero-state="1"],
  .story-progress,
  .scroll-cue {
    display: none !important;
  }

  .hero-state[data-hero-state="0"] {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .hero-state[data-hero-state="0"] .hero-mobile {
    min-height: 0 !important;
  }

  .hero-state[data-hero-state="0"] .hero-mobile-scene {
    height: clamp(16.4rem, 43svh, 19.2rem) !important;
  }

  .hero-state[data-hero-state="0"] .hero-mobile-copy {
    margin: -1.2rem auto 0 !important;
  }

  /* REDUZIR ESPAÇO NO COMEÇO DAS SEÇÕES */
  .approach-section {
    padding-top: calc(var(--header-height) + 0.08rem) !important;
  }

  .program-sticky {
    padding-top: calc(var(--header-height) + 0.08rem) !important;
  }

  .complaints-section {
    padding-top: calc(var(--header-height) + 0.08rem) !important;
  }

  .reviews-section {
    padding-top: calc(var(--header-height) + 0.08rem) !important;
  }

  .about-section {
    padding-top: calc(var(--header-height) + 0.08rem) !important;
  }

  /* ABORDAGEM */
  .approach-section .section-heading,
  .approach-copy {
    padding-top: 0 !important;
  }

  .approach-section .section-heading .eyebrow,
  .approach-copy .eyebrow {
    margin-bottom: 0.5rem !important;
  }

  .approach-section .section-heading h2,
  .approach-copy h2 {
    margin-bottom: 0.65rem !important;
  }

  .pillar-carousel {
    margin-top: 1rem !important;
  }

  /* PROGRAMA */
  .program-copy > .eyebrow {
    width: 100% !important;
    margin: 0 0 0.35rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .program-copy > h2 {
    margin-bottom: 0.25rem !important;
  }

  .program-intro {
    width: 100% !important;
    max-width: 21rem !important;
    margin: 0 0 0.7rem !important;
  }

  .program-media {
    margin-bottom: 0.8rem !important;
  }

  .program-stages {
    width: 100% !important;
    max-width: 21rem !important;
  }

  /* QUEIXAS */
  .complaints-copy > .eyebrow {
    margin-bottom: 0.45rem !important;
  }

  .complaints-copy > h2 {
    width: 100% !important;
    max-width: 20.9rem !important;
    margin: 0 0 0.65rem !important;
    font-size: clamp(2.12rem, 9.4vw, 2.85rem) !important;
    line-height: 1.01 !important;
    text-wrap: balance !important;
  }

  .complaints-lead {
    width: 100% !important;
    max-width: 21rem !important;
    margin: 0 0 0.9rem !important;
    font-size: 0.9rem !important;
    line-height: 1.56 !important;
  }

  /* EXPERIÊNCIAS */
  .reviews-layout {
    width: var(--mobile-page) !important;
    max-width: 24rem !important;
    gap: 1rem !important;
  }

  .reviews-intro {
    width: 100% !important;
    max-width: 100% !important;
  }

  .reviews-intro .eyebrow {
    margin-bottom: 0.5rem !important;
  }

  .reviews-intro h2 {
    width: 100% !important;
    max-width: 19.5rem !important;
    margin-bottom: 0.7rem !important;
    font-size: clamp(2.12rem, 9.4vw, 2.8rem) !important;
    line-height: 0.99 !important;
    text-wrap: balance !important;
  }

  .reviews-intro > p:not(.public-note) {
    width: 100% !important;
    max-width: 20.7rem !important;
    font-size: 0.93rem !important;
    line-height: 1.55 !important;
  }

  .reviews-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
    margin: 0.9rem 0 0.9rem !important;
    align-items: start !important;
  }

  .google-rating {
    justify-self: start !important;
  }

  .public-note {
    max-width: none !important;
    padding-left: 0 !important;
  }

  .reviews-intro > .button.button-primary {
    width: var(--mobile-card) !important;
    max-width: 23.5rem !important;
  }
}
/* ================================================================
   REPARO MOBILE CONSOLIDADO — 2026-08-07
   Este arquivo é carregado por último e substitui apenas o mobile.
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --repair-page: min(92vw, 23.5rem);
    --repair-text: min(88vw, 22rem);
  }

  html,
  body,
  main,
  main > section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main > section {
    scroll-margin-top: calc(var(--header-height) + 0.45rem) !important;
  }

  /* Hero: somente o primeiro estado no celular. */
  .hero-story {
    height: auto !important;
    min-height: 0 !important;
  }

  .hero-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-state[data-hero-state="1"],
  .story-progress,
  .scroll-cue {
    display: none !important;
  }

  .hero-state[data-hero-state="0"] {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Remove os grandes respiros artificiais entre as seções. */
  .approach-section,
  .complaints-section,
  .about-section,
  .reviews-section {
    min-height: 0 !important;
    padding-top: 0.72rem !important;
  }

  .approach-section {
    padding-bottom: 0.9rem !important;
  }

  .about-section,
  .reviews-section,
  .complaints-section {
    padding-bottom: 2rem !important;
  }

  .approach-section > .site-shell,
  .approach-layout,
  .complaints-layout,
  .about-layout,
  .reviews-layout {
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  .approach-section .section-heading .eyebrow,
  .approach-copy .eyebrow,
  .complaints-copy > .eyebrow,
  .reviews-intro .eyebrow,
  .about-mobile-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 0.48rem !important;
  }

  .pillar-carousel {
    margin-top: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  .pillar-carousel-controls {
    margin-top: 0.4rem !important;
    margin-bottom: 0 !important;
  }

  /* ============================================================
     PROGRAMA: sticky real com 3 estados durante a rolagem.
     ============================================================ */
  .program-story {
    position: relative !important;
    height: 270svh !important;
    min-height: 118rem !important;
    overflow: visible !important;
    background: #110906 !important;
  }

  .program-sticky {
    position: sticky !important;
    top: var(--header-height) !important;
    height: calc(100svh - var(--header-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .program-layout {
    display: flex !important;
    width: var(--repair-page) !important;
    max-width: 23.5rem !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 0.42rem 0 0.55rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .program-copy {
    display: contents !important;
  }

  .program-copy::before,
  .program-media::before,
  .program-media::after {
    display: none !important;
  }

  .program-copy > .eyebrow {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 0.2rem !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: clamp(0.58rem, 2.7vw, 0.68rem) !important;
    letter-spacing: 0.19em !important;
  }

  .program-copy > .eyebrow span {
    width: 2rem !important;
  }

  .program-copy > h2 {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 0.22rem !important;
    font-size: clamp(2.45rem, 11.7vw, 3.45rem) !important;
    line-height: 0.91 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
  }

  .program-intro {
    order: 3 !important;
    width: 100% !important;
    max-width: 22rem !important;
    margin: 0 0 0.48rem !important;
    font-size: clamp(0.78rem, 3.35vw, 0.9rem) !important;
    line-height: 1.43 !important;
    text-align: left !important;
  }

  .program-media {
    order: 4 !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(13.8rem, 36svh, 18.5rem) !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0.42rem !important;
    overflow: hidden !important;
    border-radius: 1.5rem !important;
  }

  .program-visual,
  .program-visual.has-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
  }

  .program-stages {
    order: 5 !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(8.7rem, 19svh, 9.8rem) !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .program-stage {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    text-align: left !important;
  }

  .stage-meta {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 0.28rem !important;
    align-items: center !important;
    gap: 0.55rem !important;
  }

  .stage-meta strong {
    flex: 0 0 auto !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
  }

  .stage-meta i {
    width: 2.7rem !important;
    flex: 0 0 2.7rem !important;
  }

  .stage-meta span {
    display: block !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  .stage-meta span::after {
    content: attr(data-mobile-label) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
  }

  .program-stage h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.3rem !important;
    font-size: clamp(1.95rem, 8.8vw, 2.55rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.035em !important;
    text-align: left !important;
  }

  .program-stage p {
    width: 100% !important;
    max-width: 22rem !important;
    margin: 0 !important;
    font-size: clamp(0.76rem, 3.18vw, 0.86rem) !important;
    line-height: 1.42 !important;
    text-align: left !important;
  }

  .program-pagination {
    order: 6 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 2.65rem !important;
    flex: 0 0 2.65rem !important;
    margin: 0.22rem 0 0 !important;
    align-items: center !important;
  }

  .program-pagination button {
    width: 2.55rem !important;
    height: 2.55rem !important;
    flex: 0 0 2.55rem !important;
    font-size: 0.8rem !important;
  }

  .program-pagination i {
    min-width: 0 !important;
    margin-inline: 0.48rem !important;
  }

  /* Transição para Queixas sem área vazia extra. */
  .complaints-section {
    margin-top: 0 !important;
  }

  .complaints-copy > h2 {
    width: 100% !important;
    max-width: 20.5rem !important;
    margin: 0 0 0.58rem !important;
    font-size: clamp(2.08rem, 9.25vw, 2.75rem) !important;
    line-height: 1.01 !important;
    text-wrap: balance !important;
  }

  .complaints-lead {
    width: 100% !important;
    max-width: 21rem !important;
    margin: 0 0 0.78rem !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  /* Sobre: aproxima o início da seção da seção anterior. */
  .about-mobile-eyebrow {
    margin-bottom: 0.38rem !important;
  }

  .about-media,
  .about-media.has-image {
    margin-top: 0 !important;
  }

  /* Experiências: compacta o topo e melhora a largura do texto. */
  .reviews-intro h2 {
    max-width: 20rem !important;
    margin-bottom: 0.58rem !important;
    font-size: clamp(2.08rem, 9.2vw, 2.72rem) !important;
    line-height: 0.99 !important;
  }

  .reviews-intro > p:not(.eyebrow):not(.public-note) {
    max-width: 21rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 900px) and (max-height: 720px) and (orientation: portrait) {
  .program-layout {
    padding-top: 0.28rem !important;
    padding-bottom: 0.3rem !important;
  }

  .program-copy > h2 {
    font-size: clamp(2.15rem, 10.4vw, 2.8rem) !important;
  }

  .program-intro {
    margin-bottom: 0.3rem !important;
    font-size: 0.74rem !important;
    line-height: 1.34 !important;
  }

  .program-media {
    height: clamp(11.8rem, 31svh, 14.5rem) !important;
    margin-bottom: 0.28rem !important;
  }

  .program-stages {
    height: 8rem !important;
  }

  .program-stage h3 {
    font-size: clamp(1.72rem, 8vw, 2.15rem) !important;
  }

  .program-stage p {
    font-size: 0.71rem !important;
    line-height: 1.34 !important;
  }

  .program-pagination {
    min-height: 2.3rem !important;
    flex-basis: 2.3rem !important;
  }

  .program-pagination button {
    width: 2.2rem !important;
    height: 2.2rem !important;
    flex-basis: 2.2rem !important;
  }
}

/* ================================================================
   CORREÇÃO DA ÁREA VAZIA DO PROGRAMA — 2026-08-07
   Remove a altura mínima excessiva e restaura o sticky no viewport.
   ================================================================ */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: clip !important;
  }

  main {
    overflow: visible !important;
  }

  main > section {
    overflow-x: clip !important;
  }

  .program-story {
    height: 205svh !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none !important;
  }

  .program-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--header-height) !important;
    display: block !important;
    width: 100% !important;
    height: calc(100svh - var(--header-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .program-layout {
    position: relative !important;
    z-index: 1 !important;
  }

  .complaints-section {
    position: relative !important;
    z-index: 2 !important;
  }
}


/* ================================================================
   AJUSTE VISUAL MOBILE — box da Abordagem + moldura do Programa
   2026-08-07
   ================================================================ */
@media (max-width: 900px) {
  /* ABORDAGEM — card mais elegante para as informações */
  .pillar-grid {
    padding: 0.12rem 0 0.42rem !important;
  }

  .pillar-card {
    position: relative !important;
    width: min(92vw, 22.8rem) !important;
    min-width: min(92vw, 22.8rem) !important;
    flex-basis: min(92vw, 22.8rem) !important;
    min-height: 17rem !important;
    margin-inline: auto !important;
    padding: 1.25rem 1.15rem 1.12rem !important;
    border-radius: 1.65rem !important;
    border: 1px solid rgba(207, 157, 88, 0.58) !important;
    background:
      radial-gradient(circle at 24% 14%, rgba(171, 92, 36, 0.18), transparent 38%),
      linear-gradient(145deg, rgba(53, 24, 12, 0.92), rgba(18, 8, 5, 0.97) 74%) !important;
    box-shadow:
      0 0 0 1px rgba(119, 66, 34, 0.36),
      0 0.95rem 2rem rgba(0, 0, 0, 0.26),
      inset 0 0 1rem rgba(255, 212, 143, 0.05) !important;
    overflow: hidden !important;
  }

  .pillar-card::before {
    position: absolute !important;
    inset: 0.3rem !important;
    border: 1px solid rgba(225, 184, 118, 0.36) !important;
    border-radius: 1.35rem !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .pillar-symbol {
    width: 3.6rem !important;
    height: 3.6rem !important;
    margin-bottom: 1rem !important;
  }

  .pillar-number {
    top: 1.15rem !important;
    right: 1.2rem !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.16em !important;
  }

  .pillar-card h3 {
    margin: 0 0 0.75rem !important;
    padding-bottom: 0.78rem !important;
    border-bottom: 1px solid rgba(206, 157, 88, 0.5) !important;
    font-size: clamp(1.7rem, 7.4vw, 2.05rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }

  .pillar-card p {
    max-width: 18.8rem !important;
    font-size: 0.96rem !important;
    line-height: 1.5 !important;
  }

  /* PROGRAMA — moldura menos quadrada e mais espaço embaixo */
  .program-story {
    height: 214svh !important;
  }

  .program-layout {
    padding: 0.42rem 0 max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  .program-media {
    position: relative !important;
    width: min(90vw, 20.8rem) !important;
    max-width: 20.8rem !important;
    height: clamp(14.4rem, 34svh, 17rem) !important;
    margin: 0 auto 0.55rem !important;
    border-radius: 1.8rem 1.8rem 2.7rem 2.7rem !important;
    border: 1px solid rgba(214, 165, 96, 0.5) !important;
    background:
      radial-gradient(circle at 50% 16%, rgba(143, 76, 32, 0.18), transparent 42%),
      linear-gradient(180deg, rgba(34, 15, 8, 0.92), rgba(11, 5, 3, 0.97)) !important;
    box-shadow:
      0 0 0 1px rgba(104, 58, 28, 0.34),
      0 1rem 2.3rem rgba(0, 0, 0, 0.28),
      inset 0 0 1rem rgba(255, 214, 146, 0.05) !important;
    overflow: hidden !important;
  }

  .program-media::before {
    display: block !important;
    position: absolute !important;
    inset: 0.42rem !important;
    border: 1px solid rgba(222, 179, 107, 0.32) !important;
    border-radius: 1.45rem 1.45rem 2.25rem 2.25rem !important;
    content: "" !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .program-media::after {
    display: block !important;
    position: absolute !important;
    inset: auto 0.9rem -1.35rem 0.9rem !important;
    height: 2.7rem !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(214, 158, 90, 0.18), rgba(214, 158, 90, 0) 68%) !important;
    content: "" !important;
    pointer-events: none !important;
    filter: blur(0.35rem) !important;
    z-index: 1 !important;
  }

  .program-visual,
  .program-visual.has-image {
    inset: 0.52rem !important;
    border-radius: 1.35rem 1.35rem 2rem 2rem !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .program-stages {
    height: clamp(10.4rem, 24.5svh, 12rem) !important;
    margin-bottom: 0.1rem !important;
  }

  .stage-meta {
    margin: 0 0 0.35rem !important;
  }

  .program-stage h3 {
    margin: 0 0 0.36rem !important;
    font-size: clamp(2.1rem, 9vw, 2.8rem) !important;
    line-height: 0.94 !important;
  }

  .program-stage p {
    max-width: 20.9rem !important;
    font-size: clamp(0.8rem, 3.28vw, 0.92rem) !important;
    line-height: 1.44 !important;
  }

  .program-pagination {
    min-height: 2.95rem !important;
    flex-basis: 2.95rem !important;
    margin-top: 0.35rem !important;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom)) !important;
  }
}


/* ================================================================
   PROGRAMA MOBILE — VERSÃO FINAL POR CLIQUE
   2026-08-08

   Regras:
   - sem sticky no celular;
   - sem troca por scroll;
   - etapas 01, 02 e 03 acionadas pelos botões;
   - altura natural, sem cortes e sem áreas vazias;
   - imagem integral, sem filtro, máscara ou sobreposição;
   - fundo exclusivo para separar a seção das demais.
   ================================================================ */
@media (max-width: 900px) {
  .program-story {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
    border-top: 1px solid rgba(220, 172, 103, 0.34) !important;
    border-bottom: 1px solid rgba(220, 172, 103, 0.28) !important;
    background-color: #160a05 !important;
    background-image: url("./assets/images/programa-mobile-background-20260808.png") !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow:
      inset 0 1.1rem 2.2rem rgba(0, 0, 0, 0.22),
      inset 0 -1.1rem 2.2rem rgba(0, 0, 0, 0.2) !important;
  }

  .program-sticky {
    position: relative !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: calc(var(--header-height) + 0.9rem) 0 2.6rem !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .program-sticky::before,
  .program-sticky::after,
  .program-copy::before,
  .program-media::before,
  .program-media::after {
    display: none !important;
    content: none !important;
  }

  .program-layout {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    width: min(91vw, 24rem) !important;
    max-width: 24rem !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .program-copy {
    display: contents !important;
  }

  .program-copy > .eyebrow {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 0.55rem !important;
    justify-content: center !important;
    text-align: center !important;
    color: #d4a96f !important;
    font-size: clamp(0.64rem, 2.7vw, 0.72rem) !important;
    letter-spacing: 0.17em !important;
    line-height: 1.35 !important;
  }

  .program-copy > .eyebrow span {
    width: 2rem !important;
    flex: 0 0 2rem !important;
  }

  .program-copy > h2 {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 0.45rem !important;
    color: #f2ebe2 !important;
    font-size: clamp(3rem, 13.2vw, 4rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.045em !important;
    text-align: left !important;
  }

  .program-intro {
    order: 3 !important;
    width: 100% !important;
    max-width: 22.5rem !important;
    margin: 0 0 1rem !important;
    color: #e3d9ce !important;
    font-size: clamp(0.94rem, 3.75vw, 1.04rem) !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .program-media {
    order: 4 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 23rem !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 1rem !important;
    padding: 0.42rem !important;
    overflow: hidden !important;
    border: 1px solid rgba(222, 175, 105, 0.66) !important;
    border-radius: 2rem 2rem 3.4rem 3.4rem !important;
    background: rgba(15, 7, 4, 0.76) !important;
    box-shadow:
      0 0 0 1px rgba(102, 57, 30, 0.55),
      0 0 1.2rem rgba(207, 133, 55, 0.14),
      0 1.15rem 2.4rem rgba(0, 0, 0, 0.28) !important;
  }

  .program-visual,
  .program-visual.has-image {
    position: absolute !important;
    inset: 0.42rem !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    border-radius: 1.62rem 1.62rem 2.95rem 2.95rem !important;
    background-color: #100704 !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-blend-mode: normal !important;
    filter: none !important;
    transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transition: opacity 220ms ease, visibility 0s linear 220ms !important;
  }

  .program-visual.is-active,
  .program-visual.has-image.is-active {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 220ms ease !important;
  }

  .program-visual .program-rings {
    display: none !important;
  }

  .program-stages {
    order: 5 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .program-stage,
  .program-stage[aria-hidden="true"] {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  .program-stage.is-active,
  .program-stage[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .stage-meta {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 0.5rem !important;
    align-items: center !important;
    gap: 0.65rem !important;
  }

  .stage-meta strong {
    flex: 0 0 auto !important;
    color: #d6af78 !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
  }

  .stage-meta i {
    width: 3.2rem !important;
    flex: 0 0 3.2rem !important;
    background: rgba(212, 158, 86, 0.7) !important;
  }

  .stage-meta span {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    color: #d9b47f !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  .stage-meta span::after {
    content: attr(data-mobile-label) !important;
    font-size: clamp(0.65rem, 2.6vw, 0.74rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
  }

  .program-stage h3 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 0.55rem !important;
    color: #f2ebe2 !important;
    font-size: clamp(2.55rem, 10.8vw, 3.35rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.035em !important;
    text-align: left !important;
  }

  .program-stage p {
    width: 100% !important;
    max-width: 22.4rem !important;
    margin: 0 !important;
    color: #e4d9ce !important;
    font-size: clamp(0.96rem, 3.65vw, 1.04rem) !important;
    line-height: 1.52 !important;
    text-align: left !important;
  }

  .program-pagination {
    order: 6 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 3.5rem !important;
    margin: 1.25rem 0 0 !important;
    padding: 0 0 max(0.25rem, env(safe-area-inset-bottom)) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .program-pagination button {
    display: grid !important;
    width: 3.35rem !important;
    height: 3.35rem !important;
    flex: 0 0 3.35rem !important;
    place-items: center !important;
    border: 1px solid rgba(211, 158, 89, 0.5) !important;
    border-radius: 50% !important;
    background: rgba(19, 9, 5, 0.86) !important;
    color: rgba(233, 211, 183, 0.62) !important;
    font-family: var(--serif) !important;
    font-size: 0.92rem !important;
    box-shadow: none !important;
  }

  .program-pagination button.is-active {
    border-color: #e0b67d !important;
    background: linear-gradient(145deg, #d59b5d, #f0c98f) !important;
    color: #251309 !important;
    box-shadow:
      0 0 0 0.3rem rgba(184, 118, 54, 0.2),
      0 0 1rem rgba(235, 174, 98, 0.35) !important;
  }

  .program-pagination i {
    width: auto !important;
    min-width: 1.6rem !important;
    max-width: 3.6rem !important;
    height: 1px !important;
    flex: 1 1 auto !important;
    margin-inline: 0.65rem !important;
    background: linear-gradient(90deg, rgba(212, 158, 86, 0.62), rgba(212, 158, 86, 0.18)) !important;
  }

  .complaints-section {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    padding-top: calc(var(--header-height) + 0.75rem) !important;
  }
}

@media (max-width: 370px) {
  .program-sticky {
    padding-top: calc(var(--header-height) + 0.65rem) !important;
  }

  .program-copy > h2 {
    font-size: clamp(2.65rem, 12.6vw, 3.4rem) !important;
  }

  .program-media {
    border-radius: 1.7rem 1.7rem 2.8rem 2.8rem !important;
  }

  .program-stage h3 {
    font-size: clamp(2.25rem, 10.3vw, 2.8rem) !important;
  }

  .program-stage p {
    font-size: 0.91rem !important;
  }

  .program-pagination button {
    width: 3.05rem !important;
    height: 3.05rem !important;
    flex-basis: 3.05rem !important;
  }
}