# Enzava Project Full Context

## public_html/.htaccess
# Prevent directory listings
Options -Indexes

# Enable compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json image/svg+xml
</IfModule>

# Browser Caching
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

# Custom 404 Page
ErrorDocument 404 /index.html

# URL Rewrites (Clean URLs)
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    # 1. Remove trailing slash if it's not a directory
    #    Redirect /page/ -> /page
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ $1 [L,R=301]

    # 2. External Redirect: Remove .html from visible URL
    #    If client requests /page.html, redirect to /page
    RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.html [NC]
    RewriteRule ^ %1 [R=301,L]

    # 3. Internal Rewrite: Map extensionless URL to .html file
    #    If request is /page (and file /page.html exists), serve /page.html
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}.html -f
    RewriteRule ^(.*?)/?$ $1.html [L]
</IfModule>

## public_html/robots.txt
User-agent: *
Allow: /
Sitemap: https://enzava.com.mx/sitemap.xml

## public_html/js/layout.js
/**
 * layout.js
 * Inyecta el Header y Footer en las páginas para mantener consistencia sin frameworks.
 */

const headerHTML = `
<header class="sticky top-0 z-50 w-full glass shadow-sm">
  <div class="px-6 md:px-12 lg:px-20 max-w-7xl mx-auto py-4 flex items-center justify-between">
    <!-- Logo -->
    <a href="index.html" class="flex items-center gap-2 group">
      <img src="./Assets/Logos/enzava_hor_black.png" class="h-10 w-auto group-hover:scale-105 transition-transform" alt="Logo Enzava">
    </a>

    <!-- Desktop Nav -->
    <nav class="hidden md:flex items-center gap-8">
      <a href="index.html" class="text-sm font-bold text-secondary hover:text-primary transition-colors">INICIO</a>
      <a href="suplementos.html" class="text-sm font-bold text-secondary hover:text-primary transition-colors">SUPLEMENTOS</a>
      <a href="cuidado-personal.html" class="text-sm font-bold text-secondary hover:text-primary transition-colors">CUIDADO PERSONAL</a>
    </nav>

    <!-- Mobile Menu Button -->
    <button onclick="toggleMobileMenu()" class="md:hidden p-2 text-secondary">
      <span class="material-symbols-outlined text-3xl">menu</span>
    </button>

    <!-- CTA Button (Desktop) -->
    <a href="https://wa.me/5213325808724" target="_blank" class="hidden md:flex bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md hover:shadow-lg items-center gap-2">
      <span>Contacto</span>
      <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg"><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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
    </a>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white border-t border-gray-100 shadow-xl py-4 flex flex-col">
    <a href="index.html" class="px-6 py-3 font-bold text-secondary hover:bg-gray-50">INICIO</a>
    <a href="suplementos.html" class="px-6 py-3 font-bold text-secondary hover:bg-gray-50">SUPLEMENTOS</a>
    <a href="cuidado-personal.html" class="px-6 py-3 font-bold text-secondary hover:bg-gray-50">CUIDADO PERSONAL</a>
    <a href="contacto.html" class="px-6 py-3 font-bold text-secondary hover:bg-gray-50">CONTACTO</a>
  </div>
</header>
`;

const currentYear = new Date().getFullYear();

const footerHTML = `
<section id="contacto" class="bg-secondary text-white pt-20 pb-8 border-t border-gray-700">
  <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
    <!-- Brand -->
    <div>
      <div class="flex items-center gap-2 mb-4">
        <img src="./Assets/Logos/enzava_hor_white.png" class="h-10 w-auto" alt="Logo Enzava">
      </div>
      <p class="text-gray-400 text-sm leading-relaxed mb-6">
        Soluciones integrales para el bienestar y la salud. Productos fabricados con los más altos estándares de calidad en Guadalajara, Jalisco.
      </p>
      <div class="flex gap-4">
        <a href="https://www.facebook.com/enzavaproductos" target="_blank" class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-500 hover:border-primary hover:bg-primary hover:text-white text-gray-300 transition-all">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </a>
        <a href="https://www.instagram.com/enzava_productos/" target="_blank" class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-500 hover:border-primary hover:bg-primary hover:text-white text-gray-300 transition-all">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.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.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
        </a>
      </div>
    </div>

    <!-- Links -->
    <div>
      <h4 class="font-bold text-lg mb-6">Enlaces Rápidos</h4>
      <ul class="space-y-3 text-gray-400">
        <li><a href="index.html" class="hover:text-primary transition-colors">Inicio</a></li>
        <li><a href="suplementos.html" class="hover:text-primary transition-colors">Suplementos</a></li>
        <li><a href="cuidado-personal.html" class="hover:text-primary transition-colors">Cuidado Personal</a></li>
        <li><a href="contacto.html" class="hover:text-primary transition-colors">Contacto</a></li>
      </ul>
    </div>

    <!-- Contact Info -->
    <div>
      <h4 class="font-bold text-lg mb-6">Contacto</h4>
      <ul class="space-y-4 text-gray-400">
        <li class="flex items-start gap-3">
          <span class="material-symbols-outlined text-primary">location_on</span>
          <span>Guadalajara, Jalisco, México.</span>
        </li>
        <li class="flex items-center gap-3">
          <span class="material-symbols-outlined text-primary">call</span>
          <a href="tel:+523325808724" class="hover:text-primary transition-colors">33 2580 8724</a>
        </li>
        <li class="flex items-center gap-3">
          <span class="material-symbols-outlined text-primary">mail</span>
          <a href="mailto:hola@enzava.com.mx" class="hover:text-primary transition-colors">hola@enzava.com.mx</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="max-w-7xl mx-auto px-6 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center text-gray-400">
    <p class="text-base">&copy; ${currentYear} Enzava. Todos los derechos reservados.</p>
    <p class="mt-2 md:mt-0 text-sm">Sitio desarrollado por <a href="https://sistella.com.mx/sitio-web" target="_blank" class="hover:text-primary font-bold">Sistella</a></p>
  </div>
</section>

<!-- Floating WhatsApp Button -->
<a href="https://wa.me/5213325808724" target="_blank" class="fixed bottom-6 right-6 z-50 group">
  <div class="absolute right-full mr-3 top-1/2 -translate-y-1/2 bg-white px-3 py-1 rounded-lg shadow-md text-secondary text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
    ¡Contáctanos!
  </div>
  <div class="w-14 h-14 bg-[#25D366] rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform cursor-pointer text-white">
     <svg viewBox="0 0 24 24" class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg"><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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
  </div>
</a>
`;

function injectLayout() {
  const body = document.body;
  body.insertAdjacentHTML('afterbegin', headerHTML);
  body.insertAdjacentHTML('beforeend', footerHTML);

  // Initializate menu logic
  window.toggleMobileMenu = function () {
    const menu = document.getElementById('mobile-menu');
    menu.classList.toggle('hidden');
  }
}

