Actúa como un desarrollador web senior, diseñador UI/UX, copywriter profesional

Actúa como un desarrollador web senior, diseñador UI/UX, copywriter profesional
y especialista en páginas web premium para empresas de remodelación e interiorismo.

Crea desde cero una página web profesional para la empresa VELCORE.

VELCORE es una empresa dedicada al interiorismo, remodelaciones, acabados
decorativos, propuestas visuales, paneles decorativos, iluminación LED,
remodelación comercial y transformación de espacios residenciales y comerciales.
Todo hecho a medida.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
OBJETIVO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Crear una web 10/10 — moderna, elegante, premium, profesional y lista para
producción. Que el visitante sienta en los primeros 3 segundos que VELCORE es una
empresa seria, capaz y de alto nivel.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PALETA DE COLORES — usar exactamente estos valores
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
--color-bg:          #0D0D0D   (negro principal, fondo)
--color-surface:     #141414   (negro elevado, tarjetas)
--color-surface-2:   #1C1C1C   (superficies secundarias)
--color-gold:        #C8A96E   (dorado cálido — acento primario)
--color-gold-light:  #E2C98A   (dorado claro para hovers)
--color-white:       #F8F5F0   (blanco cálido, no frío)
--color-gray:        #A0A0A0   (texto secundario)
--color-wood:        #8C6E4A   (tono madera para detalles)
--color-border:      #2A2A2A   (bordes sutiles)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TIPOGRAFÍA — cargar desde Google Fonts
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Headings H1–H3:  Cormorant Garamond (weights: 300, 400, 600)
Body / UI:        Montserrat (weights: 300, 400, 500, 600)
Labels / overline: Montserrat 500 uppercase letter-spacing: 0.15em

H1: clamp(2.8rem, 6vw, 5.5rem)
H2: clamp(2rem, 4vw, 3.5rem)
H3: clamp(1.3rem, 2.5vw, 1.8rem)
Body: 1rem / line-height: 1.75

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LIBRERÍAS — cargar por CDN, sin npm
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- AOS 2.3.4           → animaciones al hacer scroll
- Swiper.js 11        → carrusel de proyectos
- img-comparison-slider → slider Antes/Después
- Font Awesome 6 Free → íconos de servicios y contacto
- Google Fonts        → Cormorant Garamond + Montserrat

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ARCHIVOS A CREAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
index.html
css/styles.css
js/main.js

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
REQUISITOS TÉCNICOS GLOBALES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- HTML5 semántico: header, nav, main, section, article, footer
- CSS con custom properties (variables) en :root
- Mobile-first: breakpoints en 480px, 768px, 1024px, 1280px
- Imágenes: atributo loading="lazy" en todas; usar Unsplash URLs temáticas
  de interiores de lujo como placeholders reales (no placeholder.com)
- Preloader: overlay negro con logo VELCORE en dorado que desaparece al cargar
- Header: posición fixed, fondo transparente al inicio → blur + fondo
  semitransparente oscuro al hacer scroll de 80px
- Botón flotante WhatsApp: posición fixed bottom-right, animación pulse en el ícono
  número: +57 300 000 0000 (placeholder claramente marcado para reemplazar)
- Formulario: acción via Formspree (action="https://formspree.io/f/XXXXXXXX")
  con validación HTML5 y feedback visual de éxito/error en JS
- SEO: meta description, OG tags, Twitter Card, schema.org LocalBusiness en JSON-LD
- Transiciones por defecto: 0.3s ease para hover, 0.6s ease para entradas AOS
- Scroll behavior: smooth en html {}
- Sin frameworks CSS externos (no Bootstrap, no Tailwind) — CSS puro

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
EFECTOS VISUALES PREMIUM — implementar en todos los elementos
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Tarjetas de servicios/materiales:
  - Fondo: --color-surface
  - Borde: 1px solid --color-border
  - Hover: borde cambia a --color-gold, translateY(-6px), sombra dorada sutil
    box-shadow: 0 8px 40px rgba(200,169,110,0.15)

