Add English as secondary language (ES/EN toggle)

- i18n translations file with all strings
- [[lang]] optional route param for /en and /en/about
- Language toggle button in nav, mobile drawer
- All pages fully translated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/lib/i18n.js

@@ -0,0 +1,225 @@
+export const translations = {
+  es: {
+    lang: 'es',
+    prefix: '',
+    meta: {
+      title: 'Inkdigena Tattoo Art Gallery Shop — Donde el arte ancestral cobra vida en tu piel',
+      description: 'Estudio de tatuajes y galería de arte en Costa Rica. Tatuajes personalizados, body piercing y arte original con influencia cultural costarricense y precolombina.',
+      aboutTitle: 'Sobre Nosotros — Inkdigena Tattoo Art Gallery Shop',
+      aboutDescription: 'Conoce la historia y filosofía de Inkdigena Tattoo Art Gallery Shop. Arte ancestral, cultura costarricense y pasión por el tatuaje.'
+    },
+    nav: {
+      inicio: 'Inicio',
+      servicios: 'Servicios',
+      galeria: 'Galería',
+      contacto: 'Contacto',
+      nosotros: 'Nosotros',
+      reservar: 'Reservar',
+      reservarCita: 'Reservar Cita',
+      filosofia: 'Filosofía'
+    },
+    hero: {
+      subtitle: 'Tattoo \u2022 Art Gallery \u2022 Shop',
+      tagline: 'Donde el arte ancestral cobra vida en tu piel',
+      cta: 'Agendar por WhatsApp',
+      ctaSecondary: 'Ver Portfolio'
+    },
+    philosophy: {
+      label: 'Nuestra Filosofía',
+      quote: '\u201CEl arte no se crea \u2014 se despierta de las raíces que llevamos dentro\u201D',
+      text: 'Somos un espacio donde las raíces precolombinas, la riqueza de la naturaleza tropical y la expresión artística moderna convergen. Cada pieza que creamos lleva la memoria de nuestros ancestros y la energía del trópico.'
+    },
+    services: {
+      label: 'Lo Que Hacemos',
+      title: 'SERVICIOS',
+      items: [
+        { num: '01', name: 'Tatuajes Personalizados', description: 'Diseño y ejecución de tatuajes en una amplia variedad de estilos: realismo en blanco y negro, color vibrante, lettering cursivo, estilo indígena-tribal y piezas de gran formato con un nivel de detalle excepcional.' },
+        { num: '02', name: 'Body Piercing', description: 'Servicio profesional de perforaciones corporales realizadas con técnicas seguras e higiénicas en un ambiente artístico.' },
+        { num: '03', name: 'Galería de Arte Original', description: 'Exhibición y venta de pinturas originales en lienzo con estilos abstractos, vibrantes y temáticas culturales costarricenses que incluyen colibríes, orquídeas, jaguares y motivos precolombinos.' },
+        { num: '04', name: 'Murales y Arte a Gran Escala', description: 'Creación de murales artísticos de gran formato con diseños detallados que combinan elementos de la naturaleza, cultura indígena y arte contemporáneo.' },
+        { num: '05', name: 'Eventos de Arte', description: 'Presencia activa en festivales y eventos artísticos como el Art Fest Costa Rica, donde se exhiben obras y se promueve el arte local.' }
+      ]
+    },
+    gallery: {
+      label: 'Portfolio',
+      title: 'GALERÍA',
+      hint: 'Desliza para explorar — toca para ampliar',
+      captions: [
+        'Águila y jaguar — estilo indígena',
+        'Búho floral — blanco y negro',
+        'Colibrí — pintura original',
+        'Orquídea a color',
+        'Orquídea precolombina',
+        'Libélula y flores abstractas',
+        'Perezoso tribal — pintura',
+        'Pulpo detallado',
+        'Mural artístico monumental',
+        'Lettering cursivo',
+        'Mujer mariposa — pintura',
+        'Arte geométrico abstracto',
+        'Diseño personalizado',
+        'Arte en tinta',
+        'Composición abstracta'
+      ]
+    },
+    contact: {
+      label: 'Hablemos',
+      title: 'CONTACTO',
+      whatsapp: 'WhatsApp',
+      telefono: 'Teléfono',
+      ubicacion: 'Ubicación',
+      pais: 'Costa Rica',
+      cta: 'Reservar Mi Cita'
+    },
+    footer: {
+      tagline: 'Donde el arte ancestral cobra vida en tu piel',
+      explorar: 'Explorar',
+      contacto: 'Contacto',
+      copyright: 'Inkdigena Tattoo Art Gallery Shop',
+      madeBy: 'Hecho por digitalmar.dev'
+    },
+    about: {
+      heroLabel: 'Nuestra Historia',
+      heroTitle: 'SOBRE',
+      heroTitle2: 'NOSOTROS',
+      heroSub: 'El arte que nos define',
+      storyLabel: 'Quiénes Somos',
+      storyTitle: 'Más Que Un Estudio de Tatuajes',
+      storyP1: '<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.',
+      storyP2: '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.',
+      storyP3: '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.',
+      quote: '\u201CCada trazo lleva la memoria de nuestros ancestros y la energía del trópico\u201D',
+      quoteSrc: '— Filosofía Inkdigena',
+      valuesLabel: 'Lo Que Nos Mueve',
+      valuesTitle: 'VALORES',
+      values: [
+        { num: 'I', 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.' },
+        { num: 'II', title: 'Excelencia Técnica', description: 'Utilizamos las mejores técnicas y equipos para garantizar resultados impecables, seguros y duraderos.' },
+        { num: 'III', title: 'Expresión Única', description: 'Creemos que cada persona merece un arte que cuente su propia historia — nunca repetimos un diseño.' },
+        { num: 'IV', title: 'Comunidad Artística', description: 'Fomentamos el arte local participando en festivales, exhibiciones y colaboraciones con artistas de toda la región.' }
+      ],
+      showcase: 'Piel \u2022 Lienzo \u2022 Mural',
+      ctaTitle: '¿Listo Para Tu',
+      ctaTitle2: 'Próxima Pieza?',
+      ctaSub: 'Cada tatuaje es una colaboración entre artista y cliente. Conversemos sobre tu visión.',
+      ctaBtn: 'Escribir por WhatsApp',
+      ctaBtn2: 'Ver Galería'
+    }
+  },
+  en: {
+    lang: 'en',
+    prefix: '/en',
+    meta: {
+      title: 'Inkdigena Tattoo Art Gallery Shop — Where ancestral art comes alive on your skin',
+      description: 'Tattoo studio and art gallery in Costa Rica. Custom tattoos, body piercing, and original art with Costa Rican and pre-Columbian cultural influence.',
+      aboutTitle: 'About Us — Inkdigena Tattoo Art Gallery Shop',
+      aboutDescription: 'Discover the story and philosophy of Inkdigena Tattoo Art Gallery Shop. Ancestral art, Costa Rican culture, and passion for tattooing.'
+    },
+    nav: {
+      inicio: 'Home',
+      servicios: 'Services',
+      galeria: 'Gallery',
+      contacto: 'Contact',
+      nosotros: 'About',
+      reservar: 'Book Now',
+      reservarCita: 'Book Appointment',
+      filosofia: 'Philosophy'
+    },
+    hero: {
+      subtitle: 'Tattoo \u2022 Art Gallery \u2022 Shop',
+      tagline: 'Where ancestral art comes alive on your skin',
+      cta: 'Book via WhatsApp',
+      ctaSecondary: 'View Portfolio'
+    },
+    philosophy: {
+      label: 'Our Philosophy',
+      quote: '\u201CArt is not created \u2014 it awakens from the roots we carry within\u201D',
+      text: 'We are a space where pre-Columbian roots, the richness of tropical nature, and modern artistic expression converge. Every piece we create carries the memory of our ancestors and the energy of the tropics.'
+    },
+    services: {
+      label: 'What We Do',
+      title: 'SERVICES',
+      items: [
+        { num: '01', name: 'Custom Tattoos', description: 'Design and execution of tattoos in a wide variety of styles: black and white realism, vibrant color, cursive lettering, indigenous-tribal, and large-format pieces with exceptional detail.' },
+        { num: '02', name: 'Body Piercing', description: 'Professional body piercing services performed with safe and hygienic techniques in an artistic environment.' },
+        { num: '03', name: 'Original Art Gallery', description: 'Exhibition and sale of original canvas paintings in abstract, vibrant styles and Costa Rican cultural themes including hummingbirds, orchids, jaguars, and pre-Columbian motifs.' },
+        { num: '04', name: 'Murals & Large-Scale Art', description: 'Creation of large-format artistic murals with detailed designs combining elements of nature, indigenous culture, and contemporary art.' },
+        { num: '05', name: 'Art Events', description: 'Active presence at art festivals and events like Art Fest Costa Rica, where we exhibit works and promote local art.' }
+      ]
+    },
+    gallery: {
+      label: 'Portfolio',
+      title: 'GALLERY',
+      hint: 'Swipe to explore — tap to enlarge',
+      captions: [
+        'Eagle and jaguar — indigenous style',
+        'Floral owl — black and white',
+        'Hummingbird — original painting',
+        'Color orchid',
+        'Pre-Columbian orchid',
+        'Dragonfly and abstract flowers',
+        'Tribal sloth — painting',
+        'Detailed octopus',
+        'Monumental artistic mural',
+        'Cursive lettering',
+        'Butterfly woman — painting',
+        'Abstract geometric art',
+        'Custom design',
+        'Ink art',
+        'Abstract composition'
+      ]
+    },
+    contact: {
+      label: "Let's Talk",
+      title: 'CONTACT',
+      whatsapp: 'WhatsApp',
+      telefono: 'Phone',
+      ubicacion: 'Location',
+      pais: 'Costa Rica',
+      cta: 'Book My Appointment'
+    },
+    footer: {
+      tagline: 'Where ancestral art comes alive on your skin',
+      explorar: 'Explore',
+      contacto: 'Contact',
+      copyright: 'Inkdigena Tattoo Art Gallery Shop',
+      madeBy: 'Made by digitalmar.dev'
+    },
+    about: {
+      heroLabel: 'Our Story',
+      heroTitle: 'ABOUT',
+      heroTitle2: 'US',
+      heroSub: 'The art that defines us',
+      storyLabel: 'Who We Are',
+      storyTitle: 'More Than a Tattoo Studio',
+      storyP1: '<strong class="text-gold">Inkdigena Tattoo Art Gallery Shop</strong> was born from the passion to fuse Costa Rican ancestral art with contemporary tattoo techniques. We are a space where pre-Columbian roots, the richness of tropical nature, and modern artistic expression converge.',
+      storyP2: 'Our studio is much more than a place to get tattooed — it is a <em class="text-magenta not-italic">living gallery</em>, a creative refuge where every work, whether on skin or canvas, tells the story of our land: its jaguars, hummingbirds, orchids, and the mysteries of the civilizations that preceded us.',
+      storyP3: 'We actively participate in the Costa Rican art scene, bringing our vision to festivals like <strong class="text-coral">Art Fest Costa Rica</strong>, where we share the transformative power of art with communities across the country.',
+      quote: '\u201CEvery stroke carries the memory of our ancestors and the energy of the tropics\u201D',
+      quoteSrc: '— Inkdigena Philosophy',
+      valuesLabel: 'What Drives Us',
+      valuesTitle: 'VALUES',
+      values: [
+        { num: 'I', title: 'Ancestral Art', description: 'Every design is born from a deep connection with pre-Columbian roots and the cultural richness of Costa Rica.' },
+        { num: 'II', title: 'Technical Excellence', description: 'We use the best techniques and equipment to guarantee impeccable, safe, and lasting results.' },
+        { num: 'III', title: 'Unique Expression', description: 'We believe every person deserves art that tells their own story — we never repeat a design.' },
+        { num: 'IV', title: 'Artistic Community', description: 'We foster local art by participating in festivals, exhibitions, and collaborations with artists from across the region.' }
+      ],
+      showcase: 'Skin \u2022 Canvas \u2022 Mural',
+      ctaTitle: 'Ready For Your',
+      ctaTitle2: 'Next Piece?',
+      ctaSub: 'Every tattoo is a collaboration between artist and client. Let\u2019s talk about your vision.',
+      ctaBtn: 'Message on WhatsApp',
+      ctaBtn2: 'View Gallery'
+    }
+  }
+};
+
+export function getLang(param) {
+  if (param === 'en') return translations.en;
+  return translations.es;
+}
+
+export function altLang(t) {
+  return t.lang === 'es' ? translations.en : translations.es;
+}

src/routes/[[lang]]/+page.js

@@ -0,0 +1,10 @@
+import { error } from '@sveltejs/kit';
+
+export function entries() {
+  return [{ lang: '' }, { lang: 'en' }];
+}
+
+export function load({ params }) {
+  if (params.lang && params.lang !== 'en') throw error(404);
+  return { lang: params.lang || 'es' };
+}

src/routes/+page.svelte → src/routes/[[lang]]/+page.svelte

@@ -2,12 +2,17 @@
   <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.">
+  <title>{t.meta.title}</title>
+  <meta name="description" content={t.meta.description}>
 </svelte:head>
 
 <script>
   import { onMount } from 'svelte';
+  import { getLang, altLang } from '$lib/i18n.js';
+
+  let { data } = $props();
+  const t = $derived(getLang(data.lang));
+  const alt = $derived(altLang(t));
 
   let scrollY = $state(0);
   let activeSection = $state(0);
@@ -19,61 +24,10 @@
 
   const sections = ['inicio', 'filosofia', 'servicios', 'galeria', 'contacto'];
 
-  const services = [
-    {
-      num: "01",
-      name: "Tatuajes Personalizados",
-      description: "Diseño y ejecución de tatuajes en una amplia variedad de estilos: realismo en blanco y negro, color vibrante, lettering cursivo, estilo indígena-tribal y piezas de gran formato con un nivel de detalle excepcional.",
-      img: "/gallery/2.jpg",
-      color: "#D64B8A"
-    },
-    {
-      num: "02",
-      name: "Body Piercing",
-      description: "Servicio profesional de perforaciones corporales realizadas con técnicas seguras e higiénicas en un ambiente artístico.",
-      img: "/gallery/6.jpg",
-      color: "#2A8C7A"
-    },
-    {
-      num: "03",
-      name: "Galería de Arte Original",
-      description: "Exhibición y venta de pinturas originales en lienzo con estilos abstractos, vibrantes y temáticas culturales costarricenses que incluyen colibríes, orquídeas, jaguares y motivos precolombinos.",
-      img: "/gallery/10.jpg",
-      color: "#D4A044"
-    },
-    {
-      num: "04",
-      name: "Murales y Arte a Gran Escala",
-      description: "Creación de murales artísticos de gran formato con diseños detallados que combinan elementos de la naturaleza, cultura indígena y arte contemporáneo.",
-      img: "/gallery/14.jpg",
-      color: "#E87C4F"
-    },
-    {
-      num: "05",
-      name: "Eventos de Arte",
-      description: "Presencia activa en festivales y eventos artísticos como el Art Fest Costa Rica, donde se exhiben obras y se promueve el arte local.",
-      img: "/gallery/13.jpg",
-      color: "#9B7EC8"
-    }
-  ];
-
-  const galleryImages = [
-    { src: "/gallery/2.jpg", caption: "Águila y jaguar — estilo indígena" },
-    { src: "/gallery/6.jpg", caption: "Búho floral — blanco y negro" },
-    { src: "/gallery/10.jpg", caption: "Colibrí — pintura original" },
-    { src: "/gallery/3.jpg", caption: "Orquídea a color" },
-    { src: "/gallery/15.jpg", caption: "Orquídea precolombina" },
-    { src: "/gallery/4.jpg", caption: "Libélula y flores abstractas" },
-    { src: "/gallery/11.jpg", caption: "Perezoso tribal — pintura" },
-    { src: "/gallery/5.jpg", caption: "Pulpo detallado" },
-    { src: "/gallery/14.jpg", caption: "Mural artístico monumental" },
-    { src: "/gallery/1.jpg", caption: "Lettering cursivo" },
-    { src: "/gallery/13.jpg", caption: "Mujer mariposa — pintura" },
-    { src: "/gallery/7.jpg", caption: "Arte geométrico abstracto" },
-    { src: "/gallery/8.jpg", caption: "Diseño personalizado" },
-    { src: "/gallery/9.jpg", caption: "Arte en tinta" },
-    { src: "/gallery/12.jpg", caption: "Composición abstracta" },
-  ];
+  const serviceImgs = ['/gallery/2.jpg', '/gallery/6.jpg', '/gallery/10.jpg', '/gallery/14.jpg', '/gallery/13.jpg'];
+  const serviceColors = ['#D64B8A', '#2A8C7A', '#D4A044', '#E87C4F', '#9B7EC8'];
+
+  const gallerySrcs = ['/gallery/2.jpg','/gallery/6.jpg','/gallery/10.jpg','/gallery/3.jpg','/gallery/15.jpg','/gallery/4.jpg','/gallery/11.jpg','/gallery/5.jpg','/gallery/14.jpg','/gallery/1.jpg','/gallery/13.jpg','/gallery/7.jpg','/gallery/8.jpg','/gallery/9.jpg','/gallery/12.jpg'];
 
   function openLightbox(src) {
     lightboxImg = src;
@@ -136,7 +90,7 @@
       class="side-dot {activeSection === i ? 'active' : ''}"
       aria-label={sec}
     >
-      <span class="dot-label">{sec === 'inicio' ? 'Inicio' : sec === 'filosofia' ? 'Filosofía' : sec === 'servicios' ? 'Servicios' : sec === 'galeria' ? 'Galería' : 'Contacto'}</span>
+      <span class="dot-label">{sec === 'inicio' ? t.nav.inicio : sec === 'filosofia' ? t.nav.filosofia : sec === 'servicios' ? t.nav.servicios : sec === 'galeria' ? t.nav.galeria : t.nav.contacto}</span>
     </a>
   {/each}
 </nav>
@@ -147,10 +101,11 @@
     <img src="/logo.png" alt="Inkdigena" class="h-8 sm:h-10 w-auto">
   </a>
   <div class="hidden md:flex items-center gap-8">
-    <a href="#servicios" class="top-link">Servicios</a>
-    <a href="#galeria" class="top-link">Galería</a>
-    <a href="/about" class="top-link">Nosotros</a>
-    <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="top-cta">Reservar</a>
+    <a href="#servicios" class="top-link">{t.nav.servicios}</a>
+    <a href="#galeria" class="top-link">{t.nav.galeria}</a>
+    <a href="{t.prefix}/about" class="top-link">{t.nav.nosotros}</a>
+    <a href="{alt.prefix || '/'}" class="top-link lang-toggle">{alt.lang.toUpperCase()}</a>
+    <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="top-cta">{t.nav.reservar}</a>
   </div>
   <button class="md:hidden w-10 h-10 flex items-center justify-center" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="Menú">
     <div class="hamburger">
@@ -165,13 +120,14 @@
   <div class="mobile-overlay" role="dialog">
     <button class="absolute inset-0 bg-black/80" onclick={() => mobileMenuOpen = false} aria-label="Cerrar"></button>
     <div class="mobile-drawer">
-      <a href="#inicio" class="drawer-link" onclick={() => mobileMenuOpen = false}>Inicio</a>
-      <a href="#servicios" class="drawer-link" onclick={() => mobileMenuOpen = false}>Servicios</a>
-      <a href="#galeria" class="drawer-link" onclick={() => mobileMenuOpen = false}>Galería</a>
-      <a href="#contacto" class="drawer-link" onclick={() => mobileMenuOpen = false}>Contacto</a>
-      <a href="/about" class="drawer-link" onclick={() => mobileMenuOpen = false}>Nosotros</a>
+      <a href="#inicio" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.inicio}</a>
+      <a href="#servicios" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.servicios}</a>
+      <a href="#galeria" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.galeria}</a>
+      <a href="#contacto" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.contacto}</a>
+      <a href="{t.prefix}/about" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.nosotros}</a>
+      <a href="{alt.prefix || '/'}" class="drawer-link lang-toggle" onclick={() => mobileMenuOpen = false}>{alt.lang.toUpperCase()}</a>
       <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="drawer-cta" onclick={() => mobileMenuOpen = false}>
