/* =========================================================
   ELO18 — V32
   Revisão minuciosa de regressões visuais e responsividade
   ========================================================= */

/* ---------------------------------------------------------
   01. PROBLEMA — quebras editoriais controladas
   --------------------------------------------------------- */
.problem-heading .problem-title__primary,
.problem-heading .problem-title__accent,
.problem-heading .problem-title__primary > span,
.problem-heading .problem-title__accent > span {
  display: block;
}

.problem-heading.problem-heading--centered .display-title {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

.problem-heading .problem-title__primary {
  font-size: .96em;
  line-height: .92;
}

.problem-heading .problem-title__accent {
  margin-top: .14em;
  line-height: .88;
}

.problem-heading .problem-title__primary > span,
.problem-heading .problem-title__accent > span {
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .problem-heading.problem-heading--centered {
    width: 100% !important;
    padding-inline: 12px;
  }

  .problem-heading.problem-heading--centered .display-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2.15rem, 10.4vw, 3rem) !important;
    line-height: .94 !important;
  }

  .problem-heading .problem-title__primary {
    font-size: .94em;
  }

  .problem-heading .problem-title__accent {
    font-size: 1.02em;
  }

  .problem-details.problem-details--centered .problem-lead {
    max-width: 19em !important;
  }
}

/* ---------------------------------------------------------
   02. SANFONA — cancelar rotação antiga e manter controle legível
   --------------------------------------------------------- */
.method .pillar-arrow,
.method .pillar.is-active .pillar-arrow {
  transform: none !important;
  writing-mode: horizontal-tb !important;
}

.method .pillar-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 126px !important;
  white-space: nowrap !important;
}

