/* ═══════════════════════════════════════════════════════════
   GT BARBEARIA — STYLESHEET
   Dark grunge aesthetic | Orange fire accents
═══════════════════════════════════════════════════════════ */

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

:root {
  /* Preserve the authored light/dark sections instead of automatic recoloring. */
  color-scheme: only light;
  --orange: #FF6A00;
  --orange-light: #FF8C33;
  --orange-glow: rgba(255, 106, 0, 0.35);
  --black: #0A0A0A;
  --dark: #111111;
  --white: #F5F5F5;
  --gray: #888888;
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html {
  scroll-behavior: auto;
  overflow-x: hidden;
}

/* Keep the gutter width fixed so revealing the thumb never shifts the page. */
@media (forced-colors: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: transparent #0a0a0a;
  }
  html.scrollbar-active { scrollbar-color: #55483e #0a0a0a; }
  html::-webkit-scrollbar { width: 8px; }
  html::-webkit-scrollbar-track { background: #0a0a0a; }
  html::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
  html.scrollbar-active::-webkit-scrollbar-thumb { background: #55483e; }
  html::-webkit-scrollbar-thumb:hover { background: #79604c; }
  html::-webkit-scrollbar-button { display: none; }
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Keep native layout stable while Lenis controls desktop wheel scrolling. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis-smooth {
  scroll-behavior: auto !important;
  overflow-anchor: none;
  overscroll-behavior-y: none;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Let wheel events reach the page while passing over a map in motion. */
.lenis.lenis-scrolling .location-map iframe {
  pointer-events: none;
}

/* ═══════════════════════════════════════
   PRELOADER
═══════════════════════════════════════ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

#preloader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#preloader-logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
}

.gt-logo-text {
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 14rem);
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1;
  transform: rotate(-8deg);
  display: inline-block;
  text-shadow:
    0 0 40px var(--orange-glow),
    0 0 80px rgba(255, 106, 0, 0.15);
  -webkit-text-stroke: 2px var(--orange);
}

#preloader-bar-wrap {
  position: relative;
  z-index: 2;
  width: 280px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

#preloader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  border-radius: 2px;
  box-shadow: 0 0 12px var(--orange);
  transition: width 0.1s linear;
}

#preloader-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: var(--gray);
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--black);
  display: flex;
  flex-direction: column;
  contain: layout style paint;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.68;
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
#navbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px;
  width: 100%;
}

/* GT Logo — tilted */
.gt-logo-nav {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--white);
  letter-spacing: 0.02em;
  display: inline-block;
  transform: rotate(-8deg);
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
  -webkit-text-stroke: 1px var(--orange);
  text-shadow: 0 0 20px var(--orange-glow);
}

.gt-logo-nav:hover {
  color: var(--orange);
}

/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-link {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(245, 245, 245, 0.6);
  transition: color 0.3s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--orange);
  transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Social icons */
.nav-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(245, 245, 245, 0.6);
  transition: color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}

.social-icon svg {
  width: 100%;
  height: 100%;
}

.social-icon:hover {
  color: var(--orange);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════
   BARBERS SHOWCASE
═══════════════════════════════════════ */
#barbers-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 5;
  gap: 0;
  padding: 0 40px;
  /* Let hover scale and parallax extend above the tallest portrait. */
  contain: layout style;
}

/* Individual card */
.barber-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 380px;
  cursor: pointer;
}

.barber-card.center {
  flex: 1.15;
  max-width: 440px;
  z-index: 6;
}

/* Orange outline silhouette — delayed scroll follower */
.barber-outline {
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  bottom: 80px;
  /* stop above barber-info */
  border: 2px solid var(--orange);
  border-radius: 4px 4px 0 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 10px var(--orange)) drop-shadow(0 0 25px rgba(255, 106, 0, 0.4));
  transform-origin: bottom center;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style paint;
}

/* Image wrapper — handles hover scale + scroll parallax */
.barber-img-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

.barber-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.6s ease;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8));
  will-change: transform;
  max-height: 82vh;
  contain: layout style paint;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Side cards slightly smaller */
.barber-card:not(.center) .barber-img {
  max-height: 72vh;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8)) brightness(0.85);
}

/* Hover: scale up smoothly */
.barber-card:hover .barber-img {
  transform: scale(1.06) translateY(-8px);
  filter: drop-shadow(0 30px 60px rgba(255, 106, 0, 0.25)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8)) brightness(1.05);
}

.barber-card:not(.center):hover .barber-img {
  filter: drop-shadow(0 30px 60px rgba(255, 106, 0, 0.25)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8)) brightness(1.0);
}

/* Barber info label */
.barber-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 28px;
  gap: 2px;
  position: relative;
  z-index: 7;
}

.barber-firstname {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--orange);
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255, 106, 0, 0.5);
  display: block;
}

.barber-lastname {
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
}

.barber-instagram {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1vw, 0.78rem);
  font-weight: 300;
  color: rgba(245, 245, 245, 0.55);
  letter-spacing: 0.1em;
  display: block;
  margin-top: 2px;
  transition: color 0.3s ease;
}

.barber-card:hover .barber-instagram {
  color: var(--orange-light);
}

/* ═══════════════════════════════════════
   HERO BOTTOM GRADIENT
═══════════════════════════════════════ */
#hero-bottom-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to top, var(--black) 0%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}