Botones primarios (dorado):
  - Fondo: --color-gold, texto negro, sin border-radius extremo (8px)
  - Hover: fondo --color-gold-light, escala 1.02
  - Activo: escala 0.98

Botones secundarios (outline):
  - Borde 1px --color-gold, texto --color-gold, fondo transparente
  - Hover: fondo --color-gold a 10% de opacidad

Separadores de sección: línea horizontal de 60px centrada en --color-gold,
height 1px, mostrar entre el título y el contenido de cada sección.

Texto dorado highlight: class="gold-text" → color: --color-gold

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ESTRUCTURA DE SECCIONES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

──────────────────────────────────────────
SECCIÓN 0 — HEADER / NAVEGACIÓN
──────────────────────────────────────────
- Logo: texto "VELCORE" en Cormorant Garamond 600, dorado, con una línea
  decorativa fina debajo de las letras
- Menú desktop: Inicio · Servicios · Materiales · Proceso · Proyectos ·
  Antes/Después · Testimonios · Contacto
- Botón CTA en menú: "Cotizar ahora" (botón dorado primario, pequeño)
- Mobile: hamburger menu con panel lateral que aparece desde la derecha,
  fondo oscuro, menú vertical centrado con animación suave

──────────────────────────────────────────
SECCIÓN 1 — HERO PRINCIPAL
──────────────────────────────────────────
- Fondo: imagen de interior de lujo a full-screen con overlay gradiente
  linear-gradient(135deg, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0.4) 100%)
- Overline label: "DISEÑO · REMODELACIÓN · ACABADOS" en Montserrat uppercase dorado
- H1: "Espacios que inspiran. Acabados que perduran."
- Subtítulo: "Transformamos viviendas, negocios y espacios comerciales con
  propuestas de diseño realistas, materiales modernos y ejecución profesional.
  Todo a medida, desde la primera visualización hasta el acabado final."
