.elementor-4811 .elementor-element.elementor-element-eb9e537{--display:flex;--background-transition:0.3s;}.elementor-4811 .elementor-element.elementor-element-dde031b{--display:flex;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4811 .elementor-element.elementor-element-dde031b.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){body.elementor-page-4811{padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-4811 .elementor-element.elementor-element-dde031b{--width:100%;}}/* Start custom CSS */<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@300;400;500&family=Raleway:wght@300;400;500&display=swap">
<style>
  /* Layout: seções 1 e 2 são cenas com o vídeo inteiro ao fundo (sem corte) sobre um reflexo desfocado; seções 3 e 4 colocam vídeo e foto ao lado do texto, com bordas dissolvidas no preto. Dourado champanhe em fios e no CTA. Sem molduras, sem itálico. */
  :root {
    --bg: #040404;
    --fg: #ffffff;
    --fg-soft: #e6dfd0;
    --gold: #e3c270;
    --gold-hi: #fff0c2;
    --gold-text: #f2d78a;
    --line: rgba(227,194,112,.45);
    --metal: linear-gradient(110deg, #f6e6b8 0%, #ddbf6c 35%, #c0983f 55%, #efd796 80%, #fcf1cc 100%);
    --display: "Marcellus", "Cormorant", Georgia, serif;
    --body: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
    --chic: "Raleway", "Jost", "Helvetica Neue", Arial, sans-serif;
    --w: 1040px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img, video { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: .01em; color: var(--fg); }
  h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
  h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
  p { margin: 0; }
  .wrap { width: min(var(--w), 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
  .eyebrow { font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; }
  .lead { font-size: clamp(.98rem, 1.15vw, 1.08rem); color: var(--fg-soft); max-width: 34em; font-weight: 300; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; border-radius: 999px; font-family: var(--body); font-weight: 500; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); border: 1px solid var(--line); background: rgba(4,4,4,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s, background .3s, transform .3s, box-shadow .3s; }
  .btn:hover { border-color: var(--gold); background: rgba(217,188,110,.12); transform: translateY(-1px); box-shadow: 0 20px 50px -24px rgba(217,188,110,.8); }
  .btn-solid { color: #241c08; background: var(--metal); border-color: transparent; background-size: 200% 100%; box-shadow: 0 18px 44px -18px rgba(217,188,110,.9); }
  .btn-solid:hover { background-position: 100% 50%; color: #241c08; }
  .btn-vivid { background: linear-gradient(110deg, #ffeeb8 0%, #f2cf6a 30%, #d9ad3c 55%, #f7dc8a 80%, #fff3c4 100%); background-size: 200% 100%; color: #1e1604; box-shadow: 0 18px 50px -16px rgba(242,207,106,1), 0 0 0 1px rgba(255,238,184,.35) inset; }
  .btn svg { width: 16px; height: 16px; flex: none; }
  .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 5px; }
  .micro { font-size: .76rem; letter-spacing: .06em; color: var(--fg-soft); font-weight: 300; }
  .micro b { color: var(--gold-text); font-weight: 500; }
  .hair { width: 1px; height: 50px; background: linear-gradient(180deg, transparent, var(--gold), transparent); margin-inline: auto; }

  /* Nav */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(180deg, rgba(4,4,4,.8), rgba(4,4,4,0)); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
  .brand { font-family: var(--display); font-size: 1.3rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
  .brand .word span { color: var(--gold-text); }
  .menu { display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; }
  .menu a { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.88); font-weight: 400; white-space: nowrap; transition: color .2s; }
  .menu a:hover { color: var(--gold-hi); }
  .nav .btn { padding: 11px 22px; font-size: .64rem; }
  .nav-right { display: flex; gap: 10px; align-items: center; }
  .nav-toggle { display: none; background: rgba(4,4,4,.35); border: 1px solid var(--line); color: var(--gold-text); width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
  @media (max-width: 1000px) {
    .menu { display: none; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .nav[data-open="true"] { background: rgba(4,4,4,.97); }
    .nav[data-open="true"] .menu { display: flex; position: absolute; inset: 84px 0 auto 0; flex-direction: column; gap: 0; background: rgba(4,4,4,.97); border-bottom: 1px solid var(--line); padding: 6px 28px 18px; }
    .nav[data-open="true"] .menu a { display: block; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  }
  @media (max-width: 560px) { .nav .btn span { display: none; } .nav .btn { padding: 11px 13px; } .cta .btn { padding: 14px 22px; letter-spacing: .16em; font-size: .7rem; } .float { width: 48px; height: 48px; right: 14px; } }

  /* Scene: full video at its real proportion over a blurred reflection of itself */
  .scene { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; justify-items: center; text-align: center; min-height: min(100svh, 820px); padding-block: clamp(100px, 14vh, 160px); }
  .scene > .fill { position: absolute; inset: -4%; z-index: -3; width: 108%; height: 108%; object-fit: cover; opacity: .95; }
  .scene > .bg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -2; height: 100%; width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: center;
    -webkit-mask-image: radial-gradient(58% 62% at 50% 50%, #000 45%, rgba(0,0,0,.55) 72%, transparent 100%); mask-image: radial-gradient(58% 62% at 50% 50%, #000 45%, rgba(0,0,0,.55) 72%, transparent 100%); }
  #formatura > .bg { filter: brightness(.62) contrast(1.08) saturate(1.1); }
  #formatura > .fill { filter: brightness(.7); }
  #formatura > .veil { background: radial-gradient(46% 52% at 50% 52%, rgba(4,4,4,.62) 0%, rgba(4,4,4,.3) 60%, rgba(4,4,4,0) 100%), linear-gradient(180deg, var(--bg) 0%, rgba(4,4,4,0) 16%, rgba(4,4,4,0) 84%, var(--bg) 100%); }
  .scene > .veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(42% 48% at 50% 52%, rgba(4,4,4,.5) 0%, rgba(4,4,4,.22) 60%, rgba(4,4,4,0) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(4,4,4,0) 16%, rgba(4,4,4,0) 84%, var(--bg) 100%); }
  .scene .wrap { display: grid; gap: 26px; justify-items: center; }
  .scene h1, .scene h2 { max-width: 18ch; text-shadow: 0 2px 16px rgba(0,0,0,1), 0 0 60px rgba(0,0,0,.9); }
  .scene .lead { text-align: center; color: var(--fg); text-shadow: 0 1px 12px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,.9); }
  .scene .micro { color: #ece5d5; text-shadow: 0 1px 10px rgba(0,0,0,1); }
  .scene .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,1); }
  .cta { display: grid; gap: 14px; justify-items: center; margin-top: 10px; }

  /* Hero: vídeo cobrindo a seção inteira */
  .hero > .bg { left: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; max-width: none; object-fit: cover; object-position: center 45%; -webkit-mask-image: none; mask-image: none; }
  .hero > .fill { display: none; }
  .hero > .veil { background: radial-gradient(60% 55% at 50% 52%, rgba(4,4,4,.45) 0%, rgba(4,4,4,.15) 60%, rgba(4,4,4,0) 100%), linear-gradient(180deg, rgba(4,4,4,.55) 0%, rgba(4,4,4,0) 22%, rgba(4,4,4,0) 78%, var(--bg) 100%); }
  /* Hero crossfade */
  .hero > .bg, .hero > .fill { transition: opacity 1.8s ease; }
  .hero > .bg[data-active="false"], .hero > .fill[data-active="false"] { opacity: 0; }
  .hero h1 em { font-style: normal; display: block; color: var(--gold-text); }

  /* Proof line */
  .proof { text-align: center; padding-block: 34px 6px; }
  .proof p { font-family: var(--chic); font-weight: 300; font-size: clamp(.9rem, 1.2vw, 1.05rem); color: var(--fg); letter-spacing: .12em; text-transform: uppercase; }
  .proof b { font-family: var(--display); font-weight: 400; font-size: 1.5em; color: var(--gold-text); letter-spacing: .02em; margin-right: 6px; vertical-align: -1px; }

  /* Gallery: vitrine em movimento, peças grandes com fio dourado inset */
  .strip { position: relative; overflow: hidden; padding-block: 40px 90px; }
  .strip::before, .strip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
  .strip::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
  .strip::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
  .strip .rail { display: flex; gap: clamp(16px, 2.2vw, 30px); width: max-content; animation: glide 95s linear infinite; padding-inline: 10px; }
  .strip:hover .rail { animation-play-state: paused; }
  .strip figure { margin: 0; flex: none; width: clamp(240px, 24vw, 340px); aspect-ratio: 4 / 5; position: relative; overflow: hidden; border-radius: 2px; background: #0a0908; box-shadow: 0 50px 90px -40px rgba(0,0,0,1), 0 0 60px -20px rgba(217,188,110,.25); }
  .strip img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.08) saturate(1.08) contrast(1.04); transition: transform 2s cubic-bezier(.2,.7,.2,1); }
  .strip figure:hover img { transform: scale(1.05); }
  .strip figure::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(246,230,184,.45); z-index: 2; pointer-events: none; }
  .strip figure::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,4,4,.25), transparent 30%, transparent 70%, rgba(4,4,4,.45)); }
  .strip .rule { position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 3; opacity: .7; }
  .strip .rule.top { top: 16px; } .strip .rule.bottom { bottom: 56px; }
  @keyframes glide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (max-width: 600px) { .strip figure { width: 72vw; } }

  /* Courses */
  .courses { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; max-width: 46rem; }
  #formatura h2 .g { font-style: normal; color: #f0d58a; text-shadow: 0 2px 16px rgba(0,0,0,1), 0 0 30px rgba(240,213,138,.35); }
  .courses span { font-family: var(--display); font-size: clamp(.95rem, 1.3vw, 1.1rem); letter-spacing: .18em; text-transform: uppercase; color: #f0d58a; padding-inline: 22px; position: relative; text-shadow: 0 1px 12px rgba(0,0,0,1); }
  .courses span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: var(--line); }

  /* Section 3: faixa horizontal de ponta a ponta. Painel escuro com fios dourados à esquerda, foto da oficina à direita, arcos finos cruzando a junção, selo discreto. */
  .craft { position: relative; padding-block: 0; }
  .band3 { position: relative; display: grid; grid-template-columns: 46% 54%; grid-template-rows: auto 1fr auto; min-height: clamp(520px, 50vw, 640px); overflow: hidden; background: #0b0906; }
  .band3::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, var(--bg), transparent); z-index: 4; pointer-events: none; }
  .band3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, var(--bg), transparent); z-index: 4; pointer-events: none; }
  .band3 .panel { position: relative; z-index: 2; padding: clamp(26px, 3vw, 44px) clamp(28px, 5vw, 80px) clamp(20px, 2vw, 30px); background: linear-gradient(135deg, #151006 0%, #0c0905 60%, #0b0906 100%); color: var(--fg); display: grid; align-content: center; justify-items: center; text-align: center; gap: 22px; }
  .band3 .panel .eyebrow { font-size: .62rem; letter-spacing: .34em; color: var(--gold-text); }
  .band3 .head3 { grid-column: 1 / -1; position: relative; z-index: 5; display: grid; justify-items: center; text-align: center; gap: 14px; padding: clamp(70px, 8vw, 110px) 24px 0; }
  .band3 .head3 .eyebrow { font-size: .64rem; letter-spacing: .36em; color: var(--gold-text); text-shadow: 0 1px 10px rgba(0,0,0,1); }
  .band3 .head3 h2 { font-size: clamp(1.6rem, 3.3vw, 3rem); line-height: 1.1; max-width: none; white-space: nowrap; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,1), 0 0 60px rgba(0,0,0,.9); }
  .band3 .head3 h2 em { font-style: normal; color: var(--gold-text); }
  .band3 .panel p.txt { font-family: var(--chic); font-weight: 300; font-size: .95rem; line-height: 1.7; color: var(--fg-soft); max-width: 40ch; }
  .band3 .marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: min(100%, 300px); }
  .band3 .marks li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); text-align: left; }
  .band3 .marks li:last-child { border-bottom: 1px solid var(--line); }
  .band3 .marks svg { width: 24px; height: 24px; flex: none; stroke: var(--gold-text); fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
  .band3 .marks span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; line-height: 1.5; }
  .band3 .foot3 { grid-column: 1 / -1; position: relative; z-index: 5; display: grid; justify-items: center; padding: 10px 24px clamp(70px, 7vw, 100px); }
  .band3 .photo { position: absolute; inset: 0; left: 46%; overflow: hidden; }
  .band3 .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(1.02); }
  .band3 .photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b0906 0%, rgba(11,9,6,.55) 18%, transparent 45%), linear-gradient(180deg, rgba(11,9,6,.85) 0%, rgba(11,9,6,.45) 30%, transparent 50%, transparent 68%, rgba(11,9,6,.85) 100%); pointer-events: none; z-index: 1; }
  .band3 .seal { position: absolute; right: clamp(20px, 3vw, 44px); top: 50%; transform: translateY(-50%); width: 104px; height: 104px; border-radius: 50%; background: rgba(246,230,184,.96); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); display: grid; place-items: center; z-index: 3; }
  .band3 .seal svg { width: 100%; height: 100%; }
  @media (max-width: 900px) {
    .band3 { grid-template-columns: 1fr; grid-template-rows: auto; min-height: auto; }
    .band3 .head3 { padding-top: 60px; }
    .band3 .head3 h2 { white-space: normal; max-width: 16ch; }
    .band3 .photo { position: relative; left: 0; order: 1; min-height: 260px; }
    .band3 .panel { order: 2; }
    .band3 .foot3 { order: 3; }
    .band3 .photo::before { background: linear-gradient(180deg, transparent 50%, #0b0906 100%); }
    .band3 .seal { display: none; }
    .band3 .panel { padding-top: 40px; text-align: center; justify-items: center; }
    .band3 .panel .btn { justify-self: center; }
  }

  /* Section 4: cena com o fundador ao fundo (foto à direita), texto à esquerda sobre o fundo */
  .founder { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(520px, 80vh, 700px); display: grid; align-items: center; }
  .founder picture { display: contents; }
  .founder .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
  .founder .veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
    linear-gradient(90deg, rgba(4,4,4,.98) 0%, rgba(4,4,4,.92) 40%, rgba(4,4,4,.4) 60%, rgba(4,4,4,.05) 78%, rgba(4,4,4,.35) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(4,4,4,0) 16%, rgba(4,4,4,0) 84%, var(--bg) 100%); }
  .founder .wrap { width: min(1240px, 100%); padding-block: clamp(90px, 12vh, 140px); display: grid; grid-template-columns: minmax(0, 46%) 1fr; }
  .founder .copy { display: grid; gap: 20px; max-width: 440px; min-width: 0; justify-items: start; }
  .founder h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: 1.12; max-width: 100%; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
  .founder h2 em { font-style: normal; color: var(--gold-text); }
  .founder .intro { font-family: var(--chic); font-weight: 300; font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.8; color: var(--fg-soft); max-width: 100%; text-shadow: 0 1px 12px rgba(0,0,0,.9); }
  .founder .intro b, .founder .pull b { font-weight: 500; color: var(--gold-text); }
  .founder .pull { font-family: var(--display); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; color: #fff; max-width: 100%; padding: 4px 0; text-shadow: 0 1px 12px rgba(0,0,0,.9); }
  .founder .pull::before { content: ""; display: block; width: 44px; height: 1px; background: var(--gold); margin-bottom: 14px; }
  .founder .last { font-family: var(--display); font-size: 1.3rem; color: var(--gold-text); letter-spacing: .04em; }
  .founder .trust { display: flex; flex-wrap: wrap; gap: 0; margin-top: 6px; }
  .founder .trust span { display: inline-flex; align-items: center; gap: 10px; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--line); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; }
  .founder .trust span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .founder .trust svg { width: 22px; height: 22px; stroke: var(--gold-text); fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .founder .sign { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
  .founder .cta { justify-items: start; margin-top: 4px; }
  .founder .tag { position: absolute; right: clamp(20px, 4vw, 60px); bottom: clamp(26px, 4vh, 44px); z-index: 2; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text); background: rgba(4,4,4,.55); border: 1px solid var(--line); padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
  @media (max-width: 900px) {
    .founder { min-height: auto !important; display: block !important; }
    .founder picture { display: block !important; position: relative !important; width: 100% !important; height: min(118vw, 560px) !important; overflow: hidden !important; }
    .founder picture::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, rgba(4,4,4,0) 14%, rgba(4,4,4,0) 62%, var(--bg) 100%); }
    .founder .bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: 50% 12% !important; }
    .founder .veil { display: none !important; }
    .founder { padding: 0 !important; margin: 0 !important; }
    .founder picture { margin: 0 !important; padding: 0 !important; line-height: 0; }
    .founder .bg { display: block !important; margin: 0 !important; }
    .founder .wrap { grid-template-columns: 1fr; padding-top: 0 !important; padding-bottom: 100px !important; margin-top: -24px; display: grid; justify-items: center; text-align: center; position: relative; z-index: 2; }
    .founder .copy { justify-items: center; max-width: 480px; }
    .founder .pull::before { margin-inline: auto; }
    .founder .cta { justify-items: center; }
    .founder .tag { display: none; }
  }

  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 6px; width: 100%; }
  .pillars div { padding: 6px 18px 6px 0; display: grid; gap: 6px; }
  .pillars div + div { border-left: 1px solid var(--line); padding-left: 18px; }
  .pillars h3 { font-family: var(--display); font-weight: 400; font-size: .92rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); margin: 0; }
  .pillars p { color: var(--fg-soft); font-size: .9rem; line-height: 1.55; }
  @media (max-width: 860px) { .pillars { text-align: center; } .pillars div { padding: 6px 12px; } .pillars div + div { padding-left: 12px; } }
  @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; gap: 16px; } .pillars div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } }

  /* Assinatura */
  .sign .name { font-family: var(--display); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
  .sign .role { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text); padding-left: 14px; border-left: 1px solid var(--line); }
  @media (max-width: 860px) { .sign { justify-content: center; flex-wrap: wrap; } }

  footer { position: relative; padding-block: 34px 26px; background: var(--bg); color: var(--fg-soft); }
  footer::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1100px, 86%); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  footer .wrap { width: min(1100px, 100%); display: grid; gap: 18px; }
  footer .row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; align-items: center; }
  footer .brand { font-size: 1.1rem; }
  footer .mono { width: 34px; height: 34px; }
  footer .col h4 { font-family: var(--chic); font-weight: 500; font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 6px; }
  footer .col p { font-family: var(--chic); font-weight: 300; font-size: .82rem; line-height: 1.7; color: var(--fg-soft); }
  footer .col a { color: var(--fg); transition: color .2s; }
  footer .col a:hover { color: var(--gold-hi); }
  footer .cnpj { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(230,223,208,.5); text-align: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
  @media (max-width: 760px) { footer .row { grid-template-columns: 1fr; text-align: center; gap: 20px; } footer .brand { justify-content: center; } }

  .float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--metal); color: #241c08; box-shadow: 0 14px 34px -10px rgba(217,188,110,.8); transition: transform .25s; }
  .float:hover { transform: scale(1.06); }
  .float svg { width: 24px; height: 24px; }


  /* Monograma */
  .mono { width: 34px; height: 34px; flex: none; }
  .brand { display: inline-flex; align-items: center; gap: 12px; }
  footer .mono { width: 44px; height: 44px; }

  /* Fio dourado que se desenha ao entrar */
  .hair { transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
  .hair.in { transform: scaleY(1); animation: none; }

  /* Brilho que percorre os botões */
  .btn { position: relative; overflow: hidden; }
  .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .9s ease; pointer-events: none; }
  .btn:hover::after { left: 120%; }
  .btn-solid::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); }

  /* Ritmo: formatura mais compacta que o hero */
  #formatura { min-height: min(82svh, 680px); padding-block: clamp(80px, 11vh, 130px); }

  /* Vitrine clicável */
  .strip figure { cursor: zoom-in; }
  .strip figure:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 4px; }
  .lb { position: fixed; inset: 0; z-index: 90; background: rgba(4,4,4,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .35s; }
  .lb[data-open="true"] { opacity: 1; pointer-events: auto; }
  .lb .card { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: min(92vw, 520px); }
  .lb .pic { position: relative; width: min(82vw, 440px); aspect-ratio: 1; }
  .lb .pic::before { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(246,230,184,.5); pointer-events: none; }
  .lb .pic img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 60px 120px -40px rgba(0,0,0,1), 0 0 80px -20px rgba(217,188,110,.35); }
  .lb .name { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: .06em; color: var(--fg); margin-top: 10px; }
  .lb .sub { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text); }
  .lb .close { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(4,4,4,.5); color: var(--gold-hi); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; }



  .reveal.in { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } .hair { transform: none; transition: none; } .btn::after { display: none; } .strip .rail { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .btn, .hero > .bg, .hero > .fill { transition: none; } html { scroll-behavior: auto; } }
