/* ==========================================================================
   MAIARA KLEIN ZIMMERMANN — Página Sobre (storytelling editorial)
   Depende de css/styles.css (tokens, nav, footer, .btn, .container, .insta).
   ========================================================================== */

/* tratamento de cor quente/desaturado nas fotos da página */
.about-img{ filter:saturate(.9) sepia(.05) brightness(1.02); }

/* ==========================================================================
   HERO — Sobre (fundo claro, título escuro)
   ========================================================================== */
.about-hero{
  position:relative;
  min-height:72svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.about-hero__media{ position:absolute; inset:-10% 0; will-change:transform; }
.about-hero__media img{ filter:saturate(.85) brightness(1.08) blur(2px); }  /* soft focus */
.about-hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(251,247,238,.55) 0%, rgba(251,247,238,.68) 55%, rgba(251,247,238,.8) 100%);
}
.about-hero__content{ position:relative; padding-block:11rem 6rem; }
.about-hero__eyebrow{
  display:block;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.6rem;
}
.about-hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.12;
  color:var(--ink);
  max-width:16ch;
  margin-inline:auto;
  /* fade-in lento de 1s ao carregar (acima da dobra, não depende de scroll) */
  opacity:0;
  animation:aboutFadeIn 1s var(--ease) .15s forwards;
}
@keyframes aboutFadeIn{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .about-hero__title{ opacity:1; animation:none; }
}

/* ==========================================================================
   NOSSA HISTÓRIA — texto longo centralizado
   ========================================================================== */
.story{ padding-block:clamp(6.25rem,12vw,10rem); text-align:center; scroll-margin-top:6rem; }
.story__inner{ max-width:800px; margin-inline:auto; }
.story .index{ margin-bottom:1.6rem; }
.story h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.15;
  margin-bottom:2.4rem;
}
.story p{
  color:#5f574a;                 /* corpo levemente mais claro, quente */
  font-size:clamp(1rem,1.2vw,1.05rem);
  line-height:1.75;
  max-width:64ch;
  margin-inline:auto;
}
.story p + p{ margin-top:1.5rem; }

/* ==========================================================================
   LINHAS ALTERNADAS (Biografia, Materiais, Equipe)
   ========================================================================== */
.about-row{
  padding-block:clamp(6.25rem,12vw,10rem);
  scroll-margin-top:6rem;   /* âncoras (Materiais/Atendimento) não ficam sob o nav */
}
.about-row__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.about-row--bio .about-row__grid{ grid-template-columns:5fr 7fr; }  /* assimétrica */

.about-row__text .index,
.about-row__text .subhead{ display:block; margin-bottom:1.4rem; }
.about-row__text h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.14;
  margin-bottom:1.6rem;
  max-width:16ch;
}
.about-row__text p{
  color:#5f574a;
  line-height:1.75;
  max-width:48ch;
}
.about-row__text p + p{ margin-top:1.2rem; }

.about-row__media{
  overflow:hidden;
  background:var(--cream-deep);
  aspect-ratio:4/5;
  border-radius:var(--radius);
}
.about-row__media img{ transition:transform 1.2s var(--ease); }

/* link-texto com seta (sem borda) */
.text-link{
  display:inline-flex; align-items:center; gap:.7em;
  margin-top:2.2rem;
  font-family:var(--sans);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
}
.text-link .arrow{ font-style:normal; display:inline-block; transition:transform var(--speed) var(--ease); }

/* ==========================================================================
   ACREDITAMOS EM — bloco de valores (fundo dourado da paleta)
   ========================================================================== */
/* champagne pálido: o mesmo dourado da paleta, porém translúcido sobre o
   creme — banda suave que não rouba a atenção da lista */
.values{ background:rgba(var(--blush-rgb), .38); }
.values__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
}
.values__text{ padding-block:clamp(5rem,9vw,8rem); }
.values__label{
  display:block;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:#6b5b33;
  margin-bottom:2rem;
}
.values__list li{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.28;                 /* respiro para virar o centro das atenções */
  color:var(--ink);
}
.values__media{
  align-self:stretch;
  min-height:100%;
  overflow:hidden;
}
.values__media img{ min-height:100%; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.about-cta{
  padding-block:clamp(6.25rem,12vw,10rem);
  text-align:center;
}
.about-cta .index{ margin-bottom:1.6rem; }
.about-cta h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:2.6rem;
}

/* ==========================================================================
   ANIMAÇÕES — reveal lateral (texto) + slide-up (imagem já usa .reveal)
   ========================================================================== */
.reveal--x{ opacity:0; transform:translateX(-28px); }
.reveal--x.is-visible{ animation:revealX .95s var(--ease) forwards; }
@keyframes revealX{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .reveal--x{ opacity:1; transform:none; animation:none; }
}

/* ==========================================================================
   HOVER — só ponteiro fino
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .about-row__media:hover img{ transform:scale(1.04); }
  .text-link:hover .arrow{ transform:translateX(6px); }
}
@media (hover:none){
  .text-link:active .arrow{ transform:translateX(6px); }
}

/* ==========================================================================
   RESPONSIVO — empilha; imagem SEMPRE antes do texto
   ========================================================================== */
@media (max-width:820px){
  .about-row__grid,
  .about-row--bio .about-row__grid,
  .values__grid{ grid-template-columns:1fr; }

  /* imagem antes do texto em toda linha, independente da ordem no HTML */
  .about-row__media{ order:-1; }

  .values__grid{ direction:ltr; }
  .values__media{ aspect-ratio:16/11; min-height:0; }
  .values__text{ padding-block:clamp(3.5rem,8vw,5rem); }
  .about-hero__content{ padding-block:9rem 5rem; }
}