/* =============================================================
   FRAN BARION — Second Hand & Outlet
   Site institucional · folha de estilo principal
   Estética: luxo italiano discreto, muito respiro, poucas cores.
   ============================================================= */

/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root{
  /* Paleta oficial */
  --green:    #0F2B23;   /* Verde Profundo */
  --gold:     #C8A86A;   /* Dourado Fosco  */
  --off:      #F6F3EB;   /* Off White      */
  --beige:    #DCCBB3;   /* Bege Premium   */
  --black:    #111111;   /* Preto Elegante */

  /* Neutros derivados (viés quente — escolhidos) */
  --green-deep: #0B211B;
  --ink:        #24211C;
  --ink-soft:   #6E6152;
  --line:       rgba(17,17,17,.12);
  --line-soft:  rgba(17,17,17,.07);
  --gold-line:  rgba(200,168,106,.4);

  /* Tipografia */
  --serif:  "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --cinzel: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --sans:   "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Escala tipográfica */
  --fs-eyebrow: 0.72rem;
  --fs-body:    1.02rem;
  --fs-lead:    1.25rem;
  --fs-h3:      1.6rem;
  --fs-h2:      clamp(2.2rem, 5vw, 3.6rem);
  --fs-display: clamp(3rem, 9vw, 7rem);

  /* Ritmo / medidas */
  --pad-section: clamp(5rem, 12vh, 9rem);
  --gutter: clamp(1.5rem, 6vw, 6rem);
  --maxw: 1320px;
  --read: 60ch;

  /* Transições de luxo */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s;
}

/* -------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--off);
  line-height:1.75;
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4{ font-weight:400; line-height:1.06; text-wrap:balance; }
::selection{ background:var(--gold); color:var(--green); }

/* -------------------------------------------------------------
   3. UTILIDADES
   ------------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--pad-section); }

.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
}
.eyebrow--ink{ color:var(--ink-soft); }

.display{ font-family:var(--serif); font-size:var(--fs-display); font-weight:300; letter-spacing:-.01em; }
.h2{ font-family:var(--serif); font-size:var(--fs-h2); font-weight:300; letter-spacing:-.005em; color:var(--green); }
.h2 em{ font-style:italic; color:var(--gold); }
.lead{ font-family:var(--serif); font-style:italic; font-size:var(--fs-lead); color:var(--ink-soft); line-height:1.5; }

.rule{ width:56px; height:1px; background:var(--gold); opacity:.7; }
.center{ text-align:center; }
.center .rule{ margin-inline:auto; }

/* marca / avatar */
.mark{ display:inline-block; line-height:0; }
.mark img{ width:100%; height:auto; }

