inkdigena-v2/src/routes/+page.svelte

<svelte:head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
  <title>Inkdigena Tattoo Art Gallery Shop — Donde el arte ancestral cobra vida en tu piel</title>
  <meta name="description" content="Estudio de tatuajes y galería de arte en Costa Rica. Tatuajes personalizados, body piercing y arte original con influencia cultural costarricense y precolombina.">
</svelte:head>

<script>
  import { onMount } from 'svelte';

  let scrollY = $state(0);
  let activeSection = $state(0);
  let galleryEl = $state(null);
  let lightboxOpen = $state(false);
  let lightboxImg = $state('');
  let mobileMenuOpen = $state(false);
  let heroLoaded = $state(false);

  const sections = ['inicio', 'filosofia', 'servicios', 'galeria', 'contacto'];

  const services = [
    {
      num: "01",
      name: "Tatuajes Personalizados",
      description: "Diseño y ejecución de tatuajes en una amplia variedad de estilos: realismo en blanco y negro, color vibrante, lettering cursivo, estilo indígena-tribal y piezas de gran formato con un nivel de detalle excepcional.",
      img: "/gallery/2.jpg",
      color: "#D64B8A"
    },
    {
      num: "02",
      name: "Body Piercing",
      description: "Servicio profesional de perforaciones corporales realizadas con técnicas seguras e higiénicas en un ambiente artístico.",
      img: "/gallery/6.jpg",
      color: "#2A8C7A"
    },
    {
      num: "03",
      name: "Galería de Arte Original",
      description: "Exhibición y venta de pinturas originales en lienzo con estilos abstractos, vibrantes y temáticas culturales costarricenses que incluyen colibríes, orquídeas, jaguares y motivos precolombinos.",
      img: "/gallery/10.jpg",
      color: "#D4A044"
    },
    {
      num: "04",
      name: "Murales y Arte a Gran Escala",
      description: "Creación de murales artísticos de gran formato con diseños detallados que combinan elementos de la naturaleza, cultura indígena y arte contemporáneo.",
      img: "/gallery/14.jpg",
      color: "#E87C4F"
    },
    {
      num: "05",
      name: "Eventos de Arte",
      description: "Presencia activa en festivales y eventos artísticos como el Art Fest Costa Rica, donde se exhiben obras y se promueve el arte local.",
      img: "/gallery/13.jpg",
      color: "#9B7EC8"
    }
  ];

  const galleryImages = [
    { src: "/gallery/2.jpg", caption: "Águila y jaguar — estilo indígena" },
    { src: "/gallery/6.jpg", caption: "Búho floral — blanco y negro" },
    { src: "/gallery/10.jpg", caption: "Colibrí — pintura original" },
    { src: "/gallery/3.jpg", caption: "Orquídea a color" },
    { src: "/gallery/15.jpg", caption: "Orquídea precolombina" },
    { src: "/gallery/4.jpg", caption: "Libélula y flores abstractas" },
    { src: "/gallery/11.jpg", caption: "Perezoso tribal — pintura" },
    { src: "/gallery/5.jpg", caption: "Pulpo detallado" },
    { src: "/gallery/14.jpg", caption: "Mural artístico monumental" },
    { src: "/gallery/1.jpg", caption: "Lettering cursivo" },
    { src: "/gallery/13.jpg", caption: "Mujer mariposa — pintura" },
    { src: "/gallery/7.jpg", caption: "Arte geométrico abstracto" },
    { src: "/gallery/8.jpg", caption: "Diseño personalizado" },
    { src: "/gallery/9.jpg", caption: "Arte en tinta" },
    { src: "/gallery/12.jpg", caption: "Composición abstracta" },
  ];

  function openLightbox(src) {
    lightboxImg = src;
    lightboxOpen = true;
  }
  function closeLightbox() {
    lightboxOpen = false;
    lightboxImg = '';
  }

  function scrollGallery(dir) {
    if (!galleryEl) return;
    const card = galleryEl.querySelector('.filmstrip-card');
    if (!card) return;
    const w = card.offsetWidth + 16;
    galleryEl.scrollBy({ left: dir * w * 2, behavior: 'smooth' });
  }

  onMount(() => {
    heroLoaded = true;

    const handleScroll = () => { scrollY = window.scrollY; };
    window.addEventListener('scroll', handleScroll, { passive: true });

    const sectionEls = sections.map(id => document.getElementById(id));
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const idx = sectionEls.indexOf(entry.target);
          if (idx !== -1) activeSection = idx;
        }
      });
    }, { threshold: 0.3 });
    sectionEls.forEach(el => { if (el) observer.observe(el); });

    const revealObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) entry.target.classList.add('in-view');
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });
    document.querySelectorAll('.fade-up, .fade-left, .fade-right, .scale-in').forEach(el => revealObserver.observe(el));

    setTimeout(() => {
      document.querySelectorAll('.fade-up, .fade-left, .fade-right, .scale-in').forEach(el => revealObserver.observe(el));
    }, 200);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      observer.disconnect();
      revealObserver.disconnect();
    };
  });
