Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LEIS - LÚA</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #EDECE6; /* Marfil */
color: #2A2E2A; /* Carbón */
font-family: "Courier New", Courier, monospace;
padding-bottom: 120px; /* Espacio para el footer */
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
}
/* Encabezado centrado con el logotipo oficial */
header {
padding: 40px 8% 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 10;
}
.logo-container {
margin-bottom: 12px;
}
.tagline {
font-size: 11px;
letter-spacing: 3.5px;
color: #5D6B5A; /* Verde Oliva */
text-transform: uppercase;
font-weight: bold;
margin-top: 5px;
}
/* HERO - CARRUSEL DE IMÁGENES */
.hero-carousel {
position: relative;
width: 100%;
height: 60vh;
min-height: 400px;
max-height: 700px;
overflow: hidden;
background-color: #E3E2DC;
box-shadow: 0 10px 30px rgba(42, 46, 42, 0.05);
}
.carousel-track {
display: flex;
width: 300%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.carousel-slide {
width: 100%;
height: 100%;
position: relative;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Controles del Carrusel */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(237, 236, 230, 0.8);
border: 1px solid #2A2E2A;
color: #2A2E2A;
width: 46px;
height: 46px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
z-index: 15;
transition: all 0.25s ease;
}
.carousel-btn:hover {
background-color: #2A2E2A;
color: #EDECE6;
}
.carousel-btn.prev { left: 4%; }
.carousel-btn.next { right: 4%; }
/* Indicadores */
.carousel-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 15;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(42, 46, 42, 0.3);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.25s ease;
}
.carousel-dot.active {
background-color: #2A2E2A;
transform: scale(1.2);
}
/* SECCIÓN DE PRESENTACIÓN - ANCHO COMPLETO */
.intro-section {
width: 100%;
background-color: #E3E2DC;
padding: 60px 8%;
margin: 50px 0;
position: relative;
z-index: 10;
border-top: 1px solid #D6C8B1;
border-bottom: 1px solid #D6C8B1;
}
.story-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 768px) {
.story-container {
flex-direction: row;
align-items: stretch;
}
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.story-card {
flex: 1;
background-color: #EDECE6;
padding: 30px 24px;
border-radius: 16px;
border: 1px solid #2A2E2A;
box-shadow: 0 8px 24px rgba(42, 46, 42, 0.08);
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
animation: fadeInUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
.story-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 16px 36px rgba(42, 46, 42, 0.14);
}
.story-card:nth-child(1) { animation-delay: 0.1s; }
.story-card:nth-child(2) { animation-delay: 0.25s; }
.story-card:nth-child(3) { animation-delay: 0.4s; }
.story-card h3 {
font-size: 15px;
color: #2A2E2A;
margin-bottom: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1.5px;
border-bottom: 1px solid #2A2E2A;
padding-bottom: 8px;
}
.story-card p {
font-size: 13.5px;
line-height: 1.7;
color: #5D6B5A;
text-align: left;
}
.story-card p + p { margin-top: 12px; }
/* Contenedor principal estilo Flexbox */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 20px 8% 0;
display: flex;
flex-direction: column;
gap: 50px;
position: relative;
z-index: 10;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
align-items: center;
margin-top: 30px;
}
.column-left { flex: 1.1; }
.column-right { flex: 0.9; max-width: 480px; }
}
.img-box {
width: 100%;
max-width: 440px;
margin: 0 auto;
background-color: #D6C8B1;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(42, 46, 42, 0.08);
aspect-ratio: 5 / 6.5;
position: relative;
}
img.product-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.25s ease;
}
h1 {
font-size: 42px;
margin-bottom: 16px;
letter-spacing: 1px;
color: #2A2E2A;
font-weight: bold;
}
.description {
font-size: 14.5px;
line-height: 1.65;
color: #5D6B5A;
margin-bottom: 28px;
text-align: left;
}
/* Selector de Color Integrado */
.color-selector { margin: 28px 0; }
.color-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #5D6B5A;
margin-bottom: 12px;
display: block;
}
.color-label strong { color: #2A2E2A; }
.colors-row { display: flex; gap: 16px; }
.colors-row button {
width: 38px;
height: 38px;
border: 3px solid #EDECE6;
box-shadow: 0 0 0 1px #D6C8B1;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.colors-row button:hover { transform: scale(1.12); }
.colors-row button.active { box-shadow: 0 0 0 2px #C48A63; }
/* Botón de compra premium */
#buy {
display: block;
width: 100%;
padding: 20px;
border: none;
border-radius: 14px;
background-color: #2A2E2A;
color: #EDECE6;
font-size: 16px;
font-weight: bold;
font-family: "Courier New", Courier, monospace;
cursor: pointer;
transition: background-color 0.25s, transform 0.1s;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
box-shadow: 0 10px 20px rgba(42, 46, 42, 0.12);
}
#buy:hover { background-color: #C48A63; }
#buy:active { transform: scale(0.98); }
/* Ficha Técnica */
.specs {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid #D6C8B1;
font-size: 13.5px;
color: #5D6B5A;
}
.specs-row { display: flex; flex-wrap: wrap; gap: 20px; }
.spec-item { flex: 1 1 200px; line-height: 1.5; }
.spec-item strong {
display: block;
color: #2A2E2A;
margin-bottom: 4px;
font-size: 14px;
}
.highlight-red { color: #C44B38; font-weight: bold; }
/* BLOQUE DE LOGÍSTICA DE ENVÍOS */
.shipping-section {
width: 100%;
background-color: #E3E2DC;
padding: 40px 8%;
margin: 60px 0 20px;
border-top: 1px solid #D6C8B1;
border-bottom: 1px solid #D6C8B1;
position: relative;
z-index: 10;
}
.shipping-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px;
}
@media (min-width: 600px) {
.shipping-container {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
}
.shipping-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.shipping-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.shipping-icon svg {
width: 100%;
height: 100%;
}
.shipping-text {
font-size: 12px;
line-height: 1.4;
font-weight: bold;
color: #2A2E2A;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.shipping-subtext {
font-size: 11.5px;
color: #5D6B5A;
margin-top: 4px;
font-weight: normal;
text-transform: none;
letter-spacing: 0;
line-height: 1.5;
}
/* SECCIÓN: PREGUNTAS FRECUENTES (FAQ) */
.faq-section {
max-width: 800px;
margin: 40px auto 40px;
padding: 0 8%;
position: relative;
z-index: 10;
}
.faq-title {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #2A2E2A;
text-align: center;
margin-bottom: 32px;
border-bottom: 1px solid #2A2E2A;
padding-bottom: 12px;
}
.faq-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background-color: #EDECE6;
border: 1px solid #2A2E2A;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.25s ease;
}
.faq-item:hover {
box-shadow: 0 4px 12px rgba(42, 46, 42, 0.05);
}
.faq-trigger {
width: 100%;
padding: 20px 24px;
background: none;
border: none;
text-align: left;
font-family: "Courier New", Courier, monospace;
font-size: 13.5px;
font-weight: bold;
color: #2A2E2A;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq-icon-arrow {
font-size: 14px;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
flex-shrink: 0;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.faq-body {
padding: 0 24px 20px;
font-size: 13px;
line-height: 1.6;
color: #5D6B5A;
}
.faq-item.active .faq-icon-arrow { transform: rotate(180deg); }
/* Estructura del Footer */
footer {
margin-top: 40px;
padding: 40px 8%;
border-top: 1px solid #D6C8B1;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
position: relative;
z-index: 10;
}
@media (min-width: 900px) {
footer {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
max-width: 1100px;
margin: 40px auto 0;
}
}
.footer-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
flex: 1;
}
@media (min-width: 900px) {
.footer-group { align-items: flex-start; }
.footer-group.center { align-items: center; }
.footer-group.right { align-items: flex-end; }
}
.footer-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #5D6B5A;
font-weight: bold;
}
.footer-row {
display: flex;
gap: 16px;
align-items: center;
}
/* Iconos de Redes Sociales y Plataformas */
.social-link {
width: 42px;
height: 42px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #D6C8B1;
display: flex;
align-items: center;
justify-content: center;
color: #2A2E2A;
transition: all 0.25s ease;
text-decoration: none;
}
.social-link svg { width: 18px; height: 18px; fill: currentColor; }
.social-link:hover {
background-color: #2A2E2A;
color: #EDECE6;
border-color: #2A2E2A;
transform: translateY(-3px);
}
/* Contenedor Meli (Compra Protegida) */
.meli-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #D6C8B1;
color: #2A2E2A;
background: transparent;
text-decoration: none;
transition: all 0.25s ease;
}
.meli-badge svg {
width: 32px;
height: 24px;
}
.meli-badge span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
}
.meli-badge:hover {
background-color: #2A2E2A;
color: #EDECE6;
border-color: #2A2E2A;
transform: translateY(-3px);
}
/* Botones de Mensajería */
.chat-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 10px rgba(42, 46, 42, 0.05);
}
.chat-btn.whatsapp {
background-color: transparent;
border: 1.5px solid #25D366;
color: #128C7E;
}
.chat-btn.whatsapp:hover {
background-color: #25D366;
color: #FFF;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(37, 211, 102, 0.2);
}
.chat-btn.telegram {
background-color: transparent;
border: 1.5px solid #0088cc;
color: #0088cc;
}
.chat-btn.telegram:hover {
background-color: #0088cc;
color: #FFF;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 136, 204, 0.2);
}
.chat-btn svg { width: 16px; height: 16px; fill: currentColor; }
</style>
</head>
<body>
<header>
<div class="logo-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180" class="logo-svg" style="width: 100%; max-width: 180px; height: auto;">
<circle cx="200" cy="40" r="14" fill="#8FA08A" />
<path d="M 120,60 Q 160,35 200,60 T 280,60" fill="none" stroke="#8FA08A" stroke-width="3" stroke-linecap="round" />
<line x1="185" y1="75" x2="215" y2="75" stroke="#C48A63" stroke-width="4" stroke-linecap="round" />
<g fill="#2A2E2A" style="font-family: 'Courier New', Courier, monospace;">
<text x="110" y="130" font-size="52" font-weight="bold" letter-spacing="10">L</text>
<rect x="182" y="93" width="36" height="5" rx="1" />
<rect x="182" y="107" width="36" height="5" rx="1" />
<rect x="182" y="121" width="36" height="5" rx="1" />
<text x="250" y="130" font-size="52" font-weight="bold" letter-spacing="10">I</text>
<text x="310" y="130" font-size="52" font-weight="bold" letter-spacing="10">S</text>
</g>
</svg>
</div>
<div class="tagline">DISEÑO HUMANO. PRECISIÓN ROBÓTICA.</div>
</header>
<!-- HERO - Carrusel de Imágenes Superior -->
<section class="hero-carousel">
<div class="carousel-track" id="carouselTrack">
<div class="carousel-slide">
<img src="https://placehold.co/1920x800/EDECE6/2A2E2A?text=Tu+Imagen+Principal+Aquí" alt="Espacio para Imagen Premium 1">
</div>
<div class="carousel-slide">
<img src="https://placehold.co/1920x800/E3E2DC/2A2E2A?text=Tu+Segunda+Imagen+Aquí" alt="Espacio para Imagen Premium 2">
</div>
<div class="carousel-slide">
<img src="https://placehold.co/1920x800/D6C8B1/2A2E2A?text=Tu+Tercera+Imagen+Aquí" alt="Espacio para Imagen Premium 3">
</div>
</div>
<button class="carousel-btn prev" onclick="moveSlide(-1)" aria-label="Imagen anterior">❮</button>
<button class="carousel-btn next" onclick="moveSlide(1)" aria-label="Siguiente imagen">❯</button>
<div class="carousel-dots">
<span class="carousel-dot active" onclick="goToSlide(0)"></span>
<span class="carousel-dot" onclick="goToSlide(1)"></span>
<span class="carousel-dot" onclick="goToSlide(2)"></span>
</div>
</section>
<!-- Sección de Presentación Histórica (Con efecto zoom al hover) -->
<section class="intro-section">
<div class="story-container">
<div class="story-card">
<h3>El Origen</h3>
<p><strong>¡Hola! Soy Rodo.</strong></p>
<p>Tengo 48 años, soy argentino y creador de Leis. Empecé este proyecto con una convicción muy simple pero poderosa: diseñar productos lindos y de calidad, que no cuesten una fortuna y que, sobre todo, cuiden el planeta.</p>
</div>
<div class="story-card">
<h3>La Inspiración</h3>
<p>Para mí, Leis es una forma de abrazar mis raíces. Nuestra historia viaja en el tiempo hasta Galicia, a La Coruña. Quienes conocen esa tierra saben que el mar, la naturaleza y la simpleza de su gente te marcan para siempre.</p>
<p>Esa esencia está viva en cada una de nuestras lámparas: vas a encontrar formas orgánicas, líneas limpias y un diseño atemporal pensado para llevar calma y calidez a tu hogar.</p>
</div>
<div class="story-card">
<h3>Tecnología Consciente</h3>
<p>¿Cómo las hacemos? Usamos impresión 3D y fabricamos con PLA, un bioplástico renovable. Elegimos este camino porque nos permite lograr una calidad increíble de punta a punta, sin desperdicios y respetando el medio ambiente.</p>
<p>Cada lámpara lleva un pedacito de una historia familiar que cruzó generaciones. No buscamos solo iluminar; queremos crear objetos con sentido que te acompañen y reflejen los valores con los que nacimos.</p>
</div>
</div>
</section>
<!-- Sección de Ficha de Producto LÚA -->
<div class="container">
<div class="column-left">
<div class="img-box">
<img id="lamp" class="product-img" src="https://placehold.co/500x650/2A2E2A/EDECE6?text=LUA+NEGRO" alt="Lámpara Lúa">
</div>
</div>
<div class="column-right">
<h1>LÚA</h1>
<p class="description">
LÚA nace del gallego para celebrar la luz en su estado más puro. Diseñamos su silueta acanalada no solo por estética, sino para tamizar el brillo y proyectar una calidez suave, libre de destellos. En esta pieza, la calidez orgánica de la tulipa y la geometría firme de la base encuentran un equilibrio absoluto.
</p>
<div class="color-selector">
<span class="color-label">Color de Base: <strong id="color-name">Negro</strong></span>
<div class="colors-row">
<button class="active" style="background-color:#111111" onclick="setImg('NEGRO', 'Negro', this)" title="Negro" aria-label="Color Negro"></button>
<button style="background-color:#A87C5C" onclick="setImg('BRONCE', 'Bronce', this)" title="Bronce" aria-label="Color Bronce"></button>
<button style="background-color:#C0C0C0" onclick="setImg('PLATA', 'Plata', this)" title="Plata" aria-label="Color Plata"></button>
<button style="background-color:#1E3F66" onclick="setImg('COBALTO', 'Cobalto', this)" title="Cobalto" aria-label="Color Cobalto"></button>
</div>
</div>
<a href="TU_LINK_DE_MERCADO_PAGO_AQUI" id="buy" target="_blank">COMPRAR AHORA</a>
<div class="specs">
<div class="specs-row">
<div class="spec-item">
<strong>Material Sostenible</strong>
Fabricada con PLA de origen local y fabricación consciente.
</div>
<div class="spec-item">
<strong>Dimensiones</strong>
Alto: 28 cm · Diámetro de base: 14.5cm · Diámetro de tulipa: 23cm.
</div>
<div class="spec-item">
<strong>Iluminación Envolvente</strong>
Acondicionada para bombillas LED (E27, <span class="highlight-red">12w Max</span>).
</div>
<div class="spec-item">
<strong>Producción Sostenible</strong>
Fabricación bajo demanda por artesanos digitales para evitar desperdicios.
</div>
</div>
</div>
</div>
</div>
<!-- SECCIÓN DE LOGÍSTICA (ANCHO COMPLETO DE LA PÁGINA) -->
<section class="shipping-section">
<div class="shipping-container">
<div class="shipping-item">
<div class="shipping-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#5D6B5A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div class="shipping-text">Envío a todo el país</div>
</div>
<div class="shipping-item">
<div class="shipping-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#5D6B5A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="5" cy="18" r="2.5" />
<circle cx="19" cy="18" r="2.5" />
<path d="M5 15.5h7.5l2-4h4.5l1 2.5v1.5M14.5 11.5l-1-4h-5v5M3.5 11h3" />
<path d="M11 5.5h2.5V7H11z" />
</svg>
</div>
<div class="shipping-text">Moto mensajería<div class="shipping-subtext">CABA / GBA en 24 a 48 hs</div></div>
</div>
<div class="shipping-item">
<div class="shipping-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#5D6B5A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</div>
<div class="shipping-text">Embalaje seguro</div>
</div>
</div>
</section>
<!-- SECCIÓN DE PREGUNTAS FRECUENTES (FAQ) -->
<section class="faq-section">
<h2 class="faq-title">Preguntas Frecuentes</h2>
<div class="faq-container">
<div class="faq-item">
<button class="faq-trigger" onclick="toggleFaq(this)">
¿Qué tipo de bombilla debo utilizar?
<span class="faq-icon-arrow">▾</span>
</button>
<div class="faq-content">
<div class="faq-body">
La bombilla debe ser obligatoriamente tipo LED y no superior a 12w (nosotros recomendamos una de 9w para lograr la mejor experiencia lumínica y ambiental).
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-trigger" onclick="toggleFaq(this)">
¿Cuánto tarda en llegar mi pedido?
<span class="faq-icon-arrow">▾</span>
</button>
<div class="faq-content">
<div class="faq-body">
Si el destino de entrega se encuentra dentro de CABA o GBA, vas a recibir tu lámpara por moto mensajería en un plazo de 24 a 48 horas hábiles después de confirmada la compra.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-trigger" onclick="toggleFaq(this)">
¿Cómo se limpia y qué cuidados requiere la lámpara?
<span class="faq-icon-arrow">▾</span>
</button>
<div class="faq-content">
<div class="faq-body">
Al tener una textura fina producto de la impresión 3D, solo necesitás pasarle un plumero o un paño completamente seco para remover el polvillo superficial. Evitá productos químicos.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-trigger" onclick="toggleFaq(this)">
¿Qué es el PLA y por qué es un material consciente?
<span class="faq-icon-arrow">▾</span>
</button>
<div class="faq-content">
<div class="faq-body">
El PLA es un bioplástico orgánico que se obtiene a partir de recursos renovables como el almidón de maíz o la caña de azúcar, minimizando el impacto ambiental.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-trigger" onclick="toggleFaq(this)">
¿Qué formas de pago aceptan?
<span class="faq-icon-arrow">▾</span>
</button>
<div class="faq-content">
<div class="faq-body">
Todas las operaciones se procesan de forma 100% segura a través de la plataforma de Mercado Pago. Podés abonar con dinero en cuenta, transferencia o tarjetas.
</div>
</div>
</div>
</div>
</section>
<!-- Footer Ajustado -->
<footer>
<!-- Columna 1: Redes (Pinterest Reincorporado) -->
<div class="footer-group">
<span class="footer-label">Síguenos:</span>
<div class="footer-row">
<a href="https://instagram.com/tu_perfil_aqui" class="social-link" target="_blank" title="Instagram">
<svg 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-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.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.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.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
</a>
<a href="https://facebook.com/tu_perfil_aqui" class="social-link" target="_blank" title="Facebook">
<svg viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/></svg>
</a>
<a href="https://pinterest.com/tu_perfil_aqui" class="social-link" target="_blank" title="Pinterest">
<svg viewBox="0 0 24 24"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.947-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.906 2.17-2.906 1.024 0 1.517.769 1.517 1.689 0 1.029-.656 2.57-.994 3.995-.283 1.195.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.493 0-2.873-2.064-4.882-5.013-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12.017 24c6.62 0 11.983-5.367 11.983-11.987C24 5.367 18.637 0 12.017 0z"/></svg>
</a>
</div>
</div>
<!-- Columna 2: Compra Protegida (Sin título Garantía, con réplica exacta de tu logo PNG) -->
<div class="footer-group center">
<span class="footer-label">Compra Protegida:</span>
<a href="LINK_A_TU_TIENDA_MELI" class="meli-badge" target="_blank">
<!-- Vectorización fiel de tu archivo adjunto -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
<ellipse cx="150" cy="100" rx="130" ry="80" fill="none" stroke="currentColor" stroke-width="12" />
<path d="M 50 96 Q 100 70 150 96 T 250 96" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" />
<path d="M 68 116 C 110 155, 190 155, 232 116" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" />
<path d="M 110 90 Q 150 55 190 85" fill="none" stroke="currentColor" stroke-width="10" stroke-linecap="round" />
<path d="M 120 110 Q 140 135 170 115" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" />
</svg>
<span>Con Mercado Pago</span>
</a>
</div>
<!-- Columna 3: Mensajería -->
<div class="footer-group right">
<span class="footer-label">Contacto inmediato:</span>
<div class="footer-row">
<a href="https://api.whatsapp.com/send?phone=541141783783&text=Hola%20LEIS!" class="chat-btn whatsapp" target="_blank">
<svg viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.966a9.78 9.78 0 0 0-6.974-2.879C6.012 1.96 1.59 6.33 1.586 11.76c-.001 1.705.452 3.371 1.31 4.841L1.916 21l4.731-1.846zm12.007-6.924c-.307-.154-1.82-.9-2.1-.101-.28.1-.482.4-.59.524-.11.123-.217.185-.524.03-.307-.153-1.295-.478-2.468-1.523-.913-.814-1.53-1.82-1.71-2.127-.18-.308-.019-.474.135-.627.14-.137.307-.358.461-.538.154-.18.205-.308.307-.513.102-.205.051-.385-.026-.538-.077-.154-.691-1.667-.947-2.282-.25-.6-.525-.52-.717-.53-.185-.01-.397-.012-.614-.012-.218 0-.57.081-.869.41-.299.329-1.14 1.114-1.14 2.718 0 1.603 1.16 3.154 1.32 3.37.16.216 2.284 3.486 5.534 4.891.773.334 1.377.534 1.847.683.777.247 1.485.212 2.044.128.623-.093 1.82-.744 2.076-1.46.256-.718.256-1.333.18-1.46-.077-.128-.282-.205-.59-.359z"/></svg>
WhatsApp
</a>
<a href="https://t.me/+541141783783" class="chat-btn telegram" target="_blank">
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-1-.65-.35-1 .22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.69-.52.36-1 .53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.35-.49.97-.74 3.79-1.65 6.32-2.74 7.59-3.27 3.61-1.51 4.36-1.77 4.85-1.78.11 0 .35.03.5.16.13.12.16.28.18.39.02.1.03.3.01.49z"/></svg>
Telegram
</a>
</div>
</div>
</footer>
<script>
/* LÓGICA DEL CARRUSEL HERO */
let currentSlide = 0;
const totalSlides = 3;
const track = document.getElementById('carouselTrack');
const dots = document.querySelectorAll('.carousel-dot');
function updateCarousel() {
track.style.transform = `translateX(-${currentSlide * (100 / totalSlides)}%)`;
dots.forEach((dot, index) => {
if(index === currentSlide) { dot.classList.add('active'); }
else { dot.classList.remove('active'); }
});
}
function moveSlide(direction) {
currentSlide += direction;
if (currentSlide >= totalSlides) { currentSlide = 0; }
else if (currentSlide < 0) { currentSlide = totalSlides - 1; }
updateCarousel();
resetAutoPlay();
}
function goToSlide(slideIndex) {
currentSlide = slideIndex;
updateCarousel();
resetAutoPlay();
}
let autoPlay = setInterval(() => { moveSlide(1); }, 5000);
function resetAutoPlay() {
clearInterval(autoPlay);
autoPlay = setInterval(() => { moveSlide(1); }, 5000);
}
/* LÓGICA DE PREGUNTAS FRECUENTES (FAQ) */
function toggleFaq(trigger) {
const item = trigger.parentElement;
const content = trigger.nextElementSibling;
const isActive = item.classList.contains('active');
document.querySelectorAll('.faq-item').forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('active');
otherItem.querySelector('.faq-content').style.maxHeight = null;
}
});
if (isActive) {
item.classList.remove('active');
content.style.maxHeight = null;
} else {
item.classList.add('active');
content.style.maxHeight = content.scrollHeight + "px";
}
}
/* LÓGICA DE INTERACTIVIDAD DE PRODUCTO */
function setImg(colorCode, colorName, element) {
var lampImg = document.getElementById('lamp');
if (lampImg) {
lampImg.style.opacity = '0.2';
setTimeout(function() {
var bgColor = 'D6C8B1';
if (colorCode === 'NEGRO') bgColor = '111111/EDECE6';
if (colorCode === 'BRONCE') bgColor = 'A87C5C/EDECE6';
if (colorCode === 'PLATA') bgColor = 'C0C0C0/2A2E2A';
if (colorCode === 'COBALTO') bgColor = '1E3F66/EDECE6';
lampImg.src = 'https://placehold.co/500x650/' + bgColor + '?text=LUA+' + colorCode;
lampImg.style.opacity = '1';
}, 150);
}
var nameLabel = document.getElementById('color-name');
if (nameLabel) { nameLabel.innerText = colorName; }
var buttons = document.querySelectorAll('.colors-row button');
for (var i = 0; i < buttons.length; i++) { buttons[i].classList.remove('active'); }
element.classList.add('active');
}
</script>
</body>
</html>