<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andy Beauty Lounge · Beleza com saúde capilar em Salvador</title>
<meta name="description" content="Coloração, mechas, morena iluminada e terapia capilar com técnica e cuidado. 26 anos revelando a beleza saudável de cada mulher. Salvador, Bahia." />
<meta name="theme-color" content="#232B33" />
<link rel="icon" href="img/favicon.ico?v=2" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32.png?v=2" />
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16.png?v=2" />
<link rel="apple-touch-icon" href="img/favicon-180.png?v=2" />

<!-- Open Graph -->
<meta property="og:title" content="Andy Beauty Lounge · Beleza com saúde capilar" />
<meta property="og:description" content="A beleza que já é sua, revelada com técnica e cuidado. Salvador, Bahia." />
<meta property="og:type" content="website" />
<meta property="og:image" content="img/hero.webp" />

<!-- IvyOra Text (fonte oficial da marca via Adobe Fonts) -->
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<link rel="preconnect" href="https://use.typekit.net" />
<link rel="stylesheet" href="https://use.typekit.net/dyy1fea.css" />
<link rel="preload" href="fonts/SFProDisplay-Regular.woff2" as="font" type="font/woff2" crossorigin />

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        ink:   '#232B33',   // dark dominant (petrol navy)
        ink2:  '#1B222A',   // deeper
        slate: '#414D5B',   // slate blue
        taupe: '#8A817A',   // warm accent
        taupe2:'#76716D',
        cream: '#E9E6DE',    // light cream ink
        sand:  '#EFEDE7',    // light bg
        sand2: '#E3E1DA',    // light bg alt
      },
      fontFamily: {
        serif: ['"ivyora-text"', 'Georgia', 'serif'],
        sans:  ['"SF Pro Display"', '-apple-system', 'BlinkMacSystemFont', 'system-ui', 'sans-serif'],
      },
    },
  },
}
</script>
<style>
  /* ===== Fontes oficiais do projeto: IvyOra Text (Adobe Fonts) + SF Pro Display ===== */
  @font-face{font-family:'SF Pro Display';src:url('fonts/SFProDisplay-Regular.woff2') format('woff2'),url('fonts/SFProDisplay-Regular.otf') format('opentype');font-weight:300 600;font-style:normal;font-display:swap}
  html{scroll-behavior:smooth}
  body{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:#232B33;color:#E9E6DE;-webkit-font-smoothing:antialiased}
  .eyebrow{letter-spacing:normal;text-transform:uppercase;font-weight:500}
  .track{letter-spacing:normal}
  .serif{font-family:'ivyora-text','Georgia',serif;font-weight:400;font-style:normal}
  .serif.italic{font-family:'ivyora-text','Georgia',serif;font-style:italic}
  .wm{position:absolute;pointer-events:none;user-select:none}
  /* reveal on scroll (JS-gated so content is visible without JS) */
  .js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){ .js .rv{opacity:1;transform:none;transition:none} }
  .rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
  .hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(233,230,222,.28),transparent)}
  .hairline-d{height:1px;background:linear-gradient(90deg,transparent,rgba(35,43,51,.22),transparent)}
  .lift{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .lift:hover{transform:translateY(-6px)}
  .imgz{overflow:hidden}
  .imgz img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .imgz:hover img{transform:scale(1.05)}
  ::selection{background:#8A817A;color:#fff}
  /* mobile menu */
  #mnav{transition:opacity .4s,visibility .4s}

  /* melhor quebra de linha: balance só no desktop (no mobile estoura), normal no celular */
  p{text-wrap:pretty}
  @media (min-width:640px){ h1,h2,h3,.balance{text-wrap:balance} }
  @media (max-width:639px){
    h1{font-size:clamp(2.4rem,11.5vw,3.4rem)!important;line-height:1.03!important}
    h2{font-size:clamp(1.7rem,6.6vw,2.1rem)!important;line-height:1.16!important}
    h3{font-size:clamp(1.3rem,5.4vw,1.8rem)!important}
    h1,h2,h3{text-wrap:normal!important;overflow-wrap:break-word;word-break:normal}
  }

  /* hero ken burns */
  @keyframes kb{0%{transform:scale(1.04)}100%{transform:scale(1.16)}}
  .kenburns{animation:kb 22s ease-in-out infinite alternate}

  /* watermark flutuando */
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  .floaty{animation:floaty 9s ease-in-out infinite}

  /* esteira de fotos */
  @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  .marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
  @media (hover:hover) and (pointer:fine){ .marquee-track:hover{animation-play-state:paused} }

  /* slideshow de cards (crossfade) */
  .slideshow{position:relative;overflow:hidden}
  .slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transform:scale(1.02);transition:opacity 1.4s ease,transform 6s ease}
  .slideshow img.on{opacity:1;transform:scale(1.09)}
  .slideshow .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:5}
  .slideshow .dots i{width:5px;height:5px;border-radius:9px;background:rgba(233,230,222,.55);transition:width .4s,background .4s}
  .slideshow .dots i.on{width:16px;background:#E9E6DE}

  /* botao com brilho */
  .shine{position:relative;overflow:hidden}
  .shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s ease}
  .shine:hover::after{left:130%}

  /* contador */
  .count{font-variant-numeric:tabular-nums}
</style>
</head>
<body class="font-sans bg-ink text-cream overflow-x-hidden">