</script>

<!-- SIDE DOT NAVIGATION (desktop) -->
<nav class="side-nav" aria-label="Secciones">
  {#each sections as sec, i}
    <a
      href="#{sec}"
      class="side-dot {activeSection === i ? 'active' : ''}"
      aria-label={sec}
    >
      <span class="dot-label">{sec === 'inicio' ? 'Inicio' : sec === 'filosofia' ? 'Filosofía' : sec === 'servicios' ? 'Servicios' : sec === 'galeria' ? 'Galería' : 'Contacto'}</span>
    </a>
  {/each}
</nav>

<!-- TOP BAR — minimal, appears on scroll -->
<header class="top-bar {scrollY > 100 ? 'visible' : ''}">
  <a href="/" class="top-logo">
    <img src="/logo.png" alt="Inkdigena" class="h-8 sm:h-10 w-auto">
  </a>
  <div class="hidden md:flex items-center gap-8">
    <a href="#servicios" class="top-link">Servicios</a>
    <a href="#galeria" class="top-link">Galería</a>
    <a href="/about" class="top-link">Nosotros</a>
    <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="top-cta">Reservar</a>
  </div>
  <button class="md:hidden w-10 h-10 flex items-center justify-center" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="Menú">
    <div class="hamburger">
      <span class="hline {mobileMenuOpen ? 'open' : ''}" style="--i:0"></span>
      <span class="hline {mobileMenuOpen ? 'open' : ''}" style="--i:1"></span>
      <span class="hline {mobileMenuOpen ? 'open' : ''}" style="--i:2"></span>
    </div>
  </button>
</header>

{#if mobileMenuOpen}
  <div class="mobile-overlay" role="dialog">
    <button class="absolute inset-0 bg-black/80" onclick={() => mobileMenuOpen = false} aria-label="Cerrar"></button>
    <div class="mobile-drawer">
      <a href="#inicio" class="drawer-link" onclick={() => mobileMenuOpen = false}>Inicio</a>
      <a href="#servicios" class="drawer-link" onclick={() => mobileMenuOpen = false}>Servicios</a>
      <a href="#galeria" class="drawer-link" onclick={() => mobileMenuOpen = false}>Galería</a>
      <a href="#contacto" class="drawer-link" onclick={() => mobileMenuOpen = false}>Contacto</a>
      <a href="/about" class="drawer-link" onclick={() => mobileMenuOpen = false}>Nosotros</a>
      <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="drawer-cta" onclick={() => mobileMenuOpen = false}>
        Reservar Cita
      </a>
    </div>
  </div>
{/if}

<!-- ════════════════ HERO ════════════════ -->
<section id="inicio" class="min-h-screen-ios relative flex flex-col items-center justify-center overflow-hidden">
  <video class="hidden sm:block absolute inset-0 w-full h-full object-cover" autoplay muted loop playsinline>
    <source src="/hero-bg.mp4" type="video/mp4">
  </video>
  <video class="sm:hidden absolute inset-0 w-full h-full object-cover" autoplay muted loop playsinline>
    <source src="/hero-bg-mobile-v2.mp4" type="video/mp4">
  </video>
  <div class="absolute inset-0 bg-black/60"></div>

  <div class="relative z-10 w-full max-w-[90rem] mx-auto px-5 sm:px-10 text-center mb-16 sm:mb-0">
    <!-- Logo -->
    <img src="/logo.png" alt="Inkdigena" class="hero-logo {heroLoaded ? 'loaded' : ''}" style="filter: drop-shadow(0 4px 40px rgba(0,0,0,0.7));">

    <h1 class="hero-title {heroLoaded ? 'loaded' : ''}">INKDIGENA</h1>
    <div class="hero-sub {heroLoaded ? 'loaded' : ''}">
      <p class="font-cinzel text-[10px] sm:text-xs tracking-[0.5em] uppercase text-white/50 mb-6">Tattoo &bull; Art Gallery &bull; Shop</p>
      <p class="font-mont italic text-lg sm:text-2xl md:text-3xl text-white/80 mb-10 px-4">
        Donde el arte ancestral cobra vida en tu piel
      </p>
    </div>

    <div class="hero-btns {heroLoaded ? 'loaded' : ''}">
      <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="btn-gold">
        Agendar por WhatsApp
      </a>
      <a href="#galeria" class="btn-ghost">
        Ver Portfolio
      </a>
    </div>
  </div>

  <!-- Scroll cue -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 scroll-cue">
    <svg width="24" height="40" viewBox="0 0 24 40" fill="none" class="mx-auto mb-2 opacity-50">
      <rect x="1" y="1" width="22" height="38" rx="11" stroke="white" stroke-width="1.5"/>
      <circle cx="12" cy="12" r="3" fill="white" class="scroll-dot"/>
    </svg>
  </div>
</section>

<!-- ═══════ INK DRIP DIVIDER ═══════ -->
<div class="ink-drip">
  <svg viewBox="0 0 1440 120" preserveAspectRatio="none" class="w-full h-[60px] sm:h-[80px]">
    <path d="M0,0 L1440,0 L1440,40 Q1380,38 1320,50 Q1260,62 1200,55 Q1140,48 1080,60 Q1020,72 960,58 Q900,44 840,56 Q780,68 720,80 Q660,92 600,70 Q540,48 480,62 Q420,76 360,60 Q300,44 240,55 Q180,66 120,50 Q60,34 0,45 Z" fill="#0a0a0a"/>
  </svg>
</div>

<!-- ════════════════ PHILOSOPHY ════════════════ -->
<section id="filosofia" class="py-20 sm:py-32 bg-[#0a0a0a] relative overflow-hidden">
  <div class="max-w-6xl mx-auto px-5 sm:px-10 grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-20 items-center">
    <div class="fade-left">
      <div class="relative">
        <img src="/gallery/11.jpg" alt="Arte tribal" class="w-full aspect-[3/4] object-cover" loading="lazy">
        <div class="absolute -bottom-4 -right-4 sm:-bottom-6 sm:-right-6 w-24 h-24 sm:w-32 sm:h-32 border-2 border-gold/30"></div>
        <div class="absolute -top-4 -left-4 sm:-top-6 sm:-left-6 w-24 h-24 sm:w-32 sm:h-32 border-2 border-magenta/20"></div>
      </div>
    </div>
    <div class="fade-right">
      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">Nuestra Filosofía</span>
      <blockquote class="font-cinzel text-2xl sm:text-4xl lg:text-5xl text-white/90 leading-[1.2] mb-8">
        "El arte no se crea — se despierta de las raíces que llevamos dentro"
      </blockquote>
      <div class="w-16 h-0.5 bg-gradient-to-r from-gold to-transparent mb-8"></div>
      <p class="font-mont text-white/50 text-base sm:text-lg leading-relaxed">
        Somos un espacio donde las raíces precolombinas, la riqueza de la naturaleza tropical y la expresión artística moderna convergen. Cada pieza que creamos lleva la memoria de nuestros ancestros y la energía del trópico.
      </p>
    </div>
  </div>
</section>

<!-- ════════════════ SERVICES — Editorial Numbered ════════════════ -->
<section id="servicios" class="bg-[#0f0f0f] relative">
  <div class="py-14 sm:py-24 max-w-7xl mx-auto px-5 sm:px-10">
    <div class="text-center mb-16 sm:mb-24 fade-up">
      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">Lo Que Hacemos</span>
      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">SERVICIOS</h2>
    </div>
  </div>

  <!-- Mobile: compact cards -->
  <div class="services-mobile">
    {#each services as svc, i}
      <div class="svc-card fade-up">
        <div class="svc-card-img">
          <img src={svc.img} alt={svc.name} loading="lazy">
          <span class="svc-card-num" style="color: {svc.color};">{svc.num}</span>
        </div>
        <div class="svc-card-body">
          <h3 class="font-cinzel text-base text-white tracking-wide mb-2">{svc.name}</h3>
          <div class="w-8 h-0.5 mb-2" style="background: {svc.color};"></div>
          <p class="font-mont text-white/50 text-xs leading-relaxed">{svc.description}</p>
        </div>
      </div>
    {/each}
  </div>

  <!-- Desktop: alternating editorial blocks -->
  {#each services as svc, i}
    <div class="service-block {i % 2 === 0 ? '' : 'reverse'}">
      <div class="service-img fade-up">
        <img src={svc.img} alt={svc.name} class="w-full h-full object-cover" loading="lazy">
        <div class="service-img-overlay" style="background: linear-gradient(135deg, {svc.color}22, transparent);"></div>
      </div>
      <div class="service-text fade-up">
        <span class="service-num" style="color: {svc.color};">{svc.num}</span>
        <h3 class="font-cinzel text-3xl lg:text-4xl text-white tracking-wide mb-6">{svc.name}</h3>
        <div class="w-12 h-0.5 mb-6" style="background: {svc.color};"></div>
        <p class="font-mont text-white/50 text-base lg:text-lg leading-relaxed max-w-lg">{svc.description}</p>
      </div>
    </div>
  {/each}
</section>

<!-- ═══════ INK DRIP DIVIDER ═══════ -->
<div class="ink-drip-up">
  <svg viewBox="0 0 1440 120" preserveAspectRatio="none" class="w-full h-[60px] sm:h-[80px]">
    <path d="M0,120 L1440,120 L1440,80 Q1380,82 1320,70 Q1260,58 1200,65 Q1140,72 1080,60 Q1020,48 960,62 Q900,76 840,64 Q780,52 720,40 Q660,28 600,50 Q540,72 480,58 Q420,44 360,60 Q300,76 240,65 Q180,54 120,70 Q60,86 0,75 Z" fill="#0f0f0f"/>
  </svg>
</div>

<!-- ════════════════ GALLERY — Horizontal Filmstrip ════════════════ -->
<section id="galeria" class="py-14 sm:py-24 bg-[#0a0a0a] relative overflow-hidden">
  <div class="max-w-7xl mx-auto px-5 sm:px-10 mb-10 sm:mb-16">
    <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4 fade-up">
      <div>
        <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">Portfolio</span>
        <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">GALERÍA</h2>
      </div>
      <div class="flex gap-3">
        <button onclick={() => scrollGallery(-1)} class="gallery-arrow" aria-label="Anterior">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M13 4L7 10L13 16" stroke="currentColor" stroke-width="1.5"/></svg>
        </button>
        <button onclick={() => scrollGallery(1)} class="gallery-arrow" aria-label="Siguiente">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M7 4L13 10L7 16" stroke="currentColor" stroke-width="1.5"/></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Filmstrip -->
  <div class="filmstrip" bind:this={galleryEl}>
    <div class="filmstrip-track">
      {#each galleryImages as img, i}
        <button class="filmstrip-card" onclick={() => openLightbox(img.src)}>
          <img src={img.src} alt={img.caption} class="filmstrip-img" loading="lazy">
          <div class="filmstrip-caption">
            <span class="font-cinzel text-gold text-[10px] tracking-[0.3em] uppercase">{String(i + 1).padStart(2, '0')}</span>
            <span class="font-mont text-white/80 text-xs sm:text-sm">{img.caption}</span>
          </div>
        </button>
      {/each}
    </div>
  </div>

  <div class="max-w-7xl mx-auto px-5 sm:px-10 mt-8 sm:mt-12 fade-up">
    <p class="font-mont italic text-white/30 text-sm">Desliza para explorar — toca para ampliar</p>
  </div>
</section>

<!-- LIGHTBOX -->
{#if lightboxOpen}
  <div class="lightbox" role="dialog" aria-modal="true">
    <button class="absolute inset-0 z-0" onclick={closeLightbox} aria-label="Cerrar"></button>
    <button class="absolute top-6 right-6 z-20 text-white/60 hover:text-white text-3xl transition-colors" onclick={closeLightbox} aria-label="Cerrar">
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M6 6L22 22M22 6L6 22" stroke="currentColor" stroke-width="1.5"/></svg>
    </button>
    <img src={lightboxImg} alt="Imagen ampliada" class="relative z-10 max-w-[92vw] max-h-[88vh] object-contain">
  </div>
{/if}

<!-- ════════════════ CONTACT ════════════════ -->
<section id="contacto" class="py-20 sm:py-32 bg-[#0f0f0f] relative overflow-hidden">
  <!-- Decorative circle -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] sm:w-[800px] sm:h-[800px] rounded-full border border-white/[0.03] pointer-events-none"></div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] sm:w-[550px] sm:h-[550px] rounded-full border border-gold/[0.05] pointer-events-none"></div>

  <div class="relative z-10 max-w-3xl mx-auto px-5 sm:px-10 text-center">
    <div class="fade-up">
      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">Hablemos</span>
      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide mb-8">CONTACTO</h2>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-4 mb-12 sm:mb-16">
      <div class="contact-pill fade-up">
        <span class="text-xl mb-2 block">📱</span>
        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">WhatsApp</span>
        <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="font-mont text-gold hover:text-white transition-colors text-sm sm:text-base">
          +506 6269-2083
        </a>
      </div>
      <div class="contact-pill fade-up">
        <span class="text-xl mb-2 block">📞</span>
        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">Teléfono</span>
        <a href="tel:50662692083" class="font-mont text-gold hover:text-white transition-colors text-sm sm:text-base">
          +506 6269-2083
        </a>
      </div>
      <div class="contact-pill fade-up">
        <span class="text-xl mb-2 block">📍</span>
        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">Ubicación</span>
        <span class="font-mont text-white/70 text-sm sm:text-base">Costa Rica</span>
      </div>
    </div>

    <div class="flex items-center justify-center gap-5 mb-12 sm:mb-16 fade-up">
      <a href="https://www.instagram.com/inkdigenatattooshop/" target="_blank" rel="noopener noreferrer" class="social-icon" aria-label="Instagram">
        <svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
      </a>
      <a href="https://www.facebook.com/p/Inkdihena-tattoo-shop-100065620533979/" target="_blank" rel="noopener noreferrer" class="social-icon" aria-label="Facebook">
        <svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
      </a>
    </div>

    <div class="fade-up">
      <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="btn-gold inline-block">
        Reservar Mi Cita
      </a>
    </div>

    <div class="mt-12 sm:mt-16 fade-up">
      <div class="map-wrap">
        <iframe
          src="https://maps.google.com/maps?q=inkdigena+tattoo+art+gallery+shop&output=embed"
          width="100%"
          height="300"
          style="border:0"
          loading="lazy"
          title="Mapa de ubicación"
        ></iframe>
      </div>
    </div>
  </div>
</section>

<!-- ════════════════ FOOTER ════════════════ -->
<footer class="bg-[#060606] py-10 sm:py-16 border-t border-white/[0.04]">
  <div class="max-w-7xl mx-auto px-5 sm:px-10">

    <!-- Mobile footer: centered, compact -->
    <div class="md:hidden flex flex-col items-center text-center">
      <img src="/logo.png" alt="Inkdigena" class="h-12 w-auto mb-2">
      <p class="font-cinzel text-white text-sm tracking-wide mb-1">INKDIGENA</p>
      <p class="font-mont italic text-white/25 text-xs mb-5">Donde el arte ancestral cobra vida en tu piel</p>

      <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mb-5">
        <a href="#inicio" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Inicio</a>
        <a href="#servicios" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Servicios</a>
        <a href="#galeria" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Galería</a>
        <a href="#contacto" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Contacto</a>
        <a href="/about" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Nosotros</a>
      </div>

      <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-gold text-sm mb-1 hover:text-white transition-colors">+506 6269-2083</a>
      <span class="font-mont text-white/25 text-xs mb-4">Costa Rica</span>

      <div class="flex items-center gap-4 mb-6">
        <a href="https://www.instagram.com/inkdigenatattooshop/" target="_blank" rel="noopener noreferrer" class="social-icon-sm" aria-label="Instagram">
          <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
        </a>
        <a href="https://www.facebook.com/p/Inkdihena-tattoo-shop-100065620533979/" target="_blank" rel="noopener noreferrer" class="social-icon-sm" aria-label="Facebook">
          <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </a>
      </div>

      <div class="w-full border-t border-white/[0.04] pt-5 flex flex-col items-center gap-2">
        <p class="font-mont text-white/20 text-[10px]">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
        <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-[10px] text-white/20 hover:text-white/40 transition-colors">Hecho por digitalmar.dev</a>
      </div>
    </div>

    <!-- Desktop footer: 3-column grid -->
    <div class="hidden md:grid grid-cols-3 gap-12 items-start">
      <div>
        <img src="/logo.png" alt="Inkdigena" class="h-14 w-auto mb-3">
        <p class="font-mont italic text-white/25 text-sm">Donde el arte ancestral cobra vida en tu piel</p>
      </div>

      <div class="flex flex-col gap-2">
        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Explorar</span>
        <a href="#inicio" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Inicio</a>
        <a href="#servicios" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Servicios</a>
        <a href="#galeria" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Galería</a>
        <a href="#contacto" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Contacto</a>
        <a href="/about" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Nosotros</a>
      </div>

      <div class="flex flex-col gap-2">
        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Contacto</span>
        <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">WhatsApp: +506 6269-2083</a>
        <a href="tel:50662692083" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">Tel: +506 6269-2083</a>
        <span class="font-mont text-white/30 text-sm">Costa Rica</span>
        <div class="flex items-center gap-3 mt-3">
          <a href="https://www.instagram.com/inkdigenatattooshop/" target="_blank" rel="noopener noreferrer" class="social-icon-sm" aria-label="Instagram">
            <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
          </a>
          <a href="https://www.facebook.com/p/Inkdihena-tattoo-shop-100065620533979/" target="_blank" rel="noopener noreferrer" class="social-icon-sm" aria-label="Facebook">
            <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          </a>
        </div>
      </div>
    </div>

    <div class="hidden md:flex mt-10 pt-8 border-t border-white/[0.04] items-center justify-between">
      <p class="font-mont text-white/20 text-xs">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/20 hover:text-white/40 transition-colors">Hecho por digitalmar.dev</a>
    </div>
  </div>
</footer>

<!-- FLOATING WHATSAPP -->
<a
  href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios."
  target="_blank"
  rel="noopener noreferrer"
  class="wa-float"
  aria-label="Contactar por WhatsApp"
>
  <svg viewBox="0 0 32 32" class="w-7 h-7" fill="white">
    <path d="M16.004 0h-.008C7.174 0 0 7.176 0 16.004c0 3.5 1.128 6.744 3.046 9.378L1.054 31.29l6.118-1.958A15.908 15.908 0 0016.004 32C24.826 32 32 24.826 32 16.004 32 7.176 24.826 0 16.004 0zm9.302 22.602c-.388 1.092-1.922 1.998-3.13 2.264-.826.178-1.904.32-5.534-1.19-4.644-1.932-7.628-6.636-7.862-6.942-.224-.306-1.886-2.512-1.886-4.79 0-2.278 1.194-3.4 1.618-3.864.388-.424.918-.602 1.224-.602.152 0 .286.008.408.014.424.018.636.042.916.71.35.834 1.204 2.936 1.31 3.15.108.214.214.504.068.796-.136.296-.254.48-.468.74-.214.258-.44.458-.654.74-.194.244-.414.506-.17.93.244.424 1.084 1.788 2.328 2.896 1.6 1.424 2.878 1.88 3.346 2.076.352.148.77.112 1.024-.148.32-.332.716-.882 1.118-1.424.286-.388.646-.436 1.032-.29.39.136 2.478 1.168 2.902 1.382.424.214.706.32.81.498.102.178.102 1.03-.286 2.122z"/>
  </svg>
</a>

<style>
  :global(html, body) { overflow-x: hidden; }
  :global(body) { background: #0a0a0a; }

  /* ── FONTS ── */
  .font-cinzel { font-family: 'Cinzel', serif; }
  .font-mont { font-family: 'Montserrat', sans-serif; }

  /* ── COLORS ── */
  .text-gold { color: #D4A044; }
  .border-gold\/30 { border-color: rgba(212,160,68,0.3); }
  .border-magenta\/20 { border-color: rgba(214,75,138,0.2); }

  /* ── SIDE DOT NAV ── */
  .side-nav {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: none;
    flex-direction: column;
    gap: 20px;
  }
  @media (min-width: 1024px) { .side-nav { display: flex; } }

  .side-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    position: relative;
    transition: all 0.4s;
    background: transparent;
  }
  .side-dot.active {
    border-color: #D4A044;
    background: #D4A044;
    box-shadow: 0 0 12px rgba(212,160,68,0.4);
  }
  .side-dot:hover { border-color: rgba(255,255,255,0.5); }
  .dot-label {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .side-dot:hover .dot-label { opacity: 0.6; }

  /* ── TOP BAR ── */
  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(10,10,10,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (min-width: 640px) { .top-bar { padding: 0 40px; } }
  .top-bar.visible { transform: translateY(0); }

  .top-link {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    transition: color 0.3s;
  }
  .top-link:hover { color: #D4A044; }

  .top-cta {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0a0a0a;
    background: #D4A044;
    padding: 8px 20px;
    transition: all 0.3s;
  }
  .top-cta:hover { background: #e8b654; transform: translateY(-1px); }

  /* ── HAMBURGER ── */
  .hamburger { width: 22px; height: 16px; position: relative; }
  .hline {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: #D4A044;
    transition: all 0.35s;
    top: calc(var(--i) * 8px);
  }
  .hline.open:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .hline.open:nth-child(2) { opacity: 0; }
  .hline.open:nth-child(3) { top: 8px; transform: rotate(-45deg); }

  /* ── MOBILE DRAWER ── */
  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
  }
  .mobile-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 80vw;
    height: 100%;
    background: #0f0f0f;
    border-left: 1px solid rgba(212,160,68,0.1);
    padding: 80px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1;
    animation: drawerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes drawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  .drawer-link {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    transition: color 0.3s;
  }
  .drawer-link:hover { color: #D4A044; }
  .drawer-cta {
    margin-top: auto;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px;
    background: #D4A044;
    color: #0a0a0a;
  }

  /* ── HERO ── */
  .hero-logo {
    width: 180px;
    height: auto;
    margin: 0 auto 1.5rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (min-width: 640px) { .hero-logo { width: 240px; margin-bottom: 2rem; } }
  @media (min-width: 1024px) { .hero-logo { width: 280px; } }
  .hero-logo.loaded { opacity: 1; transform: translateY(0); }

  .hero-title {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 10vw, 7rem);
    letter-spacing: 0.12em;
    color: white;
    line-height: 1;
    margin-bottom: 0.75rem;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  }
  .hero-title.loaded { opacity: 1; transform: translateY(0); }

  .hero-sub {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
  }
  .hero-sub.loaded { opacity: 1; transform: translateY(0); }

  .hero-btns {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  @media (min-width: 640px) { .hero-btns { flex-direction: row; justify-content: center; } }
  .hero-btns.loaded { opacity: 1; transform: translateY(0); }

  /* ── BUTTONS ── */
  .btn-gold {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 16px 36px;
    background: linear-gradient(135deg, #D4A044, #E87C4F);
    color: #0a0a0a;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
    width: 100%;
  }
  @media (min-width: 640px) { .btn-gold { width: auto; } }
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212,160,68,0.35); }

  .btn-ghost {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 16px 36px;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
    width: 100%;
  }
  @media (min-width: 640px) { .btn-ghost { width: auto; } }
  .btn-ghost:hover { border-color: #D4A044; color: #D4A044; }

  /* ── SCROLL CUE ── */
  .scroll-cue { animation: cueFloat 2.5s ease-in-out infinite; }
  @keyframes cueFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
  }
  .scroll-dot { animation: dotScroll 2s ease-in-out infinite; }
  @keyframes dotScroll {
    0% { cy: 10; opacity: 1; }
    100% { cy: 30; opacity: 0; }
  }

  /* ── INK DRIP DIVIDERS ── */
  .ink-drip { background: #0a0a0a; margin-top: -1px; }
  .ink-drip svg path { fill: #0a0a0a; }
  .ink-drip-up { background: #0a0a0a; margin-bottom: -1px; }
  .ink-drip-up svg path { fill: #0f0f0f; }

  /* ── SERVICE BLOCKS ── */
  /* ── MOBILE SERVICE CARDS ── */
  .services-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.25rem 2rem;
  }
  @media (min-width: 768px) { .services-mobile { display: none; } }

  .svc-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .svc-card-img {
    position: relative;
    overflow: hidden;
  }
  .svc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .svc-card-num {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.3;
  }
  .svc-card-body {
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── DESKTOP SERVICE BLOCKS ── */
  .service-block {
    display: none;
  }
  @media (min-width: 768px) {
    .service-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 70vh;
    }
  }

  @media (min-width: 768px) {
    .service-block.reverse .service-img { order: 2; }
    .service-block.reverse .service-text { order: 1; }
  }

  .service-img {
    position: relative;
    overflow: hidden;
  }
  .service-img img {
    transition: transform 8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .service-img:hover img { transform: scale(1.06); }
  .service-img-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .service-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.5rem;
    background: #0f0f0f;
  }
  @media (min-width: 1024px) { .service-text { padding: 4rem 4.5rem; } }

  .service-num {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1;
    opacity: 0.15;
    margin-bottom: 0.5rem;
  }

  /* ── FILMSTRIP GALLERY ── */
  .filmstrip {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filmstrip::-webkit-scrollbar { display: none; }

  .filmstrip-track {
    display: flex;
    gap: 16px;
    padding: 0 20px;
  }
  @media (min-width: 640px) { .filmstrip-track { gap: 20px; padding: 0 40px; } }

  .filmstrip-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 260px;
    position: relative;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
    text-align: left;
  }
  @media (min-width: 640px) { .filmstrip-card { width: 340px; } }
  @media (min-width: 1024px) { .filmstrip-card { width: 400px; } }

  .filmstrip-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .filmstrip-card:hover .filmstrip-img { transform: scale(1.03); }

  .filmstrip-caption {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .gallery-arrow {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    transition: all 0.3s;
    background: none;
    cursor: pointer;
  }
  .gallery-arrow:hover { border-color: #D4A044; color: #D4A044; }

  /* ── LIGHTBOX ── */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(5,5,5,0.96);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lbIn 0.3s ease-out;
  }
  @keyframes lbIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ── CONTACT ── */
  .contact-pill {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.3s;
  }
  .contact-pill:hover { border-color: rgba(212,160,68,0.2); }

  .map-wrap {
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .map-wrap iframe {
    display: block;
    filter: saturate(0) brightness(0.6) contrast(1.2);
    transition: filter 0.5s;
  }
  .map-wrap:hover iframe { filter: saturate(0.8) brightness(0.85) contrast(1.1); }

  /* ── SOCIAL ICONS ── */
  .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    transition: all 0.3s;
  }
  .social-icon:hover { border-color: #D4A044; color: #D4A044; }

  .social-icon-sm {
    color: rgba(255,255,255,0.3);
    transition: color 0.3s;
  }
  .social-icon-sm:hover { color: #D4A044; }

  /* ── WHATSAPP FLOAT ── */
  .wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 70;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    animation: waPulse 2.5s ease-in-out infinite;
    transition: transform 0.3s;
  }
  .wa-float:hover { transform: scale(1.1); }
  @keyframes waPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 4px 30px rgba(37,211,102,0.6), 0 0 0 10px rgba(37,211,102,0.08); }
  }

  /* ── SCROLL REVEAL ANIMATIONS ── */
  :global(.fade-up) {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :global(.fade-up.in-view) { opacity: 1; transform: translateY(0); }

  :global(.fade-left) {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  :global(.fade-left.in-view) { opacity: 1; transform: translateX(0); }

  :global(.fade-right) {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
  }
  :global(.fade-right.in-view) { opacity: 1; transform: translateX(0); }

  :global(.scale-in) {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s, transform 0.7s;
  }
  :global(.scale-in.in-view) { opacity: 1; transform: scale(1); }
</style>