/* ═══════════════════════════════════════
   SOBRE NÓS SECTION
═══════════════════════════════════════ */
/* White editorial surface, using the hero's condensed type and orange. */
#sobre-nos {
  position: relative;
  background: #fff;
  color: var(--black);
  padding: clamp(64px, 6vw, 112px) 5%;
  contain: layout style;
}

.sobre-shell {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}



.sobre-city {
  color: #626262;
  font-size: 12px;
}

.sobre-nos-container {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.sobre-photo {
  margin: 0;
  min-width: 0;
}

.sobre-nos-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e9e9e9;
}

.sobre-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.sobre-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 3px solid var(--orange);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #575757;
}

.sobre-caption span:first-child {
  color: #141414;
}

.sobre-nos-content {
  min-width: 0;
  padding-block: 18px;
}

.sobre-titulo {
  font-family: var(--font-display);
  font-size: clamp(72px, 7.8vw, 132px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.94;
  margin: 0 0 36px;
}

.sobre-titulo>span {
  display: block;
}

.sobre-title-accent {
  color: #c94f00;
}

.sobre-copy {
  max-width: 480px;
}

.sobre-lead {
  font-size: clamp(20px, 1.6vw, 25px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

.sobre-texto {
  font-size: 16px;
  line-height: 1.85;
  color: #555;
  margin: 0;
}

.sobre-signature {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #dedede;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.sobre-monogram {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: #c94f00;
  transform: rotate(-8deg);
}

.sobre-signature-detail {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  color: #666;
}

.sobre-valores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 64px;
  padding: 32px 0;
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
}

.valor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
}

.valor-item+.valor-item {
  border-left: 1px solid #dedede;
}

.valor-numero {
  font-family: var(--font-display);
  font-size: clamp(56px, 5.2vw, 86px);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.valor-plus {
  color: #c94f00;
}

.valor-label {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5b5b5b;
}

@media (max-width: 900px) {
  #navbar {
    padding: 20px 24px;
  }

  .nav-links {
    display: none;
  }

  #barbers-container {
    padding: 0 20px;
    gap: 0;
  }

  .barber-firstname {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }

  #sobre-nos {
    padding: 60px 30px;
    min-height: auto;
  }

  .sobre-nos-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .sobre-valores {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  #barbers-container {
    padding: 0 10px;
  }

  .barber-card.center {
    flex: 1.3;
  }

  .barber-img {
    max-height: 55vh;
  }

  .barber-card:not(.center) .barber-img {
    max-height: 45vh;
  }

  #sobre-nos {
    padding: 40px 20px;
  }

  .sobre-nos-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sobre-valores {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Custom painted lettering; independent wrapper retains scroll parallax. */
.hero-brand {
  position: absolute;
  top: clamp(84px, 9vh, 120px);
  left: 0;
  width: 100%;
  padding: 0 4%;
  z-index: 3;
  pointer-events: none;
}

.hero-title {
  width: min(100%, 180vh, 1740px);
  margin: 0 auto;
  line-height: 0;
}

.hero-lettering {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(0.88) contrast(1.06);
}

@media (max-width: 600px) {
  .hero-brand {
    top: 24%;
    padding: 0 3%;
  }
}


/* Useful entry points frame the team without competing with the title. */
.hero-actions {
  position: absolute;
  bottom: 34px;
  inset-inline: 48px;
  z-index: 9;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  pointer-events: none;
}

.hero-actions a {
  pointer-events: auto;
}

.hero-location {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #b9ada4;
}

.hero-location span {
  color: var(--orange);
  margin-inline: 6px;
}

.booking-link,
.hero-story {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 46px;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.07em;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.booking-link {
  padding: 12px 18px;
  color: var(--white);
  border: 1px solid rgba(255, 106, 0, 0.65);
  background: rgba(10, 10, 10, 0.65);
}

.booking-link:hover {
  background: var(--orange);
  color: #0a0a0a;
}

.hero-story {
  color: #b9ada4;
  border-bottom: 1px solid #433128;
}

.hero-story:hover {
  color: var(--white);
  border-color: var(--orange);
}

.hero-story span {
  color: var(--orange);
  font-size: 20px;
}

a:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 5px;
}

.barber-instagram {
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

.barber-instagram:hover,
.barber-instagram:focus-visible {
  color: var(--orange-light);
  text-decoration: underline;
}

.barber-card:focus-within .barber-firstname {
  color: var(--orange-light);
}

#sobre-nos {
  scroll-margin-top: 24px;
}

@media (max-width: 1599px) {
  #barbers-container {
    bottom: 84px;
  }

  .hero-actions {
    bottom: 18px;
    inset-inline: 28px;
    align-items: flex-end;
  }
}

