/* ==========================================================================
   FX Informática — Estilos propios de la home
   --------------------------------------------------------------------------
   Consolidado de los 13 bloques <style> que estaban incrustados en index.php.
   Carga despues de theme*.css y skin.css, antes de fx-brand-overrides.css.

   Se descartaron al extraer:
     · .example1            (3 lineas)   marquesina, sin markup en la pagina
     · .sice-plus-*         (356 lineas) diseno viejo de SICE Plus, reemplazado
                                         por la seccion parallax con .fondoblanco1
     · .parallax2 .parallax3 (8 lineas)  sin markup en la pagina
     · .atlwdg-*            (~50 lineas) widget de Atlassian, no se carga
     · .carousel-caption    (4 lineas)   sin markup en la pagina
     · copia scoped de .card-flip dentro de .history-vision-section (duplicada)

   INDICE
     1. Parallax
     2. Tarjetas flip (Historia / Vision / Estrategia)
     3. Seccion Historia, Vision y Estrategia
     4. Switch de idioma
     5. Carousel del hero — responsive
     6. Contadores — responsive
     7. SICE Plus parallax — responsive
     8. Seccion Productos
     9. Seccion Beneficios
    10. Seccion Servicios
    11. Logos del footer
   ========================================================================== */


/* =========================================================================
   1. Parallax
   ========================================================================= */