// Inyectar automáticamente al cargar
document.addEventListener('DOMContentLoaded', injectLayout);


## public_html/js/products.js
const products = [
    // --- SUPLEMENTOS ---
    {
        id: "astaxantina",
        name: "Astaxantina",
        category: "suplementos",
        shortDesc: "Potente antioxidante natural, protege células y piel.",
        longDesc: "Es un potente antioxidante natural que protege las células del daño oxidativo, mejora la salud de la piel, apoya la visión y potencia la resistencia física.\n\nRevitaliza tu cuerpo con uno de los antioxidantes más poderosos de la naturaleza!",
        benefits: [
            "Alto poder antioxidante.",
            "Previene los efectos dañinos de la luz solar.",
            "Anti inflamatorio natural.",
            "Mejora la calidad de vida."
        ],
        presentation: "60 Cápsulas 400mg c/u",
        images: ["./Assets/product_images/1a_astaxantina.JPG", "./Assets/product_images/1b_astaxantina.JPG"],
        price: "Consultar"
    },
    {
        id: "espirulina",
        name: "Espirulina",
        category: "suplementos",
        shortDesc: "Superalimento rico en proteínas, vitaminas y minerales.",
        longDesc: "La espirulina es un superalimento natural, repleto de proteínas, antioxidantes, vitaminas y minerales que apoyan el sistema inmune, aumentan la energía y promueven una piel saludable. Ideal para complementar una dieta equilibrada y mantener el cuerpo lleno de vitalidad.",
        benefits: [
            "Refuerza el sistema inmune.",
            "Auxiliar en el control de colesterol y triglicéridos.",
            "Efecto antioxidante potente.",
            "Auxiliar en el tratamiento de problemas visuales.",
            "Minimiza la inflamación del tejido adiposo.",
            "Incrementa la energía."
        ],
        presentation: "60 Cápsulas 500mg c/u",
        images: ["./Assets/product_images/2a_espirulina_x.png"],
        price: "Consultar"
    },
    {
        id: "calostro",
        name: "Calostro",
        category: "suplementos",
        shortDesc: "Refuerza el sistema inmunológico y la salud intestinal.",
        longDesc: "Es un suplemento natural rico en nutrientes, anticuerpos y factores de crecimiento que fortalecen el sistema inmunológico, mejoran la digestión y aceleran la recuperación muscular. ¡Un impulso poderoso para tu salud y bienestar!",
        benefits: [
            "Protege todos los sistemas del cuerpo.",
            "Promueve la generación del tejido, incluida la piel.",
            "Disminuye los síntomas de alergias.",
            "Ayuda a una recuperación más rápida de enfermedades e infecciones."
        ],
        presentation: "60 Cápsulas 500mg c/u",
        images: ["./Assets/product_images/3a_calostro.JPG", "./Assets/product_images/3b_calostro.JPG"],
        price: "Consultar"
    },
    {
        id: "jamaica",
        name: "Jamaica",
        category: "suplementos",
        shortDesc: "Flor vibrante y refrescante con antioxidantes naturales.",
        longDesc: "Es una flor vibrante y refrescante, rica en antioxidantes naturales que ayudan a la salud cardiovascular, mejoran la digestión y contribuyen a la pérdida de peso.\n\nUn toque delicioso para cuidar tu cuerpo y sentirte ligero!",
        benefits: [
            "Aporte de vitaminas y minerales que protegen del envejecimiento prematuro.",
            "Previene infecciones respiratorias, anemia y fatiga.",
            "Tiene efectos anti-hipertensivos.",
            "Mejora la digestión.",
            "Fortalece dientes y huesos."
        ],
        presentation: "60 Cápsulas 500mg c/u",
        images: ["./Assets/product_images/3a_jamaica_x.png"],
        price: "Consultar"
    },
    {
        id: "chlorella",
        name: "Chlorella",
        category: "suplementos",
        shortDesc: "Alga verde ideal para detoxificar el cuerpo.",
        longDesc: "Es un alga verde repleta de nutrientes, ideal para detoxificar el cuerpo, fortalecer el sistema inmunológico y mejorar la energía. Rica en clorofila, ayuda a eliminar toxinas y revitalizar desde adentro.\n\n¡Un aliado natural para una salud óptima!",
        benefits: [
            "Fantástica fuente de PROTEÍNAS.",
            "Proporciona antioxidantes que retrasan el envejecimiento.",
            "Disminución de la acumulación de grasa hepática.",
            "Rica en vitaminas y minerales.",
            "Favorece la producción de glóbulos rojos."
        ],
        presentation: "60 Cápsulas 500mg c/u",
        images: ["./Assets/product_images/5a_chlorella.JPG", "./Assets/product_images/z_clorelar.JPG"],
        price: "Consultar"
    },
    {
        id: "ashwagandha",
        name: "Ashwagandha",
        category: "suplementos",
        shortDesc: "Poderosa planta que ayuda a reducir el estrés.",
        longDesc: "Es una poderosa planta que ayuda a reducir el estrés, mejora la energía y equilibra el estado de ánimo. Ideal para quienes buscan bienestar mental y físico en su día a día. Renueva tu vitalidad de forma natural!",
        benefits: [
            "Efecto adaptógeno.",
            "Reduce los efectos adversos provocados por el estrés crónico.",
            "Actividad cardio protectora.",
            "Efectos anti inflamatorios.",
            "Efecto inmunomodulador."
        ],
        presentation: "60 Cápsulas 500mg c/u",
        images: ["./Assets/product_images/6a_ashawanda.JPG", "./Assets/product_images/6b_ashawanda.JPG"],
        price: "Consultar"
    },
    {
        id: "te-verde-moringa",
        name: "Té Verde + Ácido Ascórbico + Moringa",
        category: "suplementos",
        shortDesc: "Mezcla especializada de antioxidantes y vitaminas.",
        longDesc: "Esta mezcla especializada ofrece una poderosa fusión de beneficios: la moringa nutre y revitaliza con sus vitaminas y minerales, el té verde aporta antioxidantes que ayudan a quemar grasa y mejorar la concentración, y el ácido ascórbico (vitamina C) refuerza las defensas y promueve una piel radiante. ¡Un trío perfecto para energía, protección y bienestar diario!",
        benefits: [
            "Actividad hipoglucemiante.",
            "Anti inflamatorio natural.",
            "Estimula el sistema inmune.",
            "Mejora la función de la vesícula."
        ],
        presentation: "60 Cápsulas 450mg c/u",
        images: ["./Assets/product_images/4a_te_verde_x.png"],
        price: "Consultar"
    },
    {
        id: "moringa",
        name: "Moringa",
        category: "suplementos",
        shortDesc: "Planta supernutritiva cargada de vitaminas.",
        longDesc: "Es una planta supernutritiva, cargada de vitaminas, minerales y antioxidantes que ayudan a fortalecer el sistema inmune, mejorar la energía y apoyar el bienestar general. ¡El impulso natural que tu cuerpo necesita cada día!",
        benefits: [
            "Actividad hipoglucemiante.",
            "Regula los niveles de triglicéridos.",
            "Reduce la fatiga y mejora los niveles de energía."
        ],
        presentation: "60 Cápsulas 450mg c/u",
        images: ["./Assets/product_images/5a_moringa.png"],
        price: "Consultar"
    },
    {
        id: "4mg-b6",
        name: "4MG + B6",
        category: "suplementos",
        shortDesc: "Combina cuatro fuentes de magnesio con vitamina B6.",
        longDesc: "Este suplemento combina cuatro fuentes de magnesio (citrato, sulfato, cloruro y carbonato) junto con vitamina B6, ofreciendo un apoyo completo para el cuerpo. Sus beneficios incluyen la relajación muscular, aliviando tensión y calambres; el cuidado del sistema nervioso, reduciendo el estrés y mejorando el descanso; y un impulso energético al convertir mejor los alimentos en energía. ¡Un equilibrio perfecto para sentirte fuerte y lleno de energía cada día!",
        benefits: [
            "Combate el cansancio y la fatiga.",
            "Contribuye al funcionamiento normal del sistema nervioso.",
            "Mantiene la función psicológica normal (reducción de ansiedad).",
            "Estimula la función muscular."
        ],
        presentation: "60 Cápsulas 450mg c/u",
        images: ["./Assets/product_images/6a_4mg.png"],
        price: "Consultar"
    },
    {
        id: "curcuma-jengibre-moringa",
        name: "Cúrcuma + Jengibre + Moringa",
        category: "suplementos",
        shortDesc: "Combinación para combatir inflamación y dolor.",
        longDesc: "Esta fenomenal combinación ofrece múltiples beneficios. La cúrcuma tiene propiedades anti inflamatorias y antioxidantes que promueven la salud articular, el jengibre apoya la digestión y mejora la circulación, y la moringa fortalece el sistema inmunológico y aumenta la energía. Juntos, forman una fórmula poderosa para revitalizar tu bienestar de forma natural.",
        benefits: [
            "Anti inflamatorio.",
            "Antiviral.",
            "Estimulante del sistema digestivo.",
            "Auxiliar en la disminución de los niveles de colesterol y triglicéridos."
        ],
        presentation: "60 Cápsulas 400mg c/u",
        images: ["./Assets/product_images/8a_curcuma.JPG", "./Assets/product_images/8b_curcuma.JPG"],
        price: "Consultar"
    },
    {
        id: "citrato-magnesio",
        name: "Citrato de Magnesio",
        category: "suplementos",
        shortDesc: "Ayuda a regular la función muscular y nerviosa.",
        longDesc: "Es un mineral esencial que ayuda a regular la función muscular y nerviosa, promueve la salud ósea y apoya la producción de energía. Su forma altamente biodisponible lo hace fácil de absorber, proporcionando un impulso natural para mantener el cuerpo equilibrado y lleno de vitalidad. ¡Descubre el poder del magnesio para mejorar tu bienestar diario!",
        benefits: [
            "Mejora la función muscular y nerviosa.",
            "Regula la acidez.",
            "Reduce la fatiga.",
            "Mejora la calidad de sueño y el estado de ánimo."
        ],
        presentation: "60 Cápsulas 500mg c/u",
        images: ["./Assets/product_images/9a_citrato.JPG", "./Assets/product_images/9b_citrato.JPG"],
        price: "Consultar"
    },

    // --- CUIDADO PERSONAL ---
    {
        id: "sunscreen",
        name: "Sunscreen",
        category: "cuidado-personal",
        shortDesc: "Hidrata y protege de los rayos UVA y UVB.",
        longDesc: "La exposición al sol sin la correcta protección acelera el envejecimiento de la piel. Por tal motivo, el uso de protectores solares es altamente recomendable en la rutina diaria.\n\nAlgunos de los beneficios al utilizar el protector Sunscreen son:",
        benefits: [
            "Hidrata la piel.",
            "Protege de los rayos UVA y UVB.",
            "No deja rastro blanco en la piel.",
            "Evita la aparición de manchas.",
            "Prolonga el bronceado.",
            "Contiene colágeno + ácido hialurónico."
        ],
        presentation: "120ml / 100ml / 60ml",
        images: ["./Assets/product_images/7a_sunscreen_x.png", "./Assets/product_images/7d_suncreen_x.png"],
        price: "Consultar"
    },
    {
        id: "repelente",
        name: "Repelente",
        category: "cuidado-personal",
        shortDesc: "Protección efectiva contra mosquitos, libre de químicos fuertes.",
        longDesc: "\"Protección efectiva contra mosquitos. Nuestro repelente ofrece una barrera duradera y libre de químicos fuertes para cuidar tu piel y alejar insectos molestos. Ideal para cualquier aventura al aire libre. ¡Mantén a los mosquitos lejos y disfruta de tu día sin interrupciones!\"",
        benefits: [
            "Ideal para pieles sensibles.",
            "Fácil aplicación.",
            "Aroma agradable.",
            "Se puede aplicar a niños mayores de 2 meses."
        ],
        presentation: "60ml",
        images: ["./Assets/product_images/8a_repelente_x.png"],
        price: "Consultar"
    },
    {
        id: "spaydol",
        name: "Spaydol Gel",
        category: "cuidado-personal",
        shortDesc: "Auxiliar en inflamación y dolor muscular.",
        longDesc: "Gel auxiliar en el tratamiento de inflamación, dolor muscular y articular. Además, tiene una consistencia muy agradable.",
        benefits: [
            "Alivia dolores reumáticos, dolor de espalda, traumatismos.",
            "Anti inflamatorio.",
            "Sensación fría que disminuye la inflamación localizada.",
            "Elimina y previene moretones.",
            "Estimula la circulación y desinflama músculos.",
            "Alivia el dolor provocado por torceduras, golpes o pequeñas lesiones."
        ],
        presentation: "250g",
        images: ["./Assets/product_images/10a_spaydol.JPG", "./Assets/product_images/10b_spaydol.JPG"],
        price: "Consultar"
    },
    {
        id: "gel-facial",
        name: "Gel Facial Hidratante",
        category: "cuidado-personal",
        shortDesc: "Con elastina que aporta flexibilidad.",
        longDesc: "Con elastina que aporta flexibilidad y elasticidad a la piel ayudando que no se rompan los tejidos.",
        benefits: [
            "La vitamina E tiene un potente efecto antienvejecimiento gracias a sus propiedades antioxidantes.",
            "La combinación de sus ingredientes es un aliado para luchar contra el envejecimiento prematuro, mejora las condiciones de la piel y da oportunidad para realizar la regeneración celular de la dermis."
        ],
        presentation: "50g",
        images: ["./Assets/product_images/11a_gel_facial.JPG", "./Assets/product_images/11b_gel_facial.JPG"],
        price: "Consultar"
    },
    {
        id: "crema-facial",
        name: "Crema Facial con Colágeno + Ácido Hialurónico",
        category: "cuidado-personal",
        shortDesc: "Hidrata profundamente y rejuvenece la piel.",
        longDesc: "Hidrata profundamente y rejuvenece la piel, mejorando su firmeza y elasticidad. Su fórmula reduce líneas finas y aporta volumen natural, dejando una piel suave, radiante y visiblemente saludable, ideal para una rutina de cuidado facial efectiva.",
        benefits: [
            "Hidratación profunda y duradera.",
            "Aumenta la elasticidad y firmeza de la piel.",
            "Contribuye a que la piel esté más tersa y firme.",
            "Genera una barrera que protege a la piel de agentes externos.",
            "Nutre las pieles maduras."
        ],
        presentation: "50g",
        images: ["./Assets/product_images/12a_crema_facial.JPG"],
        price: "Consultar"
    },
    {
        id: "shampoo-biotina",
        name: "Shampoo Biotina + Colágeno + Bergamota",
        category: "cuidado-personal",
        shortDesc: "Revitaliza, fortalece y reduce la caída del cabello.",
        longDesc: "Revitaliza tu cabello con nuestro shampoo de biotina, colágeno y bergamota. La biotina fortalece y reduce la caída, mientras que el colágeno proporciona hidratación y suavidad. Con el frescor de la bergamota, este shampoo equilibra la grasa del cuero cabelludo, dejando tu cabello radiante y lleno de vida. ¡Transforma tu rutina de cuidado capilar!",
        benefits: [
            "Mejora considerablemente el crecimiento capilar.",
            "Hidrata y fortalece el cabello.",
            "Contiene Biotina y colágeno que mejora la apariencia del cabello.",
            "Con extracto de Bergamota que ayuda a desintoxicar el folículo para un nacimiento del cabello fuerte y sano.",
            "Efectividad ante la caída del cabello."
        ],
        presentation: "500ml",
        images: ["./Assets/product_images/9a_Shampoo.png"],
        price: "Consultar"
    },
    {
        id: "serum-antioxidante",
        name: "Serum Antioxidante",
        category: "cuidado-personal",
        shortDesc: "Previene arrugas y neutraliza radicales libres.",
        longDesc: "El aceite de jojoba, conocido por sus propiedades antioxidantes, es ideal para prevenir arrugas y neutralizar los radicales libres, manteniendo la piel joven y radiante de forma natural.",
        benefits: [
            "Su combinación de aceites esenciales en conjunto con aceite de Rosa Mosqueta actúa en la regulación de la elasticidad cutánea y en el restablecimiento de la hidratación.",
            "Formula regeneradora que ayuda en el proceso de cicatrización y minimiza marcas de la piel.",
            "Nutre a profundidad la piel ayudando a reparar y combatir las arrugas y las líneas de expresión."
        ],
        presentation: "30ml",
        images: ["./Assets/product_images/10a_serum_x.png"],
        price: "Consultar"
    },
    {
        id: "vi-musc",
        name: "Vi Musc",
        category: "cuidado-personal",
        shortDesc: "Aceite relajante con acción anti inflamatoria.",
        longDesc: "Aceite relajante con acción anti inflamatoria ideal para la prevención de calambres. Producto 100% orgánico hecho a base de: Guayacol, mentol, eucalipto, aceite de almendras, alcanfor, aceite de pepino, trementina, salicilato de metilo, ajo y cebolla.",
        benefits: [
            "Anti inflamatorio muscular.",
            "Fácil de aplicar.",
            "Estimula la circulación y desinflama músculos.",
            "Alivia el dolor provocado por pequeñas lesiones."
        ],
        presentation: "50ml",
        images: ["./Assets/product_images/14a_musc.JPG"],
        price: "Consultar"
    }
];

