inkdigena/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 mobileMenuOpen = $state(false);
  let navSolid = $derived(scrollY > 80);
  let lightboxOpen = $state(false);
  let lightboxImg = $state('');

  const services = [
    {
      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.",
      icon: "✦",
      accent: "#D64B8A"
    },
    {
      name: "Body Piercing",
      description: "Servicio profesional de perforaciones corporales realizadas con técnicas seguras e higiénicas en un ambiente artístico.",
      icon: "◈",
      accent: "#2A8C7A"
    },
    {
      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.",
      icon: "❋",
      accent: "#D4A044"
    },
    {
      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.",
      icon: "◆",
      accent: "#E87C4F"
    },
    {
      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.",
      icon: "✧",
      accent: "#9B7EC8"
    }
  ];

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

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

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

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

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('revealed');
          }
        });
      },
      { threshold: 0.05, rootMargin: '0px 0px -20px 0px' }
    );

    const observeAll = () => {
      document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
    };

    observeAll();

    // Re-observe after a short delay to catch any elements that rendered late
    setTimeout(observeAll, 100);
    setTimeout(observeAll, 500);

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

<!-- NAVIGATION -->
<nav class={navSolid ? 'nav-bar nav-solid' : 'nav-bar nav-transparent'}>
  <div class="max-w-7xl mx-auto px-5 sm:px-8 flex items-center justify-between h-full">
    <a href="/" class="nav-logo">
      <img src="/logo.png" alt="Inkdigena" class="h-10 sm:h-12 w-auto">
    </a>

    <!-- Desktop nav -->
    <div class="hidden md:flex items-center gap-8">
      <a href="/" class="nav-link font-bebas text-sm tracking-widest uppercase">Inicio</a>
      <a href="#servicios" class="nav-link font-bebas text-sm tracking-widest uppercase">Servicios</a>
      <a href="#galeria" class="nav-link font-bebas text-sm tracking-widest uppercase">Galería</a>
      <a href="#contacto" class="nav-link font-bebas text-sm tracking-widest uppercase">Contacto</a>
      <a href="/about" class="nav-link font-bebas text-sm tracking-widest uppercase">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="nav-cta font-bebas text-sm tracking-widest uppercase px-5 py-2 rounded-none">
        Reservar Cita
      </a>
    </div>

    <!-- Mobile hamburger -->
    <button class="md:hidden relative z-50 w-10 h-10 flex items-center justify-center" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="Menú">
      <div class="hamburger-lines">
        <span class={mobileMenuOpen ? 'line line-1 open' : 'line line-1'}></span>
        <span class={mobileMenuOpen ? 'line line-2 open' : 'line line-2'}></span>
        <span class={mobileMenuOpen ? 'line line-3 open' : 'line line-3'}></span>
      </div>
    </button>
  </div>

  <!-- Mobile menu -->
  {#if mobileMenuOpen}
    <div class="mobile-menu md:hidden">
      <div class="flex flex-col items-center gap-6 py-12">
        <a href="/" class="font-bebas text-2xl tracking-widest uppercase text-white" onclick={() => mobileMenuOpen = false}>Inicio</a>
        <a href="#servicios" class="font-bebas text-2xl tracking-widest uppercase text-white" onclick={() => mobileMenuOpen = false}>Servicios</a>
        <a href="#galeria" class="font-bebas text-2xl tracking-widest uppercase text-white" onclick={() => mobileMenuOpen = false}>Galería</a>
        <a href="#contacto" class="font-bebas text-2xl tracking-widest uppercase text-white" onclick={() => mobileMenuOpen = false}>Contacto</a>
        <a href="/about" class="font-bebas text-2xl tracking-widest uppercase text-white" 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="nav-cta-mobile font-bebas text-xl tracking-widest uppercase px-8 py-3 mt-4">
          Reservar Cita
        </a>
      </div>
    </div>
  {/if}
</nav>

<!-- HERO -->
<section class="min-h-screen-ios relative flex 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.mp4" type="video/mp4">
  </video>

  <div class="hero-overlay absolute inset-0"></div>
  <div class="grain-overlay absolute inset-0"></div>

  <div class="relative z-10 text-center px-5 sm:px-8 max-w-5xl mx-auto w-full">

    <img src="/logo.png" alt="Inkdigena" class="w-40 sm:w-56 md:w-64 mx-auto mb-4 sm:mb-6 reveal" style="filter: drop-shadow(0 4px 40px rgba(0,0,0,0.6));">

    <div class="flex items-center justify-center gap-3 sm:gap-4 mb-6 reveal flex-wrap" style="animation-delay: 0.15s;">
      <span class="h-px w-8 sm:w-20 bg-gold opacity-60"></span>
      <span class="font-bebas text-gold text-xs sm:text-sm tracking-[0.3em] sm:tracking-[0.4em] uppercase">Tattoo • Art • Gallery</span>
      <span class="h-px w-8 sm:w-20 bg-gold opacity-60"></span>
    </div>

    <p class="font-playfair italic text-xl sm:text-2xl md:text-3xl text-white/90 mb-10 sm:mb-12 reveal px-2" style="animation-delay: 0.3s;">
      Donde el arte ancestral cobra vida en tu piel
    </p>

    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 reveal" style="animation-delay: 0.45s;">
      <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="hero-btn-primary font-bebas text-base sm:text-lg tracking-widest uppercase px-10 py-4 w-full sm:w-auto text-center">
        Agendar por WhatsApp
      </a>
      <a href="tel:50662692083" class="hero-btn-secondary font-bebas text-base sm:text-lg tracking-widest uppercase px-10 py-4 w-full sm:w-auto text-center">
        Llamar Ahora
      </a>
    </div>
  </div>

  <!-- Scroll indicator -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 scroll-indicator">
    <div class="w-px h-16 bg-gradient-to-b from-gold/80 to-transparent mx-auto mb-2"></div>
    <span class="font-montserrat text-[10px] tracking-[0.3em] uppercase text-white/50">Explorar</span>
  </div>
</section>

<!-- EDITORIAL PULL QUOTE -->
<section class="bg-navy py-14 sm:py-24 relative overflow-hidden">
  <div class="absolute inset-0 opacity-5">
    <div class="tribal-pattern"></div>
  </div>
  <div class="max-w-4xl mx-auto px-5 sm:px-8 text-center reveal">
    <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-6">Nuestra Filosofía</span>
    <blockquote class="font-playfair italic text-2xl sm:text-4xl md:text-5xl text-white/90 leading-tight">
      "El arte no se crea — se despierta de las raíces que llevamos dentro"
    </blockquote>
    <div class="mt-8 flex items-center justify-center gap-3">
      <span class="h-px w-16 bg-magenta/40"></span>
      <span class="text-gold text-2xl">✦</span>
      <span class="h-px w-16 bg-magenta/40"></span>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section id="servicios" class="py-14 sm:py-24 bg-off-dark relative overflow-hidden">
  <div class="grain-overlay absolute inset-0"></div>
  <div class="max-w-7xl mx-auto px-5 sm:px-8 relative z-10">
    <div class="text-center mb-12 sm:mb-20 reveal">
      <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-4">Lo Que Hacemos</span>
      <h2 class="font-bebas text-4xl sm:text-6xl md:text-7xl text-white tracking-wide uppercase">Nuestros Servicios</h2>
      <div class="mx-auto mt-4 w-24 h-1 bg-gradient-to-r from-magenta via-gold to-teal"></div>
    </div>

    <div class="services-grid">
      {#each services as service, i}
        <div class="service-card reveal" style="animation-delay: {i * 0.1}s;">
          <div class="service-accent-line" style="background: {service.accent};"></div>
          <div class="p-5 sm:p-8">
            <span class="text-3xl sm:text-4xl block mb-4" style="color: {service.accent};">{service.icon}</span>
            <h3 class="font-bebas text-xl sm:text-2xl tracking-wider uppercase text-white mb-3">{service.name}</h3>
            <p class="font-montserrat text-sm sm:text-base text-white/60 leading-relaxed">{service.description}</p>
          </div>
        </div>
      {/each}
    </div>
  </div>
</section>

<!-- FEATURED ARTWORK BANNER -->
<section class="relative h-[50vh] sm:h-[60vh] overflow-hidden">
  <img src="/gallery/11.jpg" alt="Arte tribal — perezoso y jaguar" class="absolute inset-0 w-full h-full object-cover" loading="lazy">
  <div class="absolute inset-0 bg-gradient-to-t from-navy via-navy/40 to-transparent"></div>
  <div class="absolute bottom-0 left-0 right-0 p-5 sm:p-16 z-10 banner-text-visible">
    <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-2">Arte Original</span>
    <h3 class="font-dancing text-3xl sm:text-5xl text-white">Donde la cultura se encuentra con el lienzo</h3>
  </div>
</section>

<!-- GALLERY -->
<section id="galeria" class="py-14 sm:py-24 bg-navy relative overflow-hidden">
  <div class="max-w-7xl mx-auto px-5 sm:px-8">
    <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between mb-12 sm:mb-20 gap-4 reveal">
      <div>
        <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-4">Portfolio</span>
        <h2 class="font-bebas text-4xl sm:text-6xl md:text-7xl text-white tracking-wide uppercase">Galería</h2>
      </div>
      <p class="font-playfair italic text-white/50 text-lg sm:text-xl sm:max-w-md">
        Cada pieza cuenta una historia — de raíces, naturaleza y la fuerza del arte.
      </p>
    </div>

    <div class="gallery-masonry">
      {#each galleryImages as img, i}
        <button class="gallery-item {img.span} gallery-visible" style="animation-delay: {i * 0.06}s;" onclick={() => openLightbox(img.src)}>
          <img src={img.src} alt={img.caption} class="w-full h-full object-cover" loading="lazy">
          <div class="gallery-overlay">
            <span class="font-montserrat text-xs sm:text-sm text-white/90 tracking-wide">{img.caption}</span>
          </div>
        </button>
      {/each}
    </div>
  </div>
</section>

<!-- LIGHTBOX -->
{#if lightboxOpen}
  <div class="lightbox-backdrop" 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/70 hover:text-white text-4xl font-light transition-colors" onclick={closeLightbox} aria-label="Cerrar">✕</button>
    <img src={lightboxImg} alt="Imagen ampliada" class="relative z-10 max-w-[90vw] max-h-[85vh] object-contain rounded-sm shadow-2xl">
  </div>
{/if}

<!-- CONTACT -->
<section id="contacto" class="py-14 sm:py-24 bg-off-dark relative overflow-hidden">
  <div class="grain-overlay absolute inset-0"></div>
  <div class="max-w-7xl mx-auto px-5 sm:px-8 relative z-10">
    <div class="text-center mb-12 sm:mb-20 reveal">
      <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-4">Hablemos</span>
      <h2 class="font-bebas text-4xl sm:text-6xl md:text-7xl text-white tracking-wide uppercase">Contacto</h2>
      <div class="mx-auto mt-4 w-24 h-1 bg-gradient-to-r from-teal via-gold to-coral"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-12">
      <!-- Contact Info -->
      <div class="space-y-6 sm:space-y-8 reveal">
        <div class="contact-card">
          <div class="flex items-start gap-4 sm:gap-5">
            <div class="contact-icon-ring" style="--ring-color: #2A8C7A;">
              <span class="text-xl sm:text-2xl">📱</span>
            </div>
            <div class="min-w-0">
              <h4 class="font-bebas text-lg tracking-wider text-white uppercase mb-1">WhatsApp</h4>
              <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-montserrat text-gold hover:text-magenta transition-colors text-base sm:text-lg break-all">
                +506 6269-2083
              </a>
              <p class="font-montserrat text-white/40 text-sm mt-1">Escríbenos para agendar tu cita</p>
            </div>
          </div>
        </div>

        <div class="contact-card">
          <div class="flex items-start gap-4 sm:gap-5">
            <div class="contact-icon-ring" style="--ring-color: #D64B8A;">
              <span class="text-xl sm:text-2xl">📞</span>
            </div>
            <div class="min-w-0">
              <h4 class="font-bebas text-lg tracking-wider text-white uppercase mb-1">Teléfono</h4>
              <a href="tel:50662692083" class="font-montserrat text-gold hover:text-magenta transition-colors text-base sm:text-lg">
                +506 6269-2083
              </a>
              <p class="font-montserrat text-white/40 text-sm mt-1">Llámanos directamente</p>
            </div>
          </div>
        </div>

        <div class="contact-card">
          <div class="flex items-start gap-4 sm:gap-5">
            <div class="contact-icon-ring" style="--ring-color: #D4A044;">
              <span class="text-xl sm:text-2xl">📍</span>
            </div>
            <div class="min-w-0">
              <h4 class="font-bebas text-lg tracking-wider text-white uppercase mb-1">Ubicación</h4>
              <p class="font-montserrat text-white/70 text-base sm:text-lg">Costa Rica</p>
            </div>
          </div>
        </div>

        <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="contact-cta-btn font-bebas text-lg tracking-widest uppercase block text-center py-4 mt-4">
          Reservar Mi Cita →
        </a>
      </div>

      <!-- Map -->
      <div class="reveal" style="animation-delay: 0.15s;">
        <div class="map-container">
          <iframe
            src="https://maps.google.com/maps?q=Costa%20Rica&output=embed"
            width="100%"
            height="400"
            style="border:0"
            loading="lazy"
            title="Mapa de ubicación"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="bg-navy border-t border-white/5 py-12 sm:py-16 relative overflow-hidden">
  <div class="max-w-7xl mx-auto px-5 sm:px-8">
    <div class="flex flex-col items-center text-center">
      <a href="/" class="mb-4"><img src="/logo.png" alt="Inkdigena" class="h-16 w-auto mx-auto"></a>
      <p class="font-montserrat text-white/40 text-sm mb-2">Tattoo Art Gallery Shop</p>
      <p class="font-playfair italic text-white/25 text-sm mb-8">Donde el arte ancestral cobra vida en tu piel</p>

      <div class="flex items-center justify-center gap-3 sm:gap-6 mb-8 flex-wrap px-2">
        <a href="/" class="font-bebas text-xs tracking-widest uppercase text-white/40 hover:text-gold transition-colors">Inicio</a>
        <span class="text-white/10 hidden sm:inline">|</span>
        <a href="#servicios" class="font-bebas text-xs tracking-widest uppercase text-white/40 hover:text-gold transition-colors">Servicios</a>
        <span class="text-white/10 hidden sm:inline">|</span>
        <a href="#galeria" class="font-bebas text-xs tracking-widest uppercase text-white/40 hover:text-gold transition-colors">Galería</a>
        <span class="text-white/10 hidden sm:inline">|</span>
        <a href="#contacto" class="font-bebas text-xs tracking-widest uppercase text-white/40 hover:text-gold transition-colors">Contacto</a>
        <span class="text-white/10 hidden sm:inline">|</span>
        <a href="/about" class="font-bebas text-xs tracking-widest uppercase text-white/40 hover:text-gold transition-colors">Nosotros</a>
      </div>

      <div class="flex items-center gap-3 mb-6">
        <span class="h-px w-12 bg-gold/20"></span>
        <span class="text-gold/40 text-sm">✦</span>
        <span class="h-px w-12 bg-gold/20"></span>
      </div>

      <p class="font-montserrat text-white/25 text-xs mb-4">
        © {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop. Todos los derechos reservados.
      </p>
      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs opacity-40 hover:opacity-70 transition-opacity text-white/50">
        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="whatsapp-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;
  }

  .font-dancing { font-family: 'Cinzel', serif; letter-spacing: 0.12em; }
  .font-bebas { font-family: 'Cinzel', serif; letter-spacing: 0.12em; }
  .font-montserrat { font-family: 'Montserrat', sans-serif; }
  .font-playfair { font-family: 'Montserrat', sans-serif; font-style: italic; }

  .bg-navy { background-color: #2A2A2A; }
  .bg-off-dark { background-color: #1E1E1E; }
  .bg-gold { background-color: #D4A044; }
  .text-gold { color: #D4A044; }
  .text-magenta { color: #D64B8A; }
  .text-teal { color: #2A8C7A; }
  .text-coral { color: #E87C4F; }

  /* NAV */
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 72px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-transparent {
    background: transparent;
  }
  .nav-solid {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 160, 68, 0.1);
  }
  .nav-link {
    color: rgba(255,255,255,0.7);
    transition: color 0.3s;
    position: relative;
  }
  .nav-link:hover { color: #D4A044; }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: #D4A044;
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  .nav-link:hover::after { transform: scaleX(1); }

  .nav-cta {
    background: transparent;
    border: 1px solid #D4A044;
    color: #D4A044;
    transition: all 0.3s;
  }
  .nav-cta:hover {
    background: #D4A044;
    color: #2A2A2A;
  }
  .nav-cta-mobile {
    background: #D4A044;
    color: #2A2A2A;
  }

  /* Hamburger */
  .hamburger-lines { width: 24px; height: 18px; position: relative; }
  .line {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #D4A044;
    transition: all 0.3s;
  }
  .line-1 { top: 0; }
  .line-2 { top: 8px; }
  .line-3 { top: 16px; }
  .line-1.open { top: 8px; transform: rotate(45deg); }
  .line-2.open { opacity: 0; }
  .line-3.open { top: 8px; transform: rotate(-45deg); }

  .mobile-menu {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(30, 30, 30, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(212, 160, 68, 0.15);
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* HERO */
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(30, 30, 30, 0.3) 0%,
      rgba(30, 30, 30, 0.5) 40%,
      rgba(30, 30, 30, 0.85) 100%
    );
  }

  .grain-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.6;
  }


  .hero-btn-primary {
    background: linear-gradient(135deg, #D4A044 0%, #E87C4F 100%);
    color: #2A2A2A;
    transition: all 0.3s;
    border: none;
    position: relative;
    overflow: hidden;
  }
  .hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 160, 68, 0.4);
  }
  .hero-btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s;
  }
  .hero-btn-secondary:hover {
    border-color: #D4A044;
    color: #D4A044;
  }

  .scroll-indicator {
    animation: scrollFade 2s ease-in-out infinite;
  }
  @keyframes scrollFade {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
  }

  /* SERVICES */
  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .services-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .service-card {
    background: rgba(42, 42, 42, 0.5);
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 160, 68, 0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  }
  .service-accent-line {
    height: 3px;
    width: 100%;
  }

  /* BANNER TEXT - always visible, no reveal needed */
  .banner-text-visible {
    opacity: 1;
    transform: none;
  }

  /* GALLERY */
  .gallery-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  @media (min-width: 640px) {
    .gallery-masonry {
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
    }
  }
  @media (min-width: 1024px) {
    .gallery-masonry {
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
  }

  /* Gallery items are always visible - no reveal animation to prevent stuck opacity */
  .gallery-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    border: none;
    padding: 0;
    background: #0a0a0a;
  }
  .gallery-item img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .gallery-item:hover img {
    transform: scale(1.08);
  }
  .gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 30, 30, 0.9) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
  }
  .gallery-item:hover .gallery-overlay {
    opacity: 1;
  }

  .col-span-2 { grid-column: span 2; }
  .row-span-2 { grid-row: span 2; }
  .col-span-2.row-span-2 { aspect-ratio: auto; }

  @media (max-width: 639px) {
    .col-span-2 { grid-column: span 2; }
    .row-span-2 { grid-row: span 1; }
    .col-span-2.row-span-2 { aspect-ratio: 2/1; }
  }

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

  /* CONTACT */
  .contact-card {
    background: rgba(42, 42, 42, 0.4);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 1.25rem;
    transition: border-color 0.3s;
  }
  @media (min-width: 640px) {
    .contact-card { padding: 1.5rem; }
  }
  .contact-card:hover {
    border-color: rgba(212, 160, 68, 0.2);
  }

  .contact-icon-ring {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 2px solid var(--ring-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.02);
  }
  @media (min-width: 640px) {
    .contact-icon-ring {
      width: 52px;
      height: 52px;
      min-width: 52px;
    }
  }

  .contact-cta-btn {
    background: linear-gradient(135deg, #D4A044 0%, #E87C4F 100%);
    color: #2A2A2A;
    transition: all 0.3s;
    border: none;
  }
  .contact-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 160, 68, 0.35);
  }

  .map-container {
    border: 1px solid rgba(212, 160, 68, 0.15);
    overflow: hidden;
    background: #0a0a0a;
  }
  .map-container iframe {
    display: block;
    filter: saturate(0.6) brightness(0.8) contrast(1.1);
    transition: filter 0.4s;
  }
  .map-container:hover iframe {
    filter: saturate(1) brightness(1) contrast(1);
  }

  /* TRIBAL PATTERN */
  .tribal-pattern {
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 30px,
      rgba(212, 160, 68, 0.06) 30px,
      rgba(212, 160, 68, 0.06) 31px
    );
  }

  /* WHATSAPP FLOAT */
  .whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    width: 60px;
    height: 60px;
    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 2s ease-in-out infinite;
    transition: transform 0.3s;
  }
  .whatsapp-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 35px rgba(37, 211, 102, 0.7), 0 0 0 12px rgba(37, 211, 102, 0.1); }
  }

  /* SCROLL REVEAL */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
</style>