.parallax {
	background-image: url("../img/slide15d.webp");
	min-height: 500px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* iOS/Safari no soporta background-attachment: fixed — el fondo se agranda y
   salta al scrollear. En dispositivos tactiles se pasa a scroll.
   El override de .modern-products-section esta junto a su propia regla, mas
   abajo: aca quedaria antes y perderia la cascada. */
@media (hover: none) {
	.parallax {
		background-attachment: scroll;
	}
}


/* =========================================================================
   2. Tarjetas flip (Historia / Vision / Estrategia)
   ========================================================================= */


.card-container {
	display: grid;
	perspective: 700px;
}

.card-flip {
	display: grid;
	grid-template: 1fr / 1fr;
	grid-template-areas: "frontAndBack";
	transform-style: preserve-3d;
	transition: all 0.7s ease;
}

.front  { grid-area: frontAndBack; }
.back   { grid-area: frontAndBack; transform: rotateY(-180deg); }

.card-flip div {
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* El flip por :hover solo donde hay hover real. En tactil no existe, y el
   dorso de la tarjeta quedaba inalcanzable. */
@media (hover: hover) and (pointer: fine) {
	.card-container:hover .card-flip {
		transform: rotateY(180deg);
	}
}

/* Tactil y teclado: la clase la pone/saca el handler de js/fx-flip-cards.js */
.card-container.is-flipped .card-flip {
	transform: rotateY(180deg);
}

.card-container {
	cursor: pointer;
}

.card-container:focus {
	outline: none;
}

.card-container:focus-visible {
	outline: 3px solid #0092cd;
	outline-offset: 4px;
	border-radius: 6px;
}

/* Pista de "Leer mas": antes era un <span> azul suelto que parecia link pero
   no lo era. #007ba3 en vez de #0092cd para pasar AA en texto chico. */
.card-flip-hint {
	color: #007ba3;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.card-container:hover .card-flip-hint,
.card-container.is-flipped .card-flip-hint {
	color: #0092cd;
}

@media (prefers-reduced-motion: reduce) {
	.card-flip {
		transition: none;
	}
}


/* =========================================================================
   3. Seccion Historia, Vision y Estrategia
   ========================================================================= */

	/* Estilos para la sección Historia, Visión y Estrategia */
	.history-vision-section {
		background-image: url('../img/patterns/5184157.V2.jpg');
		background-repeat: repeat;
		background-position: center;
		background-size: cover;
		position: relative;
		overflow: hidden;
	}
	
	.history-vision-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.25);
		z-index: 0;
	}
	
	.history-vision-section .container {
		position: relative;
		z-index: 1;
	}
	
	
	
	
	
	


/* =========================================================================
   4. Switch de idioma
   ========================================================================= */

    .language-switch {
        display: flex;
        align-items: center;
        gap: 10px; /* Espaciado entre elementos */
        cursor: pointer;
    }

    .lang-text {
        font-size: 10px;
        font-weight: bold;
        transition: color 0.3s ease-in-out;
    }

    .toggle-checkbox {
        display: none;
    }

    .toggle-label {
        width: 50px; /* Ancho del switch */
        height: 26px;
        background-color: #a5a5a5;
        border-radius: 13px;
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .toggle-switch {
        position: absolute;
        width: 22px;
        height: 22px;
        background: white;
        border-radius: 50%;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        transition: all 0.3s ease-in-out;
    }

    .toggle-checkbox:checked + .toggle-label {
        background-color: #a5a5a5; /* Verde cuando está en inglés */
    }

    .toggle-checkbox:checked + .toggle-label .toggle-switch {
        left: calc(100% - 25px);
    }

  
    .toggle-checkbox:not(:checked) ~ [id^='textENG'] {
        color: rgba(0, 0, 0, 0.3);
    }

    .toggle-checkbox:checked ~ [id^='textES'] {
        color: rgba(0, 0, 0, 0.3);
    }

    
    @media (max-width: 991px) {
        .language-switch {
            justify-content: center;
            width: 100%;
        }
    }


/* =========================================================================
   5. Carousel del hero
   ========================================================================= */

/* ALTURA DEL SLIDE — vale para todos los anchos.

   El PNG del hero es <img position:relative>, o sea un elemento inline: queda
   apoyado sobre la linea base y el navegador reserva debajo el espacio del
   descender. Ese hueco hace que .custom-section-svg mida "imagen + hueco".

   Y el video es position:absolute con height:99% DEL CONTENEDOR, no de la
   imagen. Resultado: 99% de (imagen + hueco) puede ser mas alto que la
   imagen, y el video asoma por debajo como una franja.

   El hueco es fijo en px (depende del line-height) mientras que la imagen
   escala con el ancho, asi que cuanto mas chica la ventana, mas se nota.

   display:block elimina el hueco; el video pasa a 100% para cubrir exacto.
   Antes esto estaba dentro de @media (max-width: 767px) y solo arreglaba
   el caso mobile. */
.carousel-item .custom-section-svg > img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.carousel-item .custom-section-svg > video {
	height: 100% !important;
}


/* =========================================================================
   5b. Carousel del hero — responsive
   ========================================================================= */

@media (max-width: 767px) {

	/* El contenedor de texto sigue en position:absolute como lo define el
	   theme (fxinformaticastyles.css:277), centrado al 43%.

	   COMPOSICION: el texto va a la izquierda y el lado derecho queda libre
	   para el grafico del slide, que arranca cerca del 50% del ancho. El
	   original usaba 40vw (demasiado angosto, el titulo entraba en el 40% de
	   la pantalla); 54vw deja respirar el titulo sin invadir el grafico.

	   LETTER-SPACING: el h1 lleva .negative-ls-1 del theme (theme.css:4892,
	   -1px). A 49px de desktop eso es un -2%, el apretado normal de un
	   titular; a 16px es un -6%, y las letras se pegan. Se neutraliza.

	   TEXT-SHADOW: red de seguridad. El titulo es blanco sobre video, y el
	   contraste no esta garantizado en todos los frames. */
	.carousel-item .hero-title {
		font-size: clamp(16px, 4.6vw, 23px) !important;
		max-width: 54vw;
		text-align: left;
		letter-spacing: normal !important;
		line-height: 1.28 !important;   /* gana a .line-height-1-1 del theme (1.1 !important) */
		margin-bottom: 0.55rem !important;
		padding-bottom: 0 !important;
		padding-top: 0 !important;
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
		hyphens: none;
	}

	/* El subtitulo se sigue ocultando por espacio. */
	.carousel-item p {
		display: none !important;
	}

	.carousel-item .container {
		text-align: left;
	}

	.carousel-item .container .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* BOTON
	   Antes estaba oculto en mobile y el hero quedaba sin CTA. Vuelve, pero
	   escalado: el borde de 4px y el padding de desktop lo hacian ocupar
	   casi media pantalla. */
	.carousel-item a.btn {
		display: inline-flex !important;
		align-items: center;
		width: auto;
		max-width: 54vw;
		margin-left: 0 !important;
		padding: 0.4rem 0.8rem !important;
		font-size: 0.6875rem !important;
		letter-spacing: 0.03em;
		border-width: 2px !important;
	}

	.carousel-item a.btn .custom-arrow-icon {
		margin-left: 0.35rem !important;
		transform: scale(0.65);
	}

	/* Titulo corto ("ISO 27001", 9 caracteres). Con el cuerpo de los titulos
	   largos quedaba perdido en el slide: una sola linea chiquita en medio
	   del banner. Al ser una declaracion y no una frase, va mas grande. */
	.carousel-item .hero-title-compact {
		font-size: clamp(26px, 8vw, 40px) !important;
		max-width: 54vw;
		line-height: 1.1 !important;
	}
}

/* -------------------------------------------------------------------------
   Tablet y desktop medio (768px - 1599px)
   Sin esto mandan las clases fijas del theme y el titular salta en escalones:
   23px (mobile) -> 32px (text-8) -> 49px (text-xl-12 desde 1200px). Los tres
   slides tienen titulos de largo muy distinto, asi que esos saltos se notan
   como cambios de disposicion al pasar de un breakpoint a otro.
   Aca la escala es continua y coincide en los bordes con los tramos vecinos.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1599px) {
	.carousel-item .hero-title {
		font-size: clamp(26px, 3.1vw, 49px) !important;
		line-height: 1.22 !important;
		letter-spacing: -0.5px;
	}

	.carousel-item .hero-title-compact {
		font-size: clamp(40px, 4.4vw, 64px) !important;
	}
}

/* -------------------------------------------------------------------------
   Pantallas grandes (>=1600px)
   Las clases text-* del theme son em sobre un body de 14px, o sea tamanos
   fijos: .text-xl-12 = 3.5em = 49px tanto en un monitor de 1440 como en uno
   de 2560. En 4K el titular del hero queda diminuto frente al alto del slide.
   Aca la tipografia del hero pasa a escalar con el viewport.
   El piso de cada clamp coincide con el valor fijo del theme, asi que por
   debajo de 1600px no cambia nada.
   ------------------------------------------------------------------------- */
@media (min-width: 1600px) {
	.carousel-item .hero-title {
		font-size: clamp(49px, 3.1vw, 86px) !important;
		line-height: 1.18 !important;  /* 4 lineas de titular a 79px con 1.1 quedaban apretadas */
		margin-bottom: 1.6rem !important;
	}

	/* A este cuerpo, los margenes mb-xl-4 / pb-3 del theme (24px fijos) quedan
	   proporcionalmente diminutos y el bloque se lee todo pegado. */
	.carousel-item p {
		margin-bottom: 2rem !important;
		padding-bottom: 0 !important;
		max-width: 46ch;
	}

	/* El titulo corto puede permitirse mas cuerpo sin desbordar. */
	.carousel-item .hero-title-compact {
		font-size: clamp(64px, 4vw, 110px) !important;
	}

	.carousel-item p {
		font-size: clamp(16px, 1.05vw, 26px) !important;
		line-height: 1.5;
	}

	.carousel-item a.btn {
		font-size: clamp(14px, 0.78vw, 19px) !important;
		padding: 0.9rem 2rem !important;
	}
}

/* Pantallas muy angostas (iPhone SE, 320px) */
@media (max-width: 400px) {
	/* A 320-400px las mismas palabras necesitan proporcionalmente mas ancho.
	   Se da un poco mas de caja (58vw) en vez de seguir bajando el cuerpo,
	   que es lo que estaba volviendo el titular ilegible. */
	.carousel-item .hero-title {
		max-width: 58vw;
		font-size: clamp(14px, 4.5vw, 18px) !important;
		line-height: 1.3 !important;
		letter-spacing: 0 !important;
	}

	.carousel-item a.btn {
		max-width: 58vw;
		padding: 0.35rem 0.7rem !important;
		font-size: 0.6875rem !important;
	}

	.carousel-item .hero-title-compact {
		font-size: clamp(22px, 7.5vw, 30px) !important;
		max-width: 58vw;
	}
}


/* =========================================================================
   6. Contadores — responsive
   ========================================================================= */

@media (max-width: 767px) {
    .counter strong {
        font-size: 32px !important; /* Más chico que el de desktop */
        line-height: 1.1;
    }

    .counter label {
        font-size: 14px !important; /* Etiquetas más chicas */
        display: block;
        margin-top: 5px;
        text-align: center;
    }

    .counter {
        text-align: center;
        padding: 10px 0;
    }

    .row.counters {
        margin-bottom: 0;
    }

    .section.section-primary {
        padding: 30px 0 !important; /* Reduce espacio vertical */
    }
}


/* =========================================================================
   7. SICE Plus parallax — responsive
   ========================================================================= */

	@media (max-width: 576px) {
		.parallax.section.section-parallax .fondoblanco1 {
			padding: 10px !important;
			margin: 10px 0 !important;
		}
		.parallax.section.section-parallax .fondoblanco1 .col-5,
		.parallax.section.section-parallax .fondoblanco1 .col-7,
		.parallax.section.section-parallax .fondoblanco1 .col-sm-4,
		.parallax.section.section-parallax .fondoblanco1 .col-sm-8,
		.parallax.section.section-parallax .fondoblanco1 .col-md-5,
		.parallax.section.section-parallax .fondoblanco1 .col-md-7,
		.parallax.section.section-parallax .fondoblanco1 .col-xl-5,
		.parallax.section.section-parallax .fondoblanco1 .col-xl-7 {
			flex: 0 0 100% !important;
			max-width: 100% !important;
			text-align: center !important;
		}
		.parallax.section.section-parallax .fondoblanco1 img {
			max-width: 85% !important;
			height: auto !important;
			margin: 0 auto !important;
			display: block !important;
		}
		.parallax.section.section-parallax .heading h2 {
			font-size: 1rem !important;
			line-height: 1.4 !important;
		}
	}
	


/* =========================================================================
   8. Seccion Productos
   ========================================================================= */

	/* Estilos para la sección de productos moderna */
	/* El velo blanco va DENTRO del background, no en un ::before.
	
	   Antes la foto se pintaba como background del <section> y el velo como un
	   pseudo-elemento absoluto encima. Son dos cajas distintas: el background
	   cubre el border box y un elemento absoluto se posiciona contra el padding
	   box. Con un borde semitransparente en el medio, y con el redondeo de
	   subpixel que mete background-attachment: fixed (que ancla la imagen al
	   viewport, no al elemento), quedaba una franja de foto cruda, sin filtro,
	   justo en el limite con la seccion de arriba.
	
	   Como capa de gradiente el velo se pinta en la MISMA operacion que la foto:
	   misma caja, mismo recorte, mismo redondeo. No se pueden desalinear. */
	.modern-products-section {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
			url("../img/slide15E.jpg");
		background-attachment: fixed, fixed;
		background-position: center, center;
		background-repeat: no-repeat, no-repeat;
		background-size: cover, cover;
		position: relative;
		border-top: 1px solid rgba(0, 146, 205, 0.1);
		border-bottom: 1px solid rgba(0, 146, 205, 0.1);
		padding: 80px 0;
		overflow: hidden;
	}

	/* iOS/Safari no soporta background-attachment: fixed. Tiene que ir despues
	   de la regla de arriba para ganarle en la cascada. */
	@media (hover: none) {
		.modern-products-section {
			background-attachment: scroll, scroll;
		}
	}
	
	.products-container {
		position: relative;
		z-index: 1;
	}
	
	.product-card {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 18px;
		padding: 35px 25px;
		position: relative;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		border: 1px solid rgba(0, 146, 205, 0.08);
		box-shadow: 0 5px 25px rgba(0, 146, 205, 0.06);
		overflow: hidden;
		height: auto;
		min-height: 400px;
		display: flex;
		flex-direction: column;
	}
	
	.product-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, #0092cd, #00bcd4);
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}
	
	.product-card:hover::before {
		transform: scaleX(1);
	}
	
	.product-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 15px 40px rgba(0, 146, 205, 0.15);
		border-color: rgba(0, 146, 205, 0.15);
	}
	
	.product-icon-wrapper {
		width: 80px;
		height: 80px;
		background: linear-gradient(135deg, #f8f9fa, #e9ecef);
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20px;
		position: relative;
		overflow: hidden;
		border: 2px solid rgba(0, 146, 205, 0.1);
		transition: all 0.3s ease;
	}
	
	/* Clase especial para agrandar iconos específicos */
	.product-icon-wrapper.large {
		width: 100px;
		height: 100px;
		border-radius: 25px;
	}
	
	.product-icon-wrapper.large .product-icon {
		max-width: 80px;
		max-height: 80px;
	}
	
	.product-card:hover .product-icon-wrapper {
		background: linear-gradient(135deg, #0092cd, #00bcd4);
		border-color: rgba(0, 146, 205, 0.3);
		transform: scale(1.05);
	}
	
	.product-icon {
		max-width: 60px;
		max-height: 60px;
		transition: all 0.3s ease;
		filter: brightness(0.8);
	}
	
	.product-card:hover .product-icon {
		filter: brightness(1.2) contrast(1.1);
		transform: scale(1.1);
	}
	
	.product-image {
		width: 200px;
		height: 95px;
		object-fit: contain;
		margin: 0 auto 20px;
		display: block;
		filter: brightness(1) saturate(1.1);
		transition: all 0.3s ease;
	}
	
	.product-image-large {
		width: 250px;
		height: 130px;
		margin: 0 auto 25px;
	}
	
	.product-card:hover .product-image {
		transform: scale(1.05);
		filter: brightness(1.1) saturate(1.2);
	}
	
	.product-card:hover .product-image-large {
		transform: scale(1.05);
		filter: brightness(1.1) saturate(1.2);
	}
	
	.product-title {
		color: #2c3e50;
		margin-bottom: 15px;
		transition: color 0.3s ease;
		font-weight: 700;
		text-align: center;
	}
	
	.product-card:hover .product-title {
		color: #0092cd;
	}
	
	.product-subtitle {
		font-size: 0.9rem;
		color: #7f8c8d;
		margin-bottom: 15px;
		text-align: center;
		font-weight: 500;
	}
	
	.product-description {
		color: #5a6c7d;
		line-height: 1.6;
		margin-bottom: 20px;
		flex-grow: 1;
		text-align: center;
	}
	
	.modern-expand-btn {
		background: linear-gradient(135deg, #6c757d, #8b949e);
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 25px;
		font-size: 0.9rem;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		display: inline-block;
		text-decoration: none;
		position: relative;
		overflow: hidden;
		margin-top: auto;
		align-self: center;
	}
	
	.modern-expand-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(108, 117, 125, 0.25);
		color: white;
		text-decoration: none;
		background: linear-gradient(135deg, #5a6268, #7d848a);
	}
	
	.modern-expand-btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.3s ease;
	}
	
	.modern-expand-btn:hover::before {
		width: 100%;
		height: 100%;
	}
	
	.product-collapse-content {
		background: rgba(248, 249, 250, 0.8);
		border-radius: 12px;
		padding: 20px;
		margin-top: 15px;
		border: 1px solid rgba(0, 146, 205, 0.1);
	}
	
	.product-section-title {
		background: linear-gradient(135deg, #2c3e50, #34495e);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-align: center;
		margin-bottom: 50px;
		position: relative;
	}
	
	.product-section-title::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 80px;
		height: 3px;
		background: linear-gradient(90deg, #0092cd, #00bcd4);
		border-radius: 2px;
	}
	
	/* Responsive adjustments */
	@media (max-width: 768px) {
		.modern-products-section {
			padding: 60px 0;
		}
		
		.product-card {
			padding: 30px 20px;
			margin-bottom: 25px;
			min-height: 350px;
		}
		
		.product-icon-wrapper {
			width: 70px;
			height: 70px;
			margin-bottom: 15px;
		}
		
		.product-icon-wrapper.large {
			width: 85px;
			height: 85px;
		}
		
		.product-icon {
			max-width: 50px;
			max-height: 50px;
		}
		
		.product-icon-wrapper.large .product-icon {
			max-width: 65px;
			max-height: 65px;
		}
		
		.product-image {
			width: 180px;
			height: 80px;
		}
		
		.product-image-large {
			width: 220px;
			height: 110px;
		}
	}
	


/* =========================================================================
   9. Seccion Beneficios
   ========================================================================= */

	   /* ============================================
	      SECCIÓN BENEFICIOS - ESTILOS AISLADOS
	      No toca otras partes del sitio
	      ============================================ */

	   .fx-benefits-section {
	       position: relative !important;
	       overflow: visible !important;
	       background-color: #ffffff !important;
	       background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(248, 249, 250, 0.5)), url('../img/fondo-figuras-geometricas1200x800.jpg') !important;
	       background-size: contain !important;
	       background-position: center center !important;
	       background-repeat: repeat !important;
	       background-attachment: scroll !important;
	       padding: 0px 0 0px !important;
	   }

	   .fx-benefits-section::before {
	       content: '' !important;
	       position: absolute !important;
	       inset: 0 !important;
	       background: radial-gradient(circle at 50% 50%, rgba(240, 242, 245, 0.15), transparent 70%) !important;
	       pointer-events: none !important;
	       z-index: 0 !important;
	   }

	   .fx-benefits-inner {
	       position: relative !important;
	       z-index: 1 !important;
	       overflow: visible !important;
	   }

	   /* CAROUSEL CONTAINER */
	   .fx-benefits-carousel {
	       overflow: visible !important;
	       padding: 10px 0 !important;
	       width: 100% !important;
	   }

	   .fx-benefits-carousel .owl-stage-outer {
	       overflow: visible !important;
	       padding: 10px 0 !important;
	   }

	   .fx-benefits-carousel .owl-stage {
	       overflow: visible !important;
	       display: flex !important;
	   }

	   /* OWL ITEMS */
	   .fx-benefits-carousel .owl-item {
	       width: 100% !important;
	       display: flex !important;
	       justify-content: center !important;
	       align-items: center !important;
	       padding: 0 20px !important;
	       opacity: 0.35 !important;
	       transition: opacity 0.5s ease !important;
	   }

	   /* ITEM ACTIVO - TARJETA CENTRAL */
	   .fx-benefits-carousel .owl-item.active .fx-benefits-card {
	       opacity: 1 !important;
	   }

	   .fx-benefits-carousel .owl-item.active {
	       opacity: 1 !important;
	   }

	   /* TARJETAS - OPACAS POR DEFECTO */
	   .fx-benefits-carousel .fx-benefits-card {
	       background: rgba(255, 255, 255, 0.88) !important;
	       border-radius: 28px !important;
	       padding: 45px 30px !important;
	       box-shadow: 0 20px 60px rgba(5, 43, 75, 0.15) !important;
	       border: 1px solid rgba(255, 255, 255, 0.7) !important;
	       backdrop-filter: blur(8px) !important;
	       -webkit-backdrop-filter: blur(8px) !important;
	       min-height: 320px !important;
	       transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	       transform: translateY(0) scale(0.95) !important;
	       display: flex !important;
	       flex-direction: column !important;
	       align-items: center !important;
	       justify-content: center !important;
	       text-align: center !important;
	       filter: blur(2px) grayscale(25%) !important;
	       opacity: 0.7 !important;
	   }

	   /* TARJETA CENTRAL ACTIVA */
	   .fx-benefits-carousel .owl-item.active .fx-benefits-card {
	       filter: blur(0px) grayscale(0%) !important;
	       opacity: 1 !important;
	       transform: translateY(0) scale(1) !important;
	       box-shadow: 0 20px 60px rgba(5, 43, 75, 0.15) !important;
	   }

	   .fx-benefits-carousel .fx-benefits-card:hover {
	       background: rgba(255, 255, 255, 0.95) !important;
	       box-shadow: 0 35px 100px rgba(5, 43, 75, 0.3) !important;
	       transform: translateY(-10px) !important;
	       border-color: rgba(0, 146, 205, 0.4) !important;
	       filter: blur(0px) grayscale(0%) !important;
	       opacity: 1 !important;
	   }

	   /* MÉTRICAS (H2) */
	   .fx-benefits-card h2 {
	       color: #002a3f !important;
	       font-size: 2.2rem !important;
	       font-weight: 700 !important;
	       line-height: 1.2 !important;
	       margin-bottom: 15px !important;
	       margin-top: 0 !important;
	       letter-spacing: 0.5px !important;
	       text-shadow: none !important;
	   }

	   .fx-benefits-card h2 i {
	       margin: 0 8px !important;
	       color: #0092cd !important;
	       font-size: 1.8rem !important;
	   }

	   /* ICONOS ANIMADOS */
	   .fx-benefits-card .metric-icon {
	       display: block !important;
	       font-size: 4rem !important;
	       color: #0092cd !important;
	       margin: 20px 0 !important;
	       transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	       animation: iconPulse 2.5s ease-in-out infinite !important;
	       line-height: 1 !important;
	   }

	   .fx-benefits-card:hover .metric-icon {
	       transform: scale(1.2) !important;
	       animation: none !important;
	       filter: drop-shadow(0 0 15px rgba(0, 146, 205, 0.4)) !important;
	   }

	   @keyframes iconPulse {
	       0%, 100% {
	           transform: scale(1) !important;
	       }
	       50% {
	           transform: scale(1.12) !important;
	       }
	   }

	   /* TÍTULOS (H3) */
	   .fx-benefits-card h3 {
	       color: #1a3a52 !important;
	       font-size: 1.35rem !important;
	       font-weight: 700 !important;
	       margin: 15px 0 !important;
	       line-height: 1.4 !important;
	       letter-spacing: 0.3px !important;
	   }

	   /* PÁRRAFOS */
	   .fx-benefits-card p {
	       color: #4a6278 !important;
	       font-size: 0.95rem !important;
	       line-height: 1.7 !important;
	       margin: 0 !important;
	       padding: 0 !important;
	       font-weight: 400 !important;
	       letter-spacing: 0.2px !important;
	   }

	   /* RESPONSIVE - TABLETS */
	   @media (max-width: 992px) {
	       .fx-benefits-carousel .fx-benefits-card {
	           padding: 35px 25px !important;
	           min-height: auto !important;
	       }

	       .fx-benefits-card .metric-icon {
	           font-size: 3.2rem !important;
	       }

	       .fx-benefits-card h2 {
	           font-size: 1.9rem !important;
	       }

	       .fx-benefits-card h3 {
	           font-size: 1.15rem !important;
	       }

	       .fx-benefits-card p {
	           font-size: 0.9rem !important;
	       }
	   }

	   /* RESPONSIVE - DISPOSITIVOS MEDIANOS */
	   @media (max-width: 768px) {
	       .fx-benefits-section {
	           background-attachment: scroll !important;
	           background-size: auto 100% !important;
	           background-position: center center !important;
	           padding: 60px 0 80px !important;
	       }

	       .fx-benefits-carousel .fx-benefits-card {
	           padding: 30px 20px !important;
	       }

	       .fx-benefits-card .metric-icon {
	           font-size: 3rem !important;
	       }

	       .fx-benefits-card h2 {
	           font-size: 1.75rem !important;
	       }
	   }

	   /* RESPONSIVE - MÓVILES */
	   @media (max-width: 576px) {
	       .fx-benefits-section {
	           background-size: auto 150% !important;
	           background-position: center center !important;
	           padding: 50px 0 70px !important;
	       }

	       .fx-benefits-carousel .fx-benefits-card {
	           padding: 25px 18px !important;
	           min-height: auto !important;
	       }

	       .fx-benefits-card .metric-icon {
	           font-size: 2.8rem !important;
	           margin: 15px 0 !important;
	       }

	       .fx-benefits-card h2 {
	           font-size: 1.6rem !important;
	           margin-bottom: 10px !important;
	       }

	       .fx-benefits-card h3 {
	           font-size: 1.1rem !important;
	           margin: 12px 0 !important;
	       }

	       .fx-benefits-card p {
	           font-size: 0.9rem !important;
	           line-height: 1.5 !important;
	       }
	   }

	   /* EXTRA SMALL - MÓVILES PEQUEÑOS */
	   @media (max-width: 480px) {
	       .fx-benefits-carousel .fx-benefits-card {
	           padding: 20px 15px !important;
	       }

	       .fx-benefits-card .metric-icon {
	           font-size: 2.4rem !important;
	       }

	       .fx-benefits-card h2 {
	           font-size: 1.4rem !important;
	       }

	       .fx-benefits-card h3 {
	           font-size: 1rem !important;
	       }

	       .fx-benefits-card p {
	           font-size: 0.85rem !important;
	       }
	   }

	   @media (max-width: 991px) {
	       html, body {
	           overflow-x: hidden !important;
	       }

	       .fx-benefits-section,
	       .fx-benefits-carousel,
	       .fx-benefits-carousel .owl-stage-outer {
	           overflow: hidden !important;
	       }
	   }
	   


/* =========================================================================
   10. Seccion Servicios
   ========================================================================= */

	    /* Estilos modernos para la sección de servicios */
	    .modern-services-section {
	        background: url('../img/backgrounds/bg-fondoservicios2.jpg') repeat;
	        position: relative;
	        border-top: 1px solid rgba(0, 146, 205, 0.1);
	        border-bottom: 1px solid rgba(0, 146, 205, 0.1);
	        padding: 80px 0;
	        overflow: hidden;
	        /* Mismo caso que .modern-products-section: sin esto queda 1px de
	           imagen cruda bajo el borde semitransparente. */
	        background-clip: padding-box;
	    }
	    
	    .modern-services-section::before {
	        content: '';
	        position: absolute;
	        top: 0;
	        left: 0;
	        right: 0;
	        bottom: 0;
	        background: radial-gradient(ellipse at center bottom, rgba(0, 146, 205, 0.02) 0%, transparent 60%);
	        z-index: 0;
	    }
	    
	    .services-container {
	        position: relative;
	        z-index: 1;
	    }
	    
	    .service-card {
	        background: rgba(255, 255, 255, 0.98);
	        border-radius: 18px;
	        padding: 35px 25px;
	        position: relative;
	        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	        border: 1px solid rgba(0, 146, 205, 0.08);
	        box-shadow: 0 5px 25px rgba(0, 146, 205, 0.06);
	        overflow: hidden;
	        height: auto;
	        min-height: 400px;
	        display: flex;
	        flex-direction: column;
	    }
	    
	    .service-card::before {
	        content: '';
	        position: absolute;
	        top: 0;
	        left: 0;
	        right: 0;
	        height: 3px;
	        background: linear-gradient(90deg, #0092cd, #00bcd4);
	        transform: scaleX(0);
	        transition: transform 0.3s ease;
	    }
	    
	    .service-card:hover::before {
	        transform: scaleX(1);
	    }
	    
	    .service-card:hover {
	        transform: translateY(-8px);
	        box-shadow: 0 15px 40px rgba(0, 146, 205, 0.15);
	        border-color: rgba(0, 146, 205, 0.15);
	    }
	    
	    .service-icon-wrapper {
	        width: 80px;
	        height: 80px;
	        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
	        border-radius: 20px;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        margin: 0 auto 20px;
	        position: relative;
	        overflow: hidden;
	        border: 2px solid rgba(0, 146, 205, 0.1);
	        transition: all 0.3s ease;
	    }
	    
	    .service-card:hover .service-icon-wrapper {
	        background: linear-gradient(135deg, #0092cd, #00bcd4);
	        border-color: rgba(0, 146, 205, 0.3);
	        transform: scale(1.05);
	    }
	    
	    .service-icon {
	        max-width: 60px;
	        max-height: 60px;
	        transition: all 0.3s ease;
	        filter: brightness(0.8);
	    }
	    
	    .service-card:hover .service-icon {
	        filter: brightness(1.2) contrast(1.1);
	        transform: scale(1.1);
	    }
	    
	    .service-title {
	        color: #2c3e50;
	        margin-bottom: 15px;
	        transition: color 0.3s ease;
	        font-weight: 700;
	    }
	    
	    .service-card:hover .service-title {
	        color: #0092cd;
	    }
	    
	    .service-description {
	        color: #5a6c7d;
	        line-height: 1.6;
	        margin-bottom: 20px;
	        flex-grow: 1;
	    }
	    
	        .modern-service-btn {
        background: linear-gradient(135deg, #6c757d, #8b949e);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 25px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        margin-top: auto;
        align-self: center;
    }
    
    .modern-service-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(108, 117, 125, 0.25);
        color: white;
        text-decoration: none;
        background: linear-gradient(135deg, #5a6268, #7d848a);
    }
	    
	    .modern-service-btn::before {
	        content: '';
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        width: 0;
	        height: 0;
	        background: rgba(255, 255, 255, 0.2);
	        border-radius: 50%;
	        transform: translate(-50%, -50%);
	        transition: all 0.3s ease;
	    }
	    
	    .modern-service-btn:hover::before {
	        width: 100%;
	        height: 100%;
	    }
	    
	    .service-collapse-content {
	        background: rgba(248, 249, 250, 0.8);
	        border-radius: 12px;
	        padding: 20px;
	        margin-top: 15px;
	        border: 1px solid rgba(0, 146, 205, 0.1);
	    }
	    
	    .service-section-title {
	        background: linear-gradient(135deg, #2c3e50, #34495e);
	        -webkit-background-clip: text;
	        -webkit-text-fill-color: transparent;
	        background-clip: text;
	        text-align: center;
	        margin-bottom: 50px;
	        position: relative;
	    }
	    
	    .service-section-title::after {
	        content: '';
	        position: absolute;
	        bottom: -10px;
	        left: 50%;
	        transform: translateX(-50%);
	        width: 80px;
	        height: 3px;
	        background: linear-gradient(90deg, #0092cd, #00bcd4);
	        border-radius: 2px;
	    }
	    
	    .secondary-services {
	        background: rgba(248, 249, 250, 0.5);
	        border-radius: 20px;
	        padding: 30px 20px;
	        margin-top: 40px;
	        border: 1px solid rgba(0, 146, 205, 0.05);
	    }
	    
	    .secondary-service-item {
	        background: white;
	        border-radius: 12px;
	        padding: 20px;
	        margin-bottom: 15px;
	        border: 1px solid rgba(0, 146, 205, 0.05);
	        transition: all 0.3s ease;
	    }
	    
	    .secondary-service-item:hover {
	        transform: translateY(-3px);
	        box-shadow: 0 8px 20px rgba(0, 146, 205, 0.1);
	        border-color: rgba(0, 146, 205, 0.1);
	    }
	    
	    .secondary-service-icon {
	        width: 50px;
	        height: 50px;
	        filter: opacity(0.8);
	        transition: all 0.3s ease;
	    }
	    
	    .secondary-service-item:hover .secondary-service-icon {
	        filter: opacity(1) brightness(1.1);
	        transform: scale(1.05);
	    }
	    
	    /* Responsive adjustments */
	    @media (max-width: 768px) {
	        .modern-services-section {
	            padding: 60px 0;
	        }
	        
	        .service-card {
	            padding: 30px 20px;
	            margin-bottom: 25px;
	            min-height: 350px;
	        }
	        
	        .service-icon-wrapper {
	            width: 70px;
	            height: 70px;
	            margin-bottom: 15px;
	        }
	        
	        .service-icon {
	            max-width: 50px;
	            max-height: 50px;
	        }
	        
	        .secondary-services {
	            padding: 25px 15px;
	        }
	    }
	    


/* =========================================================================
   11. Logos del footer
   ========================================================================= */

		
		/* Estilos para logo CESSI */
		.cessi-logo {
			transition: all 0.3s ease;
			border-radius: 4px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			max-width: none !important;
			width: 180px !important;
			height: 64px !important;
		}
		.cessi-logo:hover {
			opacity: 0.9;
			transform: scale(1.02);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		}
		
		/* Estilos para el contenedor de logos */
		.footer-logos-container {
			gap: 2rem;
			align-items: center;
		}

		/* Forzar layout horizontal solo en pantallas grandes */
		@media (min-width: 993px) {
			.footer-logos-container {
				flex-direction: row !important;
			}
		}

		/* Ajustar alineación vertical de logos con diferentes alturas */
		.footer-logos-container a {
			display: flex;
			align-items: center;
		}

		/* Asegurar que el enlace de CESSI cubra toda el área del logo */
		.footer-logos-container a[href*="cessi"] {
			display: block !important;
			width: 180px;
			height: 64px;
			text-decoration: none;
			position: relative;
			z-index: 10;
			cursor: pointer;
		}
		
		.footer-logos-container a[href*="cessi"]:hover {
			text-decoration: none;
			opacity: 0.9;
		}
		
		.footer-logos-container a[href*="cessi"] img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
			pointer-events: none;
		}
		
		/* Asegurar que el enlace sea clickeable en toda el área */
		.footer-logos-container a[href*="cessi"]:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		
		@media (max-width: 992px) {
			.footer-logos-container {
				flex-direction: column !important;
				gap: 1.5rem !important;
				align-items: center !important;
			}
		}

		@media (max-width: 768px) {
			.cessi-logo {
				width: 140px !important;
				height: 50px !important;
			}
			
			.footer-logos-container a[href*="cessi"] {
				width: 140px;
				height: 50px;
				display: block !important;
				position: relative;
				z-index: 10;
				cursor: pointer;
			}
			
			.footer-logos-container {
				flex-direction: column !important;
				gap: 1.5rem !important;
				align-items: center !important;
			}
		}