<!-- ============ HEADER ============ -->
<header id="hdr" class="fixed top-0 inset-x-0 z-50 transition-all duration-500">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 flex items-center justify-between h-[74px]">
    <a href="#topo" class="shrink-0">
      <img src="img/logo-cream.png?v=1" alt="Andy Beauty Lounge" class="h-[26px] md:h-[30px] w-auto" id="hdrlogo" />
    </a>
    <nav class="hidden lg:flex items-center gap-10 text-[12px] eyebrow text-cream/75">
      <a href="#experiencia" class="hover:text-cream transition">Experiência</a>
      <a href="#especialidades" class="hover:text-cream transition">Especialidades</a>
      <a href="#processo" class="hover:text-cream transition">Processo</a>
      <a href="#andy" class="hover:text-cream transition">O profissional</a>
      <a href="#localizacao" class="hover:text-cream transition">Onde estamos</a>
    </nav>
    <div class="flex items-center gap-3">
      <a href="https://wa.me/5571992966111" target="_blank" rel="noopener"
         class="hidden sm:inline-flex items-center h-10 px-5 rounded-full border border-cream/30 text-[11px] eyebrow text-cream/85 hover:bg-cream hover:text-ink transition">WhatsApp</a>
      <a href="https://www.avec.app/andy-carneiro-beauty-lounge/" target="_blank" rel="noopener"
         class="inline-flex items-center h-10 px-5 rounded-full bg-cream text-ink text-[11px] eyebrow hover:bg-white transition">Agendar</a>
      <button id="mbtn" class="lg:hidden ml-1 w-10 h-10 grid place-items-center text-cream" aria-label="Menu">
        <span class="block w-6 h-px bg-cream relative before:content-[''] before:absolute before:-top-2 before:left-0 before:w-6 before:h-px before:bg-cream after:content-[''] after:absolute after:top-2 after:left-0 after:w-6 after:h-px after:bg-cream"></span>
      </button>
    </div>
  </div>
</header>

<!-- mobile menu -->
<div id="mnav" class="fixed inset-0 z-[60] bg-ink2/98 backdrop-blur invisible opacity-0 flex flex-col items-center justify-center gap-8">
  <button id="mclose" class="absolute top-6 right-7 text-cream text-3xl serif">&times;</button>
  <a href="#experiencia" class="mlink text-2xl serif text-cream">Experiência</a>
  <a href="#especialidades" class="mlink text-2xl serif text-cream">Especialidades</a>
  <a href="#processo" class="mlink text-2xl serif text-cream">Processo</a>
  <a href="#andy" class="mlink text-2xl serif text-cream">O profissional</a>
  <a href="#localizacao" class="mlink text-2xl serif text-cream">Onde estamos</a>
  <div class="hairline w-40 my-2"></div>
  <a href="https://www.avec.app/andy-carneiro-beauty-lounge/" target="_blank" rel="noopener" class="inline-flex items-center h-12 px-8 rounded-full bg-cream text-ink text-[12px] eyebrow">Agendar meu horário</a>
</div>

<!-- ============ 1 · HERO ============ -->
<section id="topo" class="relative min-h-[100svh] flex items-center overflow-hidden">
  <img src="img/hero.webp" alt="Espaço Andy Beauty Lounge" class="absolute inset-0 w-full h-full object-cover kenburns" />
  <div class="absolute inset-0" style="background:linear-gradient(90deg,rgba(27,34,42,.94) 0%,rgba(27,34,42,.86) 34%,rgba(27,34,42,.5) 68%,rgba(27,34,42,.25) 100%)"></div>
  <div class="absolute inset-0" style="background:linear-gradient(0deg,rgba(27,34,42,.85) 0%,transparent 40%)"></div>

  <div class="relative z-10 mx-auto max-w-[1500px] w-full px-6 md:px-12 pt-24">
    <div class="max-w-[760px]">
      <h1 class="serif text-[13vw] leading-[.94] sm:text-[64px] md:text-[80px] lg:text-[92px] font-500 rv in">
        <span class="block">Você não precisa</span>
        <span class="block italic font-500">mudar de rosto.</span>
        <span class="block">Só voltar a se reconhecer.</span>
      </h1>
      <p class="serif italic text-cream/80 text-xl md:text-2xl mt-7 rv rv-d1 in">Sua beleza começa pelo cuidado. Sua identidade, pelo respeito.<br class="hidden sm:block" />Cabelos saudáveis. Beleza que permanece.</p>
      <p class="text-cream/70 text-[15px] md:text-base leading-relaxed mt-6 max-w-[540px] rv rv-d2 in">
        Coloração, mechas, morena iluminada e terapia capilar com a técnica de quem dedicou a vida a fazer beleza sem abrir mão da saúde dos fios.
      </p>
      <div class="flex flex-col sm:flex-row gap-3 mt-9 rv rv-d3 in">
        <a href="https://www.avec.app/andy-carneiro-beauty-lounge/" target="_blank" rel="noopener"
           class="inline-flex items-center justify-center h-[54px] px-9 rounded-full bg-cream text-ink text-[12px] eyebrow hover:bg-white transition shine">Agendar meu horário</a>
        <a href="https://wa.me/5571992966111" target="_blank" rel="noopener"
           class="inline-flex items-center justify-center h-[54px] px-9 rounded-full border border-cream/35 text-cream text-[12px] eyebrow hover:bg-cream hover:text-ink transition">Falar no WhatsApp</a>
      </div>
    </div>
  </div>
  <a href="#numeros" aria-label="Descer" class="absolute bottom-7 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
    <span class="w-px h-10 bg-cream/25"></span>
  </a>
</section>

<!-- ============ 2 · NÚMEROS ============ -->
<section id="numeros" class="bg-ink2 border-y border-cream/10">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-10 md:py-12 grid grid-cols-2 lg:grid-cols-4 gap-y-8 gap-x-6">
    <div class="text-center"><p class="serif count text-4xl md:text-5xl text-cream" data-to="26">0</p><p class="eyebrow text-[10px] text-taupe mt-2">anos de experiência</p></div>
    <div class="text-center"><p class="serif count text-4xl md:text-5xl text-cream" data-to="9000" data-prefix="+" data-sep="1">0</p><p class="eyebrow text-[10px] text-taupe mt-2">belezas transformadas</p></div>
    <div class="text-center"><p class="serif count text-4xl md:text-5xl text-cream" data-to="5" data-dec="1">0</p><p class="eyebrow text-[10px] text-taupe mt-2">avaliação no Google</p></div>
    <div class="text-center"><p class="serif count text-4xl md:text-5xl text-cream" data-to="10" data-suffix=" / 10">0</p><p class="eyebrow text-[10px] text-taupe mt-2">NPS de satisfação</p></div>
  </div>