.method .pillar-arrow::before {
  display: inline-block !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .method .pillar-arrow {
    min-width: 40px !important;
  }

  .method .pillar-arrow::before {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   03. METODOLOGIA MOBILE — geometria exata e palavras inteiras
   --------------------------------------------------------- */
@media (max-width: 720px) {
  .method-cycle__mobile {
    position: relative !important;
    width: 320px !important;
    max-width: 100% !important;
    height: 320px !important;
    margin-inline: auto !important;
  }

  .method-mobile-routes {
    inset: 0 !important;
    width: 320px !important;
    max-width: 100% !important;
    height: 320px !important;
  }

  .method .method-cycle__mobile .method-mobile-node {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    min-height: 112px !important;
    padding: .7rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .26rem !important;
    border-radius: 50% !important;
  }

  .method .method-cycle__mobile .method-mobile-node span {
    width: 1.42rem !important;
    height: 1.42rem !important;
    margin: 0 !important;
    font-size: .48rem !important;
  }

  .method .method-cycle__mobile .method-mobile-node strong {
    max-width: none !important;
    font-family: var(--font-sans) !important;
    font-size: .64rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .method-mobile-node--attraction {
    top: -12px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  .method-mobile-node--permanence {
    top: 162px !important;
    left: 4px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .method-mobile-node--confirmation {
    top: 162px !important;
    right: 4px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .method-mobile-node--attraction:hover,
  .method-mobile-node--attraction:focus-visible,
  .method-mobile-node--attraction.is-active {
    transform: translateX(-50%) scale(1.035) !important;
  }

  .method-mobile-node--permanence:hover,
  .method-mobile-node--permanence:focus-visible,
  .method-mobile-node--permanence.is-active,
  .method-mobile-node--confirmation:hover,
  .method-mobile-node--confirmation:focus-visible,
  .method-mobile-node--confirmation.is-active {
    transform: scale(1.035) !important;
  }

  .method-cycle__mobile-note {
    position: absolute !important;
    top: 139px !important;
    left: 50% !important;
    width: 118px !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
}

@media (max-width: 360px) {
  .method-cycle__mobile {
    width: 296px !important;
    height: 296px !important;
  }

  .method-mobile-routes {
    width: 296px !important;
    height: 296px !important;
  }

  .method .method-cycle__mobile .method-mobile-node {
    width: 102px !important;
    height: 102px !important;
    min-width: 102px !important;
    min-height: 102px !important;
  }

  .method-mobile-node--attraction { top: -10px !important; }
  .method-mobile-node--permanence { top: 151px !important; left: 2px !important; }
  .method-mobile-node--confirmation { top: 151px !important; right: 2px !important; }
  .method-cycle__mobile-note { top: 128px !important; }
}

/* ---------------------------------------------------------
   04. ORIGEM ANIMADA MOBILE — uma etapa por vez e pergunta central
   --------------------------------------------------------- */
@media (max-width: 720px) {
  .origin-story__stage {
    position: relative !important;
    min-height: 100svh !important;
  }

  .origin-story__question {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(calc(100vw - 44px), 330px) !important;
    height: 100% !important;
    margin: auto !important;
    display: grid !important;
    place-content: center !important;
    gap: .08em !important;
    text-align: center !important;
    font-size: clamp(2rem, 9.3vw, 2.75rem) !important;
    line-height: .94 !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }

  .origin-story__question > span {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  .origin-story__question > span + span {
    margin-top: .08em !important;
  }

  .origin-story__word {
    top: 58% !important;
    left: 50% !important;
    width: calc(100vw - 28px) !important;
    height: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    font-size: clamp(5.1rem, 25vw, 7.2rem) !important;
    line-height: .82 !important;
    text-align: center !important;
    z-index: 7 !important;
  }

  .origin-story__image img {
    object-position: center center !important;
  }
}

/* ---------------------------------------------------------
   05. CONTEÚDO DE ORIGEM — proporção e hierarquia corrigidas
   --------------------------------------------------------- */
@media (min-width: 901px) {
  .origin-content__inner {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: clamp(4rem, 7vw, 7rem) !important;
    align-items: center !important;
  }

  .origin-content__heading .display-title {
    width: 100% !important;
    max-width: 10.8ch !important;
    font-size: clamp(3.2rem, 4.6vw, 5.25rem) !important;
    line-height: .93 !important;
  }
}

.origin-content__heading .display-title > span,
.origin-content__heading .display-title > em {
  display: block !important;
  white-space: normal !important;
}

.origin-content__heading .display-title > em {
  margin-block: .08em !important;
}

.origin-content__copy {
  gap: 1.2rem !important;
}

.origin-content__teaser {
  max-width: 34ch !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(1.12rem, 1.55vw, 1.38rem) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
  color: var(--aqua-soft) !important;
}

@media (max-width: 900px) {
  .origin-content__inner {
    grid-template-columns: 1fr !important;
  }

  .origin-content__heading .display-title {
    max-width: 12ch !important;
    font-size: clamp(2.7rem, 11vw, 4.2rem) !important;
  }
}

/* ---------------------------------------------------------
   06. PÁGINA SOBRE — header sólido, grids e contraste
   --------------------------------------------------------- */
.about-page .site-header {
  background: rgba(7,20,33,.98) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.about-page .site-header .desktop-nav a,
.about-page .site-header .header-cta,
.about-page .site-header .about-back-mobile {
  color: var(--white) !important;
}

.about-page .about-back-mobile {
  display: none;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.about-page .about-main {
  padding-top: var(--header-h) !important;
}

.about-page .about-hero {
  min-height: min(820px, calc(100svh - var(--header-h)));
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 10vh, 8rem) !important;
}

.about-page .about-hero .display-title {
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  font-size: clamp(3.3rem, 5.35vw, 6rem) !important;
  line-height: .91 !important;
}

.about-page .about-hero .display-title > span,
.about-page .about-hero .display-title > em {
  display: block !important;
  white-space: normal !important;
}

.about-page .about-hero .display-title > em {
  margin-top: .06em;
}

.about-page .about-section.section-dark {
  background: #0c1823 !important;
}

.about-page .about-grid {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
  gap: clamp(3rem, 5vw, 5.5rem) !important;
  align-items: start !important;
}

.about-page .about-title {
  width: 100% !important;
  max-width: 11.8ch !important;
  font-size: clamp(2.65rem, 3.65vw, 4.25rem) !important;
  line-height: .95 !important;
  overflow: visible !important;
  text-wrap: balance !important;
}

.about-page .about-title > span {
  display: block !important;
  white-space: normal !important;
}

.about-page .section-light .about-highlight {
  color: var(--ink) !important;
}

.about-page .section-light .about-highlight span {
  color: var(--aqua) !important;
}

.about-page .about-cards,
.about-page .about-pillars {
  align-items: stretch;
}

.about-page .about-card,
.about-page .about-pillars article {
  min-width: 0;
}

.about-page .about-list li {
  min-width: 0;
}

@media (max-width: 1080px) {
  .about-page .about-grid {
    grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr) !important;
    gap: 2.5rem !important;
  }

  .about-page .about-title {
    font-size: clamp(2.4rem, 4.2vw, 3.5rem) !important;
  }
}

@media (max-width: 900px) {
  .about-page .about-grid,
  .about-page .about-cards,
  .about-page .about-pillars {
    grid-template-columns: 1fr !important;
  }

  .about-page .about-title {
    max-width: 15ch !important;
  }

  .about-page .desktop-nav {
    display: none !important;
  }

  .about-page .about-back-mobile {
    display: inline-flex;
  }
}

@media (max-width: 720px) {
  .about-page .site-header {
    padding-inline: 18px !important;
  }

  .about-page .about-main {
    padding-top: var(--header-h) !important;
  }

  .about-page .about-hero {
    min-height: auto;
    padding-block: 4.8rem !important;
  }

  .about-page .about-hero .display-title {
    font-size: clamp(2.45rem, 10.6vw, 3.35rem) !important;
  }

  .about-page .about-section {
    padding-block: 4.8rem !important;
  }

  .about-page .about-title {
    max-width: 12ch !important;
    font-size: clamp(2.2rem, 9.6vw, 3rem) !important;
  }

  .about-page .about-hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}