/* ==========================================================================
   FX Informática — SICE Plus (micro-página)
   --------------------------------------------------------------------------
   Carga despues de fx-custom.css y fx-brand-overrides.css, que ya aportan
   el switch de idioma, los logos del footer, el menu y el formulario.

   Aca va SOLO lo propio de esta pagina.

   Se descartaron al extraer (12 clases sin markup que las use):
     .example1 · .parallax · .parallax2 · .parallax3 · .card-container ·
     .card-flip · .front · .back · .tarjetacolorbordetop · .parallaxsiceplus5
   .tarjetacolorbordetop ademas estaba definida dos veces: en el <head> y en
   un <style> suelto en medio del <body>.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Fondo de la seccion "Capacidades clave"

   La imagen (comercio-exterior-software-sice11.jpg, 1347x461) es un mapamundi
   gris claro con graficos de dona: un fondo decorativo detras del texto.

   La configuracion original combinaba tres cosas que se llevan mal:
       background-size: auto         -> a tamano natural, no escala
       background-repeat: repeat     -> se mosaica para cubrir
       background-attachment: fixed  -> anclado al viewport, no al elemento
   El resultado es un mosaico anclado a la ventana, del que cada tramo del
   elemento muestra un recorte distinto. En el padding superior de
   .section-height-2 caia una porcion sin mapa que se leia como una franja
   ajena, separada del hero.

   Con cover + no-repeat + scroll la imagen se ajusta al elemento y se ve
   una sola vez, completa y predecible.
   ------------------------------------------------------------------------- */
.parallaxsiceplus1 {
	background-image: url("../img/backgrounds/comercio-exterior-software-sice11.jpg");
	min-height: 150px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

/* -------------------------------------------------------------------------
   2. Cajas de caracteristicas
   ------------------------------------------------------------------------- */
.feature-box {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Antes era #007bff, el azul de Bootstrap por defecto. El de marca es #0092cd. */
.feature-box-icon {
	color: #0092cd;
}

@media (prefers-reduced-motion: reduce) {
	.feature-box,
	.feature-box:hover {
		transition: none;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   3. Boton "Solicitar Demo" del header
   ------------------------------------------------------------------------- */
.sice-demo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.sice-demo-btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   4. Hero en mobile
   El hero de SICE Plus tiene mas contenido que el de la home: subtitulo,
   una lista de 3 bullets y DOS botones. La regla original ocultaba en
   mobile el <p>, el <ul> y TAMBIEN los .btn, con lo que el hero quedaba
   sin ninguna via de contacto.
   Aca se ocultan subtitulo y bullets (no entran), pero los botones quedan.
   El tamano del titulo lo maneja .hero-title desde fx-custom.css.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#carouselExampleIndicators .carousel-item.active .custom-section-svg ul {
		display: none !important;
	}

	#carouselExampleIndicators .carousel-item.active .custom-section-svg .btn {
		display: inline-flex !important;
		margin-left: 0 !important;
		padding: 0.4rem 0.8rem !important;
		font-size: 0.6875rem !important;
		border-width: 2px !important;
	}

	#carouselExampleIndicators .carousel-item.active .custom-section-svg .btn + .btn {
		margin-top: 0.4rem !important;
	}
}