</section>

<!-- ============ 3 · A EXPERIÊNCIA (o que você recebe) ============ -->
<section id="experiencia" class="relative bg-ink overflow-hidden">
  <img loading="lazy" decoding="async" src="img/feather-cream.png" class="wm right-[-60px] top-10 w-[420px] opacity-[.04] rotate-12" alt="" />
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32 grid lg:grid-cols-2 gap-14 lg:gap-20 items-center">
    <!-- two verticals -->
    <div class="flex gap-4 md:gap-5 justify-center lg:justify-start order-2 lg:order-1">
      <div class="imgz rounded-[14px] w-1/2 max-w-[290px] h-[360px] md:h-[460px] mt-10 rv"><img loading="lazy" decoding="async" src="img/recebe1.webp" alt="Ambiente reservado do lounge" class="w-full h-full object-cover" /></div>
      <div class="imgz rounded-[14px] w-1/2 max-w-[290px] h-[360px] md:h-[460px] rv rv-d1"><img loading="lazy" decoding="async" src="img/recebe2.webp" alt="Sala privativa" class="w-full h-full object-cover" /></div>
    </div>
    <div class="order-1 lg:order-2 rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.02] mt-5 text-cream">Muito além de um horário no salão.</h2>
      <p class="text-cream/70 leading-relaxed mt-6 max-w-[480px]">Aqui, cuidar da beleza também é cuidar de você. Um espaço onde o tempo desacelera, o cuidado ganha significado e cada detalhe transforma o seu momento em uma experiência.</p>
      <ul class="mt-9 space-y-0">
        <li class="flex items-start gap-4 py-4 border-t border-cream/12"><span class="text-taupe mt-1">✓</span><span class="text-cream/85">Atendimento individual, do acolhimento à orientação técnica</span></li>
        <li class="flex items-start gap-4 py-4 border-t border-cream/12"><span class="text-taupe mt-1">✓</span><span class="text-cream/85">Ambiente climatizado e reservado, só para você</span></li>
        <li class="flex items-start gap-4 py-4 border-t border-cream/12"><span class="text-taupe mt-1">✓</span><span class="text-cream/85">Lavatórios com massagem e apoio para os pés</span></li>
        <li class="flex items-start gap-4 py-4 border-t border-cream/12"><span class="text-taupe mt-1">✓</span><span class="text-cream/85">Café espresso e cappuccino com receita da casa</span></li>
        <li class="flex items-start gap-4 py-4 border-t border-b border-cream/12"><span class="text-taupe mt-1">✓</span><span class="text-cream/85">Sequilhos autorais, assinados pela marca</span></li>
      </ul>
    </div>
  </div>
</section>

<!-- ============ 4 · FILOSOFIA (prova/argumento) ============ -->
<section class="bg-sand text-ink">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32 grid lg:grid-cols-2 gap-14 lg:gap-20 items-center">
    <div class="rv">
      <h2 class="serif text-4xl md:text-[56px] leading-[1.04] mt-5">A beleza não está em seguir padrões. Está em respeitar <span class="italic">individualidades</span>.</h2>
      <p class="text-ink/70 leading-relaxed mt-7 max-w-[520px]">Aqui, não existem fórmulas prontas. Cada escolha (da cor ao corte, das mechas ao tratamento) parte de um olhar atento para você, para a saúde dos seus cabelos e para <span class="font-500 text-ink underline decoration-taupe2/50 underline-offset-4">aquilo que faz sentido para a sua identidade</span>.</p>
      <p class="serif italic text-2xl md:text-3xl mt-9 text-slate">"Porque beleza, para nós, não é sobre transformar quem você é. É sobre cuidar, valorizar e revelar o que já existe de único em você."</p>
    </div>
    <div class="relative rv rv-d1 w-full max-w-[440px] mx-auto lg:mx-0 lg:ml-auto">
      <div class="imgz rounded-[16px] w-full aspect-[9/16] shadow-xl"><img loading="lazy" decoding="async" src="img/prova.webp" alt="Andy com cliente no lounge" class="w-full h-full object-cover" /></div>
      <div class="imgz rounded-[14px] absolute -bottom-8 -left-4 md:-left-10 w-[42%] aspect-[3/4] border-[6px] border-sand shadow-xl hidden sm:block"><img loading="lazy" decoding="async" src="img/prova2.webp" alt="Detalhe do atendimento" class="w-full h-full object-cover" /></div>
    </div>
  </div>
</section>

