File: /home/toshikoc/www/index.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grupo Toshiko S.A.C. | Infraestructura TI y Data Centers</title>
<!-- ÍCONO DE LA PESTAÑA -->
<link rel="icon" type="image/png" href="img/favicon.png">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Urbanist -->
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Iconos: FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
body { font-family: 'Urbanist', sans-serif; scroll-behavior: smooth; background-color: #0f172a; }
.gradient-red { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
.bg-tech-dark { background-color: #0f172a; }
.card-glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
/* Slider Styles */
.slider-container { position: relative; height: 100vh; min-height: 650px; width: 100%; overflow: hidden; }
.slide {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0; transition: opacity 1s ease-in-out; display: flex; align-items: center;
background-size: cover; background-position: center;
}
.slide.active { opacity: 1; z-index: 10; }
.bg-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.85); z-index: 1; }
.slide-1 { background-image: url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=2000'); }
.slide-2 { background-image: url('https://images.unsplash.com/photo-1597733336794-12d05021d510?q=80&w=2000'); }
.slide-3 { background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000'); }
.slide-content { position: relative; z-index: 20; max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
.animate-text { transform: translateY(30px); opacity: 0; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.active .animate-text { transform: translateY(0); opacity: 1; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
/* Logo Toshiko Design */
.logo-box-red { background-color: #dc2626; padding: 4px 12px; transform: skewX(-10deg); }
.logo-box-black { background-color: #000000; padding: 4px 12px; transform: skewX(-10deg); margin-left: -5px; }
.logo-text-main { transform: skewX(10deg); display: inline-block; font-style: italic; }
/* Partners Scrolling Track */
.logo-track { display: flex; width: max-content; gap: 100px; animation: scrollEnterprise 40s linear infinite; }
.logo-slide { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 140px; }
.logo-slide img { height: 48px; opacity: 0.6; filter: brightness(0) invert(1); transition: all 0.4s ease; }
.logo-slide img:hover { opacity: 1; filter: none; transform: scale(1.1); }
@keyframes scrollEnterprise { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Dropdown Styles */
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #1e293b;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 100;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.05);
padding: 10px 0;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-link {
display: block;
padding: 12px 20px;
color: #cbd5e1;
text-decoration: none;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
transition: all 0.2s;
border-left: 3px solid transparent;
}
.dropdown-link:hover {
background-color: rgba(220, 38, 38, 0.1);
color: #ef4444;
border-left: 3px solid #dc2626;
padding-left: 25px;
}
.slider-dots {
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
display: flex; gap: 12px; z-index: 30;
}
.dot { width: 35px; height: 3px; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s; }
.dot.active { background: #dc2626; width: 55px; }
/* WhatsApp Button Pulse Effect */
@keyframes shadow-pulse {
0% { box-shadow: 0 0 0 0px rgba(37, 211, 102, 0.4); }
100% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
}
.whatsapp-btn {
animation: shadow-pulse 2s infinite;
}
</style>
</head>
<body class="text-slate-200">
<!-- BOTÓN FLOTANTE DE WHATSAPP -->
<a href="https://wa.me/51979861111" target="_blank" class="fixed bottom-8 right-8 z-[60] whatsapp-btn bg-[#25d366] text-white w-16 h-16 rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-transform duration-300 group" title="Chat con soporte Toshiko">
<i class="fa-brands fa-whatsapp text-4xl group-hover:rotate-12 transition-transform"></i>
</a>
<!-- Navegación -->
<nav class="fixed w-full z-50 bg-tech-dark/95 border-b border-slate-800 backdrop-blur-md transition-all">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- LOGO CORPORATIVO -->
<div class="flex-shrink-0 flex flex-col">
<a href="index.php" class="flex items-center">
<div class="logo-box-red"><span class="text-white font-bold text-xl logo-text-main">Grupo</span></div>
<div class="logo-box-black"><span class="text-white font-bold text-xl logo-text-main">Toshiko</span></div>
<span class="text-white ml-2 text-xl font-light">@</span>
</a>
<div class="text-[10px] text-white tracking-[0.3em] font-light mt-1 border-t border-white/20 pt-1 uppercase">
Soluciones Informáticas
</div>
</div>
<!-- MENU DE NAVEGACION ALINEADO -->
<div class="hidden md:block h-20">
<div class="flex items-center h-full space-x-8 text-xs font-bold uppercase tracking-widest">
<a href="index.php" class="text-red-500 hover:text-red-400 transition-colors">Inicio</a>
<a href="#nosotros" class="text-white hover:text-red-500 transition-colors">Nosotros</a>
<div class="relative dropdown group flex items-center h-full">
<a href="soluciones.php" class="text-white hover:text-red-500 transition-colors flex items-center">
Soluciones <i class="fa-solid fa-chevron-down ml-2 text-[10px]"></i>
</a>
<div class="dropdown-content">
<a href="soluciones.php" class="dropdown-link">Infraestructura y Datacenter</a>
<a href="soluciones.php" class="dropdown-link">Networking y Comunicaciones</a>
<a href="soluciones.php" class="dropdown-link">Seguridad Informática</a>
<a href="soluciones.php" class="dropdown-link">Almacenamiento (Storage)</a>
<a href="soluciones.php" class="dropdown-link">Cableado Estructurado</a>
<a href="soluciones.php" class="dropdown-link">Energía y Respaldo</a>
<a href="soluciones.php" class="dropdown-link">Servicios Cloud (Nube)</a>
<a href="soluciones.php" class="dropdown-link">Licenciamiento Corporativo</a>
</div>
</div>
<a href="leasing.php" class="text-white hover:text-red-500 transition-colors">Leasing</a>
<a href="contacto.php" class="text-white hover:text-red-500 transition-colors">Contacto</a>
<div class="flex items-center h-full">
<a href="#contacto" class="gradient-red text-white px-6 py-2 rounded-full font-semibold hover:opacity-90 transition-all">Cotizar</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Banner Principal -->
<div class="slider-container" id="inicio">
<div class="slide slide-1 active">
<div class="bg-overlay"></div>
<div class="slide-content">
<span class="animate-text block text-red-500 font-bold tracking-[0.4em] mb-4 text-sm uppercase">Soluciones TI de Vanguardia</span>
<h1 class="animate-text delay-1 text-5xl md:text-8xl font-bold text-white mb-6 leading-tight tracking-tighter">
Data Centers de <br> <span class="text-red-600">Autocontenido.</span>
</h1>
<p class="animate-text delay-2 text-xl text-slate-400 max-w-2xl mb-10 text-justify font-light leading-relaxed">Infraestructura modular inteligente diseñada para la máxima eficiencia corporativa y resiliencia en entornos críticos.</p>
<div class="animate-text delay-2">
<a href="soluciones.php" class="gradient-red text-white px-10 py-4 font-bold uppercase tracking-widest text-xs rounded-sm">Explorar Soluciones</a>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="bg-overlay"></div>
<div class="slide-content">
<span class="animate-text block text-blue-500 font-bold tracking-[0.4em] mb-4 text-sm uppercase">Cómputo de Alta Disponibilidad</span>
<h1 class="animate-text delay-1 text-5xl md:text-8xl font-bold text-white mb-6 leading-tight tracking-tighter">
Servidores de <br> <span class="text-blue-500">Misión Crítica.</span>
</h1>
<p class="animate-text delay-2 text-xl text-slate-400 max-w-2xl mb-10 text-justify font-light leading-relaxed">Potenciando el corazón de su centro de datos con tecnología líder: HPE, Lenovo y Dell.</p>
<div class="animate-text delay-2">
<a href="#servidores" class="bg-white text-slate-900 px-10 py-4 font-bold uppercase tracking-widest text-xs rounded-sm">Ver Modelos</a>
</div>
</div>
</div>
<div class="slide slide-3">
<div class="bg-overlay"></div>
<div class="slide-content">
<span class="animate-text block text-emerald-500 font-bold tracking-[0.4em] mb-4 text-sm uppercase">Finanzas TI</span>
<h1 class="animate-text delay-1 text-5xl md:text-8xl font-bold text-white mb-6 leading-tight tracking-tighter">
Arrendamiento <br> <span class="text-emerald-500">Operativo TI.</span>
</h1>
<p class="animate-text delay-2 text-xl text-slate-400 max-w-2xl mb-10 text-justify font-light leading-relaxed">Transforme su CapEx en OpEx hoy mismo mediante HPE Financial Services y mantenga su flujo de caja estable.</p>
<div class="animate-text delay-2">
<a href="leasing.php" class="bg-emerald-600 text-white px-10 py-4 font-bold uppercase tracking-widest text-xs rounded-sm">Beneficios Leasing</a>
</div>
</div>
</div>
<div class="slider-dots">
<div class="dot active" onclick="setSlide(0)"></div>
<div class="dot" onclick="setSlide(1)"></div>
<div class="dot" onclick="setSlide(2)"></div>
</div>
</div>
<!-- Carrusel de Partners -->
<section class="py-10 bg-[#0f172a] border-y border-white/5 overflow-hidden">
<div class="max-w-7xl mx-auto px-4 text-center mb-6">
<p class="text-[10px] uppercase tracking-[0.3em] text-[#64748b] font-bold">Partners Tecnológicos</p>
</div>
<div class="logo-track">
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/dell/dell-ar21.svg" alt="Dell"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/huawei/huawei-ar21.svg" alt="Huawei"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/microsoft/microsoft-ar21.svg" alt="Microsoft"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/cisco/cisco-ar21.svg" alt="Cisco"></div>
<div class="logo-slide"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Hewlett_Packard_Enterprise_logo_2025.svg" alt="HPE"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/ibm/ibm-ar21.svg" alt="IBM"></div>
<!-- Duplicados para loop infinito -->
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/dell/dell-ar21.svg" alt="Dell"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/huawei/huawei-ar21.svg" alt="Huawei"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/microsoft/microsoft-ar21.svg" alt="Microsoft"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/cisco/cisco-ar21.svg" alt="Cisco"></div>
<div class="logo-slide"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Hewlett_Packard_Enterprise_logo_2025.svg" alt="HPE"></div>
<div class="logo-slide"><img src="https://www.vectorlogo.zone/logos/ibm/ibm-ar21.svg" alt="IBM"></div>
</div>
</section>
<!-- Nosotros Detallado -->
<section id="nosotros" class="py-24 bg-slate-900/50">
<div class="max-w-7xl mx-auto px-4">
<div class="grid lg:grid-cols-2 gap-16 items-center mb-24">
<div>
<span class="text-red-600 font-bold tracking-widest uppercase text-sm mb-4 block">Más de 24 años de trayectoria</span>
<h2 class="text-4xl font-bold text-white mb-6 tracking-tighter leading-tight">Expertos en Integración <br> de Tecnologías.</h2>
<p class="text-slate-400 text-lg leading-relaxed mb-6 text-justify">
Fundada bajo nuestra nueva razón social en 2017, GRUPO TOSHIKO S.A.C. hereda una trayectoria sólida de más de dos décadas en el mercado de TI peruano, consolidada inicialmente como TOSHIKO SYSTEM S.R.L. desde 1999.
</p>
<p class="text-slate-400 text-lg leading-relaxed text-justify mb-8 font-light">
Proveemos una amplia gama de soluciones innovadoras para los sectores de Industria, Comercio, Banca, Finanzas y Gobierno, destacándonos por nuestra capacidad de adaptación.
</p>
<div class="grid grid-cols-2 gap-6">
<div class="card-glass p-8 rounded-2xl text-center border-white/5">
<span class="block text-4xl font-bold text-red-600 mb-2">24+</span>
<span class="text-slate-400 uppercase text-[10px] tracking-widest font-bold">Años de experiencia</span>
</div>
<div class="card-glass p-8 rounded-2xl text-center border-white/5">
<span class="block text-4xl font-bold text-white mb-2">ISO</span>
<span class="text-slate-400 uppercase text-[10px] tracking-widest font-bold">Calidad y Ética</span>
</div>
</div>
</div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2000" alt="Nosotros" class="rounded-2xl border border-white/10 shadow-2xl grayscale hover:grayscale-0 transition-all duration-700">
</div>
</div>
<!-- Misión y Visión -->
<div class="grid md:grid-cols-2 gap-12 mb-24">
<div class="card-glass p-12 rounded-3xl border-l-4 border-l-red-600">
<h3 class="text-2xl font-bold text-white mb-6 tracking-tighter">Nuestra Misión</h3>
<p class="text-slate-400 leading-relaxed text-justify italic font-light">
"Desarrollar soluciones integrales en tecnología de la información con el fin de optimizar y rentabilizar la productividad de las distintas áreas de negocio de nuestros clientes, llegando a convertirnos en sus socios estratégicos de confianza."
</p>
</div>
<div class="card-glass p-12 rounded-3xl border-l-4 border-l-blue-500">
<h3 class="text-2xl font-bold text-white mb-6 tracking-tighter">Nuestra Visión</h3>
<p class="text-slate-400 leading-relaxed text-justify italic font-light">
"Ser la mejor empresa integradora especializada en brindar soluciones en tecnologías de la información y comunicaciones, reconocida por nuestra excelencia técnica, innovación constante y compromiso con la satisfacción del cliente."
</p>
</div>
</div>
<!-- Certificaciones -->
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-white mb-4 tracking-tighter">Ética y Calidad Certificada</h2>
<div class="w-20 h-1 gradient-red mx-auto mb-10"></div>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="card-glass p-10 rounded-2xl text-center hover:bg-white/5 transition-all">
<i class="fa-solid fa-certificate text-5xl text-blue-400 mb-6"></i>
<h4 class="text-xl font-bold text-white mb-2 uppercase tracking-widest">ISO 9001</h4>
<p class="text-slate-500 text-sm">Gestión de Calidad Certificada orientada al cliente.</p>
</div>
<div class="card-glass p-10 rounded-2xl text-center border-red-500/20 hover:bg-white/5 transition-all">
<i class="fa-solid fa-scale-balanced text-5xl text-red-600 mb-6"></i>
<h4 class="text-xl font-bold text-white mb-2 uppercase tracking-widest">ISO 37001</h4>
<p class="text-slate-500 text-sm">Sistema de Gestión Antisoborno e Integridad Corporativa.</p>
</div>
</div>
</div>
</section>
<!-- Soluciones Grid Completo -->
<section id="soluciones" class="py-24 bg-tech-dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16">
<h2 class="text-4xl font-bold text-white mb-4 tracking-tight">Soluciones que ponemos a su disposición</h2>
<div class="w-20 h-1 gradient-red mx-auto mb-6"></div>
<p class="text-slate-400 max-w-3xl mx-auto text-lg font-light">
Portafolio integral de servicios diseñado para cubrir las necesidades tecnológicas de su empresa.
</p>
</div>
<div class="max-w-7xl mx-auto px-4 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-red-600/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-server text-red-600 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Infraestructura y Datacenter</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Proyectos de renovación del parque informático y Datacenter. Suministro e instalación de Servidores y Equipos de Cómputo.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-blue-500/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-network-wired text-blue-500 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Networking y Comunicaciones</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Diseño e Implementación de Redes LAN/WAN/Cloud. Telefonía IP, CCTV y Wireless de alto rendimiento.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-emerald-500/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-shield-halved text-emerald-500 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Seguridad Informática</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Soluciones integrales de Ciberseguridad para proteger sus activos digitales y continuidad operativa.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-orange-500/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-database text-orange-500 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Almacenamiento (Storage)</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Soluciones escalables All-Flash e Híbridas que garantizan disponibilidad y recuperación inmediata.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-purple-500/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-diagram-project text-purple-500 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Cableado Estructurado</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Instalación de Redes UTP y Fibra Óptica certificadas bajo estándares internacionales.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-yellow-500/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-bolt text-yellow-500 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Energía y Respaldo</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Energía Estabilizada y UPS para Datacenter, asegurando la máxima protección eléctrica.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-sky-400/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-cloud text-sky-400 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Servicios Cloud (Nube)</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Gestión de entornos Microsoft 365, Azure, AWS y Google Cloud para potenciar la colaboración.</p>
</div>
<div class="card-glass p-8 rounded-2xl border-white/5 hover:border-pink-500/30 transition-all flex flex-col h-full group">
<i class="fa-solid fa-key text-pink-500 text-3xl mb-6 group-hover:scale-110 transition-transform"></i>
<h3 class="text-xl font-bold text-white mb-4 leading-tight">Licenciamiento Corporativo</h3>
<p class="text-slate-400 text-sm text-justify leading-relaxed flex-grow">Gestión legal de software: Microsoft, Adobe, Antivirus y AutoCAD.</p>
</div>
</div>
<div class="text-center mt-12">
<a href="soluciones.php" class="bg-white/5 border border-white/10 text-white px-8 py-3 rounded-full font-bold uppercase text-[10px] tracking-widest hover:bg-white/10 transition-all">Ver Detalle Completo</a>
</div>
</section>
<!-- El Corazón de su Datacenter -->
<section id="servidores" class="py-24 bg-slate-900">
<div class="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-16 items-center">
<div>
<h2 class="text-4xl font-bold text-white mb-8 leading-tight">El corazón de su <span class="text-red-600">Datacenter</span></h2>
<p class="text-lg text-slate-400 mb-8 font-light text-justify">Sistemas de cómputo configurados bajo estándares internacionales para operaciones de misión crítica.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="p-3 bg-red-600/10 rounded-lg mr-4"><i class="fa-solid fa-check text-red-600"></i></div>
<div><h4 class="text-white font-bold uppercase text-xs tracking-widest">HPE ProLiant Gen11</h4><p class="text-sm text-slate-500">Máxima seguridad y rendimiento optimizado.</p></div>
</div>
<div class="flex items-start">
<div class="p-3 bg-red-600/10 rounded-lg mr-4"><i class="fa-solid fa-check text-red-600"></i></div>
<div><h4 class="text-white font-bold uppercase text-xs tracking-widest">Lenovo ThinkSystem V3</h4><p class="text-sm text-slate-500">Líderes en fiabilidad mundial x86.</p></div>
</div>
<div class="flex items-start">
<div class="p-3 bg-red-600/10 rounded-lg mr-4"><i class="fa-solid fa-check text-red-600"></i></div>
<div><h4 class="text-white font-bold uppercase text-xs tracking-widest">Dell PowerEdge 16G</h4><p class="text-sm text-slate-500">Automatización inteligente y resiliencia.</p></div>
</div>
</div>
</div>
<div class="relative group">
<img src="img/datacenter.jpg" alt="Servidores - Datacenter" class="relative z-10 w-full rounded-2xl shadow-2xl border border-white/10">
</div>
</div>
</section>
<!-- Empresas -->
<section class="py-24 bg-[#0f172a]">
<div class="max-w-7xl mx-auto px-4 text-center">
<h2 class="text-2xl font-bold text-white mb-16 tracking-tight uppercase text-xs tracking-[0.4em]">Empresas que confían en nosotros</h2>
<div class="flex flex-wrap justify-center gap-x-12 md:gap-x-20 gap-y-10 items-center opacity-60">
<span class="text-xl font-bold text-[#94a3b8]">SANNA</span>
<span class="text-xl font-bold text-[#94a3b8]">HIRAOKA</span>
<span class="text-xl font-bold text-[#94a3b8] text-sm md:text-xl">COLEGIO MÉDICO DEL PERÚ</span>
<span class="text-xl font-bold text-[#94a3b8]">GRUPO VEGA</span>
<span class="text-xl font-bold text-[#94a3b8]">GDM</span>
</div>
</div>
</section>
<!-- Contacto -->
<section id="contacto" class="py-24 bg-tech-dark">
<div class="max-w-7xl mx-auto px-4">
<div class="bg-slate-900 rounded-3xl overflow-hidden shadow-2xl border border-white/5 grid md:grid-cols-2">
<div class="p-12 md:p-20 flex flex-col justify-center">
<h2 class="text-4xl font-bold text-white mb-6 tracking-tight leading-tight">Iniciemos su <br><span class="text-red-600">Transformación</span></h2>
<p class="text-slate-400 mb-10 text-lg font-light">Consulte con un experto tecnológico y obtenga una propuesta a la medida de su negocio.</p>
<div class="space-y-6">
<div class="flex items-center group"><i class="fa-solid fa-phone text-red-600 mr-4 group-hover:scale-110 transition-transform"></i><span class="font-bold text-lg text-white">(511) 220-6221</span></div>
<div class="flex items-center group"><i class="fa-solid fa-envelope text-red-600 mr-4 group-hover:scale-110 transition-transform"></i><span class="font-bold text-lg text-white">ventas@toshiko.com.pe</span></div>
</div>
</div>
<div class="p-12 md:p-20 bg-slate-800/20">
<div id="successMessage" class="hidden bg-emerald-600/20 border border-emerald-500 text-emerald-400 p-4 rounded-lg mb-6 text-center">Mensaje enviado con éxito.</div>
<form id="contactForm" class="space-y-4">
<input type="text" id="name" placeholder="Nombre Completo" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-4 text-white focus:border-red-600 outline-none transition-all">
<input type="text" id="company" placeholder="Empresa" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-4 text-white focus:border-red-600 outline-none transition-all">
<textarea id="message" rows="4" placeholder="¿En qué podemos ayudarle?" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-4 text-white focus:border-red-600 outline-none transition-all"></textarea>
<button type="button" onclick="sendForm()" id="submitBtn" class="w-full gradient-red text-white py-4 rounded-lg font-bold text-lg uppercase tracking-widest mt-4">Enviar Solicitud</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-950 py-12 border-t border-white/5 text-center text-slate-500 text-[10px] uppercase tracking-[0.4em]">
<p>© <?php echo date("Y"); ?> Grupo Toshiko S.A.C. Todos los derechos reservados.</p>
</footer>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
function setSlide(index) {
slides[currentSlide].classList.remove('active');
dots[currentSlide].classList.remove('active');
currentSlide = index;
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
function nextSlide() { setSlide((currentSlide + 1) % slides.length); }
setInterval(nextSlide, 7000);
async function sendForm() {
const btn = document.getElementById('submitBtn');
const nameInput = document.getElementById('name');
if (nameInput.value.trim() === "") { alert("Por favor complete su nombre."); return; }
btn.disabled = true; btn.innerText = "Enviando...";
setTimeout(() => {
document.getElementById('contactForm').reset();
document.getElementById('successMessage').classList.remove('hidden');
btn.innerText = "Enviado";
}, 1000);
}
</script>
</body>
</html>