/* ═══════════════════════════════════════════════════════════════════
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)
═══════════════════════════════════════════════════════════════════ */
.service-icon-card .icon-wrapper {
width: 50px; /* 👈 AJUSTA: Ancho del círculo */
height: 50px; /* 👈 AJUSTA: Alto del círculo (igual al ancho para círculo perfecto) */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px; /* 👈 AJUSTA: Espacio entre el círculo y el texto */
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;
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 */
}
/* ═══════════════════════════════════════════════════════════════════
⭕ 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
═══════════════════════════════════════════════════════════════════ */
.service-icon-card .icon {
width: 32px; /* 👈 AJUSTA: Ancho del icono SVG */
height: 32px; /* 👈 AJUSTA: Alto del icono SVG */
color: var(--gep-dark-blue); /* 👈 Color de los iconos SVG */
fill: currentColor; /* 👈 Asegura que el SVG use el color definido */
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. */
}
/* ═══════════════════════════════════════════════════════════════════
🎨 ICONO SVG (Estado Hover)
═══════════════════════════════════════════════════════════════════ */
.service-icon-card:hover .icon {
color: var(--gep-cyan); /* 👈 Color cyan al hacer hover */
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 */
}
/* ═══════════════════════════════════════════════════════════════════
📱 RESPONSIVE - TABLETS
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
.service-icon-card {
padding: 16px 12px;
}
.service-icon-card .icon-wrapper {
width: 45px;
height: 45px;
}
.service-icon-card .icon {
width: 30px;
height: 30px;
}
.service-icon-card .service-name {
font-size: 0.7rem;
}
}
/* ═══════════════════════════════════════════════════════════════════
📱 RESPONSIVE - MÓVILES
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.services-icon-grid {
padding: 8px;
}
.service-icon-card {
padding: 14px 10px;
}
.service-icon-card .icon-wrapper {
width: 40px;
height: 40px;
margin-bottom: 6px;
}
.service-icon-card .icon {
width: 26px;
height: 26px;
}
.service-icon-card .service-name {
font-size: 0.65rem;
line-height: 1.2;
}
/* 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 */
}
}
/* ═══════════════════════════════════════════════════════════════════
✅ ESFERITAS VERDES (ICONOS DE CHECK)
═══════════════════════════════════════════════════════════════════ */
.item-services {
background-color: #28a745 !important; /* Verde de Bootstrap success */
border: none;
}
/* 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);
}