<!-- ============ 5 · DIAGNÓSTICO (sintomas) ============ -->
<section class="relative bg-ink2 overflow-hidden">
  <div class="mx-auto max-w-[1300px] px-6 md:px-12 py-24 md:py-32">
    <div class="text-center max-w-[720px] mx-auto rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.04] mt-5 text-cream">Quando beleza e cuidado precisam caminhar juntos.</h2>
      <p class="text-cream/70 leading-relaxed mt-6">Você valoriza um cabelo bonito, mas não abre mão da saúde dos fios.</p>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-px mt-16 bg-cream/10 rounded-[14px] overflow-hidden">
      <div class="bg-ink2 p-8 md:p-10 rv"><span class="text-taupe text-lg">✓</span><p class="text-cream/80 mt-4 leading-relaxed">Busca uma cor que combine com você, com seu estilo e com a sua individualidade.</p></div>
      <div class="bg-ink2 p-8 md:p-10 rv rv-d1"><span class="text-taupe text-lg">✓</span><p class="text-cream/80 mt-4 leading-relaxed">Quer iluminar, renovar ou transformar com técnica, segurança e propósito.</p></div>
      <div class="bg-ink2 p-8 md:p-10 rv rv-d2"><span class="text-taupe text-lg">✓</span><p class="text-cream/80 mt-4 leading-relaxed">Acredita que um bom resultado começa antes da execução: começa na escuta, na análise e na escolha do que realmente faz sentido para você.</p></div>
      <div class="bg-ink2 p-8 md:p-10 rv"><span class="text-taupe text-lg">✓</span><p class="text-cream/80 mt-4 leading-relaxed">Prefere um atendimento atento, sem pressa e sem soluções padronizadas.</p></div>
      <div class="bg-ink2 p-8 md:p-10 rv rv-d1 sm:col-span-2 lg:col-span-1"><span class="text-taupe text-lg">✓</span><p class="text-cream/80 mt-4 leading-relaxed">Procura um espaço onde cada detalhe faça você se sentir acolhida, respeitada e bem cuidada.</p></div>
      <div class="hidden lg:block bg-ink2" aria-hidden="true"></div>
    </div>
    <p class="text-center serif italic text-2xl md:text-3xl text-cream/85 mt-16 max-w-[680px] mx-auto rv">Se você se identifica com essa forma de viver a beleza, o Andy Beauty Lounge foi pensado para você.</p>
  </div>
</section>

<!-- ============ 6 · ESPECIALIDADES ============ -->
<section id="especialidades" class="bg-sand text-ink">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32">
    <div class="text-center max-w-[680px] mx-auto rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.04] mt-5">Cuidado personalizado, técnica em cada escolha.</h2>
      <p class="text-ink/65 mt-6 leading-relaxed">Antes de qualquer serviço, buscamos compreender você, seus cabelos e suas expectativas. É a partir desse olhar que construímos um atendimento personalizado, respeitando a saúde dos fios, sua identidade e o resultado que deseja.</p>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 mt-16">
      <article class="lift rv"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="3400"><img loading="lazy" decoding="async" src="img/t1.webp" class="on" alt="Terapia capilar" /><img loading="lazy" decoding="async" src="img/t2.webp" alt="" /><img loading="lazy" decoding="async" src="img/t3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Saúde do fio</p><h3 class="serif text-3xl mt-1">Terapia Capilar</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Cuidado especializado do couro cabeludo e dos fios, com protocolos personalizados para promover equilíbrio, saúde e bem-estar capilar.</p></article>
      <article class="lift rv rv-d1"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="3800"><img loading="lazy" decoding="async" src="img/mo1.webp" class="on" alt="Morena iluminada" /><img loading="lazy" decoding="async" src="img/mo2.webp" alt="" /><img loading="lazy" decoding="async" src="img/mo3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Assinatura</p><h3 class="serif text-3xl mt-1">Morena Iluminada</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Uma das especialidades de Andy: iluminação personalizada, criada para valorizar seu tom de pele, sua base natural e sua identidade.</p></article>
      <article class="lift rv rv-d2"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="4200"><img loading="lazy" decoding="async" src="img/me1.webp" class="on" alt="Mechas" /><img loading="lazy" decoding="async" src="img/me2.webp" alt="" /><img loading="lazy" decoding="async" src="img/me3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Iluminação</p><h3 class="serif text-3xl mt-1">Mechas</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Luzes, nuances e contrastes construídos de forma personalizada, unindo técnica, naturalidade e cuidado com a saúde dos fios.</p></article>
      <article class="lift rv"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="3600"><img loading="lazy" decoding="async" src="img/co1.webp" class="on" alt="Coloração e retoque de raiz" /><img loading="lazy" decoding="async" src="img/co2.webp" alt="" /><img loading="lazy" decoding="async" src="img/co3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Cor</p><h3 class="serif text-3xl mt-1">Coloração e Retoque</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Cor pensada para você. Técnica e conhecimento em design de cor para criar ou renovar tonalidades em harmonia com sua identidade e seus cabelos.</p></article>
      <article class="lift rv rv-d1"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="4000"><img loading="lazy" decoding="async" src="img/cr1.webp" class="on" alt="Corte" /><img loading="lazy" decoding="async" src="img/cr2.webp" alt="" /><img loading="lazy" decoding="async" src="img/cr3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Forma</p><h3 class="serif text-3xl mt-1">Corte</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Cortes personalizados que consideram seus traços, estilo, rotina e o movimento dos cabelos para um resultado bonito também no dia a dia.</p></article>
      <article class="lift rv rv-d2"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="4400"><img loading="lazy" decoding="async" src="img/tr1.webp" class="on" alt="Tratamentos capilares" /><img loading="lazy" decoding="async" src="img/tr2.webp" alt="" /><img loading="lazy" decoding="async" src="img/tr3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Cuidado contínuo</p><h3 class="serif text-3xl mt-1">Tratamentos Capilares</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Protocolos de reconstrução e nutrição para manter o resultado bonito por muito mais tempo.</p></article>
      <article class="lift rv"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="3500"><img loading="lazy" decoding="async" src="img/pm1.webp" class="on" alt="Penteado e maquiagem" /><img loading="lazy" decoding="async" src="img/pm2.webp" alt="" /><img loading="lazy" decoding="async" src="img/pm3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Beleza completa</p><h3 class="serif text-3xl mt-1">Penteado e Maquiagem</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Penteados e make para noivas, madrinhas e para o dia que pede um cuidado a mais.</p></article>
      <article class="lift rv rv-d1"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="3900"><img loading="lazy" decoding="async" src="img/sp1.webp" class="on" alt="Spa dos pés" /><img loading="lazy" decoding="async" src="img/sp2.webp" alt="" /><img loading="lazy" decoding="async" src="img/sp3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Relaxamento</p><h3 class="serif text-3xl mt-1">Spa dos Pés</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Um ritual de hidromassagem e luz, para os pés descansarem de verdade enquanto você relaxa.</p></article>
      <article class="lift rv rv-d2"><div class="slideshow rounded-[14px] aspect-[4/5]" data-int="4300"><img loading="lazy" decoding="async" src="img/mp1.webp" class="on" alt="Manicure e pedicure" /><img loading="lazy" decoding="async" src="img/mp2.webp" alt="" /><img loading="lazy" decoding="async" src="img/mp3.webp" alt="" /><span class="dots"><i class="on"></i><i></i><i></i></span></div><p class="eyebrow text-[10px] text-taupe2 mt-5">Mãos e pés</p><h3 class="serif text-3xl mt-1">Manicure e Pedicure</h3><p class="text-ink/60 text-sm leading-relaxed mt-2">Mãos e pés bem cuidados, com o mesmo capricho e higiene de todo o lounge.</p></article>
    </div>
  </div>