-        Reservar Cita
+        {t.nav.reservarCita}
       </a>
     </div>
   </div>
@@ -193,18 +149,18 @@
 
     <h1 class="hero-title {heroLoaded ? 'loaded' : ''}">INKDIGENA</h1>
     <div class="hero-sub {heroLoaded ? 'loaded' : ''}">
-      <p class="font-cinzel text-[10px] sm:text-xs tracking-[0.5em] uppercase text-white/50 mb-6">Tattoo &bull; Art Gallery &bull; Shop</p>
+      <p class="font-cinzel text-[10px] sm:text-xs tracking-[0.5em] uppercase text-white/50 mb-6">{t.hero.subtitle}</p>
       <p class="font-mont italic text-lg sm:text-2xl md:text-3xl text-white/80 mb-10 px-4">
-        Donde el arte ancestral cobra vida en tu piel
+        {t.hero.tagline}
       </p>
     </div>
 
     <div class="hero-btns {heroLoaded ? 'loaded' : ''}">
       <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="btn-gold">
-        Agendar por WhatsApp
+        {t.hero.cta}
       </a>
       <a href="#galeria" class="btn-ghost">
-        Ver Portfolio
+        {t.hero.ctaSecondary}
       </a>
     </div>
   </div>
@@ -236,13 +192,13 @@
       </div>
     </div>
     <div class="fade-right">
