<svelte:head>
  <title>Seidoor – Servicio Técnico de Montacargas</title>
  <meta name="description" content="Especialistas en mantenimiento y reparación de montacargas y apiladores eléctricos en Costa Rica. 8 años de experiencia." />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Exo+2:wght@300;400;500;600&display=swap" rel="stylesheet" />
</svelte:head>

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

  let menuOpen = $state(false);
  let navSolid = $state(false);
  let galleryOpen = $state(false);
  let activeImg = $state('');

  const services = [
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/><path d="M12 6v6l4 2"/></svg>`,
      name: 'Mantenimiento Preventivo',
      label: 'Toyota · Yale · Raymond · Komatsu',
      desc: 'Servicio periódico de mantenimiento preventivo para montacargas de marcas líderes. Incluye inspección de sistemas mecánicos, eléctricos y de frenos para garantizar operación segura y eficiente.',
      img: '/gallery/3.jpg'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>`,
      name: 'Reparación y Servicio Correctivo',
      label: 'Diagnóstico Integral',
      desc: 'Diagnóstico y reparación integral de montacargas y apiladores eléctricos con fallas mecánicas o eléctricas. Intervención especializada en motores, cableado, frenos de tambor y chasis.',
      img: '/gallery/10.jpg'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg>`,
      name: 'Restauración y Pintura',
      label: 'Acabados Industriales',
      desc: 'Servicio de restauración completa de montacargas industriales, incluyendo preparación de superficie, pintura y acabados del chasis. Prolonga la vida útil y mantiene imagen profesional.',
      img: '/gallery/13.jpg'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>`,
      name: 'Servicio a Apiladores Eléctricos',
      label: 'Almacenes y Bodegas',
      desc: 'Mantenimiento y reparación especializada en apiladores eléctricos. Revisión de sistemas de elevación, componentes eléctricos y baterías para rendimiento óptimo en almacenes.',
      img: '/gallery/12.jpg'
    },
    {
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/></svg>`,
      name: 'Venta e Instalación de Llantas',
      label: 'Llantas Industriales',
      desc: 'Venta y servicio de instalación de llantas para montacargas y equipo industrial. Llantas sólidas y neumáticas de todas las medidas para garantizar tracción y seguridad en su operación.',
      img: '/gallery/11.jpg'
    }
  ];

  const galleryImages = [
    { src: '/gallery/2.jpg', alt: 'Montacargas Komatsu en reparación' },
    { src: '/gallery/3.jpg', alt: 'Montacargas en mantenimiento técnico' },
    { src: '/gallery/4.jpg', alt: 'Montacargas Raymond en bodega industrial' },
    { src: '/gallery/5.jpg', alt: 'Montacargas Yale en bodega' },
    { src: '/gallery/7.jpg', alt: 'Montacargas Toyota en patio industrial' },
  ];

  const waUrl = 'https://wa.me/50683097441?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios.';

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

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(el => {
        if (el.isIntersecting) {
          el.target.classList.add('revealed');
        }
      });
    }, { threshold: 0.12 });

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

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

  function openGallery(src) {
    activeImg = src;
    galleryOpen = true;
  }

  function closeGallery() {
    galleryOpen = false;
    activeImg = '';
  }
</script>

<!-- NAV -->
<nav class={navSolid ? 'nav-bar nav-solid' : 'nav-bar'}>
  <div class="nav-inner">
    <a href="/" class="nav-logo">
      <img src="/logo.png" alt="Seidoor" class="h-16 w-auto" />
    </a>
    <div class="nav-links">
      <a href="/" class="nav-link active-link">Inicio</a>
      <a href="/about" class="nav-link">Nosotros</a>
      <a href="#servicios" class="nav-link">Servicios</a>
      <a href="#galeria" class="nav-link">Galería</a>
      <a href="#contacto" class="nav-link">Contacto</a>
      <a href={waUrl} target="_blank" rel="noopener" class="nav-cta">WhatsApp</a>
    </div>
    <button class="hamburger" onclick={() => menuOpen = !menuOpen} aria-label="Menú">
      <span class={menuOpen ? 'bar bar-top open' : 'bar bar-top'}></span>
      <span class={menuOpen ? 'bar bar-mid open' : 'bar bar-mid'}></span>
      <span class={menuOpen ? 'bar bar-bot open' : 'bar bar-bot'}></span>
    </button>
  </div>
  {#if menuOpen}
    <div class="mobile-menu">
      <a href="/" class="mob-link" onclick={() => menuOpen = false}>Inicio</a>
      <a href="/about" class="mob-link" onclick={() => menuOpen = false}>Nosotros</a>
      <a href="#servicios" class="mob-link" onclick={() => menuOpen = false}>Servicios</a>
      <a href="#galeria" class="mob-link" onclick={() => menuOpen = false}>Galería</a>
      <a href="#contacto" class="mob-link" onclick={() => menuOpen = false}>Contacto</a>
      <a href={waUrl} target="_blank" rel="noopener" class="mob-cta">WhatsApp</a>
    </div>
  {/if}
</nav>

<!-- HERO -->
<section class="hero min-h-screen-ios">
  <video class="hero-video hidden sm:block" autoplay muted loop playsinline>
    <source src="/hero-bg.mp4" type="video/mp4" />
  </video>
  <video class="hero-video sm:hidden" autoplay muted loop playsinline>
    <source src="/hero-bg-mobile.mp4" type="video/mp4" />
  </video>
  <div class="hero-overlay"></div>
  <div class="hero-grid-overlay"></div>

  <!-- Gear watermark — purely decorative, clipped to hero -->
  <div class="gear-watermark" aria-hidden="true">
    <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M100 60a40 40 0 100 80 40 40 0 000-80z" stroke="#D4C832" stroke-width="1.5" opacity="0.15"/>
      <line x1="100" y1="10" x2="100" y2="30" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="100" y1="170" x2="100" y2="190" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="10" y1="100" x2="30" y2="100" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="170" y1="100" x2="190" y2="100" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="25.15" y1="25.15" x2="39.29" y2="39.29" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="160.71" y1="160.71" x2="174.85" y2="174.85" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="25.15" y1="174.85" x2="39.29" y2="160.71" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <line x1="160.71" y1="39.29" x2="174.85" y2="25.15" stroke="#D4C832" stroke-width="2" opacity="0.12"/>
      <circle cx="100" cy="100" r="90" stroke="#D4C832" stroke-width="0.5" opacity="0.1"/>
      <circle cx="100" cy="100" r="70" stroke="#D4C832" stroke-width="0.5" opacity="0.08"/>
    </svg>
  </div>

  <div class="hero-content">
    <div class="hero-badge reveal">
      <span class="badge-line"></span>
      <span class="badge-text">8 AÑOS EN EL MERCADO</span>
      <span class="badge-line"></span>
    </div>
    <h1 class="hero-title reveal">
      <span class="title-main">SEIDOOR</span>
      <span class="title-sub">Servicio Técnico Industrial</span>
    </h1>
    <p class="hero-tagline reveal">8 años manteniendo tu maquinaria en marcha.</p>
    <div class="hero-actions reveal">
      <a href={waUrl} target="_blank" rel="noopener" class="btn-primary">
        <svg viewBox="0 0 24 24" fill="currentColor" class="btn-icon" aria-hidden="true">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
          <path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
        </svg>
        Contactar por WhatsApp
      </a>
      <a href="tel:50683097441" class="btn-secondary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-icon" aria-hidden="true">
          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.8 11.5a19.79 19.79 0 01-3.07-8.67A2 2 0 012.7 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.73a16 16 0 006.29 6.29l1.1-1.1a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>
        </svg>
        Llamar Ahora
      </a>
    </div>
    <div class="hero-stats reveal">
      <div class="stat">
        <span class="stat-num">8</span>
        <span class="stat-label">Años en el Mercado</span>
      </div>
      <div class="stat-divider"></div>
      <div class="stat">
        <span class="stat-num">✓</span>
        <span class="stat-label">Todas las Marcas</span>
      </div>
      <div class="stat-divider"></div>
      <div class="stat">
        <span class="stat-num">100%</span>
        <span class="stat-label">Compromiso Técnico</span>
      </div>
    </div>
  </div>

  <div class="scroll-hint" aria-hidden="true">
    <span class="scroll-text">SCROLL</span>
    <div class="scroll-bar"></div>
  </div>
</section>

<!-- SAWTOOTH DIVIDER -->
<div class="sawtooth-divider" aria-hidden="true">
  <svg viewBox="0 0 1440 40" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,40 L0,20 L40,0 L80,20 L120,0 L160,20 L200,0 L240,20 L280,0 L320,20 L360,0 L400,20 L440,0 L480,20 L520,0 L560,20 L600,0 L640,20 L680,0 L720,20 L760,0 L800,20 L840,0 L880,20 L920,0 L960,20 L1000,0 L1040,20 L1080,0 L1120,20 L1160,0 L1200,20 L1240,0 L1280,20 L1320,0 L1360,20 L1400,0 L1440,20 L1440,40 Z" fill="#2A2A2A"/>
  </svg>
</div>

<!-- SERVICES SECTION -->
<section id="servicios" class="section-services">
  <div class="section-header reveal">
    <div class="section-label">NUESTROS SERVICIOS</div>
    <h2 class="section-title">Soluciones Técnicas<br/>Especializadas</h2>
    <div class="title-underline"></div>
  </div>

  <div class="services-grid">
    {#each services as svc, i}
      <div class="service-card reveal" style="animation-delay: {i * 80}ms">
        <div class="card-top">
          <div class="card-img-wrap">
            <img src={svc.img} alt={svc.name} class="card-img" loading="lazy" />
            <div class="card-img-overlay"></div>
          </div>
          <div class="service-icon">
            {@html svc.icon}
          </div>
        </div>
        <div class="card-body">
          <div class="card-label">{svc.label}</div>
          <h3 class="card-title">{svc.name}</h3>
          <p class="card-desc">{svc.desc}</p>
        </div>
        <div class="card-footer">
          <a href={waUrl} target="_blank" rel="noopener" class="card-cta">
            Solicitar Servicio
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="arrow-icon" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </a>
        </div>
      </div>
    {/each}
  </div>
</section>

<!-- SAWTOOTH DIVIDER 2 -->
<div class="sawtooth-divider-flip" aria-hidden="true">
  <svg viewBox="0 0 1440 40" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0,0 L0,20 L40,40 L80,20 L120,40 L160,20 L200,40 L240,20 L280,40 L320,20 L360,40 L400,20 L440,40 L480,20 L520,40 L560,20 L600,40 L640,20 L680,40 L720,20 L760,40 L800,20 L840,40 L880,20 L920,40 L960,20 L1000,40 L1040,20 L1080,40 L1120,20 L1160,40 L1200,20 L1240,40 L1280,20 L1320,40 L1360,20 L1400,40 L1440,20 L1440,0 Z" fill="#1A1A1A"/>
  </svg>
</div>

<!-- GALLERY SECTION -->
<section id="galeria" class="section-gallery">
  <div class="section-header reveal">
    <div class="section-label">NUESTRO TRABAJO</div>
    <h2 class="section-title">Galería de Proyectos</h2>
    <div class="title-underline"></div>
  </div>

  <div class="gallery-grid">
    {#each galleryImages as img, i}
      <button
        class="gallery-item reveal"
        style="animation-delay: {i * 100}ms"
        onclick={() => openGallery(img.src)}
        aria-label="Ver imagen: {img.alt}"
      >
        <img src={img.src} alt={img.alt} class="gallery-img" loading="lazy" />
        <div class="gallery-overlay">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="zoom-icon" aria-hidden="true">
            <circle cx="11" cy="11" r="8"/>
            <path d="M21 21l-4.35-4.35"/>
            <path d="M11 8v6M8 11h6"/>
          </svg>
          <span class="gallery-caption">{img.alt}</span>
        </div>
      </button>
    {/each}
  </div>
</section>

<!-- LIGHTBOX -->
{#if galleryOpen}
  <div class="lightbox" onclick={closeGallery} role="dialog" aria-modal="true">
    <button class="lb-close" onclick={closeGallery} aria-label="Cerrar">✕</button>
    <img src={activeImg} alt="Vista ampliada" class="lb-img" onclick={(e) => e.stopPropagation()} />
  </div>
{/if}

<!-- CONTACT SECTION -->
<section id="contacto" class="section-contact">
  <div class="section-header reveal">
    <div class="section-label">CONTÁCTENOS</div>
    <h2 class="section-title">Hablemos de su<br/>Maquinaria</h2>
    <div class="title-underline"></div>
  </div>

  <div class="contact-grid">
    <div class="contact-info reveal">
      <div class="contact-card">
        <div class="contact-item">
          <div class="contact-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.8 11.5a19.79 19.79 0 01-3.07-8.67A2 2 0 012.7 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.73a16 16 0 006.29 6.29l1.1-1.1a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>
            </svg>
          </div>
          <div>
            <div class="contact-label">Teléfono</div>
            <a href="tel:50683097441" class="contact-value">+506 8309-7441</a>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-icon contact-icon-green">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
              <path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
            </svg>
          </div>
          <div>
            <div class="contact-label">WhatsApp</div>
            <a href={waUrl} target="_blank" rel="noopener" class="contact-value">Enviar mensaje</a>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
              <circle cx="12" cy="10" r="3"/>
            </svg>
          </div>
          <div>
            <div class="contact-label">Ubicación</div>
            <span class="contact-value-plain">Costa Rica</span>
          </div>
        </div>
      </div>

      <div class="contact-cta-box">
        <p class="cta-box-text">¿Su maquinaria necesita mantenimiento? Contáctenos hoy y reciba atención técnica especializada.</p>
        <a href={waUrl} target="_blank" rel="noopener" class="btn-primary">
          <svg viewBox="0 0 24 24" fill="currentColor" class="btn-icon" aria-hidden="true">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
            <path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
          </svg>
          Escribir por WhatsApp
        </a>
      </div>
    </div>

    <div class="map-wrap reveal">
      <div class="map-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="#D4C832" stroke-width="2" class="map-icon-hdr" aria-hidden="true">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
          <circle cx="12" cy="10" r="3"/>
        </svg>
        <span>Costa Rica</span>
      </div>
      <iframe
        src="https://maps.google.com/maps?q=Costa%20Rica&output=embed"
        width="100%"
        height="300"
        style="border:0"
        loading="lazy"
        title="Ubicación Seidoor Costa Rica"
      ></iframe>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer">
  <div class="footer-inner">
    <div class="footer-logo">
      <img src="/logo.png" alt="Seidoor" class="h-12 w-auto" />
    </div>
    <div class="footer-tagline">8 años manteniendo tu maquinaria en marcha.</div>
    <div class="footer-links">
      <a href="/" class="footer-link">Inicio</a>
      <a href="/about" class="footer-link">Nosotros</a>
      <a href="#servicios" class="footer-link">Servicios</a>
      <a href="#galeria" class="footer-link">Galería</a>
      <a href="#contacto" class="footer-link">Contacto</a>
    </div>
    <div class="footer-bottom">
      <span class="footer-copy">© 2024 Seidoor. Todos los derechos reservados.</span>
      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs opacity-40 hover:opacity-70 transition-opacity" style="color:#B8B8B0">Hecho por digitalmar.dev</a>
    </div>
  </div>
</footer>

<!-- FLOATING WHATSAPP -->
<a href={waUrl} target="_blank" rel="noopener" class="whatsapp-float" aria-label="WhatsApp">
  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.117.549 4.107 1.51 5.84L.057 23.049a.75.75 0 00.921.921l5.21-1.453A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.716 9.716 0 01-4.946-1.352l-.355-.212-3.668 1.023 1.023-3.668-.212-.355A9.716 9.716 0 012.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
  </svg>
  <span class="wa-pulse"></span>
</a>

<style>
  :global(body) {
    background: #2A2A2A;
    color: #B8B8B0;
    font-family: 'Exo 2', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  :global(.reveal) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  :global(.revealed) {
    opacity: 1;
    transform: translateY(0);
  }

  /* NAV */
  .nav-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background 0.4s, box-shadow 0.4s;
  }
  .nav-solid {
    background: rgba(26, 26, 26, 0.97);
    box-shadow: 0 2px 0 #D4C832;
    backdrop-filter: blur(10px);
  }
  .nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
  }
  .nav-links {
    display: none;
    gap: 0.25rem;
    align-items: center;
  }
  @media (min-width: 768px) {
    .nav-links { display: flex; }
  }
  .nav-link {
    color: #B8B8B0;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s;
  }
  .nav-link:hover, .active-link { color: #D4C832; }
  .nav-cta {
    background: #D4C832;
    color: #1A1A1A;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 1.25rem;
    margin-left: 0.5rem;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover {
    background: #ede34e;
    box-shadow: 0 0 12px rgba(212,200,50,0.4);
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  @media (min-width: 768px) { .hamburger { display: none; } }
  .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #B8B8B0;
    transition: transform 0.3s, opacity 0.3s;
  }
  .bar-top.open { transform: translateY(7px) rotate(45deg); background: #D4C832; }
  .bar-mid.open { opacity: 0; }
  .bar-bot.open { transform: translateY(-7px) rotate(-45deg); background: #D4C832; }
  .mobile-menu {
    background: #1A1A1A;
    border-top: 1px solid #D4C832;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 1.5rem;
    gap: 0.25rem;
  }
  .mob-link {
    color: #B8B8B0;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(107,107,99,0.3);
    transition: color 0.2s;
  }
  .mob-link:hover { color: #D4C832; }
  .mob-cta {
    background: #D4C832;
    color: #1A1A1A;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.875rem;
    text-align: center;
    margin-top: 0.75rem;
    transition: background 0.2s;
  }

  /* HERO */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* clip children so gear watermark never causes horizontal scroll */
    overflow: hidden;
    background: #1A1A1A;
  }
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.4) 50%, rgba(42,42,42,0.9) 100%);
    z-index: 1;
  }
  .hero-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
      linear-gradient(rgba(212,200,50,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212,200,50,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
  }

  /* Gear watermark — contained strictly inside the hero */
  .gear-watermark {
    position: absolute;
    /* size relative to the viewport so it never exceeds hero width */
    width: min(80vw, 500px);
    height: min(80vw, 500px);
    top: 50%;
    left: 50%;
    /* use margin trick instead of translate so it doesn't push layout */
    margin-left: calc(min(80vw, 500px) / -2);
    margin-top: calc(min(80vw, 500px) / -2);
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    animation: gear-spin 60s linear infinite;
    /* never let it escape the hero box */
    max-width: 100%;
  }
  .gear-watermark svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  @keyframes gear-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 5rem 1.25rem 3rem;
    max-width: 860px;
    width: 100%;
  }
  .hero-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .badge-line {
    display: block;
    height: 1px;
    width: 40px;
    background: #D4C832;
    flex-shrink: 0;
  }
  .badge-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: #D4C832;
    white-space: nowrap;
  }
  .hero-title {
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .title-main {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 12vw, 8rem);
    letter-spacing: 0.2em;
    line-height: 1;
    background: linear-gradient(145deg, #6B6B63, #D4D4CC, #B8B8B0, #6B6B63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .title-sub {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: clamp(0.75rem, 2.5vw, 1.1rem);
    letter-spacing: 0.2em;
    color: #6B6B63;
    text-transform: uppercase;
  }
  .hero-tagline {
    font-family: 'Exo 2', sans-serif;
    font-size: clamp(1rem, 3vw, 1.4rem);
    color: #D4D4CC;
    margin: 0 0 2.5rem;
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #D4C832;
    color: #1A1A1A;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.875rem 2rem;
    border: 2px solid #D4C832;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    min-height: 44px;
  }
  .btn-primary:hover {
    background: #ede34e;
    box-shadow: 0 0 20px rgba(212,200,50,0.4);
    transform: translateY(-2px);
  }
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #B8B8B0;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.875rem 2rem;
    border: 2px solid #6B6B63;
    transition: border-color 0.2s, color 0.2s, transform 0.2s;
    min-height: 44px;
  }
  .btn-secondary:hover {
    border-color: #B8B8B0;
    color: #D4D4CC;
    transform: translateY(-2px);
  }
  .btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
  .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid rgba(107,107,99,0.5);
    max-width: 560px;
    margin: 0 auto;
    background: rgba(26,26,26,0.7);
    backdrop-filter: blur(6px);
  }
  .stat {
    flex: 1;
    min-width: 100px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .stat-num {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #D4C832;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B6B63;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    text-align: center;
  }
  .stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(107,107,99,0.5);
    flex-shrink: 0;
  }
  .scroll-hint {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  @media (min-width: 640px) { .scroll-hint { display: flex; } }
  .scroll-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: #6B6B63;
    writing-mode: vertical-rl;
  }
  .scroll-bar {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, #D4C832, transparent);
    animation: scroll-pulse 2s ease-in-out infinite;
  }
  @keyframes scroll-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6) translateY(-10px); }
    50% { opacity: 1; transform: scaleY(1) translateY(0); }
  }

  /* SAWTOOTH DIVIDERS */
  .sawtooth-divider {
    background: #1A1A1A;
    line-height: 0;
    margin-top: -2px;
    overflow: hidden;
  }
  .sawtooth-divider svg { width: 100%; height: 40px; display: block; }
  .sawtooth-divider-flip {
    background: #2A2A2A;
    line-height: 0;
    margin-bottom: -2px;
    overflow: hidden;
  }
  .sawtooth-divider-flip svg { width: 100%; height: 40px; display: block; }

  /* SECTION COMMON */
  .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  .section-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #D4C832;
    margin-bottom: 0.75rem;
  }
  .section-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1.15;
    background: linear-gradient(145deg, #6B6B63, #D4D4CC, #B8B8B0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .title-underline {
    width: 60px;
    height: 3px;
    background: #D4C832;
    margin: 0 auto;
  }

  /* SERVICES */
  .section-services {
    background: #2A2A2A;
    padding: 4rem 1.25rem;
  }
  @media (min-width: 640px) {
    .section-services { padding: 5rem 2rem; }
  }
  .services-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 640px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .service-card {
    background: #1A1A1A;
    border: 1px solid #6B6B63;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.6), -1px -1px 3px rgba(212,212,204,0.05);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    overflow: hidden;
  }
  .service-card:hover {
    border-color: #D4C832;
    box-shadow: 0 0 20px rgba(212,200,50,0.15), 2px 2px 6px rgba(0,0,0,0.6);
    transform: translateY(-4px);
  }
  .card-top {
    position: relative;
    height: 180px;
    overflow: hidden;
  }
  .card-img-wrap {
    position: absolute;
    inset: 0;
  }
  .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    filter: grayscale(30%) brightness(0.7);
  }
  .service-card:hover .card-img {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(0.85);
  }
  .card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, #1A1A1A 100%);
  }
  .service-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    color: #D4C832;
    background: rgba(26,26,26,0.8);
    border: 1px solid #D4C832;
    padding: 0.5rem;
    box-sizing: border-box;
  }
  .card-body {
    padding: 1.25rem 1.25rem 0.75rem;
    flex: 1;
  }
  .card-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #D4C832;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
  }
  .card-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4D4CC;
    margin: 0 0 0.75rem;
    line-height: 1.25;
  }
  .card-desc {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: #6B6B63;
    line-height: 1.65;
    margin: 0;
  }
  .card-footer {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(107,107,99,0.3);
    margin-top: 0.75rem;
  }
  .card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #D4C832;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: gap 0.2s, color 0.2s;
  }
  .card-cta:hover { gap: 0.75rem; color: #ede34e; }
  .arrow-icon { width: 16px; height: 16px; }

  /* GALLERY */
  .section-gallery {
    background: #1A1A1A;
    padding: 4rem 1.25rem;
  }
  @media (min-width: 640px) {
    .section-gallery { padding: 5rem 2rem; }
  }
  .gallery-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 1px solid rgba(107,107,99,0.4);
    cursor: pointer;
    background: #2A2A2A;
    transition: border-color 0.3s;
    padding: 0;
    outline: none;
  }
  .gallery-item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16/7;
  }
  @media (min-width: 768px) {
    .gallery-item:first-child {
      grid-column: span 2;
      aspect-ratio: 4/3;
    }
  }
  .gallery-item:hover { border-color: #D4C832; }
  .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s, filter 0.5s;
    filter: grayscale(20%) brightness(0.8);
    display: block;
  }
  .gallery-item:hover .gallery-img {
    transform: scale(1.06);
    filter: grayscale(0%) brightness(1);
  }
  .gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,26,26,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .gallery-item:hover .gallery-overlay { opacity: 1; }
  .zoom-icon { width: 32px; height: 32px; color: #D4C832; }
  .gallery-caption {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: #B8B8B0;
    text-transform: uppercase;
    text-align: center;
    padding: 0 0.5rem;
  }

  /* LIGHTBOX */
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: pointer;
  }
  .lb-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(26,26,26,0.9);
    border: 1px solid #D4C832;
    color: #D4C832;
    font-size: 1.25rem;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: background 0.2s;
  }
  .lb-close:hover { background: #D4C832; color: #1A1A1A; }
  .lb-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border: 1px solid #D4C832;
    cursor: default;
  }

  /* CONTACT */
  .section-contact {
    background: #2A2A2A;
    padding: 4rem 1.25rem;
  }
  @media (min-width: 640px) {
    .section-contact { padding: 5rem 2rem; }
  }
  .contact-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  @media (min-width: 768px) {
    .contact-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  }
  .contact-card {
    background: #1A1A1A;
    border: 1px solid #6B6B63;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.6), -1px -1px 3px rgba(212,212,204,0.05);
  }
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(107,107,99,0.3);
  }
  .contact-item:last-child { border-bottom: none; }
  .contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(212,200,50,0.1);
    border: 1px solid rgba(212,200,50,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #D4C832;
  }
  .contact-icon svg { width: 20px; height: 20px; }
  .contact-icon-green {
    background: rgba(37,211,102,0.1);
    border-color: rgba(37,211,102,0.3);
    color: #25d366;
  }
  .contact-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6B6B63;
    margin-bottom: 0.25rem;
  }
  .contact-value {
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    color: #D4D4CC;
    text-decoration: none;
    transition: color 0.2s;
  }
  .contact-value:hover { color: #D4C832; }
  .contact-value-plain {
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    color: #D4D4CC;
  }
  .contact-cta-box {
    background: linear-gradient(135deg, rgba(212,200,50,0.08), rgba(212,200,50,0.02));
    border: 1px solid rgba(212,200,50,0.3);
    border-left: 3px solid #D4C832;
    padding: 1.5rem;
  }
  .cta-box-text {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    color: #B8B8B0;
    line-height: 1.6;
    margin: 0 0 1.25rem;
  }
  .map-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #6B6B63;
    background: #1A1A1A;
  }
  .map-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #D4C832;
    background: rgba(26,26,26,0.9);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    color: #B8B8B0;
  }
  .map-icon-hdr { width: 18px; height: 18px; flex-shrink: 0; }
  .map-wrap iframe { display: block; filter: grayscale(60%) invert(90%) brightness(0.85); }

  /* FOOTER */
  .footer {
    background: #1A1A1A;
    border-top: 2px solid #D4C832;
    padding: 3rem 1.25rem 2rem;
  }
  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .footer-tagline {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: #6B6B63;
    letter-spacing: 0.05em;
    font-style: italic;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: center;
  }
  .footer-link {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6B6B63;
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-link:hover { color: #D4C832; }
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid rgba(107,107,99,0.3);
    padding-top: 1.25rem;
    width: 100%;
  }
  .footer-copy {
    font-size: 0.75rem;
    color: #6B6B63;
    font-family: 'Exo 2', sans-serif;
  }

  /* FLOATING WHATSAPP */
  .whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
  }
  .whatsapp-float svg { width: 28px; height: 28px; position: relative; z-index: 1; }
  .whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,0.6);
  }
  .wa-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37,211,102,0.4);
    animation: wa-pulse 2.5s ease-out infinite;
  }
  @keyframes wa-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2); opacity: 0; }
  }
</style>