</section>

<!-- ============ ESTEIRA DE FOTOS ============ -->
<section class="bg-ink2 py-10 md:py-14 overflow-hidden">
  <div class="text-center mb-8 rv"></div>
  <div class="relative">
    <div class="marquee-track gap-4 md:gap-5">
      <img decoding="async" src="img/mk1.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk2.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk3.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk4.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk5.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk6.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk7.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk8.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk9.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk10.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <!-- duplicado para loop contínuo -->
      <img decoding="async" src="img/mk1.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk2.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk3.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk4.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk5.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk6.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk7.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk8.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk9.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
      <img decoding="async" src="img/mk10.webp" class="h-[190px] md:h-[240px] w-auto rounded-[12px] object-cover" alt="" />
    </div>
    <div class="pointer-events-none absolute inset-y-0 left-0 w-16 md:w-28" style="background:linear-gradient(90deg,#1B222A,transparent)"></div>
    <div class="pointer-events-none absolute inset-y-0 right-0 w-16 md:w-28" style="background:linear-gradient(270deg,#1B222A,transparent)"></div>
  </div>
</section>

<!-- ============ 7 · PROCESSO ============ -->
<section id="processo" class="relative bg-ink overflow-hidden">
  <img loading="lazy" decoding="async" src="img/feather-cream.png" class="wm left-[-70px] bottom-6 w-[380px] opacity-[.04] -rotate-12 -scale-x-100" alt="" />
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32">
    <div class="text-center max-w-[680px] mx-auto rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.04] mt-5 text-cream">Do agendamento ao resultado, cuidado em cada etapa.</h2>
    </div>
    <div class="grid md:grid-cols-4 gap-10 md:gap-0 mt-16">
      <div class="md:px-8 md:border-r border-cream/12 rv"><p class="serif text-6xl text-cream/25 font-400">01</p><p class="eyebrow text-[10px] text-taupe mt-3">Etapa</p><h3 class="serif text-2xl text-cream mt-1">Agendamento</h3><p class="text-cream/60 text-sm leading-relaxed mt-3">Seu momento começa aqui. Escolha o melhor dia e horário de forma simples e prática pelo nosso sistema de agendamento.</p></div>
      <div class="md:px-8 md:border-r border-cream/12 rv rv-d1"><p class="serif text-6xl text-cream/25 font-400">02</p><p class="eyebrow text-[10px] text-taupe mt-3">Etapa</p><h3 class="serif text-2xl text-cream mt-1">Avaliação personalizada</h3><p class="text-cream/60 text-sm leading-relaxed mt-3">Antes de fazer, é preciso compreender. Conversamos sobre suas expectativas e avaliamos as características e necessidades dos seus cabelos para definir o cuidado mais adequado.</p></div>
      <div class="md:px-8 md:border-r border-cream/12 rv rv-d2"><p class="serif text-6xl text-cream/25 font-400">03</p><p class="eyebrow text-[10px] text-taupe mt-3">Etapa</p><h3 class="serif text-2xl text-cream mt-1">Recomendação personalizada</h3><p class="text-cream/60 text-sm leading-relaxed mt-3">Cada escolha tem um porquê. A partir da avaliação, definimos a abordagem mais adequada para seus cabelos, alinhando técnica, saúde dos fios e o resultado que você deseja.</p></div>
      <div class="md:px-8 rv rv-d3"><p class="serif text-6xl text-cream/25 font-400">04</p><p class="eyebrow text-[10px] text-taupe mt-3">Etapa</p><h3 class="serif text-2xl text-cream mt-1">Experiência</h3><p class="text-cream/60 text-sm leading-relaxed mt-3">Técnica, cuidado e atenção aos detalhes. O serviço é realizado de forma personalizada, respeitando seus cabelos, sua identidade e o resultado que construímos juntos.</p></div>
    </div>
  </div>
</section>