-      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">Nuestra Filosofía</span>
+      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">{t.philosophy.label}</span>
       <blockquote class="font-cinzel text-2xl sm:text-4xl lg:text-5xl text-white/90 leading-[1.2] mb-8">
-        "El arte no se crea — se despierta de las raíces que llevamos dentro"
+        {t.philosophy.quote}
       </blockquote>
       <div class="w-16 h-0.5 bg-gradient-to-r from-gold to-transparent mb-8"></div>
       <p class="font-mont text-white/50 text-base sm:text-lg leading-relaxed">
-        Somos un espacio donde las raíces precolombinas, la riqueza de la naturaleza tropical y la expresión artística moderna convergen. Cada pieza que creamos lleva la memoria de nuestros ancestros y la energía del trópico.
+        {t.philosophy.text}
       </p>
     </div>
   </div>
@@ -252,22 +208,22 @@
 <section id="servicios" class="bg-[#0f0f0f] relative">
   <div class="py-14 sm:py-24 max-w-7xl mx-auto px-5 sm:px-10">
     <div class="text-center mb-16 sm:mb-24 fade-up">
-      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">Lo Que Hacemos</span>
-      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">SERVICIOS</h2>
+      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">{t.services.label}</span>
+      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">{t.services.title}</h2>
     </div>
   </div>
 
   <!-- Mobile: compact cards -->
   <div class="services-mobile">
