/* ═══════════════════════════════════════════════════════════════════ FUENTE MONTSERRAT - GOOGLE FONTS ═══════════════════════════════════════════════════════════════════ Importando desde Google Fonts para evitar errores 404 Pesos: 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap'); #accordionNacionales .accordion-item, #accordionInternacionales .accordion-item { margin-bottom: 0.1rem !important; border: none !important; } #accordionNacionales .accordion-header, #accordionInternacionales .accordion-header { margin-bottom: 0 !important; line-height: 1.2 !important; } #accordionNacionales .accordion-button, #accordionInternacionales .accordion-button { padding: 0.5rem 1rem !important; border: none !important; line-height: 1.3 !important; font-size: 0.95rem !important; } #accordionNacionales .accordion-body, #accordionInternacionales .accordion-body { padding: 0.5rem 1rem !important; padding-top: 0.1rem !important; } .responsive-img { filter: contrast(1) brightness(1.1) saturate(100) !important; transition: all 0.3s ease !important; cursor: pointer !important; } /* 🚫 HOVER/ZOOM DESHABILITADO (2025-10-28): Eliminado efecto zoom de mapas */ /* .responsive-img:hover { transform: scale(1.05) !important; } */ /* ═══════════════════════════════════════════════════════════════════ NOTA: Si quieres usar fuentes locales en lugar de Google Fonts: 1. Descarga los archivos .woff2 y .woff de Montserrat 2. Crea la carpeta: fonts/montserrat/ 3. Coloca los archivos ahí 4. Descomenta las declaraciones @font-face de abajo 5. Comenta o elimina el @import de Google Fonts de arriba */ /* DESCOMENTADO - Fuentes locales (actualmente deshabilitadas) @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/Montserrat-ExtraBold.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/Montserrat-Bold.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/Montserrat-Medium.woff2') format('woff2'), url('../fonts/montserrat/Montserrat-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } */ /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ 🔢 ESTILOS DEL CONTADOR ANIMADO ║ ║ ║ ║ Controla la apariencia visual del contador que aparece en los servicios ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 🎨 PERSONALIZACIONES DISPONIBLES: ║ ║ ║ ║ 📍 Línea 1159: left (posición horizontal del contador) ║ ║ • Valor actual: 20px ║ ║ • AJUSTA AQUÍ para mover el contador a izquierda o derecha ║ ║ ║ ║ 📍 Línea 1164: top (posición vertical del contador) ║ ║ • Valor actual: 20px ║ ║ • AJUSTA AQUÍ para mover el contador arriba o abajo ║ ║ ║ ║ 🔄 Línea 1171: rotate (inclinación diagonal del contador) ║ ║ • Valor actual: -15deg ║ ║ • AJUSTA AQUÍ: valores negativos inclinan a la izquierda ║ ║ • Valores positivos inclinan a la derecha ║ ║ • 0deg = sin inclinación ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ .service-counter { position: absolute; /* ═══════════════════════════════════════════════════════════════════ 🎯 EJE X (Horizontal) - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ left: -40px; /* 👈 CAMBIA ESTE VALOR: 0px, 10px, 30px, 50px... */ /* ═══════════════════════════════════════════════════════════════════ 🎯 EJE Y (Vertical) - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ top: 70px; /* 👈 CAMBIA ESTE VALOR: 0px, 10px, 30px, 50px... */ z-index: 10; /* ═══════════════════════════════════════════════════════════════════ 🔄 INCLINACIÓN (Diagonal) - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ transform: rotate(0deg); /* 👈 CAMBIA ESTE VALOR: -45deg, -30deg, -15deg, 0deg, +15deg, +30deg */ transform-origin: top left; /* ═══════════════════════════════════════════════════════════════════ 🎨 FONDO DEL CONTADOR (Degradado) - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ background: linear-gradient(135deg, rgba(46, 48, 146, 0.075), rgba(0, 187, 212, 0.103)); /* 👆 PERSONALIZA COLORES DEL FONDO: - 135deg = Dirección del degradado (diagonal) - rgba(46, 48, 146, 0.95) = Color 1: AZUL OSCURO (esquina superior izquierda) • 46 = Rojo, 48 = Verde, 146 = Azul • 0.95 = Opacidad (95% visible, 5% transparente) - rgba(0, 188, 212, 0.95) = Color 2: CYAN/TURQUESA (esquina inferior derecha) • 0 = Rojo, 188 = Verde, 212 = Azul • 0.95 = Opacidad EJEMPLOS DE OTROS COLORES: • Degradado rojo a naranja: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(249, 115, 22, 0.95)) • Degradado verde: linear-gradient(135deg, rgba(5, 150, 105, 0.95), rgba(16, 185, 129, 0.95)) • Degradado morado: linear-gradient(135deg, rgba(109, 40, 217, 0.95), rgba(168, 85, 247, 0.95)) • Color sólido negro: rgba(0, 0, 0, 0.9) */ padding: 15px 25px; border-radius: 12px; /* ═══════════════════════════════════════════════════════════════════ 🎨 SOMBRA DEL CONTADOR - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26); /* Sombra del cajon del contador */ /* 👆 SOMBRA: - 0 = Desplazamiento horizontal (0 = centrado) - 8px = Desplazamiento vertical (hacia abajo) - 20px = Difuminado (más grande = más suave) - rgba(0, 0, 0, 0.3) = Color NEGRO con 30% de opacidad Para sombra de color: • Azul: rgba(0, 100, 200, 0.5) • Rojo: rgba(200, 0, 0, 0.5) */ backdrop-filter: blur(10px); } .counter-number { /* ═══════════════════════════════════════════════════════════════════ 🔤 FUENTE DEL NÚMERO - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif !important; /* 👆 CAMBIÉ LA FUENTE: - ANTES: 'Arial Black' (siempre gruesa, no respeta font-weight) - AHORA: 'Arial' y 'Helvetica' (fuentes normales que SÍ respetan font-weight) OTRAS OPCIONES DE FUENTES: • font-family: 'Roboto', sans-serif; • font-family: 'Open Sans', sans-serif; • font-family: 'Lato', sans-serif; • font-family: 'Helvetica Neue', sans-serif; */ font-size: 2.2rem; /* 👈 AJUSTA: Tamaño del número */ /* ═══════════════════════════════════════════════════════════════════ 📏 GROSOR DEL NÚMERO (Negrita) - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ font-weight: 100 !important; /* 👆 GROSOR/ESPESOR DE LA FUENTE: - 100 = Ultra delgado (Thin) ⭐ VALOR ACTUAL - 200 = Extra delgado (Extra Light) - 300 = Delgado (Light) - 400 = Normal (Regular) - 500 = Medio (Medium) - 600 = Semi negrita (Semi Bold) - 700 = Negrita (Bold) - 800 = Extra negrita (Extra Bold) - 900 = Ultra negrita (Black) - ERA EL VALOR ANTERIOR ⚠️ IMPORTANTE: El "!important" fuerza este valor sobre cualquier otra regla CSS que pueda estar sobrescribiendo el grosor. Si lo quieres cambiar, modifica el número 100 por cualquier otro de la lista (200, 300, 400, etc.) */ /* ═══════════════════════════════════════════════════════════════════ 🎨 COLOR BASE DEL NÚMERO - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ color: #ffffff; /* 👆 COLOR BASE: BLANCO (#ffffff) Este color solo se verá si desactivas el degradado brillante de abajo. EJEMPLOS: • Blanco: #ffffff • Negro: #000000 • Rojo: #ff0000 • Azul: #0066ff • Verde: #00ff00 • Amarillo: #ffff00 */ /* ═══════════════════════════════════════════════════════════════════ 🎨 SOMBRA DEL NÚMERO - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ text-shadow: 2px 2px 8px rgba(255, 255, 255, 0); /* maneja la sombra del numero */ /* 👆 SOMBRA DEL TEXTO: - 2px = Desplazamiento horizontal (derecha) - 2px = Desplazamiento vertical (abajo) - 8px = Difuminado - rgba(0, 0, 0, 0.5) = Color NEGRO con 50% opacidad EJEMPLOS: • Sombra azul: 2px 2px 8px rgba(0, 100, 255, 0.7) • Sin sombra: none • Sombra más fuerte: 2px 2px 8px rgba(0, 0, 0, 0.9) */ /* ═══════════════════════════════════════════════════════════════════ 🎨 EFECTO DEGRADADO BRILLANTE DEL NÚMERO - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ background: linear-gradient(45deg, #ffffff, #FFD700, #ffffff); /* 👆 DEGRADADO BRILLANTE (estilo dorado/oro): - 45deg = Dirección diagonal - #ffffff = BLANCO (inicio del degradado) - #FFD700 = ORO/AMARILLO DORADO (centro del degradado) - #ffffff = BLANCO (fin del degradado) EJEMPLOS DE OTROS DEGRADADOS: • Azul brillante: linear-gradient(45deg, #00d4ff, #ffffff, #00d4ff) • Verde brillante: linear-gradient(45deg, #00ff88, #ffffff, #00ff88) • Rojo brillante: linear-gradient(45deg, #ff4444, #ffffff, #ff4444) • Morado brillante: linear-gradient(45deg, #aa44ff, #ffffff, #aa44ff) • Solo blanco (sin efecto): linear-gradient(45deg, #ffffff, #ffffff, #ffffff) ⚠️ IMPORTANTE: Las siguientes 3 líneas hacen que el degradado se aplique al texto. NO las modifiques a menos que quieras desactivar el efecto brillante. */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* 👆 Si quieres DESACTIVAR el degradado brillante y usar solo el color sólido: 1. Comenta estas 3 líneas (agrega // al inicio) 2. Comenta la línea "background: linear-gradient..." 3. El número usará el color sólido de "color: #ffffff" de arriba */ display: block; line-height: 1; } .counter-text { /* ═══════════════════════════════════════════════════════════════════ 🔤 TEXTO "Años de Experiencia" - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif !important; font-size: 0.8rem; /* 👈 Tamaño mejorado para mejor legibilidad */ font-weight: 600; /* 👈 Peso más robusto para mejor legibilidad (antes: 300) */ line-height: 1.2; /* 👈 Mejor espaciado entre líneas */ margin-top: 4px; /* 👈 Separación del número */ /* ═══════════════════════════════════════════════════════════════════ 🎨 COLOR DEL TEXTO SIMPLIFICADO - SIN DEFORMACIONES ═══════════════════════════════════════════════════════════════════ */ color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 👈 Sombra suave y sutil */ display: block; text-align: center; margin-top: 5px; /* 👈 Espacio entre el número y el texto */ line-height: 1.2; } /* ╔═════════════════════════════════════════════════════════════════════════════════════════════╗ ║ 📱 RESPONSIVE - PANTALLAS PEQUEÑAS (MÓVILES) ║ ║ ║ ║ Los mismos controles granulares aplican aquí para móviles ║ ╚═════════════════════════════════════════════════════════════════════════════════════════════╝ */ @media (max-width: 768px) { .service-counter { /* EJE X en móvil */ left: 10px; /* 👈 Ajusta posición horizontal en móvil */ /* EJE Y en móvil */ top: 10px; /* 👈 Ajusta posición vertical en móvil */ /* Inclinación en móvil (opcional: puede ser diferente al desktop) */ /* transform: rotate(-10deg); */ /* Descomenta y ajusta si quieres otra inclinación en móvil */ padding: 10px 15px; } .counter-number { font-size: 1.5rem; /* 👈 Tamaño más pequeño en móvil */ } .counter-text { font-size: 0.7rem; /* 👈 Tamaño mejorado para móvil */ font-weight: 600; /* 👈 Peso robusto para mejor legibilidad en móvil */ line-height: 1.2; /* 👈 Mejor espaciado entre líneas */ margin-top: 5px; /* 👈 Mejor separación del número */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 👈 Sombra suave y sutil */ } } /* Responsive - Ajustes para pantallas pequeñas */ @media (max-width: 768px) { #gep-ingenieria-proceso { margin-bottom: 50px !important; } #gep-servicios { padding-top: 50px !important; } /* Espaciado entre títulos en móvil */ #gep-servicios .icon-note > .mt-5.pt-5 { margin-top: 3rem !important; padding-top: 3rem !important; } /* Espaciado para los iconos en móvil */ #gep-servicios .tab-carousel-wrapper { margin-top: 40px !important; /* 👈 AJUSTA AQUÍ para móviles */ } } /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ 📐 ESTANDARIZACIÓN DE DIMENSIONES DE IMÁGENES EN CARRUSELES ║ ║ ║ ║ Fuerza a todas las imágenes de los carruseles de servicios a tener las mismas dimensiones ║ ║ para mantener una apariencia visual uniforme en todas las secciones. ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 🎯 OBJETIVO: ║ ║ • Todas las imágenes tienen la misma altura ║ ║ • Mantiene el aspect ratio 3:2 (ancho:alto) del Servicio 1 ║ ║ • Sin deformación usando object-fit: cover ║ ║ ║ ║ 📊 DIMENSIONES DE REFERENCIA (Servicio 1): ║ ║ • Ratio aproximado: 3:2 (1.5:1) ║ ║ • Altura fija: 400px en desktop, 300px en tablet, 250px en móvil ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ 📦 CONTENEDOR DEL CAROUSEL - Bordes redondeados ⚠️ IMPORTANTE: Estos estilos eliminan las "puntas blancas" en las esquinas ═══════════════════════════════════════════════════════════════════ */ .carousel-inner { overflow: hidden !important; border-radius: 8px !important; } /* ═══════════════════════════════════════════════════════════════════ 🎨 CAROUSEL PRINCIPAL - Sombra profesional 👈 AJUSTA AQUÍ para cambiar la sombra de TODOS los carruseles ═══════════════════════════════════════════════════════════════════ */ .carousel.slide { overflow: visible !important; /* Cambiado a visible para que la sombra se vea */ border-radius: 8px !important; } /* Específicamente para todos los carruseles de servicios - SOMBRA APLICADA AQUÍ */ #SliderServicios, #SliderGeneracion, #SliderBombeo, #SliderPlantas, #SliderWellTesting, #SliderMantenimiento, #SliderFluidos, #SliderMetrologia, #SliderConstruccion { overflow: visible !important; /* 👈 IMPORTANTE: visible para que la sombra no se corte */ border-radius: 8px !important; /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 📍 LÍNEA SIGUIENTE - SOMBRA DE LOS CARRUSELES (box-shadow) 🎯 PERSONALIZACIÓN DEL COLOR/INTENSIDAD DE LA SOMBRA: VALOR ACTUAL: 0 8px 30px rgba(0, 0, 0, 0.35) Explicación de cada valor: • 0 = Desplazamiento horizontal (0 = centrado, no se mueve a los lados) • 8px = Desplazamiento vertical (qué tan abajo aparece la sombra) • 30px = Radio de difuminado (qué tan extendida/suave es la sombra) • rgba(0, 0, 0, 0.35) = Color negro con 35% de opacidad ↑ ↑ Color Opacidad (ESTO controla qué tan OSCURA es la sombra) 📝 CÓMO AJUSTAR LA OSCURIDAD DE LA SOMBRA (solo cambia el último número): • 0.15 = Sombra muy sutil (apenas visible) • 0.25 = Sombra media-suave • 0.35 = Sombra oscura ✅ ACTUAL • 0.45 = Sombra muy oscura • 0.60 = Sombra extremadamente oscura (casi negra) ⚠️ NOTA: NO cambies los primeros 3 valores (0 8px 30px) - solo ajusta el 0.35 ═══════════════════════════════════════════════════════════════════════════════════════════════ */ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.61) !important; } /* Los carousel-inner de cada uno también */ #SliderServicios .carousel-inner, #SliderGeneracion .carousel-inner, #SliderBombeo .carousel-inner, #SliderPlantas .carousel-inner, #SliderWellTesting .carousel-inner, #SliderMantenimiento .carousel-inner, #SliderFluidos .carousel-inner, #SliderMetrologia .carousel-inner, #SliderConstruccion .carousel-inner { overflow: hidden !important; border-radius: 8px !important; } /* Estandarización de imágenes en TODOS los carruseles de servicios */ #SliderServicios .carousel-item img, #SliderGeneracion .carousel-item img, #SliderBombeo .carousel-item img, #SliderPlantas .carousel-item img, #SliderWellTesting .carousel-item img, #SliderMantenimiento .carousel-item img, #SliderFluidos .carousel-item img, #SliderMetrologia .carousel-item img, #SliderConstruccion .carousel-item img { /* ═══════════════════════════════════════════════════════════════════ 📐 DIMENSIONES - AJUSTA AQUÍ ═══════════════════════════════════════════════════════════════════ */ width: 100%; /* Ocupa todo el ancho del contenedor */ height: 450px; /* 👈 ALTURA FIJA: Ajusta aquí (400px, 450px, 500px, etc.) */ /* ═══════════════════════════════════════════════════════════════════ 🎨 COMPORTAMIENTO DE LA IMAGEN - NO MODIFICAR ═══════════════════════════════════════════════════════════════════ */ object-fit: cover; /* Recorta la imagen sin deformar, mantiene proporciones */ object-position: center; /* Centra la imagen en el contenedor */ display: block; /* Elimina espacio extra debajo de la imagen */ border-radius: 8px !important; /* 👈 Esquinas redondeadas - !important para forzar */ } /* ═══════════════════════════════════════════════════════════════════ 📱 RESPONSIVE - TABLETS ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 992px) { #SliderServicios .carousel-item img, #SliderGeneracion .carousel-item img, #SliderBombeo .carousel-item img, #SliderPlantas .carousel-item img, #SliderWellTesting .carousel-item img, #SliderMantenimiento .carousel-item img, #SliderFluidos .carousel-item img, #SliderMetrologia .carousel-item img, #SliderConstruccion .carousel-item img { height: 350px; /* 👈 Altura en tablets */ } } /* ═══════════════════════════════════════════════════════════════════ 📱 RESPONSIVE - MÓVILES ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #SliderServicios .carousel-item img, #SliderGeneracion .carousel-item img, #SliderBombeo .carousel-item img, #SliderPlantas .carousel-item img, #SliderWellTesting .carousel-item img, #SliderMantenimiento .carousel-item img, #SliderFluidos .carousel-item img, #SliderMetrologia .carousel-item img, #SliderConstruccion .carousel-item img { height: 280px; /* 👈 Altura en móviles */ } } /* ═══════════════════════════════════════════════════════════════════ 📱 RESPONSIVE - MÓVILES PEQUEÑOS ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 576px) { #SliderServicios .carousel-item img, #SliderGeneracion .carousel-item img, #SliderBombeo .carousel-item img, #SliderPlantas .carousel-item img, #SliderWellTesting .carousel-item img, #SliderMantenimiento .carousel-item img, #SliderFluidos .carousel-item img, #SliderMetrologia .carousel-item img, #SliderConstruccion .carousel-item img { height: 220px; /* 👈 Altura en móviles pequeños */ } } /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ 🎯 ESTILOS PARA GRID DE ICONOS DE SERVICIOS (3×3) ║ ║ ║ ║ 📍 UBICACIÓN EN HTML: index.html línea ~974 ║ ║ 📋 ESTRUCTURA: 9 iconos en grid de 3 columnas × 3 filas ║ ║ 🔗 FUNCIONALIDAD: Al hacer clic, scroll suave al carrusel del servicio ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 🎨 PERSONALIZACIÓN RÁPIDA: ║ ║ ║ ║ 📏 TAMAÑOS DE ICONOS (Desktop): ║ ║ • Círculo: 50px (línea ~453-454) ║ ║ • Icono SVG: 32px (línea ~470-471) ║ ║ • Padding tarjeta: 15px 10px (línea ~435) ║ ║ • Texto: 0.75rem (línea ~480) ║ ║ ║ ║ 🎨 COLORES: ║ ║ • Fondo tarjeta: #ffffff (línea ~436) ║ ║ • Texto: rgb(48, 48, 48) (línea ~482) ║ ║ • Degradado hover: rgba(46, 48, 146, 0.05) a rgba(0, 188, 212, 0.05) (línea ~449) ║ ║ • Círculo fondo: rgba(46, 48, 146, 0.1) a rgba(0, 188, 212, 0.1) (línea ~459) ║ ║ ║ ║ ✨ EFECTOS HOVER: ║ ║ • Elevación: translateY(-5px) (línea ~447) ║ ║ • Escala círculo: scale(1.1) (línea ~466) ║ ║ • Escala icono: scale(1.1) (línea ~476) ║ ║ • Duración transición: 0.3s (línea ~441) ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ 📦 CONTENEDOR DEL GRID ═══════════════════════════════════════════════════════════════════ */ .services-icon-grid { max-width: 1200px; /* 👈 AJUSTA: Ancho máximo del grid */ margin: 0 auto; /* Centra el grid */ padding: 10px; /* 👈 AJUSTA: Espacio interno del contenedor */ } /* ═══════════════════════════════════════════════════════════════════ 🎴 TARJETA DE ICONO (Estado Normal) ═══════════════════════════════════════════════════════════════════ */ .service-icon-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 15px; /* 👈 AJUSTA: Espacio interno de cada tarjeta (vertical horizontal) */ background: #ffffff; /* 👈 AJUSTA: Color de fondo de las tarjetas */ border-radius: 10px; /* 👈 AJUSTA: Redondez de esquinas (0px = cuadrado) */ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* 👈 AJUSTA: Sombra de tarjeta */ text-decoration: none; color: inherit; transition: all 0.3s ease; /* 👈 AJUSTA: Velocidad de animaciones (0.3s = 300ms) */ cursor: pointer; height: 100%; } /* ═══════════════════════════════════════════════════════════════════ ✨ TARJETA DE ICONO (Estado Hover - al pasar el mouse) ═══════════════════════════════════════════════════════════════════ */ .service-icon-card:hover { transform: translateY(-5px); /* 👈 AJUSTA: Elevación al hacer hover (-5px = sube 5px) */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* 👈 AJUSTA: Sombra más fuerte en hover */ background: linear-gradient(135deg, rgba(185, 185, 187, 0.938), rgba(197, 242, 248, 0.952)); /* 👆 AJUSTA: Degradado de fondo en hover (azul oscuro a cyan) Cambia los colores RGB o la opacidad (0.05 = 5% de opacidad) */ } /* ═══════════════════════════════════════════════════════════════════ ⭕ CÍRCULO QUE CONTIENE EL ICONO (Estado Normal) ⚠️ CONTROL INDEPENDIENTE: Este tamaño NO afecta el tamaño de los iconos 📐 Los iconos tienen sus propios controles granulares más abajo 🎯 Puedes hacer círculos pequeños con iconos grandes o viceversa ═══════════════════════════════════════════════════════════════════ */ .service-icon-card .icon-wrapper { width: 50px; /* 👈 SOLO CÍRCULO: Controla únicamente el tamaño del círculo contenedor */ height: 50px; /* 👈 SOLO CÍRCULO: Alto del círculo (mantener igual al ancho) */ display: flex; align-items: center; justify-content: center; margin-bottom: 10px; /* 👈 ESPACIO: Distancia entre círculo y texto del servicio */ background: linear-gradient(135deg, rgba(46, 48, 146, 0.1), rgba(0, 188, 212, 0.1)); /* 👆 AJUSTA: Degradado del círculo (10% de opacidad) */ border-radius: 50%; /* Hace que sea circular (no modificar) */ transition: all 0.3s ease; overflow: visible; /* 👈 PERMITE: Iconos más grandes que el círculo si es necesario */ pointer-events: none; /* 🔧 FIX CRÍTICO (2025-10-28): Permitir que los clicks pasen al padre 🐛 PROBLEMA: Los elementos hijos capturaban los eventos click antes que el padre, impidiendo el scroll personalizado. ✅ SOLUCIÓN: pointer-events: none hace que este elemento sea "transparente" a los clicks, permitiendo que pasen al . 📄 Ver: js/gep-services-scroll.js para la implementación completa */ } /* ═══════════════════════════════════════════════════════════════════ 🎯 CONTROLES GRANULARES - CÍRCULO INDIVIDUAL POR ICONO 📝 GUÍA DE PERSONALIZACIÓN: • Cada círculo puede tener tamaño diferente según el icono que contiene • Los iconos más complejos pueden necesitar círculos más grandes • Mantén la proporción: círculo ~15-20px más grande que el icono • Ejemplo: icono 45px → círculo 60-65px ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 🎯 CONTROLES INDEPENDIENTES DE CÍRCULOS POR SERVICIO ⚠️ IMPORTANTE: Estos controles son INDEPENDIENTES de los iconos 📐 Puedes tener círculo pequeño (30px) con icono grande (50px) 🎨 El icono puede salirse del círculo si overflow: visible está activo Para activar: Descomenta las líneas que necesites modificar ═══════════════════════════════════════════════════════════════════ */ /* 🔧 CONTROLES GRANULARES DE CÍRCULOS (OPCIONAL - descomenta para usar) */ /* .service-icon-card:nth-child(1) .icon-wrapper { width: 62px; height: 62px; } // Operación y Mantenimiento .service-icon-card:nth-child(2) .icon-wrapper { width: 64px; height: 64px; } // Generación Eléctrica .service-icon-card:nth-child(3) .icon-wrapper { width: 61px; height: 61px; } // Unidades de Bombeo .service-icon-card:nth-child(4) .icon-wrapper { width: 63px; height: 63px; } // Plantas de Tratamiento .service-icon-card:nth-child(5) .icon-wrapper { width: 30px; height: 30px; } // Well Testing - EJEMPLO: Círculo pequeño .service-icon-card:nth-child(6) .icon-wrapper { width: 62px; height: 62px; } // Mantenimiento de Equipos .service-icon-card:nth-child(7) .icon-wrapper { width: 61px; height: 61px; } // Venta de Equipos .service-icon-card:nth-child(8) .icon-wrapper { width: 63px; height: 63px; } // Metrología .service-icon-card:nth-child(9) .icon-wrapper { width: 64px; height: 64px; } // Construcción y Soldadura */ /* ═══════════════════════════════════════════════════════════════════ ⭕ CÍRCULO (Estado Hover) ═══════════════════════════════════════════════════════════════════ */ .service-icon-card:hover .icon-wrapper { background: linear-gradient(135deg, rgba(46, 48, 146, 0.2), rgba(0, 188, 212, 0.2)); /* 👆 AJUSTA: Degradado más intenso en hover (20% de opacidad) */ transform: scale(1.1); /* 👈 AJUSTA: Escala del círculo (1.1 = 110% del tamaño original) */ } /* ═══════════════════════════════════════════════════════════════════ 🎨 ICONO SVG DENTRO DEL CÍRCULO - CONTROLES GRANULARES POR ICONO ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 🔧 CONTROL GLOBAL BASE (aplicado a todos los iconos) ⚠️ SEPARACIÓN TOTAL DE CONTROLES: • Este selector NUNCA define width/height • Los tamaños se manejan EXCLUSIVAMENTE en .gep-service-icon-X • Los círculos se manejan EXCLUSIVAMENTE en .icon-wrapper • Cada control es 100% INDEPENDIENTE del otro ✅ RESULTADO: • Círculos pequeños (30px) + Iconos grandes (60px) = ✅ FUNCIONA • Círculos grandes (80px) + Iconos pequeños (20px) = ✅ FUNCIONA ═══════════════════════════════════════════════════════════════════ */ .service-icon-card .icon { /* ⚠️ JAMÁS definir width/height aquí - solo propiedades globales */ transition: all 0.3s ease; pointer-events: none; /* 🔧 FIX CRÍTICO (2025-10-28): Mismo fix que .icon-wrapper Los elementos SVG también bloqueaban los clicks. */ } /* ═══════════════════════════════════════════════════════════════════ 🎯 CONTROLES GRANULARES - TAMAÑO INDIVIDUAL POR ICONO ⚠️ CONTROL COMPLETAMENTE INDEPENDIENTE DEL CÍRCULO: • Estos tamaños NO están limitados por el tamaño del círculo • Puedes hacer iconos MÁS GRANDES que el círculo contenedor • Puedes hacer iconos MÁS PEQUEÑOS que el círculo contenedor • overflow: visible permite que los iconos se salgan del círculo 📝 INSTRUCCIONES DE USO: • Cada icono tiene su clase .gep-service-icon-X donde X es el número (1-9) • Modifica width y height para cambiar el tamaño de cada icono individualmente • Los valores están en píxeles (px) o rem (1rem ≈ 16px) • Usa !important para sobrescribir cualquier otro estilo 💡 EJEMPLOS PRÁCTICOS: • Círculo 30px + Icono 50px = Icono se sale del círculo (efecto visual interesante) • Círculo 80px + Icono 20px = Icono pequeño en círculo grande (minimalista) • Círculo 60px + Icono 60px = Icono llena todo el círculo (sin fondo visible) 🎨 DISTRIBUCIÓN DEL GRID 3x3: Fila 1: Icono 1 | Icono 2 | Icono 3 Fila 2: Icono 4 | Icono 5 | Icono 6 Fila 3: Icono 7 | Icono 8 | Icono 9 ═══════════════════════════════════════════════════════════════════ */ /* 🔧 FILA 1 - ICONOS SUPERIORES */ .service-icon-card .gep-service-icon-1, .gep-service-icon-1 { width: 60px !important; /* 👈 OPERACIÓN Y MANTENIMIENTO - Tamaño personalizado */ height: 60px !important; /* Stroke: #ee855f (naranja) */ } .service-icon-card .gep-service-icon-2, .gep-service-icon-2 { width: 44px !important; /* 👈 GENERACIÓN ELÉCTRICA - Tamaño personalizado */ height: 44px !important; /* Stroke: #f3e072 (amarillo) - stroke-width: 1px en HTML */ } .service-icon-card .gep-service-icon-3, .gep-service-icon-3 { width: 41px !important; /* 👈 UNIDADES DE BOMBEO - Tamaño personalizado */ height: 41px !important; /* Stroke: #8fe1fc (azul claro) */ } /* 🔧 FILA 2 - ICONOS MEDIOS */ .service-icon-card .gep-service-icon-4, .gep-service-icon-4 { width: 43px !important; /* 👈 PLANTAS DE TRATAMIENTO - Tamaño personalizado */ height: 43px !important; /* Stroke: #32CD32 (verde lima) */ } .service-icon-card .gep-service-icon-5, .gep-service-icon-5 { width: 45px !important; /* 👈 WELL TESTING - Tamaño personalizado */ height: 45px !important; /* Stroke: #c396eefa (púrpura) */ } .service-icon-card .gep-service-icon-6, .gep-service-icon-6 { width: 42px !important; /* 👈 MANTENIMIENTO DE EQUIPOS - Tamaño personalizado */ height: 42px !important; /* Stroke: #DC143C (rojo carmesí) */ } /* 🔧 FILA 3 - ICONOS INFERIORES */ .service-icon-card .gep-service-icon-7, .gep-service-icon-7 { width: 41px !important; /* 👈 VENTA DE EQUIPOS - Tamaño personalizado */ height: 41px !important; /* Stroke: #20B2AA (verde azulado) */ } .service-icon-card .gep-service-icon-8, .gep-service-icon-8 { width: 43px !important; /* 👈 METROLOGÍA - Tamaño personalizado */ height: 43px !important; /* Stroke: #4169E1 (azul real) */ } .service-icon-card .gep-service-icon-9, .gep-service-icon-9 { width: 44px !important; /* 👈 CONSTRUCCIÓN Y SOLDADURA - Tamaño personalizado */ height: 44px !important; /* Stroke: #FF8C00 (naranja oscuro) */ } /* ✅ CONFIRMACIÓN - INDEPENDENCIA TOTAL GARANTIZADA: 🎯 Con los cambios anteriores, ahora tienes: • Círculo 30px + Iconos variables (41px-60px) = ✅ INDEPENDIENTES • Los iconos mantienen SUS tamaños granulares • Los círculos mantienen SU tamaño global (30px) • overflow: visible permite iconos fuera del círculo • !important en controles granulares = máxima prioridad 💡 PRUEBA RÁPIDA: • Cambia .icon-wrapper a width: 100px; height: 100px; • Los iconos seguirán con sus tamaños individuales (41px-60px) • Solo el círculo de fondo será más grande */ /* 🔧 FORZADO DE ESPECIFICIDAD MÁXIMA - REGLA DE EMERGENCIA */ .services-icon-grid .service-icon-card .icon.gep-service-icon-1 { width: 60px !important; height: 60px !important; } /* ═══════════════════════════════════════════════════════════════════ 💡 EJEMPLOS PRÁCTICOS - COMBINACIONES CÍRCULO + ICONO 🎯 Para implementar: Copia y pega el código que necesites EJEMPLO 1: Círculo pequeño (30px) con icono grande (60px) .service-icon-card:nth-child(5) .icon-wrapper { width: 30px; height: 30px; } .gep-service-icon-5 { width: 60px !important; height: 60px !important; } EJEMPLO 2: Círculo grande (80px) con icono pequeño (25px) .service-icon-card:nth-child(3) .icon-wrapper { width: 80px; height: 80px; } .gep-service-icon-3 { width: 25px !important; height: 25px !important; } EJEMPLO 3: Icono que llena completamente el círculo (sin fondo) .service-icon-card:nth-child(1) .icon-wrapper { width: 50px; height: 50px; } .gep-service-icon-1 { width: 50px !important; height: 50px !important; } EJEMPLO 4: Efecto minimalista (círculo grande, icono mediano) .service-icon-card:nth-child(7) .icon-wrapper { width: 70px; height: 70px; } .gep-service-icon-7 { width: 35px !important; height: 35px !important; } ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 🎨 ICONO SVG (Estado Hover) ═══════════════════════════════════════════════════════════════════ */ .service-icon-card:hover .icon { transform: scale(1.1); /* 👈 AJUSTA: Escala del icono en hover (1.1 = 110%) */ } /* ═══════════════════════════════════════════════════════════════════ 📝 TEXTO/NOMBRE DEL SERVICIO ═══════════════════════════════════════════════════════════════════ */ .service-icon-card .service-name { font-size: 0.75rem; /* 👈 AJUSTA: Tamaño del texto (0.75rem = 12px aprox) */ font-weight: 600; /* 👈 AJUSTA: Grosor de la fuente (100-900, 600=semi-bold) */ color: rgb(48, 48, 48); /* 👈 AJUSTA: Color del texto (gris oscuro) */ margin: 0; line-height: 1.3; /* 👈 AJUSTA: Altura de línea (espaciado entre líneas de texto) */ pointer-events: none; /* 🔧 FIX CRÍTICO (2025-10-28): Mismo fix que .icon-wrapper El texto del nombre del servicio también bloqueaba los clicks. */ } .service-icon-card:hover .service-name { color: var(--gep-dark-blue); } /* Sección de servicio individual */ /* ═══════════════════════════════════════════════════════════════════ 📐 ESPACIADO ENTRE SECCIONES DE CARRUSELES 📍 LÍNEA SIGUIENTE: padding: 80px 0; Este valor controla el espacio vertical entre cada carrusel: • padding: 80px 0 = 80px arriba + 80px abajo de cada sección • TOTAL entre carruseles: 160px (80px + 80px) ⚠️ SI AL HACER CLIC EN UN ICONO SE VE EL CARRUSEL SIGUIENTE: → AUMENTA este valor (ej: 100px, 120px, 150px) ⚠️ SI QUEDA DEMASIADO ESPACIO ENTRE CARRUSELES: → DISMINUYE este valor (ej: 60px, 50px, 40px) 📍 scroll-margin-top: Espacio adicional para el navbar al hacer scroll ═══════════════════════════════════════════════════════════════════ */ .service-section { scroll-margin-top: 100px; /* 👈 Espacio para el navbar fijo */ padding: 80px 0; /* 👈 REVERTIDO - espaciado entre carruseles original • 40px = poco espacio (se ven entre sí) • 60px = espacio moderado • 80px = ACTUAL (bien separados) • 100px = muy separados • 120px = máximo recomendado */ } /* ═══════════════════════════════════════════════════════════════════ � CONTROLES GRANULARES - TEXTO DEL SERVICIO (OPCIONAL) 📝 PARA AJUSTAR EL TAMAÑO DE TEXTO DE CADA SERVICIO INDIVIDUALMENTE: • Descomenta las líneas que necesites modificar • Ajusta font-size según el largo del nombre del servicio • Los servicios con nombres más largos pueden necesitar texto más pequeño ═══════════════════════════════════════════════════════════════════ */ /* 🔧 CONTROLES GRANULARES DE TEXTO (OPCIONAL - descomenta para usar) */ /* .service-icon-card:nth-child(1) .service-name { font-size: 0.75rem; } // Operación y mantenimiento .service-icon-card:nth-child(2) .service-name { font-size: 0.73rem; } // Generación eléctrica .service-icon-card:nth-child(3) .service-name { font-size: 0.75rem; } // Unidades de bombeo .service-icon-card:nth-child(4) .service-name { font-size: 0.73rem; } // Plantas de tratamiento .service-icon-card:nth-child(5) .service-name { font-size: 0.74rem; } // Well Testing .service-icon-card:nth-child(6) .service-name { font-size: 0.72rem; } // Mantenimiento de equipos .service-icon-card:nth-child(7) .service-name { font-size: 0.75rem; } // Venta de equipos .service-icon-card:nth-child(8) .service-name { font-size: 0.77rem; } // Metrología (nombre corto) .service-icon-card:nth-child(9) .service-name { font-size: 0.70rem; } // Construcción y soldadura (nombre largo) */ /* ═══════════════════════════════════════════════════════════════════ �📱 RESPONSIVE - TABLETS (768px - 992px) ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 992px) { .service-icon-card { padding: 18px 14px; /* 👈 AUMENTADO: Más padding para iconos más grandes */ } .service-icon-card .icon-wrapper { width: 55px; /* 👈 REDUCIDO para tablets: 60px → 55px */ height: 55px; margin-bottom: 8px; } /* ⚠️ NO definir tamaño base para iconos en tablets - usar solo controles granulares */ /* Ajustes granulares para tablets (proporcionales a desktop) */ .service-icon-card .gep-service-icon-1, .gep-service-icon-1 { width: 50px !important; height: 50px !important; } /* 60px → 50px (-10px) */ .service-icon-card .gep-service-icon-2, .gep-service-icon-2 { width: 37px !important; height: 37px !important; } /* 44px → 37px (-7px) */ .service-icon-card .gep-service-icon-3, .gep-service-icon-3 { width: 34px !important; height: 34px !important; } /* 41px → 34px (-7px) */ .service-icon-card .gep-service-icon-4, .gep-service-icon-4 { width: 36px !important; height: 36px !important; } /* 43px → 36px (-7px) */ .service-icon-card .gep-service-icon-5, .gep-service-icon-5 { width: 38px !important; height: 38px !important; } /* 45px → 38px (-7px) */ .service-icon-card .gep-service-icon-6, .gep-service-icon-6 { width: 35px !important; height: 35px !important; } /* 42px → 35px (-7px) */ .service-icon-card .gep-service-icon-7, .gep-service-icon-7 { width: 34px !important; height: 34px !important; } /* 41px → 34px (-7px) */ .service-icon-card .gep-service-icon-8, .gep-service-icon-8 { width: 36px !important; height: 36px !important; } /* 43px → 36px (-7px) */ .service-icon-card .gep-service-icon-9, .gep-service-icon-9 { width: 37px !important; height: 37px !important; } /* 44px → 37px (-7px) */ } /* ═══════════════════════════════════════════════════════════════════ 📱 RESPONSIVE - MÓVILES ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .services-icon-grid { padding: 8px; } .service-icon-card { padding: 16px 12px; /* 👈 AUMENTADO: Más padding para iconos más grandes */ } .service-icon-card .icon-wrapper { width: 45px; /* 👈 AUMENTADO: 40px → 45px para iconos más grandes */ height: 45px; margin-bottom: 8px; /* 👈 AUMENTADO: 6px → 8px */ } /* ⚠️ NO definir tamaño base para iconos en móviles - usar solo controles granulares */ .service-icon-card .service-name { font-size: 0.68rem; /* 👈 AUMENTADO: 0.65rem → 0.68rem para mejor legibilidad */ line-height: 1.3; /* 👈 AUMENTADO: 1.2 → 1.3 para mejor espaciado */ } /* Ajustes granulares para móviles (proporcionales a desktop) */ .service-icon-card .gep-service-icon-1, .gep-service-icon-1 { width: 42px !important; height: 42px !important; } /* 60px → 42px (-18px) */ .service-icon-card .gep-service-icon-2, .gep-service-icon-2 { width: 30px !important; height: 30px !important; } /* 44px → 30px (-14px) */ .service-icon-card .gep-service-icon-3, .gep-service-icon-3 { width: 28px !important; height: 28px !important; } /* 41px → 28px (-13px) */ .service-icon-card .gep-service-icon-4, .gep-service-icon-4 { width: 29px !important; height: 29px !important; } /* 43px → 29px (-14px) */ .service-icon-card .gep-service-icon-5, .gep-service-icon-5 { width: 31px !important; height: 31px !important; } /* 45px → 31px (-14px) */ .service-icon-card .gep-service-icon-6, .gep-service-icon-6 { width: 28px !important; height: 28px !important; } /* 42px → 28px (-14px) */ .service-icon-card .gep-service-icon-7, .gep-service-icon-7 { width: 28px !important; height: 28px !important; } /* 41px → 28px (-13px) */ .service-icon-card .gep-service-icon-8, .gep-service-icon-8 { width: 29px !important; height: 29px !important; } /* 43px → 29px (-14px) */ .service-icon-card .gep-service-icon-9, .gep-service-icon-9 { width: 30px !important; height: 30px !important; } /* 44px → 30px (-14px) */ /* Espaciado entre carruseles en móvil (también aumentado) */ .service-section { scroll-margin-top: 80px; padding: 60px 0; /* 👈 REVERTIDO - Aumentado de 30px a 60px para móviles */ } } /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ✨ EFECTO DE BRILLO EN LOGO GIF - DESACTIVADO ║ ║ ║ ║ Para reactivar: Descomentar este bloque CSS, el script en index.html ║ ║ y restaurar las clases en el HTML del logo ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* .logo-shine-wrapper { position: relative; overflow: hidden; display: inline-block; } .logo-shine-overlay { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%, transparent 100% ); opacity: 0; pointer-events: none; z-index: 2; transition: opacity 0.3s ease; } @keyframes logo-shine-diagonal { 0% { left: -100%; opacity: 0; } 10% { opacity: 1; } 50% { left: 100%; opacity: 1; } 60% { opacity: 0; } 100% { left: 100%; opacity: 0; } } .logo-shine-wrapper.shine-active .logo-shine-overlay { animation: logo-shine-diagonal 6s ease-in-out; } */ /* ═══════════════════════════════════════════════════════════════════ 🌟 PARALLAX PARA SECCIÓN DE SERVICIOS - EXPERIMENTAL ═══════════════════════════════════════════════════════════════════ ⚠️ PARA REVERTIR: Comentar todo este bloque CSS Y remover la clase "parallax-services-section" del HTML ═══════════════════════════════════════════════════════════════════ */ .parallax-services-section { /* Configuración del parallax - Método JavaScript (ancho completo) */ position: relative; background-image: url('../images/gep/images/servicios/parallax.jpg'); /* Cambia la ruta a tu imagen */ background-size: cover; background-position: center; background-repeat: no-repeat; /* Ancho completo del navegador */ width: 100vw; margin-left: calc(-50vw + 50%); padding: 80px 0; min-height: 600px; z-index: 1; } .parallax-services-section::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.082); /* Overlay semi-transparente */ z-index: -1; } .parallax-services-section > * { position: relative; z-index: 2; /* Contenido encima del overlay */ } /* ═══════════════════════════════════════════════════════════════════ 📋 ESPACIADO ADICIONAL PARA SERVICIOS INTERCALADOS ═══════════════════════════════════════════════════════════════════ */ /* Más espaciado para elementos de lista en servicios intercalados */ .order-md-1 .d-flex.mb-3 { margin-bottom: 1.5rem !important; /* mb-4 equivalente para servicios intercalados */ } @media (max-width: 768px) { .order-md-1 .d-flex.mb-3 { margin-bottom: 1rem !important; /* Espaciado normal en móvil */ } } /* ═══════════════════════════════════════════════════════════════════ ⚠️ ELIMINADO: .item-services (duplicado) 🔧 RAZÓN: Estilo movido a gep-servicios.css para centralizar controles 📍 NUEVA UBICACIÓN: css/gep-servicios.css 💡 AHORA: Todos los estilos de círculos con checkmark están en un solo archivo ═══════════════════════════════════════════════════════════════════ */ /* Ajuste global para el scroll de todas las secciones con navbar fijo */ /* NOTA: Valores más BAJOS (incluso NEGATIVOS) = la sección sube MÁS en la pantalla */ /* NOTA: Valores más ALTOS = la sección baja MÁS en la pantalla */ section[id] { scroll-margin-top: -50px; /* ⬅️ AJUSTA AQUÍ: Reducido para que suba más */ } /* Ajuste adicional usando smooth scroll behavior */ html { scroll-behavior: auto; scroll-padding-top: -50px; /* ⬅️ AJUSTA AQUÍ: Reducido para que suba más */ } /* Ajuste específico para Sistema de Gestión - para que centre mejor sin afectar otras secciones */ #gep-sistema-gestion { scroll-margin-top: -50px; /* ⬅️ AJUSTA AQUÍ: Valores más ALTOS = sección Sistema de gestion baja más */ } /* Animación de eslabón de cadena para selector de idioma */ .chain-path-left-bottom, .chain-path-right-bottom { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.8s ease-in-out; } /* Mitades superiores con dirección invertida */ .chain-path-left-top, .chain-path-right-top { stroke-dasharray: 100; stroke-dashoffset: -100; transition: stroke-dashoffset 0.8s ease-in-out; } /* Cuando NO hay animación activa, resetear los paths */ #chain-link-left .chain-path-left-bottom, #chain-link-left .chain-path-left-top { stroke-dashoffset: 100; } #chain-link-left .chain-path-left-top { stroke-dashoffset: -100; } #chain-link-right .chain-path-right-bottom, #chain-link-right .chain-path-right-top { stroke-dashoffset: 100; } #chain-link-right .chain-path-right-top { stroke-dashoffset: -100; } /* Efecto de hover en las opciones de idioma */ .lang-option:hover { transform: scale(1.05); } /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ 📋 DOCUMENTACIÓN COMPLETA - CONTROLES GRANULARES DE ICONOS GRID 3x3 ║ ║ ║ ║ 🎯 UBICACIÓN: Grid de servicios en la sección parallax principal ║ ║ 📁 ARCHIVO: /css/gep-custom.css (líneas 630-890) ║ ║ 🔗 HTML: index.html (líneas 990-1100) ║ ║ ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ 🎨 ESTRUCTURA DEL GRID 3x3: ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ ║ ║ ┌─────────────────┬─────────────────┬─────────────────┐ ║ ║ │ SERVICIO 1 │ SERVICIO 2 │ SERVICIO 3 │ ║ ║ │ Operación y │ Generación │ Unidades de │ ║ ║ │ Mantenimiento │ Eléctrica │ Bombeo │ ║ ║ │ 🔧 42px │ ⚡ 44px │ 💧 41px │ ║ ║ │ #ee855f │ #f3e072 │ #8fe1fc │ ║ ║ └─────────────────┼─────────────────┼─────────────────┤ ║ ║ │ SERVICIO 4 │ SERVICIO 5 │ SERVICIO 6 │ ║ ║ │ Plantas de │ Well Testing │ Mantenimiento │ ║ ║ │ Tratamiento │ Pruebas │ de Equipos │ ║ ║ │ 🌱 43px │ 🔬 45px │ 🔩 42px │ ║ ║ │ #32CD32 │ #c396eefa │ #DC143C │ ║ ║ └─────────────────┼─────────────────┼─────────────────┤ ║ ║ │ SERVICIO 7 │ SERVICIO 8 │ SERVICIO 9 │ ║ ║ │ Venta de │ Metrología │ Construcción │ ║ ║ │ Equipos │ │ y Soldadura │ ║ ║ │ 🛒 41px │ 📏 43px │ 🏗️ 44px │ ║ ║ │ #20B2AA │ #4169E1 │ #FF8C00 │ ║ ║ └─────────────────┴─────────────────┴─────────────────┘ ║ ║ ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ 🔧 CONTROLES PRINCIPALES: ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ ║ ║ 📐 TAMAÑOS DE ICONOS (Desktop > 992px): ║ ║ .gep-service-icon-1 { width: 42px; height: 42px; } 👈 Operación ║ ║ .gep-service-icon-2 { width: 44px; height: 44px; } 👈 Generación ║ ║ .gep-service-icon-3 { width: 41px; height: 41px; } 👈 Bombeo ║ ║ .gep-service-icon-4 { width: 43px; height: 43px; } 👈 Tratamiento ║ ║ .gep-service-icon-5 { width: 45px; height: 45px; } 👈 Well Testing (más grande) ║ ║ .gep-service-icon-6 { width: 42px; height: 42px; } 👈 Mantenimiento ║ ║ .gep-service-icon-7 { width: 41px; height: 41px; } 👈 Venta ║ ║ .gep-service-icon-8 { width: 43px; height: 43px; } 👈 Metrología ║ ║ .gep-service-icon-9 { width: 44px; height: 44px; } 👈 Construcción ║ ║ ║ ║ 📱 TAMAÑOS DE ICONOS (Tablet 768-992px): ║ ║ Todos reducidos proporcionalmente (-4px del tamaño desktop) ║ ║ ║ ║ 📱 TAMAÑOS DE ICONOS (Móvil <768px): ║ ║ Todos reducidos proporcionalmente (-10px del tamaño desktop) ║ ║ ║ ║ ⭕ CÍRCULOS CONTENEDORES: ║ ║ Desktop: 60px x 60px (base para todos) ║ ║ Tablet: 55px x 55px ║ ║ Móvil: 45px x 45px ║ ║ ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ 🎨 COLORES DE ICONOS: ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ ║ ║ Los colores se definen en /css/gep-theme.css (líneas 2177-2209): ║ ║ • Servicio 1: #ee855f (naranja suave) ║ ║ • Servicio 2: #f3e072 (amarillo) + stroke-width: 1px ║ ║ • Servicio 3: #8fe1fc (azul cielo) ║ ║ • Servicio 4: #32CD32 (verde lima) ║ ║ • Servicio 5: #c396eefa (púrpura con transparencia) ║ ║ • Servicio 6: #DC143C (rojo carmesí) ║ ║ • Servicio 7: #20B2AA (verde azulado) ║ ║ • Servicio 8: #4169E1 (azul real) ║ ║ • Servicio 9: #FF8C00 (naranja oscuro) ║ ║ ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ 📝 INSTRUCCIONES DE MODIFICACIÓN: ║ ║ ═══════════════════════════════════════════════════════════════════════════════════════════ ║ ║ ║ ║ 🔹 CAMBIAR TAMAÑO DE UN ICONO: ║ ║ 1. Buscar .gep-service-icon-X (donde X = número 1-9) ║ ║ 2. Modificar width y height (ejemplo: 50px para más grande) ║ ║ 3. Mantener width = height para proporción cuadrada ║ ║ ║ ║ 🔹 CAMBIAR TAMAÑO DEL CÍRCULO (INDEPENDIENTE): ║ ║ 1. Modificar .icon-wrapper width y height ║ ║ 2. Para control individual: descomenta las líneas nth-child comentadas ║ ║ 3. ⚠️ NO necesita ser más grande que el icono (overflow: visible) ║ ║ ║ ║ 🔹 CAMBIAR TAMAÑO DE ICONOS (INDEPENDIENTE): ║ ║ 1. Modificar .gep-service-icon-X width y height ║ ║ 2. Puede ser MÁS GRANDE o MÁS PEQUEÑO que el círculo ║ ║ 3. Usar !important para garantizar prioridad ║ ║ ║ ║ 🔹 COMBINACIONES CREATIVAS: ║ ║ • Círculo pequeño + Icono grande = Efecto desborde ║ ║ • Círculo grande + Icono pequeño = Efecto minimalista ║ ║ • Círculo = Icono = Sin fondo visible ║ ║ ║ ║ 🔹 CAMBIAR TAMAÑO DEL TEXTO: ║ ║ 1. Descomenta los controles de .service-name ║ ║ 2. Ajusta font-size según el largo del nombre ║ ║ ║ ║ 🔹 CAMBIAR COLORES: ║ ║ 1. Ir a /css/gep-theme.css líneas 2177-2209 ║ ║ 2. Modificar el valor stroke de cada .gep-service-icon-X ║ ║ ║ ║ ⚠️ CONTROL INDEPENDIENTE: Círculos e iconos son completamente independientes ║ ║ • overflow: visible permite iconos fuera del círculo ║ ║ • !important garantiza que los controles granulares tengan prioridad ║ ║ ║ ║ 📄 ARCHIVOS RELACIONADOS: ║ ║ • /css/gep-theme.css: Colores de iconos ║ ║ • /js/gep-services-scroll.js: Navegación con scroll instantáneo ║ ║ • /index.html: Estructura HTML del grid 3x3 ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ✅ ESTILOS DE ITEMS DE SERVICIO - CÍRCULOS CHECKMARK Y TEXTO ║ ║ ║ ║ Controla la apariencia de los círculos verdes con checkmarks y el texto descriptivo ║ ║ que aparece en la lista de características de cada servicio ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 📦 COMPONENTES: ║ ║ ║ ║ 1. .item-services, .servicio-item-icon ║ ║ • Círculo verde con ícono de check ✓ ║ ║ • Tamaño: 22px x 22px (círculo perfecto) ║ ║ • Color: #28a745 (verde Bootstrap "success") ║ ║ • Ícono interno: 0.6rem (~9.6px) ║ ║ ║ ║ 2. .servicio-item-text, h6.fw.mb-0 ║ ║ • Texto descriptivo de la característica ║ ║ • Color: rgb(48, 48, 48) - gris oscuro ║ ║ • Tamaño: 0.9rem (~14.4px) ║ ║ • Flex: 1 (ocupa todo el ancho disponible) ║ ║ ║ ║ 3. .servicio-item-container ║ ║ • Contenedor flex que alinea círculo + texto ║ ║ • display: flex (horizontal) ║ ║ • align-items: flex-start (alinea por arriba) ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 🔧 CÓMO PERSONALIZAR: ║ ║ ║ ║ ╔═══════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ CAMBIAR TAMAÑO DE CÍRCULOS (GLOBAL - TODOS LOS SERVICIOS) ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════════════╝ ║ ║ ║ ║ Modifica las propiedades width, height y font-size: ║ ║ ║ ║ .item-services, .servicio-item-icon { ║ ║ width: 26px !important; /* 👈 Más grande: 26px, 28px, 30px ║ ║ height: 26px !important; /* 👈 Mismo valor que width ║ ║ font-size: 0.7rem !important; /* 👈 Ícono check más grande ║ ║ } ║ ║ ║ ║ ╔═══════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ CAMBIAR COLOR DE CÍRCULOS (GLOBAL - TODOS LOS SERVICIOS) ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════════════╝ ║ ║ ║ ║ Modifica la propiedad background-color: ║ ║ ║ ║ .item-services, .servicio-item-icon { ║ ║ background-color: #007bff !important; /* 👈 Azul ║ ║ background-color: #dc3545 !important; /* 👈 Rojo ║ ║ background-color: #ffc107 !important; /* 👈 Amarillo ║ ║ } ║ ║ ║ ║ ╔═══════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ CAMBIAR TAMAÑO DE TEXTO (GLOBAL - TODOS LOS SERVICIOS) ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════════════╝ ║ ║ ║ ║ Modifica la propiedad font-size: ║ ║ ║ ║ .servicio-item-text, h6.fw.mb-0 { ║ ║ font-size: 0.95rem !important; /* 👈 Más grande ║ ║ font-size: 0.85rem !important; /* 👈 Más pequeño ║ ║ } ║ ║ ║ ║ ╔═══════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ PERSONALIZAR UN SERVICIO ESPECÍFICO (GRANULAR) ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════════════╝ ║ ║ ║ ║ Ejemplo: Servicio 3 con círculos azules más grandes: ║ ║ ║ ║ .text-servicio-3 .item-services { ║ ║ width: 28px !important; ║ ║ height: 28px !important; ║ ║ background-color: #007bff !important; ║ ║ font-size: 0.7rem !important; ║ ║ } ║ ║ ║ ║ .text-servicio-3 .servicio-item-text { ║ ║ font-size: 0.95rem !important; ║ ║ color: #0066cc !important; ║ ║ } ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 📱 RESPONSIVE: ║ ║ ║ ║ Los estilos se ajustan automáticamente en móvil/tablet (ver abajo en @media queries) ║ ║ • Móvil: Círculos 20px, texto 0.85rem ║ ║ • Tablet: Tamaños intermedios ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* ───────────────────────────────────────────────────────────────────────────────────────────── ⚪ CÍRCULO CON CHECKMARK (✓) - CONTROLES GLOBALES PARA TODOS LOS SERVICIOS ───────────────────────────────────────────────────────────────────────────────────────────── */ .item-services, .servicio-item-icon { width: 22px !important; /* 👈 ANCHO: Tamaño horizontal del círculo */ height: 22px !important; /* 👈 ALTO: Tamaño vertical del círculo */ font-size: 0.6rem !important; /* 👈 ÍCONO: Tamaño del ✓ dentro del círculo (~9.6px) */ display: inline-flex !important; /* 👈 LAYOUT: Flexbox inline para centrar contenido */ align-items: center !important; /* 👈 CENTRADO VERTICAL: Del ícono dentro del círculo */ justify-content: center !important; /* 👈 CENTRADO HORIZONTAL: Del ícono dentro del círculo */ border-radius: 50% !important; /* 👈 FORMA: 50% = círculo perfecto */ margin-right: 8px !important; /* 👈 EJE X: Espacio entre círculo y texto (8px derecha) */ flex-shrink: 0 !important; /* 👈 PROTECCIÓN: No permitir que el círculo se encoja */ background-color: #28a745 !important; /* 👈 COLOR: Verde Bootstrap success */ border: none !important; /* 👈 SIN BORDE: Apariencia limpia */ } /* ───────────────────────────────────────────────────────────────────────────────────────────── 📝 TEXTO DE LA CARACTERÍSTICA - CONTROLES GLOBALES PARA TODOS LOS SERVICIOS QUE TIENE EN CIRCULO CON EL CHULITO ───────────────────────────────────────────────────────────────────────────────────────────── */ .servicio-item-text, h6.fw.mb-0 { color: rgb(26, 25, 25) !important; /* 👈 COLOR: Gris oscuro profesional AFECTA TODOS LOS SERVICIOS (#303030) */ font-size: 0.9rem !important; /* 👈 TAMAÑO: Texto ligeramente más pequeño (~14.4px) */ flex: 1; /* 👈 EXPANSIÓN: Ocupa todo el ancho disponible */ margin-bottom: 0 !important; /* �� SIN MARGEN: Bootstrap lo añade, lo eliminamos */ } /* ───────────────────────────────────────────────────────────────────────────────────────────── 🔧 CONTENEDOR FLEX (Alineación de círculo + texto) ───────────────────────────────────────────────────────────────────────────────────────────── */ .servicio-item-container { display: flex; /* 👈 LAYOUT: Flexbox horizontal (círculo a la izq, texto a la der) */ align-items: flex-start; /* 👈 ALINEACIÓN: Por arriba (mejor para texto multilínea) */ margin-bottom: 10px; /* 👈 EJE Y: Espacio entre cada item (10px abajo) */ } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 📱 RESPONSIVE - MÓVIL (0px - 768px) ═══════════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Círculos más pequeños en móvil */ .servicio-item-icon { width: 20px !important; height: 20px !important; font-size: 0.55rem !important; } /* Texto más compacto en móvil */ .servicio-item-text { font-size: 0.85rem !important; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 💻 RESPONSIVE - TABLET (769px - 1024px) ═══════════════════════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) and (max-width: 1024px) { /* Tamaños intermedios para tablet */ .servicio-item-icon { width: 21px !important; height: 21px !important; font-size: 0.58rem !important; } .servicio-item-text { font-size: 0.88rem !important; } } /* ╔════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ 📏 CONTROLES GRANULARES DE TÍTULOS Y BARRITAS VERDES - SERVICIOS 1-9 ║ ║ ║ ║ Controla independientemente el tamaño, posición y apariencia de: ║ ║ • La barrita verde vertical (.gep-title-line) ║ ║ • El título del servicio (.servicio-title y span[data-translate]) ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 📦 ESTRUCTURA HTML DE CADA TÍTULO: ║ ║ ║ ║

║ ║ 👈 BARRITA VERDE ║ ║ 👈 TEXTO DEL TÍTULO ║ ║ Operación y mantenimiento... ║ ║ ║ ║

║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 🎨 CONTROLES DISPONIBLES POR SERVICIO: ║ ║ ║ ║ 🟢 BARRITA VERDE (.gep-title-line): ║ ║ • width: Ancho de la barrita (eje X) - Default: 4px ║ ║ • height: Altura de la barrita (eje Y) - Default: 100% (toda la altura del título) ║ ║ • left: Posición horizontal (eje X desde la izquierda) - Default: 0 ║ ║ • top: Posición vertical (eje Y desde arriba) - Default: 0 ║ ║ • background-color: Color de la barrita - Default: var(--gep-yellow) (amarillo GEP) ║ ║ ║ ║ 📝 TÍTULO (.servicio-title y span[data-translate]): ║ ║ • font-size: Tamaño del texto - Default: Varía (1.2rem - 1.7rem) ║ ║ • color: Color del texto - Default: heredado ║ ║ • padding-left: Espacio entre barrita y texto (eje X) - Default: heredado ║ ║ • margin-top: Posición vertical del título completo (eje Y) ║ ║ • margin-left: Posición horizontal del título completo (eje X) ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ 💡 EJEMPLOS DE PERSONALIZACIÓN: ║ ║ ║ ║ 🔹 BARRITA MÁS ANCHA Y ALTA EN SERVICIO 1: ║ ║ ║ ║ .text-servicio-1 .gep-title-line { ║ ║ width: 6px !important; /* Más gruesa ║ ║ height: 120% !important; /* Más alta que el título ║ ║ background-color: #00ff00 !important; /* Verde brillante ║ ║ } ║ ║ ║ ║ 🔹 TÍTULO MÁS GRANDE CON MÁS ESPACIO EN SERVICIO 2: ║ ║ ║ ║ .text-servicio-2 .servicio-title { ║ ║ font-size: 2rem !important; /* Título más grande ║ ║ padding-left: 20px !important; /* Más espacio entre barrita y texto ║ ║ } ║ ║ ║ ║ 🔹 TÍTULO Y BARRITA CON COLORES PERSONALIZADOS EN SERVICIO 3: ║ ║ ║ ║ .text-servicio-3 .gep-title-line { ║ ║ background-color: #ff0000 !important; /* Barrita roja ║ ║ width: 8px !important; ║ ║ } ║ ║ ║ ║ .text-servicio-3 .servicio-title span[data-translate] { ║ ║ color: #0066cc !important; /* Texto azul ║ ║ font-size: 1.5rem !important; /* Texto mediano ║ ║ } ║ ║ ║ ║ 🔹 MOVER TODA LA SECCIÓN DE TÍTULO (BARRITA + TEXTO) EN SERVICIO 4: ║ ║ ║ ║ .text-servicio-4 .servicio-title { ║ ║ margin-top: 20px !important; /* Baja el título 20px ║ ║ margin-left: 30px !important; /* Mueve el título 30px a la derecha ║ ║ } ║ ║ ║ ║ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ║ ║ ║ ║ ⚙️ CONTROLES GLOBALES BASE: ║ ║ ║ ║ Los siguientes estilos están definidos en /css/gep-theme.css línea ~1573: ║ ║ ║ ║ .gep-title-line { ║ ║ position: absolute; ║ ║ left: 0; ║ ║ top: 0; ║ ║ width: 4px; 👈 ANCHO BASE (eje X) ║ ║ height: 100%; 👈 ALTURA BASE (eje Y) - 100% de la altura del h2 ║ ║ background-color: var(--gep-yellow); 👈 COLOR BASE (amarillo GEP) ║ ║ } ║ ║ ║ ║ ⚠️ IMPORTANTE: Para sobreescribir estos valores, usa !important en tus reglas específicas ║ ║ ║ ╚════════════════════════════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 1: Operación y mantenimiento integral de facilidades ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 1 */ .text-servicio-1 .gep-title-line { width: 4px !important; /* 👈 EJE X (ANCHO): Grosor de la barrita */ height: 100% !important; /* 👈 EJE Y (ALTURA): 100% = altura completa del título */ left: 0px !important; /* 👈 EJE X: Posición desde la izquierda */ top: 0px !important; /* 👈 EJE Y: Posición desde arriba */ background-color: var(--gep-yellow) !important; /* 👈 COLOR: Amarillo GEP por defecto */ } /* 📝 Título del Servicio 1 */ .text-servicio-1 .servicio-title { font-size: 1.3rem !important; /* 👈 TAMAÑO: Tamaño de la barrita verde */ padding-left: 15px !important; /* 👈 EJE X: Espacio entre barrita y texto */ margin-top: 7px !important; /* 👈 EJE Y: Mover título arriba/abajo */ margin-left: 0px !important; /* 👈 EJE X: Mover título izquierda/derecha */ } /* 📝 Texto interno del título del Servicio 1 */ .text-servicio-1 .servicio-title span[data-translate] { font-size: 1.6rem !important; /* 👈 TAMAÑO: Tamaño del texto del título */ color: inherit !important; /* 👈 COLOR: Hereda el color del padre o especifica uno */ } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 2: Suministro y operación de generación eléctrica ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 2 */ .text-servicio-2 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 2 */ .text-servicio-2 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 42px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 2 */ .text-servicio-2 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 3: Suministro de unidades de bombeo ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 3 */ .text-servicio-3 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 3 */ .text-servicio-3 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 25px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 3 */ .text-servicio-3 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 4: Plantas de tratamiento de agua ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 4 */ .text-servicio-4 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 4 */ .text-servicio-4 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 10px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 4 */ .text-servicio-4 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 5: Well Testing - Pruebas iniciales y extensas ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 5 */ .text-servicio-5 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 5 */ .text-servicio-5 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 60px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 5 */ .text-servicio-5 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 6: Mantenimiento mayor y menor de equipos ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 6 */ .text-servicio-6 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 6 */ .text-servicio-6 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 55px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 6 */ .text-servicio-6 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 7: Venta de equipos y repuestos ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 7 */ .text-servicio-7 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 7 */ .text-servicio-7 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 20px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 7 */ .text-servicio-7 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 8: Metrología ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 8 */ .text-servicio-8 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 8 */ .text-servicio-8 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 5px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 8 */ .text-servicio-8 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 9: Construcción y montaje de facilidades - soldadura ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 🟢 Barrita verde del Servicio 9 */ .text-servicio-9 .gep-title-line { width: 4px !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: var(--gep-yellow) !important; } /* 📝 Título del Servicio 9 */ .text-servicio-9 .servicio-title { font-size: 1.2rem !important; padding-left: 15px !important; margin-top: 45px !important; margin-left: 0px !important; } /* 📝 Texto interno del título del Servicio 9 */ .text-servicio-9 .servicio-title span[data-translate] { font-size: 1.7rem !important; color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 📱 RESPONSIVE - AJUSTES AUTOMÁTICOS PARA MÓVIL Y TABLET Los controles específicos arriba tienen prioridad gracias a !important. Estas reglas solo se aplican si NO has personalizado un servicio específico. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Barrita más delgada en móvil */ .gep-title-line { width: 3px; } /* Títulos más pequeños en móvil */ .servicio-title { font-size: 1rem !important; } .servicio-title span[data-translate] { font-size: 1rem !important; } } @media (min-width: 769px) and (max-width: 1024px) { /* Tamaños intermedios para tablet */ .servicio-title { font-size: 1.1rem !important; } .servicio-title span[data-translate] { font-size: 1.1rem !important; } }