## public_html/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://enzava.com.mx/</loc>
    <lastmod>2026-01-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://enzava.com.mx/index.html</loc>
    <lastmod>2026-01-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://enzava.com.mx/suplementos.html</loc>
    <lastmod>2026-01-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://enzava.com.mx/cuidado-personal.html</loc>
    <lastmod>2026-01-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://enzava.com.mx/contacto.html</loc>
    <lastmod>2026-01-20</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

## public_html/index.html
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Enzava Wellness | Suplementos y Cuidado Personal</title>
  <meta name="description"
    content="Catálogo oficial de Enzava. Suplementos alimenticios y cosméticos naturales en Guadalajara, Jalisco.">

  <link rel="icon" type="image/png" href="./Assets/favicon/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="./Assets/favicon/favicon.svg" />
  <link rel="shortcut icon" href="./Assets/favicon/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="./Assets/favicon/apple-touch-icon.png" />
  <link rel="manifest" href="./Assets/favicon/site.webmanifest" />

  <!-- Google Fonts -->
  <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=Epilogue:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
    rel="stylesheet" />

  <!-- Material Symbols -->
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
    rel="stylesheet" />

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: "#BFDB72", // Verde marca
            "primary-dark": "#a8c55e",
            secondary: "#4F4F4F", // Gris Oscuro (Texto principal)
            tertiary: "#A5A5A5", // Gris Claro (Texto secundario)
            bgLight: "#fafafa",
            bgDark: "#262c21",
          },
          fontFamily: {
            sans: ["Manrope", "sans-serif"],
            serif: ["Epilogue", "serif"],
          },
        },
      },
    };
  </script>
  <style>
    /* Estilos base */
    body {
      font-family: 'Manrope', sans-serif;
      color: #4F4F4F;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Epilogue', serif;
    }

    .glass {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
  </style>
</head>

<body class="bg-bgLight antialiased flex flex-col min-h-screen">

  <!-- Navbar will be injected by layout.js -->

  <!-- SECCIÓN: INICIO (Hero) -->
  <section id="inicio" class="relative pt-12 pb-20 px-6 bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <div class="z-10 flex flex-col items-start gap-6">
        <span
          class="inline-block px-3 py-1 rounded-full bg-primary/20 text-secondary text-xs font-bold uppercase tracking-wider">
          Bienestar Integral
        </span>
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-secondary">
          ENZAVA es bienestar <br />
          <span class="text-primary italic">por dentro y por fuera.</span>
        </h1>
        <div class="space-y-4 text-base md:text-lg text-tertiary max-w-lg leading-relaxed">
          <p>Porque cuidarte no es solo lo que ves, sino lo que tu cuerpo siente.</p>
          <p class="flex items-center gap-2">
            <span class="text-xl">🌿</span> Suplementos que nutren desde adentro
          </p>
          <p class="flex items-center gap-2">
            <span class="text-xl">✨</span> Productos que cuidan tu piel y tu equilibrio
          </p>
          <p class="font-medium text-secondary">
            En ENZAVA creemos en el cuidado consciente, la calidad real y el bienestar integral.
          </p>
          <p class="flex items-center gap-2 font-bold text-primary">
            <span class="text-xl">💚</span> Sentirte bien empieza contigo.
          </p>
        </div>

        <div class="flex flex-wrap gap-4 mt-4">
          <a href="#categorias"
            class="px-8 py-4 bg-primary text-white text-base font-bold rounded-xl hover:bg-primary-dark transition-all shadow-lg hover:-translate-y-1">
            Ver Productos
          </a>
          <a href="#nosotros"
            class="px-8 py-4 bg-white border border-gray-200 text-secondary text-base font-bold rounded-xl hover:bg-gray-50 transition-all">
            Conócenos
          </a>
        </div>

      </div>
      <!-- Hero Image -->
      <div class="relative flex justify-center items-center">
        <!-- Gradient Background -->
        <div
          class="absolute inset-0 bg-gradient-to-br from-primary/30 to-white/10 rounded-[2rem] rotate-3 scale-95 -z-10 blur-xl">
        </div>

        <!-- Image Container -->
        <div
          class="relative w-full h-auto rounded-[2rem] p-2 bg-white/30 backdrop-blur-md border-[3px] border-white/80 shadow-[0_20px_50px_rgba(0,0,0,0.15)]">
          <img src="./Assets/product_images/enzava_hero_sin_fondo.png" alt="Productos Enzava"
            class="w-full h-auto object-contain drop-shadow-xl hover:scale-105 transition-transform duration-500 rounded-[1.8rem]" />
        </div>
      </div>
    </div>
  </section>

  <!-- SECCIÓN: NOSOTROS -->
  <section id="nosotros" class="py-20 bg-bgLight px-6">
    <div class="max-w-4xl mx-auto text-center space-y-8">
      <span class="text-primary font-bold tracking-widest uppercase text-sm">¿Quiénes Somos?</span>
      <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary">
        Comprometidos con tu satisfacción y salud
      </h2>
      <p class="text-lg text-tertiary leading-relaxed">
        Enzava es una empresa dedicada a la fabricación y comercialización de suplementos alimenticios y productos de
        cuidado personal y belleza.
        Nos especializamos en ofrecer soluciones integrales para el bienestar, brindando productos de alta calidad que
        promueven un estilo de vida saludable y equilibrado.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-8 pt-8">
        <div class="flex flex-col items-center gap-3">
          <div class="w-16 h-16 rounded-full bg-white shadow-md flex items-center justify-center text-primary">
            <span class="material-symbols-outlined text-3xl">science</span>
          </div>
          <h3 class="font-bold text-secondary">Alta Calidad</h3>
        </div>
        <div class="flex flex-col items-center gap-3">
          <div class="w-16 h-16 rounded-full bg-white shadow-md flex items-center justify-center text-primary">
            <span class="material-symbols-outlined text-3xl">eco</span>
          </div>
          <h3 class="font-bold text-secondary">Ingredientes Naturales</h3>
        </div>
        <div class="flex flex-col items-center gap-3">
          <div class="w-16 h-16 rounded-full bg-white shadow-md flex items-center justify-center text-primary">
            <span class="material-symbols-outlined text-3xl">favorite</span>
          </div>
          <h3 class="font-bold text-secondary">Bienestar Integral</h3>
        </div>
      </div>
    </div>
  </section>

  <!-- TEASER DE CATEGORÍAS -->
  <section id="categorias" class="py-20 px-6 bg-white">
    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Suplementos Card -->
      <div class="relative overflow-hidden rounded-3xl bg-secondary text-white group cursor-pointer h-96">
        <img src="./Assets/product_images/1a_astaxantina.JPG"
          class="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:scale-105 transition-transform duration-700"
          alt="Suplementos">
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-10 flex flex-col justify-end">
          <h3 class="text-3xl font-serif font-bold mb-2">Suplementos Alimenticios</h3>
          <p class="text-gray-300 mb-6 max-w-sm">Nutrición avanzada para potenciar tu salud y vitalidad diaria.</p>
          <a href="suplementos.html"
            class="inline-flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all">
            Ver Todos los Suplementos <span class="material-symbols-outlined">arrow_forward</span>
          </a>
        </div>
      </div>

      <!-- Cuidado Personal Card -->
      <div class="relative overflow-hidden rounded-3xl bg-primary/20 group cursor-pointer h-96">
        <img src="./Assets/product_images/11a_gel_facial.JPG"
          class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-multiply group-hover:scale-105 transition-transform duration-700"
          alt="Cuidado Personal">
        <div class="absolute inset-0 bg-gradient-to-t from-secondary/90 to-transparent p-10 flex flex-col justify-end">
          <h3 class="text-3xl font-serif font-bold text-white mb-2">Cuidado Personal</h3>
          <p class="text-gray-200 mb-6 max-w-sm">Belleza natural y consciente para nutrir tu piel y cabello.</p>
          <a href="cuidado-personal.html"
            class="inline-flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all">
            Ver Línea Cosmética <span class="material-symbols-outlined">arrow_forward</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Banner Separator -->
  <section class="py-16 bg-bgLight text-center px-6">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-2xl md:text-4xl font-serif font-bold text-secondary mb-6">Tu cuerpo es tu templo</h2>
      <p class="text-tertiary mb-8">Cuidamos cada detalle de nuestras fórmulas para asegurarnos de que recibas solo lo
        mejor de la naturaleza.</p>
      <a href="https://wa.me/5213325808724"
        class="inline-block bg-primary hover:bg-primary-dark text-white px-8 py-3 rounded-full font-bold transition-colors">
        Solicitar Asesoría Personalizada
      </a>
    </div>
  </section>

  <!-- Footer will be injected by layout.js -->

  <script src="js/layout.js"></script>
  <script type="module">
    // Logic specific to home page if any
  </script>
</body>

</html>
## public_html/suplementos.html
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Suplementos | Enzava Wellness</title>

    <link rel="icon" type="image/png" href="./Assets/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="./Assets/favicon/favicon.svg" />
    <link rel="shortcut icon" href="./Assets/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="./Assets/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="./Assets/favicon/site.webmanifest" />

    <!-- Google Fonts & Icons -->
    <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=Epilogue:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
        rel="stylesheet" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#BFDB72",
                        "primary-dark": "#a8c55e",
                        secondary: "#4F4F4F",
                        tertiary: "#A5A5A5",
                        bgLight: "#fafafa",
                        bgDark: "#262c21",
                    },
                    fontFamily: {
                        sans: ["Manrope", "sans-serif"],
                        serif: ["Epilogue", "serif"],
                    },
                },
            },
        };
    </script>
    <style>
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body class="bg-bgLight antialiased flex flex-col min-h-screen">
    <!-- Main Content -->
    <main class="flex-grow py-12 px-6">
        <div class="max-w-7xl mx-auto">
            <!-- Header Section -->
            <div class="mb-12 border-l-4 border-primary pl-6">
                <h1 class="text-4xl md:text-5xl font-serif font-bold text-secondary mb-2">Suplementos Alimenticios</h1>
                <p class="text-tertiary max-w-2xl text-lg">Descubre el poder de nuestros suplementos y da el siguiente
                    paso hacia una vida más saludable y llena de energía.</p>
            </div>

            <!-- Grid -->
            <div id="products-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <!-- Rendered by JS -->
            </div>
        </div>
    </main>

    <!-- Scripts -->
    <script src="js/products.js"></script>
    <script src="js/layout.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('products-grid');
            const items = products.filter(p => p.category === 'suplementos');

            if (items.length === 0) {
                container.innerHTML = '<p class="col-span-full text-center text-gray-400">No hay productos disponibles por el momento.</p>';
                return;
            }

            container.innerHTML = items.map(item => `
          <div class="group bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full">
            <a href="producto.html?id=${item.id}" class="relative aspect-square overflow-hidden bg-gray-50 flex items-center justify-center p-6 block cursor-pointer">
              <img src="${item.images[0]}" alt="${item.name}" class="object-contain w-full h-full group-hover:scale-105 transition-transform duration-500">
              <div class="absolute bottom-0 inset-x-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform">
                <span class="block w-full text-center bg-white/90 backdrop-blur text-secondary font-bold py-2 rounded-lg shadow-sm">
                  Ver Detalles
                </span>
              </div>
            </a>
            <div class="p-5 flex-1 flex flex-col">
              <h3 class="font-bold font-serif text-lg text-secondary mb-2">
                <a href="producto.html?id=${item.id}" class="group-hover:text-primary transition-colors">${item.name}</a>
              </h3>
              <p class="text-sm text-tertiary mb-4 line-clamp-2 flex-1">${item.shortDesc}</p>
              <div class="pt-4 border-t border-gray-100 flex justify-between items-center gap-2">
                <a href="producto.html?id=${item.id}" class="text-secondary text-sm font-bold hover:text-primary transition-colors">Ver Detalles</a>
                <a href="https://wa.me/5213325808724?text=Hola,%20me%20interesa%20el%20producto%20${encodeURIComponent(item.name)}" target="_blank" class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/></svg>
                </a>
              </div>
            </div>
          </div>
        `).join('');
        });
    </script>