/* -------------------------------------------------------------
   4. REVELAÇÃO NO SCROLL (micro-animações)
   ------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; }
.reveal.d2{ transition-delay:.22s; }
.reveal.d3{ transition-delay:.34s; }
.reveal.d4{ transition-delay:.46s; }

/* -------------------------------------------------------------
   5. BOTÕES
   ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  padding:1.15em 2.2em; border-radius:2px;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
  position:relative; overflow:hidden;
}
.btn .arw{ transition:transform .5s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn--solid{ background:var(--green); color:var(--off); border:1px solid var(--green); }
.btn--solid:hover{ background:var(--gold); border-color:var(--gold); color:var(--green); }

.btn--ghost{ background:transparent; color:var(--green); border:1px solid var(--gold-line); }
.btn--ghost:hover{ border-color:var(--green); background:var(--green); color:var(--off); }

.btn--gold{ background:var(--gold); color:var(--green); border:1px solid var(--gold); }
.btn--gold:hover{ background:transparent; color:var(--gold); }

.btn--light{ background:transparent; color:var(--off); border:1px solid rgba(246,243,235,.35); }
.btn--light:hover{ background:var(--off); color:var(--green); border-color:var(--off); }

/* link sublinhado sutil */
.link-underline{ position:relative; letter-spacing:.02em; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.link-underline:hover::after{ transform:scaleX(1); }

/* -------------------------------------------------------------
   6. NAVEGAÇÃO
   ------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--gutter);
  transition:background .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease), color .6s var(--ease);
  color:var(--off);
}
.nav.scrolled{
  background:rgba(246,243,235,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--green);
  padding-block:1rem;
  box-shadow:0 1px 0 var(--line-soft);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; letter-spacing:.28em; font-family:var(--cinzel); font-size:.86rem; }
.nav__brand .mark{ width:30px; }
.nav__brand small{ display:block; font-family:var(--sans); font-size:.5rem; letter-spacing:.34em; color:var(--gold); font-weight:500; margin-top:2px; }
.nav__links{ display:flex; align-items:center; gap:2.2rem; }
.nav__links a{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; }
.nav__cta{ font-size:.68rem !important; letter-spacing:.2em; text-transform:uppercase; padding:.7em 1.4em; border:1px solid currentColor; border-radius:2px; transition:background .4s var(--ease), color .4s var(--ease); }
.nav.scrolled .nav__cta:hover{ background:var(--green); color:var(--off); border-color:var(--green); }
.nav:not(.scrolled) .nav__cta:hover{ background:var(--off); color:var(--green); border-color:var(--off); }

.nav__burger{ display:none; width:30px; height:20px; position:relative; }
.nav__burger span{ position:absolute; left:0; height:1.5px; width:100%; background:currentColor; transition:.4s var(--ease); }
.nav__burger span:nth-child(1){ top:2px; } .nav__burger span:nth-child(2){ top:9px; } .nav__burger span:nth-child(3){ top:16px; }
body.menu-open .nav__burger span:nth-child(1){ top:9px; transform:rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* menu mobile em tela cheia */
.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:var(--green); color:var(--off);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease);
}
.mobile-menu a{ font-family:var(--serif); font-size:2rem; font-style:italic; }
.mobile-menu a:hover{ color:var(--gold); }
body.menu-open .mobile-menu{ opacity:1; pointer-events:auto; }

/* -------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------- */
.hero{ min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr; }
.hero__text{
  background:var(--off);
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem var(--gutter) 4rem;
  position:relative;
}
.hero__eyebrow{ margin-bottom:2rem; }
.hero__title{ font-family:var(--serif); font-weight:300; font-size:var(--fs-display); line-height:.98; color:var(--green); letter-spacing:-.015em; }
.hero__title em{ font-style:italic; color:var(--gold); }
.hero__sub{ margin-top:2rem; max-width:34ch; color:var(--ink-soft); font-size:1.05rem; }
.hero__sub strong{ display:block; font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--green); margin-bottom:.7rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.8rem; }
.hero__scroll{ position:absolute; left:var(--gutter); bottom:2rem; display:flex; align-items:center; gap:.8rem; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); }
.hero__scroll .bar{ width:44px; height:1px; background:var(--gold); position:relative; overflow:hidden; }
.hero__scroll .bar::after{ content:""; position:absolute; inset:0; background:var(--green); animation:scrollbar 2.6s var(--ease) infinite; }
@keyframes scrollbar{ 0%{ transform:translateX(-100%);} 60%,100%{ transform:translateX(100%);} }

/* painel direito — espaço reservado para a foto da Fran */
.hero__visual{ position:relative; background:linear-gradient(160deg, var(--green), var(--green-deep)); overflow:hidden; }
.hero__visual::before{ /* textura sutil */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 70% 20%, rgba(200,168,106,.14), transparent 60%);
}
.hero__frame{
  position:absolute; inset:clamp(1.5rem,4vw,3.5rem);
  border:1px solid var(--gold-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  text-align:center; color:var(--off);
}
.hero__frame .mark{ width:clamp(90px,12vw,140px); }
.hero__frame .plabel{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(246,243,235,.5); }
.hero__frame .pname{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--beige); }
.hero__corner{ position:absolute; width:18px; height:18px; border:1px solid var(--gold); }
.hero__corner.tl{ top:calc(clamp(1.5rem,4vw,3.5rem) - 1px); left:calc(clamp(1.5rem,4vw,3.5rem) - 1px); border-right:0; border-bottom:0; }
.hero__corner.br{ bottom:calc(clamp(1.5rem,4vw,3.5rem) - 1px); right:calc(clamp(1.5rem,4vw,3.5rem) - 1px); border-left:0; border-top:0; }