-    {#each services as svc, i}
+    {#each t.services.items as svc, i}
       <div class="svc-card fade-up">
         <div class="svc-card-img">
-          <img src={svc.img} alt={svc.name} loading="lazy">
-          <span class="svc-card-num" style="color: {svc.color};">{svc.num}</span>
+          <img src={serviceImgs[i]} alt={svc.name} loading="lazy">
+          <span class="svc-card-num" style="color: {serviceColors[i]};">{svc.num}</span>
         </div>
         <div class="svc-card-body">
           <h3 class="font-cinzel text-base text-white tracking-wide mb-2">{svc.name}</h3>
-          <div class="w-8 h-0.5 mb-2" style="background: {svc.color};"></div>
+          <div class="w-8 h-0.5 mb-2" style="background: {serviceColors[i]};"></div>
           <p class="font-mont text-white/50 text-xs leading-relaxed">{svc.description}</p>
         </div>
       </div>
@@ -275,16 +231,16 @@
   </div>
 
   <!-- Desktop: alternating editorial blocks -->
-  {#each services as svc, i}
+  {#each t.services.items as svc, i}
     <div class="service-block {i % 2 === 0 ? '' : 'reverse'}">
       <div class="service-img fade-up">
-        <img src={svc.img} alt={svc.name} class="w-full h-full object-cover" loading="lazy">
-        <div class="service-img-overlay" style="background: linear-gradient(135deg, {svc.color}22, transparent);"></div>
+        <img src={serviceImgs[i]} alt={svc.name} class="w-full h-full object-cover" loading="lazy">
+        <div class="service-img-overlay" style="background: linear-gradient(135deg, {serviceColors[i]}22, transparent);"></div>
       </div>
       <div class="service-text fade-up">
-        <span class="service-num" style="color: {svc.color};">{svc.num}</span>
+        <span class="service-num" style="color: {serviceColors[i]};">{svc.num}</span>
         <h3 class="font-cinzel text-3xl lg:text-4xl text-white tracking-wide mb-6">{svc.name}</h3>
-        <div class="w-12 h-0.5 mb-6" style="background: {svc.color};"></div>
+        <div class="w-12 h-0.5 mb-6" style="background: {serviceColors[i]};"></div>
         <p class="font-mont text-white/50 text-base lg:text-lg leading-relaxed max-w-lg">{svc.description}</p>
       </div>
     </div>
@@ -303,8 +259,8 @@
   <div class="max-w-7xl mx-auto px-5 sm:px-10 mb-10 sm:mb-16">
     <div class="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-4 fade-up">
       <div>
-        <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">Portfolio</span>
-        <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">GALERÍA</h2>
+        <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">{t.gallery.label}</span>
+        <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">{t.gallery.title}</h2>
       </div>
       <div class="flex gap-3">
         <button onclick={() => scrollGallery(-1)} class="gallery-arrow" aria-label="Anterior">
@@ -320,12 +276,12 @@
   <!-- Filmstrip -->
   <div class="filmstrip" bind:this={galleryEl}>
     <div class="filmstrip-track">
-      {#each galleryImages as img, i}
-        <button class="filmstrip-card" onclick={() => openLightbox(img.src)}>
-          <img src={img.src} alt={img.caption} class="filmstrip-img" loading="lazy">
+      {#each gallerySrcs as src, i}
+        <button class="filmstrip-card" onclick={() => openLightbox(src)}>
+          <img src={src} alt={t.gallery.captions[i]} class="filmstrip-img" loading="lazy">
           <div class="filmstrip-caption">
             <span class="font-cinzel text-gold text-[10px] tracking-[0.3em] uppercase">{String(i + 1).padStart(2, '0')}</span>
-            <span class="font-mont text-white/80 text-xs sm:text-sm">{img.caption}</span>
+            <span class="font-mont text-white/80 text-xs sm:text-sm">{t.gallery.captions[i]}</span>
           </div>
         </button>
       {/each}
@@ -333,7 +289,7 @@
   </div>
 
   <div class="max-w-7xl mx-auto px-5 sm:px-10 mt-8 sm:mt-12 fade-up">
-    <p class="font-mont italic text-white/30 text-sm">Desliza para explorar — toca para ampliar</p>
+    <p class="font-mont italic text-white/30 text-sm">{t.gallery.hint}</p>
   </div>
 </section>
 
@@ -356,29 +312,29 @@
 
   <div class="relative z-10 max-w-3xl mx-auto px-5 sm:px-10 text-center">
     <div class="fade-up">
-      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">Hablemos</span>
-      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide mb-8">CONTACTO</h2>
+      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">{t.contact.label}</span>
+      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide mb-8">{t.contact.title}</h2>
     </div>
 
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-4 mb-12 sm:mb-16">
       <div class="contact-pill fade-up">
         <span class="text-xl mb-2 block">📱</span>
-        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">WhatsApp</span>
+        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">{t.contact.whatsapp}</span>
         <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="font-mont text-gold hover:text-white transition-colors text-sm sm:text-base">
           +506 6269-2083
         </a>
       </div>
       <div class="contact-pill fade-up">
         <span class="text-xl mb-2 block">📞</span>
-        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">Teléfono</span>
+        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">{t.contact.telefono}</span>
         <a href="tel:50662692083" class="font-mont text-gold hover:text-white transition-colors text-sm sm:text-base">
           +506 6269-2083
         </a>
       </div>
       <div class="contact-pill fade-up">
         <span class="text-xl mb-2 block">📍</span>
-        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">Ubicación</span>
-        <span class="font-mont text-white/70 text-sm sm:text-base">Costa Rica</span>
+        <span class="font-cinzel text-[10px] tracking-[0.3em] uppercase text-white/40 block mb-1">{t.contact.ubicacion}</span>
+        <span class="font-mont text-white/70 text-sm sm:text-base">{t.contact.pais}</span>
       </div>
     </div>
 
@@ -393,7 +349,7 @@
 
     <div class="fade-up">
       <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="btn-gold inline-block">
-        Reservar Mi Cita
+        {t.contact.cta}
       </a>
     </div>
 
@@ -420,18 +376,18 @@
     <div class="md:hidden flex flex-col items-center text-center">
       <img src="/logo.png" alt="Inkdigena" class="h-12 w-auto mb-2">
       <p class="font-cinzel text-white text-sm tracking-wide mb-1">INKDIGENA</p>
-      <p class="font-mont italic text-white/25 text-xs mb-5">Donde el arte ancestral cobra vida en tu piel</p>
+      <p class="font-mont italic text-white/25 text-xs mb-5">{t.footer.tagline}</p>
 
       <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mb-5">
-        <a href="#inicio" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Inicio</a>
-        <a href="#servicios" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Servicios</a>
-        <a href="#galeria" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Galería</a>
-        <a href="#contacto" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Contacto</a>
-        <a href="/about" class="font-mont text-white/40 text-xs hover:text-white transition-colors">Nosotros</a>
+        <a href="#inicio" class="font-mont text-white/40 text-xs hover:text-white transition-colors">{t.nav.inicio}</a>
+        <a href="#servicios" class="font-mont text-white/40 text-xs hover:text-white transition-colors">{t.nav.servicios}</a>
+        <a href="#galeria" class="font-mont text-white/40 text-xs hover:text-white transition-colors">{t.nav.galeria}</a>
+        <a href="#contacto" class="font-mont text-white/40 text-xs hover:text-white transition-colors">{t.nav.contacto}</a>
+        <a href="{t.prefix}/about" class="font-mont text-white/40 text-xs hover:text-white transition-colors">{t.nav.nosotros}</a>
       </div>
 
       <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-gold text-sm mb-1 hover:text-white transition-colors">+506 6269-2083</a>
-      <span class="font-mont text-white/25 text-xs mb-4">Costa Rica</span>
+      <span class="font-mont text-white/25 text-xs mb-4">{t.contact.pais}</span>
 
       <div class="flex items-center gap-4 mb-6">
         <a href="https://www.instagram.com/inkdigenatattooshop/" target="_blank" rel="noopener noreferrer" class="social-icon-sm" aria-label="Instagram">
@@ -443,8 +399,8 @@
       </div>
 
       <div class="w-full border-t border-white/[0.04] pt-5 flex flex-col items-center gap-2">
-        <p class="font-mont text-white/20 text-[10px]">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
-        <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-[10px] text-white/20 hover:text-white/40 transition-colors">Hecho por digitalmar.dev</a>
+        <p class="font-mont text-white/20 text-[10px]">&copy; {new Date().getFullYear()} {t.footer.copyright}</p>
+        <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-[10px] text-white/20 hover:text-white/40 transition-colors">{t.footer.madeBy}</a>
       </div>
     </div>
 
@@ -452,23 +408,23 @@
     <div class="hidden md:grid grid-cols-3 gap-12 items-start">
       <div>
         <img src="/logo.png" alt="Inkdigena" class="h-14 w-auto mb-3">
-        <p class="font-mont italic text-white/25 text-sm">Donde el arte ancestral cobra vida en tu piel</p>
+        <p class="font-mont italic text-white/25 text-sm">{t.footer.tagline}</p>
       </div>
 
       <div class="flex flex-col gap-2">
-        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Explorar</span>
-        <a href="#inicio" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Inicio</a>
-        <a href="#servicios" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Servicios</a>
-        <a href="#galeria" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Galería</a>
-        <a href="#contacto" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Contacto</a>
-        <a href="/about" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Nosotros</a>
+        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">{t.footer.explorar}</span>
+        <a href="#inicio" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.inicio}</a>
+        <a href="#servicios" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.servicios}</a>
+        <a href="#galeria" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.galeria}</a>
+        <a href="#contacto" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.contacto}</a>
+        <a href="{t.prefix}/about" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.nosotros}</a>
       </div>
 
       <div class="flex flex-col gap-2">
-        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Contacto</span>
+        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">{t.footer.contacto}</span>
         <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">WhatsApp: +506 6269-2083</a>
         <a href="tel:50662692083" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">Tel: +506 6269-2083</a>
-        <span class="font-mont text-white/30 text-sm">Costa Rica</span>
+        <span class="font-mont text-white/30 text-sm">{t.contact.pais}</span>
         <div class="flex items-center gap-3 mt-3">
           <a href="https://www.instagram.com/inkdigenatattooshop/" target="_blank" rel="noopener noreferrer" class="social-icon-sm" aria-label="Instagram">
             <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
@@ -481,8 +437,8 @@
     </div>
 
     <div class="hidden md:flex mt-10 pt-8 border-t border-white/[0.04] items-center justify-between">
-      <p class="font-mont text-white/20 text-xs">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
-      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/20 hover:text-white/40 transition-colors">Hecho por digitalmar.dev</a>
+      <p class="font-mont text-white/20 text-xs">&copy; {new Date().getFullYear()} {t.footer.copyright}</p>
+      <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/20 hover:text-white/40 transition-colors">{t.footer.madeBy}</a>
     </div>
   </div>
 </footer>
@@ -602,6 +558,21 @@
   }
   .top-cta:hover { background: #e8b654; transform: translateY(-1px); }
 
+  .lang-toggle {
+    width: 32px;
+    height: 32px;
+    border: 1px solid rgba(212,160,68,0.3);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px !important;
+    letter-spacing: 0.05em !important;
+    color: #D4A044 !important;
+    transition: all 0.3s;
+  }
+  .lang-toggle:hover { background: rgba(212,160,68,0.1); border-color: #D4A044; }
+
   /* ── HAMBURGER ── */
   .hamburger { width: 22px; height: 16px; position: relative; }
   .hline {

src/routes/[[lang]]/about/+page.js

@@ -0,0 +1,10 @@
+import { error } from '@sveltejs/kit';
+
+export function entries() {
+  return [{ lang: '' }, { lang: 'en' }];
+}
+
+export function load({ params }) {
+  if (params.lang && params.lang !== 'en') throw error(404);
+  return { lang: params.lang || 'es' };
+}

src/routes/about/+page.svelte → src/routes/[[lang]]/about/+page.svelte

@@ -2,42 +2,22 @@
   <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.">
+  <title>{t.meta.aboutTitle}</title>
+  <meta name="description" content={t.meta.aboutDescription}>
 </svelte:head>
 
 <script>
   import { onMount } from 'svelte';
+  import { getLang, altLang } from '$lib/i18n.js';
+
+  let { data } = $props();
+  const t = $derived(getLang(data.lang));
+  const alt = $derived(altLang(t));
 
   let scrollY = $state(0);
   let mobileMenuOpen = $state(false);
 
-  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.",
-      num: "I",
-      color: "#D4A044"
-    },
-    {
-      title: "Excelencia Técnica",
-      description: "Utilizamos las mejores técnicas y equipos para garantizar resultados impecables, seguros y duraderos.",
-      num: "II",
-      color: "#D64B8A"
-    },
-    {
-      title: "Expresión Única",
-      description: "Creemos que cada persona merece un arte que cuente su propia historia — nunca repetimos un diseño.",
-      num: "III",
-      color: "#2A8C7A"
-    },
-    {
-      title: "Comunidad Artística",
-      description: "Fomentamos el arte local participando en festivales, exhibiciones y colaboraciones con artistas de toda la región.",
-      num: "IV",
-      color: "#E87C4F"
-    }
-  ];
+  const valueColors = ['#D4A044', '#D64B8A', '#2A8C7A', '#E87C4F'];
 
   onMount(() => {
     const handleScroll = () => { scrollY = window.scrollY; };
@@ -67,12 +47,13 @@
     <img src="/logo.png" alt="Inkdigena" class="h-8 sm:h-10 w-auto">
   </a>
   <div class="hidden md:flex items-center gap-8">
-    <a href="/" class="top-link">Inicio</a>
-    <a href="/#servicios" class="top-link">Servicios</a>
-    <a href="/#galeria" class="top-link">Galería</a>
-    <a href="/#contacto" class="top-link">Contacto</a>
-    <a href="/about" class="top-link active">Nosotros</a>
-    <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="top-cta">Reservar</a>
+    <a href="{t.prefix}/" class="top-link">{t.nav.inicio}</a>
+    <a href="{t.prefix}/#servicios" class="top-link">{t.nav.servicios}</a>
+    <a href="{t.prefix}/#galeria" class="top-link">{t.nav.galeria}</a>
+    <a href="{t.prefix}/#contacto" class="top-link">{t.nav.contacto}</a>
+    <a href="{t.prefix}/about" class="top-link active">{t.nav.nosotros}</a>
+    <a href="{alt.prefix}/about" class="top-link lang-toggle">{alt.lang.toUpperCase()}</a>
+    <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="top-cta">{t.nav.reservar}</a>
   </div>
   <button class="md:hidden w-10 h-10 flex items-center justify-center" onclick={() => mobileMenuOpen = !mobileMenuOpen} aria-label="Menú">
     <div class="hamburger">
@@ -87,13 +68,14 @@
   <div class="mobile-overlay" role="dialog">
     <button class="absolute inset-0 bg-black/80" onclick={() => mobileMenuOpen = false} aria-label="Cerrar"></button>
     <div class="mobile-drawer">
-      <a href="/" class="drawer-link" onclick={() => mobileMenuOpen = false}>Inicio</a>
-      <a href="/#servicios" class="drawer-link" onclick={() => mobileMenuOpen = false}>Servicios</a>
-      <a href="/#galeria" class="drawer-link" onclick={() => mobileMenuOpen = false}>Galería</a>
-      <a href="/#contacto" class="drawer-link" onclick={() => mobileMenuOpen = false}>Contacto</a>
-      <a href="/about" class="drawer-link text-gold" onclick={() => mobileMenuOpen = false}>Nosotros</a>
+      <a href="{t.prefix}/" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.inicio}</a>
+      <a href="{t.prefix}/#servicios" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.servicios}</a>
+      <a href="{t.prefix}/#galeria" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.galeria}</a>
+      <a href="{t.prefix}/#contacto" class="drawer-link" onclick={() => mobileMenuOpen = false}>{t.nav.contacto}</a>
+      <a href="{t.prefix}/about" class="drawer-link text-gold" onclick={() => mobileMenuOpen = false}>{t.nav.nosotros}</a>
+      <a href="{alt.prefix}/about" class="drawer-link lang-toggle" onclick={() => mobileMenuOpen = false}>{alt.lang.toUpperCase()}</a>
       <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="drawer-cta" onclick={() => mobileMenuOpen = false}>