</body>

</html>
## public_html/cuidado-personal.html
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cuidado Personal | Enzava Wellness</title>

    <link rel="icon" type="image/png" href="./Assets/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="./Assets/favicon/favicon.svg" />
    <link rel="shortcut icon" href="./Assets/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="./Assets/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="./Assets/favicon/site.webmanifest" />

    <!-- Google Fonts & Icons -->
    <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=Epilogue:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
        rel="stylesheet" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#BFDB72",
                        "primary-dark": "#a8c55e",
                        secondary: "#4F4F4F",
                        tertiary: "#A5A5A5",
                        bgLight: "#fafafa",
                        bgDark: "#262c21",
                    },
                    fontFamily: {
                        sans: ["Manrope", "sans-serif"],
                        serif: ["Epilogue", "serif"],
                    },
                },
            },
        };
    </script>
    <style>
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body class="bg-bgLight antialiased flex flex-col min-h-screen">
    <!-- Main Content -->
    <main class="flex-grow py-12 px-6">
        <div class="max-w-7xl mx-auto">
            <!-- Header Section -->
            <div class="mb-12 border-l-4 border-secondary pl-6">
                <h1 class="text-4xl md:text-5xl font-serif font-bold text-secondary mb-2">Cuidado Personal y Cosméticos
                </h1>
                <p class="text-tertiary max-w-2xl text-lg">Realza tu belleza natural con productos libres de químicos
                    agresivos, diseñados para nutrir y proteger.</p>
            </div>

            <!-- Grid -->
            <div id="products-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <!-- Rendered by JS -->
            </div>
        </div>
    </main>

    <!-- Scripts -->
    <script src="js/products.js"></script>
    <script src="js/layout.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('products-grid');
            const items = products.filter(p => p.category === 'cuidado-personal');

            if (items.length === 0) {
                container.innerHTML = '<p class="col-span-full text-center text-gray-400">No hay productos disponibles por el momento.</p>';
                return;
            }

            container.innerHTML = items.map(item => `
          <div class="group bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full">
            <a href="producto.html?id=${item.id}" class="relative aspect-square overflow-hidden bg-gray-50 flex items-center justify-center p-6 block cursor-pointer">
              <img src="${item.images[0]}" alt="${item.name}" class="object-contain w-full h-full group-hover:scale-105 transition-transform duration-500">
              <div class="absolute bottom-0 inset-x-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform">
                <span class="block w-full text-center bg-white/90 backdrop-blur text-secondary font-bold py-2 rounded-lg shadow-sm">
                  Ver Detalles
                </span>
              </div>
            </a>
            <div class="p-5 flex-1 flex flex-col">
              <h3 class="font-bold font-serif text-lg text-secondary mb-2">
                <a href="producto.html?id=${item.id}" class="group-hover:text-primary transition-colors">${item.name}</a>
              </h3>
              <p class="text-sm text-tertiary mb-4 line-clamp-2 flex-1">${item.shortDesc}</p>
              <div class="pt-4 border-t border-gray-100 flex justify-between items-center gap-2">
                <a href="producto.html?id=${item.id}" class="text-secondary text-sm font-bold hover:text-primary transition-colors">Ver Detalles</a>
                <a href="https://wa.me/5213325808724?text=Hola,%20me%20interesa%20el%20producto%20${encodeURIComponent(item.name)}" target="_blank" class="w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/></svg>
                </a>
              </div>
            </div>
          </div>
        `).join('');
        });
    </script>