</style>

<header class="nav" id="nav">
  <div class="wrap">
    <a class="brand" href="#top"><svg class="mono" viewBox="0 0 48 48" aria-hidden="true"><circle cx="24" cy="24" r="22.5" fill="none" stroke="url(#mg)" stroke-width="1"/><circle cx="24" cy="24" r="18.5" fill="none" stroke="rgba(217,188,110,.35)" stroke-width=".6"/><text x="24" y="30" text-anchor="middle" font-family="Marcellus, Georgia, serif" font-size="17" letter-spacing="1" fill="url(#mg)">FJ</text><defs><linearGradient id="mg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f6e6b8"/><stop offset=".5" stop-color="#d9bc6e"/><stop offset="1" stop-color="#b8923d"/></linearGradient></defs></svg><span class="word">Fernandez <span>Joias</span></span></a>
    <ul class="menu" id="menu">
      <li><a href="#aliancas">Alianças</a></li>
      <li><a href="#formatura">Formatura</a></li>
      <li><a href="#joias">Joias 18k</a></li>
      <li><a href="#quem">Quem faz</a></li>
    </ul>
    <div class="nav-right">
      <a class="btn wa" data-msg="hero" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.3.8 3.1.7a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3z"/></svg><span>Falar no WhatsApp</span></a>
      <button class="nav-toggle" id="navToggle" aria-label="Abrir menu" aria-expanded="false">☰</button>
    </div>
  </div>
