/* Página Sobre nós */

.sn-header {
  padding-top: 140px; padding-bottom: 80px; min-height: min(640px, 78vh);
  display: flex; align-items: flex-end;
}
.sn-header > .wrap { width: 100%; }
.sn-header-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 28%; z-index: 0;
}
/* Mais escuro à esquerda e embaixo, onde fica o texto */
.sn-header-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,28,52,0.9) 0%, rgba(12,28,52,0.72) 42%, rgba(12,28,52,0.3) 75%, rgba(12,28,52,0.2) 100%),
    linear-gradient(0deg, rgba(12,28,52,0.7) 0%, rgba(12,28,52,0) 45%);
}
/* Tela larga: a foto (em pé) ocupa o lado direito e se funde ao azul, sem esticar */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .sn-header-bg {
    left: auto; right: 0; width: 58%; object-position: 50% 26%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  }
  .sn-header-shade {
    background:
      linear-gradient(90deg, rgba(12,28,52,0.55) 0%, rgba(12,28,52,0.3) 50%, rgba(12,28,52,0.12) 100%),
      linear-gradient(0deg, rgba(12,28,52,0.55) 0%, rgba(12,28,52,0) 40%);
  }
}
@media (max-width: 767px) {
  .sn-header { min-height: 78vh; padding-top: 120px; }
  .sn-header-bg { object-position: 50% 25%; }
  .sn-header-shade {
    background: linear-gradient(0deg, rgba(12,28,52,0.94) 0%, rgba(12,28,52,0.8) 45%, rgba(12,28,52,0.35) 80%, rgba(12,28,52,0.25) 100%);
  }
}
.sn-header-lead { margin-top: 24px; font-size: 1.1rem; color: rgba(246,243,236,0.86); }

.sn-body { margin-top: 24px; max-width: 560px; font-size: 1.05rem; line-height: 1.75; color: rgba(12,28,52,0.76); }

/* ---- 1. Quem somos + foto (deitada) com um fio dourado atrás ---- */
.sn-intro-grid { display: grid; gap: 64px; align-items: center; }
@media (min-width: 1024px) { .sn-intro-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.sn-collage { position: relative; max-width: 640px; width: 100%; justify-self: center; }
.sn-collage-main {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; position: relative; z-index: 1;
  box-shadow: 0 24px 50px rgba(12,28,52,0.16);
}
.sn-collage-frame {
  position: absolute; z-index: 0; top: -22px; right: -22px; width: 70%; height: 70%;
  border: 1px solid var(--champagne); pointer-events: none;
}
@media (max-width: 600px) {
  .sn-collage-frame { top: -12px; right: -10px; }
}

/* ---- 2. Frase de destaque ---- */
.sn-statement-wrap { padding-top: 0; }
.sn-statement {
  background: var(--navy); color: var(--offwhite); text-align: center;
  padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 90px); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  position: relative; overflow: hidden;
}
.sn-statement::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(205,170,111,0.12), transparent 70%);
}
.sn-statement > * { position: relative; }
.sn-statement-text {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.28;
  max-width: 900px; color: var(--offwhite);
}
/* Palavras ainda não alcançadas pela rolagem: mais apagadas, mas legíveis (texto grande, acima de 3:1) */
.sn-statement-text.is-armed .w { color: rgba(246,243,236,0.46); transition: color .35s ease; }
.sn-statement-text.is-armed .w.on { color: var(--offwhite); }
.sn-statement-text .w.accent.on { color: var(--champagne-soft); }

/* ---- 3. Como tudo começou ---- */
.sn-story-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .sn-story-grid { grid-template-columns: 0.9fr 1.1fr; gap: 90px; } }
.sn-story-photo { overflow: hidden; max-width: 520px; width: 100%; justify-self: center; }
.sn-story-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* ---- 4. Por que a Feltrim e Azevedo ---- */
.sn-why-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .sn-why-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.sn-why-text { margin-top: 22px; max-width: 520px; font-size: 1.05rem; line-height: 1.75; color: rgba(246,243,236,0.86); }
.sn-checks { list-style: none; margin-top: 30px; display: grid; gap: 16px; }
.sn-checks li { position: relative; padding-left: 36px; font-size: 1rem; line-height: 1.5; color: var(--offwhite); }
.sn-checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--champagne);
}
.sn-checks li::after {
  content: ""; position: absolute; left: 8px; top: 6px; width: 5px; height: 10px;
  border: solid var(--champagne); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.sn-people { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sn-person { display: block; text-decoration: none; color: var(--offwhite); }
.sn-person:nth-child(2) { margin-top: 48px; }
.sn-person-photo { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--navy-soft); }
.sn-person-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}
.sn-person-alt { opacity: 0; }
.sn-person-name { display: block; margin-top: 16px; font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; line-height: 1.2; }
.sn-person-role { display: block; margin-top: 4px; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); }
.sn-person:focus-visible { outline: 2px solid var(--champagne); outline-offset: 6px; }
@media (hover: hover) {
  .sn-person:hover .sn-person-alt, .sn-person:focus-visible .sn-person-alt { opacity: 1; }
  .sn-person:hover .sn-person-photo img { transform: scale(1.04); }
}
@media (max-width: 480px) { .sn-person:nth-child(2) { margin-top: 28px; } .sn-person-name { font-size: 1.25rem; } }

/* ---- 5. Galeria ---- */
.sn-gallery { padding-bottom: clamp(80px, 9vw, 108px); }
.sn-gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sn-address { margin-top: 18px; font-size: 1rem; color: rgba(12,28,52,0.74); }
.sn-gallery-nav { display: flex; gap: 10px; }
.sn-arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(12,28,52,0.3); background: none;
  color: var(--navy); font-size: 1.2rem; cursor: pointer; transition: border-color .25s, background .25s, opacity .25s;
}
.sn-arrow:hover:not(:disabled) { border-color: var(--champagne); background: var(--stone-light); }
.sn-arrow:disabled { opacity: 0.35; cursor: default; }
.sn-arrow:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.sn-strip {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  margin-top: 44px; padding: 0 max(32px, calc((100vw - 1300px) / 2 + 32px)) 12px;
  scroll-padding: 0 max(32px, calc((100vw - 1300px) / 2 + 32px));
  scrollbar-width: none;
}
.sn-strip::-webkit-scrollbar { display: none; }
.sn-strip:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.sn-shot { flex: 0 0 auto; width: min(78vw, 380px); margin: 0; scroll-snap-align: start; }
.sn-shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.sn-shot { overflow: hidden; }
.sn-shot figcaption { margin-top: 14px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(12,28,52,0.74); }
@media (hover: hover) { .sn-shot:hover img { transform: scale(1.03); } }

/* ---- 6. Fechamento ---- */
.sn-final { position: relative; z-index: 1; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sn-statement-text .w, .sn-person-photo img, .sn-shot img, .sn-arrow { transition: none !important; }
  .sn-collage-small { transform: none !important; }
  .sn-strip { scroll-behavior: auto; }
}