Download index.html from vichoka/undefined: direct link, hf CLI and curl.
- Browser
- Download file 188 kB
-
https://huggingface.co/spaces/vichoka/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/vichoka/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/vichoka/undefined/resolve/main/index.html
188 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<meta name="theme-color" content="#00B4D8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>SH Silva | Expertos en Soluciones de Bombeo Eficientes</title>
<meta name="description" content="Con 20 años de experiencia, ofrecemos soluciones de bombeo personalizadas, fabricación, montaje y servicio técnico especializado. Expertos en sistemas hidráulicos industriales.">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
/* Design System Colors - Water & Hydraulic Theme */
--color-bg: #FFFFFF;
--color-surface: #F8FCFF;
--color-surface-tint: #F0F7FF;
--color-surface-alt: #E8F4FD;
--color-text-primary: #0A1A2F;
--color-text-secondary: #2C4A6B;
--color-text-muted: #5A7A9A;
--color-border: #C5D9F1;
--color-border-strong: #9BC2E8;
--color-brand: #0A1A2F;
/* Accent Colors - Water & Industrial */
--color-accent-primary: #00B4D8;
--color-accent-primary-600: #0096C7;
--color-accent-primary-400: #48CAE4;
--color-accent-primary-200: #CAF0F8;
--color-accent-primary-100: #E0F7FF;
--color-accent-secondary: #023E8A;
--color-accent-tertiary: #0077B6;
--color-accent-quaternary: #90E0EF;
--color-success: #2D6A4F;
--color-warning: #F8961E;
--color-danger: #E63946;
--color-info: #1D4ED8;
/* Sophisticated Gradients */
--gradient-ocean: linear-gradient(135deg, #00B4D8 0%, #0077B6 50%, #023E8A 100%);
--gradient-surface: linear-gradient(180deg, #F8FCFF 0%, #F0F7FF 100%);
--gradient-accent: linear-gradient(135deg, #00B4D8 0%, #0096C7 100%);
--gradient-deep: linear-gradient(135deg, #023E8A 0%, #0A1A2F 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
--gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,248,255,0.8) 100%);
--gradient-hero: linear-gradient(135deg, rgba(0,180,216,0.1) 0%, rgba(2,62,138,0.1) 100%);
--gradient-button: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
--gradient-button-hover: linear-gradient(135deg, #0096C7 0%, #023E8A 100%);
/* Overlays */
--color-scrim: rgba(10,26,47,0.4);
--color-tint-light: rgba(0,180,216,0.15);
--color-tint-water: rgba(0,180,216,0.08);
--color-tint-glass: rgba(255,255,255,0.1);
/* Spacing Scale */
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Border Radius - Organic Curves */
--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-2xl: 40px;
--radius-pill: 999px;
--radius-organic: 20px 30px 15px 25px;
/* Sophisticated Shadows */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
--shadow-xl: 0 24px 60px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.1);
--shadow-accent: 0 8px 32px rgba(0,180,216,0.2);
--shadow-accent-lg: 0 16px 48px rgba(0,180,216,0.25);
--shadow-glass: 0 8px 32px rgba(255,255,255,0.1);
--shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
/* Typography */
--font-display: 'Inter', SF Pro, Segoe UI, Roboto, Arial, sans-serif;
--font-text: 'Inter', SF Pro, Segoe UI, Roboto, Arial, sans-serif;
--font-numeric: 'Inter', Roboto Mono, Menlo, monospace;
/* Motion & Animations */
--transition-fast: 150ms;
--transition-base: 250ms;
--transition-slow: 400ms;
--transition-slower: 600ms;
--curve-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
--curve-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);
--curve-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--curve-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--curve-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--curve-ease-out: cubic-bezier(0, 0, 0.2, 1);
--curve-ease-in: cubic-bezier(0.4, 0, 1, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Improved text handling */
* {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Responsive text sizing */
html {
-webkit-text-size-adjust: 100%;
}
/* Better text containers */
p, .body, .small, .lead, .section-desc {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 1.5;
}
/* Mobile text adjustments */
@media (max-width: 768px) {
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.5;
}
.h1 { font-size: 2rem; }
.h2 { font-size: 1.75rem; }
.h3 { font-size: 1.5rem; }
.h4 { font-size: 1.25rem; }
.lead { font-size: 1rem; }
.section-title, .section-desc {
padding: 0 1rem;
}
}
body {
font-family: var(--font-text);
line-height: 1.6;
color: var(--color-text-primary);
background-color: var(--color-bg);
/* Mobile optimizations */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Prevent horizontal scroll */
overflow-x: hidden;
}
/* Touch optimizations */
* {
-webkit-tap-highlight-color: transparent;
}
/* Smooth scrolling for iOS */
html {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 var(--space-6);
}
/* Header - Glassmorphism Water Theme */
.app-header {
position: sticky;
top: 0;
background: var(--gradient-glass);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--color-border);
border-image: var(--gradient-accent) 1;
z-index: 1000;
transition: all var(--transition-base) var(--curve-smooth);
box-shadow: var(--shadow-glass);
}
.app-header.scrolled {
background: rgba(248, 252, 255, 0.95);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
box-shadow: var(--shadow-accent);
border-bottom: 1px solid var(--color-accent-primary);
transform: translateY(-1px);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
padding: 0 var(--space-4);
}
/* Mobile header adjustments */
@media (max-width: 1280px) {
.nav-links { gap: var(--space-4); }
.nav-link { font-size: 15px; padding: 10px 6px; }
.header-actions .btn { padding: 10px 16px; }
}
@media (max-width: 1100px) {
.nav-links { display: none !important; }
.mobile-menu-btn { display: block !important; }
.header-actions .btn { display: none !important; }
}
@media (max-width: 768px) {
.header-container {
height: 70px;
padding: 0 var(--space-2);
}
.brand-lockup img {
width: 56px;
height: 42px;
}
.header-actions .btn {
padding: 10px 16px;
font-size: 14px;
min-height: 40px;
}
}
@media (max-width: 600px) {
.header-container {
height: 64px;
}
.brand-lockup img {
width: 48px;
height: 36px;
}
.header-actions .btn {
padding: 8px 14px;
font-size: 13px;
min-height: 36px;
}
}
.brand-lockup {
display: flex;
align-items: center;
gap: var(--space-4);
text-decoration: none;
color: var(--color-brand);
}
.brand-icon {
width: 48px;
height: 48px;
background: var(--gradient-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.brand-wordmark {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
letter-spacing: -0.5px;
}
.nav-links {
display: flex;
gap: var(--space-6);
list-style: none;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-link {
color: var(--color-text-secondary);
text-decoration: none;
font-weight: 600;
font-size: 16px;
line-height: 1;
padding: 10px 8px;
border-radius: var(--radius-sm);
transition: all var(--transition-base) var(--curve-smooth);
position: relative;
white-space: nowrap;
}
/* ===== MENÚ MÓVIL COMPLETAMENTE NUEVO ===== */
/* Botón del menú móvil */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--color-brand);
font-size: 24px;
cursor: pointer;
padding: var(--space-3);
border-radius: var(--radius-md);
transition: all 0.3s ease;
z-index: 1001;
min-width: 48px;
min-height: 48px;
}
.mobile-menu-btn:hover {
background: var(--color-surface);
color: var(--color-accent-primary);
}
/* Mostrar botón en móvil */
@media (max-width: 768px) {
.mobile-menu-btn {
display: block !important;
}
.nav-links {
display: none !important;
}
/* ESPACIADO ESPECÍFICO PARA MÓVIL */
.mobile-menu-link {
padding: var(--space-4) var(--space-6) !important;
min-height: 45px !important;
}
.mobile-menu-header {
padding: var(--space-4) var(--space-6) !important;
min-height: 45px !important;
}
.submenu-link {
padding: var(--space-3) var(--space-5) var(--space-3) var(--space-8) !important;
min-height: 40px !important;
}
/* ICONOS ESPECÍFICOS PARA MÓVIL */
.mobile-menu-link i,
.mobile-menu-header i:first-child {
margin-top: var(--space-1) !important;
margin-bottom: var(--space-1) !important;
font-size: 16px !important;
}
/* MEJORAR DISEÑO INTERNO */
.mobile-menu-link span,
.mobile-menu-header span {
font-size: 14px !important;
font-weight: 600 !important;
}
.submenu-link span {
font-size: 13px !important;
}
}
/* PANTALLAS MUY PEQUEÑAS */
@media (max-width: 480px) {
.mobile-menu-link {
padding: var(--space-6) var(--space-4) !important;
min-height: 55px !important;
}
.mobile-menu-header {
padding: var(--space-6) var(--space-4) !important;
min-height: 55px !important;
}
.submenu-link {
padding: var(--space-5) var(--space-4) var(--space-5) var(--space-6) !important;
min-height: 50px !important;
}
/* ICONOS PARA PANTALLAS MUY PEQUEÑAS */
.mobile-menu-link i,
.mobile-menu-header i:first-child {
margin-top: var(--space-1) !important;
margin-bottom: var(--space-1) !important;
}
}
/* PANTALLAS MEDIANAS */
@media (max-width: 600px) and (min-width: 481px) {
.mobile-menu-link {
padding: var(--space-5) var(--space-5) !important;
min-height: 50px !important;
}
.mobile-menu-header {
padding: var(--space-5) var(--space-5) !important;
min-height: 50px !important;
}
.submenu-link {
padding: var(--space-4) var(--space-5) var(--space-4) var(--space-7) !important;
min-height: 45px !important;
}
}
/* IMAGEN DE SERVICIOS SOLO EN MÓVIL */
.worker-image-mobile {
display: none !important;
}
@media (max-width: 768px) {
.worker-image-mobile {
display: block !important;
width: 100% !important;
max-width: 400px !important;
margin: var(--space-8) auto var(--space-6) auto !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
object-fit: cover !important;
height: auto !important;
}
/* OCULTAR LA IMAGEN DEL LADO EN MÓVIL */
.contact-image-mobile {
display: none !important;
}
}
@media (max-width: 480px) {
.worker-image-mobile {
max-width: 320px !important;
margin: var(--space-6) auto var(--space-4) auto !important;
}
}
/* Menú móvil principal - COMPLETAMENTE OCULTO POR DEFECTO */
.mobile-menu {
display: none !important;
position: fixed;
top: 76px;
left: 0;
right: 0;
width: 100%;
height: calc(100vh - 76px);
background: var(--color-surface);
border-bottom: 2px solid var(--color-accent-primary);
z-index: 999;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: var(--space-8);
}
/* SOLO mostrar cuando tenga la clase show */
.mobile-menu.show {
display: block !important;
}
/* Contenido del menú */
.mobile-menu-content {
padding: 0;
}
/* Separación adicional entre grupos */
.mobile-menu-links + .mobile-menu-section {
margin-top: var(--space-6);
}
.mobile-menu-section + .mobile-menu-links {
margin-top: var(--space-6);
}
/* Enlaces principales */
.mobile-menu-links {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.mobile-menu-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-6);
color: var(--color-text);
text-decoration: none;
background: var(--color-surface);
border: 2px solid var(--color-accent-primary);
border-radius: var(--radius-lg);
transition: all 0.3s ease;
font-weight: 600;
margin-bottom: var(--space-4);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-height: 80px;
}
.mobile-menu-link:hover {
background: var(--color-accent-primary);
color: white;
transform: translateX(8px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.mobile-menu-link i {
width: 24px;
text-align: center;
color: var(--color-accent-primary);
font-size: 18px;
margin-right: var(--space-2);
margin-top: var(--space-1);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 24px;
}
.mobile-menu-link:hover i {
color: white;
}
/* Secciones expandibles */
.mobile-menu-section {
background: var(--color-surface);
border: 2px solid var(--color-accent-primary);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.mobile-menu-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-6);
background: var(--color-accent-primary);
cursor: pointer;
transition: all 0.3s ease;
min-height: 80px;
}
.mobile-menu-header:hover {
background: var(--color-accent-secondary);
transform: translateY(-1px);
}
.mobile-menu-header i:first-child {
width: 24px;
text-align: center;
color: white;
font-size: 18px;
margin-right: var(--space-2);
margin-top: var(--space-1);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 24px;
}
.mobile-menu-header span {
flex: 1;
color: white;
font-weight: 700;
font-size: 16px;
}
.mobile-menu-header .toggle-icon {
width: 18px;
text-align: center;
color: white;
transition: transform 0.3s ease;
transform: rotate(0deg);
}
.mobile-menu-section.expanded .toggle-icon {
transform: rotate(180deg) !important;
}
/* Submenús */
.mobile-menu-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: var(--color-surface-alt);
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding: 0;
}
.mobile-menu-section.expanded .mobile-menu-submenu {
max-height: 500px;
padding: var(--space-2) 0;
}
/* Estado normal de las secciones */
.mobile-menu-section {
border: 2px solid transparent;
transition: border-color 0.3s ease;
}
/* Estado expandido de las secciones */
.mobile-menu-section.expanded {
border-color: var(--color-accent-secondary);
}
/* Estado normal de submenús */
.mobile-menu-section:not(.expanded) .mobile-menu-submenu {
max-height: 0;
height: 0;
padding: 0;
overflow: hidden;
}
/* Asegurar que las secciones expandibles funcionen */
.mobile-menu-section {
cursor: pointer;
}
.mobile-menu-header {
cursor: pointer;
user-select: none;
}
.submenu-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-8) var(--space-5) var(--space-8) var(--space-8);
color: var(--color-text);
text-decoration: none;
background: var(--color-surface);
border-left: 3px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
margin-bottom: var(--space-2);
min-height: 60px;
}
.submenu-link:hover {
background: var(--color-accent-primary);
color: white;
border-left-color: var(--color-accent-primary);
transform: translateX(4px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.submenu-link i {
width: 16px;
text-align: center;
color: var(--color-accent-primary);
font-size: 14px;
margin-right: var(--space-2);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 16px;
}
.submenu-link:hover i {
color: white;
}
.mobile-menu .nav-link:hover {
background: var(--color-surface);
color: var(--color-accent-primary);
}
.nav-link:hover {
color: var(--color-accent-primary);
background: rgba(0,180,216,0.06);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 3px;
background: var(--gradient-accent);
border-radius: 2px;
transition: width var(--transition-base) var(--curve-standard);
}
.nav-link:hover::after {
width: 100%;
}
.nav-link:hover {
color: var(--color-accent-primary);
transform: translateY(-2px);
background: rgba(0,180,216,0.06);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
.header-actions .btn {
min-height: 44px;
padding: 12px 20px;
border-radius: 28px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-lg);
border: none;
cursor: pointer;
transition: all var(--transition-base) var(--curve-smooth);
font-family: var(--font-text);
min-height: 48px;
min-width: 48px;
touch-action: manipulation;
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
text-transform: none;
}
/* Responsive button adjustments */
@media (max-width: 768px) {
.btn {
padding: 14px 20px;
min-height: 48px;
min-width: 48px;
font-size: 16px;
border-radius: var(--radius-md);
}
.btn-primary, .btn-secondary {
width: 100%;
justify-content: center;
}
}
@media (max-width: 600px) {
.btn {
padding: 12px 18px;
min-height: 44px;
min-width: 44px;
font-size: 15px;
border-radius: var(--radius-md);
}
}
.btn-primary {
background: var(--gradient-button);
color: white;
border: 2px solid transparent;
box-shadow: var(--shadow-accent);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left var(--transition-slow) var(--curve-smooth);
}
.btn-primary:hover {
background: var(--gradient-button-hover);
transform: translateY(-4px) scale(1.02);
box-shadow: var(--shadow-accent-lg);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:active {
transform: translateY(-2px) scale(0.98);
transition: all var(--transition-fast) var(--curve-bounce);
}
.btn-secondary {
background: var(--gradient-glass);
color: var(--color-accent-primary);
border: 2px solid var(--color-accent-primary);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--gradient-button);
color: white;
transform: translateY(-4px) scale(1.02);
box-shadow: var(--shadow-accent);
border-color: transparent;
}
.btn-secondary:active {
transform: translateY(-2px) scale(0.98);
transition: all var(--transition-fast) var(--curve-bounce);
}
.btn-ghost {
background: transparent;
color: var(--color-brand);
padding: 12px 20px;
border: 2px solid transparent;
position: relative;
}
.btn-ghost::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-accent);
transition: all var(--transition-base) var(--curve-smooth);
transform: translateX(-50%);
}
.btn-ghost:hover {
color: var(--color-accent-primary);
transform: translateY(-2px);
}
.btn-ghost:hover::before {
width: 80%;
}
/* Typography */
.h1 {
font-size: 56px;
line-height: 64px;
font-weight: 800;
letter-spacing: -0.5px;
font-family: var(--font-display);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.h2 {
font-size: 40px;
line-height: 48px;
font-weight: 800;
letter-spacing: -0.25px;
font-family: var(--font-display);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.h3 {
font-size: 28px;
line-height: 36px;
font-weight: 700;
letter-spacing: -0.15px;
font-family: var(--font-display);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.h4 {
font-size: 22px;
line-height: 30px;
font-weight: 700;
font-family: var(--font-display);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.lead {
font-size: 18px;
line-height: 28px;
font-weight: 500;
color: var(--color-text-secondary);
}
.body {
font-size: 16px;
line-height: 26px;
font-weight: 400;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.body-strong {
font-size: 16px;
line-height: 26px;
font-weight: 600;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.small {
font-size: 14px;
line-height: 22px;
font-weight: 400;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.micro {
font-size: 12px;
line-height: 18px;
font-weight: 500;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: var(--space-16);
}
.section-kicker {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: var(--color-accent-primary);
letter-spacing: 1px;
margin-bottom: var(--space-4);
}
.section-title {
margin-bottom: var(--space-6);
max-width: 720px;
margin-left: auto;
margin-right: auto;
color: var(--color-text-primary);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.section-desc {
max-width: 720px;
margin: 0 auto;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Cards - Water Theme */
.card {
background: var(--gradient-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: all var(--transition-base) var(--curve-smooth);
overflow: hidden;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-glass);
opacity: 0;
transition: opacity var(--transition-base) var(--curve-smooth);
pointer-events: none;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-xl);
border-color: var(--color-accent-primary);
}
.card:hover::before {
opacity: 1;
}
/* Card Feature specific styles */
.card-feature {
padding: var(--space-8);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
margin: var(--space-2);
}
/* Horizontal Reel System for Mobile */
.cards-reel-container {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--space-4) 0;
}
.cards-reel-container::-webkit-scrollbar {
display: none;
}
.card-reel {
flex: 0 0 280px;
background: rgba(255, 255, 255, 0.95);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 4px 20px rgba(0, 180, 216, 0.1);
padding: var(--space-6);
scroll-snap-align: start;
transition: all var(--transition-base) var(--curve-standard);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 200px;
}
.card-reel:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 180, 216, 0.2);
border-color: var(--color-accent-primary);
}
.card-reel .icon-container {
width: 48px;
height: 48px;
margin-bottom: var(--space-4);
}
.card-reel h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: var(--space-3);
color: var(--color-text-primary);
line-height: 1.2;
}
.card-reel p {
font-size: 14px;
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0;
}
/* SISTEMA COMPLETO DE REELS HORIZONTALES */
.reel-container {
position: relative;
overflow: hidden;
padding: 0 50px;
}
/* FLECHAS DE NAVEGACIÓN PROFESIONALES */
.reel-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: var(--color-accent-primary);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
z-index: 10;
opacity: 0.9;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chile-image-container {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.reel-nav-btn:hover {
opacity: 1;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
background: var(--color-accent-secondary);
}
.reel-nav-btn:active {
transform: translateY(-50%) scale(0.95);
}
.reel-nav-btn.prev {
left: 10px;
}
.reel-nav-btn.next {
right: 10px;
}
/* INDICADORES DE PUNTOS */
.reel-dots {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
.reel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border);
cursor: pointer;
transition: all 0.3s ease;
}
.reel-dot.active {
background: var(--color-accent-primary);
transform: scale(1.2);
}
.reel-dot:hover {
background: var(--color-accent-secondary);
}
/* SCROLLBAR PERSONALIZADO */
.cards-reel-container::-webkit-scrollbar {
height: 6px;
}
.cards-reel-container::-webkit-scrollbar-track {
background: var(--color-surface-alt);
border-radius: 3px;
}
.cards-reel-container::-webkit-scrollbar-thumb {
background: var(--color-accent-primary);
border-radius: 3px;
transition: background 0.3s ease;
}
.cards-reel-container::-webkit-scrollbar-thumb:hover {
background: var(--color-accent-secondary);
}
/* ===== DISEÑO ESPECÍFICO PARA MÓVIL ===== */
@media (max-width: 768px) {
.reel-container {
padding: 0 60px !important;
margin: 0 -20px;
}
.reel-nav-btn {
width: 48px !important;
height: 48px !important;
font-size: 18px !important;
background: var(--color-accent-primary) !important;
box-shadow: 0 4px 20px rgba(0, 180, 216, 0.4) !important;
z-index: 20 !important;
}
.reel-nav-btn.prev {
left: 8px !important;
}
.reel-nav-btn.next {
right: 8px !important;
}
.reel-dots {
margin-top: var(--space-4) !important;
gap: var(--space-3) !important;
}
.reel-dot {
width: 10px !important;
height: 10px !important;
}
/* MEJORAR POSICIONAMIENTO DE TARJETAS EN MÓVIL */
.cards-reel-container {
scroll-snap-type: x mandatory !important;
gap: var(--space-4) !important;
padding: var(--space-4) !important;
scroll-behavior: smooth !important;
}
.card-reel {
scroll-snap-align: center !important;
flex: 0 0 calc(100vw - 140px) !important;
max-width: calc(100vw - 140px) !important;
min-height: 200px !important;
margin: 0 !important;
padding: var(--space-8) !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
}
.card-reel h4 {
font-size: 16px !important;
margin-bottom: var(--space-3) !important;
word-wrap: break-word !important;
}
.card-reel p {
font-size: 14px !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* OCULTAR SCROLLBAR EN MÓVIL */
.cards-reel-container::-webkit-scrollbar {
display: none !important;
}
}
/* PANTALLAS MUY PEQUEÑAS */
@media (max-width: 480px) {
.reel-container {
padding: 0 50px !important;
}
.reel-nav-btn {
width: 44px !important;
height: 44px !important;
font-size: 16px !important;
}
.card-reel {
flex: 0 0 calc(100vw - 100px) !important;
max-width: calc(100vw - 100px) !important;
min-height: 160px !important;
}
}
.card-feature .btn {
margin-top: var(--space-6);
align-self: stretch;
justify-content: center;
width: 100%;
padding: var(--space-4) var(--space-6);
min-height: 48px;
}
/* Ensure proper button positioning in cards */
.card-feature .btn-secondary {
background: transparent;
color: var(--color-accent-primary);
border: 2px solid var(--color-accent-primary);
transition: all var(--transition-base) var(--curve-standard);
font-weight: 600;
letter-spacing: 0.5px;
}
.card-feature .btn-secondary:hover {
background: var(--color-accent-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 180, 216, 0.3);
}
/* Card content spacing */
.card-feature h4 {
margin-bottom: var(--space-4);
color: var(--color-text-primary);
}
.card-feature p {
margin-bottom: var(--space-6);
color: var(--color-text-secondary);
line-height: 1.6;
flex-grow: 1;
}
/* Responsive images */
.card img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--radius-md);
}
/* Responsive card heights */
@media (max-width: 768px) {
.card {
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
padding: var(--space-6);
}
.card img {
border-radius: var(--radius-sm);
}
.card-feature {
text-align: center;
padding: var(--space-6);
display: flex;
flex-direction: column;
align-items: center;
}
.card-feature .btn {
margin-top: var(--space-6);
align-self: stretch;
width: 100%;
padding: var(--space-4) var(--space-6);
min-height: 48px;
}
.card-feature h4 {
text-align: center;
width: 100%;
margin-bottom: var(--space-4);
}
.card-feature p {
text-align: center;
width: 100%;
margin-bottom: var(--space-6);
flex-grow: 1;
}
/* Ensure proper spacing between cards */
.grid-3, .grid-4, .grid-2 {
gap: var(--space-6);
}
}
@media (max-width: 600px) {
.card {
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
padding: var(--space-5);
}
.card-feature {
padding: var(--space-5);
}
/* Reduce gaps on very small screens */
.grid-3, .grid-4, .grid-2 {
gap: var(--space-4);
}
}
@media (max-width: 600px) {
.card {
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
}
.card-feature {
padding: var(--space-5);
}
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-accent);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0, 180, 216, 0.2);
border-color: var(--color-accent-primary);
}
.card:hover::before {
transform: scaleX(1);
}
/* Tarjetas de imagen placeholder */
.card-image-placeholder {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-tint) 100%);
border: 2px dashed var(--color-border);
transition: all var(--transition-base) var(--curve-standard);
position: relative;
overflow: hidden;
}
.card-image-placeholder::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(0, 180, 216, 0.03) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(2, 62, 138, 0.03) 0%, transparent 50%);
opacity: 1;
pointer-events: none;
}
.card-image-placeholder:hover {
transform: translateY(-4px);
border-color: var(--color-accent-primary);
box-shadow: 0 8px 25px rgba(0, 180, 216, 0.15);
}
.card-image-placeholder .placeholder-content {
position: relative;
z-index: 2;
}
.card-feature {
padding: var(--space-6);
}
.card-stat {
padding: var(--space-6);
text-align: center;
}
.card-testimonial {
padding: var(--space-6);
}
.card-offset-cta {
background: var(--color-surface);
padding: var(--space-8);
position: relative;
border: 2px solid var(--color-accent-primary);
box-shadow: 0 8px 30px rgba(0, 180, 216, 0.15);
}
.card-offset-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(0, 180, 216, 0.03) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(2, 62, 138, 0.03) 0%, transparent 50%);
opacity: 1;
}
/* Icon Containers - Water Theme */
.icon-container {
width: 56px;
height: 56px;
background: var(--gradient-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
box-shadow: 0 6px 20px rgba(0, 180, 216, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
/* Responsive icon containers */
@media (max-width: 768px) {
.icon-container {
width: 48px;
height: 48px;
margin: 0 auto var(--space-4);
display: flex;
align-items: center;
justify-content: center;
}
.icon-container i {
font-size: 22px;
line-height: 1;
}
}
@media (max-width: 600px) {
.icon-container {
width: 44px;
height: 44px;
margin: 0 auto var(--space-4);
display: flex;
align-items: center;
justify-content: center;
}
.icon-container i {
font-size: 20px;
line-height: 1;
}
}
.icon-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.icon-container:hover::before {
transform: translateX(100%);
}
.icon-container i {
font-size: 26px;
color: white;
z-index: 2;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Stats - Water Theme */
.stat-number {
font-family: var(--font-numeric);
font-size: 48px;
font-weight: 800;
line-height: 56px;
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-2);
text-shadow: 0 2px 10px rgba(0, 180, 216, 0.3);
}
/* Responsive stats */
@media (max-width: 768px) {
.stat-number {
font-size: 36px;
line-height: 44px;
}
}
@media (max-width: 600px) {
.stat-number {
font-size: 32px;
line-height: 40px;
}
}
.stat-label {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: var(--color-accent-secondary);
letter-spacing: 1px;
}
/* Grid Layouts */
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-6);
padding: var(--space-2);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
padding: var(--space-2);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
padding: var(--space-2);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
padding: var(--space-2);
}
/* Hero Section - Clean Design */
.hero {
padding: var(--space-16) 0;
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
position: relative;
overflow: hidden;
color: var(--color-text-primary);
min-height: auto;
display: flex;
align-items: flex-start;
height: auto;
}
/* Estilos para la imagen de Chile */
.chile-image-container {
text-align: center;
max-width: 100%;
margin: 0 auto;
background: transparent;
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.hero-media {
overflow: hidden;
}
}
/* Posicionamiento correcto del hero-media */
.hero-media {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 600px;
min-height: 600px;
}
.chile-map-container {
position: relative;
z-index: 2;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
/* Tooltip transform */
.tooltip.show {
transform: translateY(0);
}
.tooltip-title {
color: var(--color-accent-primary);
font-size: 16px;
font-weight: 700;
margin-bottom: var(--space-2);
}
.tooltip-description {
color: var(--color-text-primary);
font-size: 14px;
margin-bottom: var(--space-3);
}
.tooltip-services {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.tooltip-service {
background: var(--color-accent-primary-200);
color: var(--color-accent-primary);
padding: 4px 8px;
border-radius: var(--radius-xs);
font-size: 12px;
font-weight: 600;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(0, 180, 216, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(2, 62, 138, 0.05) 0%, transparent 50%);
opacity: 1;
z-index: 1;
}
/* Video de fondo */
.hero-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.7;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-media {
position: relative;
z-index: 2;
}
/* Hero optimizado */
.hero .container {
display: flex;
align-items: flex-start;
min-height: auto;
padding: var(--space-8) var(--space-4) 0 var(--space-4);
position: relative;
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
}
/* Forzar el layout del grid en el hero */
.hero .grid-12 {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
gap: var(--space-12) !important;
width: 100% !important;
align-items: start !important;
}
.hero .hero-content {
grid-column: 1 / 6 !important;
width: 100% !important;
}
.hero .hero-media {
grid-column: 6 / 13 !important;
width: 100% !important;
}
/* Mobile hero layout */
@media (max-width: 768px) {
.hero .grid-12 {
grid-template-columns: 1fr !important;
gap: var(--space-8) !important;
}
.hero .hero-content {
grid-column: 1 / -1 !important;
order: 1 !important;
text-align: center;
}
.hero .hero-media {
grid-column: 1 / -1 !important;
order: 2 !important;
}
.hero-content h1 {
text-align: center;
margin-bottom: var(--space-6);
}
.hero-content .lead {
text-align: center;
margin-bottom: var(--space-6);
}
.hero-content .btn {
width: 100%;
margin-bottom: var(--space-4);
justify-content: center;
}
.hero-content .btn:last-child {
margin-bottom: 0;
}
/* Center stats properly */
.hero-content > div:last-child {
justify-content: center;
gap: var(--space-6);
flex-wrap: wrap;
}
}
.hero .grid-12 {
align-items: flex-start;
gap: var(--space-12);
position: relative;
z-index: 2;
}
/* Ajuste para mapa más grande */
.hero-media {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.chile-map-container {
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
justify-content: center;
}
.hero-content h1 {
margin-bottom: var(--space-6);
line-height: 1.1;
}
.hero-content .lead {
margin-bottom: var(--space-8);
font-size: 20px;
line-height: 1.6;
}
.hero-content .btn {
margin-bottom: var(--space-8);
}
.hero-content .stat-number {
font-size: 36px;
font-weight: 800;
color: var(--color-accent-primary);
}
.hero-content .stat-label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-media img {
width: 100%;
height: auto;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
/* Sections */
.section {
padding: var(--space-24) var(--space-6);
position: relative;
}
.section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-hero);
opacity: 0.3;
z-index: -1;
}
.section-alt {
background: var(--gradient-surface);
position: relative;
padding: var(--space-24) var(--space-6);
}
.section-alt::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(0, 180, 216, 0.08) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, rgba(2, 62, 138, 0.06) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(72, 202, 228, 0.04) 0%, transparent 70%);
opacity: 1;
z-index: 0;
}
.section-alt > * {
position: relative;
z-index: 1;
}
/* Better card spacing */
.card-feature {
padding: var(--space-8);
height: 100%;
display: flex;
flex-direction: column;
}
.card-feature .btn {
margin-top: auto;
}
/* Qualities Feed - Feed Horizontal con Botones */
.intro-line {
text-align: center;
margin-bottom: var(--space-8);
}
.intro-line p {
color: var(--color-text-secondary);
font-size: 16px;
font-style: italic;
margin: 0;
}
.qualities-container {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
}
.scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: var(--gradient-accent);
border: none;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.scroll-btn:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 180, 216, 0.4);
}
.scroll-btn:active {
transform: translateY(-50%) scale(0.95);
}
.scroll-left {
left: -24px;
}
.scroll-right {
right: -24px;
}
.qualities-feed {
display: flex;
gap: var(--space-6);
overflow-x: auto;
padding: var(--space-4) 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
}
.qualities-feed::-webkit-scrollbar {
display: none;
}
.quality-card {
flex: 0 0 350px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
text-align: center;
scroll-snap-align: start;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.quality-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.quality-icon {
width: 80px;
height: 80px;
background: var(--gradient-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(0, 180, 216, 0.2);
}
.quality-icon i {
font-size: 32px;
color: white;
}
.quality-title {
color: var(--color-text-primary);
margin-bottom: var(--space-4);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
.quality-text {
color: var(--color-text-primary);
line-height: 1.6;
font-size: 14px;
flex-grow: 1;
text-align: left;
}
/* Responsive para el feed */
@media (max-width: 768px) {
.qualities-container {
gap: var(--space-2);
}
.scroll-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.scroll-left {
left: -20px;
}
.scroll-right {
right: -20px;
}
.qualities-feed {
gap: var(--space-4);
padding: var(--space-2) 0;
}
.quality-card {
flex: 0 0 280px;
padding: var(--space-5);
}
.quality-icon {
width: 70px;
height: 70px;
}
.quality-icon i {
font-size: 28px;
}
.quality-title {
font-size: 16px;
}
.quality-text {
font-size: 13px;
}
}
@media (max-width: 600px) {
.qualities-container {
gap: var(--space-1);
}
.scroll-btn {
width: 36px;
height: 36px;
font-size: 14px;
}
.scroll-left {
left: -18px;
}
.scroll-right {
right: -18px;
}
.quality-card {
flex: 0 0 260px;
padding: var(--space-4);
}
.quality-icon {
width: 60px;
height: 60px;
}
.quality-icon i {
font-size: 24px;
}
.quality-title {
font-size: 15px;
}
.quality-text {
font-size: 12px;
}
}
/* Pillars List */
.pillars-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.pillar-item {
text-align: center;
}
.pillar-icon {
width: 72px;
height: 72px;
background: var(--gradient-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
box-shadow: 0 8px 25px rgba(0, 180, 216, 0.3);
border: 3px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.pillar-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.pillar-icon:hover::before {
transform: translateX(100%);
}
.pillar-icon i {
font-size: 32px;
color: white;
z-index: 2;
}
/* Testimonials */
.testimonials-strip {
background: var(--color-surface-tint);
padding: var(--space-20) 0;
}
.testimonial-card {
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-6);
}
.testimonial-quote {
font-style: italic;
margin-bottom: var(--space-4);
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-4);
}
.testimonial-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-accent-primary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--color-brand);
}
/* Footer - Water Theme */
.footer {
background: var(--gradient-deep);
color: white;
padding: var(--space-20) var(--space-4) var(--space-16) var(--space-4);
position: relative;
overflow: hidden;
}
/* Footer content styling */
.footer-block {
margin-bottom: var(--space-6);
}
.footer-block h4 {
color: var(--color-accent-primary);
margin-bottom: var(--space-4);
font-size: 18px;
font-weight: 600;
}
.footer-block p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: var(--space-4);
}
.footer-block ul {
list-style: none;
padding: 0;
}
.footer-block ul li {
margin-bottom: var(--space-3);
line-height: 1.5;
}
.footer-block ul li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color var(--transition-fast) var(--curve-standard);
display: flex;
align-items: center;
gap: var(--space-2);
}
.footer-block ul li a:hover {
color: var(--color-accent-primary);
}
.footer-block ul li i {
color: var(--color-accent-primary);
width: 16px;
text-align: center;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(0, 180, 216, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(2, 62, 138, 0.05) 0%, transparent 50%);
opacity: 1;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-16);
}
/* Responsive footer - Mobile First */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
}
@media (max-width: 768px) {
.footer {
padding: var(--space-16) var(--space-4) var(--space-12);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
.footer-block {
padding: 0 var(--space-2);
text-align: center;
}
.footer-block h4 {
margin-bottom: var(--space-4);
font-size: 18px;
color: var(--color-accent-primary);
}
.footer-block p {
font-size: 14px;
line-height: 1.5;
}
.footer-block ul li {
margin-bottom: var(--space-3);
font-size: 14px;
}
.footer-block ul li a {
justify-content: center;
}
/* Newsletter form mobile */
.newsletter-form {
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.newsletter-input {
width: 100%;
max-width: 300px;
text-align: center;
}
.newsletter-submit {
width: 48px;
height: 48px;
border-radius: 50%;
}
}
@media (max-width: 600px) {
.footer {
padding: var(--space-12) var(--space-4) var(--space-8);
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.footer-block {
padding: 0 var(--space-2);
text-align: center;
margin-bottom: var(--space-8);
}
.footer-block h4 {
font-size: 18px;
margin-bottom: var(--space-4);
color: var(--color-accent-primary);
}
.footer-block p {
font-size: 14px;
line-height: 1.6;
margin-bottom: var(--space-4);
}
.footer-block ul li {
font-size: 14px;
margin-bottom: var(--space-3);
display: flex;
align-items: center;
justify-content: center;
}
.footer-block ul li i {
margin-right: var(--space-2);
color: var(--color-accent-primary);
width: 16px;
}
/* Newsletter mobile */
.newsletter-form {
flex-direction: column;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-4);
}
.newsletter-input {
width: 100%;
max-width: 280px;
text-align: center;
padding: var(--space-4);
font-size: 16px;
}
.newsletter-submit {
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 18px;
}
}
@media (max-width: 480px) {
.footer {
padding: var(--space-10) var(--space-3) var(--space-6);
}
.footer-block {
padding: 0 var(--space-1);
margin-bottom: var(--space-6);
}
.footer-block h4 {
font-size: 16px;
}
.footer-block p {
font-size: 13px;
}
.footer-block ul li {
font-size: 13px;
}
.newsletter-input {
max-width: 260px;
padding: var(--space-3);
font-size: 15px;
}
.newsletter-submit {
width: 48px;
height: 48px;
font-size: 16px;
}
}
.newsletter-form {
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-4);
max-width: 400px;
align-items: center;
}
.newsletter-input {
flex: 1;
height: 48px;
padding: 0 var(--space-4);
border: 2px solid var(--color-accent-primary);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.95);
color: var(--color-text-primary);
font-size: 16px;
transition: all var(--transition-base) var(--curve-standard);
min-width: 0;
text-align: center;
}
.newsletter-input:focus {
outline: none;
border-color: var(--color-accent-primary-600);
box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
background: white;
}
.newsletter-input::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
}
.newsletter-submit {
height: 48px;
width: 48px;
background: var(--gradient-accent);
border: 2px solid var(--color-accent-primary);
border-radius: 50%;
color: white;
cursor: pointer;
transition: all var(--transition-base) var(--curve-standard);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
flex-shrink: 0;
position: relative;
z-index: 2;
}
.newsletter-submit:hover {
background: var(--color-accent-primary-600);
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 180, 216, 0.4);
}
.newsletter-submit:active {
transform: scale(0.98);
}
/* Newsletter responsive improvements */
@media (max-width: 768px) {
.newsletter-form {
gap: var(--space-3);
max-width: 100%;
}
.newsletter-input {
height: 48px;
padding: 0 var(--space-4);
font-size: 16px;
}
.newsletter-submit {
height: 48px;
width: 48px;
}
}
@media (max-width: 600px) {
.newsletter-form {
flex-direction: column;
gap: var(--space-3);
max-width: 100%;
}
.newsletter-input {
height: 44px;
font-size: 15px;
width: 100%;
}
.newsletter-submit {
height: 44px;
width: 100%;
border-radius: var(--radius-md);
}
}
/* Responsive */
@media (max-width: 1024px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
/* Typography */
.h1 {
font-size: 36px;
line-height: 44px;
}
.h2 {
font-size: 28px;
line-height: 36px;
}
.h3 {
font-size: 24px;
line-height: 32px;
}
.h4 {
font-size: 20px;
line-height: 28px;
}
.lead {
font-size: 16px;
line-height: 24px;
}
.body {
font-size: 15px;
line-height: 24px;
}
/* Grids */
.grid-12 {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.grid-2 {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.grid-3 {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.grid-4 {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.pillars-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
/* Navigation */
.nav-links {
display: none;
}
.mobile-menu-btn {
display: block;
}
.mobile-menu {
display: block;
}
/* Hero Section */
.hero {
padding: var(--space-12) 0;
min-height: auto;
}
.hero .container {
min-height: auto;
padding-top: var(--space-4);
}
.hero .grid-12 {
gap: var(--space-8);
}
.hero-content {
text-align: center;
margin-bottom: var(--space-8);
grid-column: 1 / -1;
}
.hero-media {
order: -1;
width: 100%;
grid-column: 1 / -1;
}
.chile-map {
height: 400px !important;
width: 100%;
}
.section {
padding: var(--space-16) 0;
}
.section-alt {
padding: var(--space-16) 0;
}
/* Cards */
.card-feature {
padding: var(--space-6);
}
.card-stat {
padding: var(--space-6);
}
/* Buttons */
.btn {
padding: 14px 20px;
font-size: 16px;
min-height: 48px;
}
/* Container */
.container {
padding: 0 var(--space-4);
}
/* Stats in hero */
.hero-content .stat-number {
font-size: 28px;
}
.hero-content .stat-label {
font-size: 12px;
}
}
@media (max-width: 480px) {
/* Even smaller screens */
.container {
padding: 0 0.5rem;
}
.section, .section-alt {
padding: 2rem 0;
}
/* Typography */
.h1 { font-size: 1.75rem; }
.h2 { font-size: 1.5rem; }
.h3 { font-size: 1.25rem; }
/* Text elements */
p, .body, .lead {
font-size: 0.9rem;
line-height: 1.5;
}
/* Cards */
.card-feature {
padding: 1rem;
}
/* Buttons */
.btn {
padding: 0.75rem 1rem;
font-size: 0.9rem;
min-height: 2.75rem;
}
/* Hero adjustments */
.hero-content .stat-number {
font-size: 1.5rem;
}
.hero-content .stat-label {
font-size: 0.7rem;
}
/* Ensure all text is properly contained */
* {
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
}
/* Animations - Water Theme */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes waterFlow {
0% {
transform: translateX(-100%) rotate(0deg);
}
100% {
transform: translateX(100%) rotate(360deg);
}
}
@keyframes bubbleFloat {
0%, 100% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-15px) scale(1.05);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.fade-in-up {
animation: fadeInUp 0.8s var(--curve-emphasized) forwards;
}
.fade-in-left {
animation: fadeInLeft 0.8s var(--curve-smooth) forwards;
}
.fade-in-right {
animation: fadeInRight 0.8s var(--curve-smooth) forwards;
}
.scale-in {
animation: scaleIn 0.6s var(--curve-bounce) forwards;
}
.water-flow {
animation: waterFlow 4s linear infinite;
}
.bubble-float {
animation: bubbleFloat 3s ease-in-out infinite;
}
.pulse {
animation: pulse 2s ease-in-out infinite;
}
.shimmer {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
.float {
animation: float 3s ease-in-out infinite;
}
/* Utility Classes */
.text-center {
text-align: center;
}
.mb-4 {
margin-bottom: var(--space-4);
}
.mb-6 {
margin-bottom: var(--space-6);
}
.mb-8 {
margin-bottom: var(--space-8);
}
.mb-12 {
margin-bottom: var(--space-12);
}
.mb-16 {
margin-bottom: var(--space-16);
}
/* Mobile-specific utilities */
.text-center-mobile {
text-align: center;
}
.mb-4-mobile {
margin-bottom: var(--space-4);
}
.mb-6-mobile {
margin-bottom: var(--space-6);
}
/* Ensure reels are hidden by default */
.cards-reel-container {
display: none;
}
/* Improved mobile responsive system */
@media (max-width: 768px) {
/* Better container handling */
.container {
padding: 0 1rem;
width: 100%;
box-sizing: border-box;
}
/* Section spacing */
.section, .section-alt {
padding: 3rem 0;
}
/* Text containers */
.section-header {
margin-bottom: 2rem;
padding: 0 1rem;
}
/* Typography improvements */
.section-title, .section-desc,
.body, .lead, .small {
padding: 0 1rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
/* Card text adjustments */
.card-feature, .card-reel {
padding: 1.5rem;
}
.card-feature p, .card-reel p {
font-size: 0.9rem;
line-height: 1.5;
}
/* Grid improvements */
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0;
}
/* Grid adjustments */
.grid-3, .grid-4, .grid-2 {
padding: var(--space-2);
gap: var(--space-6);
}
/* Specific grid-2 adjustments for mobile */
.grid-2 {
grid-template-columns: 1fr !important;
gap: var(--space-8);
}
/* Ensure text containers have proper width */
.grid-2 > div:first-child {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.grid-2 > div:first-child .body {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.6;
max-width: 100%;
}
/* Cards */
.card {
margin-bottom: var(--space-4);
border-radius: var(--radius-md);
padding: var(--space-6);
}
.card-feature {
text-align: center;
padding: var(--space-6);
display: flex;
flex-direction: column;
align-items: center;
}
.card-feature .btn {
margin-top: var(--space-6);
align-self: stretch;
width: 100%;
padding: var(--space-4) var(--space-6);
min-height: 48px;
}
.card-feature h4 {
text-align: center;
width: 100%;
margin-bottom: var(--space-4);
}
.card-feature p {
text-align: center;
width: 100%;
margin-bottom: var(--space-6);
flex-grow: 1;
}
/* Icon centering */
.icon-container {
margin: 0 auto var(--space-4);
}
/* Header */
.header-container {
height: 70px;
padding: 0 var(--space-2);
}
.brand-lockup img {
width: 56px;
height: 42px;
}
.header-actions .btn {
padding: 10px 16px;
font-size: 14px;
min-height: 40px;
}
/* Navigation */
.nav-link {
padding: var(--space-3) var(--space-4);
min-height: 44px;
display: flex;
align-items: center;
}
/* Mobile menu button */
.mobile-menu-btn {
display: block !important;
z-index: 1001;
}
/* Hide desktop navigation */
.nav-links {
display: none !important;
}
/* Mobile menu */
.mobile-menu .nav-links {
padding: var(--space-6) var(--space-4);
}
.mobile-menu .nav-link {
padding: var(--space-4) var(--space-3);
margin: 0 var(--space-2);
border-radius: var(--radius-md);
}
/* Buttons */
.btn + .btn {
margin-left: 0;
margin-top: var(--space-3);
}
/* Reel system */
#fabricacion .cards-reel-container,
#servicio-tecnico .cards-reel-container,
#productos .cards-reel-container,
.historia-reel {
display: flex;
padding: var(--space-4);
margin: 0 var(--space-2);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
gap: var(--space-6);
}
#fabricacion .grid-3,
#servicio-tecnico .grid-2,
#productos .grid-2,
.historia-grid {
display: none;
}
.card-reel {
flex: 0 0 400px;
min-height: 220px;
padding: var(--space-8);
scroll-snap-align: start;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
.card-reel h4 {
font-size: 16px;
margin-bottom: var(--space-3);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Fabricacion reel small mobile */
#fabricacion .card-reel {
flex: 0 0 380px;
min-height: 220px;
padding: var(--space-6);
}
.card-reel p {
font-size: 13px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
padding: 0 var(--space-2);
}
/* Specific styles for fabricacion reel */
#fabricacion .card-reel {
flex: 0 0 420px;
min-height: 240px;
padding: var(--space-8);
}
#fabricacion .card-reel h4 {
font-size: 18px;
margin-bottom: var(--space-4);
color: var(--color-accent-primary);
}
#fabricacion .card-reel p {
font-size: 14px;
line-height: 1.6;
padding: 0 var(--space-3);
}
.card-reel .icon-container {
width: 44px;
height: 44px;
margin-bottom: var(--space-3);
}
/* Historia reel specific styles */
.historia-reel .card-reel {
flex: 0 0 450px;
min-height: 240px;
padding: var(--space-8);
background: white;
border: 3px solid var(--color-accent-primary);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
box-shadow: var(--shadow-md);
scroll-snap-align: start;
overflow: hidden;
position: relative;
}
.historia-reel .card-reel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 180, 216, 0.05) 0%, transparent 100%);
pointer-events: none;
}
.historia-reel .card-reel h4 {
color: var(--color-accent-primary);
font-size: 18px;
font-weight: 600;
margin-bottom: var(--space-4);
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.historia-reel .card-reel p {
font-size: 14px;
line-height: 1.6;
color: var(--color-text-secondary);
flex-grow: 1;
display: flex;
align-items: center;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
padding: 0 var(--space-2);
}
/* Touch improvements */
.qualities-feed {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* Scroll indicators for reels */
.cards-reel-container::-webkit-scrollbar {
height: 4px;
}
.cards-reel-container::-webkit-scrollbar-track {
background: rgba(0, 180, 216, 0.1);
border-radius: 2px;
}
.cards-reel-container::-webkit-scrollbar-thumb {
background: var(--color-accent-primary);
border-radius: 2px;
}
.cards-reel-container::-webkit-scrollbar-thumb:hover {
background: var(--color-accent-primary-600);
}
/* Footer mobile improvements */
.footer {
padding: var(--space-16) var(--space-4) var(--space-12);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
.footer-block {
text-align: center;
padding: 0 var(--space-2);
}
.footer-block h4 {
color: var(--color-accent-primary);
margin-bottom: var(--space-4);
}
.footer-block ul li {
display: flex;
align-items: center;
justify-content: center;
}
.footer-block ul li i {
margin-right: var(--space-2);
color: var(--color-accent-primary);
}
/* Newsletter mobile */
.newsletter-form {
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.newsletter-input {
width: 100%;
max-width: 300px;
text-align: center;
}
.newsletter-submit {
width: 48px;
height: 48px;
border-radius: 50%;
}
/* Hide footer on mobile */
.footer {
display: none !important;
}
}
@media (max-width: 600px) {
.container {
padding: 0 var(--space-5);
}
.section {
padding: var(--space-12) var(--space-5);
}
.section-alt {
padding: var(--space-12) var(--space-5);
}
/* Grid-2 specific adjustments for small mobile */
.grid-2 {
grid-template-columns: 1fr !important;
gap: var(--space-6);
}
/* Nuestra Historia text adjustments */
#nosotros .body {
font-size: 15px;
line-height: 1.5;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
overflow: hidden !important;
}
.card {
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
padding: var(--space-5);
}
.card-feature {
padding: var(--space-5);
}
.grid-3, .grid-4, .grid-2 {
gap: var(--space-4);
}
.card-reel {
flex: 0 0 240px;
min-height: 160px;
padding: var(--space-4);
}
.card-reel h4 {
font-size: 15px;
}
.card-reel p {
font-size: 12px;
}
/* Historia reel small mobile */
.historia-reel .card-reel {
flex: 0 0 400px;
min-height: 220px;
padding: var(--space-6);
}
.historia-reel .card-reel h4 {
font-size: 17px;
margin-bottom: var(--space-3);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.historia-reel .card-reel p {
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
padding: 0 var(--space-2);
}
/* Header adjustments for small mobile */
.header-container {
height: 64px;
}
.brand-lockup img {
width: 48px;
height: 36px;
}
.header-actions .btn {
padding: 8px 14px;
font-size: 13px;
min-height: 36px;
}
/* Mobile menu adjustments */
.mobile-menu .nav-links {
padding: var(--space-5) var(--space-4);
}
.mobile-menu .nav-link {
padding: var(--space-4) var(--space-3);
margin: 0 var(--space-1);
}
.hero-content .btn {
display: block;
width: 100%;
margin-bottom: var(--space-3);
text-align: center;
justify-content: center;
}
.hero-content .btn:last-child {
margin-bottom: 0;
}
.hero-content > div:last-child {
justify-content: center;
gap: var(--space-4);
}
.hero-content .stat-number {
font-size: 24px;
line-height: 1;
}
.hero-content .stat-label {
font-size: 11px;
line-height: 1;
}
.chile-map {
height: 350px !important;
}
}
@media (min-width: 769px) {
.cards-reel-container {
display: none;
}
.scroll-indicator {
display: none;
}
.grid-3, .grid-4, .grid-2 {
display: grid;
}
.historia-grid {
display: grid;
}
}
/* Very small mobile */
@media (max-width: 480px) {
.container {
padding: 0 var(--space-4);
}
.section {
padding: var(--space-12) var(--space-4);
}
.section-alt {
padding: var(--space-12) var(--space-4);
}
/* Grid-2 specific adjustments for very small mobile */
.grid-2 {
grid-template-columns: 1fr !important;
gap: var(--space-4);
}
/* Nuestra Historia text adjustments */
#nosotros .body {
font-size: 14px;
line-height: 1.4;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* Historia reel very small mobile */
.historia-reel .card-reel {
flex: 0 0 380px;
min-height: 200px;
padding: var(--space-5);
}
.historia-reel .card-reel h4 {
font-size: 16px;
margin-bottom: var(--space-3);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.historia-reel .card-reel p {
font-size: 13px;
line-height: 1.5;
padding: 0 var(--space-1);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
}
/* General reel very small mobile */
.card-reel {
flex: 0 0 320px;
min-height: 180px;
padding: var(--space-4);
}
.card-reel h4 {
font-size: 14px;
}
.card-reel p {
font-size: 12px;
}
}
@media (max-width: 600px) {
.container {
padding: 0 var(--space-3);
}
/* Stack buttons vertically on very small screens */
.hero-content .btn {
display: block;
width: 100%;
margin-bottom: var(--space-3);
text-align: center;
justify-content: center;
}
.hero-content .btn:last-child {
margin-bottom: 0;
}
/* Ensure proper spacing for stats */
.hero-content > div:last-child {
justify-content: center;
gap: var(--space-4);
}
.hero-content .stat-number {
font-size: 24px;
line-height: 1;
}
.hero-content .stat-label {
font-size: 11px;
line-height: 1;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="app-header" id="header">
<div class="container">
<div class="header-container">
<a href="#inicio" class="brand-lockup">
<img src="logo.svg" alt="SH Silva Logo" style="width: 68px; height: 50px;">
<div class="brand-wordmark"></div>
</a>
<nav>
<ul class="nav-links">
<li><a href="#inicio" class="nav-link">Inicio</a></li>
<li><a href="#nosotros" class="nav-link">Nosotros</a></li>
<li><a href="#fabricacion" class="nav-link">Fabricación</a></li>
<li><a href="#montaje" class="nav-link">Montaje</a></li>
<li><a href="#servicio-tecnico" class="nav-link">Servicio Técnico</a></li>
<li><a href="#contacto" class="nav-link">Contacto</a></li>
</ul>
</nav>
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Abrir menú móvil">
<i class="fas fa-bars"></i>
</button>
<div class="header-actions">
<a href="#contacto" class="btn btn-primary">
Solicitar Propuesta
<i class="fas fa-arrow-right" style="margin-left: 8px;"></i>
</a>
</div>
</div>
</div>
</header>
<!-- ===== MENÚ MÓVIL NUEVO DESDE CERO ===== -->
<div class="mobile-menu" id="mobileMenu">
<div class="mobile-menu-content">
<!-- Enlaces principales -->
<div class="mobile-menu-links">
<a href="#inicio" class="mobile-menu-link">
<i class="fas fa-home"></i>
<span>Inicio</span>
</a>
<a href="#nosotros" class="mobile-menu-link">
<i class="fas fa-users"></i>
<span>Quienes Somos</span>
</a>
</div>
<!-- Sección Servicios -->
<div class="mobile-menu-section">
<div class="mobile-menu-header">
<i class="fas fa-cogs"></i>
<span>Servicios</span>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div class="mobile-menu-submenu">
<a href="#fabricacion" class="submenu-link">
<i class="fas fa-industry"></i>
<span>Fabricación</span>
</a>
<a href="#servicio-tecnico" class="submenu-link">
<i class="fas fa-tools"></i>
<span>Servicio Técnico</span>
</a>
<a href="#mantenimiento" class="submenu-link">
<i class="fas fa-wrench"></i>
<span>Mantenimiento</span>
</a>
<a href="#asesoria" class="submenu-link">
<i class="fas fa-lightbulb"></i>
<span>Asesoría</span>
</a>
</div>
</div>
<!-- Sección Líneas de Voltaje -->
<div class="mobile-menu-section">
<div class="mobile-menu-header">
<i class="fas fa-bolt"></i>
<span>Líneas de Voltaje</span>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div class="mobile-menu-submenu">
<a href="#lineas-voltaje" class="submenu-link">
<i class="fas fa-battery-half"></i>
<span>Media Tensión</span>
</a>
<a href="#lineas-voltaje" class="submenu-link">
<i class="fas fa-bolt"></i>
<span>Alta Tensión</span>
</a>
</div>
</div>
<!-- Sección Asesoría Técnica -->
<div class="mobile-menu-section">
<div class="mobile-menu-header">
<i class="fas fa-lightbulb"></i>
<span>Asesoría Técnica</span>
<i class="fas fa-chevron-down toggle-icon"></i>
</div>
<div class="mobile-menu-submenu">
<a href="#asesoria" class="submenu-link">
<i class="fas fa-plug"></i>
<span>Eléctrico</span>
</a>
<a href="#asesoria" class="submenu-link">
<i class="fas fa-tint"></i>
<span>Hidráulico</span>
</a>
<a href="#asesoria" class="submenu-link">
<i class="fas fa-toilet"></i>
<span>Sanitario</span>
</a>
<a href="#asesoria" class="submenu-link">
<i class="fas fa-seedling"></i>
<span>Agrícola</span>
</a>
</div>
</div>
<!-- Enlaces adicionales -->
<div class="mobile-menu-links">
<a href="#contacto" class="mobile-menu-link">
<i class="fas fa-envelope"></i>
<span>Contacto</span>
</a>
<a href="#propuesta" class="mobile-menu-link">
<i class="fas fa-file-contract"></i>
<span>Solicitar Propuesta</span>
</a>
</div>
</div>
</div>
<!-- Hero Section -->
<section class="hero" id="inicio">
<!-- Video de fondo -->
<video class="hero-video-bg" autoplay muted loop playsinline>
<source src="hero-background.mp4" type="video/mp4">
Tu navegador no soporta videos.
</video>
<div class="container">
<div class="grid-12">
<div class="hero-content" style="grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: flex-start; padding-top: var(--space-8);">
<h1 class="h1 mb-6">
Expertos en <span style="color: var(--color-accent-primary);">Soluciones de Bombeo</span>
</h1>
<p class="lead mb-6" style="font-size: 18px; line-height: 28px; color: #E0F2FE;">
Soluciones en fabricación, montaje y mantenimiento hidráulico industrial.
</p>
<div style="display: flex; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap;">
<a href="#contacto" class="btn btn-primary">Comenzar Proyecto</a>
<a href="#servicios" class="btn btn-ghost">Ver Servicios</a>
</div>
<!-- Stats inline -->
<div style="display: flex; gap: var(--space-6); flex-wrap: wrap; justify-content: center;">
<div style="text-align: center;">
<div class="stat-number" style="font-size: 32px; margin-bottom: var(--space-2);">20</div>
<div class="stat-label">Años</div>
</div>
<div style="text-align: center;">
<div class="stat-number" style="font-size: 32px; margin-bottom: var(--space-2);">798</div>
<div class="stat-label">Proyectos</div>
</div>
<div style="text-align: center;">
<div class="stat-number" style="font-size: 32px; margin-bottom: var(--space-2);">132</div>
<div class="stat-label">Clientes</div>
</div>
</div>
</div>
<div class="hero-media" style="grid-column: 6 / 13; display: flex; align-items: center; justify-content: center;">
<div class="chile-image-container" style="width: 100%; height: 600px; display: flex; align-items: center; justify-content: center;">
<img src="chile.png" alt="Mapa de Chile" style="max-width: 100%; max-height: 100%; object-fit: contain;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Servicios Principales -->
<section class="section section-alt" id="servicios">
<div class="container">
<div class="section-header">
<div class="section-kicker">Nuestros Servicios</div>
<h2 class="section-title">Soluciones Integrales</h2>
<p class="section-desc">
Fabricación, montaje y mantenimiento de sistemas de bombeo industriales.
</p>
</div>
<div class="grid-3">
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-industry"></i>
</div>
<h4 class="h4 mb-4">Fabricación</h4>
<p class="body mb-4">
Manifold y spool en acero al carbono e inoxidable. Soldaduras MIG, TIG y MMA.
</p>
<a href="#fabricacion" class="btn btn-secondary" style="width: 100%; justify-content: center;">Ver Más</a>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-tools"></i>
</div>
<h4 class="h4 mb-4">Montaje</h4>
<p class="body mb-4">
Montaje de válvulas, bombas y sistemas complejos con instalación segura y eficiente.
</p>
<a href="#montaje" class="btn btn-secondary" style="width: 100%; justify-content: center;">Ver Más</a>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-wrench"></i>
</div>
<h4 class="h4 mb-4">Servicio Técnico</h4>
<p class="body mb-4">
Calibración y ajuste de equipos hidráulicos para optimizar el rendimiento del sistema.
</p>
<a href="#servicio-tecnico" class="btn btn-secondary" style="width: 100%; justify-content: center;">Ver Más</a>
</div>
</div>
</div>
</section>
<!-- Nosotros Section -->
<section class="section" id="nosotros">
<div class="container">
<div class="section-header">
<div class="section-kicker">Quienes Somos</div>
<h2 class="section-title">20 años de excelencia industrial</h2>
<p class="section-desc">
Especialistas en mantenimiento de maquinarias y sistemas hidráulicos.
</p>
</div>
<div class="grid-2">
<div>
<h3 class="h3 mb-4">Nuestra Historia</h3>
<p class="body mb-6">
20 años junto a la industria: pesquera, minera, forestal y metalúrgica.
</p>
<!-- Desktop Grid -->
<div class="grid-3 historia-grid" style="grid-template-columns: repeat(3, 1fr); gap: var(--space-4);">
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-3" style="color: var(--color-accent-primary);">Misión</h4>
<p class="small">Soluciones eficientes para manejo de aguas y fluidos industriales.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-3" style="color: var(--color-accent-primary);">Visión</h4>
<p class="small">Socio estratégico preferido en soluciones industriales integrales.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-3" style="color: var(--color-accent-primary);">Compromiso</h4>
<p class="small">Servicios de excelencia con mejora continua en cada proyecto.</p>
</div>
</div>
<!-- Mobile Reel for Historia -->
<div class="cards-reel-container historia-reel reel-container">
<div class="card-reel">
<h4>Misión</h4>
<p>Soluciones eficientes para manejo de aguas y fluidos industriales.</p>
</div>
<div class="card-reel">
<h4>Visión</h4>
<p>Socio estratégico preferido en soluciones industriales integrales.</p>
</div>
<div class="card-reel">
<h4>Compromiso</h4>
<p>Servicios de excelencia con mejora continua en cada proyecto.</p>
</div>
</div>
<!-- Scroll indicator for mobile -->
<div class="scroll-indicator" style="text-align: center; margin-top: var(--space-4); color: var(--color-text-muted); font-size: 14px;">
<div style="display: inline-flex; align-items: center; background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-border);">
<i class="fas fa-arrows-alt-h" style="margin-right: var(--space-2); color: var(--color-accent-primary);"></i>
<span>Desliza para ver más</span>
</div>
</div>
</div>
<div>
<div class="card" style="height: 350px; background: var(--color-accent-primary-200); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: var(--space-6);">
<i class="fas fa-award" style="font-size: 56px; color: var(--color-accent-primary); margin-bottom: var(--space-4);"></i>
<h4 class="h4 mb-3">Comprometidos con la Excelencia</h4>
<p class="body">Enfoque metódico para asegurar la excelencia en procesos de ingeniería.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Fabricación Section -->
<section class="section section-alt" id="fabricacion">
<div class="container">
<div class="section-header">
<div class="section-kicker">Nuestros Servicios</div>
<h2 class="section-title">Fabricación de Piping a la Medida</h2>
<p class="section-desc">
Fabricación a medida con calidad e innovación.
</p>
</div>
<div class="grid-2">
<div>
<h3 class="h3 mb-6">Materiales y precisión</h3>
<p class="body mb-8">
Acero inoxidable, galvanizado, cobre, HDPE y PP-R. Entrega precisa según planos y especificaciones.
</p>
<div class="grid-3" style="grid-template-columns: repeat(3, 1fr); gap: var(--space-4);">
<div class="card card-feature" style="padding: var(--space-4);">
<div class="icon-container" style="width: 40px; height: 40px; margin-bottom: var(--space-2);">
<i class="fas fa-check-circle"></i>
</div>
<h4 class="h4 mb-2">Calidad</h4>
<p class="small">Utilizamos materiales de primera y procesos de fabricación rigurosos que garantizan productos duraderos y eficientes.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<div class="icon-container" style="width: 40px; height: 40px; margin-bottom: var(--space-2);">
<i class="fas fa-lightbulb"></i>
</div>
<h4 class="h4 mb-2">Innovación</h4>
<p class="small">Incorporamos tecnologías de vanguardia en la fabricación de piping y equipos, adaptándonos a las necesidades del mercado.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<div class="icon-container" style="width: 40px; height: 40px; margin-bottom: var(--space-2);">
<i class="fas fa-handshake"></i>
</div>
<h4 class="h4 mb-2">Compromiso</h4>
<p class="small">Trabajamos junto a nuestros clientes, entendiendo sus necesidades y superando sus expectativas en cada etapa.</p>
</div>
</div>
<!-- Mobile Reel for Fabricación -->
<div class="cards-reel-container reel-container">
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-check-circle"></i>
</div>
<h4>Calidad</h4>
<p>Utilizamos materiales de primera y procesos rigurosos que garantizan productos duraderos.</p>
</div>
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-lightbulb"></i>
</div>
<h4>Innovación</h4>
<p>Incorporamos tecnologías de vanguardia en la fabricación de piping y equipos.</p>
</div>
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-handshake"></i>
</div>
<h4>Compromiso</h4>
<p>Trabajamos junto a nuestros clientes, entendiendo sus necesidades.</p>
</div>
</div>
</div>
<div>
<div class="card" style="height: 400px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('servicios-especializados.png'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: var(--space-6); position: relative; overflow: hidden;">
<div style="position: relative; z-index: 2;">
<h4 class="h4" style="text-align: center; margin-bottom: var(--space-4); color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.8);">Servicios Especializados</h4>
<p class="body" style="text-align: center; max-width: 300px; margin: 0 auto; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.8);">Fabricamos ranurado y roscado para cañerías de acero, adaptándonos a estándares NPT, NPSC, NPTR, NPSM, NPSL, NPTF, BSPT y BSPT.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Montaje Section -->
<section class="section" id="montaje">
<div class="container">
<div class="section-header">
<div class="section-kicker">Instalación Profesional</div>
<h2 class="section-title">Montaje de Sistemas de Bombeo</h2>
<p class="section-desc">
Especialistas en montaje de equipos de bombeo con soluciones industriales confiables y a medida, garantizando eficiencia y durabilidad en cada proyecto.
</p>
</div>
<div class="grid-4">
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-rocket"></i>
</div>
<h4 class="h4 mb-4">Rápida Instalación</h4>
<p class="body">
Nuestro equipo garantiza una instalación rápida y precisa, minimizando el tiempo de inactividad y asegurando que los sistemas de bombeo estén operativos desde el primer momento.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-user-tie"></i>
</div>
<h4 class="h4 mb-4">Asesoría Personalizada</h4>
<p class="body">
Ofrecemos un análisis detallado de las necesidades específicas de cada cliente, brindando soluciones adaptadas para maximizar el rendimiento y la eficiencia de los equipos.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-shield-alt"></i>
</div>
<h4 class="h4 mb-4">Mantenimiento Proactivo</h4>
<p class="body">
Implementamos programas de mantenimiento preventivo que ayudan a identificar y solucionar problemas antes de que ocurran, asegurando la durabilidad y funcionalidad continua.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-cogs"></i>
</div>
<h4 class="h4 mb-4">Integración de Equipos</h4>
<p class="body">
Conectamos y configuramos sus sistemas de bombeo para un rendimiento óptimo y sin interrupciones, asegurando que todos los elementos trabajen en armonía.
</p>
</div>
</div>
<div class="grid-2" style="margin-top: var(--space-16);">
<div>
<h3 class="h3 mb-6">Proceso de Montaje Integral</h3>
<p class="body mb-6">
En SHS, nos especializamos en el montaje de sistemas de bombeo que cumplen con los más altos estándares de calidad. Nuestro equipo técnico se encarga de cada fase del proceso, asegurando una instalación precisa y eficiente.
</p>
<p class="body mb-8">
Utilizamos tecnología avanzada y prácticas recomendadas para minimizar el tiempo de inactividad. Gracias a nuestra experiencia, cada instalación se realiza de manera rápida y eficaz.
</p>
</div>
<div>
<div class="card" style="height: 300px; padding: var(--space-6); display: flex; align-items: center; justify-content: center;">
<img src="tecnologia.png" alt="Tecnología avanzada implementada" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
</div>
</div>
</div>
</div>
</section>
<!-- Servicio Técnico Section -->
<section class="section section-alt" id="servicio-tecnico">
<div class="container">
<div class="section-header">
<div class="section-kicker">Soporte Especializado</div>
<h2 class="section-title">Servicio Técnico Integral</h2>
<p class="section-desc">
Ofrecemos servicios de mantenimiento, reparación y asesoría especializada para asegurar el óptimo funcionamiento de sus equipos industriales.
</p>
</div>
<div class="grid-3">
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-user-cog"></i>
</div>
<h4 class="h4 mb-4">Atención Personalizada</h4>
<p class="body">
Nuestro servicio de soporte técnico se basa en atención personalizada, adaptándonos a las necesidades de cada cliente. Entendemos que cada sistema es crucial para su operación.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-clock"></i>
</div>
<h4 class="h4 mb-4">Tiempo de Respuesta</h4>
<p class="body">
La rapidez en la respuesta es fundamental. Nuestro equipo está disponible para atender emergencias y consultas, asegurando tiempos de reacción mínimos.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-shield-alt"></i>
</div>
<h4 class="h4 mb-4">Mantenimiento Preventivo</h4>
<p class="body">
Implementamos programas de mantenimiento preventivo que buscan anticipar fallos antes de que ocurran, prolongando la vida útil de sus equipos.
</p>
</div>
</div>
<div class="grid-2" style="margin-top: var(--space-16);">
<div>
<h3 class="h3 mb-6">Servicios de Emergencia 24/7</h3>
<p class="body mb-6">
En el mundo industrial, las emergencias pueden surgir en cualquier momento. Contamos con un equipo de respuesta rápida disponible las 24 horas, los 7 días de la semana, listo para abordar cualquier falla que comprometa la producción.
</p>
<p class="body mb-8">
Nuestra experiencia en situaciones críticas nos permite manejar eficazmente cualquier inconveniente, minimizando el impacto en sus operaciones.
</p>
<div class="grid-2" style="grid-template-columns: repeat(2, 1fr); gap: var(--space-4);">
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-2">Mantenimiento Correctivo</h4>
<p class="small">Diagnósticos precisos y reparaciones rápidas, asegurando que sus operaciones se reanuden lo antes posible.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-2">Inspección y Monitoreo</h4>
<p class="small">Tecnologías avanzadas para monitorear el estado de sus equipos en tiempo real, detectando anomalías antes de que se conviertan en problemas serios.</p>
</div>
</div>
<!-- Mobile Reel for Servicio Técnico -->
<div class="cards-reel-container reel-container">
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-wrench"></i>
</div>
<h4>Mantenimiento</h4>
<p>Diagnósticos precisos y reparaciones rápidas para sus operaciones.</p>
</div>
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-eye"></i>
</div>
<h4>Inspección</h4>
<p>Tecnologías avanzadas para monitorear el estado de sus equipos.</p>
</div>
</div>
</div>
<div>
<div class="card" style="height: 400px; padding: var(--space-6); display: flex; align-items: center; justify-content: center;">
<img src="iot-tecnologia.png" alt="Innovación en tecnología e IoT" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
</div>
</div>
</div>
</div>
</section>
<!-- Líneas de Voltaje Section -->
<section class="section" id="lineas-voltaje">
<div class="container">
<div class="section-header">
<div class="section-kicker">Líneas de Voltaje</div>
<h2 class="section-title">Media y Alta Tensión</h2>
<p class="section-desc">Montaje y adaptación de equipos eléctricos en media y alta tensión, con protocolos de seguridad y cumplimiento normativo.</p>
</div>
<div class="grid-4">
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-tint"></i>
</div>
<h4 class="h4 mb-4">Bombas</h4>
<p class="body">
Soluciones de bombeo confiables y eficientes para diversas aplicaciones industriales. Disponemos de bombas centrífugas y de desplazamiento positivo, perfectas para aguas pluviales, aguas residuales y similares.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-cog"></i>
</div>
<h4 class="h4 mb-4">Líneas de Voltaje</h4>
<p class="body">
Media y Alta Tensión.
Montaje y adaptación de equipos eléctricos en media y alta tensión, con protocolos de seguridad y cumplimiento normativo.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-circle"></i>
</div>
<h4 class="h4 mb-4">Juntas</h4>
<p class="body">
Innovación en sellos mecánicos y sistemas de sellado para equipos rotativos. Nuestros productos son ideales para bombas, compresores y mezcladores, asegurando un rendimiento óptimo.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-microchip"></i>
</div>
<h4 class="h4 mb-4">Tableros de Control</h4>
<p class="body">
Soluciones completas en actuadores y control de procesos para su negocio. Facilitamos la automatización y optimización de sus procesos con tecnología de punta.
</p>
</div>
</div>
<div class="grid-2" style="margin-top: var(--space-16);">
<div>
<h3 class="h3 mb-6">Calidad Superior Garantizada</h3>
<p class="body mb-6">
Nuestros productos están fabricados con materiales de alta calidad, asegurando durabilidad y un rendimiento óptimo en condiciones exigentes. Esto se traduce en menos fallas, lo que disminuye el costo de mantenimiento y garantiza una inversión rentable a largo plazo.
</p>
<p class="body mb-8">
Ofrecemos un servicio personalizado, donde nuestros expertos analizan sus necesidades específicas y proporcionan soluciones adaptadas a su contexto, asegurando una implementación eficiente y efectiva.
</p>
<div class="grid-2" style="grid-template-columns: repeat(2, 1fr); gap: var(--space-4);">
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-4">Accionamiento e Instrumentación</h4>
<p class="small">Extensa gama de actuadores, posicionadores y controles para mejorar la precisión y eficiencia en el control de fluidos.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<h4 class="h4 mb-4">Recuperación de Energía</h4>
<p class="small">Dispositivos innovadores para optimizar el uso de energía en procesos industriales, reduciendo costos operativos y huella de carbono.</p>
</div>
</div>
<!-- Mobile Reel for Productos -->
<div class="cards-reel-container reel-container">
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-cogs"></i>
</div>
<h4>Accionamiento</h4>
<p>Actuadores y controles para mejorar la precisión en fluidos.</p>
</div>
<div class="card-reel">
<div class="icon-container">
<i class="fas fa-bolt"></i>
</div>
<h4>Energía</h4>
<p>Dispositivos para optimizar el uso de energía industrial.</p>
</div>
</div>
</div>
<div>
<div class="card" style="height: 400px; padding: var(--space-6); display: flex; align-items: center; justify-content: center;">
<img src="asesoria.png" alt="Asesoría personalizada y soporte técnico" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
</div>
</div>
</div>
</div>
</section>
<!-- Por Qué Elegirnos - Feed Horizontal -->
<section class="section section-alt">
<div class="container">
<div class="intro-line">
<p>Seis cualidades que nos posicionan como líderes</p>
</div>
<!-- Feed horizontal de cualidades -->
<div class="qualities-container">
<div class="qualities-feed" id="qualitiesFeed">
<div class="quality-card">
<div class="quality-icon">
<i class="fas fa-star"></i>
</div>
<h4 class="quality-title">Experiencia</h4>
<p class="quality-text">Nuestra empresa cuenta con años de experiencia en el sector, demostrando una sólida trayectoria en la fabricación, montaje y mantenimiento de equipos de bombeo y tuberías. Aseguramos resultados confiables en cada proyecto y optimizamos la operación de nuestros sistemas hidráulicos.</p>
</div>
<div class="quality-card">
<div class="quality-icon">
<i class="fas fa-users"></i>
</div>
<h4 class="quality-title">Personal</h4>
<p class="quality-text">Es fundamental para nosotros que nuestro personal esté altamente capacitado y cuente con certificaciones relevantes. Esto asegura que todos los trabajos se realicen con los más altos estándares de calidad, seguridad y eficiencia, brindando confianza en la instalación y mantenimiento de los equipos hidráulicos.</p>
</div>
<div class="quality-card">
<div class="quality-icon">
<i class="fas fa-microchip"></i>
</div>
<h4 class="quality-title">Tecnología</h4>
<p class="quality-text">En nuestra empresa, utilizamos tecnología de vanguardia en la fabricación y el montaje, lo cual es esencial para garantizar la eficiencia, precisión y durabilidad de nuestros equipos y sistemas hidráulicos. Esto nos permite ofrecer soluciones innovadoras y competitivas en el mercado actual.</p>
</div>
<div class="quality-card">
<div class="quality-icon">
<i class="fas fa-headset"></i>
</div>
<h4 class="quality-title">Atención</h4>
<p class="quality-text">Ofrecemos un servicio al cliente excepcional, con asesoría personalizada para entender las necesidades específicas de cada proyecto y brindar soluciones a medida. Esto garantiza una comunicación fluida y un enfoque centrado en el cliente en todo momento.</p>
</div>
<div class="quality-card">
<div class="quality-icon">
<i class="fas fa-check-circle"></i>
</div>
<h4 class="quality-title">Calidad</h4>
<p class="quality-text">Nos comprometemos a seguir estrictos controles de calidad en todos nuestros procesos, desde la fabricación hasta el mantenimiento. Esto asegura que todos nuestros productos y servicios cumplan con las normativas y estándares de la industria, garantizando así la satisfacción de nuestros clientes.</p>
</div>
<div class="quality-card">
<div class="quality-icon">
<i class="fas fa-sync-alt"></i>
</div>
<h4 class="quality-title">Soporte</h4>
<p class="quality-text">Proporcionamos un servicio postventa sólido, que incluye soporte técnico y mantenimiento preventivo y correctivo. Esto garantiza el correcto funcionamiento de los equipos a lo largo de su vida útil, minimizando tiempos de inactividad y costos adicionales.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Story Split -->
<section class="section">
<div class="container">
<div class="grid-2">
<div>
<h3 class="h3 mb-6">Comprometidos con la Excelencia</h3>
<p class="body mb-6">
En SH Silva, somos un equipo comprometido con la excelencia y la innovación en el sector de mantenimiento de maquinarias. Con más de 20 años de experiencia, hemos consolidado nuestra presencia en diversas industrias, incluyendo la pesquera, minera, forestal y metalúrgica.
</p>
<p class="body mb-8">
Nuestro compromiso con la capacitación continua del personal es fundamental. Creemos que un equipo bien preparado es la clave para alcanzar la eficiencia y la profesionalidad que nuestros clientes esperan.
</p>
<div style="display: flex; gap: var(--space-4);">
<a href="#nosotros" class="btn btn-primary">Conocer Más</a>
<a href="#contacto" class="btn btn-secondary">Contactar</a>
</div>
</div>
<div>
<div class="card" style="height: 300px; padding: var(--space-6); display: flex; align-items: center; justify-content: center;">
<img src="excelencia.png" alt="Excelencia en procesos de ingeniería" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
</div>
</div>
</div>
</div>
</section>
<!-- Innovación y Procesos -->
<section class="section section-alt">
<div class="container">
<div class="section-header">
<div class="section-kicker">Innovación Continua</div>
<h2 class="section-title">Comprometidos con los procesos de la ingeniería</h2>
<p class="section-desc">
Nuestro enfoque metódico y colaborativo para asegurar la excelencia en los procesos de ingeniería y satisfacer las necesidades específicas de nuestros clientes en cada proyecto.
</p>
</div>
<div class="grid-2">
<div>
<h3 class="h3 mb-6">Procesos Rigurosos de Ingeniería</h3>
<p class="body mb-6">
En nuestra empresa, entendemos que la ingeniería es la base de cada solución efectiva. Nos comprometemos a seguir procesos rigurosos que aseguran la precisión y la calidad en cada etapa de fabricación y montaje. Nuestro enfoque metódico nos permite abordar proyectos complejos con confianza y eficacia.
</p>
<p class="body mb-8">
Además, valoramos la comunicación constante con nuestros clientes, garantizando que cada decisión se alinee con sus objetivos y expectativas. Este compromiso con la excelencia y la mejora continua nos posiciona como un socio estratégico en el desarrollo de soluciones industriales innovadoras y eficientes.
</p>
<div class="grid-2" style="grid-template-columns: repeat(2, 1fr); gap: var(--space-4);">
<div class="card card-feature" style="padding: var(--space-4);">
<div class="icon-container" style="width: 32px; height: 32px; margin-bottom: var(--space-2);">
<i class="fas fa-cogs"></i>
</div>
<h4 class="h4 mb-2">Mejora Continua</h4>
<p class="small">Mejoramos continuamente los componentes de equipos de bombeo para maximizar su eficiencia y adaptarnos a las necesidades cambiantes de la industria.</p>
</div>
<div class="card card-feature" style="padding: var(--space-4);">
<div class="icon-container" style="width: 32px; height: 32px; margin-bottom: var(--space-2);">
<i class="fas fa-tools"></i>
</div>
<h4 class="h4 mb-2">Tecnología Avanzada</h4>
<p class="small">Empleamos tecnología de última generación para asegurar la precisión y calidad en cada proceso de ranurado y roscado para cañerías de acero.</p>
</div>
</div>
</div>
<div>
<div class="card" style="height: 400px; padding: var(--space-6); display: flex; align-items: center; justify-content: center;">
<img src="innovacion.png" alt="Innovación en componentes y nuevas tecnologías" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
</div>
</div>
</div>
</div>
</section>
<!-- Stats Band -->
<section class="section section-alt">
<div class="container">
<div class="section-header">
<div class="section-kicker">Nuestros Números</div>
<h2 class="section-title">15,000 kilos fabricados al año</h2>
<p class="section-desc">
Líderes en la zona con productos que cumplen los más altos estándares de la industria.
</p>
</div>
<div class="grid-4">
<div class="card card-stat">
<div class="stat-number">20</div>
<div class="stat-label">Años</div>
</div>
<div class="card card-stat">
<div class="stat-number">132</div>
<div class="stat-label">Clientes</div>
</div>
<div class="card card-stat">
<div class="stat-number">798</div>
<div class="stat-label">Proyectos</div>
</div>
<div class="card card-stat">
<div class="stat-number">9</div>
<div class="stat-label">Regiones</div>
</div>
</div>
</div>
</section>
<!-- Trabajos Realizados -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 class="section-title">Proyectos Destacados</h2>
<p class="section-desc">
Innovación y calidad unidas para soluciones efectivas en diferentes industrias.
</p>
</div>
<div class="grid-3">
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-cog"></i>
</div>
<h4 class="h4 mb-4">Sistemas de Bombeo</h4>
<p class="body">Sistemas de bombeo para industria pesquera con eficiencia en entornos marinos.</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-network-wired"></i>
</div>
<h4 class="h4 mb-4">Redes de Tuberías</h4>
<p class="body">Redes de tuberías para industria minera en condiciones extremas.</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-tachometer-alt"></i>
</div>
<h4 class="h4 mb-4">Control y Monitoreo</h4>
<p class="body">Sistemas de control para equipos hidráulicos en industria forestal.</p>
</div>
</div>
</div>
</section>
<!-- Audiences -->
<section class="section section-alt">
<div class="container">
<div class="section-header">
<div class="section-kicker">Nuestros Clientes</div>
<h2 class="section-title">Soluciones para Diferentes Sectores</h2>
<p class="section-desc">
Ofrecemos servicios especializados adaptados a las necesidades específicas de cada industria.
</p>
</div>
<div class="grid-3">
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-building"></i>
</div>
<h4 class="h4 mb-4">Industria Pesquera</h4>
<p class="body">
Soluciones especializadas para el manejo de fluidos en procesos pesqueros, garantizando eficiencia y durabilidad en entornos marinos.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-mountain"></i>
</div>
<h4 class="h4 mb-4">Industria Minera</h4>
<p class="body">
Sistemas de bombeo robustos para aplicaciones mineras, diseñados para operar en condiciones extremas y ambientes hostiles.
</p>
</div>
<div class="card card-feature">
<div class="icon-container">
<i class="fas fa-leaf"></i>
</div>
<h4 class="h4 mb-4">Industria Forestal</h4>
<p class="body">
Soluciones hidráulicas para procesos forestales, optimizando el manejo de fluidos en operaciones de transformación de madera.
</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Strip -->
<section class="testimonials-strip">
<div class="container">
<div class="section-header">
<div class="section-kicker">Testimonios</div>
<h2 class="section-title">Lo que dicen nuestros clientes</h2>
<p class="section-desc">
La confianza de nuestros clientes es nuestro mayor logro.
</p>
</div>
<div class="grid-3">
<div class="testimonial-card">
<div class="testimonial-quote">
"SH Silva ha sido fundamental para optimizar nuestros sistemas de bombeo. Su experiencia y profesionalismo son excepcionales."
</div>
<div class="testimonial-author">
<div class="testimonial-avatar">JM</div>
<div>
<div class="body-strong">Juan Martínez</div>
<div class="small">Director de Operaciones</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-quote">
"Excelente servicio técnico y productos de alta calidad. Han superado nuestras expectativas en cada proyecto."
</div>
<div class="testimonial-author">
<div class="testimonial-avatar">CL</div>
<div>
<div class="body-strong">Carmen López</div>
<div class="small">Gerente de Mantenimiento</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-quote">
"Confiamos en SH Silva para el mantenimiento de nuestros equipos críticos. Su respuesta rápida y soluciones efectivas nos dan tranquilidad."
</div>
<div class="testimonial-author">
<div class="testimonial-avatar">RG</div>
<div>
<div class="body-strong">Roberto González</div>
<div class="small">Supervisor de Planta</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="section section-alt" id="contacto">
<div class="container">
<div class="section-header">
<div class="section-kicker">Contacto</div>
<h2 class="section-title">¿Listo para optimizar su sistema de bombeo?</h2>
<p class="section-desc">
Nuestro equipo de expertos está listo para ayudarle con las soluciones más adecuadas.
</p>
<!-- IMAGEN DE SERVICIOS SOLO EN MÓVIL -->
<img src="servicios.png" alt="Servicios especializados en ranurado y roscado" class="worker-image-mobile">
</div>
<div class="grid-2">
<div>
<h3 class="h3 mb-6">Información de Contacto</h3>
<div style="margin-bottom: var(--space-6);">
<div style="display: flex; align-items: center; margin-bottom: var(--space-4);">
<div style="width: 40px; height: 40px; background: var(--color-accent-primary-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: var(--space-4);">
<i class="fas fa-map-marker-alt" style="color: var(--color-accent-primary); font-size: 18px;"></i>
</div>
<div>
<div class="body-strong" style="color: var(--color-accent-primary);">Dirección</div>
<div class="body">Argentina 884, Concepción</div>
</div>
</div>
<div style="display: flex; align-items: center; margin-bottom: var(--space-4);">
<div style="width: 40px; height: 40px; background: var(--color-accent-primary-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: var(--space-4);">
<i class="fas fa-envelope" style="color: var(--color-accent-primary); font-size: 18px;"></i>
</div>
<div>
<div class="body-strong" style="color: var(--color-accent-primary);">Email</div>
<div class="body">contacto@shsilva.cl</div>
</div>
</div>
<div style="display: flex; align-items: center; margin-bottom: var(--space-4);">
<div style="width: 40px; height: 40px; background: var(--color-accent-primary-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: var(--space-4);">
<i class="fas fa-phone" style="color: var(--color-accent-primary); font-size: 18px;"></i>
</div>
<div>
<div class="body-strong" style="color: var(--color-accent-primary);">Teléfono</div>
<div class="body">985715985</div>
</div>
</div>
<div style="display: flex; align-items: center; margin-bottom: var(--space-4);">
<div style="width: 40px; height: 40px; background: var(--color-accent-primary-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: var(--space-4);">
<i class="fab fa-whatsapp" style="color: var(--color-accent-primary); font-size: 18px;"></i>
</div>
<div>
<div class="body-strong" style="color: var(--color-accent-primary);">WhatsApp</div>
<div class="body">985715985</div>
</div>
</div>
</div>
<div style="display: flex; gap: var(--space-4);">
<a href="mailto:edison.silva@shsilva.cl" class="btn btn-primary">Enviar Email</a>
<a href="https://wa.me/56958587068" class="btn btn-secondary" target="_blank">WhatsApp</a>
</div>
</div>
<div class="contact-image-mobile">
<div class="card" style="height: 400px; padding: var(--space-6); display: flex; align-items: center; justify-content: center;">
<img src="servicios.png" alt="Servicios especializados en ranurado y roscado" style="width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);">
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer" id="site-footer" role="contentinfo">
<div class="container">
<div class="footer-grid">
<div class="footer-block">
<h4>SH Silva</h4>
<p class="body">
Expertos en soluciones de bombeo eficientes con más de 20 años de experiencia en el sector industrial.
</p>
</div>
<div class="footer-block">
<h4>Servicios</h4>
<ul>
<li><a href="#fabricacion">Fabricación</a></li>
<li><a href="#montaje">Montaje</a></li>
<li><a href="#servicio-tecnico">Servicio Técnico</a></li>
<li><a href="#productos">Ventas</a></li>
</ul>
</div>
<div class="footer-block">
<h4>Productos</h4>
<ul>
<li><a href="#productos">Bombas</a></li>
<li><a href="#productos">Válvulas</a></li>
<li><a href="#productos">Juntas</a></li>
<li><a href="#productos">Tableros de Control</a></li>
</ul>
</div>
<div class="footer-block">
<h4>Contacto</h4>
<ul>
<li><i class="fas fa-map-marker-alt" style="margin-right: 8px;"></i> Argentina 884, Concepción</li>
<li><i class="fas fa-envelope" style="margin-right: 8px;"></i> edison.silva@shsilva.cl</li>
<li><i class="fas fa-phone" style="margin-right: 8px;"></i> 985715985</li>
<li><i class="fab fa-whatsapp" style="margin-right: 8px;"></i> WhatsApp: 985715985</li>
</ul>
</div>
<div class="footer-block">
<h4>Newsletter</h4>
<p class="body mb-4">Manténgase informado sobre nuestras últimas soluciones y tecnologías.</p>
<form class="newsletter-form">
<input type="email" class="newsletter-input" placeholder="Su email" required>
<button type="submit" class="newsletter-submit">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div style="text-align: center; padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.1);">
<p class="small" style="color: rgba(255, 255, 255, 0.7); font-size: 14px; margin: 0;">© 2024 SH Silva. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<script>
// Header scroll effect
window.addEventListener('scroll', () => {
const header = document.getElementById('header');
if (window.scrollY > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// (Eliminado: scrollFeed duplicado)
// Newsletter form submission
document.querySelector('.newsletter-form').addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
alert('Gracias por suscribirse a nuestro newsletter!');
this.reset();
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in-up');
}
});
}, observerOptions);
// Observe all cards and sections with staggered animations
document.querySelectorAll('.card, .section-header, .pillar-item').forEach((el, index) => {
observer.observe(el);
// Add staggered animation classes
el.style.animationDelay = `${index * 0.1}s`;
// Add specific animation classes based on element type
if (el.classList.contains('card')) {
el.classList.add('fade-in-up');
} else if (el.classList.contains('section-header')) {
el.classList.add('scale-in');
} else if (el.classList.contains('pillar-item')) {
el.classList.add('fade-in-up');
}
});
// Feed Horizontal Navigation
function scrollFeed(direction) {
const feed = document.getElementById('qualitiesFeed');
if (!feed) return;
const isMobile = window.innerWidth <= 768;
const baseCardWidth = 280 + 16;
const scrollAmount = isMobile ? (window.innerWidth - 120) : baseCardWidth * 1.5;
const delta = direction === 'left' ? -scrollAmount : scrollAmount;
feed.scrollBy({ left: delta, behavior: 'smooth' });
}
// Mobile menu functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
// Toggle menu visibility
mobileMenu.classList.toggle('show');
// Change icon
const icon = mobileMenuBtn.querySelector('i');
icon.className = mobileMenu.classList.contains('show') ? 'fas fa-times' : 'fas fa-bars';
});
// Close menu when clicking outside
document.addEventListener('click', function(e) {
if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
mobileMenu.classList.remove('show');
mobileMenuBtn.querySelector('i').className = 'fas fa-bars';
}
});
// Close menu when clicking a link
const menuLinks = mobileMenu.querySelectorAll('a');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.remove('show');
mobileMenuBtn.querySelector('i').className = 'fas fa-bars';
});
});
// Toggle submenus
const menuSections = mobileMenu.querySelectorAll('.mobile-menu-section');
menuSections.forEach(section => {
const header = section.querySelector('.mobile-menu-header');
if (header) {
header.addEventListener('click', function() {
section.classList.toggle('expanded');
const icon = section.querySelector('.toggle-icon');
if (icon) {
icon.style.transform = section.classList.contains('expanded')
? 'rotate(180deg)'
: 'rotate(0deg)';
}
});
}
});
}
});
// Función para expandir secciones
function toggleSection(section) {
console.log('🎯 Toggle sección ejecutado');
// Toggle de la clase expanded
section.classList.toggle('expanded');
const isNowExpanded = section.classList.contains('expanded');
console.log('¿Está expandida?', isNowExpanded);
// Cambiar el icono de la flecha
const toggleIcon = section.querySelector('.toggle-icon');
if (toggleIcon) {
if (isNowExpanded) {
toggleIcon.style.transform = 'rotate(180deg)';
console.log('✅ Flecha rotada hacia abajo');
} else {
toggleIcon.style.transform = 'rotate(0deg)';
console.log('✅ Flecha rotada hacia la derecha');
}
}
}
// Función para cerrar menú
function closeMobileMenu() {
const menu = document.getElementById('mobileMenu');
const btn = document.getElementById('mobileMenuBtn');
const icon = btn.querySelector('i');
if (menu && btn) {
menu.classList.remove('show');
icon.className = 'fas fa-bars';
// Cerrar todas las secciones expandidas
const sections = menu.querySelectorAll('.mobile-menu-section.expanded');
sections.forEach(section => {
section.classList.remove('expanded');
const submenu = section.querySelector('.mobile-menu-submenu');
const toggleIcon = section.querySelector('.toggle-icon');
if (submenu) {
submenu.style.maxHeight = '0px';
submenu.style.overflow = 'hidden';
}
if (toggleIcon) {
toggleIcon.style.transform = 'rotate(0deg)';
}
});
}
}
// ===== FUNCIONALIDAD PARA REELS HORIZONTALES =====
// Función para hacer scroll en reels
function scrollReel(reelContainer, direction) {
const reel = reelContainer.querySelector('.cards-reel-container') || reelContainer;
if (!reel) return;
const isMobile = window.innerWidth <= 768;
const baseWidth = 280 + 16;
const cardWidth = isMobile ? Math.max(window.innerWidth - 140, 220) : baseWidth;
const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
reel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
updateReelDots(reelContainer);
}
// Función para ir a un slide específico
function goToReelSlide(reelContainer, slideIndex) {
const reel = reelContainer.querySelector('.cards-reel-container') || reelContainer;
if (!reel) return;
const isMobile = window.innerWidth <= 768;
const baseWidth = 280 + 16;
const cardWidth = isMobile ? Math.max(window.innerWidth - 140, 220) : baseWidth;
const scrollPosition = slideIndex * cardWidth;
reel.scrollTo({ left: scrollPosition, behavior: 'smooth' });
updateReelDots(reelContainer);
}
// Función para actualizar indicadores de puntos
function updateReelDots(reelContainer) {
const reel = reelContainer.querySelector('.cards-reel-container') || reelContainer;
const dots = reelContainer.querySelectorAll('.reel-dot');
const scrollPosition = reel.scrollLeft;
const cardWidth = 280 + 16;
const currentSlide = Math.round(scrollPosition / cardWidth);
// Remover clase active de todos los puntos
dots.forEach(dot => dot.classList.remove('active'));
// Agregar clase active al punto actual
if (dots[currentSlide]) {
dots[currentSlide].classList.add('active');
}
}
// Función para inicializar todos los reels
function initializeReels() {
console.log('🎯 Inicializando reels...');
const reels = document.querySelectorAll('.reel-container');
console.log('🔍 Reels encontrados:', reels.length);
reels.forEach((reel, index) => {
console.log(`📱 Inicializando reel ${index + 1}:`, reel);
// Agregar event listeners a los botones de navegación usando data attributes
const prevBtn = reel.querySelector('.reel-nav-btn[data-direction="left"]');
const nextBtn = reel.querySelector('.reel-nav-btn[data-direction="right"]');
if (prevBtn) {
prevBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
scrollReel(reel, 'left');
});
}
if (nextBtn) {
nextBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
scrollReel(reel, 'right');
});
}
// Agregar event listeners a los puntos usando data attributes
const dots = reel.querySelectorAll('.reel-dot[data-slide]');
dots.forEach((dot) => {
const slideIndex = parseInt(dot.getAttribute('data-slide'));
dot.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
goToReelSlide(reel, slideIndex);
});
});
console.log(`✅ Reel ${index + 1} completamente inicializado`);
});
console.log('🎉 Todos los reels inicializados correctamente');
// TEST DIRECTO: Verificar que los botones estén funcionando
setTimeout(() => {
console.log('🧪 TESTING BOTONES DE REELS...');
const testBtn = document.querySelector('.reel-nav-btn[data-direction="right"]');
if (testBtn) {
console.log('✅ Botón de test encontrado:', testBtn);
console.log('🎯 Event listeners del botón:', testBtn.onclick, testBtn._listeners);
} else {
console.error('❌ No se encontró botón de test');
}
}, 1000);
}
// Inicializar cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', function() {
console.log('=== INICIALIZANDO SISTEMA COMPLETO ===');
// ===== INICIALIZAR REELS =====
initializeReels();
// ===== INICIALIZAR MENÚ MÓVIL =====
console.log('=== INICIALIZANDO MENÚ MÓVIL ===');
const menu = document.getElementById('mobileMenu');
const btn = document.getElementById('mobileMenuBtn');
console.log('Elementos encontrados:', { menu, btn });
if (menu && btn) {
// Asegurar que el menú esté oculto
menu.classList.remove('show');
console.log('✅ Menú oculto inicialmente');
// Event listener para el botón
btn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('🎯 CLICK EN BOTÓN!');
toggleMobileMenu();
});
// Event listeners para secciones
const sections = menu.querySelectorAll('.mobile-menu-section');
console.log('🔍 Secciones encontradas:', sections.length);
sections.forEach((section, index) => {
const header = section.querySelector('.mobile-menu-header');
console.log(`Sección ${index + 1}:`, header);
if (header) {
// Agregar event listener con test directo
header.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
console.log(`🎯 CLICK EN SECCIÓN ${index + 1}!`);
console.log('Evento:', e);
console.log('Target:', e.target);
toggleSection(section);
});
// Test directo del event listener
console.log(`✅ Event listener agregado a sección ${index + 1}`);
// Agregar onclick directo como respaldo
header.onclick = function() {
console.log(`🎯 ONCLICK DIRECTO en sección ${index + 1}`);
toggleSection(section);
};
} else {
console.error(`❌ Header no encontrado en sección ${index + 1}`);
}
});
// Event listeners para enlaces
const links = menu.querySelectorAll('a');
links.forEach(link => {
link.addEventListener('click', closeMobileMenu);
});
console.log('✅ Event listeners agregados correctamente');
// Test directo de las secciones
console.log('🧪 Probando secciones expandibles...');
sections.forEach((section, index) => {
const header = section.querySelector('.mobile-menu-header');
const submenu = section.querySelector('.mobile-menu-submenu');
const toggleIcon = section.querySelector('.toggle-icon');
console.log(`Sección ${index + 1}:`, {
header: header ? '✅' : '❌',
submenu: submenu ? '✅' : '❌',
toggleIcon: toggleIcon ? '✅' : '❌',
submenuHeight: submenu ? submenu.style.maxHeight : 'N/A',
clases: section.className
});
// Test visual completado - sin bordes de debug
});
} else {
console.error('❌ Elementos del menú móvil no encontrados');
}
});
// Inicialización unificada
document.addEventListener('DOMContentLoaded', function() {
// Menú móvil (consolidado, sin duplicados)
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
if (mobileMenuBtn && mobileMenu) {
mobileMenu.classList.remove('show');
mobileMenuBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
mobileMenu.classList.toggle('show');
const icon = mobileMenuBtn.querySelector('i');
icon.className = mobileMenu.classList.contains('show') ? 'fas fa-times' : 'fas fa-bars';
});
const mobileMenuSections = mobileMenu.querySelectorAll('.mobile-menu-section');
mobileMenuSections.forEach(section => {
const header = section.querySelector('.mobile-menu-header');
if (header) header.addEventListener('click', function() { section.classList.toggle('expanded'); });
});
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => { link.addEventListener('click', function() { mobileMenu.classList.remove('show'); mobileMenuBtn.querySelector('i').className = 'fas fa-bars'; }); });
document.addEventListener('click', function(e) {
if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
mobileMenu.classList.remove('show');
mobileMenuBtn.querySelector('i').className = 'fas fa-bars';
}
});
}
// Feed functionality
const feed = document.getElementById('qualitiesFeed');
if (feed) {
feed.addEventListener('scroll', function() {
const leftBtn = document.querySelector('.scroll-left');
const rightBtn = document.querySelector('.scroll-right');
if (leftBtn) {
if (feed.scrollLeft <= 0) {
leftBtn.style.opacity = '0.5';
leftBtn.style.pointerEvents = 'none';
} else {
leftBtn.style.opacity = '1';
leftBtn.style.pointerEvents = 'auto';
}
}
if (rightBtn) {
if (feed.scrollLeft >= feed.scrollWidth - feed.clientWidth - 10) {
rightBtn.style.opacity = '0.5';
rightBtn.style.pointerEvents = 'none';
} else {
rightBtn.style.opacity = '1';
rightBtn.style.pointerEvents = 'auto';
}
}
});
}
// Mobile-specific optimizations
if (window.innerWidth <= 768) {
// Add touch-friendly scrolling to all scrollable elements
const scrollableElements = document.querySelectorAll('.qualities-feed, .card');
scrollableElements.forEach(el => {
el.style.webkitOverflowScrolling = 'touch';
});
// Improve button touch targets
const buttons = document.querySelectorAll('.btn, .nav-link');
buttons.forEach(btn => {
btn.style.minHeight = '44px';
btn.style.minWidth = '44px';
});
}
// Handle orientation change
window.addEventListener('orientationchange', function() {
setTimeout(function() {
// Responsive adjustments for orientation change
// Ajustes adicionales si son necesarios
}, 100);
});
});
</script>
</body>
</html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<meta name="theme-color" content="#00B4D8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>SH Silva | Expertos en Soluciones de Bombeo Eficientes</title>
<meta name="description" content="Con 20 años de experiencia, ofrecemos soluciones de bombeo personalizadas, fabricación, montaje y servicio técnico especializado. Expertos en sistemas hidráulicos industriales.">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
/* Design System Colors - Water & Hydraulic Theme */
--color-bg: #FFFFFF;
--color-surface: #F8FCFF;
--color-surface-tint: #F0F7FF;
--color-surface-alt: #E8F4FD;
--color-text-primary: #0A1A2F;
--color-text-secondary: #2C4A6B;
--color-text-muted: #5A7A9A;
--color-border: #C5D9F1;
--color-border-strong: #9BC2E8;
--color-brand: #0A1A2F;
/* Accent Colors - Water & Industrial */
--color-accent-primary: #00B4D8;
--color-accent-primary-600: #0096C7;
--color-accent-primary-400: #48CAE4;
--color-accent-primary-200: #CAF0F8;
--color-accent-primary-100: #E0F7FF;
--color-accent-secondary: #023E8A;
--color-accent-tertiary: #0077B6;
--color-accent-quaternary: #90E0EF;
--color-success: #2D6A4F;
--color-warning: #F8961E;
--color-danger: #E63946;
--color-info: #1D4ED8;
/* Sophisticated Gradients */
--gradient-ocean: linear-gradient(135deg, #00B4D8 0%, #0077B6 50%, #023E8A 100%);
--gradient-surface: linear-gradient(180deg, #F8FCFF 0%, #F0F7FF 100%);
--gradient-accent: linear-gradient(135deg, #00B4D8 0%, #0096C7 100%);
--gradient-deep: linear-gradient(135deg, #023E8A 0%, #0A1A2F 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
--gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,248,255,0.8) 100%);
--gradient-hero: linear-gradient(135deg, rgba(0,180,216,0.1) 0%, rgba(2,62,138,0.1) 100%);
--gradient-button: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
--gradient-button-hover: linear-gradient(135deg, #0096C7 0%, #023E8A 100%);
/* Overlays */
--color-scrim: rgba(10,26,47,0.4);
--color-tint-light: rgba(0,180,216,0.15);
--color-tint-water: rgba(0,180,216,0.08);
--color-tint-glass: rgba(255,255,255,0.1);
/* Spacing Scale */
--space-2: 8px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Border Radius - Organic Curves */
--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-2xl: 40px;
--radius-pill: 999px;
--radius-organic: 20px 30px 15px 25px;
/* Sophisticated Shadows */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
--shadow-lg: 0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
--shadow-xl: 0 24px 60px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.1);
--shadow-accent: 0 8px 32px rgba(0,180,216,0.2);
--shadow-accent-lg: 0 16px 48px rgba(0,180,216,0.25);
--shadow-glass: 0 8px 32px rgba(255,255,255,0.1);
--shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
/* Typography */
--font-display: 'Inter', SF Pro, Segoe UI, Roboto, Arial, sans-serif;
--font-text: 'Inter', SF Pro, Segoe UI, Roboto, Arial, sans-serif;
--font-numeric: 'Inter', Roboto Mono, Menlo, monospace;
/* Motion & Animations */
--transition-fast: 150ms;