- Botones: [Solicitar cotización] (primario dorado) [Ver proyectos] (outline dorado)
  — "Ver proyectos" hace scroll suave a la sección de Proyectos (#proyectos)
- Indicador de scroll: chevron animado pulsando hacia abajo, centrado en el bottom

──────────────────────────────────────────
SECCIÓN 2 — QUIÉNES SOMOS
──────────────────────────────────────────
Layout: 2 columnas en desktop (texto izquierda, imagen derecha)
  imagen con borde dorado fino en esquinas (pseudo-elemento ::before ::after)

Overline: "NUESTRA ESENCIA"
H2: "Diseño con intención. Ejecución sin compromisos."
Texto:
  "En VELCORE transformamos ambientes mediante propuestas de diseño interior,
   remodelación y acabados decorativos. Nuestro enfoque combina estética,
   funcionalidad y presentación visual profesional para que cada cliente
   visualice el resultado final antes de iniciar cualquier trabajo.

   Nos diferenciamos por cuidar la distribución real de cada ambiente,
   seleccionar materiales modernos y crear soluciones completamente a medida
   para viviendas, negocios y espacios comerciales."

Barra de métricas (4 columnas, debajo del texto):
  📐 +120 Proyectos     ⭐ 100% Satisfacción
  🏠 Residencial        🏢 Comercial
  (números grandes en dorado, etiqueta gris debajo)

──────────────────────────────────────────
SECCIÓN 3 — SERVICIOS
──────────────────────────────────────────
Overline: "LO QUE HACEMOS"
H2: "Servicios diseñados para cada espacio"

Grid: 4 columnas desktop → 2 tablet → 1 mobile
Cada tarjeta tiene: ícono Font Awesome (dorado), H3, descripción, línea dorada
decorativa en hover

Servicios (7 tarjetas):

1. Remodelaciones Integrales
   ícono: fa-hammer
   "Transformamos viviendas, departamentos, oficinas y negocios con diseño
   funcional, distribución optimizada y acabados modernos que elevan el valor
   de cada espacio."

2. Propuestas Visuales
   ícono: fa-eye
   "Creamos visualizaciones realistas del resultado final antes de iniciar la
   obra. Ves exactamente cómo quedará tu espacio antes de invertir un peso."

3. Asesoría Personalizada
   ícono: fa-comments
   "Acompañamiento completo en selección de materiales, distribución, estilo,
   iluminación y acabados. Cada decisión tiene un propósito claro."

4. Paneles Decorativos
   ícono: fa-grip-vertical
   "Instalación profesional de paneles PVC, WPC, SPC, wall panel y
   revestimientos modernos que transforman cualquier pared en un elemento
   de diseño."

5. Iluminación Arquitectónica
   ícono: fa-lightbulb
   "Diseño e instalación de iluminación LED decorativa y funcional. La luz
   correcta cambia completamente la percepción de un espacio."

6. Carpintería y Melamina
   ícono: fa-ruler-combined
   "Muebles a medida, centros de entretenimiento, repisas y soluciones de
   almacenamiento diseñadas específicamente para cada ambiente."

7. Adecuaciones Sanitarias
   ícono: fa-faucet
   "Instalación y modificación de puntos de agua para lavaderos, lavacabezas,
   baños y zonas funcionales dentro de proyectos de remodelación."

CTA al final de la sección (centrado):
  "¿Tu proyecto no encaja en una categoría? Cuéntanos qué necesitas."
  Botón outline: [Consultar por WhatsApp]

──────────────────────────────────────────
SECCIÓN 4 — MATERIALES Y ACABADOS
──────────────────────────────────────────
Overline: "CON QUÉ TRABAJAMOS"
H2: "Materiales que definen el resultado"

Grid visual: 5 columnas desktop → 3 tablet → 2 mobile
Cada item: imagen de fondo (lazy-loaded), overlay oscuro al hover que muestra
nombre + descripción corta

Materiales (10 items):

1. Panel PVC Tipo Mármol — "Paredes decorativas, fondos principales y
   zonas comerciales con acabado marmolado moderno."
2. Wall Panel Madera — "Texturas tipo madera para calidez, elegancia y
   profundidad visual en cualquier ambiente."
3. Panel WPC / SPC — "Revestimientos resistentes y versátiles para
   interiores de alto tráfico."
4. Melamina Decorativa — "Aplicada en muebles, centros de entretenimiento,
   repisas y revestimientos con acabado limpio y duradero."
5. Madera Fina — "Para mobiliario y detalles decorativos que demandan
   mayor presencia y carácter visual."
6. Espejos Decorativos — "Espejos modernos personalizados: de piso a
   techo, biselados o integrados al diseño del ambiente."
7. Iluminación LED — "Luces cálidas, indirectas y decorativas para crear
   la atmósfera exacta que cada espacio requiere."
8. Molduras y Perfiles — "Detalles de terminación que elevan el acabado
   final y dan coherencia al diseño completo."
9. Pisos Laminados y SPC — "Renovación de pisos con estilo, resistencia
   y practicidad. Sin obra mayor."
10. Instalaciones Sanitarias — "Puntos de agua, adecuaciones y soluciones
    funcionales integradas al proyecto de remodelación."

Texto de cierre (centrado, en gris claro, italic):
  "Seleccionamos materiales según el estilo, presupuesto y función de
   cada proyecto. Sin catálogos genéricos."

──────────────────────────────────────────
SECCIÓN 5 — PROCESO DE TRABAJO
──────────────────────────────────────────
Overline: "CÓMO TRABAJAMOS"
H2: "Un proceso claro de inicio a entrega"

Timeline: horizontal en desktop (con línea conectora dorada y puntos numerados),
vertical en tablet/mobile

Paso 1 — Evaluación del espacio
  "Visitamos el ambiente, tomamos fotografías, medidas y analizamos la
   distribución real. Sin costo, sin compromiso."

Paso 2 — Propuesta de diseño
  "Creamos una visualización realista del resultado para que veas exactamente
   cómo quedará tu espacio antes de tomar cualquier decisión."

Paso 3 — Cotización formal
  "Presentamos una cotización detallada: inversión, materiales, partidas,
   condiciones comerciales y plazos estimados. Sin sorpresas."

Paso 4 — Adelanto e inicio
  "Con el adelanto se agenda el proyecto, se preparan materiales y se
   coordina la ejecución. Todo bajo control."

Paso 5 — Ejecución y entrega
  "Instalación profesional con atención a cada detalle, limpieza del
   espacio y entrega en el plazo acordado."

──────────────────────────────────────────
SECCIÓN 6 — PROYECTOS Y PROPUESTAS
──────────────────────────────────────────
Overline: "NUESTRO TRABAJO"
H2: "Proyectos que hablan por sí solos"

Implementar con Swiper.js en modo "coverflow" o "creative":
- Slides grandes (80vw desktop, 90vw mobile)
- Imágenes de interiores: salas modernas, habitaciones, barberías premium,
  oficinas, paneles decorativos, iluminación LED cálida
- Cada slide: imagen + overlay inferior con título del proyecto, categoría
  y una etiqueta del material principal usado
- Controles: flechas personalizadas en dorado + paginación con bullets dorados
- Autoplay: 4000ms, pause on hover

──────────────────────────────────────────
SECCIÓN 7 — ANTES / DESPUÉS
──────────────────────────────────────────
Overline: "LA TRANSFORMACIÓN"
H2: "El mismo espacio. Una diferencia radical."

Implementar con img-comparison-slider:
- Mínimo 3 comparaciones en grid (1 grande + 2 menores en desktop,
  apiladas en mobile)
- Handle (divisor): línea blanca vertical con círculo dorado en el centro
- Etiqueta "ANTES" y "DESPUÉS" en cada lado
- Debajo de cada comparación: texto breve de la transformación
  Ej: "Sala residencial — Panel PVC mármol + iluminación LED indirecta"

Texto introductorio:
  "Arrastra la línea para comparar el estado inicial con el resultado final.
   Cada proyecto parte de un análisis real del espacio."

──────────────────────────────────────────
SECCIÓN 8 — TESTIMONIOS
──────────────────────────────────────────
Overline: "LO QUE DICEN NUESTROS CLIENTES"
H2: "Resultados que generan confianza"

Carrusel con Swiper.js (3 slides visibles desktop, 1 mobile):
Cada tarjeta: comillas decorativas en dorado grande, texto del testimonio,
nombre del cliente, tipo de proyecto, estrellas (5/5)

Testimonios placeholder (reemplazar con reales):

  Testimonio 1:
  "Nunca imaginé que mi sala pudiera verse así. La propuesta visual que me
   mostraron fue exactamente lo que se entregó. Trabajo limpio, puntual y
   con una calidad que superó mis expectativas."
  — Laura M. | Remodelación residencial, sala y comedor

  Testimonio 2:
  "Contraté a VELCORE para la adecuación de mi barbería. El resultado fue
   increíble — paneles, iluminación, muebles a medida. Mis clientes preguntan
   quién lo hizo. Altamente recomendados."
  — Carlos R. | Remodelación comercial, barbería premium

  Testimonio 3:
  "Lo que más me gustó fue poder ver el diseño antes de empezar. Sin esa
   propuesta visual no me hubiera decidido. El antes y el después es
   impresionante."
  — Marcela T. | Habitación principal + baño

──────────────────────────────────────────
SECCIÓN 9 — CONTACTO Y COTIZACIÓN
──────────────────────────────────────────
Layout: 2 columnas desktop (formulario izquierda, info derecha)

Overline: "HABLEMOS"
H2: "Cuéntanos tu proyecto"
Texto introductorio:
  "Puedes enviarnos fotos, medidas aproximadas y una descripción de lo que
   tienes en mente. Con esa información preparamos una propuesta más
   precisa y sin costo."

FORMULARIO (acción vía Formspree):
Campos:
  - Nombre completo (required)
  - Teléfono / WhatsApp (required, type="tel")
  - Correo electrónico (required, type="email")
  - Tipo de ambiente: select → Vivienda / Negocio / Oficina / Local comercial / Otro
  - Servicio de interés: select → Remodelación integral / Paneles decorativos /
    Propuesta visual / Iluminación LED / Carpintería / Asesoría / Otro
  - Descripción del proyecto (textarea, 4 rows)
  - Adjuntar fotos (input type="file" multiple accept="image/*")
  - Botón submit: "Enviar solicitud" (dorado primario, ancho completo)
  - Mensaje de confirmación: overlay suave con "¡Listo! Te contactamos en
    menos de 24 horas." en verde claro

COLUMNA DERECHA — Información de contacto:
  WhatsApp:    +57 300 000 0000   [REEMPLAZAR]
  Instagram:   @velcore.studio    [REEMPLAZAR]
  TikTok:      @velcore.studio    [REEMPLAZAR]
  Correo:      hola@velcore.co    [REEMPLAZAR]
  Horario:     Lunes a Sábado, 8:00 am – 6:00 pm [REEMPLAZAR]
  Zona:        [Ciudad / Zona de atención] [REEMPLAZAR]

  Botón grande: [Cotizar por WhatsApp] → abre wa.me/57300XXXXXXX

──────────────────────────────────────────
CTA FINAL — antes del footer
──────────────────────────────────────────
Fondo: --color-surface, borde top en dorado de 1px
Centrado, padding generoso

H2: "¿Listo para transformar tu espacio?"
Subtítulo: "Solicita una evaluación sin costo y recibe una propuesta personalizada
con visualización realista antes de iniciar."
Botones: [Solicitar cotización] [Cotizar por WhatsApp]

──────────────────────────────────────────
FOOTER
──────────────────────────────────────────
Layout: 4 columnas desktop → 2 tablet → 1 mobile
Fondo: #0A0A0A (más oscuro que el fondo principal)
Línea superior: 1px solid --color-gold

Columna 1: Logo + frase de marca
  "VELCORE Studio"
  "Interiorismo, remodelaciones y acabados decorativos.
   Diseñamos y transformamos espacios con estilo, funcionalidad
   y ejecución profesional."

Columna 2: Navegación rápida
  Inicio / Servicios / Materiales / Proceso / Proyectos / Contacto

Columna 3: Servicios destacados
  Remodelaciones / Paneles decorativos / Propuestas visuales /
  Iluminación LED / Carpintería

Columna 4: Contacto y redes
  WhatsApp, Instagram, TikTok, Correo
  Íconos Font Awesome, hover en dorado

Línea final:
  "© 2026 VELCORE Studio. Todos los derechos reservados."

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SEO — implementar en el <head>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<title>VELCORE Studio | Interiorismo y Remodelación Profesional</title>
<meta name="description" content="VELCORE transforma espacios residenciales y
comerciales con propuestas de diseño realistas, paneles decorativos, iluminación
LED y acabados modernos. Todo a medida.">
Open Graph (og:title, og:description, og:image, og:type=website)
Twitter Card (summary_large_image)
Schema.org LocalBusiness en JSON-LD:
  @type: "HomeAndConstructionBusiness"
  name: "VELCORE Studio"
  serviceType: "Interior Design, Remodeling"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ANIMACIONES AOS — data-aos en elementos clave
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Títulos de sección: data-aos="fade-up" data-aos-duration="800"
- Tarjetas de servicios: data-aos="fade-up" data-aos-delay="100" (stagger)
- Imágenes: data-aos="zoom-in" data-aos-duration="600"
- Timeline steps: data-aos="fade-right" con delay incremental
- Testimonios: data-aos="fade-up"
Inicializar: AOS.init({ once: true, offset: 80 })

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DATOS PARA REEMPLAZAR AL TENER LA INFO REAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Todos marcados con el comentario: <!-- REEMPLAZAR -->
- Número de WhatsApp
- Correo electrónico
- Redes sociales (@handle)
- Horario de atención
- Ciudad / zona de atención
- ID de Formspree
- Imágenes reales de proyectos (reemplazar URLs de Unsplash)
- Testimonios reales de clientes
- Métricas reales (número de proyectos)