</header>

<main id="top">

  <!-- SEÇÃO 1 · ALIANÇAS (hero com dois vídeos alternando, proporção real) -->
  <section class="scene hero" id="aliancas">
    <video class="bg" id="heroA" data-active="true" autoplay muted playsinline preload="auto" poster="https://growsalescompany.com/wp-content/uploads/2026/10/poster-4.jpg" aria-hidden="true">
      <source src="https://growsalescompany.com/wp-content/uploads/2026/10/video-4.mp4" type="video/mp4">
    </video>
    <video class="bg" id="heroB" data-active="false" muted playsinline preload="none" poster="https://growsalescompany.com/wp-content/uploads/2026/10/poster-1.jpg" data-src="https://growsalescompany.com/wp-content/uploads/2026/10/video-1.mp4" aria-hidden="true"></video>
    <div class="veil"></div>
    <div class="wrap">
      <span class="eyebrow reveal">Ouro 18k · Sob encomenda</span>
      <h1 class="reveal">Alianças de ouro 18k para o seu <em>noivado e casamento</em></h1>
      <p class="lead reveal">Feitas sob encomenda, no tamanho de vocês dois, com o nome um do outro gravado por dentro.</p>
      <div class="cta reveal">
        <a class="btn btn-solid wa" data-msg="aliancas" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.3.8 3.1.7a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3z"/></svg>Falar no WhatsApp</a>
      </div>
    </div>
  </section>

  <div class="proof">
    <div class="wrap">
      <p><b>+400</b> casais já disseram sim com nossas alianças.</p>
    </div>
  </div>

  <div class="strip" aria-label="Alianças feitas pela Fernandez Joias">
    <span class="rule top"></span>
    <div class="rail">
      <figure tabindex="0" data-name="Diamantada com friso" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-1.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-1.jpg" alt="Diamantada com friso, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Friso duplo com brilhantes" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-4.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-4.jpg" alt="Friso duplo com brilhantes, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Larga com pavê e solitário" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-7.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-7.jpg" alt="Larga com pavê e solitário, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Diamantada clássica" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-2.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-2.jpg" alt="Diamantada clássica, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Larga com cravejado" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-8.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-8.jpg" alt="Larga com cravejado, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Polida com friso" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-5.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-5.jpg" alt="Polida com friso, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Solitário com aliança" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-3.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-3.jpg" alt="Solitário com aliança, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Fosca com ponto de luz" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-9.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-9.jpg" alt="Fosca com ponto de luz, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Reta chanfrada" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-6.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-6.jpg" alt="Reta chanfrada, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Diamantada com friso" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-1.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-1.jpg" alt="Diamantada com friso, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Friso duplo com brilhantes" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-4.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-4.jpg" alt="Friso duplo com brilhantes, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Larga com pavê e solitário" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-7.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-7.jpg" alt="Larga com pavê e solitário, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Diamantada clássica" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-2.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-2.jpg" alt="Diamantada clássica, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Larga com cravejado" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-8.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-8.jpg" alt="Larga com cravejado, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Polida com friso" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-5.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-5.jpg" alt="Polida com friso, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Solitário com aliança" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-3.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-3.jpg" alt="Solitário com aliança, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Fosca com ponto de luz" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-9.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-9.jpg" alt="Fosca com ponto de luz, alianças em ouro 18k" loading="lazy"></figure>
      <figure tabindex="0" data-name="Reta chanfrada" data-img="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-6.jpg"><img src="https://growsalescompany.com/wp-content/uploads/2026/10/alianca-6.jpg" alt="Reta chanfrada, alianças em ouro 18k" loading="lazy"></figure>
    </div>
    <span class="rule bottom"></span>
  </div>

  <!-- SEÇÃO 2 · FORMATURA (vídeo ao fundo, proporção real) -->
  <section class="scene" id="formatura">
    <img class="fill" src="https://growsalescompany.com/wp-content/uploads/2026/10/fill-2.jpg" alt="" aria-hidden="true" loading="lazy">
    <video class="bg lazy" muted loop playsinline preload="none" poster="https://growsalescompany.com/wp-content/uploads/2026/10/poster-2.jpg" data-src="https://growsalescompany.com/wp-content/uploads/2026/10/video-2.mp4" aria-hidden="true"></video>
    <div class="veil"></div>
    <div class="wrap">
      <span class="eyebrow reveal">Seu anel de formatura</span>
      <h2 class="reveal">Anéis de <em class="g">formatura</em> para o seu curso</h2>
      <p class="lead reveal">Você passou anos construindo isso. Agora carrega no dedo. Com a pedra na cor do seu curso e seu nome, turma e ano gravados.</p>
      <div class="hair reveal"></div>
      <div class="courses reveal">
        <span>Medicina</span><span>Direito</span><span>Farmácia</span><span>Enfermagem</span><span>Engenharia</span><span>Odontologia</span>
      </div>
      <div class="cta reveal">
        <a class="btn btn-solid btn-vivid wa" data-msg="formatura" href="#">Quero ver modelos para o meu curso</a>
      </div>
    </div>
  </section>

  <!-- SEÇÃO 3 · JOIAS 18K (faixa horizontal: painel escuro + foto da oficina) -->
  <section class="craft" id="joias">
    <div class="band3 reveal">
      <div class="head3">
        <span class="eyebrow">Feita sob encomenda</span>
        <h2>A arte de desenhar <em>a sua joia com você</em></h2>
      </div>
      <div class="panel">
        <p class="txt">Tem joia que não existe em vitrine nenhuma. Ela nasce de uma história que só você conhece e ganha forma, peça por peça, em ouro 18k maciço. Você conta a ideia, aprova o desenho e recebe uma joia feita para durar mais que a própria história.</p>
        <ul class="marks">
          <li><svg viewBox="0 0 48 48" aria-hidden="true"><circle cx="24" cy="29" r="12"/><circle cx="24" cy="29" r="7"/><path d="M18 18l6-9 6 9"/></svg><span>Ouro 18k maciço</span></li>
          <li><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M10 38l10-10"/><path d="M20 28l12-12 4 4-12 12z"/><path d="M30 14l4-4 4 4-4 4"/><path d="M8 40l4-4"/></svg><span>Feito à mão, peça por peça</span></li>
          <li><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 6l14 5v12c0 9-6 15-14 19-8-4-14-10-14-19V11z"/><path d="M17 24l5 5 9-10"/></svg><span>Garantia vitalícia</span></li>
        </ul>
      </div>
      <div class="foot3">
        <a class="btn btn-solid btn-vivid wa" data-msg="joias" href="#">Quero criar a minha joia</a>
      </div>
      <div class="photo">
        <img src="https://growsalescompany.com/wp-content/uploads/2026/10/oficina.jpg" alt="Joalheiro ajustando um colar de ouro na bancada" loading="lazy">
      </div>
      <div class="seal" aria-hidden="true">
        <svg viewBox="0 0 144 144">
          <defs><path id="arc" d="M72,72 m-50,0 a50,50 0 1,1 100,0 a50,50 0 1,1 -100,0"/></defs>
          <text font-family="Jost, Helvetica, Arial, sans-serif" font-size="10" letter-spacing="2.8" fill="#7a5b1b" font-weight="500"><textPath href="#arc" startOffset="0">FEITO À MÃO · OURO 18K · FERNANDEZ JOIAS ·</textPath></text>
          <circle cx="72" cy="72" r="30" fill="none" stroke="#7a5b1b" stroke-width=".8"/>
          <text x="72" y="80" text-anchor="middle" font-family="Marcellus, Georgia, serif" font-size="24" letter-spacing="2" fill="#7a5b1b">FJ</text>
        </svg>
      </div>
    </div>
  </section>

  <!-- SEÇÃO 4 · QUEM FAZ (fundador ao fundo, texto sobre a cena) -->
  <section class="founder" id="quem">
    <picture>
      <source media="(max-width: 900px)" srcset="https://growsalescompany.com/wp-content/uploads/2026/10/jefferson.jpg">
      <img class="bg" src="https://growsalescompany.com/wp-content/uploads/2026/10/fundador-bg.jpg" alt="" aria-hidden="true" loading="lazy">
    </picture>
    <div class="veil"></div>
    <div class="wrap">
      <div class="copy reveal">
        <span class="eyebrow">Quem assina a peça</span>
        <h2>É na sua história que <em>a sua joia começa</em></h2>
        <p class="intro">A Fernandez Joias nasceu em 2019 para que ninguém mais saísse de uma joalheria com uma <b>caixa bonita na mão e uma dúvida no peito</b>.</p>
        <p class="pull">Uma aliança não fica na caixa. Ela vai estar na sua mão no <b>dia do casamento</b>, no <b>primeiro filho</b>, nas <b>bodas de prata</b>.</p>
        <p class="intro">Aqui você <b>fala com quem faz</b>, aprova o desenho e recebe exatamente o que imaginou.</p>
        <div class="sign">
          <span class="name">Jefferson Fernandez</span>
          <span class="role">Joalheiro e fundador</span>
        </div>
        <div class="cta">
          <a class="btn btn-solid btn-vivid wa" data-msg="historia" href="#">Falar com a Fernandez Joias</a>
        </div>
      </div>
    </div>
    <span class="tag">Fernandez Joias · desde 2019</span>
  </section>