-        Reservar Cita
+        {t.nav.reservarCita}
       </a>
     </div>
   </div>
@@ -105,11 +87,11 @@
   <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-black/50 to-black/30"></div>
 
   <div class="relative z-10 w-full max-w-6xl mx-auto px-5 sm:px-10 pb-16 sm:pb-24 pt-40">
-    <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4 fade-up">Nuestra Historia</span>
-    <h1 class="font-cinzel text-5xl sm:text-7xl lg:text-8xl text-white tracking-wide mb-4 fade-up">SOBRE<br>NOSOTROS</h1>
+    <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4 fade-up">{t.about.heroLabel}</span>
+    <h1 class="font-cinzel text-5xl sm:text-7xl lg:text-8xl text-white tracking-wide mb-4 fade-up">{t.about.heroTitle}<br>{t.about.heroTitle2}</h1>
     <div class="flex items-center gap-4 fade-up">
       <span class="h-px w-16 sm:w-24 bg-gold/40"></span>
-      <span class="font-mont italic text-white/60 text-base sm:text-xl">El arte que nos define</span>
+      <span class="font-mont italic text-white/60 text-base sm:text-xl">{t.about.heroSub}</span>
     </div>
   </div>
 </section>
@@ -118,19 +100,13 @@
 <section class="py-20 sm:py-32 bg-[#0a0a0a]">
   <div class="max-w-6xl mx-auto px-5 sm:px-10 grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-20 items-start">
     <div class="lg:col-span-3 fade-up">