<!-- ============ 8 · SOBRE O ANDY ============ -->
<section id="andy" class="bg-sand2 text-ink">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32 grid lg:grid-cols-[1fr_0.9fr] gap-14 lg:gap-20 items-center">
    <div class="rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.02] mt-5">Prazer, sou o Andy Carneiro.</h2>
      <p class="serif italic text-2xl md:text-3xl text-slate mt-6">"Alguns sonhos nascem de um momento. Outros acompanham uma vida inteira."</p>
      <div class="text-ink/70 leading-relaxed mt-6 space-y-4 max-w-[560px]">
        <p>Descobri cedo que a beleza transforma muito mais do que a aparência. Cresci vendo minha mãe fazer unhas e meus tios cuidarem da autoestima das pessoas. Aos 11 anos, eu já fazia penteados nas primas e nas filhas dos vizinhos, sem imaginar que aquilo seria o começo da minha história.</p>
        <p>São 26 anos dedicados a cada fio e a cada sorriso. Sou cabeleireiro com formação em Terapia Capilar pela Academia Brasileira de Tricologia e em Design de Cor pela Pivot Point International, especialista em saúde capilar e na técnica de morena iluminada.</p>
        <p>Meu compromisso é simples: embelezar com responsabilidade, conhecimento e respeito à individualidade de cada mulher que senta na minha cadeira.</p>
      </div>
      <div class="flex flex-wrap gap-x-8 gap-y-3 mt-9">
        <div class="border-t border-taupe2/30 pt-3"><p class="eyebrow text-[10px] text-taupe2">Formação</p><p class="text-sm mt-1">Terapia Capilar · ABT</p></div>
        <div class="border-t border-taupe2/30 pt-3"><p class="eyebrow text-[10px] text-taupe2">Formação</p><p class="text-sm mt-1">Design de Cor · Pivot Point</p></div>
        <div class="border-t border-taupe2/30 pt-3"><p class="eyebrow text-[10px] text-taupe2">Graduação</p><p class="text-sm mt-1">Estética e Cosmética</p></div>
      </div>
    </div>
    <div class="relative rv rv-d1">
      <div class="imgz rounded-[16px] w-full h-[480px] md:h-[620px] shadow-xl"><img loading="lazy" decoding="async" src="img/sobre.webp" alt="Andy Carneiro" class="w-full h-full object-cover" /></div>
      <div class="imgz rounded-[14px] absolute -bottom-8 -right-4 md:-right-10 w-[42%] aspect-[4/5] border-[6px] border-sand2 shadow-xl hidden sm:block"><img loading="lazy" decoding="async" src="img/sobre2.webp" alt="Andy no lounge" class="w-full h-full object-cover" style="object-position:50% 8%" /></div>
    </div>
  </div>
</section>

<!-- ============ 9 · FAQ ============ -->
<section class="bg-ink">
  <div class="mx-auto max-w-[1040px] px-6 md:px-12 py-24 md:py-32">
    <div class="text-center rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.04] mt-5 text-cream">Antes de agendar, talvez você queira saber.</h2>
    </div>
    <div class="mt-14 divide-y divide-cream/12 border-y border-cream/12">
      <div class="py-7 rv"><div class="flex items-start justify-between gap-6"><h3 class="serif text-2xl text-cream">Como faço para agendar?</h3><span class="text-taupe mt-1">→</span></div><p class="text-cream/65 leading-relaxed mt-3 max-w-[780px]">Você pode agendar pelo nosso sistema online, de forma simples e prática, ou falar diretamente com a nossa equipe pelo WhatsApp. Escolha o serviço, consulte os horários disponíveis e encontre o melhor momento para você.</p></div>
      <div class="py-7 rv"><div class="flex items-start justify-between gap-6"><h3 class="serif text-2xl text-cream">Preciso passar por uma avaliação antes do serviço?</h3><span class="text-taupe mt-1">→</span></div><p class="text-cream/65 leading-relaxed mt-3 max-w-[780px]">Para os serviços que exigem uma análise prévia, sim. A avaliação nos permite conhecer seus cabelos, compreender suas expectativas e definir a abordagem mais adequada, sempre considerando a saúde dos fios e o resultado desejado.</p></div>
      <div class="py-7 rv"><div class="flex items-start justify-between gap-6"><h3 class="serif text-2xl text-cream">E se o meu cabelo não estiver preparado para as mechas?</h3><span class="text-taupe mt-1">→</span></div><p class="text-cream/65 leading-relaxed mt-3 max-w-[780px]">A saúde dos fios vem sempre em primeiro lugar. Quando identificamos que o cabelo ainda não apresenta as condições adequadas para o procedimento, orientamos os cuidados e tratamentos necessários antes de realizar as mechas. Respeitar o tempo do cabelo também faz parte de um bom resultado.</p></div>
      <div class="py-7 rv"><div class="flex items-start justify-between gap-6"><h3 class="serif text-2xl text-cream">Onde fica o Andy Beauty Lounge?</h3><span class="text-taupe mt-1">→</span></div><p class="text-cream/65 leading-relaxed mt-3 max-w-[780px]">Estamos em Salvador, Bahia, em um espaço reservado, climatizado e pensado para proporcionar conforto e acolhimento durante toda a sua experiência. As informações de localização são compartilhadas na confirmação do agendamento.</p></div>
      <div class="py-7 rv"><div class="flex items-start justify-between gap-6"><h3 class="serif text-2xl text-cream">Como funciona o atendimento pelo WhatsApp?</h3><span class="text-taupe mt-1">→</span></div><p class="text-cream/65 leading-relaxed mt-3 max-w-[780px]">A Bia, nossa assistente, está à disposição pelo WhatsApp, de segunda a sábado, em horário comercial, para auxiliar com agendamentos, orientações e tudo o que você precisar antes e depois da sua experiência conosco.</p></div>
    </div>
  </div>
</section>