</main>

<footer>
  <div class="wrap">
    <div class="row">
      <div class="brand"><svg class="mono" viewBox="0 0 48 48" aria-hidden="true"><circle cx="24" cy="24" r="22.5" fill="none" stroke="url(#mg2)" stroke-width="1"/><text x="24" y="30" text-anchor="middle" font-family="Marcellus, Georgia, serif" font-size="17" letter-spacing="1" fill="url(#mg2)">FJ</text><defs><linearGradient id="mg2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff0c2"/><stop offset=".5" stop-color="#e3c270"/><stop offset="1" stop-color="#b8923d"/></linearGradient></defs></svg><span class="word">Fernandez <span>Joias</span></span></div>
      <div class="col"><h4>Atendimento</h4><p>Segunda a sábado, das 8h às 20h</p><p><a class="wa" data-msg="hero" href="#">WhatsApp</a> · <a href="https://www.instagram.com/fernandezjoiass" target="_blank" rel="noopener">Instagram</a></p></div>
      <div class="col"><h4>Onde estamos</h4><p>Tianguá, Ceará</p><p>Entregamos para todo o Brasil</p></div>
    </div>
    <p class="cnpj">CNPJ 59.272.507/0001-47</p>
  </div>
</footer>


<div class="lb" id="lb" data-open="false" role="dialog" aria-modal="true" aria-label="Modelo de aliança">
  <button class="close" id="lbClose" aria-label="Fechar">✕</button>
  <div class="card">
    <div class="pic"><img id="lbImg" src="" alt=""></div>
    <span class="sub">Ouro 18k · feito sob encomenda</span>
    <div class="name" id="lbName"></div>
    <a class="btn btn-solid" id="lbBtn" href="#" target="_blank" rel="noopener">Quero esse modelo</a>
  </div>