</body>

</html>
## public_html/producto.html
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detalles del Producto | Enzava Wellness</title>

    <link rel="icon" type="image/png" href="./Assets/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="./Assets/favicon/favicon.svg" />
    <link rel="shortcut icon" href="./Assets/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="./Assets/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="./Assets/favicon/site.webmanifest" />

    <!-- Google Fonts -->
    <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=Epilogue:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet" />

    <!-- Material Symbols -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
        rel="stylesheet" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#BFDB72",
                        "primary-dark": "#a8c55e",
                        secondary: "#4F4F4F",
                        tertiary: "#A5A5A5",
                        bgLight: "#fafafa",
                        bgDark: "#262c21",
                    },
                    fontFamily: {
                        sans: ["Manrope", "sans-serif"],
                        serif: ["Epilogue", "serif"],
                    },
                },
            },
        };
    </script>
    <style>
        /* Estilos base */
        body {
            font-family: 'Manrope', sans-serif;
            color: #4F4F4F;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Epilogue', serif;
        }

        /* Glassmorphism helpers */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body class="bg-bgLight antialiased flex flex-col min-h-screen">

    <!-- Navbar will be injected by layout.js -->

    <!-- Main Content -->
    <main class="flex-grow py-12 px-6">
        <div class="max-w-7xl mx-auto">
            <!-- Breadcrumb -->
            <nav class="flex items-center gap-2 text-sm text-tertiary mb-8">
                <a href="index.html" class="hover:text-primary">Inicio</a>
                <span class="material-symbols-outlined text-sm">chevron_right</span>
                <a id="breadcrumb-category-link" href="#" class="capitalize hover:text-primary">Productos</a>
                <span class="material-symbols-outlined text-sm">chevron_right</span>
                <span id="breadcrumb-name" class="font-bold text-secondary">Producto</span>
            </nav>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20">
                <!-- Left: Image Gallery -->
                <div class="space-y-6">
                    <div
                        class="aspect-square bg-white rounded-3xl shadow-sm border border-gray-100 flex items-center justify-center p-8 overflow-hidden relative group">
                        <img id="main-image" src="" alt="Producto"
                            class="max-w-full max-h-full object-contain transition-transform duration-500 group-hover:scale-105">
                    </div>
                    <div id="thumbnails" class="flex gap-4 overflow-x-auto pb-2">
                        <!-- Dynamically populated -->
                    </div>
                </div>

                <!-- Right: Details -->
                <div class="flex flex-col">
                    <span id="product-category"
                        class="text-primary font-bold tracking-widest uppercase text-sm mb-2">Categoría</span>
                    <h1 id="product-name" class="text-4xl md:text-5xl font-serif font-bold text-secondary mb-6">Nombre
                        del Producto</h1>

                    <div class="prose prose-lg text-tertiary mb-8">
                        <p id="product-desc">Descripción larga del producto...</p>
                    </div>

                    <div class="mb-8">
                        <h3 class="text-xl font-bold font-serif text-secondary mb-4 flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">verified</span>
                            Beneficios Principales
                        </h3>
                        <ul id="product-benefits" class="space-y-3">
                            <!-- List items -->
                        </ul>
                    </div>

                    <div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm mb-8">
                        <div class="flex items-center gap-4 mb-2">
                            <div
                                class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined">package_2</span>
                            </div>
                            <div>
                                <span class="text-xs text-tertiary font-bold uppercase block">Presentación</span>
                                <span id="product-presentation" class="font-bold text-secondary text-lg">60
                                    Cápsulas</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-auto pt-6 border-t border-gray-200">
                        <a id="whatsapp-link" href="#" target="_blank"
                            class="w-full flex items-center justify-center gap-3 bg-primary hover:bg-primary-dark text-white text-lg font-bold py-4 rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all">
                            <span>Solicitar Producto por WhatsApp</span>
                            <!-- WhatsApp Icon -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 16 16">
                                <path
                                    d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z" />
                            </svg>
                        </a>
                        <p class="text-center text-sm text-tertiary mt-4">
                            Envío a todo México. Consulta disponibilidad.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer will be injected by layout.js -->

    <script src="js/products.js"></script>
    <script src="js/layout.js"></script>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const productId = urlParams.get('id');

        const product = products.find(p => p.id === productId);

        if (!product) {
            document.querySelector('main').innerHTML = `
          <div class="text-center py-20">
            <h1 class="text-3xl font-bold text-secondary mb-4">Producto no encontrado</h1>
            <a href="index.html" class="text-primary hover:underline">Volver al inicio</a>
          </div>
        `;
        } else {
            // Populate Data
            document.title = `${product.name} | Enzava Wellness`;

            const categoryLink = product.category === 'suplementos' ? 'suplementos.html' : 'cuidado-personal.html';
            const categoryName = product.category === 'suplementos' ? 'Suplementos' : 'Cuidado Personal';

            const breadcrumbLink = document.getElementById('breadcrumb-category-link');
            breadcrumbLink.href = categoryLink;
            breadcrumbLink.textContent = categoryName;

            document.getElementById('breadcrumb-name').textContent = product.name;
            document.getElementById('product-category').textContent = categoryName;
            document.getElementById('product-name').textContent = product.name;
            document.getElementById('product-desc').textContent = product.longDesc;
            document.getElementById('product-presentation').textContent = product.presentation;

            // Benefits
            const benefitsList = document.getElementById('product-benefits');
            product.benefits.forEach(benefit => {
                const li = document.createElement('li');
                li.className = "flex items-start gap-3 text-tertiary";
                li.innerHTML = `<span class="material-symbols-outlined text-primary text-sm mt-1">check_circle</span> <span>${benefit}</span>`;
                benefitsList.appendChild(li);
            });

            // Images
            const mainImage = document.getElementById('main-image');
            const thumbnails = document.getElementById('thumbnails');

            // Verify images array
            const images = (product.images && product.images.length > 0) ? product.images : ["./Assets/placeholder.png"]; // Fallback if no images

            mainImage.src = images[0];

            if (images.length > 1) {
                images.forEach((img, index) => {
                    const thumb = document.createElement('button');
                    thumb.className = `w-20 h-20 rounded-xl border-2 ${index === 0 ? 'border-primary' : 'border-transparent'} overflow-hidden flex-shrink-0 bg-white p-2 hover:border-primary/50 transition-colors`;
                    thumb.innerHTML = `<img src="${img}" class="w-full h-full object-contain">`;
                    thumb.onclick = () => {
                        mainImage.src = img;
                        // Update active state
                        Array.from(thumbnails.children).forEach(c => c.classList.replace('border-primary', 'border-transparent'));
                        thumb.classList.replace('border-transparent', 'border-primary');
                    };
                    thumbnails.appendChild(thumb);
                });
            }

            // WhatsApp Link
            const message = `Hola, me gustaría más información sobre el producto: ${product.name} (${product.presentation})`;
            document.getElementById('whatsapp-link').href = `https://wa.me/5213325808724?text=${encodeURIComponent(message)}`;
        }
    </script>