<!-- ============ 10 · EXPERIÊNCIAS ASSINATURA (B&W) ============ -->
<section class="bg-ink2">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32">
    <div class="text-center max-w-[640px] mx-auto rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.04] mt-5 text-cream">Três experiências que definem o nosso beauty lounge.</h2>
      <p class="text-cream/65 leading-relaxed mt-6">Coloração, Mechas e Terapia Capilar. A arte de realçar a sua beleza com a técnica impecável de quem dedica a vida a cuidar da saúde dos seus fios.</p>
    </div>
    <div class="grid md:grid-cols-3 gap-6 md:gap-7 mt-16">
      <div class="rv">
        <div class="imgz relative rounded-[16px] h-[420px] grid place-items-center">
          <img loading="lazy" decoding="async" src="img/sig1.webp" alt="Terapia capilar" class="absolute inset-0 w-full h-full object-cover" />
          <div class="absolute inset-0 bg-ink2/45"></div>
          <span class="relative z-10 inline-flex items-center h-11 px-7 rounded-full bg-cream/95 text-ink text-[11px] eyebrow">Terapia Capilar</span>
        </div>
        <h3 class="serif text-2xl text-cream mt-5 text-center">O tratamento que prepara o fio para tudo.</h3>
        <p class="text-cream/55 text-sm mt-2 text-center max-w-[300px] mx-auto leading-relaxed">Cuidado especializado do couro cabeludo e dos fios.</p>
      </div>
      <div class="rv rv-d1">
        <div class="imgz relative rounded-[16px] h-[420px] grid place-items-center">
          <img loading="lazy" decoding="async" src="img/sig3.webp" alt="Morena iluminada" class="absolute inset-0 w-full h-full object-cover" />
          <div class="absolute inset-0 bg-ink2/45"></div>
          <span class="relative z-10 inline-flex items-center h-11 px-7 rounded-full bg-cream/95 text-ink text-[11px] eyebrow">Morena Iluminada</span>
        </div>
        <h3 class="serif text-2xl text-cream mt-5 text-center">A luz certa, sem perder a sua essência.</h3>
        <p class="text-cream/55 text-sm mt-2 text-center max-w-[300px] mx-auto leading-relaxed">Uma das especialidades de Andy: iluminação personalizada, criada para valorizar sua identidade.</p>
      </div>
      <div class="rv rv-d2">
        <div class="imgz relative rounded-[16px] h-[420px] grid place-items-center">
          <img loading="lazy" decoding="async" src="img/sig2.webp" alt="Coloração e corte" class="absolute inset-0 w-full h-full object-cover" />
          <div class="absolute inset-0 bg-ink2/45"></div>
          <span class="relative z-10 inline-flex items-center h-11 px-7 rounded-full bg-cream/95 text-ink text-[11px] eyebrow">Coloração & Corte</span>
        </div>
        <h3 class="serif text-2xl text-cream mt-5 text-center">Cor e forma desenhadas para você.</h3>
        <p class="text-cream/55 text-sm mt-2 text-center max-w-[300px] mx-auto leading-relaxed">Cor pensada para você e cortes personalizados que consideram seus traços, estilo e rotina.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ 11 · LOCALIZAÇÃO ============ -->
<section id="localizacao" class="relative overflow-hidden">
  <img loading="lazy" decoding="async" src="img/locbg.webp" alt="Andy Beauty Lounge" class="absolute inset-0 w-full h-full object-cover" />
  <div class="absolute inset-0 bg-ink2/85"></div>
  <div class="relative z-10 mx-auto max-w-[1500px] px-6 md:px-12 py-24 md:py-32 grid lg:grid-cols-2 gap-12 items-center">
    <div class="rv">
      <h2 class="serif text-4xl md:text-6xl leading-[1.04] mt-5 text-cream">Um endereço feito para desacelerar.</h2>
      <p class="text-cream/70 leading-relaxed mt-6 max-w-[460px]">O Andy Beauty Lounge fica em Salvador, na Bahia. Um espaço acolhedor e reservado, onde técnica, cuidado e sofisticação caminham juntos.</p>
      <div class="flex flex-wrap gap-x-10 gap-y-5 mt-9">
        <div><p class="eyebrow text-[10px] text-taupe">Cidade</p><p class="text-cream mt-1">Salvador · Bahia</p></div>
        <div><p class="eyebrow text-[10px] text-taupe">Atendimento</p><p class="text-cream mt-1">Terça a sábado<br/>9:30 às 19:00</p></div>
        <div><p class="eyebrow text-[10px] text-taupe">Suporte</p><p class="text-cream mt-1">WhatsApp da Bia</p></div>
      </div>
      <div class="flex flex-col sm:flex-row gap-3 mt-10">
        <a href="https://www.avec.app/andy-carneiro-beauty-lounge/" target="_blank" rel="noopener" class="inline-flex items-center justify-center h-[54px] px-9 rounded-full bg-cream text-ink text-[12px] eyebrow hover:bg-white transition shine">Agendar meu horário</a>
        <a href="https://www.google.com/maps/search/Andy+Beauty+Lounge+Salvador" target="_blank" rel="noopener" class="inline-flex items-center justify-center h-[54px] px-9 rounded-full border border-cream/35 text-cream text-[12px] eyebrow hover:bg-cream hover:text-ink transition">Ver no mapa</a>
      </div>
    </div>
    <div class="rv rv-d1 hidden lg:block">
      <div class="imgz rounded-[18px] h-[440px] border border-cream/15"><img loading="lazy" decoding="async" src="img/loc1.webp" alt="Estações com espelhos iluminados" class="w-full h-full object-cover" /></div>
    </div>
  </div>
</section>