/* -------------------------------------------------------------
   8. QUEM SOMOS
   ------------------------------------------------------------- */
.about{ background:var(--off); }
.about__inner{ max-width:900px; margin-inline:auto; text-align:center; }
.about .h2{ margin:1.4rem 0 2rem; }
.about p{ max-width:var(--read); margin-inline:auto; color:var(--ink-soft); }
.about p + p{ margin-top:1.3rem; }
.about__sign{ margin-top:2.6rem; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--green); }

/* -------------------------------------------------------------
   9. MODA CIRCULAR
   ------------------------------------------------------------- */
.circular{ background:var(--green); color:var(--off); position:relative; overflow:hidden; }
.circular::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 60% at 20% 0%, rgba(200,168,106,.1), transparent 55%); }
.circular__inner{ position:relative; }
.circular__head{ max-width:820px; margin-bottom:4rem; }
.circular .eyebrow{ color:var(--gold); }
.circular__title{ font-family:var(--serif); font-weight:300; font-size:var(--fs-h2); margin:1.4rem 0 1.6rem; line-height:1.05; }
.circular__title em{ font-style:italic; color:var(--gold); }
.circular__sub{ font-family:var(--serif); font-style:italic; font-size:1.35rem; color:rgba(246,243,235,.78); max-width:52ch; line-height:1.5; }
.circular__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gold-line); border:1px solid var(--gold-line); }
.ccard{ background:var(--green); padding:2.6rem 1.8rem; transition:background .6s var(--ease); }
.ccard:hover{ background:var(--green-deep); }
.ccard__n{ font-family:var(--serif); font-size:.9rem; color:var(--gold); letter-spacing:.2em; }
.ccard h3{ font-family:var(--serif); font-size:1.7rem; margin:1.2rem 0 .8rem; font-weight:400; }
.ccard p{ font-size:.9rem; color:rgba(246,243,235,.66); line-height:1.7; }

/* -------------------------------------------------------------
   10. MARCAS — marquee
   ------------------------------------------------------------- */
.brands{ background:var(--off); padding-block:var(--pad-section); overflow:hidden; }
.brands__head{ text-align:center; margin-bottom:3.4rem; }
.brands__head .h2{ margin-top:1.2rem; }
.marquee{ position:relative; display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee + .marquee{ margin-top:1.4rem; }
.marquee__track{ display:flex; flex-shrink:0; align-items:center; gap:3.2rem; padding-right:3.2rem; white-space:nowrap; animation:marquee var(--dur,60s) linear infinite; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ font-family:var(--serif); font-size:1.7rem; color:var(--green); font-weight:400; letter-spacing:.02em; display:flex; align-items:center; gap:3.2rem; }
.marquee__item::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.brands__note{ text-align:center; margin-top:3.2rem; font-size:.82rem; color:var(--ink-soft); letter-spacing:.02em; }

/* -------------------------------------------------------------
   11. COMO FUNCIONA — timeline
   ------------------------------------------------------------- */
.how{ background:var(--beige); }
.how__head{ text-align:center; margin-bottom:4.5rem; }
.how__head .h2{ margin-top:1.2rem; color:var(--green); }
.timeline{ max-width:760px; margin-inline:auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:50px; top:10px; bottom:10px; width:1px; background:var(--gold-line); }
.step{ display:grid; grid-template-columns:100px 1fr; gap:2rem; align-items:baseline; padding-block:1.8rem; position:relative; }
.step__n{ font-family:var(--serif); font-size:2.4rem; color:var(--gold); position:relative; z-index:1; }
.step__n::before{ content:""; position:absolute; left:38px; top:50%; width:11px; height:11px; border-radius:50%; background:var(--green); transform:translate(-50%,-50%); box-shadow:0 0 0 4px var(--beige); }
.step h3{ font-family:var(--serif); font-size:1.9rem; color:var(--green); font-weight:400; }
.step p{ color:var(--ink-soft); font-size:.92rem; margin-top:.3rem; }

/* -------------------------------------------------------------
   12. LIVES — iPhone
   ------------------------------------------------------------- */
.lives{ background:var(--off); }
.lives__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.lives__text .h2{ margin:1.4rem 0 1.6rem; }
.lives__text p{ color:var(--ink-soft); max-width:42ch; }
.lives__text ul{ list-style:none; margin:2rem 0; display:flex; flex-direction:column; gap:1rem; }
.lives__text li{ display:flex; align-items:center; gap:1rem; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--green); }
.lives__text li::before{ content:""; width:26px; height:1px; background:var(--gold); }
.lives__phone-wrap{ display:flex; justify-content:center; }