</body>

</html>
## public_html/contacto.html
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contacto | Enzava Wellness</title>
    <meta name="description"
        content="Ponte en contacto con Enzava. Atención personalizada para suplementos y cuidado personal.">

    <link rel="icon" type="image/png" href="./Assets/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="./Assets/favicon/favicon.svg" />
    <link rel="shortcut icon" href="./Assets/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="./Assets/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="./Assets/favicon/site.webmanifest" />

    <!-- Google Fonts -->
    <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=Epilogue:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap"
        rel="stylesheet" />

    <!-- Material Symbols -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
        rel="stylesheet" />

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#BFDB72", // Verde marca
                        "primary-dark": "#a8c55e",
                        secondary: "#4F4F4F", // Gris Oscuro (Texto principal)
                        tertiary: "#A5A5A5", // Gris Claro (Texto secundario)
                        bgLight: "#fafafa",
                        bgDark: "#262c21",
                    },
                    fontFamily: {
                        sans: ["Manrope", "sans-serif"],
                        serif: ["Epilogue", "serif"],
                    },
                },
            },
        };
    </script>
    <style>
        /* Estilos base */
        body {
            font-family: 'Manrope', sans-serif;
            color: #4F4F4F;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Epilogue', serif;
        }

        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>

<body class="bg-bgLight antialiased flex flex-col min-h-screen">

    <!-- Navbar will be injected by layout.js -->

    <!-- Header -->
    <section class="bg-secondary py-20 px-6 relative overflow-hidden">
        <div
            class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1544367563-12123d896889?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20">
        </div>
        <div class="max-w-7xl mx-auto text-center relative z-10">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Estamos aquí para ti</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                ¿Tienes dudas o necesitas asesoría personalizada? Contáctanos y con gusto te atenderemos.
            </p>
        </div>
    </section>

    <!-- Contact Info Grid -->
    <section class="py-20 px-6 max-w-7xl mx-auto w-full">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">

            <!-- Contact Details -->
            <div class="space-y-8">
                <h2 class="text-3xl font-bold text-secondary">Información de Contacto</h2>
                <p class="text-tertiary">
                    Utiliza cualquiera de nuestros canales oficiales para comunicarte con nosotros.
                </p>

                <div class="space-y-6">
                    <!-- WhatsApp -->
                    <a href="https://wa.me/5213325808724" target="_blank"
                        class="flex items-center gap-4 group p-4 rounded-2xl bg-white hover:shadow-md transition-all border border-transparent hover:border-gray-100">
                        <div
                            class="w-12 h-12 bg-[#25D366]/10 rounded-full flex items-center justify-center text-[#25D366] group-hover:scale-110 transition-transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                viewBox="0 0 16 16">
                                <path
                                    d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm text-tertiary font-bold uppercase tracking-wider">WhatsApp</p>
                            <p class="text-lg font-bold text-secondary">33 2580 8724</p>
                        </div>
                    </a>
                    </a>

                    <!-- Teléfono -->
                    <a href="tel:+523325808724"
                        class="flex items-center gap-4 group p-4 rounded-2xl bg-white hover:shadow-md transition-all border border-transparent hover:border-gray-100">
                        <div
                            class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
                            <span class="material-symbols-outlined text-3xl">call</span>
                        </div>
                        <div>
                            <p class="text-sm text-tertiary font-bold uppercase tracking-wider">Teléfono</p>
                            <p class="text-lg font-bold text-secondary">33 2580 8724</p>
                        </div>
                    </a>

                    <!-- Email -->
                    <a href="mailto:hola@enzava.com.mx"
                        class="flex items-center gap-4 group p-4 rounded-2xl bg-white hover:shadow-md transition-all border border-transparent hover:border-gray-100">
                        <div
                            class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
                            <span class="material-symbols-outlined text-3xl">mail</span>
                        </div>
                        <div>
                            <p class="text-sm text-tertiary font-bold uppercase tracking-wider">Correo Electrónico</p>
                            <p class="text-lg font-bold text-secondary">hola@enzava.com.mx</p>
                        </div>
                    </a>

                    <!-- Location -->
                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-white border border-transparent">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary">
                            <span class="material-symbols-outlined text-3xl">location_on</span>
                        </div>
                        <div>
                            <p class="text-sm text-tertiary font-bold uppercase tracking-wider">Ubicación</p>
                            <p class="text-lg font-bold text-secondary">Guadalajara, Jalisco, México.</p>
                        </div>
                    </div>
                </div>

                <!-- Social Media -->
                <div class="pt-8 border-t border-gray-200">
                    <h3 class="text-xl font-bold text-secondary mb-4">Síguenos en Redes Sociales</h3>
                    <div class="flex gap-4">
                        <a href="https://www.facebook.com/enzavaproductos" target="_blank"
                            class="flex items-center gap-2 bg-[#1877F2] text-white px-5 py-3 rounded-xl hover:opacity-90 transition-opacity">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                            </svg>
                            <span class="font-bold">Facebook</span>
                        </a>
                        <a href="https://www.instagram.com/enzava_productos/" target="_blank"
                            class="flex items-center gap-2 bg-gradient-to-tr from-[#f09433] via-[#dc2743] to-[#bc1888] text-white px-5 py-3 rounded-xl hover:opacity-90 transition-opacity">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                <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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.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.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                            </svg>
                            <span class="font-bold">Instagram</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Quick Message / Box -->
            <div class="bg-primary/20 p-8 rounded-3xl sticky top-24">
                <h3 class="text-2xl font-serif font-bold text-secondary mb-4">¿Listo para empezar?</h3>
                <p class="text-secondary mb-6">
                    Transforma tu bienestar hoy mismo. Nuestros asesores están listos para guiarte en el uso de nuestros
                    suplementos y productos de cuidado personal.
                </p>
                <div class="bg-white p-6 rounded-2xl shadow-sm mb-6">
                    <h4 class="font-bold text-primary mb-2">Horario de Atención</h4>
                    <p class="text-sm text-tertiary">Lunes a Viernes: 9:00 AM - 6:00 PM</p>
                    <p class="text-sm text-tertiary">Sábado: 9:00 AM - 2:00 PM</p>
                </div>
                <a href="https://wa.me/5213325808724" target="_blank"
                    class="w-full block text-center bg-primary hover:bg-primary-dark text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:translate-y-px">
                    Enviar Mensaje por WhatsApp
                </a>
            </div>

        </div>
    </section>

    <!-- Footer will be injected by layout.js -->

    <script src="js/layout.js"></script>
</body>

</html>