@media (max-width: 600px) {
  .hero-location {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .hero-actions {
    inset-inline: 16px;
    bottom: 12px;
    gap: 12px;
  }

  .booking-link {
    font-size: 12px;
    padding: 10px 12px;
    gap: 8px;
  }

  .hero-story {
    font-size: 12px;
    max-width: 120px;
    gap: 8px;
    line-height: 1.5;
  }

  .barber-info {
    min-width: 0;
    width: 100%;
    padding-bottom: 18px;
  }

  .barber-instagram {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 10px;
    letter-spacing: 0;
    text-align: center;
  }

  .barber-lastname {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {

  .booking-link,
  .hero-story {
    transition: none;
  }
}

@media (max-width: 900px) {
  #sobre-nos {
    padding: 64px 6%;
  }

  .sobre-nos-container {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 32px;
  }

  .sobre-titulo {
    font-size: clamp(64px, 9vw, 82px);
  }


  .sobre-signature {
    gap: 12px;
  }

  .sobre-valores {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .valor-item {
    gap: 12px;
    padding-inline: 12px;
  }
}

@media (max-width: 600px) {
  #sobre-nos {
    padding: 48px 24px;
  }

  .sobre-nos-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sobre-nos-content {
    grid-row: 1;
    padding: 0;
  }

  .sobre-titulo {
    font-size: clamp(64px, 17vw, 100px);
    margin-bottom: 26px;
  }



  .sobre-city {
    font-size: 12px;
    letter-spacing: 0;
  }

  .sobre-nos-image {
    max-height: 520px;
  }

  .sobre-valores {
    margin-top: 32px;
    padding: 24px 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .valor-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-inline: 12px;
  }

  .valor-item:first-child {
    padding-left: 0;
  }

  .valor-item:last-child {
    padding-right: 0;
  }

  .valor-numero {
    font-size: clamp(40px, 11vw, 64px);
  }

  .valor-label {
    font-size: 12px;
    letter-spacing: 0;
  }
}

.sobre-closing {
  margin: 30px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #c94f00;
}

/* Match the hero's screen height while letting enlarged text grow naturally. */
@media (min-width: 901px) {
  #sobre-nos {
    min-height: max(700px, 100vh);
    padding: 24px 5%;
    display: flex;
    align-items: center;
    scroll-margin-top: 0;
  }

  .sobre-shell {
    max-width: 1200px;
  }


  .sobre-nos-container {
    gap: clamp(36px, 5vw, 80px);
  }

  .sobre-photo {
    width: 100%;
    max-width: clamp(300px, calc((100vh - 300px) * 0.8), 480px);
    justify-self: center;
  }

  .sobre-nos-image {
    aspect-ratio: 4 / 5;
  }

  .sobre-caption {
    padding-top: 10px;
    letter-spacing: 0.08em;
  }

  .sobre-nos-content {
    padding-block: 0;
  }

  .sobre-titulo {
    font-size: clamp(64px, 10vh, 100px);
    margin-bottom: 20px;
  }

  .sobre-lead {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 14px;
  }

  .sobre-texto {
    line-height: 1.65;
  }

  .sobre-signature {
    margin-top: 20px;
    padding-top: 16px;
  }

  .sobre-valores {
    margin-top: 24px;
    padding: 14px 0;
  }

  .valor-numero {
    font-size: clamp(48px, 6.5vh, 64px);
  }

  .sobre-closing {
    margin-top: 16px;
    font-size: clamp(26px, 3.5vh, 34px);
  }
}

/* Two real prints share one fixed-size album frame. */
.sobre-nos-image.album-stage {
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.album-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  border: 5px solid #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12), 0 0 0 1px #dedede;
  transform-origin: 50% 85%;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), filter 550ms ease;
}

.album-photo[aria-hidden="false"] {
  z-index: 2;
  transform: translate(0, 0) rotate(0);
}

.album-photo[aria-hidden="true"] {
  z-index: 1;
  transform: translate(12px, -9px) rotate(4deg) scale(0.98);
  filter: brightness(0.87);
  pointer-events: none;
}

.album-photo .sobre-img-current {
  filter: none;
}

.album-next {
  position: absolute;
  right: -24px;
  top: calc(50% - 26px);
  z-index: 3;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #151515;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background 180ms ease, transform 180ms ease;
}

.album-next svg {
  width: 24px;
  height: 24px;
}

.album-next:hover {
  background: #c94f00;
  transform: translateX(2px);
}

.album-next:focus-visible {
  outline: 3px solid #c94f00;
  outline-offset: 4px;
}

.album-next:disabled {
  cursor: progress;
}

.album-stage+.sobre-caption {
  margin-top: 12px;
}

.album-error {
  margin-top: 10px;
  font-size: 14px;
  color: #a23b00;
}

@media (max-width: 600px) {
  .album-photo[aria-hidden="true"] {
    transform: translate(7px, -7px) rotate(3deg) scale(0.98);
  }

  .album-next {
    right: -12px;
    width: 48px;
    height: 48px;
    top: calc(50% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .album-photo,
  .album-next {
    transition: none;
  }
}

/* Readable dates on both album photographs. */
.sobre-caption .album-date {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: #141414;
  text-align: right;
}

.sobre-caption {
  align-items: baseline;
}

/* Club subscriptions: black surface, orange accents, one card per plan. */
#planos {
  background: #090909;
  color: #f5f5f5;
  min-height: max(700px, 100vh);
  padding: clamp(48px, 6vh, 80px) 5%;
  display: flex;
  align-items: center;
}

.plans-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}



.plans-title {
  margin: 14px 0 34px;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 94px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.plans-title>span {
  color: var(--orange);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.plan-card {
  --plan-x: 50%;
  --plan-y: 40%;
  position: relative;
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid #39312b;
  border-top: 2px solid #b54b08;
  background: #121212;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: border-color 220ms ease, transform 220ms ease;
}

.plan-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(250px circle at var(--plan-x) var(--plan-y), rgba(255, 106, 0, 0.20), transparent 85%);
  transition: opacity 220ms ease;
}

.plan-card:hover,
.plan-card:focus-within {
  border-color: var(--orange);
}

.plan-card:hover::before,
.plan-card:focus-within::before {
  opacity: 1;
}

.plan-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

/* The two surface layers live below the unchanged, selectable card content. */
.plan-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.plan-card.has-plan-reveal::before { display: none; }
.plan-card.has-plan-reveal:hover { transform: none; }

.plan-card h3 {
  font-family: var(--font-display);
  font-size: clamp(40px, 3.5vw, 54px);
  font-weight: 400;
  line-height: 1;
}

.plan-card h3 span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--orange-light);
}