-      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">Quiénes Somos</span>
-      <h2 class="font-cinzel text-3xl sm:text-4xl lg:text-5xl text-white tracking-wide mb-10">Más Que Un Estudio de Tatuajes</h2>
+      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-6">{t.about.storyLabel}</span>
+      <h2 class="font-cinzel text-3xl sm:text-4xl lg:text-5xl text-white tracking-wide mb-10">{t.about.storyTitle}</h2>
 
       <div class="space-y-6">
-        <p class="font-mont text-white/60 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-mont text-white/60 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-mont text-white/60 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>
+        <p class="font-mont text-white/60 text-base sm:text-lg leading-relaxed">{@html t.about.storyP1}</p>
+        <p class="font-mont text-white/60 text-base sm:text-lg leading-relaxed">{@html t.about.storyP2}</p>
+        <p class="font-mont text-white/60 text-base sm:text-lg leading-relaxed">{@html t.about.storyP3}</p>
       </div>
     </div>
 
@@ -151,9 +127,9 @@
   <div class="max-w-4xl mx-auto px-5 sm:px-10 text-center relative z-10 fade-up">
     <div class="text-gold text-3xl mb-8 opacity-30">&#10022;</div>
     <blockquote class="font-cinzel text-2xl sm:text-4xl lg:text-5xl text-white/90 leading-[1.25] mb-8">
