/* A história da Reobote acompanha os cartões, o vidro e as curvas das demais páginas. */
.sobre-page .about-story,
.sobre-page .about-identity,
.sobre-page .about-region {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 100px;
}

.sobre-page .about-story,
.sobre-page .about-identity { background: var(--paper); }
.sobre-page .about-story { padding-block: clamp(64px, 7.5vw, 108px) clamp(60px, 7vw, 100px); }

.sobre-page .about-story__ribbon {
  position: absolute;
  z-index: -1;
  top: -30px;
  left: calc(50% - 980px);
  width: 1500px;
  height: 720px;
  fill: none;
  stroke: #e4eaf3;
  stroke-width: 110;
  opacity: .8;
  pointer-events: none;
}

.sobre-page .about-story__grid {
  display: grid;
  grid-template-columns: 1fr .88fr;
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.sobre-page .about-story__grid > div { min-width: 0; }
.sobre-page .about-story__copy > .eyebrow { color: #2c3b56; }

.sobre-page .about-story__copy > h2 {
  max-width: 720px;
  font-size: clamp(2.6rem, 4.3vw, 4rem);
  line-height: 1.08;
}

.sobre-page .about-story__copy > p:not(.eyebrow) {
  margin-top: 24px;
  max-width: 580px;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.9;
}

.sobre-page .about-story__copy > .text-link { margin-top: 24px; max-width: 100%; }

.sobre-page .about-story__photo {
  overflow: hidden;
  border-radius: clamp(48px, 5vw, 76px) 6px 40px 6px;
  background: var(--navy);
  color: var(--white);
}

.sobre-page .about-story__photo > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sobre-page .about-story__photo > figcaption {
  display: grid;
  gap: 8px;
  padding: 24px 28px 27px;
  font: 400 1.25rem/1.3 var(--display);
  letter-spacing: -.02em;
}

.sobre-page .about-story__photo > figcaption > span {
  color: var(--sky);
  font: 500 .6875rem/1.6 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sobre-page .about-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.sobre-page .about-highlight-motion { min-width: 0; }

.sobre-page .about-highlight {
  height: 100%;
  min-width: 0;
  padding: 34px 30px 36px;
  border-radius: 46px 6px 36px 6px;
  background: var(--navy);
  color: var(--white);
}

.sobre-page .about-highlight .big-value {
  display: block;
  min-height: 106px;
  margin-bottom: 24px;
  color: var(--sky);
  font: 400 clamp(4.5rem, 7vw, 6rem)/1.1 var(--display);
  letter-spacing: -.06em;
}

.sobre-page .about-highlight .big-value > .value-unit {
  margin-left: 7px;
  color: var(--white);
  font-size: 1rem;
  letter-spacing: -.02em;
}

.sobre-page .about-highlight .big-value.value-word {
  display: flex;
  align-items: center;
  font-size: clamp(2.6rem, 4.2vw, 3.7rem);
  line-height: 1.1;
  letter-spacing: -.055em;
}

.sobre-page .about-highlight > h3 {
  margin-bottom: 16px;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.sobre-page .about-highlight > p { color: #c5d0e4; font-size: .875rem; line-height: 1.85; }

.sobre-page .about-identity { padding-block: 20px clamp(112px, 10vw, 148px); }

.sobre-page .about-identity__ribbon {
  position: absolute;
  z-index: -2;
  top: -35%;
  right: -10%;
  width: 110%;
  height: 150%;
  fill: none;
  stroke: #e7ecf4;
  stroke-width: 110;
  pointer-events: none;
}

.sobre-page .about-identity__wash {
  position: absolute;
  z-index: -1;
  inset: 8% -12% -12%;
  filter: blur(30px);
  background:
    radial-gradient(ellipse at 7% 62%, #12224e 0%, #203361 9%, transparent 31%),
    radial-gradient(ellipse at 52% 48%, #7a88a5 0%, #b6bfd0 16%, transparent 37%),
    radial-gradient(ellipse at 96% 42%, #82afe4 0%, #a6c9ee 17%, transparent 39%);
  pointer-events: none;
}

.sobre-page .about-identity__panel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .87);
  border-radius: 42px 8px 42px 8px;
  background: rgba(243, 247, 253, .88);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 16px 38px rgba(30, 48, 82, .09);
  color: #0c153e;
}

.sobre-page .about-identity__brand,
.sobre-page .about-identity__verse { min-width: 0; }

.sobre-page .about-identity__brand {
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 4.8vw, 66px);
}

.sobre-page .about-identity__brand > .eyebrow { color: #2c3b56; margin-bottom: 30px; }

.sobre-page .about-identity__brand > h2 {
  font-size: clamp(3.6rem, 7.6vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.065em;
}

.sobre-page .about-identity__meaning {
  margin-top: 25px;
  font: 400 clamp(1.5rem, 2.8vw, 2.25rem)/1.25 var(--display);
  letter-spacing: -.035em;
}

.sobre-page .about-identity__description {
  margin-top: 27px;
  max-width: 450px;
  color: #2c3b56;
  font-size: .9375rem;
  line-height: 1.85;
}

.sobre-page .about-identity__values {
  margin-top: 34px;
  padding-top: 23px;
  border-top: 1px solid #66789636;
  color: #2c3b56;
  font-size: .75rem;
  line-height: 1.8;
  font-weight: 600;
}

.sobre-page .about-identity__verse {
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 4.8vw, 66px);
  border-radius: 78px 0 40px 0;
  background: var(--navy);
  color: var(--white);
}

.sobre-page .about-identity__verse-label {
  display: block;
  max-width: 290px;
  color: var(--sky);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.sobre-page .about-identity__verse cite { display: block; margin-top: 30px; font-style: normal; }

.sobre-page .verse-reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 18px;
  width: 100%;
  border-radius: 4px;
  color: var(--white);
}

.sobre-page .verse-reference > span {
  grid-column: 1 / -1;
  font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--display);
  letter-spacing: -.03em;
}

.sobre-page .verse-reference > strong {
  font: 400 clamp(4.2rem, 8.3vw, 7.8rem)/.96 var(--display);
  letter-spacing: -.065em;
  white-space: nowrap;
}

.sobre-page .verse-reference > svg {
  width: 25px;
  height: 25px;
  margin-bottom: 9px;
}

.sobre-page .verse-reference:hover { color: var(--white); }
.sobre-page .verse-reference:focus-visible { outline: 3px solid var(--sky); outline-offset: 8px; }

.sobre-page .about-identity__verse > blockquote {
  margin: 34px 0 0;
  padding-top: 27px;
  border-top: 1px solid #a7ccf54d;
}

.sobre-page .about-identity__verse > blockquote > p {
  font: 400 clamp(1.4rem, 2.25vw, 1.85rem)/1.45 var(--display);
  letter-spacing: -.02em;
}

.sobre-page .about-identity__translation {
  margin-top: auto;
  padding-top: 25px;
  color: #b9cce4;
  font-size: .75rem;
  line-height: 1.7;
}

.sobre-page .about-identity > .section-curve { fill: var(--paper); }

.sobre-page .about-region {
  padding-block: clamp(135px, 12vw, 170px) clamp(130px, 12vw, 170px);
  background: var(--navy);
  color: var(--white);
}

.sobre-page .about-region__grid {
  display: grid;
  grid-template-columns: 1fr .85fr;
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
}

.sobre-page .about-region__grid > div { min-width: 0; }
.sobre-page .about-region .eyebrow,
.sobre-page .about-region em { color: var(--sky); }

.sobre-page .about-region h2 {
  font-size: clamp(2.6rem, 4.3vw, 4rem);
  line-height: 1.08;
}

.sobre-page .about-region__grid > div > p:not(.eyebrow) { color: #c5d0e4; font-size: .9375rem; line-height: 1.9; }

.sobre-page .about-locations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.sobre-page .about-locations > li {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 13px 18px;
  border: 1px solid #a7ccf54d;
  border-radius: 18px 4px 18px 4px;
  background: #ffffff0a;
  color: #e5effb;
  font-size: .875rem;
  line-height: 1.6;
}

.sobre-page .about-locations > li:last-child { grid-column: 1 / -1; }
.sobre-page .about-region .text-link { max-width: 100%; color: var(--sky); border-color: #a7ccf570; }
.sobre-page .about-region .text-link:focus-visible { outline-color: var(--sky); }
.sobre-page .about-region > .section-curve { fill: #e6eef9; }
.sobre-page .about-region > .section-curve.curve-top { fill: var(--paper); }
.sobre-page .about-region + .cta-band { border-top: 0; }

@supports ((backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px))) {
  .sobre-page .about-identity__panel {
    background: linear-gradient(125deg, rgba(255, 255, 255, .76), rgba(240, 246, 255, .66));
    -webkit-backdrop-filter: blur(24px) saturate(115%);
    backdrop-filter: blur(24px) saturate(115%);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sobre-page .about-highlight { transition: transform .25s var(--ease); }
  .sobre-page .about-highlight-motion:hover > .about-highlight { transform: translateY(-3px) scale(1.015); }
}

@media (max-width: 1000px) {
  .sobre-page .about-story__grid,
  .sobre-page .about-region__grid { gap: 40px; }
  .sobre-page .about-highlights { gap: 18px; }
  .sobre-page .about-highlight { padding: 28px 24px 32px; }
  .sobre-page .about-highlight .big-value { min-height: 82px; font-size: clamp(3rem, 6vw, 4.5rem); }
  .sobre-page .about-highlight .big-value.value-word { font-size: clamp(2.2rem, 4vw, 2.8rem); }
  .sobre-page .about-highlight > h3 { font-size: 1.2rem; }
  .sobre-page .about-identity__brand,
  .sobre-page .about-identity__verse { padding: 35px 30px; }
  .sobre-page .about-identity__brand > h2 { font-size: clamp(3.4rem, 7.2vw, 4.5rem); }
  .sobre-page .about-identity__meaning { font-size: 1.65rem; }
  .sobre-page .verse-reference { column-gap: 12px; }
  .sobre-page .verse-reference > strong { font-size: clamp(4rem, 7.4vw, 5.4rem); }
  .sobre-page .about-locations { gap: 10px; }
  .sobre-page .about-locations > li { padding-inline: 14px; font-size: .8125rem; }
}

@media (max-width: 760px) {
  .sobre-page .about-story,
  .sobre-page .about-identity,
  .sobre-page .about-region { scroll-margin-top: 88px; }
  .sobre-page .about-story { padding-block: 54px; }
  .sobre-page .about-story__ribbon { left: -400px; width: 1150px; height: 620px; stroke-width: 84; }
  .sobre-page .about-story__grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .sobre-page .about-story__copy > h2 { font-size: clamp(2.25rem, 8vw, 3.25rem); line-height: 1.1; }
  .sobre-page .about-story__copy > p:not(.eyebrow) { margin-top: 23px; }
  .sobre-page .about-story__photo { border-radius: 54px 6px 34px 6px; }
  .sobre-page .about-story__photo > figcaption { padding: 23px 24px 25px; font-size: 1.2rem; }
  .sobre-page .about-highlights { grid-template-columns: 1fr; gap: 20px; }
  .sobre-page .about-highlight { padding: 30px 28px 34px; border-radius: 38px 6px 30px 6px; }
  .sobre-page .about-highlight .big-value { min-height: 84px; font-size: clamp(4rem, 12vw, 6rem); margin-bottom: 20px; }
  .sobre-page .about-highlight .big-value.value-word { font-size: clamp(2.8rem, 9vw, 4rem); }
  .sobre-page .about-highlight > h3 { font-size: 1.3rem; }
  .sobre-page .about-identity { padding-block: 10px 94px; }
  .sobre-page .about-identity__ribbon { width: 185%; right: -60%; }
  .sobre-page .about-identity__wash { inset: 30% -42% -10%; }
  .sobre-page .about-identity__panel { grid-template-columns: 1fr; border-radius: 34px 6px 34px 6px; }
  .sobre-page .about-identity__brand { padding: 34px 28px 37px; }
  .sobre-page .about-identity__brand > .eyebrow { margin-bottom: 27px; }
  .sobre-page .about-identity__brand > h2 { font-size: clamp(3.6rem, 13vw, 6rem); }
  .sobre-page .about-identity__meaning { margin-top: 22px; font-size: clamp(1.5rem, 5.3vw, 2.3rem); }
  .sobre-page .about-identity__description { margin-top: 24px; font-size: .875rem; }
  .sobre-page .about-identity__values { margin-top: 27px; padding-top: 20px; }
  .sobre-page .about-identity__verse { padding: 35px 28px; border-radius: 58px 0 32px 0; }
  .sobre-page .about-identity__verse cite { margin-top: 26px; }
  .sobre-page .verse-reference > strong { font-size: clamp(4.5rem, 17vw, 7rem); }
  .sobre-page .verse-reference > svg { width: 23px; height: 23px; }
  .sobre-page .about-identity__verse > blockquote { margin-top: 27px; padding-top: 24px; }
  .sobre-page .about-identity__verse > blockquote > p { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .sobre-page .about-region { padding-block: 96px 104px; }
  .sobre-page .about-region__grid { grid-template-columns: 1fr; gap: 30px; }
  .sobre-page .about-region h2 { font-size: clamp(2.3rem, 8vw, 3.25rem); }
  .sobre-page .about-locations { margin-block: 25px; }
}

@media (max-width: 380px) {
  .sobre-page .about-story__photo > figcaption { padding-inline: 22px; }
  .sobre-page .about-story__copy > .text-link { font-size: .8125rem; gap: 18px; }
  .sobre-page .about-highlight { padding-inline: 24px; }
  .sobre-page .about-identity__brand { padding: 30px 22px 32px; }
  .sobre-page .about-identity__verse { padding: 32px 22px; }
  .sobre-page .about-identity__brand > h2 { font-size: 3.6rem; }
  .sobre-page .about-identity__values { font-size: .6875rem; }
  .sobre-page .verse-reference > strong { font-size: 4.5rem; }
  .sobre-page .about-locations > li { padding-inline: 12px; font-size: .75rem; }
  .sobre-page .about-region .text-link { font-size: .8125rem; gap: 18px; }
}

@media (prefers-reduced-transparency: reduce) {
  .sobre-page .about-identity__panel {
    background: #edf2fa;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sobre-page .about-story__copy > .text-link > svg,
  .sobre-page .about-region .text-link > svg { transition: none; }
  .sobre-page .about-story__copy > .text-link:hover > svg,
  .sobre-page .about-region .text-link:hover > svg { transform: none; }
}