.plan-benefit {
  margin: 30px 0 0;
  min-height: 52px;
  font-size: 16px;
  line-height: 1.6;
  color: #ddd6d0;
}

.plan-price {
  margin: 28px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.plan-currency {
  font-size: 16px;
  color: #b4aaa1;
}

.plan-price strong {
  font-family: var(--font-display);
  font-size: clamp(48px, 4.6vw, 70px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plan-period {
  font-size: 14px;
  color: #b4aaa1;
}

.plan-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin-top: auto;
  padding: 14px 18px;
  border: 1px solid #85451d;
  color: #f5f5f5;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.plan-button svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--orange);
  transition: transform 200ms ease;
}

.plan-button:hover,
.plan-button:focus-visible {
  background: var(--orange);
  color: #090909;
  border-color: var(--orange);
}

.plan-button:hover svg,
.plan-button:focus-visible svg {
  color: #090909;
  transform: translateX(3px);
}

.plans-units {
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.13em;
  color: #aba29b;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan-card:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 900px) {
  .plans-grid {
    gap: 14px;
  }

  .plan-card {
    padding: 22px 18px;
  }

  .plan-price {
    gap: 4px;
  }

  .plan-price strong {
    font-size: 48px;
  }

  .plan-button {
    padding-inline: 12px;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 700px) {
  #planos {
    padding: 48px 24px;
    min-height: auto;
  }

  .plans-title {
    font-size: clamp(48px, 11vw, 72px);
  }

  .plans-title>span {
    display: block;
  }

  .plans-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .plan-card {
    padding: 28px;
  }

  .plan-benefit {
    min-height: 0;
    margin-top: 22px;
  }

  .plan-price {
    margin-block: 24px;
  }

  .plan-price strong {
    font-size: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .plan-card,
  .plan-card::before,
  .plan-button,
  .plan-button svg {
    transition: none;
  }
}

/* Orange closing section: maps first, contact below. */
.site-footer {
  background: #202225;
  color: #f4f4f2;
  padding: clamp(48px, 6vw, 80px) 5% 0;
}

.footer-shell {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}



.locations-title {
  font-family: var(--font-display);
  font-size: clamp(46px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 1;
  margin: 14px 0 34px;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.location-card {
  min-width: 0;
}

.location-map {
  height: clamp(240px, 22vw, 300px);
  background: #303236;
  border: 1px solid #505257;
}

.location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.location-details {
  padding: 22px 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.location-details h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 10px;
}

.location-details address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  max-width: 340px;
}

.location-details address span {
  color: #bfc0c3;
  font-size: 14px;
}

.location-route {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--orange-light);
}

.location-route svg {
  width: 20px;
  height: 20px;
}

.location-route:hover {
  border-bottom-width: 3px;
}

.footer-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-block: clamp(48px, 6vw, 80px);
}

.footer-eyebrow {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.footer-contact h2 {
  font-family: var(--font-display);
  font-size: clamp(46px, 5.5vw, 76px);
  line-height: 1;
  font-weight: 400;
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.footer-contact-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-decoration: none;
  border: 1px solid #515358;
  transition: background 200ms ease, color 200ms ease;
}

.footer-contact-links small {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 7px;
}

.footer-contact-links strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  font-weight: 400;
}

.footer-contact-links svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.footer-whatsapp {
  background: var(--orange);
  color: #101010;
}

.footer-whatsapp:hover {
  background: #ff8c33;
}

.footer-instagram {
  color: #f4f4f2;
  background: #292c30;
}

.footer-instagram:hover {
  background: #35393e;
  color: #fff;
}

.footer-contact-links a:hover svg {
  transform: translate(2px, -2px);
}

.site-footer a:focus-visible {
  outline: 3px solid var(--orange-light);
  outline-offset: 5px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.footer-identity {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-credit {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #aaa;
  transform: translateY(4px);
}

.footer-credit span {
  display: inline-block;
  color: #ededed;
}

.footer-brand span {
  font-size: 23px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-nav a,
.footer-top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.footer-nav a:hover,
.footer-top:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer-top {
  gap: 12px;
}

.footer-top span {
  font-size: 22px;
}

@media (max-width: 1000px) {
  .location-details {
    flex-direction: column;
    gap: 10px;
  }

  .footer-contact {
    gap: 32px;
  }

  .footer-contact-links a {
    padding: 18px;
  }
}

@media (max-width: 700px) {
  .site-footer {
    padding: 48px 24px 0;
  }

  .locations-grid,
  .footer-contact {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .location-map {
    height: 260px;
  }

  .location-details {
    padding-top: 18px;
  }

  .footer-contact {
    padding-block: 44px;
  }

  .footer-bottom {
    flex-wrap: wrap;
    gap: 10px 24px;
  }

  .footer-identity {
    width: 100%;
    gap: 14px;
  }

  .footer-nav {
    order: 3;
    width: 100%;
    gap: 18px;
  }

  .footer-top {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .footer-contact-links a,
  .footer-contact-links svg {
    transition: none;
  }
}

.site-footer .footer-eyebrow,
.site-footer .location-route svg,
.site-footer .footer-brand {
  color: var(--orange-light);
}

/* Stable touch layout with native scrolling and no continuously rendered effects. */
@media (max-width: 900px),
(hover: none),
(pointer: coarse) {
  #hero {
    height: 100svh;
    background: radial-gradient(ellipse at 50% 42%, #38200f 0%, #1c1009 42%, #0a0a0a 80%);
  }

  #hero-canvas,
  #preloader-canvas {
    display: none;
  }

  #planos {
    min-height: 100svh;
  }

  .barber-img,
  .barber-card:not(.center) .barber-img,
  .barber-card:hover .barber-img,
  .barber-card:not(.center):hover .barber-img {
    filter: none;
    transition: none;
    will-change: auto;
    perspective: none;
  }

  .barber-card:hover .barber-img {
    transform: none;
  }

  .barber-img-wrap,
  .barber-outline {
    will-change: auto;
  }

  .barber-outline {
    display: none;
  }

  .hero-lettering {
    filter: none;
  }

  .barber-img {
    max-height: 82svh;
  }

  .barber-card:not(.center) .barber-img {
    max-height: 72svh;
  }
}

@media (max-width: 600px) {
  .barber-img {
    max-height: 55svh;
  }

  .barber-card:not(.center) .barber-img {
    max-height: 45svh;
  }
}

@media (min-width: 901px) and (pointer: coarse) {
  #sobre-nos {
    min-height: max(700px, 100svh);
  }

  .sobre-photo {
    max-width: clamp(300px, calc((100svh - 300px) * 0.8), 480px);
  }
}
/* Team carousel: animate the group independently of image hover and parallax. */
#barbers-container { padding-inline: clamp(44px, 5vw, 88px); }
.barber-group { display: flex; align-items: flex-end; justify-content: center; width: 100%; min-width: 0; }
.barber-group[hidden] { display: none !important; }
.barber-group-pair { gap: clamp(16px, 4vw, 72px); }
.barber-group-pair .barber-card { max-width: 400px; }
.barber-group-pair .barber-img { aspect-ratio: 3 / 4; height: auto; object-fit: contain; object-position: bottom center; }
.barber-group-pair .barber-lastname { min-height: 1.3em; }
.barber-carousel-arrow {
  position: absolute; top: 42%; z-index: 9; width: 52px; height: 56px;
  display: grid; place-items: center; padding: 8px; border: 0;
  background: transparent; color: #fff; cursor: pointer;
  transition: color 180ms ease; -webkit-tap-highlight-color: transparent;
}
.barber-carousel-prev { left: max(10px, calc(50% - 670px)); }
.barber-carousel-next { right: max(10px, calc(50% - 670px)); }
/* Anchor desktop arrows to the stable baseline, not the current group's height. */
@media (min-width: 901px) {
  .barber-carousel-arrow {
    top: auto;
    bottom: clamp(180px, 38vh, 400px);
  }
}
.barber-carousel-arrow svg { width: 32px; height: 32px; pointer-events: none; }
.barber-carousel-arrow:hover, .barber-carousel-arrow:focus-visible { color: var(--orange); }
.barber-carousel-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.barber-carousel-arrow[aria-disabled="true"] { cursor: progress; }
.barber-carousel-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.barber-carousel-status.is-error { top: 0; left: 50%; transform: translateX(-50%); width: min(90%, 420px); height: auto; clip-path: none; white-space: normal; text-align: center; padding: 10px; background: #111; color: #fff; font-size: 14px; z-index: 10; }
@media (max-width: 600px) {
  .barber-carousel-arrow { width: 44px; height: 48px; padding: 8px; }
  .barber-carousel-arrow svg { width: 28px; height: 28px; }
  .barber-carousel-prev { left: 0; }
  .barber-carousel-next { right: 0; }
  .barber-group-pair .barber-card { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .barber-carousel-arrow { transition: none; } }

#barber-yuri .barber-img {
  width: 105%;
  max-width: none;
  flex-shrink: 0;
}
#barber-paulo .barber-img {
  width: 112%;
  max-width: none;
  flex-shrink: 0;
}
/* Enlarge Kauan without overriding GSAP hover or scroll transforms. */
#barber-kauan .barber-img {
  width: 112%;
  max-width: none;
  flex-shrink: 0;
}

/* Small size adjustment, preserving the existing image animations. */
#barber-eduardo .barber-img {
  width: 105%;
  max-width: none;
  flex-shrink: 0;
}

/* Refined location plaque, kept inside each animated team group. */
.barber-group { position: relative; padding-bottom: 82px; }
.barber-group .barber-info { padding-bottom: 0; }
.barber-group-unit {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 15px;
  width: max-content; max-width: 100%; padding: 11px 24px 11px 18px;
  background: linear-gradient(110deg, #25170e, #141211 70%);
  border: 1px solid #75421e; border-left: 3px solid var(--orange);
  border-radius: 6px; color: var(--white);
  box-shadow: 0 5px 18px rgba(0,0,0,0.2);
  text-transform: uppercase;
}
.unit-pin { width: 25px; height: 28px; flex-shrink: 0; color: var(--orange-light); }
.unit-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.unit-label { font-family: var(--font-heading); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: 0.22em; color: var(--orange-light); }
.unit-name { font-family: var(--font-heading); font-size: clamp(18px, 1.35vw, 23px); line-height: 1.2; font-weight: 500; letter-spacing: 0.035em; }
@media (max-width: 600px) {
  .barber-group { padding-bottom: 74px; }
  .barber-group-unit { padding: 10px 14px; gap: 10px; }
  .unit-pin { width: 21px; height: 24px; }
  .unit-name { font-size: 16px; letter-spacing: 0.01em; }
}

/* Desktop location masthead; the mobile plaque keeps its existing layout. */
.hero-unit-desktop { display: none; }
@media (min-width: 901px) {
  .hero-unit-desktop {
    position: absolute; top: clamp(86px, 10vh, 110px); left: 50%; transform: translateX(-50%);
    z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px;
    width: max-content; max-width: calc(100% - 64px); min-height: 34px;
    color: var(--white); text-transform: uppercase;
  }
  .hero-unit-desktop::before, .hero-unit-desktop::after {
    content: ''; width: 36px; height: 1px; background: #995421;
    transition: width 240ms ease, background 240ms ease;
  }
  .hero-unit-desktop .unit-pin { width: 19px; height: 22px; }
  .hero-unit-desktop .unit-copy { flex-direction: row; align-items: center; gap: 12px; }
  .hero-unit-desktop .unit-label { font-size: 12px; letter-spacing: 0.16em; }
  .hero-unit-desktop .unit-name { font-size: 20px; letter-spacing: 0.06em; }
  .hero-unit-desktop:hover::before, .hero-unit-desktop:hover::after { width: 48px; background: var(--orange); }
  .barber-group-unit { display: none; }
  .barber-group { padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-unit-desktop::before, .hero-unit-desktop::after { transition: none; }
}

/* Individual portraits and automatic rotation are exclusive to phones. */

@media (max-width: 600px) {
  .barber-card[hidden] { display: none !important; }
  #barbers-container .barber-card {
    flex: 0 1 370px;
    width: 370px;
    max-width: 100%;
  }
  #barbers-container .barber-img-wrap { height: clamp(280px, 49svh, 460px); }
  #barbers-container .barber-img {
    width: 100%; height: 100%; max-height: none;
    aspect-ratio: auto; object-fit: contain; object-position: bottom center;
  }
  #barbers-container .barber-info { min-height: 88px; padding-top: 10px; }
  #barbers-container .barber-firstname { font-size: 32px; }
  #barbers-container .barber-lastname { font-size: 14px; min-height: 1.3em; }
  #barbers-container .barber-instagram { font-size: 12px; }

}

/* Phone hero: location masthead, full-size portrait and two clear actions. */
@media (max-width: 600px) {
  #hero-canvas { display: block; opacity: 0.72; pointer-events: none; }
  #barbers-container { padding-inline: 28px; bottom: 86px; }
  .barber-group { padding-bottom: 0; }
  .barber-group-unit { display: none; }
  .hero-brand { top: 142px; }
  .hero-unit-desktop {
    position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
    z-index: 4; display: flex; align-items: center; justify-content: center;
    gap: 9px; width: max-content; max-width: calc(100% - 32px);
    color: var(--white); text-transform: uppercase;
  }
  .hero-unit-desktop::before, .hero-unit-desktop::after {
    content: ''; width: 18px; height: 1px; background: #995421;
  }
  .hero-unit-desktop .unit-pin { width: 15px; height: 18px; }
  .hero-unit-desktop .unit-copy { flex-direction: row; align-items: center; gap: 7px; }
  .hero-unit-desktop .unit-label { font-size: 9px; letter-spacing: 0.12em; }
  .hero-unit-desktop .unit-name { font-size: 15px; letter-spacing: 0.025em; }
  .hero-actions { bottom: 16px; gap: 16px; align-items: center; }
  .hero-booking { flex: 1; min-width: 0; }
  .booking-link { width: 100%; justify-content: center; padding: 12px 8px; font-size: 11px; }
  .hero-story { flex: 0 1 128px; max-width: 128px; font-size: 11px; }
}
@media (max-width: 360px) {
  .hero-unit-desktop { gap: 6px; }
  .hero-unit-desktop::before, .hero-unit-desktop::after { width: 10px; }
  .hero-unit-desktop .unit-name { font-size: 14px; }
}

/* Align the visible portraits, rather than the PNGs' transparent margins. */
@media (max-width: 600px) {
  #barbers-container {
    /* The lettering's painted bottom is 616 / 2172 of its 94vw width. */
    touch-action: pan-y pinch-zoom;
    top: calc(142px + 26.66vw);
    bottom: auto;
    padding-inline: 48px;
  }
  #barbers-container .barber-card {
    flex: 1;
    width: 100%;
    max-width: 100%;
  }
  #barbers-container .barber-img-wrap {
    height: min(calc(max(700px, 100svh) - 320px - 26.66vw), calc((100vw - 96px) * 1.17));
    overflow: hidden;
  }
  #barbers-container .barber-img {
    position: absolute;
    bottom: 0;
    width: auto;
    max-width: none;
    height: calc(100% * var(--portrait-height, 1));
    object-fit: contain;
  }
  #barber-carlos, #barber-yuri { --portrait-height: 1.0255; }
  #barber-guilherme { --portrait-height: 1.13125; }
  #barber-zidane { --portrait-height: 1.0112; }
  #barber-kauan { --portrait-height: 1.003; }
}
/* Resize each desktop team as one composition, independently of GSAP transforms. */
.barber-composition { display: contents; }
@media (min-width: 901px) {
  #hero { height: 100svh; min-height: 540px; }
  #barbers-container {
    bottom: var(--team-bottom, 84px);
  }
  #barbers-container .barber-composition {
    display: flex;
    position: relative;
    width: 100%;
    min-width: 0;
    align-items: flex-end;
    scale: var(--team-scale, 1);
    transform-origin: center bottom;
  }
}