-      "Cada trazo lleva la memoria de nuestros ancestros y la energía del trópico"
+      {t.about.quote}
     </blockquote>
-    <p class="font-mont text-white/30 text-sm tracking-wider uppercase">— Filosofía Inkdigena</p>
+    <p class="font-mont text-white/30 text-sm tracking-wider uppercase">{t.about.quoteSrc}</p>
   </div>
 </section>
 
@@ -161,20 +137,20 @@
 <section class="py-20 sm:py-32 bg-[#0a0a0a]">
   <div class="max-w-6xl mx-auto px-5 sm:px-10">
     <div class="text-center mb-16 sm:mb-24 fade-up">
-      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">Lo Que Nos Mueve</span>
-      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">VALORES</h2>
+      <span class="font-cinzel text-gold text-[10px] tracking-[0.6em] uppercase block mb-4">{t.about.valuesLabel}</span>
+      <h2 class="font-cinzel text-4xl sm:text-6xl lg:text-7xl text-white tracking-wide">{t.about.valuesTitle}</h2>
     </div>
 
     <div class="values-timeline">
-      {#each values as val, i}
+      {#each t.about.values as val, i}
         <div class="value-row {i % 2 === 0 ? '' : 'reverse'} fade-up">
           <div class="value-content">
-            <span class="value-numeral" style="color: {val.color};">{val.num}</span>
+            <span class="value-numeral" style="color: {valueColors[i]};">{val.num}</span>
             <h3 class="font-cinzel text-xl sm:text-2xl text-white tracking-wide mb-3">{val.title}</h3>
             <p class="font-mont text-white/50 text-sm sm:text-base leading-relaxed">{val.description}</p>
           </div>
           <div class="value-line-col">
-            <div class="value-dot" style="background: {val.color};"></div>
+            <div class="value-dot" style="background: {valueColors[i]};"></div>
             <div class="value-line"></div>
           </div>
           <div class="value-spacer"></div>
@@ -193,7 +169,7 @@
     <img src="/gallery/3.jpg" alt="Orquídea a color" class="showcase-img" loading="lazy">
   </div>
   <div class="text-center py-8 sm:py-12">
-    <span class="font-cinzel text-gold text-[10px] tracking-[0.5em] uppercase">Piel &bull; Lienzo &bull; Mural</span>
+    <span class="font-cinzel text-gold text-[10px] tracking-[0.5em] uppercase">{t.about.showcase}</span>
   </div>
 </section>
 
@@ -203,18 +179,18 @@
 
   <div class="max-w-3xl mx-auto px-5 sm:px-10 text-center relative z-10 fade-up">
     <h2 class="font-cinzel text-3xl sm:text-5xl lg:text-6xl text-white tracking-wide mb-6">
-      ¿Listo Para Tu<br>Próxima Pieza?
+      {t.about.ctaTitle}<br>{t.about.ctaTitle2}
     </h2>
     <p class="font-mont italic text-white/40 text-base 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.
+      {t.about.ctaSub}
     </p>
 
     <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
       <a href="https://wa.me/50662692083?text=Hola%2C%20vi%20su%20sitio%20web%20y%20me%20interesan%20sus%20servicios." target="_blank" rel="noopener noreferrer" class="btn-gold">
-        Escribir por WhatsApp
+        {t.about.ctaBtn}
       </a>
-      <a href="/" class="btn-ghost">
-        Ver Galería
+      <a href="{t.prefix}/" class="btn-ghost">
+        {t.about.ctaBtn2}
       </a>
     </div>
   </div>
@@ -226,26 +202,26 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 items-start">
       <div>
         <img src="/logo.png" alt="Inkdigena" class="h-14 w-auto mb-3">
-        <p class="font-mont italic text-white/25 text-sm">Donde el arte ancestral cobra vida en tu piel</p>
+        <p class="font-mont italic text-white/25 text-sm">{t.footer.tagline}</p>
       </div>
       <div class="flex flex-col gap-2">
-        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Explorar</span>
-        <a href="/" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Inicio</a>
-        <a href="/#servicios" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Servicios</a>
-        <a href="/#galeria" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Galería</a>
-        <a href="/#contacto" class="font-mont text-white/40 hover:text-white text-sm transition-colors">Contacto</a>
+        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">{t.footer.explorar}</span>
+        <a href="{t.prefix}/" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.inicio}</a>
+        <a href="{t.prefix}/#servicios" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.servicios}</a>
+        <a href="{t.prefix}/#galeria" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.galeria}</a>
+        <a href="{t.prefix}/#contacto" class="font-mont text-white/40 hover:text-white text-sm transition-colors">{t.nav.contacto}</a>
       </div>
       <div class="flex flex-col gap-2">