/* device */
.phone{ position:relative; width:300px; max-width:82vw; aspect-ratio:9/19.5; background:#0a0a0a; border-radius:44px; padding:12px; box-shadow:0 40px 80px -30px rgba(15,43,35,.55), 0 0 0 1px rgba(0,0,0,.4); }
.phone__screen{ position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:var(--green-deep); }
.phone__notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:110px; height:26px; background:#0a0a0a; border-radius:20px; z-index:5; }
.phone__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.phone__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,33,27,.35) 0%, transparent 30%, transparent 55%, rgba(11,33,27,.85) 100%); }
.live-badge{ position:absolute; top:20px; left:16px; display:flex; align-items:center; gap:.5rem; background:#c0392b; color:#fff; font-size:.58rem; font-weight:600; letter-spacing:.16em; padding:.35em .7em; border-radius:4px; z-index:4; }
.live-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.live-views{ position:absolute; top:20px; right:16px; font-size:.58rem; letter-spacing:.1em; color:#fff; background:rgba(0,0,0,.35); padding:.35em .7em; border-radius:4px; z-index:4; }
.live-host{ position:absolute; top:56px; left:16px; display:flex; align-items:center; gap:.5rem; z-index:4; }
.live-host .ava{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--gold); background:var(--green); display:grid; place-items:center; }
.live-host .ava img{ width:18px; }
.live-host .nm{ color:#fff; font-size:.6rem; font-weight:500; letter-spacing:.04em; }
.live-host .nm small{ display:block; color:var(--gold); font-size:.5rem; letter-spacing:.1em; }
.live-card{ position:absolute; left:16px; right:16px; bottom:64px; background:rgba(246,243,235,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:10px; padding:.8rem .9rem; display:flex; align-items:center; gap:.7rem; z-index:4; }
.live-card .thumb{ width:40px; height:48px; border-radius:6px; background:var(--beige); flex:0 0 auto; overflow:hidden; }
.live-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.live-card .info{ line-height:1.3; }
.live-card .info b{ font-family:var(--serif); font-size:.92rem; color:var(--green); font-weight:600; display:block; }
.live-card .info span{ font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.live-card .tag{ margin-left:auto; font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-line); padding:.3em .5em; border-radius:20px; }
.live-hearts{ position:absolute; right:18px; bottom:120px; z-index:4; }
.live-hearts span{ position:absolute; bottom:0; right:0; color:var(--gold); font-size:1rem; opacity:0; animation:heart 3s linear infinite; }
.live-hearts span:nth-child(2){ animation-delay:1s; right:10px; }
.live-hearts span:nth-child(3){ animation-delay:2s; right:-6px; }
@keyframes heart{ 0%{ opacity:0; transform:translateY(0) scale(.6);} 15%{ opacity:1;} 100%{ opacity:0; transform:translateY(-90px) scale(1.1);} }

/* -------------------------------------------------------------
   13. DIFERENCIAIS
   ------------------------------------------------------------- */
.perks{ background:var(--green); color:var(--off); }
.perks__head{ text-align:center; margin-bottom:4rem; }
.perks .eyebrow{ color:var(--gold); }
.perks__head .h2{ color:var(--off); margin-top:1.2rem; }
.perks__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gold-line); border:1px solid var(--gold-line); }
.perk{ background:var(--green); padding:2.4rem 1.6rem; display:flex; flex-direction:column; gap:1rem; transition:background .6s var(--ease), transform .6s var(--ease); }
.perk:hover{ background:var(--green-deep); }
.perk__ic{ width:34px; height:34px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:.8rem; }
.perk h3{ font-family:var(--serif); font-size:1.35rem; font-weight:400; line-height:1.2; }

/* -------------------------------------------------------------
   14. SOBRE A FRAN
   ------------------------------------------------------------- */
.founder{ background:var(--off); }
.founder__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.founder__photo{ position:relative; aspect-ratio:3/4; background:linear-gradient(160deg,var(--beige),#cbb99c); border:1px solid var(--gold-line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; overflow:hidden; }
.founder__photo::after{ content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.35); pointer-events:none; }
.founder__photo .mark{ width:96px; opacity:.85; }
.founder__photo .plabel{ font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--green); opacity:.6; }
.founder__text .h2{ margin:1.4rem 0 1.6rem; }
.founder__text p{ color:var(--ink-soft); max-width:44ch; }
.founder__text p + p{ margin-top:1.2rem; }
.founder__sign{ margin-top:2rem; font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--green); }

