<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>Sobre Nosotros — Inkdigena Tattoo Art Gallery Shop</title>
  <meta name="description" content="Conoce la historia y filosofía de Inkdigena Tattoo Art Gallery Shop. Arte ancestral, cultura costarricense y pasión por el tatuaje.">
</svelte:head>

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

  let scrollY = $state(0);
  let mobileMenuOpen = $state(false);
  let navSolid = $derived(scrollY > 80);

  const values = [
    {
      title: "Arte Ancestral",
      description: "Cada diseño nace de una profunda conexión con las raíces precolombinas y la riqueza cultural de Costa Rica.",
      icon: "◈",
      color: "#D4A044"
    },
    {
      title: "Excelencia Técnica",
      description: "Utilizamos las mejores técnicas y equipos para garantizar resultados impecables, seguros y duraderos.",
      icon: "✦",
      color: "#D64B8A"
    },
    {
      title: "Expresión Única",
      description: "Creemos que cada persona merece un arte que cuente su propia historia — nunca repetimos un diseño.",
      icon: "❋",
      color: "#2A8C7A"
    },
    {
      title: "Comunidad Artística",
      description: "Fomentamos el arte local participando en festivales, exhibiciones y colaboraciones con artistas de toda la región.",
      icon: "✧",
      color: "#E87C4F"
    }
  ];

  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.1, rootMargin: '0px 0px -40px 0px' }
    );

    document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

    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>

    <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 nav-link-active 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>

    <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>

  {#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-gold" 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 ABOUT -->
<section class="min-h-[60vh] sm:min-h-[70vh] relative flex items-end overflow-hidden">
  <img src="/gallery/14.jpg" alt="Mural artístico de Inkdigena" class="absolute inset-0 w-full h-full object-cover">
  <div class="about-hero-overlay absolute inset-0"></div>
  <div class="grain-overlay absolute inset-0"></div>

  <div class="relative z-10 max-w-5xl mx-auto px-5 sm:px-8 pb-14 sm:pb-24 pt-32">
    <div class="reveal">
      <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-4">Nuestra Historia</span>
      <h1 class="font-dancing text-5xl sm:text-7xl md:text-8xl text-white mb-4" style="text-shadow: 0 4px 40px rgba(0,0,0,0.5);">
        Sobre Nosotros
      </h1>
      <div class="flex items-center gap-4">
        <span class="h-px w-16 sm:w-24 bg-gold opacity-60"></span>
        <span class="font-playfair italic text-white/70 text-lg sm:text-xl">El arte que nos define</span>
      </div>
    </div>
  </div>
</section>

<!-- STORY SECTION -->
<section class="py-14 sm:py-24 bg-navy relative">
  <div class="absolute inset-0 opacity-5">
    <div class="tribal-pattern"></div>
  </div>
  <div class="max-w-6xl mx-auto px-5 sm:px-8 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 sm:gap-16 items-center">
      <div class="lg:col-span-3 reveal">
        <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-6">Quiénes Somos</span>
        <h2 class="font-bebas text-3xl sm:text-5xl text-white tracking-wide uppercase mb-8">Más Que Un Estudio de Tatuajes</h2>

        <div class="space-y-6">
          <p class="font-montserrat text-white/70 text-base sm:text-lg leading-relaxed">
            <strong class="text-gold">Inkdigena Tattoo Art Gallery Shop</strong> nació de la pasión por fusionar el arte ancestral costarricense con las técnicas contemporáneas del tatuaje. Somos un espacio donde las raíces precolombinas, la riqueza de la naturaleza tropical y la expresión artística moderna convergen.
          </p>
          <p class="font-montserrat text-white/70 text-base sm:text-lg leading-relaxed">
            Nuestro estudio es mucho más que un lugar para tatuarse — es una <em class="text-magenta not-italic">galería viva</em>, un refugio creativo donde cada obra, ya sea sobre piel o lienzo, cuenta la historia de nuestra tierra: sus jaguares, colibríes, orquídeas y los misterios de las civilizaciones que nos precedieron.
          </p>
          <p class="font-montserrat text-white/70 text-base sm:text-lg leading-relaxed">
            Participamos activamente en la escena artística costarricense, llevando nuestra visión a festivales como el <strong class="text-coral">Art Fest Costa Rica</strong>, donde compartimos el poder transformador del arte con comunidades de todo el país.
          </p>
        </div>
      </div>

      <div class="lg:col-span-2 reveal" style="animation-delay: 0.2s;">
        <div class="about-image-stack">
          <img src="/gallery/10.jpg" alt="Colibrí — arte original" class="about-img-main" loading="lazy">
          <img src="/gallery/15.jpg" alt="Orquídea precolombina" class="about-img-accent" loading="lazy">
          <div class="about-img-badge">
            <div class="conic-badge-sm">
              <div class="badge-inner-sm">
                <span class="font-bebas text-white text-[10px] tracking-[0.2em] uppercase">CR</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- EDITORIAL QUOTE -->
<section class="py-14 sm:py-20 bg-off-dark relative overflow-hidden">
  <div class="grain-overlay absolute inset-0"></div>
  <div class="max-w-4xl mx-auto px-5 sm:px-8 text-center relative z-10 reveal">
    <span class="text-gold text-4xl block mb-6">✦</span>
    <blockquote class="font-playfair italic text-2xl sm:text-4xl md:text-5xl text-white/90 leading-tight mb-8">
      "Cada trazo lleva la memoria de nuestros ancestros y la energía del trópico"
    </blockquote>
    <p class="font-montserrat text-white/40 text-sm tracking-wider uppercase">— Filosofía Inkdigena</p>
  </div>
</section>

<!-- VALUES -->
<section class="py-14 sm:py-24 bg-navy relative">
  <div class="max-w-7xl mx-auto px-5 sm:px-8">
    <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 Nos Mueve</span>
      <h2 class="font-bebas text-4xl sm:text-6xl md:text-7xl text-white tracking-wide uppercase">Nuestros Valores</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="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8">
      {#each values as val, i}
        <div class="value-card reveal" style="animation-delay: {i * 0.12}s;">
          <div class="value-accent" style="background: {val.color};"></div>
          <div class="p-6 sm:p-10">
            <div class="flex items-start gap-4 sm:gap-6">
              <span class="text-4xl sm:text-5xl" style="color: {val.color}; line-height: 1;">{val.icon}</span>
              <div>
                <h3 class="font-bebas text-xl sm:text-2xl tracking-wider uppercase text-white mb-3">{val.title}</h3>
                <p class="font-montserrat text-sm sm:text-base text-white/60 leading-relaxed">{val.description}</p>
              </div>
            </div>
          </div>
        </div>
      {/each}
    </div>
  </div>
</section>

<!-- ART SHOWCASE -->
<section class="relative">
  <div class="grid grid-cols-1 sm:grid-cols-3">
    <div class="relative aspect-square sm:aspect-auto overflow-hidden">
      <img src="/gallery/7.jpg" alt="Arte geométrico" class="w-full h-full object-cover about-showcase-img" loading="lazy">
    </div>
    <div class="relative aspect-square sm:aspect-auto overflow-hidden">
      <img src="/gallery/13.jpg" alt="Mujer mariposa" class="w-full h-full object-cover about-showcase-img" loading="lazy">
    </div>
    <div class="relative aspect-square sm:aspect-auto overflow-hidden">
      <img src="/gallery/12.jpg" alt="Arte abstracto con componentes" class="w-full h-full object-cover about-showcase-img" loading="lazy">
    </div>
  </div>
  <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
    <div class="bg-navy/80 backdrop-blur-sm px-8 sm:px-16 py-6 sm:py-10 text-center">
      <span class="font-bebas text-gold text-xs tracking-[0.5em] uppercase block mb-2">Arte en cada forma</span>
      <h3 class="font-dancing text-3xl sm:text-5xl text-white">Piel, Lienzo y Mural</h3>
    </div>
  </div>
</section>

<!-- CTA SECTION -->
<section class="py-14 sm:py-24 bg-off-dark relative">
  <div class="grain-overlay absolute inset-0"></div>
  <div class="max-w-3xl mx-auto px-5 sm:px-8 text-center relative z-10">
    <div class="reveal">
      <div class="conic-badge mx-auto mb-8">
        <div class="badge-inner">
          <span class="font-bebas text-white text-xs tracking-[0.3em] uppercase">Ink</span>
        </div>
      </div>

      <h2 class="font-bebas text-3xl sm:text-5xl md:text-6xl text-white tracking-wide uppercase mb-6">
        ¿Listo Para Tu Próxima Pieza?
      </h2>
      <p class="font-playfair italic text-white/60 text-lg sm:text-xl mb-10 max-w-xl mx-auto">
        Cada tatuaje es una colaboración entre artista y cliente. Conversemos sobre tu visión.
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
        <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="cta-btn-primary font-bebas text-base sm:text-lg tracking-widest uppercase px-10 py-4 w-full sm:w-auto text-center">
          Escribir por WhatsApp
        </a>
        <a href="/" class="cta-btn-secondary font-bebas text-base sm:text-lg tracking-widest uppercase px-10 py-4 w-full sm:w-auto text-center">
          Ver Galería
        </a>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="bg-navy border-t border-white/5 py-12 sm:py-16 relative">
  <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 gap-6 mb-8">
        <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">|</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">|</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">|</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">|</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(body) {
    background-color: #111827;
  }

  .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; }
  .text-gold { color: #D4A044; }
  .text-magenta { color: #D64B8A; }
  .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, .nav-link-active { 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-link-active::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-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); }
  }

  /* ABOUT HERO */
  .about-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(30, 30, 30, 0.4) 0%,
      rgba(30, 30, 30, 0.6) 40%,
      rgba(42, 42, 42, 0.95) 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;
  }

  /* IMAGE STACK */
  .about-image-stack {
    position: relative;
    padding: 1rem;
  }
  .about-img-main {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border: 2px solid rgba(212, 160, 68, 0.2);
    position: relative;
    z-index: 1;
  }
  .about-img-accent {
    position: absolute;
    bottom: -1rem;
    right: -0.5rem;
    width: 45%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid rgba(214, 75, 138, 0.3);
    z-index: 2;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  .about-img-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }

  .conic-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#D64B8A, #E87C4F, #D4A044, #2A8C7A, #9B7EC8, #D64B8A);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgeSpin 20s linear infinite;
    padding: 3px;
  }
  @media (min-width: 640px) {
    .conic-badge { width: 120px; height: 120px; padding: 4px; }
  }
  .badge-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .conic-badge-sm {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(#D64B8A, #E87C4F, #D4A044, #2A8C7A, #9B7EC8, #D64B8A);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgeSpin 15s linear infinite;
    padding: 2px;
  }
  .badge-inner-sm {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1E1E1E;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @keyframes badgeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* VALUES */
  .value-card {
    background: rgba(42, 42, 42, 0.4);
    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);
  }
  .value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 160, 68, 0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  }
  .value-accent {
    height: 3px;
    width: 100%;
  }

  /* SHOWCASE */
  .about-showcase-img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .about-showcase-img:hover {
    transform: scale(1.05);
  }

  /* 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
    );
  }

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

  /* 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>