-        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">Contacto</span>
+        <span class="font-cinzel text-[10px] tracking-[0.4em] uppercase text-gold/50 mb-2">{t.footer.contacto}</span>
         <a href="https://wa.me/50662692083" target="_blank" rel="noopener noreferrer" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">WhatsApp: +506 6269-2083</a>
         <a href="tel:50662692083" class="font-mont text-white/40 hover:text-gold text-sm transition-colors">Tel: +506 6269-2083</a>
-        <span class="font-mont text-white/30 text-sm">Costa Rica</span>
+        <span class="font-mont text-white/30 text-sm">{t.contact.pais}</span>
       </div>
     </div>
     <div class="mt-10 pt-8 border-t border-white/[0.04] flex flex-col sm:flex-row items-center justify-between gap-4">
-      <p class="font-mont text-white/20 text-xs">&copy; {new Date().getFullYear()} Inkdigena Tattoo Art Gallery Shop</p>
+      <p class="font-mont text-white/20 text-xs">&copy; {new Date().getFullYear()} {t.footer.copyright}</p>
       <a href="https://digitalmar.dev" target="_blank" rel="noopener noreferrer" class="text-xs text-white/20 hover:text-white/40 transition-colors">
-        Hecho por digitalmar.dev
+        {t.footer.madeBy}
       </a>
     </div>
   </div>
@@ -307,6 +283,21 @@
   }
   .top-link:hover, .top-link.active { color: #D4A044; }
 
+  .lang-toggle {
+    width: 32px;
+    height: 32px;
+    border: 1px solid rgba(212,160,68,0.3);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px !important;
+    letter-spacing: 0.05em !important;
+    color: #D4A044 !important;
+    transition: all 0.3s;
+  }
+  .lang-toggle:hover { background: rgba(212,160,68,0.1); border-color: #D4A044; }
+
   .top-cta {
     font-family: 'Cinzel', serif;
     font-size: 11px;