/* -------------------------------------------------------------
   15. INSTAGRAM
   ------------------------------------------------------------- */
.insta{ background:var(--off); }
.insta__head{ text-align:center; margin-bottom:3.4rem; }
.insta__head .h2{ margin-top:1.2rem; }
.insta__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.insta__cell{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--beige); }
.insta__cell img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s var(--ease); filter:saturate(.96); }
.insta__cell::after{ content:""; position:absolute; inset:0; background:rgba(15,43,35,0); transition:background .5s var(--ease); }
.insta__cell:hover img{ transform:scale(1.08); }
.insta__cell:hover::after{ background:rgba(15,43,35,.28); }
.insta__cell .ig-ic{ position:absolute; inset:0; margin:auto; width:30px; height:30px; opacity:0; transform:translateY(8px); transition:.5s var(--ease); z-index:2; display:grid; place-items:center; }
.insta__cell:hover .ig-ic{ opacity:1; transform:none; }
.insta__cell .ig-ic svg{ width:26px; height:26px; stroke:var(--off); fill:none; }
.insta__cell--wide{ grid-column:span 2; grid-row:span 2; }
.insta__foot{ text-align:center; margin-top:3rem; }

/* -------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------- */
.footer{ background:var(--green); color:var(--off); padding-top:5rem; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:4rem; border-bottom:1px solid var(--gold-line); }
.footer__brand .mark{ width:64px; margin-bottom:1.4rem; }
.footer__brand .wm{ font-family:var(--cinzel); font-size:1.2rem; letter-spacing:.16em; }
.footer__brand small{ display:block; font-size:.56rem; letter-spacing:.34em; color:var(--gold); margin-top:.4rem; }
.footer__brand p{ margin-top:1.4rem; color:rgba(246,243,235,.6); font-size:.9rem; max-width:32ch; font-family:var(--serif); font-style:italic; }
.footer__col h4{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; font-weight:500; font-family:var(--sans); }
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.footer__col a, .footer__col span{ font-size:.9rem; color:rgba(246,243,235,.72); }
.footer__col a:hover{ color:var(--gold); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-block:2rem; font-size:.72rem; letter-spacing:.06em; color:rgba(246,243,235,.42); }
.footer__bottom a:hover{ color:var(--gold); }

/* -------------------------------------------------------------
   17. RESPONSIVO
   ------------------------------------------------------------- */
@media (max-width:1080px){
  .circular__cards, .perks__grid{ grid-template-columns:repeat(2,1fr); }
  .insta__grid{ grid-template-columns:repeat(4,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; gap:2.4rem; }
}
@media (max-width:840px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .hero{ grid-template-columns:1fr; }
  .hero__text{ min-height:100svh; padding-top:7rem; }
  .hero__visual{ min-height:70svh; }
  .lives__grid, .founder__grid{ grid-template-columns:1fr; }
  .founder__photo{ max-width:420px; margin-inline:auto; order:-1; }
  .lives__phone-wrap{ order:-1; }
}
@media (max-width:560px){
  .circular__cards, .perks__grid{ grid-template-columns:1fr; }
  .insta__grid{ grid-template-columns:repeat(2,1fr); }
  .insta__cell--wide{ grid-column:span 2; grid-row:auto; }
  .timeline::before{ left:34px; }
  .step{ grid-template-columns:70px 1fr; gap:1rem; }
  .step__n::before{ left:26px; }
  .footer__top{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------
   18. MOVIMENTO REDUZIDO
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}