<!-- ============ 12 · CTA FINAL ============ -->
<section class="relative bg-ink overflow-hidden">
  <img loading="lazy" decoding="async" src="img/feather-cream.png" class="wm left-1/2 -translate-x-1/2 top-8 w-[520px] opacity-[.035]" alt="" />
  <div class="relative z-10 mx-auto max-w-[900px] px-6 text-center py-28 md:py-36">
    <h2 class="serif text-5xl md:text-7xl leading-[1.02] mt-6 text-cream rv rv-d1">Beleza que respeita quem você é.</h2>
    <p class="text-cream/70 leading-relaxed mt-7 max-w-[520px] mx-auto rv rv-d2">Seu momento de cuidado começa aqui. Descubra uma experiência onde cada escolha é feita pensando em você e na saúde dos seus cabelos.</p>
    <div class="flex flex-col sm:flex-row gap-3 justify-center mt-10 rv rv-d3">
      <a href="https://www.avec.app/andy-carneiro-beauty-lounge/" target="_blank" rel="noopener" class="inline-flex items-center justify-center h-[56px] px-10 rounded-full bg-cream text-ink text-[12px] eyebrow hover:bg-white transition shine">Agendar meu horário</a>
      <a href="https://wa.me/5571992966111" target="_blank" rel="noopener" class="inline-flex items-center justify-center h-[56px] px-10 rounded-full border border-cream/35 text-cream text-[12px] eyebrow hover:bg-cream hover:text-ink transition">Falar no WhatsApp</a>
    </div>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer class="bg-ink2 border-t border-cream/10">
  <div class="mx-auto max-w-[1500px] px-6 md:px-12 py-16">
    <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-10">
      <div>
        <img src="img/logo-cream.png?v=1" alt="Andy Beauty Lounge" class="h-8 w-auto" />
        <p class="text-cream/55 text-sm mt-5 max-w-[320px] leading-relaxed">Beleza com saúde capilar, técnica e acolhimento. Salvador, Bahia.</p>
      </div>
      <div class="flex flex-wrap gap-x-12 gap-y-6">
        <div>
          <p class="eyebrow text-[10px] text-taupe">Agendamento</p>
          <a href="https://www.avec.app/andy-carneiro-beauty-lounge/" target="_blank" rel="noopener" class="block text-cream/85 hover:text-cream text-sm mt-2 transition">Sistema online</a>
          <a href="https://wa.me/5571992966111" target="_blank" rel="noopener" class="block text-cream/85 hover:text-cream text-sm mt-1 transition">+55 71 99296-6111</a>
        </div>
        <div>
          <p class="eyebrow text-[10px] text-taupe">Redes</p>
          <a href="https://www.instagram.com/andy_beautylounge/" target="_blank" rel="noopener" class="block text-cream/85 hover:text-cream text-sm mt-2 transition">@andy_beautylounge</a>
          <a href="https://www.instagram.com/andy.beautylounge/" target="_blank" rel="noopener" class="block text-cream/85 hover:text-cream text-sm mt-1 transition">@andy.beautylounge</a>
        </div>
        <div>
          <p class="eyebrow text-[10px] text-taupe">Atendimento</p>
          <p class="text-cream/85 text-sm mt-2">Terça a sábado</p>
          <p class="text-cream/85 text-sm mt-1">9:30 às 19:00</p>
        </div>
      </div>
    </div>
    <div class="hairline w-full my-10"></div>
    <div class="flex flex-col md:flex-row justify-between gap-3 text-cream/45 text-xs">
      <p>© 2026 Andy Beauty Lounge. Todos os direitos reservados.</p>
      <p class="eyebrow text-[10px]">Landing page por Cacau Design</p>
    </div>
  </div>
</footer>

<a href="https://wa.me/5571992966111" target="_blank" rel="noopener" aria-label="WhatsApp"
   class="fixed bottom-5 right-5 z-50 w-14 h-14 rounded-full bg-[#25D366] grid place-items-center shadow-2xl hover:scale-105 transition">
  <svg viewBox="0 0 24 24" class="w-7 h-7 fill-white"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 018.413 3.488 11.824 11.824 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.51 5.26l-.999 3.648 3.978-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.767.967-.94 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
</a>

<script>
  // header shrink
  const hdr=document.getElementById('hdr');
  const onScroll=()=>{ if(window.scrollY>40){hdr.classList.add('bg-ink2/95','backdrop-blur','shadow-lg');hdr.querySelector('.h-\\[74px\\]')?.classList} else {hdr.classList.remove('bg-ink2/95','backdrop-blur','shadow-lg');} };
  window.addEventListener('scroll',onScroll); onScroll();
  // reveal
  document.documentElement.classList.add('js');
  const still=location.search.indexOf('still')>-1;
  const rvs=document.querySelectorAll('.rv');
  if(still || !('IntersectionObserver' in window)){ rvs.forEach(el=>el.classList.add('in')); if(still){var _h=document.getElementById('topo'); if(_h) _h.style.minHeight='680px';} }
  else {
    const io=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}})},{threshold:.12,rootMargin:'0px 0px -8% 0px'});
    rvs.forEach(el=>io.observe(el));
  }
  // mobile menu
  const mnav=document.getElementById('mnav');
  const open=()=>{mnav.classList.remove('invisible','opacity-0');document.body.style.overflow='hidden';};
  const close=()=>{mnav.classList.add('invisible','opacity-0');document.body.style.overflow='';};
  document.getElementById('mbtn').addEventListener('click',open);
  document.getElementById('mclose').addEventListener('click',close);
  document.querySelectorAll('.mlink,#mnav a[href^="#"],#mnav a[href^="https"]').forEach(a=>a.addEventListener('click',close));

  // ===== contadores crescendo =====
  function fmt(v, dec, sep){
    if(dec>0) return v.toFixed(dec).replace('.', ',');
    v = Math.round(v);
    if(sep) return v.toLocaleString('pt-BR');
    return String(v);
  }
  function runCount(el){
    const to=parseFloat(el.dataset.to), dec=parseInt(el.dataset.dec||'0'),
          sep=el.dataset.sep, pre=el.dataset.prefix||'', suf=el.dataset.suffix||'';
    const dur=1900; let t0=null;
    function step(ts){ if(!t0)t0=ts; let p=Math.min((ts-t0)/dur,1);
      const e=1-Math.pow(1-p,3); // easeOutCubic
      el.textContent = pre + fmt(to*e, dec, sep) + suf;
      if(p<1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
  const counters=document.querySelectorAll('.count');
  if(still || !('IntersectionObserver' in window)){ counters.forEach(runCount); }
  else {
    const cio=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){runCount(e.target);cio.unobserve(e.target);}})},{threshold:.35});
    counters.forEach(c=>cio.observe(c));
  }

  // ===== carrosséis dos cards (crossfade) =====
  document.querySelectorAll('.slideshow').forEach(ss=>{
    const imgs=[...ss.querySelectorAll('img')];
    const dots=[...ss.querySelectorAll('.dots i')];
    if(imgs.length<2) return;
    let i=0; const iv=parseInt(ss.dataset.int||'3800');
    setInterval(()=>{
      imgs[i].classList.remove('on'); dots[i]&&dots[i].classList.remove('on');
      i=(i+1)%imgs.length;
      imgs[i].classList.add('on'); dots[i]&&dots[i].classList.add('on');
    }, iv);
  });
</script>
</body>
</html>