</div>

<a class="float wa" data-msg="hero" href="#" aria-label="Falar no WhatsApp"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.3.8 3.1.7a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.5-.3z"/></svg></a>

<script>
  // Número do WhatsApp da Fernandez Joias (DDI + DDD + número, só dígitos). Trocar antes de publicar.
  var WHATSAPP = '5588992871890';
  var MSG_PADRAO = 'Oi, vim da LP. Gostaria de mais informações.';
  document.querySelectorAll('.wa').forEach(function (a) {
    a.href = 'https://wa.me/' + WHATSAPP + '?text=' + encodeURIComponent(MSG_PADRAO);
    a.target = '_blank'; a.rel = 'noopener';
  });

  function loadVid(v) { if (!v || v.getAttribute('src')) return; v.src = v.getAttribute('data-src'); v.load(); var p = v.play(); if (p && p.catch) p.catch(function () {}); }

  // Hero: alterna os dois vídeos de alianças com fusão suave.
  var vids = [document.getElementById('heroA'), document.getElementById('heroB')];
  var cur = 0;
  var small = window.matchMedia('(max-width: 700px)').matches;
  function swap() {
    if (small) { vids[0].currentTime = 0; var q = vids[0].play(); if (q && q.catch) q.catch(function () {}); return; }
    var next = (cur + 1) % vids.length;
    loadVid(vids[next]);
    vids[next].currentTime = 0;
    var p = vids[next].play(); if (p && p.catch) p.catch(function () {});
    vids[next].setAttribute('data-active', 'true');
    vids[cur].setAttribute('data-active', 'false');
    cur = next;
  }
  vids.forEach(function (v) { v.addEventListener('ended', swap); });
  if (!small) { vids[0].addEventListener('timeupdate', function pre() { if (vids[0].duration && vids[0].currentTime > vids[0].duration - 4) { loadVid(vids[1]); vids[1].pause(); vids[0].removeEventListener('timeupdate', pre); } }); }


  // Vídeos das seções 2 e 3 só carregam quando chegam perto da tela.
  var lazyVids = document.querySelectorAll('video.lazy');
  if ('IntersectionObserver' in window) {
    var vio = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { loadVid(e.target); vio.unobserve(e.target); } }); }, { rootMargin: '400px 0px' });
    lazyVids.forEach(function (v) { vio.observe(v); });
  } else { lazyVids.forEach(loadVid); }

  // Fio dourado se desenha ao entrar.
  var hairs = document.querySelectorAll('.hair');
  if ('IntersectionObserver' in window) {
    var hio = new IntersectionObserver(function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); hio.unobserve(e.target); } }); }, { threshold: .5 });
    hairs.forEach(function (h) { hio.observe(h); });
  } else { hairs.forEach(function (h) { h.classList.add('in'); }); }

  // Vitrine: abre o modelo e manda o nome para o WhatsApp.
  var lb = document.getElementById('lb'), lbImg = document.getElementById('lbImg'), lbName = document.getElementById('lbName'), lbBtn = document.getElementById('lbBtn');
  function openLb(fig) {
    var name = fig.getAttribute('data-name');
    lbImg.src = fig.getAttribute('data-img'); lbImg.alt = name; lbName.textContent = name;
    lbBtn.href = 'https://wa.me/' + WHATSAPP + '?text=' + encodeURIComponent(MSG_PADRAO);
    lb.setAttribute('data-open', 'true'); document.body.style.overflow = 'hidden';
  }
  function closeLb() { lb.setAttribute('data-open', 'false'); document.body.style.overflow = ''; }
  document.querySelectorAll('.strip figure').forEach(function (f) {
    f.addEventListener('click', function () { openLb(f); });
    f.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLb(f); } });
  });
  document.getElementById('lbClose').addEventListener('click', closeLb);
  lb.addEventListener('click', function (e) { if (e.target === lb) closeLb(); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeLb(); });

  var nav = document.getElementById('nav'), toggle = document.getElementById('navToggle');
  toggle.addEventListener('click', function () {
    var open = nav.getAttribute('data-open') === 'true';
    nav.setAttribute('data-open', String(!open));
    toggle.setAttribute('aria-expanded', String(!open));
  });
  document.querySelectorAll('#menu a').forEach(function (a) { a.addEventListener('click', function () { nav.setAttribute('data-open', 'false'); toggle.setAttribute('aria-expanded', 'false'); }); });

  var items = document.querySelectorAll('.reveal');
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { rootMargin: '0px 0px -8% 0px', threshold: .08 });
    items.forEach(function (el) { io.observe(el); });
  }
</script>/* End custom CSS */