/* ═══════════════════════════════════════════════════════════════════
   🎨 FRANJA DESDE MARCO DEL MONITOR HASTA BORDE DERECHO DEL CARRUSEL

   📏 FUNCIONAMIENTO:
   • Empieza desde el borde izquierdo absoluto del monitor/ventana
   • Termina exactamente donde termina el carrusel
   • Pasa DETRÁS del carrusel (z-index negativo)
   • Personalización granular: color RGB, posición X/Y, tamaños, gradiente
   
   🎛️ VARIABLES DE PERSONALIZACIÓN GRANULAR:
   • --stripe-color-r/g/b: Componentes RGB del color (0-255)
   • --stripe-opacity-start/end: Opacidades inicial y final (0.0-1.0)
   • --stripe-position-x/y: Desplazamiento horizontal y vertical (px)
   • --stripe-height-custom: Altura fija personalizable (en píxeles)
   • --stripe-fade-start/mid: Control del gradiente de desvanecimiento (%)
   • --stripe-direction: Dirección del gradiente (to right / to left)
   • --stripe-flip: Inversión horizontal (1 = normal, -1 = invertido)
   ═══════════════════════════════════════════════════════════════════ */



/* Contenedor debe ser relativo para que la franja se posicione correctamente */
.service-section-with-stripe {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   🎨 COLORES PREDEFINIDOS (FÁCIL PERSONALIZACIÓN)
   ═══════════════════════════════════════════════════════════════════ */

/* 🔵 Azul (por defecto) */
.stripe-blue {
  --stripe-color-r: 0;
  --stripe-color-g: 123; 
  --stripe-color-b: 255;
}

/* 🟢 Verde */
.stripe-green {
  --stripe-color-r: 40;
  --stripe-color-g: 167;
  --stripe-color-b: 69;
}

/* 🟠 Naranja */
.stripe-orange {
  --stripe-color-r: 255;
  --stripe-color-g: 107;
  --stripe-color-b: 53;
}

/* 🟣 Púrpura */
.stripe-purple {
  --stripe-color-r: 111;
  --stripe-color-g: 66;
  --stripe-color-b: 193;
}

/* 🔴 Rojo */
.stripe-red {
  --stripe-color-r: 220;
  --stripe-color-g: 53;
  --stripe-color-b: 69;
}

/* 🟡 Amarillo */
.stripe-yellow {
  --stripe-color-r: 255;
  --stripe-color-g: 193;
  --stripe-color-b: 7;
}

/* 🎨 Color GEP (dorado) */
.stripe-gep {
  --stripe-color-r: 255;
  --stripe-color-g: 215;
  --stripe-color-b: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   📐 ALTURAS PERSONALIZABLES
   ═══════════════════════════════════════════════════════════════════ */

/* Alturas fijas personalizables (independientes del carrusel) */
.stripe-tiny {
  --stripe-height-custom: 100px;     /* Muy pequeña */
}

.stripe-small {
  --stripe-height-custom: 150px;     /* Pequeña */
}

.stripe-medium {
  --stripe-height-custom: 200px;     /* Mediana (por defecto) */
}

.stripe-large {
  --stripe-height-custom: 300px;     /* Grande */
}

.stripe-huge {
  --stripe-height-custom: 400px;     /* Muy grande */
}

.stripe-full {
  --stripe-height-custom: 500px;     /* Máxima */
}

/* 📏 Alturas específicas comunes */
.stripe-100 { --stripe-height-custom: 100px; }
.stripe-150 { --stripe-height-custom: 150px; }
.stripe-200 { --stripe-height-custom: 200px; }
.stripe-250 { --stripe-height-custom: 250px; }
.stripe-300 { --stripe-height-custom: 300px; }
.stripe-350 { --stripe-height-custom: 350px; }
.stripe-400 { --stripe-height-custom: 400px; }

/* ═══════════════════════════════════════════════════════════════════
   🌟 INTENSIDADES
   ═══════════════════════════════════════════════════════════════════ */

.stripe-subtle {
  --stripe-opacity-start: 0.4;
}

.stripe-normal {
  --stripe-opacity-start: 0.7;
}

.stripe-strong {
  --stripe-opacity-start: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════
   � DIRECCIONES Y ROTACIONES
   ═══════════════════════════════════════════════════════════════════ */

/* 🔄 Direcciones del gradiente */
.stripe-left-to-right {
  --stripe-direction: to right;       /* Gradiente de izquierda a derecha (por defecto) */
}

.stripe-right-to-left {
  --stripe-direction: to left;        /* Gradiente de derecha a izquierda */
}

/* 🪞 Inversión horizontal */
.stripe-normal-flip {
  --stripe-flip: 1;                   /* Sin inversión (por defecto) */
}

.stripe-flipped {
  --stripe-flip: -1;                  /* Invertido horizontalmente */
}

/* 🎯 Combinaciones comunes */
.stripe-fade-from-left {
  --stripe-direction: to right;       /* Sólido izquierda → transparente derecha */
  --stripe-flip: 1;
}

.stripe-fade-from-right {
  --stripe-direction: to left;        /* Sólido derecha → transparente izquierda */
  --stripe-flip: 1;
}

.stripe-fade-to-center {
  --stripe-direction: to right;       /* Gradiente hacia el centro */
  --stripe-flip: -1;
}

/* ═══════════════════════════════════════════════════════════════════
   �📍 POSICIONES
   ═══════════════════════════════════════════════════════════════════ */

/* Posiciones verticales */
.stripe-top {
  --stripe-position-y: -20px;       /* 20px arriba del carrusel */
}

.stripe-middle {
  --stripe-position-y: 0px;         /* Alineada con el carrusel */
}

.stripe-bottom {
  --stripe-position-y: 20px;        /* 20px abajo del carrusel */
}

/* Posiciones horizontales (ajuste fino) */
.stripe-left {
  --stripe-position-x: 0px;         /* Desde el borde izquierdo exacto */
}

.stripe-left-offset {
  --stripe-position-x: 50px;        /* 50px desde el borde izquierdo */
}

.stripe-right-extend {
  --stripe-position-x: -50px;       /* Extiende 50px más a la izquierda */
}

/* ═══════════════════════════════════════════════════════════════════
   📱 AJUSTES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🚫 OCULTAR FRANJAS EN TODOS LOS DISPOSITIVOS RESPONSIVE
   Las franjas decorativas solo se muestran en escritorio (>992px)
   En responsive: NO franjas + texto completo visible sin recortes
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablets y dispositivos medianos (≤992px) */
@media (max-width: 992px) {
  .page-stripe {
    display: none !important;  /* 🚫 Ocultar franjas decorativas */
  }
  
  .service-section-with-stripe {
    overflow: visible !important;  /* ✅ Permitir que el texto se vea completo */
    min-height: auto !important;   /* ✅ Altura automática según contenido */
  }
}

/* Tablets pequeñas (≤768px) */
@media (max-width: 768px) {
  .page-stripe {
    display: none !important;  /* 🚫 Ocultar franjas decorativas */
  }
  
  .service-section-with-stripe {
    overflow: visible !important;  /* ✅ Permitir que el texto se vea completo */
    min-height: auto !important;   /* ✅ Altura automática según contenido */
  }
}

/* Móviles (≤480px) */
@media (max-width: 480px) {
  .page-stripe {
    display: none !important;  /* 🚫 Ocultar franjas decorativas */
  }
  
  .service-section-with-stripe {
    overflow: visible !important;  /* ✅ Permitir que el texto se vea completo */
    min-height: auto !important;   /* ✅ Altura automática según contenido */
  }
}

/* ═══════════════════════════════════════════════════════════════════
   🎯 FRANJAS ESPECÍFICAS PARA CADA SERVICIO
   
   📋 SISTEMA DE INTERCALADO:
   • SERVICIOS NORMALES (1, 3, 5, 7, 9): Carrusel a la izquierda
     └─ Franja viene desde borde izquierdo hasta borde derecho del carrusel
   
   • SERVICIOS INTERCALADOS (2, 4, 6, 8): Carrusel a la derecha  
     └─ Franja viene desde borde izquierdo hasta más allá del carrusel
   
   🎨 COLORES DIFERENCIADOS POR SERVICIO:
   • Servicio 1: Azul corporativo (Operación y mantenimiento)
   • Servicio 2: Verde energía (Generación eléctrica)
   • Servicio 3: Naranja industrial (Unidades de bombeo)
   • Servicio 4: Cyan agua (Plantas de tratamiento)  
   • Servicio 5: Dorado premium (Well Testing)
   • Servicio 6: Púrpura técnico (Mantenimiento equipos)
   • Servicio 7: Rojo comercial (Venta equipos)
   • Servicio 8: Magenta precisión (Metrología)
   • Servicio 9: Verde construcción (Construcción y soldadura)
   ═══════════════════════════════════════════════════════════════════ */

/* Servicio 1: Operación y mantenimiento (Azul corporativo) */   
.page-stripe {
  /* 🎨 VARIABLES DE PERSONALIZACIÓN GRANULAR CON RGB SEPARADO */
  --stripe-color-r: 0;               /* 🎨 Componente Rojo (0-255) */
  --stripe-color-g: 123;             /* 🎨 Componente Verde (0-255) */
  --stripe-color-b: 255;             /* 🎨 Componente Azul (0-255) */
  --stripe-opacity-start: 0.8;       /* 🎨 Opacidad inicial (0.0-1.0) */
  --stripe-opacity-mid1: 0.6;        /* 🎨 Opacidad intermedia 1 */
  --stripe-opacity-mid2: 0.35;       /* 🎨 Opacidad intermedia 2 */
  --stripe-opacity-mid3: 0.15;       /* 🎨 Opacidad intermedia 3 */
  --stripe-opacity-end: 0.0;         /* 🎨 Opacidad final (transparente) */
  --stripe-position-x: 0px;          /* ↔️ Desplazamiento horizontal */
  --stripe-position-y: 100px;        /* ↕️ Desplazamiento vertical */
  --stripe-height-custom: 500px;     /* 📐 Altura fija personalizable (en píxeles) */
  --stripe-fade-start: 70%;          /* 🎨 Inicio del desvanecimiento (%) */
  --stripe-fade-mid: 90%;            /* 🎨 Medio del desvanecimiento (%) */
  --stripe-direction: to right;      /* 🔄 Dirección del gradiente (to right / to left) */
  --stripe-flip: 1;                  /* 🪞 Inversión horizontal (1 = normal, -1 = invertido) */

  /* POSICIONAMIENTO PERSONALIZABLE DESDE EL BORDE DEL MONITOR */
  position: absolute;
  top: var(--stripe-position-y);
  left: calc(-50vw - 50% + var(--stripe-position-x));   /* Borde izquierdo + desplazamiento personalizable */

  /* Ancho: desde borde monitor hasta el final del carrusel */
  width: calc(50vw + 50% + 100%);   /* Llega hasta el borde derecho del carrusel */

  /* Altura: personalizable e independiente del carrusel */
  height: var(--stripe-height-custom);

  /* Gradiente personalizable con desvanecimiento suave usando RGB separado */
  background: linear-gradient(
    var(--stripe-direction),
    rgba(var(--stripe-color-r), var(--stripe-color-g), var(--stripe-color-b), var(--stripe-opacity-start)) 0%,
    rgba(var(--stripe-color-r), var(--stripe-color-g), var(--stripe-color-b), var(--stripe-opacity-start)) 20%,
    rgba(var(--stripe-color-r), var(--stripe-color-g), var(--stripe-color-b), var(--stripe-opacity-mid1)) 40%,
    rgba(var(--stripe-color-r), var(--stripe-color-g), var(--stripe-color-b), var(--stripe-opacity-mid2)) var(--stripe-fade-start),
    rgba(var(--stripe-color-r), var(--stripe-color-g), var(--stripe-color-b), var(--stripe-opacity-mid3)) var(--stripe-fade-mid),
    rgba(var(--stripe-color-r), var(--stripe-color-g), var(--stripe-color-b), var(--stripe-opacity-end)) 100%
  );

  /* Inversión horizontal opcional */
  transform: scaleX(var(--stripe-flip));

  /* Pasar DETRÁS del carrusel */
  z-index: -1;

  /* Transición suave */
  transition: all 0.3s ease-in-out;

  /* No interferir con clics */
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 FRANJAS ESPECÍFICAS PARA CADA SERVICIO (RGB SEPARADO)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🟢 SERVICIO 2: SUMINISTRO Y OPERACIÓN DE GENERACIÓN ELÉCTRICA
   Color: Verde oscuro corporativo | Layout: Intercalado (carrusel derecha)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-2 {
  --stripe-color-r: 34;              /* Verde oscuro corporativo */
  --stripe-color-g: 139;
  --stripe-color-b: 34;
  --stripe-height-custom: 500px;
  --stripe-position-x: 1300px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.7;
  --stripe-direction: to left;
}

/* Layout intercalado: ancho extendido para llegar más allá del carrusel */
.stripe-servicio-2.page-stripe {
  width: calc(50vw + 80%);           /* Más ancho para layout intercalado */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔵 SERVICIO 3: SUMINISTRO DE UNIDADES DE BOMBEO
   Color: Azul cielo corporativo | Layout: Normal (carrusel izquierda)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-3 {
  --stripe-color-r: 135;
  --stripe-color-g: 206;
  --stripe-color-b: 250;
  --stripe-height-custom: 500px;
  --stripe-position-x: 30px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.75;
  --stripe-direction: to right;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔵 SERVICIO 4: PLANTAS DE TRATAMIENTO DE AGUA
   Color: Azul cielo corporativo | Layout: Intercalado (carrusel derecha)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-4 {
  --stripe-color-r: 135;
  --stripe-color-g: 206;
  --stripe-color-b: 250;
  --stripe-height-custom: 500px;
  --stripe-position-x: 1300px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.8;
  --stripe-direction: to left;
}

/* Layout intercalado: ancho extendido */
.stripe-servicio-4.page-stripe {
  width: calc(50vw + 85%);           /* Ancho extendido para intercalado */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🟢 SERVICIO 5: WELL TESTING - PRUEBAS INICIALES Y EXTENSAS
   Color: Verde oscuro corporativo | Layout: Normal (carrusel izquierda)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-5 {
  --stripe-color-r: 34;
  --stripe-color-g: 139;
  --stripe-color-b: 34;
  --stripe-height-custom: 500px;
  --stripe-position-x: -10px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.75;
  --stripe-flip: -1;
  --stripe-direction: to left;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🟢 SERVICIO 6: MANTENIMIENTO MAYOR Y MENOR DE EQUIPOS
   Color: Verde oscuro corporativo | Layout: Intercalado (carrusel derecha)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-6 {
  --stripe-color-r: 34;
  --stripe-color-g: 139;
  --stripe-color-b: 34;
  --stripe-height-custom: 500px;
  --stripe-position-x: 1300px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.7;
  --stripe-direction: to left;
}

/* Layout intercalado: ancho extendido */
.stripe-servicio-6.page-stripe {
  width: calc(50vw + 75%);           /* Ancho para intercalado */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔵 SERVICIO 7: VENTA DE EQUIPOS Y REPUESTOS
   Color: Azul oscuro corporativo | Layout: Normal (carrusel izquierda)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-7 {
  --stripe-color-r: 0;
  --stripe-color-g: 51;
  --stripe-color-b: 102;
  --stripe-height-custom: 500px;
  --stripe-position-x: 300px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.7;
  --stripe-direction: to right;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔵 SERVICIO 8: METROLOGÍA
   Color: Azul cielo corporativo | Layout: Intercalado (carrusel derecha)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-8 {
  --stripe-color-r: 135;
  --stripe-color-g: 206;
  --stripe-color-b: 250;
  --stripe-height-custom: 500px;
  --stripe-position-x: 1300px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.75;
  --stripe-direction: to left;
}

/* Layout intercalado: ancho extendido */
.stripe-servicio-8.page-stripe {
  width: calc(50vw + 70%);           /* Ancho para intercalado */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🟢 SERVICIO 9: CONSTRUCCIÓN Y MONTAJE DE FACILIDADES - SOLDADURA
   Color: Verde oscuro corporativo | Layout: Normal (carrusel izquierda)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stripe-servicio-9 {
  --stripe-color-r: 34;
  --stripe-color-g: 139;
  --stripe-color-b: 34;
  --stripe-height-custom: 500px;
  --stripe-position-x: 5px;
  --stripe-position-y: 100px;
  --stripe-opacity-start: 0.7;
  --stripe-direction: to right;
}

/* ═══════════════════════════════════════════════════════════════════
   📱 AJUSTES RESPONSIVE ESPECÍFICOS PARA SERVICIOS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✅ LAS FRANJAS ESTÁN OCULTAS EN RESPONSIVE (ver reglas arriba)
   ✅ Estas reglas están desactivadas porque display:none las oculta
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ═══════════════════════════════════════════════════════════════════ */

/* Las franjas están ocultas en responsive con display:none !important */
/* Solo se muestran en escritorio (>992px) */

/* ═══════════════════════════════════════════════════════════════════
   📚 EJEMPLOS DE USO - DIRECCIONES Y ROTACIONES
   ═══════════════════════════════════════════════════════════════════ */

/*
🎯 EJEMPLOS DE CONFIGURACIÓN:

1. FRANJA QUE SE DESVANECE DE IZQUIERDA A DERECHA (por defecto):
   --stripe-direction: to right;
   --stripe-flip: 1;

2. FRANJA QUE SE DESVANECE DE DERECHA A IZQUIERDA:
   --stripe-direction: to left;
   --stripe-flip: 1;

3. FRANJA INVERTIDA HORIZONTALMENTE:
   --stripe-direction: to right;
   --stripe-flip: -1;

4. COMBINACIÓN: DERECHA A IZQUIERDA + INVERTIDA:
   --stripe-direction: to left;
   --stripe-flip: -1;

🔧 USO PRÁCTICO:

Para cambiar un servicio específico:
.stripe-servicio-X {
  --stripe-direction: to left;        // Cambia dirección
  --stripe-flip: -1;                  // Invierte horizontalmente
}

Para usar clases de utilidad:
<div class="page-stripe stripe-servicio-1 stripe-right-to-left stripe-flipped">

🎨 EFECTOS VISUALES CONSEGUIDOS:

• stripe-fade-from-left: Sólido en izquierda → transparente derecha
• stripe-fade-from-right: Sólido en derecha → transparente izquierda  
• stripe-fade-to-center: Gradiente hacia el centro (invertido)

*/