/* The founder's story: a photographic spread with the hero's typographic presence. */
#sobre-nos {
  --story-orange: #ba4900;
  min-height: max(700px, 100svh);
  padding: clamp(48px, 5vw, 80px) 6%;
  background: #fff;
  display: block;
}
#sobre-nos .sobre-shell { max-width: 1200px; }
.sobre-label-detail { color: #6d6862; font-size: 10px; letter-spacing: .12em; }
#sobre-nos .sobre-nos-container {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  grid-template-areas: 'photo heading' 'photo story';
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 88px); row-gap: 0; align-items: start;
}
.sobre-heading-block { grid-area: heading; padding-top: 22px; }
#sobre-nos .sobre-titulo {
  font-size: clamp(62px, 6.7vw, 100px); line-height: .94;
  letter-spacing: -.015em; margin-bottom: 20px;
}
#sobre-nos .sobre-title-accent { color: var(--story-orange); }
#sobre-nos .sobre-lead {
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45;
  letter-spacing: -.035em; font-weight: 500; max-width: 380px; margin-bottom: 24px;
}
#sobre-nos .sobre-photo { grid-area: photo; width: 100%; max-width: 440px; justify-self: start; padding-right: 14px; }
.sobre-photo-label { display: flex; justify-content: space-between; margin-bottom: 20px; font-family: var(--font-heading); font-size: 10px; letter-spacing: .16em; color: #68615a; }
.album-counter { color: var(--story-orange); }
#sobre-nos .sobre-nos-image { aspect-ratio: 4 / 5; max-height: none; }
#sobre-nos .album-photo { border-width: 0; box-shadow: 0 7px 24px #17120d18; }
#sobre-nos .album-photo[aria-hidden='true'] { transform: translate(12px, 4px) rotate(3deg) scale(.98); }
#sobre-nos .sobre-img { object-position: 50% 15%; }
#sobre-nos .sobre-img-current { object-position: 50% 58%; }
#sobre-nos .album-next { width: 54px; height: 54px; right: -24px; background: var(--story-orange); border-width: 3px; box-shadow: none; }
#sobre-nos .album-next:hover { background: #151515; }
#sobre-nos .sobre-caption { margin-top: 18px; padding-top: 10px; border-top-width: 1px; border-top-color: var(--story-orange); font-size: 10px; letter-spacing: .08em; }
#sobre-nos .album-date { font-size: 17px; }
.album-hint { color: #6c6761; font-size: 11px; line-height: 1.6; margin-top: 12px; }
.album-hint span { white-space: nowrap; }
#sobre-nos .sobre-nos-content { grid-area: story; padding: 0; }
#sobre-nos .sobre-copy { max-width: 510px; }
#sobre-nos .sobre-texto { font-size: 14px; line-height: 1.8; color: #585550; }
#sobre-nos .sobre-texto + .sobre-texto { margin-top: 16px; }
#sobre-nos .sobre-texto strong { color: #191714; font-weight: 500; }
.sobre-care { margin-top: 20px; padding-left: 15px; border-left: 2px solid var(--orange); font-size: 14px; line-height: 1.6; font-weight: 500; color: #24201b; }
#sobre-nos .sobre-signature { border: 0; padding: 0; margin-top: 24px; gap: 14px; }
#sobre-nos .sobre-monogram { font-size: 34px; color: var(--story-orange); }
.sobre-founder { font-size: 12px; letter-spacing: .07em; }
.sobre-founder > span { display: inline-block; font-size: 9px; color: #78716a; margin-left: 9px; letter-spacing: .1em; }
#sobre-nos .sobre-signature-detail { font-size: 11px; color: #68615b; line-height: 1.6; }
#sobre-nos .sobre-valores { margin-top: 40px; padding: 22px 0; border-color: #dedbd7; gap: 0; }
#sobre-nos .valor-item { justify-content: flex-start; gap: 18px; padding: 0 28px; }
#sobre-nos .valor-item:first-child { padding-left: 0; }
#sobre-nos .valor-item + .valor-item { border-color: #dedbd7; }
#sobre-nos .valor-numero { font-size: 58px; color: var(--story-orange); }
#sobre-nos .valor-label { font-size: 11px; letter-spacing: .08em; color: #48423c; }
.valor-detail { display: block; font-size: 10px; color: #756f68; letter-spacing: .03em; }
#sobre-nos .sobre-closing { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 26px 0 0; text-align: left; }
.sobre-closing-label { font-family: var(--font-heading); font-size: 9px; letter-spacing: .15em; line-height: 1.6; color: #6d655d; margin-bottom: 10px; }
.sobre-promise { font-size: clamp(32px, 3vw, 46px); line-height: 1.02; letter-spacing: -.01em; color: #141210; }
.sobre-promise > span { color: var(--story-orange); }
.sobre-visit { display: inline-flex; gap: 24px; align-items: center; padding: 12px 0; border-bottom: 1px solid #b3aaa0; font-family: var(--font-heading); font-size: 12px; letter-spacing: .02em; line-height: 1.4; color: #191714; text-decoration: none; }
.sobre-visit > span { font-family: var(--font-body); font-size: 20px; color: var(--story-orange); transition: transform .2s ease; }
.sobre-visit:hover > span { transform: translate(2px, -2px); }
.sobre-visit:focus-visible { outline: 2px solid var(--story-orange); outline-offset: 5px; }
@media (max-width: 900px) {
  #sobre-nos { padding: 48px 6%; }
  #sobre-nos .sobre-nos-container { column-gap: 32px; }
  #sobre-nos .sobre-titulo { font-size: clamp(50px, 7.5vw, 68px); }
  #sobre-nos .sobre-lead { font-size: 18px; }
  #sobre-nos .sobre-photo { align-self: start; }
}
@media (max-width: 600px) {
  #sobre-nos { min-height: 0; padding: 36px 24px 44px; }
  .sobre-label-detail { font-size: 8px; max-width: 100px; text-align: right; line-height: 1.6; }
  #sobre-nos .sobre-nos-container { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: 'heading' 'photo' 'story'; row-gap: 28px; }
  .sobre-heading-block { padding-top: 0; }
  #sobre-nos .sobre-titulo { font-size: clamp(56px, 15.5vw, 86px); margin-bottom: 16px; }
  #sobre-nos .sobre-lead { font-size: 18px; margin-bottom: 0; max-width: 280px; }
  #sobre-nos .sobre-photo { max-width: 440px; padding: 0 12px 0 0; justify-self: center; }
  #sobre-nos .sobre-nos-image { aspect-ratio: 1 / 1; }
  #sobre-nos .sobre-img { object-position: 50% 0; }
  #sobre-nos .sobre-img-current { object-position: 50% 58%; }
  #sobre-nos .album-next { right: -21px; width: 48px; height: 48px; }
  .sobre-photo-label { margin-bottom: 14px; font-size: 9px; }
  #sobre-nos .sobre-caption { font-size: 9px; gap: 8px; }
  #sobre-nos .album-date { font-size: 15px; }
  #sobre-nos .sobre-nos-content { grid-row: auto; }
  #sobre-nos .sobre-texto { font-size: 14px; line-height: 1.8; }
  #sobre-nos .sobre-signature { margin-top: 20px; }
  #sobre-nos .sobre-valores { margin-top: 28px; padding: 20px 0; }
  #sobre-nos .valor-item { flex-direction: column; align-items: flex-start; gap: 8px; padding-inline: 12px; }
  #sobre-nos .valor-item:last-child { padding-right: 0; }
  #sobre-nos .valor-numero { font-size: 46px; }
  #sobre-nos .valor-label { font-size: 10px; letter-spacing: .01em; }
  #sobre-nos .sobre-closing { display: block; margin-top: 26px; }
  .sobre-closing-label { font-size: 8px; }
  .sobre-promise { font-size: clamp(29px, 8.8vw, 44px); }
  .sobre-visit { margin-top: 16px; width: 100%; justify-content: space-between; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .sobre-visit > span { transition: none; } }
/* A quieter heading and one shared light-gray band for the three figures. */
#sobre-nos .sobre-heading-block { padding-top: 12px; }
#sobre-nos .sobre-titulo { font-size: clamp(42px, 4.5vw, 68px); line-height: 1.02; margin-bottom: 28px; }
#sobre-nos .sobre-story-window { display: grid; }
.sobre-story-panel { grid-area: 1 / 1; min-width: 0; }
.sobre-story-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
#sobre-nos .sobre-valores {
  position: relative; isolation: isolate; overflow: hidden;
  background: #fdfdfd; border: 1px solid #f5f5f5; border-radius: 18px;
  padding: 26px 12px; margin-top: 36px;
}
.stats-light {
  position: absolute; inset: -70% -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 35% 40%, rgba(255, 166, 91, .075), transparent 45%),
    radial-gradient(ellipse at 68% 65%, rgba(220, 223, 226, .15), transparent 42%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
  transform-origin: center;
}
#sobre-nos .sobre-valores .valor-item {
  position: relative; z-index: 1;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px; gap: 8px; text-align: center;
}
#sobre-nos .valor-item + .valor-item { border-left: 1px solid #f0f0f0; }
#sobre-nos .valor-numero { font-family: var(--font-body); font-weight: 600; font-size: 34px; letter-spacing: -.045em; color: #242424; }
#sobre-nos .valor-label { font-family: var(--font-body); font-size: 12px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #646464; }
@media (max-width: 600px) {
  #sobre-nos .sobre-heading-block { padding-top: 0; }
  #sobre-nos .sobre-titulo { font-size: clamp(39px, 11.8vw, 62px); margin-bottom: 0; }
  #sobre-nos .sobre-valores { padding: 22px 4px; margin-top: 28px; border-radius: 14px; }
  #sobre-nos .sobre-valores .valor-item { padding-inline: 6px; gap: 8px; }
  #sobre-nos .valor-numero { font-size: 28px; }
  #sobre-nos .valor-label { font-size: 10px; }
}
/* The procedural light field stays behind the white story section's content. */
#sobre-nos { isolation: isolate; }
#sobre-nos .sobre-shell { position: relative; z-index: 1; }
.story-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.story-shader { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.story-atmosphere.has-shader .story-shader { opacity: 1; }
.story-atmosphere.has-shader .story-light { visibility: hidden; }
.story-light {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse at 12% 30%, rgba(255, 168, 93, .065), transparent 42%),
    radial-gradient(ellipse at 82% 67%, rgba(207, 213, 221, .09), transparent 45%),
    radial-gradient(ellipse at 50% 40%, #fff 8%, transparent 58%);
}